地址：http://note.youdao.com/noteshare?id=ca45c17e98435e0a6095f05bd7e7f565
下面是直接复制粘贴过来的，没有图片和乱版了。
HTML5元素背景基本知识
1.语义与呈现分离
①HTML5中的一大主要变化是基本信念方面的：将元素的语义与元素对其内容呈现结果的影响分开。
简单理解：HTML元素负责文档内容的结构和含义，CSS样式应用于元素上来控制内容的呈现。
②HTML5中新增的大多数元素有具体的含义。
举例：
article元素可以用来表示适于联合供稿的独立成篇的内容。
figure元素表示图片。
③圆滑的定义，对应用广泛的HTML4元素保留。HTML5成了一个“双速”标准。
举例：b元素
HTML4：指示浏览器以粗体显示其开始标签和结束标签之间的内容。
HTML5：b元素表示一段文字（将这段文字从周围文字中凸现出来并不表示特别的强调或重要性），习惯上使用粗体呈现，其使用场合包括文章提要中的关键字或产品评论中的产品名称等。
（其实说白了也是粗体显现）
2.元素选用原则
由于用HTML元素来标记的内容类型过多，不同内容的相同术语的含义可能不同。
举例：section在技术规范、合同和博客文章三种情况下的含义截然不同。
作者对于选择用来标记内容的元素方面的几条原则：
①少亦可为多：标记只应该应内容对语义的需要使用，不要乱用，把文档弄得标记密布。
经验法则：问问自己打算如何发挥一个元素的语义作用，如果不能马上答出就不用这个元素。
②别误用元素：每个元素针对的是一种特定类型的内容，只宜将元素用于它们原定的用途，不要创造自有的语义。
PS：若找不到适合自己所要含义的元素，可以考虑使用通用元素（如span或div），并且用全局属性class表明其含义。CSS样式不是类属性唯一的用途。
③具体为佳，一以贯之：用来标记内容的元素应该选择最为具体的那个。能用已有元素就别用通用元素。
④对用户不要想当然：用户不仅仅是只关心在浏览器中呈现的效果而已。
3.元素说明体例
元素摘要表。
4.元素速览
1.文档和元数据元素
创建HTML文档的上层建筑，向浏览器说明文档的情况，定义脚本程序和CSS样式，提供浏览器禁用脚本时要显示的内容。
元素 说明 类型 新增或有无变化
base 设置相对URL的基础 元数据 无变化
body 表示HTML文档的内容 无 有变化
DOCTYPE 表示HTML文档的开始 无 有变化
head 包含文档的元数据 无 无变化
html 表示文档中HTML部分的开始 无 有变化
link 定义与外部资源(通常是样式表或网站图标)的关系 元数据 有变化
meta 提供关于文档的信息 元数据 有变化
noscript 包括浏览器禁用脚本或不支持脚本时显示的内容 元数据、短语 无变化
script 定义脚本程序，可以是文档内嵌的也可以是外部文
件中的 元数据、短语 有变化
style 定义CSS样式 元数据 有变化
title 设置文档标题 元数据 无变化
2.文本元素
用来为内容提供基本的结构和含义。
元素 说明 类型 新增或有无变化
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 表示可安全换行的地方 短语 新增
3.对内容分组
用于分组的元素
元素 说明 类型 新增或有无变化
blockquote 表示引自他处的大段内容 流 无变化
dd 用在dl元素之中，表示定义 无 无变化
div 一个没有任何既定语义的通用元素，是span元素
在流元素中的对应物 流 无变化
dl 表示包含一系列术语和定义的说明列表 流 无变化
dt 用在dl元素之中，表示术语 无 无变化
figcaption 表示figure元素的标题 无 新增
figure 表示图片 流 新增
hr 表示段落级别的主题转换 流 有变化
li 用在ul、ol和menu元素中，表示列表项 无 有变化
ol 表示有序列表 流 有变化
p 表示段落 流 有变化
pre 表示其格式应被保留的内容 流 无变化
ul 表示无序列表 流 有变化
4.划分内容
让每个概念、观点或主题彼此分隔开。
用于划分内容的元素
元素 说明 类型 新增或有无变化
address 表示文档或article的联系信息 流 新增
article 表示一段独立的内容 流 新增
aside 表示与周边内容稍有牵涉的内容 流 新增
details 生成一个区域，用户将其展开可以获得更多细节
知识 流 新增
footer 表示尾部 流 新增
h1~h6 表示标题 流 无变化
header 表示首部 流 新增
hgroup 将一组标题组织在一起，以便文档大纲只显示其
中第一个标题 流 新增
nav 表示有意集中在一起的导航元素· 流 新增
section 表示一个重要的概念或主题 流 新增
summary 用在details元素中，表示该元素内容的标题或说明 无 新增
5.制表
表格在HTML5中的主要变化是不能再用来控制页面布局，这项工作交给了CSS布局特性。
表格元素
元素 说明 类型 新增或有无变化
caption 表示表格标题 无 有变化
col 表示一列 无 有变化
colgroup 表示一组列 无 有变化
table 表示表格 流 有变化
tbody 表示表格主体 无 有变化
td 表示单元格 无 有变化
tfoot 表示表脚 无 有变化
th 表示标题行单元格 无 有变化
thead 表示标题行 无 有变化
tr 表示一行单元格 无 有变化
6.创建表单
获取用户的输入数据。HTML5中对这方面新增许多元素和特性（包括在用户提交表单时在客户端验证输入数据的功能）。
表单元素
元素 说明 类型 新增或有无变化
button 表示可用来提交或重置表单的按钮（或一般按钮） 短语 有变化
datalist 定义一组提供给用户的建议值 流 有变化
fieldset 表示一组表单元素 流 有变化
form 表示HTML表单 流 有变化
input 表示用来收集用户输入数据的控件 短语 有变化
keygen 生成一对公钥和私钥 短语 新增
label 表示表单元素的说明标签 短语 有变化
legend 表示fieldset元素的说明性标签 无 无变化
optgroup 表示一组相关的option元素 无 无变化
option 表示供用户选择的一个选项 无 无变化
output 表示计算结果 短语 新增
select 给用户提供一组固定的选项 短语 有变化
textarea 用户可以用它输入多行文字 短语 有变化
7.嵌入内容
嵌入元素
元素 说明 类型 新增或有无变化
area 表示一个用于客户端分区响应图的区域 短语 有变化
audio 表示一个音频资源 无 新增
canvas 生成一个动态的图形画布 短语、流 新增
embed 用插件在HTML文档中嵌入内容 短语 新增
iframe 通过创建一个浏览上下文在文档中嵌入另一个文档 短语 有变化
img 嵌入图像 短语 有变化
map 定义客户端分区响应图 短语、流 有变化
meter 嵌入数值在许可值范围背景中的图形表示 短语 新增
object 在HTML文档中嵌入内容。也可用于生成浏览上下
文和生成客户端分区响应图 短语、流 有变化
param 表示将通过object元素传递给插件的参数 无 无变化
progress 嵌入目标进展或任务完成情况的图形表示 短语 新增
source 表示媒体资源 无 新增
svg 表示结构化矢量内容 无 新增
track 表示媒体的附加轨道（例如字幕） 无 新增
video 表示视频资源 无 新增
5.未实现的元素
有两个元素目前还没有浏览器实现，而且在HTML5规范中也仅有含糊不清的说明。
command元素和menu元素：为了让菜单和用户界面元素处理起来更简单一些。
创建HTML文档
1.构筑基本的文档结构
文档元素：只有4个，这些基础成分确定了HTML文档的轮廓以及浏览器的初始环境。
①DOCTYPE元素
独一无二，自成一类。每一个HTML文档都必须以DOCTYPE元素开头。浏览器据此得知自己将要处理的是HTML内容。
用法只有一种：
这个元素告诉浏览器两件事情：
1.它处理的是HTML文档
2.用来标记文档内容的HTML所属的版本。
PS：
1.版本号不用写浏览器也能识别是HTML5，因为这个元素的形式在HTML5和在先前的HTML版本中略有差异。
2.该元素没有结束标签，只有单个开始标签。
②html元素
html元素更恰当的名称是根元素，它表示文档中HTML部分的开始。
内容：head元素和body元素各一。
用法：
③head元素
head元素包含着文档和元数据。
元数据：向浏览器提供了有关文档内容和标记的信息。此外还可以包含脚本和对外部资源（比如CSS样式表）的引用。
内容：必须有一个title元素，其他元数据元素可有可无。
用法：
④body元素
包装文档的内容。
内容：所有短语元素和流元素
标签用法：开始标签和结束标签
用法：
I like apples and organes.
2.用元数据元素说明文档
1.元数据元素应放在head元素中。
2.元数据元素可以用来提供关于HTML文档的信息。
3.它们本身不是文档内容，但提供了关于后面的文档内容的信息。
①设置文档标题
title元素的作用是设置文档的标题或名称。浏览器通常将该元素的内容显示在其窗口顶端或标签页的标签上。
内容：文档标题或对文档内容言简意赅的说明。
标签用法：开始标签和结束标签。内含文字
用法：
I like apples and organes.
②设置相对URL的解析基准
1.base元素可用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。
2.相对链接省略了URL中的协议、主机和端口部分，需要根据别的URL（要么是base元素中指定的URL，要么是用以加载当前文档的URL）得出其完整形式。
3.base元素还能设定链接在用户点击时的打开方式，以及提交表单时浏览器如何反应。
元素：base
元素类型：元数据
允许具有的父元素：head
局部属性：href、target
内容：无
标签用法：虚元素形式
HTML文档至少应该包含一个base元素。
1.使用href属性
href属性指定了解析文档此后部分中的相对URL要用到的基准URL。
例：使用base元素中的href属性
I like apples and organes.
PS：
1.titan：开发服务器的名称。
2.listings：服务器上的文件目录。
3.a元素中的page2.html：相对URL，用户点击这个链接时，浏览器就会把基准URL和相对URL拼接成完整的URL：http://titan/listings/page2.html。
4.不用base元素，则基准URL为当前HTML文档的URL。
2.使用target属性
作用：告诉浏览器该如何打开URL。
这个属性的值：代表一个浏览上下文（browsing context）。
③用元数据说明文档
meta元素：定义文档的各种元数据。一个HTML文档可以包含多个meta元素。
1.指定名/值元数据对
meta元素的第一个用途是用名/值对定义元数据，为此需要用到其name和content属性。
例：在meta元素中用名/值对定义元数据
I like apples and oranges.
PS：
name属性：表示元数据的类型
content属性：提供值
供meta元素使用的几种预定义元数据类型
元数据名称 说明
application name 当前页所属Web应用系统的名称
author 当前页的作者名
description 当前页的说明
generator 用来生成HTML的软件名称（通常用于以Ruby on Rails、
ASP.NRT等服务器端框架生成HTML页的情况下）
keywords 一批以逗号分开的字符串，用来描述页面的内容
更多请浏览元数据扩展清单网址：http://wiki.whatwg.org/wiki/MetaExtensions
有些使用较多，有些几乎没人用。
robots元数据：HTML文档的作者可以用它告诉搜索引擎该如何对待该文档。
例：
robots元数据三个大多数搜索引擎都认识的值：
noindex：表示不要索引本页。
noarchive：表示不要将本页存档或缓存。
nofollow：表示不要顺着本页中的链接继续搜索下去。
2.声明字符编码
meta元素的另一种用途是声明HTML文档内容所用的字符编码。
例：用meta元素声明字符编码
3.模拟HTTP标头字段
meta元素的最后一种用途是改写HTTP（超文本传输协议）标头字段的值。
服务器和浏览器之间传输HTML数据时一般用的就是HTTP。
例：用meta元素模拟HTTP标头字段
④定于CSS样式
style元素可用来定义HTML文档内嵌的CSS样式（link元素则是用来导入外部样式表中的样式）。
例：使用style元素
I like apples and oranges.
PS：
1.style元素可以出现在HTML文档中的各个部分。
2.一个文档可包含多个style元素。
3.不必把所有样式定义塞进head部分。
（在使用模板引擎生成页面的情况下这个特性很有帮助，因为这样一来就可以用页面特有的样式为模板定义的样式提供补充。）
①指定样式类型
type属性可以用来将所定义的样式类型告诉浏览器。
但是浏览器支持的样式机制只有CSS一种，所以这个属性的值总是text/css。
②指定样式作用范围
1.如果style元素中有scoped属性存在，那么其中定义的样式只作用于该元素的父元素及所有兄弟元素。
2.要是不用scoped属性的话，在HTML文档中任何地方用style元素定义的样式都将作用于整个文档。
③指定样式适用的媒体
media属性可用来表明文档在什么情况下应该使用该元素中定义的样式。
例：使用style元素的media属性
I like apples and oranges.
PS：代码中使用了两个style元素，它们有不同的media属性值。
1.浏览器在屏幕上显示文档的时候用的是第一个style元素中的样式。
2.在打印文档的时候用的是第二个中的样式。
3.样式的使用条件可以设计得非常细致。首先要确定的是所针对的设备类型。
供style元素的media属性用的规定设备值
设备 说明
all 将样式用于所有设备（默认值）
aural 将样式用于语音合成器
braille 将样式用于盲文设备
handheld 将样式用于手持设备
projection 将样式用于投影机
print 将样式用于打印预览和打印页面时
screen 将样式用于计算机显示器屏幕
tty 将样式用于电传打字机之类的等宽设备
tv 将样式用于电视机
media还有一些特性可以用来设计更具体的使用条件。
例：让style元素的对象更加具体
I like apples and oranges.
PS：代码中使用的media的width特性区分两组样式：
1.浏览器窗口宽度小于500像素时使用的是第一组样式。
2.窗口宽度大于500像素时使用的是第二组。
3.AND：组合设备和特性条件，类似有NOT和表示OR的逗号（，）。
供style元素的media属性使用的特性
特性 说明 示例
width height 指定浏览器窗口的宽度和高度。单位为px，代表像素 width:200px
device-width 指定整个设备（而不仅仅是浏览器窗口）的宽度和高度。
device-height 单位为px，代表像素 min-device-height：200px
resolution 指定设备的像素密度。单位为dpi（点/英寸）或
dpcm（点/厘米） max-resolution：600dpi
orientation 指定设备的较长边朝向。支持的值有portrait和
landscape。该特性没有限定词 orientation：portrait
aspect-ratio 指定浏览器窗口或整个设备的像素宽高比。其值
device-aspect-ratio 表示为像素宽度与像素高度的比值 min-aspect-ratio：16/9
color monochrome 指定彩色或黑白设备上每个像素占用的二进制位数 min-monochrome：2
color-index 指定设备所能显示的颜色数目 max-color-index：256
scan 指定电视的扫描模式。支持的值有progressive和
interlace。该特性没有限定词 scan：interlace
grid 指定设备的类型。网格型设备使用固定的网格显示
内容，例如基于字符的终端和单行显示的寻呼机。
支持的值有0和1（1代表网格型设备）。该特性
没有限定词 grid：0
⑤指定外部资源
link元素可用来在HTML文档和外部资源（CSS样式表是最典型的情况）之间建立联系。
link元素定义了6个局部属性，其中最重要的是rel，它说明了HTML页与link元素所关联资源的关系类型。
link元素的局部属性
属性 说明
href 指定link元素指向的资源的URL
hreflang 说明所关联资源使用的语言
media 说明所关联的内容用于哪种设备。该属性使用的设备和特性值与之前的表相同
rel 说明文档与所关联资源的关系类型
sizes 指定图标的大小。稍后会有一个用link元素载入网站标志的例子
type 指定所关联资源的MIME类型，如text/css 、image/x-icon
为rel属性设定的值决定浏览器对待link元素的方式。
rel属性值最全面的介绍参见http://iana.org/assignments/link-relations/link-relations.xml
link元素的rel属性值选编
值 说明
alternate 链接到文档的替代版本，比如另一种语言的译本
author 链接到文档的作者
help 链接到当前文档的说明文档
icon 指定图标资源
license 链接到当前文档的相关许可证
pingback 指定一个回探（pingback）服务器。从其他网站链接到博客的时候它能自动得到
通知
prefetch 预先获取一个资源
stylesheet 载入外部样式表
1.载入样式表。
例：styles.css文件
a{
background-color: grey;
color: white;
padding: 0.5em;
}
例：用link元素载入外部样式表
I like apples and oranges.
PS：使用link元素的好处：
一个HTML文档可使用多个link元素载入多个外部资源，这样可以让多个文档使用同一套样式而不必将这些样式复制到每一个文档中。
2.为页面定义网站标志
例：用link元素添加网站标志
PS：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素。
3.预先获取资源
可以要求浏览器预先获取预计很快就要用到的资源。
例：预先获取关联的资源
3.使用脚本元素
与脚本相关的元素有两个：
1.script：用于定义脚本并控制其执行过程。
2.noscript：用于规定在浏览器不支持脚本或禁用了脚本的情况下的处理方法。
作者建议：
script元素可以放在HTML文档中的任意位置，但建议把所有脚本元素都集中到文档的head部分。
①script元素
script元素在页面中加入脚本的两种方式：
1.在文档中定义脚本
2.引用外部文件中的脚本
最常用的脚本类型：JavaScript。
标签用法：必须使用开始标签和结束标签。不能使用自闭标签，就算引用外部JavaScript库也是如此。
元数据元素：位于head元素中的script元素。
短语元素：位于其他元素（如body或section）中的script元素。
script元素的局部属性
属性 说明
type 表示所引用或定义的脚本类型，对于JavaScript脚本这个属性可以省略
src 指定外部脚本文件的URL
defer、async 设定脚本的执行方式。这两个属性只能与src属性一同使用
charset 说明外部脚本文件所用字符编码，该属性只能与src属性一同使用
1.定义文档内嵌脚本
定义脚本最简单的方式是内嵌定义，也即将JavaScript语句内嵌在HTML页面中。
例：定义文档内嵌脚本
I like apples and oranges.
PS：
1.不使用type属性时，浏览器会假定使用的是JavaScript。
2.默认情况下，浏览器在页面中一遇到脚本就会执行。
2.载入外部脚本库
可以把脚本放到单独的文件中，然后用script元素载入HTML文档。
这些文件有小（如下例子）有大（如jQuery这种复杂的库）
例：脚本文件simple.js的内容
document.write(“This is from the script”);
用script元素的src属性引用这个文件。设置了src属性的script元素不能含有任何内容。不能用同一个script元素既定义内嵌脚本又引用外部脚本。
例：用src属性载入外部脚本
I like apples and oranges.
PS：
1.src属性的值应为所要载入的脚本文件的URL。
2.由于simple.js文件与这个HTML文件位于同一个目录，所以此例中可以使用一个相对URL。
3.推迟脚本的执行
可以用async和defer属性对脚本的执行方式加以控制。
defer属性：告诉浏览器要等页面载入和解析完毕之后才能执行脚本。
举例说明defer的好处：
例：脚本文件simple2.js所含语句
document.getElementById(“applecode”).innerText = “cherries”;
PS：此段语句执行的时候会查找一个id属性值为applecode的元素并且将其内部内容改为cherries。
例：引用脚本文件
I like apples and oranges.
PS：结果不是预想的那样。
原因：
默认情况下，浏览器一遇到script元素就会暂停处理HTML文档，转而载入脚本文件并执行其中的脚本。在脚本执行完毕之后浏览器才会继续解析HTML。
这个问题有个显而易见的方法是将script元素放在文档最后：
I like apples and oranges.
PS：已经生效。
另一个方法：使用defer属性：
I like apples and oranges.
PS：defer属性只能用于外部脚本文件，它对文档内嵌脚本不起作用。
4.异步执行脚本
async属性解决的是另一类问题。浏览器默认处理script元素方式：各个script元素依次（即按其定义的次序）同步（即在脚本加载和执行进程中不再管别的事情）执行。
对于不需要默认方式的脚本，对这类脚本可以使用async属性提高其性能。
这方面典型例子是跟踪脚本（tracking script）。这类脚本自成一体，一般不需要与HTML文档中的元素互相作用。为等待它们加载然后向自己的服务器发回报告而推迟显示页面没有任何意义。
使用async属性后：浏览器将在继续解析HTML文档中其他元素（包括其他script元素）的同时异步加载和执行脚本。
例：使用async属性
I like apples and oranges.
②noscript元素
noscript元素可以用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。
与script元素类似，noscript元素所属类型取决于它在文档中的位置。
noscript元素作用：显示不需要JavaScript功能的内容或提示需要启用JavaScript才能使用此网站或页面。
Javascript is required!
You cannot use this page without Javascript
I like apples and oranges.
chrome禁用JavaScript方法：
PS：一个页面中可以加入多个noscript元素，以便与需要脚本控制的各个功能区域相对应。在提供不依赖于JavaScript的备用标记内容时这尤其有用。
此外，还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。这需要在noscript元素中加入一个meta元素。
例：用noscript元素重定向浏览器
I like apples and oranges.
标记文字
本章介绍文本层面的元素（简称文本元素）。
1.生成超链接
超链接是HTML中的关键特性，是用户赖以在内容中（在同一文档中的不同页面间）导航的基础。超链接用a元素生成。
a元素
元素类型：包含短语内容时被视为短语元素，包含流内容时被视为流元素。
局部属性：href、hreflang、media、rel、target、type
a元素的局部属性
属性 说明
href 指定a元素所指资源的URL
hreflang 说明所链接资源使用的语言
media 说明所链接资源用于哪种设备，该属性使用的设备和特性值见之前的表
rel 说明文档与所链接资源的关系类型。与link元素的rel属性使用相同的值
target 指定用以打开所链接资源的浏览环境
type 说明所链接资源的MIME类型（比如text/html）
①生成指向外部的超链接
将a元素的href属性设置为以http://开头的URL即可生成到其他HTML文档的超链接。
用户点击该超链接时，浏览器就会加载指定的页面。
例：使用ａ元素链接到外部资源
PS：URL不一定都要指向其他网页。
②使用相对URL
如果href属性值不是以类似http://这样的已知协议开头，那么浏览器会将该超链接视为相对引用。
默认情况下，浏览器会假定目标资源与当前文档位于同一位置。
例：在超链接中使用相对URL
PS：在当前HTML文档的URL后面追加。这种默认行为可以通过用base元素提供一个基础URL加以改变。
③生成内部超链接
超链接也可用来将同一文档中的另一个元素移入视野。为此需要用到形如CSS中针对目标元素的ID选择器的表达式：#
例：生成内部超链接
<p id="#fruits">
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
</p>
</body>
PS：超链接的href属性值设置为#fruits。用户点击这个链接时，浏览器将在文档中查找一个id属性值为fruits的元素。如果该元素不在视野之中，那么浏览器会将文档滚动到能看见它的位置。
④设定浏览环境
target属性的用途是告诉浏览器希望将所链接的资源显示在哪里。
默认情况下，浏览器使用的是显示当前文档的窗口、标签页或窗框（frame），所以新文档将会取代现在显示的文档，不过还有其他选择。
供a元素的target属性使用的值
属性值 说明
_blank 在新窗口或标签页中打开文档
_parent 在父窗框组（frameset）中打开文档
_self 在当前窗口中打开文档（这是默认行为）
_top 在顶层窗口打开文档
2.用基本的文字元素标记内容
①表示关键词和产品名称
b元素可以用来标记一段文字，但并不代表特别的强调或重要性。
例：使用b元素
②加以强调
em元素表示对一段文字的强调。这可以用来向读者提供关于句子或段落含义的一种语境。
例：使用em元素
PS：
1.这个元素的习惯样式是斜体字。
2.把句子大声读出来，并且虚拟一个提问，假设要添加em元素的内容就是答案。
3.例如：谁爱吃苹果和橙子。答案：我。
③表示外文词语或科技术语
i元素表示一段文字与周围内容有本质区别。
这个定义比较含糊，不过这个元素常用的地方包括外文词语、科技术语甚至某人的想法（与言语相区别）。
例：使用i元素
PS：
1.i元素的习惯样式与em相同。
2.这是元素的含义有别于呈现的好例子。
④表示不准确或校正
s元素用来表示一段文字不再正确或准确。其习惯样式是在文字上显示一条删除线。
例：使用s元素
⑤表示重要的文字
strong元素表示一段重要文字。
PS：
1.strong元素的习惯样式与b元素相同。
2.b元素并未赋予其包围的文字任何重要性。
⑥为文字添加下划线
u元素让一段文字从周围内容中凸现出来，但并不表示强调或其重要性有所增加。
例：使用u元素
PS：u元素的习惯样式与a元素类似。因此用户往往会把加下划线的文字误认为超链接。为了防止引起混淆，应该尽量避免使用u元素。
⑦添加小号字体内容
small元素表示小号字体内容（fine print），常用于免责声明和澄清声明。
例：使用small元素
⑧添加上标和下标
sub和sup元素分别用于表示下标和上标。
例：使用sub元素和sup元素
3.换行
有两个元素可以用来控制内容换行：br和wbr元素。
①强制换行
br元素会引起一次换行。其习惯样式是将后续内容转移到新行上。
PS：br元素只宜用在换行也是内容的一部分的情况。
例：使用br元素
That floats on high o'er vales and hills,
When all at once I saw a crowd,
A host, of golden daffodils;
②指明可以安全换行的建议位置
wbr元素的HTML5中新增的，用来表示长度超过当前浏览器窗口的内容适合在此换行，究竟换不换行由浏览器决定。wbr元素只不过是对恰当的换行位置的建议而已。
例：使用wbr元素
wbr element.
PS；有了wbr元素，浏览器就能将一个长单词分成几小截，从而更加得体地换行。
4.表示输入和输出
有四个元素暴露了HTML的极客起源。它们代表的是计算机的输入和输出。
用于输入和输出的文字元素
元素 说明 习惯样式
code 表示计算机代码片段 code{font-family：monospace:}
var 在编程语境中表示变量。也可表示一个供读者在想 var{font-style：italic:}
象中插入一个指定值的占位符
samp 表示程序或计算机系统的输出 samp{font-family：monospace:}
kbd 表示用户输入 kbd{font-family：monospace:}
例：使用code、var、samp和kbd元素
var fruits = ["apples","oranges","mangoes","cherries"];
document.writeln("I like " + fruits.length + "fruits");
The variable in this example is fruits
The output from the code is:I like 4 fruits
When prompted for my favorite fruit,I typed:cherries
5.使用标题引用、引文、定义和缩写
在科学和学术领域的文章中经常使用。
①表示缩写
addr元素用来表示缩写。其title属性表示的是该缩写代表的完整词语。
例：使用abbr元素
PS：abbr元素没有习惯样式，因此它包含的内容看上去没有什么特别之处。
②定义术语
dfn元素表示定义中的术语，也即在用来解释一个词（或短语）的含义的句子中的词（或短语）。
PS：dfn元素有一些使用规则。如果要为dfn元素设置title属性，那么必须将其设置为所定义的术语。
例：使用dfn元素
The apple is the pomaceous fruit of the apple tree. species Malus domestica in the rose family.
PS：
1.如果dfn元素包含一个abbr元素，那么该缩写词就是要定义的术语。
2.如果元素内容为文字并且没有title属性，那么其文字内容就是要定义的术语。
3.该元素没有习惯样式，因此其内容看上去没有什么特别之处。
③引用来自其他处的内容
q元素表示引自他处的内容。
q元素的cite属性可以用来指定来源文章的URL。
例：使用q元素
The apple is the pomaceous fruit of the apple tree. species Malus domestica in the rose family.
PS：q元素的习惯样式使用CSS中的：before和：after这两个伪元素选择器在引文前后生成引号。
④引用其他作品的标题
cite元素表示所引用作品（如图书、文章、电影和诗歌）的标题。
例：使用cite元素
The apple is the pomaceous fruit of the apple tree. species Malus domestica in the rose family.
PS：习惯样式：斜体。
6.使用语言元素
有五个HTML元素（其中四个是HTML5中新增的）的用途是为使用非西方语言提供支持。
①ruby、rt和rp元素
注音符号（ruby character）是用来帮助读者掌握表意语言（如汉语和日语）文字正确发音的符号，位于这些文字上方或右方。ruby元素表示一段包含注音符号的文字。
ruby元素需要与rt元素和rp元素搭配使用。
1.rt元素：用来标记注音符号。
2.rp元素：用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号。
例：使用ruby、rt和rp元素
PS：支持注音符号的浏览器的效果，rp元素及其内容会被忽略。
作者用Firefox浏览器演示了不支持注音符号功能的浏览器打开是什么情况，这里我不演示。
②bdo元素
bdo元素可以用来撇开默认的文字方向设置，明确地指定其内容中文字的方向。
使用bdo元素必须加上dir属性。该属性允许使用的值有rtl（从右到左）和ltr（从左到右）。
例：使用bod元素
This is left-to-right:I like oranges
This is right-to-left:I like oranges
③bdi元素
bdi元素表示一段出于文字方向考虑而与其他内容隔离开来的文字。
这个元素适用于欲显示内容的文字方向未知的情况。在这种情况下，浏览器会自动确定文字方向，这有可能搅乱页面布局。
例：未使用bdi元素的情况
Adam:3 applies and 2 oranges
ゑ，お:2 apples
Joe:6 apples
PS：作者是拉丁文，显示的是2ゑ，おapples。我找不到拉丁文。
例：使用bdi元素
Adam:3 applies and 2 oranges
ゑ，お:2 apples
Joe:6 apples
7.其他文本元素
①表示一段一般性的内容
span元素本身没有任何含义。它可以用来把一些全局属性应用到一段内容上。
例：使用span元素
②突出显示文本
mark元素的HTML5中新增的，用来表示因为与某段上下文相关而被突出显示的一段文字。
例：使用mark元素
I would like a pair of pears
③表示添加和删除的内容
ins元素和del元素可以分别用来表示文档中添加和删除的文字。
ins和del元素定义了相同的属性。cite属性用来指定解释添加或删除相关文字原因的文档的URL。datetime属性则用来设置修改时间。
例：使用del元素和ins元素
I would like a pair of pears
I can sea the see I can see the sea
④表示时间和日期
time元素可以用来表示时间和日期。
1.如果布尔属性pubdate存在，那么time元素表示的是整个HTML文档或离该元素最近的article元素的发布日期。
2.datetime属性以RFC3339规定的格式（参见http://tools.ietf.org/html/rfc3339）指定日期或时间。
3.有了datetime，就能在元素中以便于阅读的形式设置日期或时间，同时又确保计算机能无歧义地解析指定的日期和时间。
例：使用time元素
组织内容
1.为什么要对内容分组
HTML要求浏览器将连在一起的几个空白字符折算为一个空格。
这样可以把HTML文档的布局与文档内容在浏览器窗口中的布局分开。
例：HTML文档中的大段内容
I like apples and oranges.
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.
<strong>Warning:</strong> Eating too many oranges can give you heart burn.
My favorite kind of orange is the mandarin,properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.
The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
citrus industry.
I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>.
</body>
PS：此例body元素中的文字散布在许多行上。有些设置了缩进，并且在行组之间还有换行。但浏览器会忽略所有这些结构，将其内容全部显示在一行上。
2.建立段落
p元素代表段落段落包含着一个或多个相关句子，这些句子围绕的是一个观点或论点。组成一个段落的句子也可以涉及多个论点，但它们都有一些共同的主题。
例：使用p元素
<p>I like apples and oranges.
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>My favorite kind of orange is the mandarin,properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>.</p>
</body>
3.使用div元素
1.div元素没有具体含义。
2.找不到其他恰当的元素可用时可以使用这个元素为内容建立结构并赋予其含义。
3.它的含义是由全局属性提供的，通常用的是class或id属性。
4.div元素相当于流元素中的span。
5.建立自定义结构的确定：其含义只限于设计者的网页或Web应用系统，别人并不了解。
6.具有自定义结构的HTML文档由第三方处理或设计样式时可能会碰到麻烦。
例：使用div元素
<p>I like apples and oranges.
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>My favorite kind of orange is the mandarin,properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
</div>
<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>.</p>
</body>
PS：div元素将几个不同类型的元素组织在一起以便统一应用样式。
4.使用预先编排好的格式的内容
pre元素可以改变浏览器处理内容的方式，阻止合并空白字符，让源文档中的格式得以保留。
pre元素跟code元素搭配在一起的时候尤其有用。编程语言中的格式通常都很重要，不宜用元素重新编排其样式。
例：使用pre元素
<pre><code>
var fruits = ["apples","oranges","mangoes","cherries"];
for(var i = 0;i < fruits.length;i++){
document.writeln("I like "+fruits[i]);
}
</code></pre>
<div class="favorites">
<p>I like apples and oranges.
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>My favorite kind of orange is the mandarin,properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
</div>
<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>.</p>
</body>
PS：
1.JavaScript代码没有放在script元素中，所以不会执行。
2.浏览器保留空格，所以pre元素中的各条程序语句都没有与HTML文档保持一致的缩进结构。
5.引用他处内容
blockquote元素表示引自他处的一片内容。用途与q元素类似。
该元素的cite属性可以用来指定所引用的内容的来源。
例：使用blockquote元素
I like apples and oranges.
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p>My favorite kind of orange is the mandarin,properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
<blockquote cite="https://en.wikipedia.org/wiki/Apple">
The apple is a deciduous tree, generally standing 6 to 15 ft (1.8 to 4.6 m) tall in cultivation and up to 30 ft (9.1 m) in the wild. When cultivated, the size, shape and branch density are determined by rootstock selection and trimming method. The leaves are alternately arranged dark green-colored simple ovals with serrated margins and slightly downy undersides.[4]
Apple blossom
Blossoms are produced in spring simultaneously with the budding of the leaves, and are produced on spurs and some long shoots. The 3 to 4 cm (1.2 to 1.6 in) flowers are white with a pink tinge that gradually fades, five petaled, with an inflorescence consisting of a cyme with 4–6 flowers. The central flower of the inflorescence is called the “king bloom”; it opens first, and can develop a larger fruit.[4][5]
The fruit matures in late summer or autumn, and cultivars exist with a wide range of sizes. Commercial growers aim to produce an apple that is 2 3⁄4 to 3 1⁄4 in (7.0 to 8.3 cm) in diameter, due to market preference. Some consumers, especially those in Japan, prefer a larger apple, while apples below 2 1⁄4 in (5.7 cm) are generally used for making juice and have little fresh market value. The skin of ripe apples is generally red, yellow, green, pink, or russetted although many bi- or tri-colored cultivars may be found.[6] The skin may also be wholly or partly russeted i.e. rough and brown. The skin is covered in a protective layer of epicuticular wax.[7] The exocarp (flesh) is generally pale yellowish-white,[6] though pink or yellow exocarps also occur.
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>.</p>
</body>
PS：浏览器会忽略blockquote元素中的内容的格式。要在引用的内容中建立结构，可以使用其他一些组织元素，如p和hr。
6.添加主题分隔
hr元素代表段落级别的主题分隔（paragraph-level thematic break），这又是一个在语义和呈现分离要求驱使下冒出来的奇特术语。其实就是一条直线。
有效用法：
1.故事中地点的改变。
2.工具书某一部分中主题的改变。
例：使用hr元素
I like apples and oranges.
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p>My favorite kind of orange is the mandarin,properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
<blockquote cite="https://en.wikipedia.org/wiki/Apple">
The apple is a deciduous tree, generally standing 6 to 15 ft (1.8 to 4.6 m) tall in cultivation and up to 30 ft (9.1 m) in the wild. When cultivated, the size, shape and branch density are determined by rootstock selection and trimming method. The leaves are alternately arranged dark green-colored simple ovals with serrated margins and slightly downy undersides.[4]
Apple blossom Blossoms are produced in spring simultaneously with the budding of the leaves, and are produced on spurs and some long shoots. The 3 to 4 cm (1.2 to 1.6 in) flowers are white with a pink tinge that gradually fades, five petaled, with an inflorescence consisting of a cyme with 4–6 flowers. The central flower of the inflorescence is called the "king bloom"; it opens first, and can develop a larger fruit.[4][5]
The fruit matures in late summer or autumn, and cultivars exist with a wide range of sizes. Commercial growers aim to produce an apple that is 2 3⁄4 to 3 1⁄4 in (7.0 to 8.3 cm) in diameter, due to market preference. Some consumers, especially those in Japan, prefer a larger apple, while apples below 2 1⁄4 in (5.7 cm) are generally used for making juice and have little fresh market value. The skin of ripe apples is generally red, yellow, green, pink, or russetted although many bi- or tri-colored cultivars may be found.[6] The skin may also be wholly or partly russeted i.e. rough and brown. The skin is covered in a protective layer of epicuticular wax.[7] The exocarp (flesh) is generally pale yellowish-white,[6] though pink or yellow exocarps also occur.
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>The <abbr title="Florida Department of Citrus">FDDC</abbr> regulates the Florida
citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>.</p>
</body>
7.将内容组织为列表
HTML定义了几个用来生成内容项目列表的元素。列表的类型有有序列表、无序列表和说明列表。
①ol元素
ol元素表示有序列表。列表项目用li元素表示。
例：用ol元素生成一个简单的列表
- bananas
- mangoes
- cherries
- plums
- peaches
- grapes
PS：列表项目可以通过ol元素定义的属性加以控制。
1.start属性：设定的是列表首项的编号值。如果不用这个属性，那么首项的编号为1.
2.type属性：用来设定显示在各列表项旁的编号的类型。
ol元素的type属性支持的值
值 说明 示例
1 十进制数（默认） 1、2、3、4.
a 小写拉丁字母 a、b、c、d.
A 大写拉丁字母 A、B、C、D.
i 小写罗马数字 i、ii、iii、iv.
I 大写罗马数字 I、II、III、IV.
如果使用了reversed属性，那么列表编号采用降序。
②ul元素
ul元素表示无序列表。和ol元素一样，ul元素中的列表项用li元素表示。
ul元素包含着一批li元素，该元素没有定义任何局部属性，其呈现形式由CSS控制。
例：使用ul元素
- bananas
- mangoes
- cherries
- plums
- peaches
- grapes
③li元素
li元素表示列表中的项目。它可以与ul、ol和menu元素搭配使用。
li元素表示父元素中的一个列表项。其value属性可以用来生成不连续的有序列表。
例：生成不连续的有序列表
- bananas
- mangoes
- cherries
- plums
- peaches
- grapes
④生成说明列表
说明列表包含着一系列术语/说明组合（也即一系列附带定义的术语）。
定义说明列表要用到三个元素：dl、dt和dd元素。
这些元素没有定义局部属性。
说明列表中的元素
元素 说明
dl 表示说明列表
dt 表示说明列表中的术语
dd 表示说明列表中的定义
注意：一个dt元素可以搭配多个dd元素，这样就能为一个术语提供多个定义。
例：生成说明列表
- Apple
- The apple is the pomaceous fruit of the apple tree
- Malus domestica
- Banana
- The banana is the parthenocarpic fruit of the banana tree
- Musa acuminata
- Cherry
- The cherry is the stone fruit of the genus Prunus
⑤生成自定义列表
结合CSS中的counter特性和：before选择器，可以用ul元素生成复杂的列表。
例：带自定义计数器的嵌套列表
- bananas
- mangoes,including:
- Haden mangoes
- Keitt mangoes
- Kent mangoes
- cherries
- plums,including:
- Elephant Heart plums
- Stanley plums
- Seneca plums
- peaches
- grapes
PS：
1.这个HTML文档中的列表都是用ul元素生成的无序列表，因此才可以禁用标准的项目符号（使用list-style-type属性）并依靠用：before选择器生成的内容。
2.外层列表的编号始于7，以2的步长迭增。用标准的ol元素无法做到这一点。
3.CSS的counter特性用起来有点别扭，但非常灵活。
4.内层列表的编号是连续的。用li元素的value属性或ol元素的start属性也能实现同样的效果，但是这两种方法都需要事先知道列表项的数目，这个条件在Web应用系统中未必总能满足。
⑧使用插图
插图定义：一个独立的内容单元，可带标题。通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的意思。
这个定义相当笼统，外延不限于传统意义上的插图——某种图表或图示。
插图用figure元素定义。
figure元素可以包含一个figcaption元素，后者表示插图的标题。
例：使用figure和figcaption元素
var fruits = ["apples","oranges","mangoes","cherries"];
document.writeln("I like " + fruits.length + "fruits");
PS：
1.此例用figure元素生成一个将code元素裹在其中的插图。
2.用figcaption元素为其添加了一个标题。
3.注意，figcaption元素必须是figure元素的第一个或最后一个子元素。
文档分节
表示内容的不同部分的元素。
外观上对内容的影响微乎其微，甚至没有影响。
它们构成了语义和呈现分离实践的重要基础。
1.添加基本的标题
h1元素表示标题。HTML定义了一套标题元素体系，从h1一直到h6，h1级别最高。
1.同级标题：将内容分作几个部分，每个部分一个主题。
2.各级标题：表示一个主题的各个方面。
好处：构成了文档的大纲，便于预览。
例：使用元素h1、h2和h3
Fruits I like
I like apples and oranges.Additional fruits
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.More information
You can see other fruits I like here. <h1>Activities I like</h1>
<p>I like to swim,cycle and run.I am in training for my first triathlon,
but it is hard work.</p>
<h2>Kinds of Triathlon</h2>
There are different kinds of triathlon - sprint,Olympic and so on.
<h3>The kind of triathlon I am aiming for</h3>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</body>
PS：处理合同和技术规范这类高度技术性和精确的文档外，很少有什么内容有必要用到更深层次的标题。
2.隐藏子标题
hgroup元素可以用来将几个标题元素作为一个整体处理，以免搅乱HTML文档的大纲。
hgroup元素主要用来解决子标题的问题。
例：用h1和h2元素生成带子标题的标题
Fruits I like
How I Learned to Love Citrus
I like apples and oranges.Additional fruits
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.More information
You can see other fruits I like here. <h1>Activities I like</h1>
<p>I like to swim,cycle and run.I am in training for my first triathlon,
but it is hard work.</p>
<h2>Kinds of Triathlon</h2>
There are different kinds of triathlon - sprint,Olympic and so on.
<h3>The kind of triathlon I am aiming for</h3>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</body>
PS：遇到的问题：无法区分表示子标题的h2元素和表示下一级标题的h2元素。
如果写个脚本程序把文档中从h1到h6的各级标题梳理出来做出一个大纲，得到的将会是这样一个失真的结果：
Fruits I like
How I Learned to Love Citrus
Additional fruits
More information
Activities I like
Kinds of Triathlon
The kind of triathlon I am aiming for
解决：利用hgroup元素
例：使用hgroup元素
Fruits I like
How I Learned to Love Citrus
I like apples and oranges.Additional fruits
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.More information
You can see other fruits I like here. <h1>Activities I like</h1>
<p>I like to swim,cycle and run.I am in training for my first triathlon,
but it is hard work.</p>
<h2>Kinds of Triathlon</h2>
There are different kinds of triathlon - sprint,Olympic and so on.
<h3>The kind of triathlon I am aiming for</h3>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</body>
PS：
hgroup元素在从h1到h6的标题体系中的位置取决于其第一个标题子元素。
此例中hgroup元素的第一个标题子元素为h1元素。只有第一个标题子元素会被列入大纲。
大纲如下：、
Fruits I like
Additional fruits
More information
Activities I like
Kinds of Triathlon
The kind of triathlon I am aiming for
3.生成节
section元素是HTML5中新增的。它表示文档中的一节。
1.用section元素可以明确地生成节并且将其与标题分开。
2.section元素用来包含的是那种应该列入文档大纲或目录中的内容。
3.section元素通常包含一个或多个段落及一个标题，不过标题并不是必需的。
例：使用section元素
Fruits I like
How I Learned to Love Citrus
I like apples and oranges.Additional fruits
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.More information
You can see other fruits I like here.Activities I like
I like to swim,cycle and run.I am in training for my first triathlon, but it is hard work.
Kinds of Triathlon
There are different kinds of triathlon - sprint,Olympic and so on.The kind of triathlon I am aiming for
I am aiming for Olympic, which consists of the following:- 1.5km swim
- 40km cycle
- 10km run
在360浏览器中的效果
在chrome浏览器中的效果
在IE浏览器中的效果
PS：
1.每个section元素中的标题元素都是一个h1.使用了section元素后，浏览器就会负责理顺标题元素的层次关系。
2.“Fruits I Like”的h1元素的字号比同级的另一个h1元素（即内容为“Activities I Like” 的那个）小。这是不同浏览器对于section、article、aside和nav元素中的h1元素（以及从h2到h6的标题元素）应用的样式有所不同。习惯样式是和正常的h2相同。IE不会。
4.添加首部和尾部
header元素表示一节的首部。
里面可以包含各种适合出现在首部的东西，包括刊头或徽标。
在内嵌的元素方面，header元素通常包含一个标题元素或一个hgroup元素，还可以包含该节的导航元素。
footer元素的header元素的配套元素，表示一节的尾部。
footer通常包含着该节的总结信息，还可以包含作者介绍、版权信息、到相关内容的链接、徽标及免责声明。
例：使用header和footer元素
Things I like
by Adam Freeman
Fruits I like
How I Learned to Love Citrus
Additional fruits
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.More information
You can see other fruits I like here. <section>
<header>
<h1>Activities I like</h1>
</header>
<section>
<p>I like to swim,cycle and run.I am in training for my first triathlon,
but it is hard work.</p>
<h1>Kinds of Triathlon</h1>
There are different kinds of triathlon - sprint,Olympic and so on.
<section>
<h1>The kind of triathlon I am aiming for</h1>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</section>
</section>
</section>
<footer>
©2011,Adam Freeman.<a href="http://apress.com">Visit Apress</a>
</footer>
</body>
使用header元素
使用footer元素
PS：本例定义了3个header元素：
1.作为body元素子元素的header元素被视为整个文档的首部。
2.作为某节（不管是隐含定义的还是用section元素明确定义的）组成部分的header元素只是该节的首部。
（PS：例中定义了一些样式，以便看出各节和标题之间的层次关系。）
3.图中字号差别是由于浏览器对各级标题元素的习惯样式进行了调整。
5.添加导航区域
nav元素表示文档中的一个区域，它包含着到其他页面或同一页面的其他部分的链接。
并非所有的超链接都要放到nav元素中。该元素的目的是规划出文档的主要导航区域。
例：使用nav元素
Things I like
by Adam Freeman
Fruits I like
How I Learned to Love Citrus
Additional fruits
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.More information
You can see other fruits I like here. <section>
<header>
<h1 id="activitiesilike">Activities I like</h1>
</header>
<section>
<p>I like to swim,cycle and run.I am in training for my first triathlon,
but it is hard work.</p>
<h1 id="tritypes">Kinds of Triathlon</h1>
There are different kinds of triathlon - sprint,Olympic and so on.
<section>
<h1 id="mytri">The kind of triathlon I am aiming for</h1>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</section>
</section>
</section>
<nav>
More Information:
<a href="http://fruit.org">Learn More About Fruit</a>
<a href="http://triathlon.org">Learn More About Triathlons</a>
</nav>
<footer id="mainFooter">
©2011,Adam Freeman.<a href="http://apress.com">Visit Apress</a>
</footer>
</body>
开头的nav元素
结尾的nav元素
PS：本例在文档中使用了两个nav元素。
1.第一个为用户提供了在文档中导航的途径。在这个元素内部用ul，li和a元素生成了一个相对链接的层次结构。
2.nav元素可以包含任何流内容，而不限于超链接。
3.第二个nav元素放在文档末尾，为用户提供了一些链接，以便获取更多信息。
4.此例在文档的style元素为两个nav元素设定了一些样式。nav元素的习惯样式并没有给予其内容与众不同的外观。
6.使用article
article元素代表HTML文档中一段独立成篇的内容。
例：使用article元素
Things I like
by Adam Freeman
Fruits I like
How I Learned to Love Citrus
Additional fruits
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.More information
You can see other fruits I like here. <article>
<header>
<hgroup>
<h1 id="activitiesilike">Activities I like</h1>
<h2>It hurts,but I keep doing it</h2>
</hgroup>
</header>
<section>
<p>I like to swim,cycle and run.I am in training for my first triathlon,
but it is hard work.</p>
<h1 id="tritypes">Kinds of Triathlon</h1>
There are different kinds of triathlon - sprint,Olympic and so on.
<section>
<h1 id="mytri">The kind of triathlon I am aiming for</h1>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</section>
</section>
<footer>
<nav>
More Information:
<a href="http://triathlon.org">Learn More About Triathlons</a>
</nav>
</footer>
</article>
<footer id="mainFooter">
©2011,Adam Freeman.<a href="http://apress.com">Visit Apress</a>
</footer>
</body>
PS：
1.文档的主体分作三大部分。
2.第一部分是一个header元素，它汇总了各条博文信息，为文档其他部分提供一个锚点。
3.第二部分是末尾那个footer元素，它与header相照应，提供了适合于其余内容的基本信息。
4.新增的东西在第三部分：article元素。每个article描述作者喜欢的一件事物。
5.article元素可以嵌套使用：原文用一个，然后每次更新或得到的评论又用一个。
7.生成附注栏
aside元素用来表示跟周边内容稍沾一点边的内容，类似于书籍或杂志中的侧栏。
例：添加aside元素并为其设置样式
Things I like
by Adam Freeman
Fruits I like
How I Learned to Love Citrus
Additional fruits
I also like bananas,mangoes,cherries,apricots,plums,peaches and grapes.More information
You can see other fruits I like here. <article>
<header>
<hgroup>
<h1 id="activitiesilike">Activities I like</h1>
<h2>It hurts,but I keep doing it</h2>
</hgroup>
</header>
<section>
<p>I like to swim,cycle and run.I am in training for my first triathlon,
but it is hard work.</p>
<h1 id="tritypes">Kinds of Triathlon</h1>
There are different kinds of triathlon - sprint,Olympic and so on.
<section>
<h1 id="mytri">The kind of triathlon I am aiming for</h1>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</section>
</section>
<footer>
<nav>
More Information:
<a href="http://triathlon.org">Learn More About Triathlons</a>
</nav>
</footer>
</article>
<footer id="mainFooter">
©2011,Adam Freeman.<a href="http://apress.com">Visit Apress</a>
</footer>
</body>
8.提供联系信息
address元素用来表示文档或article元素的联系信息。
1.address元素身为article元素的后代元素时，它提供的联系信息被视为该article的。
2.当address元素身为body元素的子元素时（在body元素和address元素之间没有隔着article元素），它提供的联系信息被视为整个文档的。
3.address元素不能用来表示文档或文章的联系信息之外的地址。
例：使用address元素
···
Things I like
by Adam Freeman
Questions and comments? Email mePS：用address元素提供了一个电子邮箱地址。
9.生成详情区域
details元素在文档中生成一个区域，用户可以展开它以了解关于某主题的更多详情。
details元素通常包含一个summary元素，后者的作用是为该详情区域生成一个说明标签或标题。
例：使用summary和details元素
···
aside > section{padding: 5px;}
aside > h1{background: white;color: black;text-align: center}
details{border: solid thin black;padding: 5px}
details > summary{font-weight: bold}
···
I like to swim,cycle and run.I am in training for my first triathlon, but it is hard work.
Kinds of Triathlon There are different kinds of triathlon - sprint,Olympic and so on. I am aiming for Olympic, which consists of the following:- 1.5km swim
- 40km cycle
- 10km run
表格元素
表格的主要用途是以网格的形式显示二维数据。
1.生成基本的表格
有三个元素是每个表格都必须要有的：table、tr和td。
table元素：它是HTML用以支持表格式内容的核心元素，它表示HTML文档中的表格。
tr元素：表示表格中的行。HTML表格基于行而不是列，每行必须分别标记。
td元素：表示表格中的单元格。
有了这三个元素，就可以用它们组装出表格。
例：用table、tr和td元素制作表格
| Apples | Green | Medium |
| Oranges | Orange | Large |
PS：定义了两行的表格，每行三列。浏览器会调整行与列的尺寸以维持表格形式。
例：添加一些内容更长的单元格
| Apples | Green | Medium |
| Oranges | Orange | Large |
| Pomegranate | A kind of greeny-red | Varies from medium to large |
PS：table元素最棒的特性之一是作者不必操心尺寸问题。
2.添加表头单元格
th元素表示表头的单元格，它可以用来区分数据和对数据的说明。
例：为表格添加表头单元格
| Rank | Name | Color | Size |
|---|---|---|---|
| Favorite: | Apples | Green | Medium |
| 2nd Favorite: | Oranges | Orange | Large |
| 3rd Favorite: | Pomegranate | A kind of greeny-red | Varies from medium to large |
3.为表格添加结构
基本表格有了，但现在遇到一个问题：
在设置表格样式的时候，要区别①全是th元素的行中的th元素和②与数据单元格混在一行中的th元素并不容易。
例：区分表格中的不同th元素
| Rank | Name | Color | Size |
|---|---|---|---|
| Favorite: | Apples | Green | Medium |
| 2nd Favorite: | Oranges | Orange | Large |
| 3rd Favorite: | Pomegranate | A kind of greeny-red | Varies from medium to large |
PS：两个选择器：
1.一个选择器匹配所有th元素。
2.另一个只匹配tr元素的子元素中唯一的th元素。
这个方法效果不错，却有失灵活。
要是在数据项行中再添加别的th元素，第二个选择器就不起作用了。
解决方法：使用thead、tbody和tfoot元素，这些元素可以用来为表格添加结构。
①表示表头和表格主题
tbody元素表示构成表格主体的全体行——不包括表头行和表尾行。
注意：大多数浏览器在处理table元素的时候都会自动插入tbody元素。所以table > tr这个选择器会失效。
需要使用table > tbody > tr或table tr（没有字符>）这样的选择器，或者干脆写成tbody > tr。
thead元素：用来标记表格的标题行。
注意：如果没有thead元素的话，所有tr元素都会被视为表格主体的一部分。
例：为表格添加thead和tbody元素
| Rank | Name | Color | Size |
|---|---|---|---|
| Favorite: | Apples | Green | Medium |
| 2nd Favorite: | Oranges | Orange | Large |
| 3rd Favorite: | Pomegranate | A kind of greeny-red | Varies from medium to large |
PS：表格增加这些结构之后，区别处理不同类型的单元格就容易多了，也不再那么容易受表格设计改动的影响。
②添加表脚
tfoot元素用来标记组成表脚的行。
tfoot元素的位置：
HTML5之前：只能出现在tbody元素（如果省略tbody元素，则是第一个tr元素）之前。
HTML5：放在tbody元素之后或最后一个tr元素之后。
例：使用tfoot元素
| Rank | Name | Color | Size |
|---|---|---|---|
| Rank | Name | Color | Size |
| Favorite: | Apples | Green | Medium |
| 2nd Favorite: | Oranges | Orange | Large |
| 3rd Favorite: | Pomegranate | A kind of greeny-red | Varies from medium to large |
4.制作不规则表格
大多数表格：简单的网格形式，每个单元格占据网格中的一个位置。
有时需要制作不规则的表格，其中的单元格会跨越几行或几列：使用td和th元素的colspan和rowspan属性。
| Rank | Name | Color | Size & Votes | |
|---|---|---|---|---|
| Favorite: | Apples | Green | Medium | 500 |
| 2nd Favorite: | Oranges | Orange | Large | 450 |
| 3rd Favorite: | Pomegranate | Pomegranates and cherries can both come in a range of colors and sizes. | 203 | |
| Joint 4th: | Cherries | 75 | ||
| Pineapple | Brown | Very Large | ||
| ©2011 Adam Freeman Fruit Data Enterprises | ||||
PS：
rowspan属性：让一个单元格纵跨多行，属性设置的值就是所跨的行数。
colspan属性：让一个单元格横跨多行，属性设置的值就是所跨的行数。
colspan属性和rowspan属性应该用在要占据的网格左上角那个单元格上。
正常情况下位于它们所跨越的位置上的td和th元素此时则被省略。
例：一个简单的表格
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
PS：这是一个三行三列的常规表格。
例：将一个单元格扩展到多行
| 1 | 2 | 3 |
| 4 | 6 | |
| 7 | 9 |
5.把表头与单元格关联起来
td和th元素都定义了headers属性，它可以供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。
headers属性的值可被设置为一个或多个th单元格和id属性值。
例：使用headers属性
| Rank | Name | Color | Size & Votes | |
|---|---|---|---|---|
| Favorite: | Apples | Green | Medium | 500 |
| 2nd Favorite: | Oranges | Orange | Large | 450 |
| ©2011 Adam Freeman Fruit Data Enterprises | ||||
PS：
1.thead和tbody中的每一个th元素都设置了全局的id属性值。
2.tbody中的每一个tdheth元素通过设置headers属性将相应单元格与列表头关联起来。
3.其中td元素还指定了所关联的行表头（出现在第一列的表头）。
6.为表格添加标题
caption元素可以用来为表格定义一个标题并将其与表格关联起来。
例：使用caption元素
| Rank | Name | Color | Size & Votes | |
|---|---|---|---|---|
| Favorite: | Apples | Green | Medium | 500 |
| 2nd Favorite: | Oranges | Orange | Large | 450 |
| 3rd Favorite: | Pomegranate | Pomegranates and cherries can both come in a range of colors and sizes. | 203 | |
| Joint 4th: | Cherries | 75 | ||
| Pineapple | Brown | Very Large | ||
| ©2011 Adam Freeman Fruit Data Enterprises | ||||
7.处理列
使用colgroup和col元素
例：使用colgroup元素
| Rank | Name | Color | Size & Votes | |
|---|---|---|---|---|
| Favorite: | Apples | Green | Medium | 500 |
| 2nd Favorite: | Oranges | Orange | Large | 450 |
| 3rd Favorite: | Pomegranate | Pomegranates and cherries can both come in a range of colors and sizes. | 203 | |
| Joint 4th: | Cherries | 75 | ||
| Pineapple | Brown | Very Large | ||
| ©2011 Adam Freeman Fruit Data Enterprises | ||||
PS：定义了两个colgroup元素。span属性指定了colgroup元素负责的列数。
1.第一个colgroup负责表格中的前三列。
2.另一个colgroup负责剩余的两列。
两个colgroup元素设置了id属性值，并以其id值为选择器定义了相应的CSS样式。
colgroup元素使用中的一些重要特点：
1.应用到colgroup上的CSS样式在具体程度上低于直接应用到tr、td和th元素上的样式。
删除针对colgroup元素样式之外的样式之后的效果
2.不规则单元格被计入其起始列。
3.colgroup元素的影响范围覆盖了列中的所有单元格，包括那些位于thead和tfoot元素中的单元格。
表示个别的列
用col元素指定组中的各列。
既能对一组列应用样式，也能对该组中个别的列应用样式。
col元素位于colgroup元素之中，每个col元素代表列组中的一列（未使用span属性的情况）。
例：使用col元素
| Rank | Name | Color | Size & Votes | |
|---|---|---|---|---|
| Favorite: | Apples | Green | Medium | 500 |
| 2nd Favorite: | Oranges | Orange | Large | 450 |
| 3rd Favorite: | Pomegranate | Pomegranates and cherries can both come in a range of colors and sizes. | 203 | |
| Joint 4th: | Cherries | 75 | ||
| Pineapple | Brown | Very Large | ||
| ©2011 Adam Freeman Fruit Data Enterprises | ||||
PS：可以用col元素的span属性让一个col元素代表几列。不用span属性的col元素只代表一列。
8.设置表格边框
table元素的border属性：告诉浏览器这个表格是用来表示表格式数据而不是用来布置其他元素的。
例：使用border属性
| Rank | Name | Color | Size & Votes | |
|---|---|---|---|---|
| Favorite: | Apples | Green | Medium | 500 |
| 2nd Favorite: | Oranges | Orange | Large | 450 |
| 3rd Favorite: | Pomegranate | Pomegranates and cherries can both come in a range of colors and sizes. | 203 | |
| Joint 4th: | Cherries | 75 | ||
| Pineapple | Brown | Very Large | ||
| ©2011 Adam Freeman Fruit Data Enterprises | ||||
PS：border属性的值必须设置为1或空字符串（" "）。该属性并不控制边框样式，那是CSS的工作。
浏览器显示的默认边框并不美观，所以使用border属性之后通常还要用到CSS。
用CSS选择器分别针对各种元素重设边框样式：
表格的外边框可以通过table元素控制。
表头、表格主体和表脚可以分别通过thead、tbody和tfoot元素控制。
列可以通过colgroup和col元素控制。
各个单元格可以通过th和td元素控制。
别的方法都不管用：使用全局属性id和class确定目标。
表单
表单是HTML中获取用户输入的手段。
1.制作基本表单
制作一个基本的表单需要三个元素：form、input和button元素。
例：一个简单的HTML表单
①定义表单
form元素：告诉浏览器它处理的是HTML表单。
input元素：收集用户输入数据。
input元素的属性多达29个，具体有哪些可用取决于type属性的值。
button元素：告诉浏览器，所有数据已经输入完毕，该把它们发给服务器了。
②查看表单数据
需要一个接受浏览器发送的数据的服务器。
为此作者教我们编写了一段简单的Node.js脚本程序，它会生成一个HTML页面，其中包含表单从用户收集的数据。
例：脚本文件formecho.js
var http = require(‘http’);
var querystring = require(‘querystring’)
http.createServer(function(req,res){
switch(req.url){
case ‘/form’:
if(req.method == ‘POST’){
console.log("[200] " + req.method + " to " + req.url);
var fullBody = ‘’;
req.on(‘data’,function(chunk){
fullBody += chunk.toString();
});
req.on(‘end’,function(){
res.writeHead(200,“OK”,{‘Content-Type’:‘text/html’});
res.write(‘
res.write(‘’);
res.write(‘’);
res.write(‘’);
var dBody = querystring.parse(fullBody);
for(var prop in dBody){
res.write("”);
}
res.write(’
| Name | Value |
|---|---|
| " + prop + “ | ” + dBody[prop] + “ |
res.end();
});
}else{
console.log("[405]" + req.method + " to " + req.url);
res.writeHead(405,“Method not supported”,{‘Content-Type’:‘text/html’});
res.end(‘
‘
Method not supported.
’);}
break;
default:
res.writeHead(404,“Not found”,{‘Content-Type’:‘text/html’});
res.end(‘
‘
Not found.
’);console.log("[404]" + req.method + " to " + req.url);
};
}).listen(8080);
PS：
1.这个脚本将浏览器发来的数据汇总并返回一个简单的HTML文档，在文档中以HTML表格的形式将那些数据显示出来。
2.它在8080端口监听浏览器的连接请求，并且只处理浏览器用HTTP POST方法发送到/form这个URL的表单数据。
要运行这个脚本程序，可在服务器上打开一个命令窗口并输入如下命令：
bin\node.exe formecho.js
此命令适用于Windows Server 2008 R2操作系统。
（这个例子我在那个http://那个URL搞了三天，没有结果，忽略了，小弟太弱了，以后想到再弄吧）
2.配置表单
可用于表单及其内容的各种基本配置选项。
1.配置表单的action属性
action属性说明了提交表单时刻浏览器应该把用户收集的数据发到什么地方。
例：把表单发至开发服务器titan上位于8080端口的/form这个URL。
Apples
------WebKitFromBoundary2qgCsuH4ohZ5eObF
Content-Disposition：form-data；name=“name”
Adam Freeman
------WebKitFromBoundary2qgCsuH4ohZ5eObF
fave=Apple
name=Adam Freeman
3.text/plain编码
这种编码要谨慎使用。
对于在这种方案下数据应该如何编码并没有正式的规范，主流浏览器各有各的数据编码方式。
4.控制表单的自动完成功能
浏览器可以记住用户输入表单的数据，并在再次遇到类似表单的时候自动使用这些数据帮用户填写。
使用autocomplete属性达到这个目的。
例：将form元素的autocomplete属性设置为禁用
5.指定表单反馈信息的目标显示位置
默认情况下浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面。
这可以用form元素的target属性予以改变。
form元素的target属性值
值 说明
_blank 将浏览器反馈信息显示在新窗口（或新标签页）中
_parent 将浏览器反馈信息显示在父窗框组中
_self 将浏览器反馈信息显示在当前窗口中（这是默认行为）
_top 将浏览器反馈信息显示在顶层窗口中
例：使用target属性
6.设置表单名称
name属性可以用来为表单设置一个独一无二的标识符，以便使用DOM（Document Object Model，文档对象模型）时区分各个表单。
name属性与全局属性id不是一回事。
例：使用form元素的name属性和id属性
3.在表单中添加说明标签
label元素：为表单中的每一个元素提供说明。
例：使用label元素
PS：
1.每个input元素都配了一个label元素。
2.input元素设置了id属性，这个id的值为相关label元素的for属性。
4.自动聚焦到某个input元素
autofocus属性：设计者让表单显示出来的时候聚焦于某个input元素。
例：使用autofocus属性
PS：autofocus属性只能用在一个input元素上或多个元素设置这个属性时，自动聚焦于其中的最后一个元素。
5.禁用单个input元素
disabled属性：禁用input元素。
例：设置input元素的disabled属性
6.对表单元素编组
fieldset元素：将一些元素组织在一起。
例：使用fieldset元素
1.为fieldset元素添加说明标签
在每一个fieldset元素中添加一个legend元素。
legend元素必须是fieldset元素的第一个子元素。
例：使用legend元素
2.用fieldset禁用整组input元素
提供fieldset元素的disabled属性，可以一次性地禁用多个input元素。
例：用fieldset元素禁用input元素
7.使用button元素
该元素有三种用法，这些不同的操作模式通过具有三种值的type属性设定。
button元素的type属性的值
值 说明
submit 表示按钮的用途是提交表单
reset 表示按钮的用途是重置表单
button 表示按钮没有具体语义
1.用button元素提交表单
type属性的button元素的默认行为。
type元素设置为submit时button元素的额外属性
属性 说明
form 指定按钮关联的表单
formaction 覆盖form元素的action属性，另行指定表单将要提交到的URL
formenctype 覆盖form元素的enctype属性，另行指定表单的编码方式。
formmethod 覆盖form元素的method属性。
formtarget 覆盖form元素的target属性。
formnovalidate 覆盖form元素的novalidate属性，表明是否应执行客户端数据有效性检查。
例：使用button元素的属性
点击前
点击后
3.把button作为一般元素使用
button元素的type属性设置为button：该button元素就仅仅是一个按钮。它没有特别的含义，在按下时也不会做任何事情。
例：使用一般性的button
PS：可以在按下按钮时用JavaScript执行一些操作，从而实现自定义的行为。
8.使用表单外的元素
可以将input、button和其他与表单相关的元素与文档中任何地方的表单挂钩。
要将某个这类元素与并非其祖先元素的form元素挂钩，只要将其form属性设置为相关form元素的id属性即可。
例：使用form属性
PS：此例只有一个input元素是那个form元素的后代元素。另一个input元素和两个button元素都位于form元素之外，但是它们都通过设置form属性与那个form元素关联在了一起。
定制input元素
1.用input元素输入文字
type属性设置为text的input元素在浏览器中显示为一个单行文本框。
这是未设置type属性情况下的默认形式。
text型input元素可用的额外属性
属性 说明
dirname 指定元素内容文字方向的名称
list 指定为文本框提供建议值的datalist元素，其值为datalist元素的id值。
maxlength 设定用户可以在文本框中输入的字符的最大数目。
pattern 指定一个用于输入验证的正则表达式。
placeholder 指定关于所需数据类型的提示。
readonly 用来将文本框设为只读以阻止用户编辑其内容。
required 表明用户必须输入一个值，否则无法通过输入验证。
size 通过指定文本框中可见的字符数目设定其高度。
value 设置文本框的初始值。
1.设定元素大小
maxlength属性和size属性。二者的字符数目均以正整数表示。
例：使用maxlength和size属性
PS：
1.第一个input元素：用户最多只能在其中输入10个字符，如果超过，浏览器会忽略多出的这些输入内容。
2.第二个input元素：浏览器必须确保该文本框的宽度足以显示10个字符。
3.第三个input元素：同时具有这两个属性。
2.设置初始值和占位式提示
value属性设置一个默认值，用placeholder属性设置一段提示文字，告诉用户应该输入什么类型的数据。
例：使用value和placeholder属性
3.使用数据列表
可以将input元素的list属性设置为一个datalist元素的id属性值，这样用户在文本框中输入数据时只要从后一元素提供的一批选项中进行选择就行了。
不同类型的input元素使用datalist元素的方式略有差异。
对于text型input元素，datalist元素提供的值以自动补全建议值的方式呈现。
提供给用户选择的值各用一个option元素指定。
例：使用datalist元素
PS：
value值：Oranges。 说明信息：Refreshing Oranges
4.生成只读或被禁用的文本框
readonly和disabled属性都可以用来生成用户不能编辑的文本框，其结果的外观不同。
例：使用readonly和disabled属性
PS：readonly属性要谨慎使用。虽然使用这个属性的input元素的数据能够发给服务器，但是没有什么视觉信号告诉用户该文本框已禁止编辑。浏览器不会理会用户的输入操作，这会让用户困惑。
5.指定文字方向数据的名称
通过设置dirname属性，可以将用户输入文字的方向数据发送给服务器，该属性的值就是方向数据项的名称。
2.用input元素输入密码
type属性值设置为password的input元素用于输入密码。用户输入的字符在这种文本框中显示为星号（*）之类的掩饰字符。
password型input元素可用的额外属性
属性 说明
maxlength 设定用户可以在密码框中输入的字符的最大数目。
pattern 指定一个用于输入验证的正则表达式
palceholder 指定关于所需数据类型的提示。
readonly 将密码框设为只读以阻止用户编辑其中内容。
required 表明用户必须输入一个值，否则无法通过输入验证
size 通过指定密码框中可见的字符数目设定其高度。
value 设置初始密码值
例：使用password型input元素
PS：此过程中用户输入的内容只是显示为掩饰字符，而不是被替换为掩饰字符。提交表单时，服务器收到的是明文密码。
3.用input元素生成按钮
将input元素的type属性设置为submit、reset和button会生成类似button元素。
submit型input元素可用的额外属性与button元素的同名属性用法相同。
reset和button型input元素没有定义任何额外的属性。
上述三类input元素生成的按钮上的说明文字均来自它们的value属性值。
例：用input元素生成按钮
PS：不同之处：用button元素生成的按钮可以用来 显示含标记的文字。
4.用input元素为输入数据把关
input元素的type属性在HTML5中新增的一些值可以对用户输入的数据类型提出更具体的要求。
用于输入受限数据的input元素的type属性值
属性 说明
checkbox 将输入限制为在一个“是/否”二态复选框中进行选择
color 只能输入颜色信息
date 只能输入日期
datetime 只能输入带时区信息的世界时（包括日期和时间）
datetime-local 只能输入不带时区信息的世界时（包括日期和时间）
email 只能输入规范的电子邮箱地址
month 只能输入年和月
number 只能输入整数或浮点数
radiobutton 将输入限制为在一组固定选项中进行选择
range 只能输入指定范围内的数值
tel 只能输入规范的电话号码
time 只能输入时间信息
week 只能输入年及星期信息
url 只能输入完全限定的URL
1.用input元素获取数值
type属性设置为number的input元素生成的输入框只能接受数值。
number型input元素可用的额外属性
属性 说明
list 指定为文本框提供建议值的datalist元素，其值为datalist元素id值
min 设定可接受的最小值。
max 设定可接受的最大值。
readonly 用来将文本框设置为只读以阻止用户编辑其内容。
required 表明用户必须输入一个值，否则无法通过输入验证。
step 指定上下调节数值的步长。
value 指定元素的初始值
min、max、step和value属性值可以是整数或小数。
例：使用number型input元素
2.用input元素获取指定范围内的数值
获取数值的另一种方法是使用range型的input元素。
用户只能用它从事先规定的范围内选择一个数值。
例：使用range型input元素
3.用input元素获取布尔型输入
checkbox型input元素会生成供用户选择是与否的复选框。
checkbox型input元素可用的额外属性
属性 说明
checked 设置了该属性的复选框刚显示出来时或重置表单后呈勾选状态
required 表示用户必须勾选该复选框，否则无法通过输入验证。
value 设定在复选框呈勾选状态时提交给服务器的数据值。
例：用input元素生成复选框
4.用input元素生成一组固定选项
radio型input元素可以用来生成一组单选按钮，供用户从一批固定的选项中作出选择。
它适合于可用有效数据不多的情况。
radio型input元素可用的额外属性
属性 说明
checked 设置了该属性的复选框刚显示出来时或重置表单后呈勾选状态
required 表示用户必须勾选该复选框，否则无法通过输入验证。
value 设定在复选框呈勾选状态时提交给服务器的数据值。
每一个radio型input元素代表着提供给用户的一个选项。要生成一组互斥的选项，只要将所有相关input元素的name属性设置为同一个值即可。
例：用radio型input元素生成一组固定选项
PS：
1.使用三个radio型input元素。它们的name属性都设置为fave，以便浏览器把它们关联起来。这样一来，选择其中任何一个按钮都会取消对另外两个按钮的选择。
2.三个元素设置了value属性值，提交表单时选定按钮的这个值会被发送给服务器。
3.fieldset和legend元素可以在视觉上把三个按钮关联在一起。
5.用input元素获取有规定格式的字符串
type属性设置为email、tel和url的input元素能接受的输入数据分别为有效的电子邮箱地址、电话号码和URL。
email型、tel型和url型的input元素可用的额外属性
属性 说明
list 指定为文本框提供建议值的datalist元素。其值为datalist元素的id值。
maxlength 设定用户可以在密码框中输入的字符的最大数目。
pattern 指定一个用于输入验证的正则表达式。
palceholder 指定关于所需数据类型的提示。
readonly 将密码框设为只读以阻止用户编辑其中内容。
required 表明用户必须输入一个值，否则无法通过输入验证
size 通过指定密码框中可见的字符数目设定其高度。
value 指定元素的初始值，对于email型input元素，其值可能是单个邮箱地址，
也可能是以逗号分隔的多个邮箱地址。
例：使用email型、tel型和url型input元素
6.用input元素获取时间和日期
用来获取时间和日期的input元素类型
type属性 说明
datetime 获取世界时日期和时间，包括时区信息。
datetime-local 获取本地日期和时间（不含时区信息）
date 获取本地日期（不含时间和时区信息）
month 获取年月信息（不含日、时间和时区信息）
time 获取时间
week 获取当前星期
用于输入日期和时间的input元素可用的额外属性
属性 说明
list 指定为文本框提供建议值的datalist元素，其值为datalist元素id值
min 设定可接受的最小值。
max 设定可接受的最大值。
readonly 用来将文本框设置为只读以阻止用户编辑其内容。
required 表明用户必须输入一个值，否则无法通过输入验证。
step 指定上下调节数值的步长。
value 指定元素的初始值。
例：使用date型input元素
7.用input元素获取颜色值
color型input元素只能用来选择颜色。
这种input元素中的颜色值以7个字符的格式表示：以#开头，接下来是三个两位十六进制数。它们分别代表红、绿、蓝三种原色的值（如#FF1234）。
例：使用color型input元素
5.用input元素获取搜索用词
search型input元素会生成一个单行文本框，供用户输入搜索用词。
例：使用search型input元素
PS：其实什么都没做。
6.用input元素生成隐蔽的数据项
用户看不到或不能编辑的数据项，在提交表单时也能将其发送给服务器。
例：生成hidden型input元素
7.用input元素生成图像按钮和分区响应图
image型input元素生成的按钮显示为一副图像，点击它可以提交表单。
image型input元素可用的额外属性
属性 说明
alt 提供元素的说明文字。对需要借助残障辅助技术的用户很有用。
formaction 覆盖form元素的action属性，另行指定表单将要提交到的URL
formenctype 覆盖form元素的enctype属性，另行指定表单的编码方式。
formmethod 覆盖form元素的method属性。
formtarget 覆盖form元素的target属性。
formnovalidate 覆盖form元素的novalidate属性，表明是否应执行客户端数据有效性检查。
height 以像素为单位设置图像的高度（不设置这个属性的话图像将以其本身的高度显示）
src 指定要显示的图像的URL
width 以像素为单位设置图像的宽度（不设置这个属性的话图像将以其本身的宽度显示）
例：使用image型input元素
PS：提交表单在发送的数据中包括来自那个image型input元素的两个数据项，它们分别代表用户点击位置相对于图像左上角的x坐标和y坐标。
8.用input元素上传文件
file型input元素：可以在提交表单时将文件上传到服务器。
file型input元素可用的额外属性
属性 说明
accept 指定接受的MIME类型。
multiple 设置这个属性的input元素可一次上传多个文件。
required 表明用户必须为其提供一个值，否则无法通过输入验证。
例：用file型input元素上传文件
其他表单元素及输入验证
1.使用其他表单元素
select、optgroup、textarea、output和keygen
1.生成选项列表
select元素可以用来生成一个选项列表供用户选择。
提供给用户的选项由option元素定义。
例：使用select和option元素
PS：
1.设置了selected属性的会被自动选中。
2.提供设置size属性可让select元素显示多个选项，设置multiple属性则可让用户一次选择多个选项。
例：使用select元素的size和multiple属性
PS：选择多个选项：按住Ctrl键。
在select元素中建立结构
optgroup元素可以用来在select元素的内容中建立一定的结构。
该元素的用途是对option元素进行编组。其label属性可用来为整租选项提供一个小标题，而disabled属性则可用来阻止选择组内的任何选项。
例：使用optgroup元素
2.输入多行文字
textarea元素生成的是多行文本框，用户可以在里面输入多行文字。
textarea元素的rows和cols属性可用来设置其大小。
wrap属性有两个值：hard和soft，可用来控制在用户输入的文字中插入换行符的方式。
例：使用textarea元素
Tell us why this is your favorite fruit
PS：
1.此代码清单中textarea的宽和高分别为20列和5列。
2.wrap属性控制着提交表单时在文字中插入换行符的方式。
hard：将会插入换行符，所提交的文字中每一行的字符数都不超过cols属性的规定。
3.表示计算结果
output元素表示计算的结果。
例：使用output元素
4.生成公开/私有密钥对
keygen元素：生成公开/私有密钥对。
属性：name、disabled、form和autofocus。
keytype属性：指定用来生成密钥对的算法。
2.使用输入验证
设计者告诉浏览器自己需要什么类型的数据，浏览器在提交表单之前会使用这些信息检查用户输入的数据是否有效。
输入验证是通过表单元素的一些属性控制的。
1.确保用户提供了一个值
required属性的用途：检查用户是否提供了一个值。
只有用户提供一个值才能提交表单。
例：使用required属性
360浏览器
chrome
2.确保输入值位于某个范围内
min和max属性可以用来确保输入的数值和日期数据处于指定的范围内。
例：使用min和max属性
3.确保输入值与指定模式匹配
pattern属性可以用来确保输入值与一个正则表达式匹配。
例：使用pattern属性
4.确保输入值是电子邮箱地址或URL
把pattern属性与email和url这类型的input元素结合使用可以进一步限制用户输入的值。
例：将pattern属性与email型input元素结合使用
正确
3.禁用输入验证
设计者想让用户不经过输入内容验证就能提交表单，如用户需要在中途保存进度这种情况。
想不经输入验证就能提交表单：
1.可以设置form元素的novalidate属性
2.设置用来提交表单的button或input元素的formnovalidate属性。
例：禁用输入验证
嵌入内容
1.嵌入图像
img元素允许我们在HTML文档里嵌入图像。
要嵌入一张图像需要使用src和alt属性。
例：嵌入一张图像
PS：
1.src属性指定了欲嵌入图像的URL。
2.alt属性定义了img元素的备用内容。此内容会在图像无法显示时呈现。
3.width和height属性指定img元素所代表图像的尺寸（单位是像素）。
1.在超链接里嵌入图像
img元素的一个常见用法是结合a元素创建一个基于图像的超链接。
它类似表单里基于图像的提交按钮。
例：使用img和a元素创建服务器端的分区响应图
PS：
1.点击会导航至父元素a的href属性所指定的URL上。
2.ismap属性：创建一个服务器端分区响应图。即在图像点击的位置会附加到URL上。
例：otherpage.html中的内容
The X-coordinate is ??
The Y-coordinate is ??
点击鼠标产生的效果：2.创建客户端分区响应图
通过点击某张图像上的不同区域让浏览器导航到不同的URL上。
map元素包含一个或多个area元素，它们各自代表了图像上可被点击的一块区域。
area元素的属性可以被分为两类：
1.处理area所代表的图像区域被用户点击后预览器会导航到的URL。
与目标地址相关的area元素属性
属性 说明
href 此区域被点击时浏览器应该加载的URL
alt 替代内容
target 应该用来显示URL的浏览上下文
rel 描述了当前文档和目标文档之间的关系
media 此区域适用的媒介
hreflang 目标文档的语言
type 目标文档的MIME类型
2.shape和coords属性。用这些属性来标明用户可以点击的各个图像区域。
shape和coords属性是共同起作用的。
shape和coords属性的值
shape值 coords值的性质和意思
rect 这个值代表了一个矩形区域。coords属性必须由四个用逗号分隔的整数组成，它们代表了下列
位置之间的距离：
口 图像的左边缘与矩形的左侧
口 图像的上边缘与矩形的上侧
口 图像的右边缘与矩形的右侧
口 图像的下边缘与矩形的下侧
circle 这个值代表了一个圆形区域。coords属性必须由三个逗号分隔的整数组成，它们代表了下列参
数：
口 从图像左边缘到圆心的距离
口 从图像上边缘到圆心的距离
口 圆的半径
poly 这个值代表了一个多边形。coords属性必须至少包含六个用逗号分隔的整数，每一对数字各代
表多边形的一个顶点
default 这个值的意思是默认区域，即覆盖整张图片。shape属性使用这个值时不需要提供coords值。
例：创建分区响应图
PS：在制作客户端分区响应图时，无需使用a元素来显示创建超链接。
2.嵌入另一张HTML文档
iframe元素允许我们在现有的HTML文档中嵌入另一张文档。
例：使用iframe元素
Things I like
PS：HTML5引入的两个新的iframe元素属性：
1.seamless属性：指示浏览器把frame的内容显示得像主HTML文档的一个整体组成部分。
2.sandbox属性：对HTML文档进行限制。应用这个属性时如果不附带任何值，脚本、表单、插件和指向其他浏览上下文的链接这些元素将被禁用。
iframe的sandbox属性所接受的allow值
值 说明
allow-forms 启用表单
allow-scripts 启用脚本
allow-top-navigation 允许链接指向顶层的浏览上下文，这样就能用另一个文档替换当前整个文档，或创建
新的标签和窗口
allow-same-origin 允许iframe里的内容被视为与文档其余部分拥有同一个来源位置
3.通过插件嵌入内容
object和embed元素。
1.使用embed元素
例：使用embed元素
2.使用object和param元素
object元素实现的效果和embed元素一样，但它的工作方式稍有不同，并带有一些额外的功能。
例：使用object和param元素的属性
PS：
1.data属性：提供内容的地址。
2.param元素：定义将要传递给插件的参数，每个需要定义的参数都各自使用一个param元素。
指定备用内容
object元素的一大优点是可以包含备用内容，在指定内容不可用时显示出来。
例：使用object元素的备用内容功能
PS：去掉type属性，浏览器会尝试从数据本身判断其内容类型。
4.object元素的其他用途
1.使用object元素嵌入图像
取代img元素
例：用object元素嵌入一张图像
2.使用object元素创建分区响应图
usemap属性可以用于关联map元素和object元素。
例：用object元素创建一张客户端分区响应图
2018.7.24 chrome还不支持此功能
3.将object元素作为浏览上下文环境
可以用object元素将一张HTML文档嵌入到另一张文档之中，就像用iframe元素一样。
如果应用name属性，就会创建一个浏览上下文，可以结合一些元素（比如a和form）的target属性使用。
例：用object元素创建浏览上下文
Things I like
5.嵌入数字表现形式
HTML5有两个新元素允许我们在文档中嵌入数值的表现形式。
1.显示进度
progress元素可以用来表现某项任务逐渐完成的过程。
value属性定义了当前的进度，它位于0和max属性的值所构成的范围之间。
当max属性被省略时，范围是0至1.用浮点数来表示进度，比如0.3代表30%。
例：使用progress元素
30% 60% 90%
2.显示范围里的值
meter元素显示了某个范围所有可能值中的一个。
min和max属性设定了可能值所处范围的边界，它们可以用浮点数来表示。
meter元素的显示可以分为三个部分：过低、过高和最佳。
1.low属性：设置一个值，在它之下的所有值都被认为是过低。
2.high属性：设置一个值，在它之上的所有值都被认为是过高。
3.optimum属性：指定了“最佳”的值。
例：使用progress元素
30% 60% 90%
6.其他嵌入元素
1.嵌入音频和视频
audio、video、source和track元素。
2.嵌入图形
canvas元素。