HTML 语义化标签

HTML 文档被称为网页，由嵌套的 HTML 元素构成，

制作网页时，使用语义化标签描述网页。

所以，HTML 的作用是：

使用标签描述网页，把网页内容在浏览器中展现出来，浏览器不会显示 HTML 标签，而是用标签来解释页面的内容。

HTML 文档的后缀一般是 .html。

但在以前，使用 .htm 作为后缀的也不少，它们都代表 HTML 文档，实际上也没有本质的区别。

// 实际上，.htm 是在 win32 时代，系统只能识别 3 位扩展名时使用的

理解“语义化”

所谓“语义化”，即标签本身的含义。

你需要：

理解每个标签的用途（作用、属性和默认样式），用正确的标签描述页面（内容）

作用：利于 SEO、可访问性（盲人阅读器）、可读性（开发维护 — 先写语义化的 HTML，再选合适的 CSS ）

判断：当去掉 CSS 之后，网页结构依然组织有序，且具有良好的可读性，则说明语义化良好

拓展（浏览器兼容）：主流浏览器都兼容 HTML5 的新标签，对于 IE8 及以下版本不认识 HTML5 的新元素，可以使用 JS 创建一个没用的元素来解决。

<script>document.createElement("header");</script>

1

<script>document.createElement("header");</script>

HTML 元素分类（语义化标签）

HTML 核心的部分莫过于标签（ tag ）。

学习 HTML，应当了解每个标签的作用、属性和默认样式。

标签，是用来描述文档中的各自内容的基本单元，不同的标签表示不同的含义，标签间的嵌套表示了内容间的结构。

[1] 根元素 html

html 表示 HTML 文档的根（ root ），定义了整个 HTML 文档，是一个顶级元素，其他所有元素都是该元素的后代。

<html xmlns="http://www.w3.org/1999/xhtml"></html> // xmlns 属性用于指派文档的 XML 命名空间。 // 预设值是 "http://www.w3.org/1999/xhtml"，这在 XHTML 中是必要的，而 HTML 中则是可选的。

1
2
3
4

<html xmlns="http://www.w3.org/1999/xhtml"></html>

// xmlns 属性用于指派文档的 XML 命名空间。
// 预设值是 "http://www.w3.org/1999/xhtml"，这在 XHTML 中是必要的，而 HTML 中则是可选的。

[2] 元数据和脚本

（文档）元数据：head、title、mate、base、link、style、

可以定义文档的一些基本信息，如标题、样式、字符编码等，方便浏览器解析或搜索引擎搜索等

// base 标签 // 描述了基本的链接地址 / 链接目标，即：作为 HTML 文档中所有的链接标签的默认链接 <base href="http://www.webpiece.cn" target="_blank" />

1
2
3

// base 标签
// 描述了基本的链接地址 / 链接目标，即：作为 HTML 文档中所有的链接标签的默认链接
<base href="http://www.webpiece.cn" target="_blank" />

脚本元素：script noscript

script：定义了内嵌或外链脚本，可以创建动态内容

noscript：定义了当前页面不支持脚本或浏览器关闭脚本功能时显示的内容

[3] 文档章节

主要和 css 搭配使用，显示网页结构的标签，是网页布局中最常用的标签

body、header、nav、article、section、address、footer、main、h1~h6、hgroup

1

body、header、nav、article、section、address、footer、main、h1~h6、hgroup

[4] 组合内容

div、p、hr、pre、blockquote + 列表（ ul、ol、li、dl、dt、dd ）+ figure、figcaption

1
2

div、p、hr、pre、blockquote
+ 列表（ ul、ol、li、dl、dt、dd ）+ figure、figcaption

[5] 文本级别语义

span、a、em/strong、cite/q、code/kbd/samp/var、b/i/u、s、mark、 small、dfn/abbr、wbr、br、sub/sup、time、ruby/rb/rt/rtc/rp、ins、 del、bdi、bdo、data

1
2
3

span、a、em/strong、cite/q、code/kbd/samp/var、b/i/u、s、mark、
small、dfn/abbr、wbr、br、sub/sup、time、ruby/rb/rt/rtc/rp、ins、
del、bdi、bdo、data

[6] 嵌入内容

picture、source、img、iframe、embed、object、param、video、audio、 track、map、area、template、canvas

1
2

picture、source、img、iframe、embed、object、param、video、audio、
track、map、area、template、canvas

[7] 表格元素

table、caption、colgroup、col、tbody、thead、tfoot、tr、td、th

1

table、caption、colgroup、col、tbody、thead、tfoot、tr、td、th

[8] 表单元素

form、label、input、button、select、datalist、optgroup、option、textarea、 output、progress、meter、fieldset、legend

1
2

form、label、input、button、select、datalist、optgroup、option、textarea、
output、progress、meter、fieldset、legend

[9] ~~交互（不常用）~~：details、summary、dialog

HTML5 不仅新增了语义型区块级元素及表单类元素，也新增了一些其他的功能性元素，

这些元素由于浏览器支持等各种原因，并没有被广泛使用。

文档描述 details：主要用于描述文档或文档某个部分的细节，与 summary 配合使用可以为 details 定义标题。

标题是可见的，用户点击标题时，显示出 details，这两个标签只有 chrome 和 opera 支持。

details 仅有一个 open 属性，用来定义 details 是否可见（默认为不可见状态）。

<details> <summary>Copyright 2018.</summary> <p>整合分析、记录点滴</p> </details>

1
2
3
4

<details>
    <summary>Copyright 2018.</summary>
    <p>整合分析、记录点滴</p>
</details>

对话框 dialog：用来定义对话框或窗口，且该对话框位于窗口的水平居中位置

该标签只有一个 open 属性，用来定义对话框是否可见（默认为不可见），只有 chrome 和 opera 支持。

<button>显示对话框</button> <dialog>我是对话框的内容</dialog> <script> var oBtn = document.getElementsByTagName('button')[0]; var oDia = document.getElementsByTagName('dialog')[0]; oBtn.onclick = function(){ console.log(oDia.getAttribute('open')) if(!oDia.getAttribute('open')){ oDia.setAttribute('open','open'); this.innerHTML ='隐藏文本框'; }else{ oDia.removeAttribute('open'); this.innerHTML = '显示文本框'; } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<button>显示对话框</button>
<dialog>我是对话框的内容</dialog>
<script>
    var oBtn = document.getElementsByTagName('button')[0];
    var oDia = document.getElementsByTagName('dialog')[0];
    oBtn.onclick = function(){
      console.log(oDia.getAttribute('open'))
      if(!oDia.getAttribute('open')){
        oDia.setAttribute('open','open');
        this.innerHTML ='隐藏文本框';
      }else{
        oDia.removeAttribute('open');
        this.innerHTML = '显示文本框';
      }
    }
</script>

HTML 语义化标签

理解“语义化”

HTML 元素分类（ 语义化标签 ）

HTML 元素分类（语义化标签）