html5 以 html4 为基础，对 html4 进行了大量修改。这节的内容：
- html5 与 html4 在基础语法上的区别，包括 DOCTYPE 声明、内容类型（ContentType）、字符编码的指定方法、元素标记的省略、具有布尔值的属性、引号的省略等几个方面；
- 了解在 html5 中新增的元素、属性，html4 中删除的元素、属性，以及 html5 对删除元素、属性的替代方案；
- 掌握什么是全局属性，主要介绍几个常用全局属性，如 contentEditable 属性、designMode 属性、hidden 属性、spellcheck 属性以及 tabindex 属性；
html语法的改变
html5中的标记方法
- 内容类型
html5 的文件扩展符与内容类型保持不变，仍然为“.html”或“.htm”，内容类型（ContentType）仍然为“text/html”。
- DOCTYPE声明
在 html4 中的声明如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在 html5 中，刻意不使用版本声明，一份文档将会适用所有版本的HTML。声明如下：
<!DOCTYPE html>
- 指定字符编码
在 html4 中使用 meta 元素的形式指定文件中的字符编码。形式如下：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
在 html5 中，可以使用对元素直接追加 charset 属性的方式来指定字符编码。声明如下：
<meta charset="UTF-8">
:::info 两种方式都是有效的，但是不能两种方式混用。 :::
html5中确保的兼容性
html5 的语法是为了保证与之前的 html 语法也能够达到最大程度的兼容而设计的。对于 没有
的结束标记的html 代码，html5 是允许存在这种情况的，但明确规定了这种情况应该怎么处理。
下面我们将从元素标记的省略、具有 boolean 值的属性、引号的省略这几方面来详细看一下在 html5 中是如何确保与之前版本的 html 实现兼容的。
可以省略标记的元素
在 html5 中，元素的标记可以省略。具体来说，分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。
“不允许写结束标记” 是指只允许使用“<元素/>”的形式进行书写的元素，如：area、base、br、col、command、embed、hr、img、input、Keygen、link、meta、param、source、track、wbr。
“可以省略结束标记的元素”是指元素仅有开始标签，没有闭合标签的元素。如：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
“可以省略全部标记的元素”是指元素可以完全省略，但实际上以隐式方式存在。如：html、head、body、colgroup、tbody。
具有boolean值的属性
对于具有 boolean 值的属性，例如 disabled 与 readonly 等，当只写属性而不指定属性值、属性值等于属性名、属性值为空字符串时都代表为 true，如果想要为 false，则可以不写该属性。示例如下：
<!-- 只写属性不指定属性值，代表为true --><input type="checkbox" checked><!-- 不写属性代表为false --><input type="checkbox"><!-- 属性名等于属性值，代表为true --><input type="checkbox" checked="checked"><!-- 属性值为空字符串，代表为true --><input type="checkbox" checked="">
省略引号
在 html5 中，当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性值两边的引号可以省略。
<input type="text">
<input type='text'>
<input type=text>
标记示例
根据上面学的内容编写示例。在该示例中，我们声明了 DOCTYPE 声明，charset指定内容编码，省略了 ，
的结束标签，使用<元素/>的方式来结束元素，最终显示结果仍然是正常的。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>测试html5示例一</title>
<p>一段段落
<br>编写内容
</html>
新增元素和废除元素
新增元素
新增元素如下表。
| 元素 | 描述 | 示例 | |
|---|---|---|---|
| 结 构 元 素 |
section | 页面中的一个内容区块，比如章节、页眉、页脚 | |
| article | 页面中的一块与上下文不相关的独立内容，比如文章 | ||
| aside | article元素的内容之外的、与article元素的内容相关的辅助信息 | ||
| header | 页面中一个内容区块或整个页面的标题 | ||
| footer | 整个页面或页面中一个内容区块的脚注 | ||
| nav | 页面中导航链接的部分 | ||
| figure | 一段独立的流内容，一般表示文档主体流内容中的一个独立单元；figcaption为元素组添加标题 | 内容 |
|
| main | 表示与网页标题或应用程序的主要功能直接相关的内容 | ||
| 其 他 元 素 |
video | 定义视频，比如电影片段或其他视频流 | |
| audio | 定义音频，比如音乐或其他音频流 | ||
| embed | 插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3 | ||
| mark | 主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，类似于马克笔的效果；例如搜索后把关键词高亮 | ||
| progress | 表示运行中的进程；显示JavaScript中耗费时间的函数的进程；一个进度条效果 | ||
| meter | 表示度量衡，仅用于已知最大值和最小值的度量 | ||
| time | 用于表示日期或时间，也可以同时表示两者，datetime代表事件发生的具体日期，pubdate为true代表是事件的发布日期 | ||
| ruby | 表示ruby注释（中文注音或字符） | 漢 漢 ㄏㄢˋ |
|
| rt | 字符（中文注音或字符）的解释或发音 | ||
| rp | 在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容 | ||
| wbr | 表示软换行。 br元素是此处必须换行，而wbr元素意思就是浏览器窗口或父级元素的宽度足够宽时（没必要换行时），不进行换行，而当宽度不够时，主动在此处进行换行。 wbr元素好像对字符型的语言用处比较大，但是对于中文，貌似没多大用处 |
This is the text This is the text |
|
| canvas | canvas元素表示图形，比如图表和其他图像；仅提供API给JS，使得脚本可以把内容绘制到画布上 | ||
| details | 用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。标题是可见的，点击标题，会显示细节信息。summary是details的第一个子元素 | HTML5This document teaches you everything |
|
| datalist | 表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表 | ||
| datagrid | 可选数据的列表，它以树形列表的形式显示 | ||
| output | 表示不同类型的输出，比如脚本的输出 | > 0100 + = |
|
| source | 为媒介元素（比如 和）定义媒介资源
|
||
| dialog | 表示对话框 |
新增的 input 元素的类型如下表。
| 类型 | 描述 | 示例 |
|---|---|---|
| 表示必须输入e-mail地址的文本输入框 | ||
| url | 表示必须输入数值的文本输入框 | |
| number | 表示必须输入数值的文本输入框 | |
| range | 表示必须输入一定范围内数字值的文本输入框 | |
| Date Pickers | 可选类型有： date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间） |
:::info
acticle 和 section 的区别？
article 元素可以看成是一种特殊种类的 section 元素，它比 section 元素更强调独立性。section 元素强调分段或分块，而 article 强调独立性，具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用 article 元素，但是如果想将一块内容分成几段的时候，应该使用 section 元素进行分段。
:::
:::danger section 元素的使用禁忌：
- 不要将 section 元素用作设置样式的页面容器，因为那是 div 元素的工作；
- 如果 article 元素、aside 元素或 nav 元素更符合状况，不要使用 section 元素；
- 不要为没有标题的内容区块使用 section 元素。 :::
由于很多浏览器尚未对 HTML 5 中新增的结构元素提供支持，我们无法知道客户端使用的浏览器是否支持这些元素，所以需要使用 CSS 追加如下声明，目的是通知浏览器页面中使用的 HTML 5 中新增元素都是以块方式显示的。
/* 追加block声明 */
article, aside, dialog, figure, footer, header, legend, nav, section, main {
display:block;
}
Internet Explorer8 以下的浏览器不支持使用这些尚未支持的的结构元素，为了在 ie8 及以下也能正常使用这些结构元素，需要使用 JavaScript 脚本。ie9 及以上是支持的，所以就不需要使用以下内容了。
<script>
document.createElement("header");
document.createElement("footer");
....
</script>
废除元素
由于某些原因，html5 中废除了一些元素。
- 能使用CSS替代的元素
对于 basefont、big、center、font、s、strike、tt、u 等元素，由于它们的功能都是纯粹为画面展示服务的，而HTML 5 中提倡把画面展示性功能统一放在CSS样式表中统一编辑，所以将这些元素废除，使用编辑 CSS、添加CSS 样式表的方式进行替代。
- 不再使用frame框架
对于 frameset 元素、frame 元素与 noframes 元素，由于 frame 框架对网页可用性存在负面影响，在 HTML 5 中已不支持 frame 框架（废除这三个元素），只支持 iframe 框架。
- 只有部分浏览器支持的元素
对于 applet、bgsound、blink、marquee 等元素，由于只有部分浏览器支持这些元素，特别是 bgsound 元素以及 marquee 元素，只被 Internet Explorer 所支持，所以在 HTML 5 中被废除。其中 applet 元素可由 embed 元素或 object 元素进行替代，bgsound 元素可由 audio 元素进行替代，marquee 可以由 JavaScript 编程的方式所替代。
- 其他被废除的元素
- 废除 rb 元素，使用 ruby 元素替代；
- 废除 acronym 元素，使用 abbr 元素替代；
- 废除 dir 元素，使用 ul 元素替代；
- 废除 isindex 元素，使用 form 元素与 input 元素相结合的方式替代；
- 废除 listing 元素，使用 pre 元素替代；
- 废除 xmp 元素，使用 code 元素替代；
- 废除 nextid 元素，使用 GUIDS 替代；
- 废除 plaintext 元素，使用 “text/plian” MIME 类型替代。
新增属性和废除属性
新增属性
| 属性 | 元素 | 描述 |
|---|---|---|
| autofocus | input(text)、select、textarea 与 button | 让元素在画面打开时自动获得焦点 |
| placeholder | input(text)、textarea | 对用户的输入的内容进行提示 |
| form | input、output、select、textarea、button与fieldset | 声明它属于哪个表单，之后元素可以放置在任何任何位置，不一定是表单内 |
| required | input(text)、textarea | 声明该元素内必须有输入内容 |
| novalidate | input、button | 可以取消提交时进行的有关检查 |
| control | label | 在label中放置一个表单元素，可以通过该标签的 control 属性访问该表单元素 |
| SelectionDirection | input(text)、textarea | 当用户在元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向 |
| maxlength、wrap | textarea | maxlength 限定可输入文字个数 wrap 指定表单提交时是否在文字换行处添加换行符 |
| media、download | a、area | media 属性规定目标URL是为什么类型的媒介/设备进行优化的 download 属性用于让用户下载目标链接所指向的资源，而不是直接打开该目标链接，这些属性均只能在 href 属性存在时使用 |
还有其他的一些新增属性。
| 属性 | 元素 | 描述 |
|---|---|---|
| start、reversed | ol | start 属性定义列表的开始编号 reversed 属性指定列表倒序显示 |
| charset | meta | 指定文档的字符编码 |
| type、label | menu | label 属性为菜单定义一个可见的标注， type 属性让菜单可以以上下文菜单、工具条、与列表菜单三种形式出现 |
| scoped | style | 规定样式的作用范围 |
| async | script | 定义脚本是否异步执行 |
| manifest | html | 开发离线 Web 应用程序时它与 API 结合使用，定义一个 URL，在这个URL 上描述文档的缓存信息 |
| sandbox、seamless与srcdoc | iframe | 用来提高页面安全性，防止不信任的Web页面执行某些操作 |
废除属性
HTML 4 中的一些属性在 HTML 5 中不再使用，而是采用其他属性或其他方案进行替代。
全局属性
所谓全局属性，是指可以对任何元素都使用的属性。
contentEditable属性
该属性的主要功能是允许用户编辑元素中的内容，当点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。可选值为 true 和 false。当未指定 true 或 false 时，则由 inherit 状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。
支持 contentEditable 属性的元素：defaults、A、ABBR、ACRONYM、ADDRESS、B、BDO、BIG、BLOCKQUOTE、BODY、BUTTON、CENTER、CITE、CODE、CUSTOM、DD、DEL、DFN、DIR、DIV、DL、DT、EM、FIELDSET、FONT、FORM、hn、I、INPUT type=button、INPUT type=password、INPUT type=radio、INPUT type=reset、INPUTtype=submit、INPUT type=text、INS、ISINDEX、KBD、LABEL。
designMode属性
该属性指定整个页面是否可编辑，当页面可编辑时，页面中任何支持 contentEditable 属性的元素都变成了可编辑状态。
designMode 属性只能在 JavaScript 脚本中被编辑修改。可选值有：on 和 off。JavaScript 脚本指定属性的方法为 document.designMode="on"。
浏览器支持情况：
- ie8：不支持该属性；
- ie9：支持该属性；
- chrome 和 safari：使用内嵌 frame 的方式，frame 可支持该属性；
- Firefox 和 Opera：允许使用 designMode 属性让页面进入编辑状态；
hidden属性
所有的元素都允许使用一个 hidden 属性。作用是通知浏览器不渲染该元素，使该元素处于不可见状态。可通过 JavaScript 脚本修改。
spellcheck属性
spellcheck属性是 HTML 5 针对 input（type=text）与 textarea 这两个文本输入框而提供的属性，对用户输入的文本内容进行拼写和语法检查。可选值是 true 和 false。
<textarea spellcheck="true">
<input type="text" spellcheck=false>
<!--但是不能写成这样-->
<textarea spellcheck>
如果元素的 readOnly 属性或 disabled 属性设为 true，则不执行拼写检查。
目前除了 IE 之外，Firefox、Chrome、Safari、Opera 等浏览器都对该属性提供了支持。
tabindex属性
tabindex 是开发中的一个基本概念，当不断敲击 Tab 键让窗口或页面中的控件获得焦点，当对窗口或页面中的所有控件进行遍历的时候，每一个控件的 tabindex 表示该控件是第几个被访问到的。
过去这个属性在编辑网页时是非常有用的，但如今控件的遍历顺序是由元素在页面上所处位置决定的，所以就不再需要了。
在默认情况下，只有链接元素与表单元素可以通过按键获得焦点。如果对其他元素使用 tabindex 属性后，也能让该元素获得焦点，那么当脚本中执行 focus() 语句的时候，就可以让该元素获得焦点。但这样做会产生一个副作用：该元素也可以通过按 Tab 键获得焦点，而这有时可能不是开发者想要的结果。
把元素的 tabindex 值设为负数（通常为-1）后就可以解决这个问题。tabindex 值为负数后，仍然可以通过编程的方式让元素获得焦点，但按下 Tab 键时该元素就不能获得焦点，这在复杂的页面中或复杂的 Web 应用程序中是十分有用的。在 HTML 4 中，-1是一个无用的属性值，但到了 HTML 5 中，通过巧妙运用可以让该属性值获得极大应用。
新增的事件
HTML 5中对页面、表单、键盘元素新增了各种事件，如下表。
只监听一次事件
HTML 5中对元素对象的 addEventListener 方法进行了扩充，允许开发者将该方法的第三个参数定义为一个配置对象，从而设置一个附加的选项，允许在配置对象中添加 once 属性值，用以让事件监听器只监听一次。
示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="button" type="button">点击我</button>
<script>
document.getElementById('button').addEventListener('click', function() {
alert('按钮被点击');
}, {
once: true
})
</script>
</body>
</html>
由于将 addEventListener 方法的第三个参数对象的 once 属性值设置为 true，click 事件处理函数只在用户鼠标第一次单击“点击我”按钮时起作用。
目前，Chrome 55 以上、Firefox 50 以上以及 Safari 7 以上版本的浏览器支持 once 选项。
to be continue…
若有收获，就点个赞吧
0 人点赞
