HTML5 速览
一. HTML5 元素分类
HTML赋值文档内容的结构和含义, 内容呈现由css样式控制
元素选用原则
-
少亦可为多
标记只应该应内容对语义的需要使用. 有条经验法则是: 问问自己打算如何发挥一个元素的语义作用, 如果不能马上答出就不用这个元素
-
别误用元素
对内容进行标记时, 只宜将元素用于他们原定的用途, 不要创造自有的语义. 如果找不到适合自己所要含义的元素, 可以考虑使用通用元素( 如span或div ), 并且用全局属性class表明其含义. css样式不是类属性的唯一用途.
-
具体为佳
用来标记内容的元素应该选择最为具体的那个. 如果已有元素能恰当表明内容的类型, 就不要使用通用元素. html4中存在依赖div构建页面结构的倾向, 不好维护.
-
对用户不要想当然
呈现与语义分离原则的目的完全是为了让HTML文档更易于程序化处理, 所以随着HTML5的采用和实现愈加广泛, HTML内容的这种使用会日益增多. 如果不关心标记的准确性和一致性, 这样的HTML文档处理起来更为困难, 用户能为其找到的用户也很有限.
元素速览( *** )
文档和元数据元素
用途: 创建HTML文档的上层建筑, 向浏览器说明文档的情况, 定义脚本程序和css样式, 提供浏览器禁用脚本时要显示的内容
| 元素 | 说明 | 类型 | h5新增或变化 |
|---|---|---|---|
| base | 设置相对URL的基础 | 元数据 | 无变化 |
| body | 表示HTML文档的内容 | 无 | 有变化 |
| DOCTYPE | 表示HTML文档的开始 | 无 | 有变化 |
| head | 包含文档的元数据 | 无 | 无变化 |
| html | 表示文档中HTML部分的开始 | 无 | 有变化 |
| link | 定义与外部资源(通常是样式表或网站图标)的关系 | 元数据 | 有变化 |
| meta | 提供关于文档的信息 | 元数据 | 有变化 |
| noscript | 包含浏览器禁用脚本或不支持脚本时显示的内容 | 元数据, 短语 | 无变化 |
| script | 定义脚本语言, 可以是文档内嵌的也可以是外部文件中的 | 元数据, 短语 | 有变化 |
| style | 定义css样式 | 元数据 | 有变化 |
| title | 设置文档标题 | 元数据 | 无变化 |
文本元素
用途: 为内容提供基本的结构和含义
| 元素 | 说明 | 类型 | h5新增或变化 |
|---|---|---|---|
| a | 生成超链接 | 短语, 流 | 有变化 |
| abbr | 缩略语 | 短语 | 无变化 |
| b | 不带强调或着重意味地标记一段文字 | 短语 | 有变化 |
| br | 表示换行 | 短语 | 无变化 |
| cite | 表示其他作品的标题 | 短语 | 有变化 |
| code | 表示计算机代码片段 | 短语 | 无变化 |
| del | 表示从文档中删除的文字 | 短语, 流 | 新增 |
| dfn | 表示术语定义 | 短语 | 无变化 |
| em | 表示着重强调的一段文字 | 短语 | 无变化 |
| i | 表示与周边内容秉性不同的一段文字, 比如来自另一种语言的词语 | 短语 | 有变化 |
| ins | 表示加入文档的文字 | 短语, 流 | 无变化 |
| kbd | 表示用户输入内容 | 短语 | 无变化 |
| mark | 表示一段因为与上下文中另一词语相关而被突出显示的内容 | 短语 | 新增 |
| q | 表示引自他处的内容 | 短语 | 无变化 |
| rp | 与ruby元素结合使用, 标记括号 | 短语 | 新增 |
| rt | 与ruby元素结合使用, 标记注音符号 | 短语 | 新增 |
| ruby | 表示位于表意文件上方或右方的注音符号 | 短语 | 新增 |
| s | 表示文字已不再准确 | 短语 | 有变化 |
| samp | 表示计算机程序的输出内容 | 短语 | 无变化 |
| small | 表示小号字体内容 | 短语 | 有变化 |
| span | 一个没有自己语义的通用元素 | 短语 | 无变化 |
| strong | 表示重要内容 | 短语 | 无变化 |
| sub | 表示下标文字 | 短语 | 无变化 |
| sup | 表示上标文字 | 短语 | 无变化 |
| time | 表示时间或者日期 | 短语 | 新增 |
| u | 不带强调或着重意味地标记一段文字 | 短语 | 有变化 |
| var | 表示程序或计算机系统中的变量 | 短语 | 无变化 |
| wbr | 表示可安全换行的地方 | 短语 | 新增 |
对内容分组
用途: 将相关内容分组
| 元素 | 说明 | 类型 | h5新增或变化 |
|---|---|---|---|
| blockquote | 表示引自他处的大段内容 | 流 | 无变化 |
| dd | 用在dl元素之中, 表示定义 | 无 | 无变化 |
| div | 一个没有任何既定语义的通用元素, 与span类似 | 流 | 无变化 |
| dl | 表示包含一系列术语和定义的说明列表 | 流 | 无变化 |
| dt | 用在dl元素之中, 表示术语 | 无 | 无变化 |
| figcaption | 发送figure元素的标题 | 无 | 新增 |
| figure | 表示图片 | 流 | 新增 |
| hr | 表示段落级别的主题转换 | 流 | 有变化 |
| li | 用在ul, ol和menu元素中, 表示列表项 | 无 | 有变化 |
| ol | 表示有序列表 | 流 | 有变化 |
| p | 表示段落 | 流 | 有变化 |
| pre | 表示其格式应被保留的内容, 如code | 流 | 无变化 |
| ul | 表示无序列表 | 流 | 有变化 |
划分内容
用途: 划分内容, 让每个概念, 观点或主题彼此分隔开. 它们中有许多是新增的. 这些元素为分离元素的含义和外观做了大量基础性工作
| 元素 | 说明 | 类型 | h5新增或变化 |
|---|---|---|---|
| address | 表示文档或article的联系信息 | 流 | 新增 |
| article | 表示一段独立的内容 | 流 | 新增 |
| aside | 表示与周边内容稍有牵涉的内容 | 流 | 新增 |
| details | 生成一个区域, 用户将其展开可以获得更多细节知识 | 流 | 新增 |
| footer | 表示尾部 | 流 | 新增 |
| h1-h6 | 表示标题 | 流 | 无 |
| header | 表示首部 | 流 | 新增 |
| hgroup | 将一组标题组织在一起, 以便文档大纲只显示其中第一个标题 | 流 | 新增 |
| nav | 表示有意集中在一起的导航元素 | 流 | 新增 |
| section | 表示一个重要的概念或主题 | 流 | 新增 |
| summary | 用在details元素中, 表示该元素内容的标题或说明 | 无 | 新增 |
制表
用途: 制作显示数据的表格. 表格在html5中的主要变化时不能再用来控制页面布局, 这项工作转交给了css
| 元素 | 说明 | 类型 | h5新增或变化 |
|---|---|---|---|
| caption | 表示表格标题 | 无 | 有变化 |
| col | 表示一列 | 无 | 有变化 |
| colgroup | 表示一组列 | 无 | 有变化 |
| table | 表示表格 | 流 | 有变化 |
| tbody | 表示表格主体 | 无 | 有变化 |
| td | 表示单元格 | 无 | 有变化 |
| tfoot | 表示表脚 | 无 | 有变化 |
| th | 表示标题行单元格 | 无 | 有变化 |
| thead | 表示标题行 | 无 | 有变化 |
| tr | 表示一行单元格 | 无 | 有变化 |
创建表单
用途: 创建html表单, 以便获取用户的输入数据
| 元素 | 说明 | 类型 | h5新增或变化 |
|---|---|---|---|
| button | 表示可用来提交或重置表单的按钮(或一般按钮) | 短语 | 有变化 |
| datalist | 定义一组提供给用户的建议值 | 流 | 有变化 |
| fieldset | 表示一组表单元素 | 流 | 有变化 |
| form | 表示html表单 | 流 | 有变化 |
| input | 表示用来收集用户输入数据的控件 | 短语 | 有变化 |
| keygen | 生成一对公钥和私钥 | 短语 | 新增 |
| label | 表示表单元素的说明标签 | 短语 | 有变化 |
| legend | 表示fieldset元素的说明性标签 | 无 | 无变化 |
| optgroup | 表示一组相关的option元素 | 无 | 无变化 |
| option | 表示供用户选择的一个选项 | 无 | 无变化 |
| output | 表示计算结果 | 短语 | 新增 |
| select | 给用户提供一组固定的选项 | 短语 | 有变化 |
| textarea | 用户可以用它输入多行文字 | 短语 | 有变化 |
嵌入内容
用途: 在html文档中嵌入内容
| 元素 | 说明 | 类型 | h5新增或变化 |
|---|---|---|---|
| area | 表示一个用于客户端分区响应图的区域 | 短语 | 有变化 |
| audio | 表示一个音频资源 | 无 | 新增 |
| canvas | 生成一个动态的图形画布 | 短语, 流 | 新增 |
| embed | 用插件在html文档中嵌入内容 | 短语 | 新增 |
| iframe | 通过创建一个浏览上下文在一个文档中嵌入另一个文档 | 短语 | 有变化 |
| img | 嵌入图像 | 短语 | 有变化 |
| map | 定义客户端分区响应图 | 短语, 流 | 有变化 |
| meter | 嵌入数值在许可值范围内的图形表示 | 短语 | 新增 |
| object | 在html文档中嵌入内容. 也可用于生成浏览器上下文 和生成客户端分区响应图 |
短语, 流 | 有变化 |
| param | 表示将通过object元素传递给插件的参数 | 无 | 无变化 |
| progress | 嵌入目标进展或任务完成情况的图形表示 | 短语 | 新增 |
| source | 表示媒体资源 | 无 | 新增 |
| svg | 表示结构化矢量内容 | 无 | 新增 |
| track | 表示媒体的附加轨道 | 无 | 新增 |
| video | 表示视频资源 | 无 | 新增 |
二. HTML5 不常见的全局属性
全局属性( global attribute ), 用来配置所有元素共有的行为
accesskey
设定选择元素的快捷键
<form action="">
Name: <input type="text" name="name" accesskey="t"><br>
Password: <input type="password" name="password" accesskey="m"><br>
<input type="submit" value="登录" accesskey="n">
</form>
按下 alt+t, 焦点便转移到name输入框上
contenteditable
这个是html5中新增的属性, 设置后用户能修改内容
<p contenteditable="true">今天天气很不错</p>
效果如下
dir
规定元素中文字的方向, 有效值有 ltr(从左到右), rtl(从右到左)
<p dir="rtl">今天天气很不错</p>
spellcheck属性
spellcheck属性用来表明浏览器是否应该对元素的内容进行拼写检查, 用于用户编辑文字时有帮助
三. HTML5新增元素体验
文本元素
del
属性cite: 指定原因文档的url, datetime: 设置修改时间
<p>今天天气很 <del>不错</del> 糟糕</p>
mark
下面有段话是重点, <mark>这段话需要重点标注</mark>
ruby, rt和rp
rt: 用来标记注音符号, rp: 用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号
<rudy>魑<rp>(</rp><rt>chī</rt><rp>)</rp></rudy>
<rudy>魅<rp>(</rp><rt>mèī</rt><rp>)</rp></rudy>
<rudy>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></rudy>
<rudy>魉<rp>(</rp><rt>liǎng</rt><rp>)</rp></rudy>
time
属性 datetime: 以RFC3339指明日期
属性 pudate: 如果是true, 表明time表示整个html或离该元素最近的article的发布日期
这篇博客发布的日期是 <time datetime="2020-12-6">2020-12-6</time>
wbr
表示超过当前浏览器窗口的内容适合再此换行, 换不换行还是由浏览器决定
内容分组
figcaption和figure
<figure>
<figcaption>
说明 图1.1
</figcaption>
<code>
line1;
line2
</code>
</figure>
划分内容
基本都是h5新增元素, 除了 summary 都是块元素, 按实际用途使用标签
创建表单
keygen
这个特性还未得到很好的支持, 暂不建议使用
output
<form action="" oninput="res.value = number1.valueAsNumber * number2.valueAsNumber">
<fieldset>
<legend>output乘法</legend>
<input type="number" name="number1"> *
<input type="number" name="number2"> =
<output for="number1 number2" name="res"></output>
</fieldset>
</form>
嵌入内容
audio元素
<audio controls autoplay>
<source src="url.ogg">
<source src="url.mp3">
<source src="url.wav">
该音频不能被播放
</audio>
embed
type指定内容的mime类型
<embed src="内容地址" type="application/x-shockwave-flash"
width="500" height="300" allowfullscreen="true">
cavas
这个涉及的知识点较多, 就不在这演示