HTML常用元素

2018-10-29 HTML HTML元素网页结构表单语义化

结构元素

`html`元素

html 元素表示一个 HTML 文档的最顶端元素，或者是根元素，其他元素都包含于html元素之中。

html 元素有一个重要属性lang，用于指定文档的语言，以方便语音合成、翻译工具、浏览器等工具决定采用何种规则来处理网页。

下面的例子指定网页的内容为中文：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>泰戈尔</title>
  </head>
  <body>
    <p>离你越近的地方，路途越远；最简单的音调，需要最艰苦的练习。</p>
  </body>
</html>

文档元数据相关元素

head

head元素是html元素的第一个子元素，用来标记HTML文档的一系列元数据（如文档标题、作者、关键词、相关样式表、相关脚本等等）。

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 </head>
 <body>
 ...

title

title元素位于head元素之中，用来标记整个 HTML 文档的标题或名称，title元素不得重复出现。

link

link元素位于head元素中，用来连接和当前文档相关的外部资源。link元素必须指定rel属性。如：

1
<link rel="stylesheet" href="main.css" type="text/css">

style

style元素是head元素的子元素，用来设定 HTML 文档的内部样式表。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis Catus</i> in modern human society.</p>
 </body>
</html>

区块元素

块元素、行内元素与行内块元素

绝大多数 HTML 元素是块元素（Block-level element）或者行内元素（Inline-level element）。这两者之间有什么不同？

块元素开始于新的一行，占据指定的宽度。块元素还可以嵌套块元素，还可以在内部使用行内元素。最常见的块元素就是段落<p>、<div>等等。

行内元素并不会开始于新的一行。它们按照字符的顺序依次再文档中显示，如从左到右，一个挨着一个，填满所在容器的宽度后才会换行。行内元素也可以嵌套使用，但是行内元素内部不能包含块元素。常见的行内元素有<a>、<span>等等。

除了上述两种元素外，还有少部分元素是行内块元素(Inline-block-level element)，这类元素的特点是能在一行中显示，但是可以设定宽度和高度。例如<img>、<input>元素。

body

Body 元素用来标记全部文档内容。在 HTML 文档中，应该只能有一个 body 元素。

body 元素属于Sectioning root类型的元素，即它可以包含其他区块元素。

h1,h2,...h6

这些元素用来标记对应区块的标题，其中 h1 为最高级别，h6 为最低级别的子标题。

合理使用标题元素，也有利于搜索引擎对页面内容的理解。

建议使用标题元素来组织文档的大纲。在 chrome 浏览器中，安装"html5 outline"扩展可查看文档大纲。

一般而言，一个页面应该只有一个一级标题。

这些元素属于Heading content类型。

内容组织元素

合理使用内容组织元素，能帮助浏览器等设备更好地理解网页的内容。

p

p元素用来表示段落，列表元素ol和ul不能包含于p元素中。

hr

hr元素表示段落级别的语义中断，例如，一个故事中的场景切换，或者文章中的主题切换。

pre

Pre元素表示预定义格式的文本块，常用来标记诗歌、代码等等内容。

blockquote

Blockquote元素表示从别处引用的内容。

ol

Ol 元素表示一组有序列表，所谓有序列表，就是列表项目的顺序是有意义的，如菜谱中的工序。列表项目使用li元素标记。

ul

Ul 元素表示一组无序列表，所谓无序，就是列表的顺序可以随意改变，列表项目使用 li 元素标记。

li

Li元素表示列表中的项目。

dl

dl元素表示一组包含“名称-值”的自定义列表，其中名称使用dt标记，值可以是一个或者多个dd元素。

1
2
3
4
5
6
7
<dl>
 <dt> 作者 </dt>
 <dd> Adam </dd>
 <dd> Cui </dd>
 <dt> 编辑 </dt>
 <dd> Fang </dd>
</dl>

dt

Dt 元素用来表示自定义列表 dl 中的名称、术语。

dd

Dd 元素用来表示自定义列表dl中名称dt的解释、定义或者值。

figure

Figure 元素用来表示对插图、图表、照片、代码块等内容的引用。

1
2
3
4
<figure>
 <img src="bubbles-work.jpeg">
 <figcaption>图片标题</figcaption>
</figure>

figcaption

Figcaption元素用来表示figure元素中的标题。

main

Main元素表示文档或者应用的最重要或者核心部分。main元素可与header、footer一起标记网页的内容。

在文档中，<main> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。

main元素不要放在article、 aside、 footer、 header、或者 nav元素中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
  <html>
  <head>
    <title>………………</title>
  </head>
  <body>

  <header>
  <nav>
  <ul>
  <li>……</li>
  </ul>
  </nav>
  </header>

  <main>
  …………
  </main>

  <footer>…………</footer>

  </body>
  </html>

div

Div元素本身并没有特殊含义，它是 HTML 中用来标记内容结构的最常用元素，用来将相关的元素组织在一起，形成逻辑上的整体。

文本语义元素

a

A 元素用来表示超链接或者文档内部锚点。如果 a 元素有 href 属性，它就表示超链接。

当 a 元素表示超链接时，可以使用 target 属性指定链接打开方式，如：

1
<a href="http://www.baidu.com" target="_blank">百度</a>

之前在我们提到，行内元素不能包含块元素，但是 a 元素是个例外，a 元素内部可以是文字、图片等行内元素，也可以是段落、标题等块内容。

链接通常可以分为两类：指向本站内部的链接和指向外部站点的链接。这些链接通过 a 元素的 href 属性来指定。我们常使用相对路径来指定网站内部的链接，相对路径中不包含域名（如。com，.org， .edu，等等）信息，因为链接指向的网页位于同一站点，因此 href 属性的值只需要包含网页文件所在的路径和文件名即可，如：<a href="about.html">About</a>；指向外部站点页面的链接必须使用绝对路径，绝对路径包含完整的 URL 信息。通常是以 http 开头，包含主机域名以及文件路径和文件名称。如<a href="http://www.google.com/">Google</a>

a 元素还可以通过在 href 属性中添加#创建指向文档内部具体位置的超级链接，如：

1
2
3
4
5
<body id="top">
  ...
  <a href="#top">Back to top</a>
  ...
</body>

上述代码将创建一个返回到 body 开始位置的超级链接，实现返回到页首的效果。

em

Em 元素表示对其标记内容的强调，在语义上强调与其他内容的不同。

strong

Strong 元素用来表示其标记内容非常重要、非常紧急，在语义上表示重要性。

span

Span 元素用来在逻辑结构上对文本内容进行区分，比如在新闻信息中，我们可以将日期、作者信息、消息来源等内容，用 span 元素加以标记，结合 class 属性，进行文本区分。

br

Br 元素表示另起一行。

内容嵌入元素

img

Img 元素用来在文档中插入图片。src 属性用来指定图片来源，alt 属性用来说明图片内容。

iframe

Iframe 元素生成内嵌框架，引用另外一个网页的内容。src 属性用来指定内嵌网页的地址。

1
<iframe src="http://ads.example.com/" width="468" height="60"></iframe>

svg

Svg 元素用来嵌入 svg 格式图片。详见svg。

表格元素

table

Table 元素用来生成表格。表格拥有行、列。

tr

Tr 元素用来标记表格的行。

td

Td 元素用来标记表格的单元格。

th

Th 元素表示表头的单元格。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<table>
   <caption>表格说明文字</caption>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 </thead>
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
 </tbody>
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
 </tbody>
</table>

表单元素

form

Form 元素用来标记一组和表单相关的元素，如文本框、提交按钮等等内容，是服务器和用户进行交互的最重要元素。

form 元素最重要的两个属性是 action 和 method，分别对应表单提交后的处理程序和表单提交方式。

1
2
3
<form action="http://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>

lable

Label 元素用来标记表单交互元素的标签，是一个辅助说明性的元素，label 元素往往对应特定的元素。

1
<p><label>年龄：<input name=age type=number min=0></label></p>

input

Input 元素通过 type 属性，可生成各种交互元素，如文本框、密码框、按钮等等。

type	类型	返回值
hidden	隐藏文本域	字符串
text	文本框	单行文本
search	搜索框	单行文本
tel	电话号码文本框	单行文本
url	URL 地址框	URL 地址
email	邮件地址框	邮箱地址或多个邮箱地址
password	密码框	单行文本
date	日期	无时区的日期
time	时间	无时区的时间
number	数字	数字
range	数字范围	数字
color	颜色选择器	RGB 颜色值
checkbox	复选框	列表值
radio	单选按钮	数字值
file	文件选择器	文件信息
submit	提交按钮	预设值
image	图片按钮	预设值
reset	重设按钮	n/a
button	按钮	n/a

Input 元素的用法示例如下：

1
2
3
4
5
<input type="range" name="a" list="a-values">
<datalist id="a-values">
 <option value="10" label="Low">
 <option value="90" label="High">
</datalist>

button

Button 元素生成一个按钮，可通过 type 属性控制按钮类型。type 的值有 reset、submit 和 button，分别对应重置按钮、提交按钮和普通按钮。

交互元素

details

标签用于描述文档或文档某个部分的细节。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

</body>
</html>

标签是 HTML 5 中的新标签，与

标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

summary

标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

dialog

标签定义对话框或窗口。是 HTML 5 中的新标签，截止目前，多数浏览器并不支持。

脚本元素

脚本元素可为文档增加用户交互性。

script

元素 script 能为 HTML 文档包含动态脚本和数据块，包含在 script 元素中的内容不会直接显示给用户。

当使用 script 元素包含动态脚本时，脚本内容既可以直接嵌入在行内，也可以通过 scr 属性导入外部独立的脚本文件。

script 元素除全局性属性之外，还拥有以下几个属性：

src 外部脚本文件的地址
type 内嵌资源的类型。type 的默认值是"text/javascript"。如果脚本语言不是 JavaScript，则必须指定 type 的值。
charset 外部脚本文件的字符编码方式
async 使浏览器可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析（异步）。在不支持 async 的浏览器中，通过动态创建<script>元素并把它插入文档中，来实现脚本的异步载入和执行。
defer 使得浏览器延迟脚本的执行，直到文档的载入和解析完成，并可以操作。
crossorigin 设置元素处理跨域请求的方式。

noscript

Noscript 元素当浏览器支持脚本时，其包含的内容不被显示；而当浏览器禁用脚本或者不支持脚本时，将会显示其内容。

template

Template 表示 HTML 模版片段，结合 JavaScript 能生成基于模版的动态内容。

canvas

Canvas 元素表示可实时生成内容的画布，结合 JavaScript，可生成动画、背景、游戏场景等等图片。

自定义元素

自定义元素为作者提供了一种构建自己的全功能DOM元素的方法。尽管作者总是可以在文档中使用非标准元素，并通过脚本或类似方式在事后添加特定于应用程序的行为，但这些元素在历史上一直是不一致的，并且功能性不强。通过定义自定义元素，作者可以通知解析器如何正确构造元素以及该类的元素应如何响应更改。

自定义元素是“合理化平台”这一更大努力的一部分，它用较低级别的作者公开的扩展点（如自定义元素定义）来解释现有的平台特性（如HTML元素）。尽管目前自定义元素在功能和语义上都存在许多限制，无法完全解释HTML现有元素的行为，但随着时间的推移这一差距将会逐渐缩小。

1
<flag-icon country="nl"></flag-icon>