一、HTML
HTML语言可指定网页在浏览器中的显示方式,HTML 允许网页设计者进行以下操作。
-
控制页面和内容的外观。
-
创建联机表单等。
-
使用插入 HTML 的文档的链接来发布联机文档和检索其信息。
-
在HTML 文档中插入音频、视频以及 Java Applet 等对象。
二、HTML组成部分
1、HTML 部分
HTML 部分以<html>标签作为整个网页文档的开始，并以</html>标签作为结束。
<html>
……
……
</html>此标签告诉 Web 浏览器这两个标签中间的内容是 HTML 文档。
2、头部
头部以<head>标签开始，以</head>标签结束，这部分包含显示在网页导航栏中的标题及其他在网页中不显示的信息，如描述，关键字等内容。标题包含在<title>标签和</title>
标签之间。
<body>
……
<body>3、主体部分
主体部分包含网页中显示的文本、图片、视频和链接。主体部分以<body>标签开始，以</body>标签结束
<head>
<title>……<title>
</head>三、HTML常用标记
1、Meta 标签
Meta 标签出现在网页的标题部分。Meta 标签用来描述一个 HTML 网页文档的属性，如作者、日期时间、公司名称和联系信息、网页描述、关键词等
作用：
（1）、自动刷新
<meta http-equiv = "refresh" content =" 3;url = http://Baidu.com">（2）、主页字符集与语言
<meta http-equiv = "Content-Type" content =" text/html"charset = gb_2312-80">（3）、网页描述
<meta name = "description"content = "新浪微博">（4）、Cookie的设定
（5）、网页关键词
<meta name = "keywords" content = "新浪，新浪网，Sina"/>2、标题标签
标题标签是指定文档中显示的标题，即读者可以直接看到的标题，此标签能分隔大段文字，概括下文内容，并根据逻辑结构安排信息。标题具有吸引读者的提示作用，而且表明了文章的内容。HTML 文档提供了六级标题供设计者使用。<H1>标签为最大，<H6>标签为最小，设计者只需定义其中的一种大小，浏览器将负责整个文档的显示过程。
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<h2>Hello world</h2>
<h3>Hello world</h3>
<h4>Hello world</h4>
<h5>Hello world</h5>
<h6>Hello world</h6>
<body>
</html>
（1）、HTML段落标签
在 HTML 文档中，可将文本内容组合为多个段落，段落标签<p>用于标记段落的开始，段落结束标记</p >并非必须的。此外，还可以通过设置段落的对其方式，如左对齐、右对齐、居中对齐等，用到的是段落的align属性。
<html>
<head>
<title>Java_Web编程</title>
</head>
<body>
<p align = "left">左对齐方式显示</p>
<p align = "right">右对齐方式显示</p>
<p align = "center">居中对齐方式显示</p>
<body>
</html>
（2）、<pre>标签
<pre>标签用于显示预先已定义好格式的文本。当文本显示在浏览器中时，会遵循已在HTML 源文档中定义的格式。
<html>
<head>
<title>Java_Web编程</title>
</head>
<body>
<h1>Hello world</h1>
<pre>
Hello world
Hello world
Hello world
</pre>
<body>
</html>
（3）、<br>标签
<br>标签为换行标记，只要在文本中任何位置放置<br>标记，则标记后的内容就会被强制换行。换行标记没有结束标记，也可以写成</br>
<html>
<head>
<title>Java_Web编程</title>
</head>
<body>
<h1>Hello world</h1>
<pre>
Hello wor
ld
</pre>
<body>
</html>
（4）、超链接标签
超链接标签是定义HTML链接的标签
内部链接：
<a href="跳转目标" target = "目标窗口的弹出方式">图像或文本</a>比如：
<a href="http://tuchong.com" target = "_self">图虫</a>
<a href="http://tuchong.com" target = "_blank">图虫</a>其中target是打开窗口的方式，默认值为——self（当前窗口打开页面），_blank为新窗口打开页面
外部链接：
<a href="index.html">首页</a>空连接：
如果没有确定链接目标时可以使用“#”
<a href="#">空链接</a>下载链接：
如果herf里面地址是一个文件或者压缩包，会下载这个文件
<a herf="test.zip" >下载文件</a>网页元素链接：
在网页中的各种网页元素，比如文本、图像、音频等
<a href="http://tuchong.com"><img src="test.jpg"></a>锚点链接：
-
在链接文本的href属性中，设置属性值为#名字的形式，如：<a href ="#two">锚点链接</a>
-
找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">锚点链接</h3>
（5）、文本格式化标签
文本格式化标签可用于格式化 HTML 文本内容。HTML 提供了多个标签可用于格式化。这些标签定义或更改文本的显示格式，这些标签包括了<B></B>、<U></U>、<I></I>、<SUB></SUB>、<SUP></SUP>。
-
<B></B>标签：用于给文本加粗显示。
-
<U></U>标签：用于给文本添加下划线。
-
<I></I>标签：用斜体字体显示文本。
-
<SUB></SUB>标签:为下标标签,此标签使文本内容的高度低于周围文本正常的高度。
-
<SUP></SUP>标签:为上标标签,此标签使文本内容的高度高于周围文本正常的高度。
（6）、<HR>标签
<HR>标签用于在页面上绘制水平线，此标签无结束标签，可使用以下属性控制水平线的显示。
-
ALIGN：指定水平线的对其方式，如左对齐、右对齐、居中对齐，如 ALIGN=left。
-
WIDTH：指定水平线的长度，以像素为单位，或按百分比显示。
-
SIZE：指定水平线的宽度，以像素为单位。
-
NOSHADE：指定水平线以无阴影效果显示。
<html>
<head>
<title>Java_Web编程</title>
</head>
<body>
<h1>您是从那里了解本网站的？</h1>
<hr size = "8px" align = "center" width = "50%" noshade>
<hr>
<hr size = "20px" align = "left" width = "300px">
1、朋友介绍
2、百度搜索
3、QQ群
4、其它
<body>
</html>
（7）、图像标签
图像标签用于在文档中插入图片
| src | 图像路径 | 必须属性 |
| alt | 文本 | 如果图片资源无法找到，那么就显示对应的文字，对图片进行说明 |
| title | 文本 | 提示文本，鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图片的宽 |
| height | 像素 | 设置图片的高 |
| border | 像素 | 设置图片的边框粗细 |
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，即相对于HTMLye'mian'de'wei'zhi
| 同一级路径 | 图像文件位于HTML文件同一级<img src = "test.jpg" /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级<img src = "image/test.jpg" /> |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级<img src = "../test.jpg" /> |
绝对路径：目录下的绝对位置，直接达到目标位置，通常是从盘符开始的路径
比如：
<img src = "C:\Users\DF10F-0001A\Documents\VSCode\image\test.jpg"/>图像标签注意：
-
图像标签可以拥有多个属性，必须写在标签名的后面
-
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
-
属性采取键值对的格式，即key="value"的格式，属性=“shu'xing”
<html>
<body>
<h4>显示图像</h4>
<img src = "C:\Users\DF10F-0001A\Documents\VSCode\image\test.jpg" />
<h4>给图像设置对应文字</h4>
<img src = "C:\Users\DF10F-0001A\Documents\VSCode\image\test.jpg" alt="错误" />
<h4>给图像设置提示信息</h4>
<img src = "C:\Users\DF10F-0001A\Documents\VSCode\image\test.jpg" alt="错误" title = "提示信息" />
<h4>给图像设置宽度</h4>
<img src = "C:\Users\DF10F-0001A\Documents\VSCode\image\test.jpg" alt="错误" title = "提示信息" width="100"/>
<H4>给图像设置高度</H4>
<img src = "C:\Users\DF10F-0001A\Documents\VSCode\image\test.jpg" alt="错误" title = "提示信息" width="300" height = "200"/>
<H4>给图像设置边框</H4>
<img src = "C:\Users\DF10F-0001A\Documents\VSCode\image\test.jpg" alt="错误" title = "提示信息" width="100" height = "200" border = "100"/>
</body>
</html>（8）、<FONT>标签
<FONT>标签用于控制网页文字的显示，文本大小、颜色和样式等属性
-
COLOR:用于指定字体的颜色，值为颜色的名称或 16 进制值。
-
SIZE：用于指定字体的大小。
-
FACE：用于指定字体的类型。
四、表格标记
1、表格基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>-
<table></table>是用于定义表格的标签
-
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
-
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
-
字母td指表格数据（table data），即数据单元格的内容
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>王浩</td> <td>男</td> <td>20</td></tr>
<tr><td>张飞</td> <td>男</td> <td>19</td></tr>
<tr><td>李琳</td> <td>女</td> <td>21</td></tr>
<tr><td>徐静</td> <td>女</td> <td>21</td></tr>
<tr><td>刘林</td> <td>女</td> <td>20</td></tr>
</table>
2、表头单元格标签
表格的标题可位于表格的上方和表格的下方，位于表格上方的标题，如<captionalign-top>表格标题<caption>。位于表格下方的标题只需更改<caption>标签的 align 属性的值为 bottom 即可，即<caption align=bottom>表格标题<caption>。
同样，表格的第一行或第一列，一般也需要加粗显示，以作为行或列的标题。设置行或列的标题使用<TH>行或列标题</TH>。
语法：：
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>举例：
<table>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>王浩</td> <td>男</td> <td>20</td></tr>
<tr><td>张飞</td> <td>男</td> <td>19</td></tr>
<tr><td>李琳</td> <td>女</td> <td>21</td></tr>
<tr><td>徐静</td> <td>女</td> <td>21</td></tr>
<tr><td>刘林</td> <td>女</td> <td>20</td></tr>
</table>
3、表格的对其方式
可改变align属性的值改变对其方式，语法：
| aliign | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或者“” | 规定表格单元是否拥有边框，默认为“”，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间空白，默认1像素 |
| width | 像素值或百分比 | 规定表格的kuan'du |
举例：
<table align= "center" border="1" cellpadding="20" cellspacing="0" width="400" height="300">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>王浩</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>李琳</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>徐静</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>刘林</td>
<td>女</td>
<td>20</td>
</tr>
</table>
4、表格合并行与列
跨行合并：rownspa="合并单元格的个数“，最上侧单元格为目标单元格
跨列合并：clolspan="合并单元格的个数“，最左侧单元格为目标单元格
步骤：
（1）、先确定合并方式
（2）、找到目标单元格，写上合并方式=合并的单元格数量
（3）、删除多余的单元格
<table align= "center" border="1" cellpadding="20" cellspacing="0" width="400" height="400">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
五、列表标签
1、无序列表
<ul>标签标识HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签来定义，语法：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3/li>
...
</ul>-
无序列表的各个列表项之间没有顺序级别之分，是并列的
-
<ul>里只能放<li>标签，不允许放其他文字或标签
-
<li>和</li>之间相当于一个容器，可以容纳所有元素
2、有序列表
有序列表各个列表项都会按一定的顺序排列定义
<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项，语法：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>-
<ol></ol中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的
-
<li>与</li>之间相当于一个容器，可以容纳所有元素
-
有序列表会带自己样式属性，但在实际使用时，我们会使用CSS来设置
3、自定义列表
使用场景：用于对属于或名词进行解释和描述，定义列表的列表项前没有任何项目符合
语法
<dl>
<dt>名词</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>-
<dl>和</dl>里面只能包含<dt>和</dd>
-
<dt>和</dd>个数没有限制，经常是一个<dt>对应多个<d>
六、表单标签
1、表单域
是一块包含表单元素的区域
<from action="UML地址" method="提交方式" name="表单域名称">
各种表单元素空间
</from>常用属性：
| action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于矩阵表单的名称，以区分同一个页面中的多个表单 |
2、<input>表单元素
用于收集用户信息
<input type="属性值" />-
<input />标签为单表签
-
type属性设置不同的属性值用来指定不同的空间类型
| button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。 |
| checkbox | 定义复选框。 |
| colorNew | 定义拾色器。 |
| dateNew | 定义 date 控件（包括年、月、日，不包括时间）。 |
| datetimeNew | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 |
| datetime-localNew | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 |
| emailNew | 定义用于 e-mail 地址的字段。 |
| file | 定义文件选择字段和 "浏览..." 按钮，供文件上传。 |
| hidden | 定义隐藏输入字段。 |
| image | 定义图像作为提交按钮。 |
| monthNew | 定义 month 和 year 控件（不带时区）。 |
| numberNew | 定义用于输入数字的字段。 |
| password | 定义密码字段（字段中的字符会被遮蔽）。 |
| radio | 定义单选按钮。 |
| rangeNew | 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。 |
| reset | 定义重置按钮（重置所有的表单值为默认值）。 |
| searchNew | 定义用于输入搜索字符串的文本字段。 |
| submit | 定义提交按钮。 |
| telNew | 定义用于输入电话号码的字段。 |
| text | 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。 |
| timeNew | 定义用于输入时间的控件（不带时区）。 |
| urlNew | 定义用于输入 URL 的字段。 |
| weekNew | 定义 week 和 year 控件（不带时区）。 |
| name | 定义input元素的名称 |
| value | 规定input元素的值 |
| checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 规定输入字段中的字符的最大长度 |
2、label标签
<label>标签为input元素定义标注（标签），可以绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或选择对应的表单元素上，用来增加用户体验，语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>3、<select>表单元素
<select>定义下拉列表，语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
4、<textarea>表表单元素
<textarea>定义多行文本输入的控件，语法：
<textarea rows="3" cols="20">
文本内容
</textarea>-
cols=“每行中的字符数”
-
rows="显示的行数"
七、HTML框架标记
HTML框架标记包括<frameset>，<iframe>，<noframes>三个标记
1、<frameset>标签
<frameset>标签是成对出现的，以<fiameset>开始，</frameset>结束。<frameset>标签作用是将窗口分割为若干个自窗口，子窗口的数目取决于嵌套在该标签中<Frame>标签的数目。<frameset>标签有两个属性。rows 和 cols，分别用来确定各自窗口的高度和宽度，格式为<frameset rows='值 1,值 2,……值 n">;<framest cols-"值 1,值2,……值n">,各参数之间以逗号分割，依次表示各自窗口的高度（宽度)，这两个属性的参数值可以是数字、百分数或符号“*”。
2、<iframe>标记
iframe 标签是成对出现的，以<iffame>开始，以<iffame>结束。
iframe 标签内的内容可以作为浏览器不支持 iffame 标签时显示。iffame 标签属性如表
3、<noframes>标记
noframes 标签对不支持框架的设备进行提示或相关操作。noframes 标签是成对出现的，以<noframes>开始，以</noframes>结束。由于 frameset 内不能包含 body 标签，因此noframes 内部必须包含 body 标签。
八、HTML5元素
1、结构元素
| 元素名称 | 说明 |
| header | 表示页面中一个内容区块或整个页面的标题 |
| footer | 表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息 |
| section | 表示页面中的一个内容区块，如章节、页眉、页脚或页面中的其他部分。它可以与 hl、h2、h3、h4、hs、h6 等元素结合使用，标示文档结构 |
| article | 表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章 |
| aside | 表示 article 元素的内容之外的、与 article 元素的内容相关的辅助信息 |
| nav | 表示页面中导航链接的部分 |
| main | 表示网页中的主要内容。主要内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展内容 |
| figure | 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。可以使用 figcaption 元素为 figure元素组添加标题 |
2、功能元素
hgroup 元素：用于对整个页面或页面中一个内容区块的标题进行组合。例如：
<hgroup>...</hgroup> video 元素：定义视频，比如电影片段或其他视频流。例如：
<video src="movie.ogg" controls="controls">video元素</video>audio 元素：定义音频，比如音乐或其他音频流。例如：
<audio src="someaudio.wav">audio元素</audio>embed 元素：用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3 等。例如：
<embed src="horse.wav"/>mark 元素：主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark 元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。例如:
<mark></mark>dialog 元素：定义对话框或窗口。例如：
<dialog open>这是打开的对话窗口</dialog>bdi 元素：定义文本的文本方向，使其脱离其周围文本的方向设置。
<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>steve</bdi>: 78 points</li>
</ul>figcaption 元素：定义 figure 元素的标题。例如：
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
< img src="shanghai_lupu_bridge.jpg" width-"350" height="234"/>
</figure>time 元素：表示日期或时间，也可以同时表示两者。例如：
<time></time>canvas 元素：表示图形，如图表和其他图像。这个元素本身没有行为，仅提供一块画把一个绘图 API展现给客户端 JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。例如:
<canvas id-"myCanvas" width="200" height="200"></canvas>output 元素：表示不同类型的输出，比如脚本的输出。例如：
<output></output>source 元素：为媒介元素（比如<video>和<audio>）定义媒介资源。例如：
Ksource>menu元素：表示菜单列表，当希望列出表单控件时使用该标签
<menu>
<li><input type="checkbox"/>Red</li>
<li><input type="checkbox"/>blue</li>
</menu>ruby 元素：表示 ruby 注释（中文注音或字符)。例如：
<ruby>汉<rt><rp>(</rp>厂马'<rp>)</rp></rt></ruby>rt 元素：表示字符（中文注音或字符）的解释或发音。例如：
<ruby>汉<rt>厂马'</rt></ruby>p 元素：在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。例如：
<ruby>汉<rt><rp>(</rp>厂马'<rp>)</rp></rt></ruby>wbr 元素：表示软换行。wbr 元素与 br 元素的区别：br 元素表示此处必须换行；而 wbr 元素的意思是浏览器窗口或父级元素的宽度足够宽时（没必要换行时)，不进行换行，而当宽度不够时，主动在此处进行换行。
<p> TW3C invites media, analysts, and other attendees of Mobile World Congress (Mwc)
<wbr> 2012 to meet with W3C and learn how the Open Web Platform <wbr>is transforming
industry. From 27 February through 1 March W3C will </p >command 元素：表示命令按钮，如单选按钮、复选框或按钮。例如：
<command onclick=cut()" label-"cut">details 元素：表示用户要求得到并且可以得到的细节信息。它可以与 summary 元素配合使用。
summary 元素提供标题或图例。标题是可见的，用户单击标题时，会显示出细节信息。summary元素应该是 details 元素的第一个子元素。例如：
<details>
<summary>HTML5</summary>
For the latest updates from the HTMI. WG, possibly including important bug fixes,
please look at the editor's draft instead. There may also be a more up-to-date Working
Draft with changes based on resolution of Last Call issues.
</details>datalist 元素：datalist 元素表示可选数据的列表，与 input 元素配合使用，可以制作出输入值的下拉列表。例如：
<datalist></datalist>datagrid 元素：表示可选数据的列表，它以树形列表的形式来显示。例如：
<datagrid></datagrid>keygen 元素：表示生成密钥。例如:
<keygen>progress 元素：表示运行中的进程，可以使用 progress 元素来显示 JavaScript 中耗费时间的函数的进程。例如：
<progress></progress>meter 元素：度量给定范围（gauge）内的数据。例如：
<meter value-"3" min-"o" max="10">十分之三</meter>
<meter value="0.6">60%</meter>track 元素：定义用在媒体播放器中的文本轨道。例如：
<video width="320" height-"240" controls="controls">
<source src="forrest_gump,mp4" type-"video/mp4"/>
<source src="forrest_gump.ogg" type-"videologg"/>
<track kind-"subtitles" sro-"subs_chi.srt" srclang-"zh" label="Chinese">
<track kind-"subtitles" sro-"subs_eng.srt" srclang-"zh" label="English">
</video>3、表单
-
tel：格式<input type="tel"/>，表示必须输入电话号码的文本框。
-
search：格式<input type="search"/>，表示搜索文本框。
-
url：格式<input type="url"/>，表示必须输入 URL 地址的文本框。
-
email：格式<input type="email"/>，表示必须输入电子邮件地址的文本框。
-
datetime：格式<input type="datetime"/>，表示日期和时间文本框。
-
date：格式<input type-"date"/>，表示日期文本框。
-
month：格式<input type="month"/>，表示月份文本框。
-
week：格式<input type="week"/>，表示周几文本框。
-
time：格式<input type="time”/>，表示时间文本框。
-
datetime-local：格式<input type="datetime-local">，表示本地日期和时间文本框。
-
number：格式<input type="number"/>，表示必须输入数字的文本框。
-
range：格式<imput type="range">，表示范围文本框。
-
color：格式<input type="color">，表示颜色文本框。
九、HTML5属性
1、表单属性
为 input（type=text)、select、textarea 与 button 元素新增加 。它以指定属性的方式让元素在画面打开时自动获得焦点。
为 input 元素(type=text)与 textarea 元素新增加 placeholder 属性，它会对用户的输入进行提示,提示用户可以输入的内容。
为 input、output、select、textarea、button 与 fieldset 新增加 form 属性，声明它属于哪个表单,然后将其放置在页面上任何位置，而不是表单之内。
为 input 元素（type=text）与 textarea 元素新增加 required 属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容。
为 input 元素增加 autocomplete、min、max、multiple、pattern 和 step 属性。同时还有一个新的list 元素与 datalist 元素配合使用。datalist 元素与 autocomplete 属性配合使用。multiple 属性允许在上传文件时一次上传多个文件。
为 input 元素与 button 元素增加了新属性 formaction、formenctype、formmethod、formnovalidate与 formtarget，它们可以重载 form 元素的 action、enctype、method、novalidate 与 target 属性。
为 fieldset 元素增加了 disabled 属性，可以把它的子元素设为 disabled（无效）状态。
为 input 元素、button 元素、form 元素增加了 novalidate 属性，该属性可以取消提交时进行的有关检查，表单可以被无条件地提交。
2、链接属性
为a 与 area 元素增加了 media 属性，该属性规定目标 URL 是为什么类型的媒介/设备进行优化的，只能在 href 属性存在时使用。
为 area 元素增加了 hreflang 属性与 rel 属性，以保持与a元素、link 元素的一致。
为 link 元素增加了新属性 sizes。该属性可以与 icon 元素结合使用（通过 rel 属性)，该属性指定关联图标（icon 元素）的大小。
为 base 元素增加了 target 属性，主要目的是保持与a 元素的一致性。
3、其他属性
为ol 元素增加属性 reversed，它指定列表倒序显示。
为 meta 元素增加 charset 属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的指定提供了一种比较良好的方式。
为 menu 元素增加了两个新的属性—type 与 label。label 属性为菜单定义一个可见的标注，type属性让菜单可以上下文菜单、工具条与列表菜单 3 种形式出现。
为 style 元素增加 scoped 属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。
为 script 元素增加 async 属性，它定义脚本是否异步执行。
为 html 元素增加属性 manifest，开发离线 Web 应用程序时它与 API 结合使用，定义一个 URL，在这个 URL 上描述文档的缓存信息。
为 iframe 元素增加 3 个属性，即 sandbox、seamless 与 sredoc，用来提高页面安全性，防止不信任的 Web 页面执行某些操作。
十、HTML5全局属性
1、contentEditable属性
contentEditable 属性的主要功能是允许用户可以在线编辑元素中的内容。contentEditable 是一个布尔值属性，可以被指定为 true 或 false。注意，该属性还有一个隐藏的 inherit（继承）状态，属性为 true 时，元素被指定为允许编辑；属性为 false 时，元素被指定为不允许编辑；未指定 true 或 false 时，则由 inherit 状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<title>contentEditable属性示例</title>
</head>
<h2>可编辑列表</h2>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>
2、contextmenu属性
contextmenu 属性用于定义<div>元素的上下文莱单。上下文菜单在用户右键单击元素时出现。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>contentEditable属性示例</title>
</head>
<body>
<div contextmenu = "mymenu">上下文菜单
<menu type = "content" id = "mymenu">
<menuitem label = "微信分享"></menuitem>
<menuitem label = "微博分享"></menuitem>
</menu>
</div>
</body>
</html>3、data-*属性
使用 data-*属性可以自定义用户数据。具体应用包括：
-
data-*属性用于存储页面或 Web 应用的私有自定义数据。
-
data-*属性赋予所有 HTML 元素嵌入自定义 data 属性的能力。
存储的自定义数据能够被页面的 JavaScript 脚本利用，以创建更好的用户体验，不进行 Ajax 调用或服务器端数据库查询。
data-*属性包括两部分：
-
属性名：不应该包含任何大写字母，并且在前缀"data-"之后必须有至少一个字符。
-
属性值：可以是任意字符串。
当浏览器（用户代理）解析时，会完全忽略前缀为"data-"的自定义属性。
</head>
<body>
<ul>
<li data-animal-type = "bird">猫头鹰</li>
<li data-animal-type = "fish">鲤鱼</li>
<li data-animal-type = "spider">蜘蛛</li>
</ul>
</body>
</html>4、draggable属性
draggable 属性可以定义元素是否可以被拖动。draggable 属性常用在拖放操作中属性取值说明如下：
-
true：定义元素可拖动。
-
false：定义元素不可拖动。
-
auto：定义使用浏览器的默认行为。
5、dropzone 属性
dropzone 属性定义在元素上拖动数据时，是否复制、移动或链接被拖动数据。属性取值说明如下:
-
copy：拖动数据会产生被拖动数据的副本。
-
move：拖动数据会导致被拖动数据被移动到新位置。
-
link：拖动数据会产生指向原始数据的链接。
6、hidden 属性
在 HTML5 中，所有元素都包含一个 hidden 属性。该属性设置元素的可见状态，取值为一个布尔值，当设为 true 时，元素处于不可见状态；当设为 false 时，元素处于可见状态。
<p hidden>这个段落应该被隐藏。</p >hidden 属性可用于防止用户查看元素，直到匹配某些条件，如选择了某个复选框。然后，在页面加载之后，可以使用 JavaScript 脚本删除该属性，删除之后该元素变为可见状态，同时元素中的内容也即时显示出来。
7、spellcheck属性
spellcheck 属性定义是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查：
-
input 元素中的文本值(非密码)。
-
<textarea>元素中的文本。
-
可编辑元素中的文本。
spellcheck 属性是一个布尔值的属性，取值包括 true 和 false，为 true 时表示对元素进行拼写和语法检查，为 false 时则不检查元素。用法如下所示：
注意，如果元素的 readOnly 属性或 disabled 属性设为 true，则不执行拼写检查。
<!-以下两种书写方法正确-->
<textarea spellcheck="true">
<input type=text spellcheck=false>
<!-以下书写方法为错误-->
<textarea spellcheck >8、translate属性
translate 属性定义是否应该翻译元素内容。取值说明如下：
-
yes：定义应该翻译元素内容。
-
no：定义不应翻译元素内容。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p translate="no">请勿翻译本段。</p >
<p>本段可被译为任意语言。</p >
</body>
</html>
扫一扫
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
