HTML的学习记录

<br /> 标签在 HTML 页面中创换行符。

<hr /> 标签在 HTML 页面中创建水平线。

段落是通过 <p> 标签定义的。

浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

文本格式

<b>This text is bold</b>字体加粗
<strong>This text is strong</strong>强调文本
<big>This text is big</big>字体加大
<em>This text is emphasized</em>定义文字斜体
<i>This text is italic</i>定义文字斜体
<small>This text is small</small>缩小文本
<sub>subscript</sub>下标
<sup>superscript</sup>上标

<pre> </pre>预格式文本。

<del>二十</del> <ins>十二</ins> 删除文本和下划线文本

<abbr title="xxx">xxx</abbr> 定义缩写

<address> </address>定义地址

<bdo dir="rtl"> Here is some Hebrew text </bdo>定义文字方向

<blockquote> 定义从其他来源引用的节。
<dfn> 定义项目或缩略词的定义。
<q> 定义短的行内引用。
<cite> 定义著作的标题。

css的引用：

h1{ } 直接修改h1部分

.head{ } 用class=“head” 来引用

#head{ } 用id=“head” 来引用

去掉超链接的下划线

<h3><a href="#">这是一个超链接，未去掉下划线</a></h3> <h3><a href="#" style="text-decoration: none">这是一个超链接，去掉下划线</a></h3>

使用 name 属性创建 HTML 页面中的书签。

<a name="label">锚（显示在页面上的文本）</a>

在新的浏览窗口打开超链接

<a href="#" target="_blank">该链接会在新窗口中打开</a>

连接到同一个页面的不同位置

<a href="#c3">会跳转到name值为c3的位置</a>
<p name="c3">会跳转这个位置</p>

跳出框架

<a href="#" target="_top">会跳出框架</a>

超链接发送邮件

<a href="mailto:xxx@xxx?subject=内容">发送邮件</a>

图像的插入：

<img src="url" alt="替换文本书属性，图片显示失败，则显示该文字">

图片位置的排列

<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="#"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="#" align="bottom"> 在文本中</p>
<p>图像 <img src ="#" align="middle"> 在文本中</p>
<p>图像 <img src ="#" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

<p>
    <img src ="#" align ="left">
    带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
    <img src ="#" align ="right">
    带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

改变 img 标签的 "height" 和 "width" 属性的值

<img src="#.jpg" width="50" height="50">

创建图像映像

<img src="images/02.jpg" border="0" usemap="#map" alt="map" />
//usemap的值必须与name相同，
<map name="map" id="map">
    <area
            shape="rect"//矩形区域
            coords="3689,261,3973,489"//像素区域
            href ="/images/01.jpg"
            target ="_blank"
            alt="Sun">
</map>

表格：

每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。

表格的表头使用 <th> 标签进行定义

border定义边框

<caption>定义表格的标题</caption>

合并单元格

<td>的属性

<th rowspan="2">姓名</th>  姓名占两行

<th colspan="2">电话</th>  电话占两列

<h4>横跨两列的单元格：</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
    <tr>
        <th rowspan="2">姓名</th>
        <td>Bill Gates</td>

    </tr>
    <tr>

        <td>tong</td>

    </tr>
    <tr>
        <th>电话</th>
        <td>555 77 854</td>
    </tr>
</table>

使用 Cell padding 来创建单元格内容与其边框之间的空白

<table border="1"
        cellpadding="10">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

使用 Cell spacing 增加单元格之间的距离

<table border="1"
       cellspacing="10">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

无序列表

<ul>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ul>

有序列表 (start 表示序号的起始)

<ol start="50">
    <li>咖啡</li>
    <li>牛奶</li>
    <li>茶</li>
</ol>

边框标签

<fieldset>
    <legend align="center">该文字能插入边框</legend>
</fieldset>

frame标签实现框架（主要用于表格的边框）

<p>Table with frame="box":</p>
<table frame="box">
    <tr>
        <th>Month</th>
    </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
    <tr>
        <th>Month</th>
    </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
    <tr>
        <th>Month</th>
    </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
    <tr>
        <th>Month</th>
    </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
    <tr>
        <th>Month</th>
    </tr>
</table>

内联框架iframe

<iframe src="lian2.html" width="200px" height="300px"></iframe>

作为跳转的内联

<iframe src="lian2.html" name="name"></iframe>
<p><a href="lian3.html" target="name">跳转第三个网页，并在内联网页中显示</a></p>

通过name进行跳转

表单的应用

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性

类型描述
text 定义常规文本输入。
radio 定义单选按钮输入（多选的话name名字可以不同）
submit
定义提交按钮（提交表单）

reset 定义重置按钮
性别：<br><form>
        <input type="radio" name="sex" value="male" checked>Male
        <br>
        <input type="radio" name="sex" value="female">Female
    </form>
    爱好：<br><form>
        <input type="radio" name="ai1" value="1" checked>1
        <br>
        <input type="radio" name="ai2" value="2">2
        <br>
        <input type="radio" name="ai3" value="3">3
        <br>
        <input type="radio" name="ai4" value="4">4
    </form>
文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

提交按钮

<input type="submit"> 定义用于向表单处理程序提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面（表单处理程序在表单的 action 属性中指定）

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。
<form action="action_page.php">
Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="get\post">
使用 GET 时，表单数据在页面地址栏中是可见的（默认）

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的、

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：

值描述
_blank 响应显示在新窗口或选项卡中。
_self（默认）响应显示在当前窗口中。
_parent 响应显示在父框架中。
_top 响应显示在窗口的整个 body 中。
framename 响应显示在命名的 iframe 中。

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（多选的话name名字可以不同）
submit	定义提交按钮（提交表单）
reset	定义重置按钮

值	描述
_blank	响应显示在新窗口或选项卡中。
_self（默认）	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

表单属性：

<input> 元素

<input type="text" name="firstname" value="name">//文本类型
<input type="submit" value="Submit">//提交按钮
<input type="reset" value="Reset">//重置类型
<input type="radio" value="单选">//单选

<input type="image">//图片作为提交按钮
<input type="file">

<input type="password"> 定义密码字段

<input type="checkbox"> 定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。

<input type="number"> 用于应该包含数字值的输入字段。能够对数字做出限制。

<input name="num" type="number" max="100" min="90">
<input type="submit" value="提交">

<input type="date"> 用于应该包含日期的输入字段

<input type="range" max="100" min="50"> 显示为滑块控件。

<input type="week"> 允许用户选择周和年

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

<input type="color"> 用于应该包含颜色的输入字段。

<input type="range"> 输入字段能够显示为滑块控件。

<input type="datetime-local"> 允许用户选择日期和时间（无时区）

<input type="email"> 用于应该包含电子邮件地址的输入字段

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）

<select> 元素（下拉列表）

<option> 元素定义待选择的选项。

<select name="aihao">
    <option value="ai1">ai1</option>
    <option value="ai2">ai2</option>
    <option value="ai3">ai3</option>
</select>

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）

<button> 元素

<button> 元素定义可点击的按钮

<input type="submit" value="Submit" οnclick="alert('hello')"><br>
<button type="button" οnclick="alert('world')">按钮</button><br>

<datalist> 元素

为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input type="text" name="aihao" list="aihao">
<datalist id="aihao">  //下拉列表的id必须与输入的list相等
    <option value="ai1">ai1</option>
    <option value="ai2">ai2</option>
    <option value="ai3">ai3</option>
</datalist>
<input type="submit" value="Submit"><br>

input的属性值

value 属性规定输入字段的初始值
<input type="text" value="初始值">
<input type="text" value="">
readonly 属性规定输入字段为只读（不能修改）
只读部分：<input type="text" value="初始值" readonly>
可以修改：<input type="text" value="">
disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交。
<input type="text" value="初始值" disabled><br>
<input type="text" value="">
size 属性规定输入字段的尺寸（以字符计）

maxlength 属性规定输入字段允许的最大长度
<input type="text" value="" maxlength="50"><br>
<input type="text" value="" size="40">
novalidate 属性设置，则 novalidate 规定在提交表单时不对表单数据进行验证。
<form action="action_page.php" novalidate>
    E-mail: <input type="email" name="user_email">
    <input type="submit">
</form> 
autofocus 属性设置，则规定当页面加载时 <input> 元素应该自动获得焦点，无需点击文本框
First name:<input type="text" name="fname" autofocus>
multiple 属性设置，则规定允许用户在 <input> 元素中输入多个的值。
<input type="file" multiple>
placeholder 属性规定用以描述输入字段预期值的提示,该提示会在用户输入值之前显示在输入字段中
用户名：<input type="text" placeholder="此处输入用户名"><br>
密码：<input type="password"  placeholder="此处输入密码">
required 属性设置，则规定在提交表单之前必须填写输入字段,不能为空
用户名：<input type="text" placeholder="此处输入用户名" required><br>
密码：<input type="password"  placeholder="此处输入密码" required><br>
<input type="submit" value="提交">

画布元素

canvas 元素使用 JavaScript 在网页上绘制图像，规定元素的 id、宽度和高度

<canvas id="myCanvas" width="200" height="100"></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");//使用id寻找canvas元素
var cxt=c.getContext("2d");//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
cxt.fillStyle="#FF0000";//染色
cxt.fillRect(0,0,150,75);//规定形状
</script>

嵌入、插入对象

<object> 元素定义 HTML 文档中的嵌入式对象

<embed> 元素也可定义了 HTML 文档中的嵌入式对象

均可插入音乐、网页、视频、图片均可

<audio src="url" controls="controls"></audio>

属性值描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src url 要播放的音频的 URL。

<blockquote>	定义从其他来源引用的节。
<dfn>	定义项目或缩略词的定义。
<q>	定义短的行内引用。
<cite>	定义著作的标题。

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。