参考学习路线：https://zhuanlan.zhihu.com/p/324351537

对前端初恋的感觉——绿叶学习网：http://www.lvyestudy.com/

HTML基本标签

head标签

在HTML中，一般来说，只有6个标签能放在head标签内。

①title标签

在HTML中，title标签唯一的作用就是定义网页的标题。

②meta标签

关键词，给搜索引擎。

在HTML中，meta标签有两个重要的属性：name和http-equiv。

name属性

属性值	说明
keywords	网页的关键字，可以是多个，而不仅仅是一个
description	网页的描述
author	author
copyright	版权信息

重点记住keywords，description。

http-equiv属性

在HTML中，meta标签的http-equiv属性只有两个重要作用：定义网页所使用的编码；定义网页自动刷新跳转。

（1）定义网页所使用的编码

语法：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

说明：

这段代码告诉浏览器该页面所使用的编码是utf-8。不过在HTML5标准中，上面这句代码可以简写为：

<meta charset="utf-8" />

如果你发现页面打开是乱码，很可能就是没有加上这一句代码。在实际开发中，为了确保不出现乱码，我们必须要在每一个页面中加上。

（2）定义网页自动刷新跳转

语法：

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

说明：

这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。实际上，很多“小广告”网站就是用这个来实现页面定时跳转的。

③link标签

在HTML中，link标签用于引入外部样式文件（CSS文件）。这也是属于CSS部分的内容，这里不需要深究。

④style标签

在HTML中，style标签用于定义元素的CSS样式，在HTML中不需要深入研究。

⑤script标签

在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。在JavaScript部分详细学习，这里不需要深究。

⑥base标签

这个标签一点意义都没有，可以直接忽略，知道有这么一个标签就行了。

HTML文本

标签标题

h1~6

这里要注意一下，一个页面一般只能有一个h1标签，而h2到h6标签可以有多个。其中，h1表示的是这个页面的大标题。

 <body>   

<h1>这是一级标题</h1>  
<h2>这是二级标题</h2>    
<h3>这是三级标题</h3>   
<h4>这是四级标题</h4>     
<h5>这是五级标题</h5>    
<h6>这是六级标题</h6>

 </body>

段落标签

<p></p>

换行标签

<br/>

文本标签

（1）粗体标签：strong、b

strong标签和b标签的加粗效果是一样的。不过在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签。这是因为strong标签比b标签更具有语义性。

（2）斜体标签：i、em、cite

在实际开发中，如果想要实现文本的斜体效果，尽量使用em标签，而不是i标签或cite标签。这也是因为em标签比其他两个标签的语义性更好。

（3）上标标签：sup

如果你想要将某个数字或某些文字变成上标效果，只要把这个数字或文字放在标签内就可以了。

 如：<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>

（4）下标标签：sub

同理。

（5）中划线标签：s

中划线效果一般用于显示那些不正确或者不相关的内容，常用于商品促销的标价中。大家在电商网站购物时肯定经常见到这种效果。

不过等学了CSS之后，对于删除线效果，一般用CSS来实现，几乎不会用s标签来实现。

    <p><s>原价:￥6.50/kg</s></p>

（6）下划线标签：u

等学了CSS之后，对于下划线效果，一般用CSS来实现，几乎不会用u标签来实现。

  <p><u>啊啊啊</u>Web技术学习</p>

（7）大字号标签：big
（8）小字号标签：small

重要的文本标签

标签	语义	说明
strong	strong（强调）	粗体
em	emphasized（强调）	斜体
sup	superscripted（上标）	上标
sub	subscripted（下标）	下标

水平线标签

是

<hr/>

div标签

在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。div标签最重要的用途是划分区域，然后结合CSS针对该区域进行样式控制，这一点我们学了CSS才会知道。

块元素和行内元素

标签，也叫“元素”，例如p标签又叫p元素。叫法不同，意思相同。

在HTML中，根据元素的表现形式，一般可以分为两类（暂时不考虑inline-block）。

（1）块元素（block）

在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。(非全部)

块元素	说明
h1~h6	标题元素
p	段落元素
div	div元素
hr	水平线
ol	有序列表
ul	无序列表

（1）块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。

（2）块元素内部可以容纳其他块元素和行内元素。

（2）行内元素（inline）

在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。(常见)

行内元素	说明
strong	粗体元素
em	斜体元素
a	超链接
span	常用行内元素，结合CSS定义样式

（1）行内元素可以与其他行内元素位于同一行。

（2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

特殊符号

空格： &nbsp ; 敲黑板

其他随便了解就行不一定非要代码可以直接输入。

HTML列表

有序列表

在HTML中，有序列表中的各个列表项是有顺序的。有序列表从 ol 开始，到 /ol 结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

<ol>  
    <li>列表项</li>   
    <li>列表项</li> 
    <li>列表项</li>
</ol>

ol，即ordered list（有序列表）；li，即list（列表项）。

在HTML中，我们可以使用type属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。

属性值	列表项符号
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

对于有序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。

无序列表

无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。

<ul>  
    <li>列表项</li> 
    <li>列表项</li>
    <li>列表项</li>
</ul>

ul，即unordered list（无序列表）。li，即list（列表项）。

在无序列表中，type属性取值如下表所示。

属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

跟有序列表一样，对于无序列表的列表项符号，等学了CSS之后，可以放弃type属性，而使用list-style-type属性。

此外，对于无序列表来说，还有以下两点要注意：

（1）ul元素的子元素只能是li，不能是其他元素。
（2）ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。

定义列表

在HTML中，定义列表由两部分组成：名词和描述。

<dl>  
    <dt>名词</dt>    
    <dd>描述</dd>  
    …… </dl>

dl即definition list（定义列表）；dt即definition term（定义名词）；而dd即definition description（定义描述）。

在实际开发中，定义列表虽然用得比较少，但是在某些高级效果（如自定义表单）中也会用到。在HTML入门阶段，了解一下就行。

HTML表格

基本结构

在HTML中，一个表格一般会由以下3个部分组成。

（1）表格：table标签
（2）行：tr标签
（3）单元格：td标签
tr，指的是table row（表格行）；td，指的是table data cell（表格单元格）。

由table和/table表示整个表格的开始和结束，tr和/tr表示行的开始和结束，而td和/td表示单元格的开始和结束。

在表格中，有多少组“tr /tr”，就表示有多少行。

<table>     
    <tr>        
        <td>单元格1</td>     
        <td>单元格2</td>   
    </tr>   
    <tr>       
        <td>单元格3</td>    
        <td>单元格4</td>     
    </tr>
</table>

单元格1	单元格2
单元格3	单元格4

表格标题：caption

一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行。

如：

<table>     <caption>表格标题</caption>。。。。。。。</table>

表头单元格：th

在HTML中，单元格其实有两种：表头单元格，使用th标签；表行单元格，使用td标签。

th，指的是table header cell（表头单元格）。td，指的是table data cell（表行单元格）。

th和td在本质上都是单元格，但是并不代表两者可以互换，两者具有以下两种区别。

当然，对于表头单元格，可能会使用td来代替th，但是不建议这样做。学习HTML的目的就是，在需要的地方用到正确的标签（也就是语义化）。

  <body>  
        <table> 
            <caption>考试成绩表</caption>     
            <tr>            
                <th>姓名</th>    
                <th>语文</th>      
                <th>英语</th>     
                <th>数学</th>    
            </tr>      
            <tr>       
                <td>小明</td>   
                <td>80</td>     
                <td>80</td>     
                <td>80</td>    
            </tr>       
            <tr>       
                <td>小红</td>       
                <td>90</td>       
                <td>90</td>         
                <td>90</td>      
            </tr>       
            <tr>        
                <td>小杰</td>      
                <td>100</td>     
                <td>100</td>     
                <td>100</td>       
            </tr>    
        </table>

表格语义化

一个完整的表格包含：table、caption、tr、th、td。为了更深一地对表格进行语义化，HTML引入了thead、tbody和tfoot标签。

thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

<table>  
    <caption>表格标题</caption>   
    <!--表头-->  
    <thead>    
        <tr>     
            <th>表头单元格1</th>      
            <th>表头单元格2</th>     
        </tr>    
    </thead>   
    <!--表身-->    
    <tbody>       
        <tr>          
            <td>表行单元格1</td>   
            <td>表行单元格2</td>      
        </tr>      
        <tr>          
        <td>表行单元格3</td>        
            <td>表行单元格4</td>     
        </tr>  
    </tbody> 
    <!--表脚--> 
    <tfoot>    
        <tr>         
            <td>标准单元格5</td>          
            <td>标准单元格6</td>       
        </tr>    
    </tfoot> 
</table>

表脚（tfoot）往往用于统计数据的。对于thead、tbody和tfoot标签，不一定全部都上，例如tfoot就很少用。一般情况下，我们都是根据实际需要来使用这些标签。

thead、tbody和tfoot标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚，很多人容易忽略它们。

此外，thead、tbody和tfoot除了使得代码更具有语义之外，还有另外一个重要作用：方便分块来控制表格的CSS样式。

合并行：rowspan

在设计表格时，有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似word的表格合并），这个时候就需要用到“合并行”或“合并列”。这一节，我们先来介绍一下合并行。

在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。

语法：

<td rowspan = "跨越的行数"></td>

<table>
  <tr>
     <td>姓名:</td>    
     <td>小明</td> 
  </tr>     
  <tr>      
      <td rowspan="2">喜欢水果:</td>   
      <td>苹果</td>
  </tr>      
  <tr>           
      <td>香蕉</td>     
  </tr>   
</table>

合并列：colspan

在HTML中，我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

语法

<td colspan = "跨越的列数"></td>

<table>       
    <tr>          
        <td colspan="2">前端开发</td>  
    </tr>      
    <tr>         
        <td>HTML</td>        
        <td>CSS</td>    
        </tr>    
    <tr>     
        <td>JavaScript</td>    
        <td>jQuery</td>     
    </tr>
</table>

HTML图片

图片标签

任何网页都少不了图片，一个图文并茂的页面，可以使得用户体验更好。如果想让网站获得更多的流量，也需要从“图文并茂”这个角度挖掘一下。

在HTML中，我们可以使用img标签来显示一张图片。对于img标签，只需要掌握它的3个属性：src、alt和title。

语法

<img src="" alt="" title="" />

src属性

src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。

任何一个图片必须指定src属性才可以显示。也就是说，src是img标签必不可少的属性。

alt属性和title属性

alt和title都是用于指定图片的提示文字。一般情况下，alt和title的值是相同的。不过两者也有很大的不同。

alt：

<!DOCTYPE html>

实际上，当我们把“img/xxx.png”去掉（也就是图片无法显示）后，此时可以看到浏览器会显示alt的提示文字，如下图所示。如果没有加上alt属性值，图片不显示时，就不会有提示文字。

title：

当我们把鼠标移到图片上时，就会显示title中的提示文字，如下所示。

<!DOCTYPE html>

在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

alt属性的内容是提供给搜索引擎看的，title属性的内容是提供给用户看的

图片路径

相对路径：

绝对路径：

在实际开发中，站内文件不管是图片还是超链接等,都是使用相对路径，几乎不会使用绝对路径。

这是因为如果采用绝对路径，网站文件一旦移动，则所有的路径都可能会失效。因此，只需要掌握相对路径，而绝对路径了解一下就行。

图片格式

在网页中，图片格式有两种：一种是“位图”；另外一种是“矢量图”。

位图

位图，又叫做“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。

在实际开发中，最常见位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。深入理解3种图片适合在哪种情况下使用，在前端开发中是非常重要的。

（1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。
（2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
（3）gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。

这里来总结一下：如果想要展示色彩丰富而高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。

矢量图

矢量图，又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。

矢量图是以一种数学描述的方式来记录内容的图片格式。举个例子，可以使用y=kx来绘制一条直线，当k取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。

矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。

矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。对于矢量图，我们可以使用illustrator或者CorelDRAW这两款软件来处理。

在网页中，很少用到矢量图，除非是一些字体图标（iconfont）。不过作为初学者，只需简单了解一下即可。

对于位图和矢量图的区别，我们总结有以下4点。

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

HTML超链接

a标签

语法：

<a href="链接地址">文本或图片</a>

href表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。

超链接的范围非常广，可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置为超链接，这个叫做“图片超链接”。

target属性

默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，我们可以使用target属性来定义超链接打开窗口的方式。

语法：

<a href="链接地址" target="打开方式"></a>

a标签的target属性取值有4种，如下表所示。

属性值	说明
_self	默认值，在原来窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

一般情况下，只会用到_blank这一个值，也只要记住这一个就够了，其他三个值不需要去深究。默认的self，可加可不加。

锚点链接

有些页面内容比较多，导致页面过长，此时用户需要不停拖动浏览器上的滚动条才可以看到下面的内容。为了方便用户操作，可以使用锚点链接来优化用户体验。

在HTML中，锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到当前页面的某一部分。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <a href="#article">推荐文章</a><br />
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的夏天</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
</body>
</html>

当点击“推荐文章”“推荐音乐”“推荐电影”这3个超链接后，页面就会自动滚动到相应的部分。仔细观察这个例子就可以知道，想要实现锚点链接，需要定义以下2个参数。

其中，id属性就是元素的名称，这个id名是随便起的（一般是英文）。不过在同一个页面中，id是唯一的，也就是说一个页面不允许出现相同的id。

最后要注意一点，a标签的href属性取值时，需要在id前面加上“#”（井号），以表示这是一个锚点链接。

HTML表单

表单介绍

表单标签：（5种）

form、input、textarea、select和option

从外观上来划分，表单可以分为以下8种。

（1）单行文本框
（2）密码文本框
（3）单选框
（4）复选框
（5）按钮
（6）文件上传
（7）多行文本框
（8）下拉列表

form标签

在HTML中，我们都知道表格的行（tr）、单元格（th、td）等都必须放在table标签内部。创建一个表单，跟创建一个表格一样，也必须要把所有表单标签放在form标签内部。

表单跟表格，这是两个完全不一样的概念。记住，常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

语法：

<form>
    //各种表单标签
</form>

例：

<body>
    <form>
        <input type="text" value="这是一个单行文本框"/><br/>

        <textarea>这是一个多行文本框</textarea><br/>

        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>

    </form>
</body>

form标签属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

name属性：

在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，可以使用name属性来给表单进行命名。

例：

<form name="myForm"></form>

method属性：

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。

get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多。

举例：

<form method="post"></form>

action属性：

在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

举例：

<form action="index.php"></form>

target属性：

form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，只会用到“_blank”这一个属性值。

举例：

<form target="_blank"></form>

enctype属性：

在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，不需要设置，除非用到上传文件功能。

input标签

在HTML中，大多数表单都是使用input标签来实现的。

语法：

<input type="表单类型" />

input是自闭合标签，它是没有结束符号的。其中type属性取值：

text-单行文本框

password-密码文本框

radio-单选框

checkbox-多选框

button/submit/reset-按钮
file-文件上传

不同属性对应不同的效果。

input-text：单行文本框

语法：

<input type="text" />


<form method="post">
        姓名：<input type="text" />
    </form>

单行文本框属性：

属性	说明
value	设置文本框的默认值，也就是默认情况下文本框
size	设置文本框的长度
maxlength	设置文本框中最多可以输入的字符数

value属性用于设置单行文本框中默认的文本，如果没有设置，就是空白。

size属性可以用来设置单行文本框的长度，不过在实际开发中，我们一般不会用到这个属性，而是使用CSS来控制。

外观上看不出maxlength加上与不加上有什么区别，不过当输入内容后，发现设置maxlength=”5”的单行文本框最多只能输入5个字符、

input-password密码文本框：

密码文本框在外观上与单行文本框相似，两者拥有相同的属性（value、size、maxlength等）。不过它们是有着本质上的区别的：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

语法：

<input type="password" />

<form method="post">
        账号：<input type="text" /><br />
        密码：<input type="password" />
    </form>

属性同上text单行文本框。

input-radio单选框：

在HTML中，单选框也是使用input标签来实现的，其中type属性取值为“radio”。

语法：

<input type="radio" name="组名" value="取值" />

<form method="post">
        性别:
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
    </form>

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。

checked属性：

在默认情况下，让第一个单选框选中，可以使用checked属性来实现。

可能看到checked属性没有属性值，这是HTML5的最新写法。下面两句代码其实是等价的，不过一般都是采用缩写形式。

 <input type="radio" name="gender" value="男" checked />男
 <input type="radio" name="gender" value="女" />女


 <input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="男" checked="checked" />男

重点：name属性容易遗忘，若不添加name属性，或者同一组单选框选项的name不同，则可导致一组内的单选框都可被选中，所以name属性很重要。只有同一name下的一组数据才能使单选框选项互斥。

input-checkbox复选框：

在HTML中，复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。

语法：

<input type="checkbox" name="组名" value="取值" />

 <form method="post">
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果"/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜"/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>

name和value属性同上单选框，务必要设置。

input-button普通按钮

在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。

语法：

<input type="button" value="取值" />

  <form method="post">
        <input type="button" value="起飞"/>
    </form>

value的取值就是按钮上的文字。

input-submit提交按钮

在HTML中，提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。

语法：

 <input type="submit" value="取值"/>

提交按钮只能提交它“所在form标签”内表单中的内容

input-reset重置按钮

在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。

语法：

<input type="reset" value="取值" />

重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。

button标签

普通按钮、提交按钮以及重置按钮这3种按钮都是使用input标签来实现的。其实还有一种按钮是使用button标签来实现的。

语法：

<button></button>

在实际开发中，比较少用到button标签。

input-file文件上传

文件上传功能的实现需要用到后端技术，文件上传功能经常用到。

在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为file。

语法：

<input type="file" />

textarea标签：多行文本框

单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。

语法：

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。

文本框总结

对于文本框，现在我们可以总结出以下2点。

（1）HTML有3种文本框：单行文本框、密码文本框、多行文本框。
（2）单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。

select标签：下拉列表

在HTML中，下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。为了更好地理解，可以把下拉列表看成是一种“特殊的无序列表”。

语法：

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select标签属性

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

multiple属性：

下拉列表的multiple属性没有属性值，这是HTML5的最新写法。

默认情况下，下拉列表只能选择一项，我们可以通过multiple属性设置下拉列表可以选择多项。想要选取多项，可以使用“Ctrl+鼠标左键”来选取。

 <select multiple>
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
            <option>HTML5</option>
            <option>CSS3</option>
</select>

size属性：

设置下拉列表显示几个列表项，取值为整数。

有些小伙伴将size取值为1、2、3时，会发现Chrome浏览器无效。这是因为Chrome浏览器最低是4个选项，我们只能选取4及以上数字。

  <select size="5">
            <option>HTML</option>
            <option>CSS</option>
        </select>

option标签属性

属性	说明
selected	是否选中
value	选项值

selected属性：

 <select size="5">
            <option>HTML</option>
            <option>CSS</option>
            <option selected>jQuery</option>
        </select>

selected属性表示列表项是否被选中，它是没有属性值的，这也是HTML5的最新写法，这个跟单选框中的checked属性也是一样的。

value属性：

对于value属性，不多说，几乎所有表单元素都有value属性，这个属性是配合JavaScript以及服务器进行操作的。

语法：

 <select size="5">
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
        </select>

敲黑板：标签label

语义化规范：为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。

同时还能增加用户体验。

如：（除了选项同时也适用于文本框）

<label><input type="radio" name="gender" value="男" />男</label>
<label><input type="radio" name="gender" value="女" />女</label>

表单注意事项：

1、表单元素那么多，而且每一种自己还有好几个属性，应该怎么记忆呢？

对于初学者来说，表单记忆是最关心也是最为头疼的一件事。在HTML入门时，我们不需要花太多时间去记忆这些标签或属性，只需要感性认知即可。忘了的时候，就回来翻一下。此外，编辑器一般也会有代码提示，写多了自然就会记住了。

2、表单元素是否一定要放在form标签内呢？

表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素就必须放在form标签内才有效。如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。

HTML框架

iframe标签

在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，说白了，就是在当前页面再嵌入另外一个网页。

语法：

<iframe src="链接地址" width="数值" height="数值"></iframe>

src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。

iframe实际上就是在当前页面嵌入了另外一个页面，我们也可以同时嵌入多个页面。

<body>
    <iframe src="http://nanivy.space" width="200" height="150"></iframe>
</body>

还有什么frameset、frame标签，事实上这几个标签在HTML5标准中已经被废弃了。对于框架，我们只需要掌握iframe这一个标签就可以了。