HTML5 速览

HTML5 速览

---

一. HTML5 元素分类

HTML赋值文档内容的结构和含义, 内容呈现由css样式控制

元素选用原则

1. 少亦可为多

   标记只应该应内容对语义的需要使用. 有条经验法则是: 问问自己打算如何发挥一个元素的语义作用, 如果不能马上答出就不用这个元素

2. 别误用元素

   对内容进行标记时, 只宜将元素用于他们原定的用途, 不要创造自有的语义. 如果找不到适合自己所要含义的元素, 可以考虑使用通用元素( 如span或div ), 并且用全局属性class表明其含义. css样式不是类属性的唯一用途.

3. 具体为佳

   用来标记内容的元素应该选择最为具体的那个. 如果已有元素能恰当表明内容的类型, 就不要使用通用元素. html4中存在依赖div构建页面结构的倾向, 不好维护.

4. 对用户不要想当然

   呈现与语义分离原则的目的完全是为了让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

这个涉及的知识点较多, 就不在这演示