零、学习中的补充

1、head中的meta

< meta http-equiv="refresh" content="2;url=http://www.baidu.com">

这段代码表示2s后当前网页会自动refresh跳转到http://www.baidu.com页面。
一般来说，HTML中只有六个标签可以放在head中：title、meta、style、link、script、base。

2、静态页面和动态页面

两者区别：是否与服务器进行数据交互。
带有音频和视频/带有flash动画/带有CSS动画/带有javascript动画的都仍旧是静态页面！动态页面需要用到后端技术与服务器发生数据交互。

3、位图和矢量图

位图适用于展示色彩丰富的图片，而矢量图不适于。
位图的组成单位是“像素”，而矢量图的组成单位是“数学向量”。
位图受分辨率影响，当图片放大或者缩小时会失真；矢量图不受分辨率影响，不会失真。
网页中的图片绝大多数都是位图，而不是矢量图。

一、文本格式化标签

<strong>加粗</strong>
<b>加粗</b>

<em>斜体</em>
<i>斜体</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

<sup>上标</sup>
<sub>下标</sub>

<big>大字号文本</big>
<small>小字号文本</small>

优先使用第一种突出强调的方式，语义化更强。

二、div和span标签

两种标签都可用来布局，没有语义，实质上是盒子，用于存放内容。它们最重要的作用是划分区域，然后结合CSS针对该区域进行样式控制。
区别在于div是块标签，独占一行，理解为大盒子；span标签是行标签，一行上可以放多个span,理解为小盒子。

三、图像标签

<img src="" alt="替换文本" title="指示文本" width="" height="" border="" / >

src和alt是必须属性，src指示图片路径。border的图片边框效果一般由CSS实现。

三、相对路径和绝对路径

相对路径：同一级直接引用；下一级/引用；上一级../引用。（反斜杠）
绝对路径：盘符地址（正斜杠）/网络地址。

四、链接标签

< a href="" target="_blank/_self/_top/_parent">HTML元素< /a>

href是必须属性，target规定打开目标链接的方式。

超链接的分类：

1、外部链接
< a href="http://www.baidu.com">百度< /a>
2、内部链接
< a href="Iframe_test.html">案例网页< /a>
3、空链接
< a href="#">< /a>
4、锚点链接
< a href="#person">个人主页< /a>
< h6 id="person">个人主页< /h6>

五、注释标签和特殊字符

< !-- 我想喝手磨咖啡 -->

快捷键：Ctrl+/

字符实体：& nbsp;& lt;& gt;

六、表格标签

表格不是用来布局，是用来展示数据的。
1、表格结构和属性

表格标题
表头单元格1 表头单元格2
表行单元格1 表行单元格2
表行单元格3 表行单元格4
标准单元格5 标准单元格6

thead/tbody/tfoot使得代码更有逻辑性，也可以很好的结合CSS分块控制样式。表格属性实现的效果通常由CSS实现。

2、合并单元格三部曲

1）先确定是跨行还是跨列合并
2）确定目标单元格，写上合并方式=合并的单元格数量，例如：< td colspan="2">< /td>
3）删除多余的单元格

七、列表标签

1、无序列表 ul>li
无序列表常用于布局。

<ul type="disc/circle/square">
    <li>无序选项1</li>
    <li>无需选项2</li>
    <li>无需选项3</li>
</ul>

2、有序列表 ol>li

<ol type="1/a/A/i/I">
    <li>有序选项1</li>
    <li>有序选项2</li>
    <li>有序选项3</li>
</ol>

3、自定义列表 dl>dt=dd

<dl>
    <dt>联系我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>小米官方</dd>
</dl>

八、表单

从外观来看，表单可以分为8种：单行文本框、密码文本框、单选框、复选框、按钮、多行文本框、下拉列表、文件上传。
1、form标签

< form name="表单名称" method="提交方式：post/get" action="提交地址" target="打开方式" enctype="编码方式" >
表单内容
< /form>

2、表单输入input标签

    <!-- 单行文本框 -->
    单行文本框<input type="text" value="文本默认值" size="文本框长度" maxlength="最大容纳字符数">
    <!-- 密码框 -->
    密码框<input type="password" value="文本默认值" size="文本框长度" maxlength="最大容纳字符数">
    <!-- 单选按钮 -->
    <label><input type="radio" name="单选按钮群组名" value="取值">单选按钮名称</label>
    <!-- 复选框 -->
    <label><input type="checkbox" name="复选按钮群组名" value="取值">复选按钮名称</label>
    <!-- 按钮 -->
    <input type="button" value="普通按钮">      <!-- 结合js做动作 -->
    <input type="submit" value="提交按钮">      <!-- 将数据提交到服务器 -->
    <input type="reset" value="重置按钮">      <!-- 重置表单数据 -->
    <!-- 多行文本框 -->
    <textarea rows="行数" cols="列数" value="取值">文本默认内容</textarea>
    <!-- 上传文件 -->
    <input type="file">

3、下拉列表select标签

    <select size="5" multiple>
        <option>HTML</option>
        <option value="CSS" selected>CSS</option>
        <option>JavaScript</option>
        <option>jQuery</option>
        <option>ES6</option>
        <option>移动Web</option>
    </select>

设置mutiple后，使用"Ctrl+鼠标左键"可以选取多项。size是显示的列表项数。

几乎所有的表单元素都有value属性，这个属性是配合JavaScript和服务器进行操作的。表单元素在无需与服务器进行交互时，不需要写在表单元素form中。

九、框架

内框架，指的是在当前网页中嵌入另一个页面。

<iframe src="http://www.lvyestudy.com" width="200" depth="150"></iframe>
<iframe src="https://www.51cto.com" width="200" height="150"></iframe>

src是必须属性。