这是我参与「第四届青训营 」笔记创作活动的第12天
1.1.HTML5的语法变化
HTML5中的标记方法
-
内容类型
- HTML5的文件扩展符和内容类型保持不变，即扩展符仍然为“.html"或".htm"，内容类型仍然为"text/html"
-
DOCTYPE声明
-
它是必不可少的，位于文件第一行
-
HTML5中，刻意不使用版本声明，一份文档将会适用于所有版本的HTML。
-
HTML5中的DOCTYPE声明方法如下：
<! DOCTYPE html>
-
另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法如下面的代码所示
<! DOCTYPE HTML SYSTEM "about:legacy-compat">
在HTML5中像这样的DOCTYPE声明方式是允许的（不区分大小写，引号不区分是单引号还是双引号）
-
-
指定字符编码
-
在HTML5中，可以使用对元素直接追加charset属性的方式来指定字符编码：
<meta charset="UTF-8"> </meta>
-
HTML5确保了与之前HTML版本的兼容性
1.可以省略标记的元素
-
不允许写结束标记的元素（即只允许使用<元素/> 的形式进行书写）
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
2.具有boolean值的属性
-
对于具有boolean值的属性，例如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true；如果想要将属性值设为false，可以不使用该属性
-
另外，想要将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值
<!--只写属性不写属性值代表属性为true--> <input type="checkbox" checked> <!--不写属性代表属性为false--> <input type="checkbox"> <!--属性值=属性名，代表属性为true--> <input type="checkbox" checked="checked"> <!--属性值=空字符串，代表属性为true--> <input type="checkbox" checked="">
3.省略引号
- HTML5中，当属性值不包括空字符串、"<"、">"、"="、单引号、双引号等字符时，属性值两边的引号可以省略
1.2.新增和废除的元素
新增的元素之结构元素
1.section元素
- 可以使用这个元素定义文档的内容区块，比如章节、页眉、页脚或页面中的其他部分。
- 它可以和h1、h2等元素结合起来使用，标示文档结构
2.article元素
- 表示页面中的一块与上下文不相关的独立内容，譬如新闻报道或博客帖子等独立的内容
section与article的区别
- section比article更通用，不过它又不及div通用
- 如果只是要增加一个元素以便为页面指定样式，那么可以使用div
- 如果要增加一个元素来标记一些内容，指示这是由相关内容构成的一个结构明确的区块，那就可以使用section
- 如果有些内容可以独立于页面上的其他内容进行重用和分发，那就使用article
3.aside
- 表示article元素的内容之外的、与article元素的内容相关的辅助信息
4.header
- header有首部的区块和整个文档的页眉可以使用这个元素
5.hgroup
- 用于对整个页面或页面中一个内容区块的标题进行组合
6.footer
- footer定义一个区块的底部或整个文档的页脚
- 一般来说，会包含创作者的姓名、创作日期、创作者联系信息
7.nav
- 使用这个元素把网站中用于导航的所有链接组织在一起
8.figure
-
用来表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元（定义类似照片、图标甚至代码清单等独立的内容）
-
使用figcaption元素为figure元素组添加标题
<figure> <figcaption>PRC</figcaption> <p> 1111 </p> </figure>
新增的其他元素
1.video
-
在页面中加入一个视频
<video src="movie.ogg"></video> -
在元素中可以对应每种格式分别使用一个元素（不要与src属性混淆），这样就能提供一组视频，每个视频分别有自己的格式，可以让浏览器选择它支持的第一种格式
<video controls autoplay width="512" height="288"> <source src="video/tweetsip.mp4"> <source src="video/tweetsip.webm"> <source src="video/tweetsip.ogv"> <p> Sorry </p> </video> -
浏览器从上向下查找，直到找到它能播放的一种格式
-
对于每个source元素，浏览器会加载视频文件的元数据，查看能不能播放这个视频
-
如果浏览器不支持视频，则会显示p的文本
2.audio
- audio可以用它在页面中包含声音内容
3.embed
-
用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等
<embed src="horse.wav">
4.mark
- mark这个元素用于突出显示某些文本
5.progress
- progress可以显示任务的完成进度，可以使用该元素来显示JavaScript中耗费时间的函数的进程
6.time
- time是一个时间，一个日期或者一个日期时间
7.wbr
-
表示软换行
-
与br元素的区别：
- br元素表示此处必须换行
- wbr的意思是浏览器窗口或父级元素的宽度足够宽时（没必要换行），不进行换行，而当宽度不够时，主动在此处进行换行
-
对字符型的语言作用挺大，对中文作用不大
8.canvas
-
canvas用来在页面中显示用JavaScript绘制的图像和动画
-
这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把像绘制的东西绘制到这块画布上
<canvas id="myCanvas" width="200" height="200"></canvas>
9.command
- 表示命令按钮，如单选按钮、复选框或按钮
-
<command onclick="cut()" label="cut">
10.details
-
表示用户要求得到并且可以得到的细节信息
-
可以与summary元素配合使用，summary元素提供标题或图例
- 标题是可见的，用户点击标题时，会显示出细节信息。
- summary元素应该是details元素的第一个子元素
-
<details> <summary>HTML 5</summary> learn about HTML5 </details>
11.datalist
- 表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表
12.datagrid
- 表示可选数据的列表，它以树形列表的形式来显示
13.keygen
- 表示生成密钥
14.output
- 表示不同类型的输出，比如脚本的输出
15.source
- 为媒介元素（如video和audio）定义媒介资源
16.menu
-
表示菜单列表。当希望列出表单控件时使用该标签
<menu> <li><input type="checkbox" />Red</li> <li><input type="checkbox" />blue</li> </menu>
新增的input元素的类型
1.email
- 表示必须输入Email地址的文本输入框
2.url
- 表示必须输入URL地址的文本输入框
3.number
4.range
- 表示输入一定范围内数字值的文本输入框
5.Date Pickers
-
拥有多个可供选取日期和时间的新型输入文本框
- date——选取日、月、年
- month——选取月、年
- week——选取周和年
- time——选取时间（小时和分钟）
- datetime——选取时间、日、月、年（UTC时间）
- datetime-local——选取时间、日、月、年（本地时间）
废除的元素
-
能使用CSS替代的元素
- 对于basefont、big、center、font、s、strike、tt、u这些元素
-
不再使用frame框架
- 废除frameset元素、frame元素和noframes元素
- 只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式
-
只有部分浏览器支持的元素
- 如applet、bgsound、blink、marquee等等
-
其他被废除元素：
- rb、acronmy等等
