【html5 权威指南】知识小结

《 html5 权威指南》知识小结

第二部分 html 元素

---

1 创建 html 文档

基本文档结构

最基本的文档由以下四个部分来构成：

• DOCTYPE 元素：表示文档包含的是html5内容
• html元素：html的开始
• head元素：文档元数据的开始
• body元素：文档内容的开始（没有局部属性）

用于说明文档的元数据

元数据，就是关于数据的数据。这里表示关于整个html的信息，而不是里边具体的内容。

• title元素：文档的名称，显示在窗口标题栏中。有且仅有一个。
• base元素：设置相对URL的解析基准。
• meta元素：name-content对来承载信息；charset设置；http-quive设置http一些内容，如refresh,default-style和content-style。
• style元素：定义CSS样式。
• link元素：指定外部资源。

脚本元素

• script元素：在页面中加入脚本
  局部属性：type src defer（等html解析完成后才加载脚本） async（异步同时加载）
• noscript元素：不支持或没有js时候显示的内容。

---

2 标记文字

超链接

• a元素：超链接(anchor)
  局部属性：href（设置链接） hreflang（链接语言） media rel target（用以打开链接资源的浏览环境） type

标记内容

• b元素:bold，关键词标记
• em元素:emphasis，强调
• i元素:italics，外文/科技（斜体显示）
• s元素:strike，删除线
• strong元素:重要（粗体显示）
• u元素:underlined
• small元素:小号字体
• sub元素:下标
• sup元素:上标

这里html5为了使得每个标签都有一定的结构或含义上的表达，而给很多原本纯用于展示的标签，如i、strong、b等加上了其表示的内容，比如外文/科技等。主要是因为html4中这些元素广泛使用，没有办法删除，所以html5选择折中的方法，给这些元素加上语义。

换行

• br元素：直接换行
• wbr元素：word break,将长单词自动分为小段，更加得体地换行

输入和输出

• code元素：代码
• var元素：变量
• samp元素：输出
• kbd元素：用户输入

显示上区别不大，斜体或者变换字体而已。

使用标题引用、引文、定义和缩写

• abbr元素：缩写，可有title属性，鼠标悬停显示title内容。
• dfn元素：定义，可有title属性，鼠标悬停显示title内容。
• q元素：引用，局部属性cite表示来源。自带引号。
• cite元素：引用，不带引号。

使用语言元素

• ruby元素：注音
• rt元素：(ruby text)能再文字上方显示注音的浏览器则显示
• rp元素：(ruby parenthesis)不支持上方显示的，在文字旁边用括号显示注音
• bdo元素：文字方向设置，需要有全局属性dir:rtl ltr
• bdi元素：双向隔离文本的方向

其他文本元素

• span元素：用来把一些全局属性应用到一段内容上。
• mark元素：荧光笔式划重点
• ins元素：插入（表现为下划线）
• del元素：删除
• time元素：时间。pubdate和datetime使得浏览器解析的时间正确。

标记文字这一部分主要是文字上的细节，将各种带有一定含义的文字内容用特定的html元素来表示，使得整个文档更具有可读性。但这一部分比较细节，可以待使用时再查阅。

---

3 组织内容

• p元素：段落
• div元素：无具体语义(division)
• pre元素：保留原格式，主要是保留超过一个的空格
• blockquote元素：与q类似，内容更多
• hr元素：(horizontal rule)水平线
• figure元素：图像。可用figcaption元素来表示图片的标题。
• ol元素：(ordered list)有序列表，属性start（开始的值），reversed（新增的，逆序），type（1：数字；a：小写拉丁字母序，A：大写；i：小写罗马字母序；I：大写）
• ul元素：(unordered list)无序列表
• li元素：(list item)列表表项 属性value（表当前序号，其后序号会接下去计算）

文档分节

• h1-h6元素：各级标题
• hgroup元素：将主标题和副标题归到同一组中，不会影响正常的标题计数。
• section元素：节
• header元素：首部
• footer元素：尾部
• nav元素：导航栏
• article元素：一段独立成篇的内容
• aside元素：附注栏
• address元素：联系信息
• detail元素：详情

---

4 表格元素

• table元素：表格
• tr元素：表示表格的行(table row)
• td元素：表示表格的单元格(table data)
• th元素：表示表头的单元格，可以理解为被标为重点的单元格(table headline)
• tbody元素：表格的主体行
• thead元素：表格的标题行
• tfoot元素：表脚，thead,tbody和tfoot会按照顺序排列
• caption元素：标题

5 表单

制作基本的表单

• form元素：表单
  属性：action：数据发送的url；method：指定HTTP方法；enctype：数据的编码方式；autocomplete：记住用户输入表单的数据，自动填写，值为on或off；target：提交表单后是否打开新窗口；name：设置表单名称。
• input元素：用于收集用户数据
  父元素label：表单提供说明。
  父元素fieldset：给input分组。
  autofocus：自动聚焦于某个input元素；autocomplete：自动填写。
• button元素：多种用途
  form：设置与该button关联的表单；formaction,formenctype,formmethod,formtarget,formnovalidate（是否检查数据有效性）

6 定制 input 元素

type属性的不同值

• type="text"
  属性maxlength：用户输入的最大字符数；size：文本框的长度；value：框内值；placeholder：没有输入时的提示文字；list：设置为一个datalist的id，datalist中包含option；readonly：只读；disabled：禁用；dirname：文字方向
• type="password"
  密码输入，属性同上
• type="number"
  额外属性：min，max，list，step(步长)
• type="range"
  同上，一个拉动的条条
• type="checkbox"
• type="radio"
  单选
• type="email/tel/url"
  额外属性：multiple
• type="color"
  颜色盘
• type="search"
  获取搜索用词，无特殊功能，只用于表意
• type="hidden"
  生成隐藏的数据项
• type="image"
  可用于生成分区响应图
• type="file"
  用于上传文件，属性：accept：接受的MIME类型；multiple：多个文件；required。

---

7 其他表单元素

• select元素：
  子元素optgroup（属性：label），option
  属性：name：名字；disable；form；size：纵向，有几个选项；multiple：允许多选；autofocus；required
• textarea元素：
  属性：name；disabled；form；readonly；maxlength；autofocus；required；placeholder；dirname；rows；wrap；cols
• ouput元素：
  用于表示计算的结果

使用输入验证

使用pattern属性，值为正则表达式

8 嵌入内容

嵌入图像

• img元素：图片
  属性：src alt height width usemap ismap
• map元素：创建分区相应图
• area元素

嵌入另一张html-iframe

• iframe元素

通过插件嵌入内容

• embed元素
• object元素
• param元素

嵌入数字表现形式

• progress元素
• meter元素