小白写的文章，其中可能会有错误，或者说得不够详细，欢迎大家斧正，初学者可以看一看作为自己学习的参考，笔者会尽全力保证文章的质量。
1 简介
html文件有他自己的格式要求，在这里，我会简单的介绍一下目前常用的文本格式，仅作参考，初学者仅需了解大致上的结构即可，想要详细了解的朋友可以自行搜索
<!DOCTYPE html> // 声明文件，告知计算机这是 html5 类型
<html lang="en"> // html5 文件均以标签<html>开始，以标签</html>结束
<head> // <head>标签是HTML文件的头部部分，在这里定义网页的基本信息，如标题、样式等
<meta charset="UTF-8"> // <meta>标签可以描述页面的作者、摘要、关键字、版权、自动刷新等页面信息（UTF-8 是字符集编码，h5设置该属性所需代码量大幅减少）
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> // 设置页面的标题
</head>
<body> // <body>标签是HTML文件的身体部分，大部分代码都要写在这里
<div>Hello World!</div>
</body>
</html>
上述代码的实例效果
2 标签
2.1 标签的概念
像上面的<head><body><meta>等都是标签，它是HTML的重要组成部分，分为单标记和双标记两种，单标记只有起始标记没有结束标记，双标记有成对的开始标记和结束标记。
<hr/> <!--单标记，也叫自结束标记-->
<div></div> <!--标准标记，前面是开始标记，后面是结束标记，标记可以嵌套，但是不能交叉嵌套-->
标签有三种类别，分别是块级标签和行级标签
- 块级标签在网页中显示为块，一般都是独占一行，新的块级标签会从下一行开始排列，它可以容纳内联元素和其他块级元素。
- 与块级标签不同，行级标签在页面中可以和其他元素在同行显示，直到一行不能放下一个完整的元素，并且通常行级元素内不会包含其他元素。
注意：块级标签与行级标签的特点与区别
- 块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。
- 块级标签的宽度默认是 100%；行级标签的宽度由文字内容撑开。
- 块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性
2.2 标签的属性
标签属性是标签的一部分，用于包含额外的信息，每个标签可以有多个属性，同时属性和属性值成对出现。
<img src="../image/a.png" with="100" height="100"/>
<!-- 结构为： 属性名 = "属性值" -->
2.3 块级标签
下面是总结的比较常用的一些块级元素，足够初学者的日常使用
- <h1/></h1>···<h6></h6>：标题标签
标题标签的作用是这个段落的大小，一共六级，字体大小逐级递减
<body>
<h1>h1 标题标签</h1>
<h2>h2 标题标签</h2>
<h3>h3 标题标签</h3>
<h4>h4 标题标签</h4>
<h5>h5 标题标签</h5>
<h6>h6 标题标签</h6>
</body>
- <hr/>：水平线标签
作用：添加一条水平分隔线，让页面更容易区分。
<body>
<span>我在水平线上面</span>
<hr/>
<span>我在水平线下面</span>
</body>
- <p></p>：段落标签
使用段落标签可以区分段落，不同的段落间会自动增加换行符，段落上下方各会有一个空行的间隔。
<body>
<p>我是第一段文字</p>
<p>我是第二段文字</p>
</body>
- <br/>：换行标签
换行标签可以控制段落中的文字的换行显示，一般的浏览器会根据窗口的宽度自动将文本进行换行显示
<body>
<p>
我是第一段文字<br/>我是第二段文字
</p>
</body>
- <ul><li></li></ul>：无序列表标签
无序列表是将文字段落向内缩进，并在每个列表项前面加上圆形（●）、空心圆形（○）或方形（■）等符号，以达到醒目的效果。由于无序列表没有顺序编号，而是采用项目符号的形式，所以又被称为符号列表。
<body>
<ul type="disc">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ul>
<ul type="circle">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ul>
<ul type="square">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ul>
</body>
- <ol><li></li></ol>：有序列表标签
有序列表是将文字以特定的顺序来进行排列，每个列表项会向内缩进，并且它们之间以编号来标记，比如 1、2、3、…。
有序列表有一些特殊的属性，比如：
type 用于设置编号样式，其值可以是：1、A、a、Ⅰ、i
start 用于设置编号的起始值，其值可以是：1、2、3等数字
reversed 用于反向排序
我尽可能写出更多的情况，还是不太会的朋友可以自己实操试试
<body>
<h4>阿拉伯数字列表</h4>
<ol type="1">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ol>
<h4>大写字母列表</h4>
<!-- 从第二位开始 -->
<ol type="A" start="2">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ol>
<h4>大写罗马数字列表</h4>
<!-- 列表序号反转 -->
<ol type="I" reversed>
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ol>
</body>
- <dl></dl>：定义列表标签
定义列表适用于对名词、概念或主题的定义，第一部分是名词、概念或主题，并且通常只有一项，第二部分是相应的解释和描述，可以有多项。
<body>
<dl>
<dt>咖啡</dt>
<dd>一种黑色的热饮料，原料是咖啡豆，非洲盛产这类原料。</dd>
<dd>可以提神，刺激神经。</dd>
</dl>
<dl>
<dt>茶</dt>
<dd>是中国特有的一种著名饮品，畅销海内外。</dd>
<dd>茶叶可作饮品，含有多种有益成分，并有保健功效。</dd>
</dl>
</body>
- <div></div>：分区标签
<body>
<div style="width: 100px; height: 100px; background-color: red;">这是一个 div</div>
</body>
2.4 行级标签
<img/>：图片标签
网页中除了文本，最常用的就是图片，合理的布局加上适当的图片能有效的提高用户的观感，图片一般都不会太大，太大的图片你会影响页面的加载速度，太小的会模糊不清。网页中图片的常用格式为 GIF、JPG 和 PNG 等。
<img src = "图片链接" alt = "图标加载失败显示的文本" title = "图片的标题">
图片标签主要有5个属性：
1、src 属性
src 属性表示引用图片的路径地址。
路径地址的写法共有三种：
（1）相对路径：以当前文件为准，去寻找图片地址。
1.与当前文件处于同一层的图片，直接写图片名。
2.图片在当前文件下一层：文件夹名/图片名。
3.图片在当前文件上一层：…/图片名
（2） 绝对路径：file:///盘符:/文件夹/图片.扩展名。但这种方式严禁使用，原因有两点：
1.绝对路径只在当前计算机生效，若将网站转移服务器，则路径会失效。
2.通过绝对路径打开图片使用的是 file 协议，但网页中使用的是http 协议，因此会出现跨域问题，造成图片无法显示。
（3）网络地址：使用网络上的图片链接。但是，一般不使用网络地址，原因是网络图片可能由于各种原因被删除、转移位置，使图片无法打开
2、alt 属性
该属性可设置由于图片无法加载时显示的文字。
3、title 属性
该属性用于设置图片的标题，即当鼠标指在图片上后显示的文字。
4、height 和 width 属性
height 和 width 属性分别表示图片的宽度和高度。
在这里推荐用 CSS代替。CSS 代码如下：
style="width: 100px; height: 100px;"
5、align 属性
该属性可设置图片周围文字相对于图片的位置。常用属性值有 top、center、bottom，用处不大，推荐用 CSS 来控制样式，此处不再详细解释。
<a></a>：超链接标签
通常，一个网站是由多个页面组成的，而不同页面的跳转就需要使用链接。<a>标签可以设置一个超链接，单击超链接可以跳转到新的文档或者当前文档中的某个部分。
<a href="#">这是一个超链接</a>
1．超链接标签的属性
（1）href 属性
在<a>标签中使用 href 属性来描述链接的地址，这个地址可以是网络链接，也可以是本地文件。当用#时，表示这是一个空的超链接。
（2）target 属性
使用 target 属性可以定义通过超链接打开的文档在何处显示。常用的两个属性值分别为:_self（在与链接相同的框架中打开被链接文档）和 _blank （在新窗口中打开链接），默认属性值为_self，其他属性值可以通过查阅帮助文档了解。
2．锚链接的用法
（1）本页面锚链接
- 设置锚点：
<a name="top"></a>
- 在超链接上，使用#name 跳转到对应锚点。基本语法如下：
<a href="#top" target="_self">这是一个超链接</a>
（2）页面间锚链接
- 在即将跳转页面的指定位置，设置锚点。
- 在超链接的 href 属性中，使用"页面地址.html#name"。
<a href="t.html#weixin">跳转到新页面指定部分</a>
其他常用的行级标签
除了较为重要的图片标签和超链接标签，还有一些常见的行级标签，如：<span>、<em>、<strong>、<i>、<b>等，这些标签的使用较少，这里不再详解，可自行前往文档查看
详细了解HTML标签：HTML标签列表
HTML5新增标签
| 标签 | 作用 |
|---|---|
| <section> | 表示页面中的一个内容区块、文档的主体部分，用于将网页或文章划分章节、区块 |
| <article> | 表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章 |
| <aside> | 表示 article 元素内容之外的，与 article 元素内容相关的辅助信息 |
| <header> | 网页或文章的头部 |
| <footer> | 网页或文章的底部 |
| <nav> | 表示页面中导航链接的部分 |
| <hgroup> | 将整个页面或页面中一个内容区块的标题进行组合 |
3 表格
表格是 HTML5 中的重要布局之一，虽然在实际开发中它有着自己局限性，但是这并不妨碍我们要对它有足够的了解，并能熟练的使用它，通过对表格的学习，学会网页的布局思想。
3.1 简介
表格在网页布局中非常常用，表格可以用一种非常简单的方式，把网页的各个板块以行列的方式排列，对我们的网页布局有很好的提升作用。
3.1.1 表格的基本结构
表格的基本结构由行列组成，单元格是表格的最基本单位，如下图所示
3.1.2 表格的定义
表格由 <table> 标签定义。每个标签均有若干行，行由 <tr> 标签定义，每行被分割为若干单元格，列由 <td> 标签定义。如果表格的第一行为表头，那么 <td> 标签需要用 <th> 标签替换掉。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
<body>
<table>
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
</tr>
<tr>
<td>第一行 1</td>
<td>第一行 2</td>
<td>第一行 3</td>
</tr>
<tr>
<td>第二行 1</td>
<td>第二行 2</td>
<td>第二行 3</td>
</tr>
</table>
</body>
3.2 表格的基本属性
表格的属性可以分为两大类，分别为作用于<table>标签的（即对表格的整体样式进行设置）和作用于行<tr>、列<td>的（即对单个行列的宽高背景色等属性设置）属性。下面介绍作用于<table>标签的各种属性。
- border：表格边框属性
border 属性定义表格边框，属性值可以接收整数类型的数字，表示设置表格的宽度。
注意：如果 border 的值增大，则只有表格最外围框线增加，每个单元格上的边框并不会变化。
<table border="1"> </table>
- width/height：表格（宽度/高度）属性
width 属性和 height 属性分别定义表格宽度和高度。
<table border="1" width="400" height="200"> </table>
- bgcolor：表格背景色属性
bgcolor 属性定义表格的背景色，设置颜色值，即可修改表格的背景色。
<table border="1" bgcolor="red"> </table>
- background：表格背景图属性
background 属性定义表格的背景图，需要传入一张图片的路径地址。当background 背景图属性与 bgcolor 背景色属性同时存在时，背景图会覆盖掉背景色。
<table border="1" background="img/img.png"> </table>
- bordercolor： 表格边框颜色属性
bordercolor 属性定义表格的边框颜色，设置颜色值，修改边框颜色。
<table border="1" bordercolor="blue"> </table>
- cellspacing：表格单元格间距属性
cellspacing 属性定义表格单元格与单元格之间的间距。 通过实际操作可知，表格单元格与单元格之间默认存在一定的间距。 使用 cellspacing 属性可以手动调整这个间距的大小。当 cellspacing 设为 0 时，单元格之间没有间距。
<table border="1" cellspacing="10"> </table>
注意：使用“cellspace=“0””设置单元格之间没有间距，并不能合并相邻边框。
合并相邻边框可以使用 CSS ，（注：使用这行 CSS 语法后，cellspacing 属性将会失效）基本语法如下：
<table border="1" style="border-collapse: collapse;"> </table>
- cellpadding：表格单元格内边距属性
cellpadding 属性定义单元格的内边距，即单元格中的文字与单元格边框之间的距离。
<table border="1" cellpadding="10"> </table>
- align：表格对齐属性
align 属性用于调整表格在其父容器中的位置，可选值有 left（居左）、center（居中）、right（居右）。
注意：表格的 align 属性现在不再建议使用。它的相关功能已经被 CSS 中的浮动(float)所取代，大家了解即可。
<table border="1" align="center"> </table>
3.3 行列属性
了解了用于表格的各种属性，接下来继续学习作用于行<tr>、列<td>的属性。
- width/height：单元格宽度/高度属性
width/height 属性主要用于调整表格中单元格的宽和高。
<table>
<tr>
<td width="100" height="50">第一行 1</td>
<td>第一行 2</td>
<td>第一行 3</td>
</tr>
</table>
该代码仅会修改第一个单元格的宽度、高度为 100px、50px，不会影响其他单元格
注意：当表格属性与行列属性冲突时，以行列属性为准。
- bgcolor：单元格背景色属性
bgcolor 属性主要是修改单元格的背景色。
<table border="1">
<tr>
<td bgcolor="#0000FF">第一行 1</td>
<td>第一行 2</td>
<td>第一行 3</td>
</tr>
</table>
该代码仅会修改第一个单元格的背景色为蓝色，不影响其他单元格
- align：单元格内容水平对齐属性
align 属性控制单元格中内容的水平位置。基本语法如下：
<table border="1" width="300" height="50">
<tr>
<td align="left">第一行 1</td>
<td align="center">第二行 2</td>
<td align="right">第三行 3</td>
</tr>
</table>
该代码三个单元格中的文字分别为相对于单元格水平方向居左、居中、居右。
注意：表格的 align 属性是控制表格自身在浏览器中的显示位置，而行列的 align 属性是控制单元格中文字在单元格中的对齐方式。
表格的 align 属性并不影响表格内文字的水平方式，<tr>标签的 align 属性可以控制一行中所有单元格的水平对其方式。
- valign：单元格内容垂直对齐属性
valign 属性控制单元格中内容的垂直位置。其属性值分别为：top（顶部）、center（居中）、bottom（底部）
<table border="1" width="200" height="100">
<tr>
<td valign="top">第一行 1</td>
<td valign="center">第一行 2</td>
<td valign="bottom">第一行 3</td>
</tr>
</table>
该代码三个单元格中的文字分别为相对于单元格垂直方向居上、居中、居下。
注意：当表格属性与行列属性冲突时，以行列属性为准（近者优先）。
- colspan /rowspan：表格的跨行与跨列
在实际见到的表格中，很多都是组合类表格。如下图所示，单元格“学生成绩”属于跨三列，单元格“张三”、单元格“李四”属于跨两行。为了实现这类的表格需求，就需要掌握表格单元格合并属性，通常也叫跨行或者跨列合并属性。
代码实现：
<table border="1">
<tr>
<td colspan="3">学生成绩</td> <!-- 设置占据的列数 -->
</tr>
<tr>
<td rowspan="2">张三</td> <!-- 设置占据的行数 -->
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
注意：
colspan 属性表示跨列，当某个格跨 N 列时，其右边 N-1 个单元格需删除。
rowspan 属性表示跨行，当某个格跨 N 行时，其下方 N-1 个单元格需删除。
3.4 表格的结构化与直列化
为了更好地管理及格式化表格，更好地语义化标签，需要掌握表格的结构化与直列化。
3.4.1 表格的结构化
表格的结构化就是将表格分为表头、表体、表尾三部分，这样在修改其中一部分时不会
影响到其他部分，方便对表格进行操作。
一个完整的表格通常包括以下四部分：
1）caption：表格的标题，通常出现在表格的顶部。
2）thead：定义表格表头，通常表现为标题行。
3）tbody：定义一段表格主体，一个表格可以有多个主体，可以按照行来进行分组。
4）tfoot：定义表格的脚尾，通常表现为总计行。
<table width="500">
<caption>表格标题</caption>
<thead>
<tr>
<th>表格头部</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格底部</td>
</tr>
</tfoot>
</table>
tbody 包含行的内容下载完优先显示，不必等待表格结束。另外，还需要注意表格行本
来是从上向下显示的，但是应用了<thead><tbody><tfoot>以后，就“从头到脚”显示，即不
管行代码顺序如何，即使<thead>写在了<tbody>的后面，网页显示时，还是先<thead>后
<tbody>显示。
3.4.2 表格的直列化
通过设置表格的直列化可以对表格的列进行分组，以便对其进行格式化。
基本语法如下：
<table width="500">
<!--前两列为一组-->
<colgroup style="background-color: yellow;">
<!--第一列-->
<col />
<!--第二列-->
<col />
</colgroup>
<!--第三列-->
<col style="background-color: blue;" />
<caption>表格标题</caption>
<thead>
<tr>
<th>头 1</th>
<th>头 2</th>
<th>头 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>尾 1</td>
<td>尾 2</td>
<td>尾 3</td>
</tr>
</tfoot>
</table>
如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单
代码如下：
<body>
<h2 style="width: 500px;text-align: center; text-decoration: underline;">特别休假申请单</h2>
<p>申请日期： 年 月 日</p>
<table width="500" border="1" style="border-collapse: collapse;">
<tr>
<td>所属单位</td>
<td> 部 组 班</td>
<td>职称</td>
<td>111</td>
<td>姓名</td>
<td>111</td>
<td>厂长</td>
</tr>
<tr>
<td rowspan="2">期间</td>
<td colspan="3"> 年 月 日</td>
<td rowspan="2" colspan="2">天数</td>
<td>111</td>
</tr>
<tr>
<td colspan="3"> 年 月 日</td>
<td>主管</td>
</tr>
<tr>
<td colspan="2">职务代理人</td>
<td colspan="4">盖章</td>
<td>111</td>
</tr>
<tr>
<td>到期日期</td>
<td colspan="3"> 年 月 日</td>
<td colspan="2">审核意见</td>
<td>组长</td>
</tr>
<tr>
<td colspan="2">全年特别休假数</td>
<td colspan="2" align="right">天</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td colspan="2">已请假数</td>
<td colspan="2" align="right">天</td>
<td>人事主任</td>
<td>人事经办</td>
<td>组长</td>
</tr>
<tr>
<td colspan="2">本次申请日数</td>
<td colspan="2" align="right">天</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
</tr>
<tr>
<td colspan="2">尚剩申请日数</td>
<td colspan="2" align="right">天</td>
</tr>
</table>
</body>
4 表单
网页中，表单主要是用于让客户填写信息，然后把信息提交到后台服务器，使网页具有交互作用。
4.1 简介
表单是网页的交互功能的重要体现，使用表单可以非常简单的实现用户和后台服务器之间的数据交换，像我们平时常用的账号的注册页面，论坛的发帖留言，在线购物的购物车都会用到表单功能。
4.1.1 表单的结构
表单由许多表单控件实现，主要包括用户填写信息部分和表单提交按钮。用户填写数据完成后，点击“提交”按钮即可将数据发送到服务器，之后经过后台软件的程序处理后将用户所需的信息返回客户端，格式如下：
<form>
input 元素(<input type = " ">)
</form>
注意：表单内容由<form></form>包裹，所有的表单控件都需要写在<from>中
4.1.2 <form>的常用属性
1．action 属性
action 属性用于指定表单提交时向何处发送表单数据，即需要发送的服务器地址。
2．method 属性
method 属性用于指定表单向服务器提交数据的方法，包括两种方法，分别是 get 和
post。
3．enctype 属性
enctype 属性指定表单发送的编码方式，只有 method="post"时才有效，共有三种属性值。
注意：初学者使用较少，不过多赘述
4.2 imput 输入框
输入框用于收集用户信息，用户通过在输入框中输入数据，然后实现数据的传输。
input 常用属性
1．type 属性
type 属性表示 input 输入框的类型，它的默认值是 text。可用属性值如下：
button 自定义按钮 submit 提交按钮 reset 重置按钮
file 文件上传按钮 image：图形提交按钮
text 普通文本域 textarea 多行文本域 password 密码字段
checkbox 复选框 radio 单选按钮
注意：所有浏览器都支持 type 属性，但是 type 的属性值并不是所有浏览器都可以支持，在实际使用的时候要考虑到属性值的兼容问题，本文介绍的属性值在大部分浏览器上都可以使用，如果出现兼容问题，可以尝试自行百度解决。
2．name 属性
name 属性表示 input 输入框的名称，一般必填。因为传递数据时，使用“name=value”的形式传递。
注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
3．value 属性
value 属性表示 input 输入框的初始值。
对于不同的输入类型，value 属性的用法也不同：
- type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
- type=“text”, “password”, “hidden” - 定义输入字段的初始值
- type=“checkbox”, “radio”, “image” - 定义与输入相关联的值
注：<input type=“checkbox”> 和 <input type=“radio”> 中必须设置 value 属性。
注：value 属性无法与 <input type=“file”> 一同使用。
4．placeholder 属性
placeholder 属性表示输入框中的提示信息，当输入框有 value 属性的时候，提示内容会
消失，转而显示 value 属性值。
5．tabindex 属性
tabindex=“1” 此属性控制按 Tab 键时的跳转顺序，从最小的数值开始，逐个往大的数值
跳转，依次获得焦点。
6．input 元素的其他属性
除以上属性外，input 还有一些属性名等于属性值的特殊属性，具体如下：
1） checked=“checked” 默认选中。
2）disabled=“disabled” 设置控件不能使用。用在按钮上效果为不能单击，用在输入框上
则表示不能修改。而且，如果输入框设置为 disabled，则输入框中的信息不能往后台传递。
3）hidden=“hidden” 设置隐藏控件。
4.3 select 下拉选择控件
在表单中通过控件可以创建一个下拉式的列表或带有滚动条的列表，可以在列
表中选中一个或多个选项，通常用于填写生日、所在地区等信息。
<form action="" multiple size="1">
<select name="week">
<optgroup label="一组">
<option value="1" title="你好">周一</option>
<option value="2" selected>周二</option>
<option value="3">周三</option>
</optgroup>
<optgroup label="二组">
<option value="1">周四</option>
<option value="2">周五</option>
</optgroup>
</select>
</form>
1．<select>标签的属性
1）name=“列表名”：所有选项只有一个 name。
2）multiple：设置 select 控件为多选，可在列表中使用 Ctrl 键+鼠标进行多选。一般不用。
3）size=“1”：规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于
列表中选项的总数目，下拉列表就会显示出滚动条，
2. <option>标签的属性
1）value=""：分为两种情况。
当选项 option 没有 value 属性时，往后台传递的是<option></option>标签中的文字；
当选项 option 有 value 属性时，往后台传递的是 value 属性的值。
2）title=""：鼠标移动上去后显示的文字，与图片的 title 属性类似。
3）selected：默认选中，即默认选中的选项。
3．利用<optgroup>标签分组
<optgroup label=“分组名”></optgroup>用于将<option>标签进行分组，label 属性表示分组名。
4.4 补充
autocomplete 属性可用于 开启(on)/关闭(off) 浏览器对输入项的记忆
适用的标签：text, search, url, telephone, email, password, datepickers, range 以及 color
formaction 属性用于描述表单提交的URL地址。(跳转地址)
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)，覆盖 form 元素的 enctype 属性。
formmethod 属性重新定义了表单提交的方式，覆盖了 元素的 method 属性。
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示(即新页面的打开方法)。
注意: formaction formenctype formmethod formtarget 属性用于 type=“submit” 和 type=“image”.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。(即取消对输入内容的验证)(boolean 属性)
autofocus 属性规定在页面加载时，域自动地获得焦点。( boolean 属性.)
formnovalidate 属性会覆盖 元素的novalidate(无法验证)属性。( boolean 属性.)
required 属性规定输入域不能为空。( boolean 属性.)
multiple 属性规定 元素中可选择多个值。（适用标签email 和 file）
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
pattern 属性对输入的数据的类型和数目进行定义
step 属性为输入域规定合法的数字间隔。（如果 step=“3”，则合法的数是 -3,0,3,6 等）
<datalist> 元素规定输入域的选项列表。
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<output> 元素用于不同类型的输出，比如计算或脚本输出。
感谢观看，如有问题可以在评论区提出，谢谢！
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
