一、HTML5的语法
1.内容类型依然是text/html
2.文档类型声明相较于HTML4的写法来说，HTML5更简洁
<!DOCTYPE html>
3.添加这句话，告知浏览器向下兼容，因为有很多浏览器还不支持html5，或支持的不全
<!DOCTYPE html SYSTEM “about:legacy-compat">
4.在HTML5使用charset追加字符编码方式
<meta charset="UTF-8">
<!--也可以使用HTML4的形式-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.元素标记的省略，即不允许写结束标记、可以省略结束标记、开始标记和结束标记全部可以省略
1.不允许写结束标记的元素有area、base、br、col、command、embed、hr、img、input、keygren、link、meta、param、source、track、wbr
即只能用<标签名/>的形式表示
2.可以省略结束标记的元素有li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
3.可以省略全部标记的元素有html、body、head、colgroup、tbody
可以完全被省略，但它是以隐形的方式存在
6.属性值两边既可以用双引号，也可以用单引号。HTML5作了更多改变，当属性值不包括空字符串、<、>、=、单或双引号等字符时，属性值两边的引号可以省略，如
<input type=text>
二、HTML5元素
1.HTML5新增加的语义化元素
| 元素名称 | 说明 |
|---|---|
| header | 定义头部区域 |
| footer | 定义头部区域 |
| section | web页面中的一块区域 |
| article | 独立的文章 |
| aside | 相关内容或引文 |
| nav | 导航类辅助内容 |
实际开发中，开发人员应使用CSS定义样式
2.HTML5新增的功能元素
1）hgroup：对整个页面或页面中一个内容区块的标题进行组合
<hgroup></hgroup>
<!--hgroup标签中间可以包含h1-h6的段落标签-->
<!--在HTML4表示为div标签，元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响-->
2）figure：独立的流内容，一般表示文档主体流内容中的一个独立单元
<figure>
<p>黄浦江上的的卢浦大桥</p>
<p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>
</figure>
<!--在HTML4表示为dl标签-->
3）source：为媒介元素定义媒介资源
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<!--可以使用audio或video标签-->
| 属性 | 值 | 描述 |
|---|---|---|
| media | media query | 规定媒体资源的类型 |
| src | url | 规定媒体文件的 URL |
| type | numeric value | 规定媒体资源的 MIME 类型 |
4）vedio标签：定义视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
</video>
<!--添加controls属性向用户显示控件，比如播放按钮-->
<!--media属性向用户显示控件，media 属性规定媒体资源的类型（文件是为何种媒体/设备进行了优化）。浏览器可使用该属性来判断它是否能播放这个文件-->
5）audio元素：定义音频
<audio src="movie.ogg" autoplay=autoplay></audio>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 向用户显示控件，比如播放按钮 |
| loop | loop | 每当音频结束时重新开始播放 |
| preload | preload | 音频在页面加载时进行加载，并预备播放，不能和autoplay合用 |
| src | url | 要播放的音频的 URL |
6）embed：用来插入各种插件，也可以添加width等属性
<embed src="helloworld.swf"></embed>
7）mark元素：用于视觉上向用户呈现高亮文字，主要用在搜索后高亮的关键字
<mark>文本内容</mark>
8）time元素：表示时间日期
<time datetime="2020-02-14">情人节</time>
<time datetime="2020-02-14T20：00">情人节</time>（T是文字分隔表示时间）
<time datatime="2020-02-14T20：00Z">情人节</time>（Z表示UTC标准时间）
<time datatime="2020-02-14T20：00+09：00">情人节</time>（加上了时差）
time元素New属性
| 属性 | 值 | 描述 |
|---|---|---|
| datetime | datetime | 规定日期/时间。另一种方式，则是由元素的内容给定日期/时间。 |
| pubdate | datetime | (该属性仍在被 WHATWG 和 W3C 组织设计和讨论中。) 指示 |
<time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期
9）output不同类型的脚本输出
| 属性 | 值 | 描述 |
|---|---|---|
| for | element_id | 描述计算中使用的元素与计算结果之间的关系。 |
| form | form_id | 定义输入字段所属的一个或多个表单。 |
| name | name | 定义对象的唯一名称（表单提交时使用）。 |
<!--output所属的表单元素id要和form一致，oninput和事件相关，后续讲解-->
<form action="demo_form.asp" id="numform"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" name="a" value="50">100
+<input type="number" id="b" name="b" value="50">
<br><br>
<input type="submit">
</form>
<output form="numform" name="x" for="a b"></output>
10）menu：表示列表菜单，当需要列出表单控件时使用该元素
目前主流浏览器已经不支持该元素
<!--label规定菜单的可见标签；type规定要显示哪种菜单类型-->
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="file_new()">New...</button>
<button type="button" onclick="file_open()">Open...</button>
<button type="button" onclick="file_save()">Save</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="edit_cut()">Cut</button>
<button type="button" onclick="edit_copy()">Copy</button>
<button type="button" onclick="edit_paste()">Paste</button>
</menu>
</li>
</menu>
11）ruby元素：表示ruby注释（中文注音或字符）
<!--rt表示字符的解释或发音；rp元素以定义不支持ruby元素的浏览器所显示的内容-->
<ruby>漢
<rt>ㄏㄢˋ</rt>
<rp>ㄏ</rp>
</ruby>
image.png
12）wbr元素：软换行。与br不同，wbr只有在浏览器窗口或父级元素的宽度不够宽时才会换行，但使用方式和br一样
13）command元素
一定要包含在menu内
<menu>
<command onclick="alert('Hello World')" disabled="disabled">
Click Me!</command>
</menu>
| 属性 | 值 | 描述 |
|---|---|---|
| checked | checked | 定义是否被选中。仅用于 radio 或 checkbox 类型。 |
| disabled | disabled | 定义 command 是否可用。 |
| icon | url | 定义作为 command 来显示的图像的 url。 |
| label | text | 为 command 定义可见的 label。 |
| radiogroup | groupname | 定义 command 所属的组名。仅在类型为 radio 时使用。 |
| type | checkbox command radio | 定义该 command 的类型。默认是 "command"。 |
14）summary和details
<details>
<summary>文本</summary>
</details>
15）datalist：常常与Input联合使用，用于下拉选项列表
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
16）datagrid：表示可选的数据列表，以树形图方式表示
17）keygen：表示生成密钥
<!-- 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。-->
<form action="/example/html5/demo_form.asp" method="get">
加密：<keygen name="security" />
<input type="submit" />
</form>
18）progress：表示运行中的进程，可以显示js中耗费时间的函数进程
<progress value="22" max="100"></progress>
<!--max表示需要完成的任务量，value表示已经完成的任务量-->
19）其它标签
email：必须输入地址的文本框
url：必须输入URL的文本框
number：必须输入数值的文本框
range：必须输入一定范围内数值的文本框
Date Pickers：输入日期和时间的文本框，包括
1.date：选取日、月、年
2.month：选取年、月
3.week：选取周、年
4.time：选取时间（小时和分钟）
5.datetime：选取时间、日、月、年（UTC时间）
6.datetime-local：选取时间、日、月、年（本地时间）
<body>
<form action="/example/html5/demo_form.asp" method="get">
<input type="date" name="user_date" >
<input type="submit" >
</form>
</body>
Screenshot_20200428_113536.png
HTML5废除掉了HTML4的元素：
1.用CSS代替了basefont、big、center、font、s、strike、tt、u等，s、strike由del替代，tts由font-family替代
2.只支持iframe框架
3.applet、bgsound、blink、marquee等元素只有部分浏览器支持
4.ruby代替rb
5.abbr代替acronym
6.ul代替dir
7.form、input结合代替isindex
8.pre代替listing
9.code代替xmp
10.GUIDS代替nextid
11."text/plain"MIME类型代替plaintext
三、HTML5对象属性
1.表单属性
autofocus，让网页打开时自动聚焦，即打开网页，自动生产光标
<input autofocus>
placeholder，添加提示性文字
<input placeholder="提示性文字">
required，检查必填字段是否填写
<form action="demo-form.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
autocomplete，自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，显示出以前填写过的选项。
为on表示开启自动完成，off表示关闭
<form action="demo-form.php" autocomplete="on"></forum>
min、max，规定输入的字段最大长度和最小长度
<input type="number" name="points" min="0" max="10" />
multiple：可以选择一个以上的值，常用于多选文件
<form action="/example/html5/demo_form.asp" method="get">
选择图片：<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
pattern：限制规定用于验证输入字段的模式，一般为正则来限制
<input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
<!--只能输入三个字母的代码-->
step：设置输入字符的合法间隔值
<input type="number" name="points" step="3" />
<!--代表输入值．．．－３，０，３，６，９．．．-->
formaction：向何处发送表单数据
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<!--绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）;相对 URL - 指向站点内的文件（比如 src="example.htm"）-->
<!--该属性适用于 type="submit" 以及 type="image"-->
enctype：规定在发送到服务器之前应该如何对表单数据进行编码
<form action="form_action.asp" enctype="text/plain">
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
| multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 |
| text/plain | 空格转换为 "+" 加号，但不对特殊字符编码 |
formmethod：定义发送表单数据到 action URL 的 HTTP 方法。formmethod 属性覆盖 <form> 元素的method属性。
<!--formmethod 属性与 type="submit" 和 type="image" 配合使用-->
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>
novalidate：规定当提交表单时不对其进行验证
<form action="demo_form.asp" novalidate="novalidate">
<!--novalidate 属性适用于：<form>，以及以下类型的 <input> 标签-->
formtarget：等同于target（HTML5不支持target）
<input type="submit" formtarget="_blank" value="提交到一个新的页面上">
<!--可以与 type="submit" 和 type="image" 配合使用, formtarget 属性覆盖 <form> 元素的target-->
2.链接属性
为a和area增加了media属性规定被链接文档将显示在什么设备上，media 属性用于为不同的媒介类型规定不同的样式
| 值 | 描述 |
|---|---|
| screen | 计算机屏幕（默认） |
| tty | 电传打字机以及类似的使用等宽字符网格的媒介 |
| tv | 电视机类型设备（低分辨率、有限的滚屏能力） |
| projection | 放映机 |
| handheld | 手持设备（小屏幕、有限带宽） |
| 打印预览模式/打印页面 | |
| braille | 盲人点字法反馈设备 |
| aural | 语音合成器 |
| all | 适用于所有设备 |
为area增加了hreflang属性和rel属性
<!--hreflang 属性规定被链接文档中文本的语言-->
<link href="shanghai.htm" rel="parent" charset="UTF-8" hreflang="zh-Hans" />
| 值 | 描述 |
|---|---|
| alternate | 文档的可选版本（例如打印页、翻译页或镜像） |
| stylesheet | 文档的外部样式表 |
| start | 集合中的第一个文档 |
| next | 集合中的下一个文档 |
| prev | 集合中的前一个文档 |
| contents | 文档目录 |
| index | 文档索引 |
| glossary | 文档中所用字词的术语表或解释 |
| copyright | 包含版权信息的文档 |
| chapter | 文档的章 |
| section | 文档的节 |
| subsection | 文档的子段 |
| appendix | 文档附录 |
| help | 帮助文档 |
| bookmark | 相关文档 |
| nofollow | Google 使用 "nofollow"，用于指定 Google 搜索引擎不要跟踪链接 |
size：定义尺寸大小
3.其他属性
为ol增加reversed，让列表倒序显示
meta增加charset设置编码
menue定义type和label
span定义多列多行的整体样式，常用在样式的整体设计上
col和colgroup定义整体样式
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
...
scope：标识某个单元是否是列、行、列组或行组的表头
<th scope="col">Month</th>
| 值 | 描述 |
|---|---|
| col | 规定单元格是列的表头 |
| row | 规定单元格是行的表头 |
| colgroup | 规定单元格是列组的表头 |
| rowgroup | 规定单元格是行组的表头 |
async：判断脚本是否异步执行（仅适用于外部脚本，只有在使用 src 属性时）
<script type="text/javascript" src="demo_async.js" async="async"></script>
<!--如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本-->
manifest，主要用在开发离线Web应用程序时它与API的结合使用
<!--规定文档的缓存 manifest 的位置,-->
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<head>
<!--绝对 URL - 指向另一个网站（比如 href="http://www.example.com/demo.appcache"）
相对 URL - 指向网站内的一个文件（比如 href="demo.appcache"）-->
iframe，三个属性用于提高页面安全性：sandbox、seamless、srcdoc
4.HTML5废除的HTML4的属性
image.png
image.png
image.png
四、HTML5全局属性
1.contentEditable
允许用户可以在线编辑元素中的内容，通过true，false控制开关；当未指定true或false的时候由inherit状态决定，如果父元素可编辑，该元素就可编辑
var x=document.getElementById("myP").contentEditable
<ul contentEditable="true">
<li></li>
</ul>
2.designMode
用来指定整个页面是否可以编辑，如果可以编辑，那页面中任何支持contentEditable
属性的元素都变成可编辑的状态，这个属性只能在JS脚本中修改
document.designMode="on/off"
3.hidden
设定该元素的可见状态，可以通过JS修改。同理，on开，off关
<p hidden>这个段落应该被隐藏。</p>
4.spellcheck检查拼写
<textarea spellcheck="true">
<input type=text spellcheck=false>
<!--如果readonly或disabled设置为true，则不执行拼写检查-->
5.tabindex
讲第几个被通过tab键访问到
网友评论