HTML 文本级别语义

超链接

超链接，可以是文本超链接，也可以是图像超链接；

任何文档流内容都可被嵌套，只要不是交互内容（如按钮、链接等）。

默认情况下，链接将以以下形式出现在浏览器中（可以通过 CSS 重新设置）：

一个未访问过的链接，显示为蓝色字体并带有下划线

访问过的链接，显示为紫色并带有下划线

点击链接时，链接显示为红色并带有下划线

另，a 元素的文本颜色只能自身进行设置，从父级继承不到；a 元素不可嵌套 a 元素。

「作用」既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

1

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

href：表示链接地址的路径

1. 链接地址 <a href="http://www.baidu.com">百度</a> // 说明：外部链接，以 http:// 或 https:// 开头；内部链接，直接访问资源文件所在路径（含文件名）即可 2. 下载地址 <a href="test.zip">下载测试</a> 拓展：download属性用来设置下载文件的名称(firefox/chrome/opera支持) <a href="test.zip" download="gogo">test</a> 3. 锚点：点击页面中的一个地方时，就会跳转到页面中的另一个地方。 A页面甲位置到A页面乙位置或A页面甲位置到B页面乙位置；锚链接常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。操作步骤： a. 在页面的乙位置设置标记，如，<a id="marker">目标位置</a> [ 可以使用name或id属性，由于有些标签没有name属性，为了更好的兼容，建议使用id属性 ] b. 设置甲位置链接路径href属性值为"#标记名"，如，<a href="#marker">当前位置甲</a> （1）href:#id名 <a href="#test">目录</a> <div id="test" style="height: 200px;width: 200px; border: 1px solid black;">内容</div> （2）href:页面地址#id名 <a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a> // href属性一定不要留空，若暂时不需要写地址，则写 # 或 javascript:; 若href留空，会刷新页面。 4.功能性链接：单击链接时，用于启动本机自带的某个应用程序。如电子邮件、QQ等。（1）电子邮件用法：“mailto:电子邮件地址”。如，<a href=“mailto: "207510652@qq.com">联系我们</a> 多个邮箱 <a href=”mailto: “207510652@qq.com,admin@163.com”>联系我们</a> 抄送、主题等 <a href="mailto:207510652@qq.com?cc=admin@163.com&subject=...@body=...">联系(抄送)</a> （2）手机号码在移动端，使用<a href="tel:15312345678">15012345678</a>可以唤出手机拨号盘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

1. 链接地址 <a href="http://www.baidu.com">百度</a>
 // 说明：外部链接，以 http:// 或 https:// 开头；内部链接，直接访问资源文件所在路径（含文件名）即可

2. 下载地址 <a href="test.zip">下载测试</a>
 拓展：download属性用来设置下载文件的名称(firefox/chrome/opera支持)
 <a href="test.zip" download="gogo">test</a>

3. 锚点：点击页面中的一个地方时，就会跳转到页面中的另一个地方。
 A页面甲位置到A页面乙位置或A页面甲位置到B页面乙位置；锚链接常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。
 操作步骤：
 a. 在页面的乙位置设置标记，如，<a id="marker">目标位置</a>
 [ 可以使用name或id属性，由于有些标签没有name属性，为了更好的兼容，建议使用id属性 ]
 b. 设置甲位置链接路径href属性值为"#标记名"，如，<a href="#marker">当前位置甲</a>
 （1）href:#id名
 <a href="#test">目录</a>
 
 <div id="test" style="height: 200px;width: 200px; border: 1px solid black;">内容</div>
 （2）href:页面地址#id名
 <a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

 // href属性一定不要留空，若暂时不需要写地址，则写 # 或 javascript:; 若href留空，会刷新页面。

4.功能性链接：单击链接时，用于启动本机自带的某个应用程序。如电子邮件、QQ等。
 （1）电子邮件
 用法：“mailto:电子邮件地址”。如，<a href=“mailto: "207510652@qq.com">联系我们</a>
 多个邮箱 <a href=”mailto: “207510652@qq.com,admin@163.com”>联系我们</a>
 抄送、主题等 <a href="mailto:207510652@qq.com?cc=admin@163.com&subject=...@body=...">联系(抄送)</a>
 （2）手机号码
 在移动端，使用<a href="tel:15312345678">15012345678</a>可以唤出手机拨号盘

target：跳转方式（ _self，在当前窗口显示（默认）；_blank，在新窗口显示）

// 外层框架 <frameset cols = "20%, *"> <frame src="left.html"> <frame src="right.html"> </frameset> // 里层框架 <frameset rows = "50%,*"> <frame src="top.html"> <frame src="bottom.html" name="bottom"> </frameset> // 锚点页 <ul class="list"> <li class="in"><a href="chap1.html" target="_self">chap1(_self)</a></li> <li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li> <li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li> <li class="in"><a href="chap4.html" target="_top">chap4(_top)</a></li> </ul>

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

// 外层框架
<frameset cols = "20%, *">
 <frame src="left.html">
 <frame src="right.html">
</frameset>
// 里层框架
<frameset rows = "50%,*">
 <frame src="top.html">
 <frame src="bottom.html" name="bottom">
</frameset>
// 锚点页
<ul class="list">
 <li class="in"><a href="chap1.html" target="_self">chap1(_self)</a></li>
 <li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li>
 <li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li>
 <li class="in"><a href="chap4.html" target="_top">chap4(_top)</a></li>
</ul>

「绝对路径 & 相对路径」超链接的路径均为文件名，目录下

网页中，通常使用 URL 来定义一个链接地址（ webpiece.cn ）

根据链接地址指向站内外文件：绝对路径和相对路径

绝对路径：指向目标地址的。如，<a href="http://www.webpiece.com"></a>

相对路径：相对于当前页面文件。如，<a href="login/login.html"></a>

另，使用相对路径时，常用到两个特殊符号：

"../" 表示当前目录的上级目录

"../../web2.html" 表示当前目录的上上级目录

文本语义

[1] span 本身没有语义，可以结合 class 等一些属性用来编注一些标签，给这些标签一个特定的样式。

短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编辑元素以达到某种样式意图，应该在没有其他合适的语义元素时才使用它。span 与 div 元素很相似，但 div 是一个块元素，而 span 则是行内元素。

Sometext

1

Sometext

[2] 强调重要 em / strong

em 主要是语义上的强调，可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读；

strong 是重要性的强调，比 em 更强烈一些。

默认样式：em 斜体 strong 粗体虽然浏览器通常用斜体和粗体来显示em和strong，但这些元素不应用作加粗和斜体。它们分别用来提升包含内容的强调程度和重要性。 I am very worried! warning

1
2
3
4
5

默认样式：em 斜体 strong 粗体
虽然浏览器通常用斜体和粗体来显示em和strong，但这些元素不应用作加粗和斜体。它们分别用来提升包含内容的强调程度和重要性。

I am very worried!
warning

[3] 引用 cite/q

cite：表示作品标题的引用，可以是书影音画等。
q：表示短引用，常用于引用别人说的话，用引号可以表达等价语义。

我最喜欢的电影是<cite>千与千寻</cite> The judge said <q>You can drink water form the fish tank</q> but advised against it.

1
2

我最喜欢的电影是<cite>千与千寻</cite>
The judge said <q>You can drink water form the fish tank</q> but advised against it.

[4] 代码 code

<code> 表示计算机代码，通常与pre一起使用，确保确保代码格式一致 <kbd> 定义键盘码 <samp> 定义计算机例子代码 <tt> 定义打字机代码 <var> 定义变量 <code>Computer code</code> <kbd>Keyboard input</kbd> <tt>Teletype text</tt> <samp>Sample text</samp> <var>Computer variable</var>

1
2
3
4
5
6
7
8
9
10
11

<code> 表示计算机代码，通常与pre一起使用，确保确保代码格式一致
<kbd> 定义键盘码
<samp> 定义计算机例子代码
<tt> 定义打字机代码
<var> 定义变量

 <code>Computer code</code>
 <kbd>Keyboard input</kbd>
 <tt>Teletype text</tt>
 <samp>Sample text</samp>
 <var>Computer variable</var>

[5] 格式化：b 粗体 i 斜体 // 适应于并不强调的场景： b，如摘要中的关键字、产品名称等；i，如技术术语等。

i 和 b 元素历来是用来展示粗体和斜体字体的，但在 HTML5 中，它们有了新的语义。

 文字以斜体方式显示

1. 表示不同情绪或声音的文本，如内心对白 Simon smirked,"Yes,I'm happy to take the garbage out." Ugh,I really don't want to ! he thought as he picked up the garbage bag. 2. 表示外来语、分类学名和技术术语等 Oh la la!

1
2
3
4
5

1. 表示不同情绪或声音的文本，如内心对白
Simon smirked,"Yes,I'm happy to take the garbage out." Ugh,I really don't want to !
he thought as he picked up the garbage bag.
2. 表示外来语、分类学名和技术术语等
Oh la la!

 文字以粗体方式显示

1. 用于分隔文字 After bringing water to a boil, add potatoes and carrots 2. 用于文章或故事的引言 Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.

1
2
3
4

1. 用于分隔文字
After bringing water to a boil, add potatoes and carrots
2. 用于文章或故事的引言
Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.

[6] 不精确文字：s 在 HTML5 中重新定义为有错的、过时的、不被建议使用的文本，常用于表示价格变动等。

价格<s>￥1298</s>￥998！ // 文字以加删除线的方式显示 <s>37度</s> 41度

1
2

价格<s>￥1298</s>￥998！ // 文字以加删除线的方式显示
<s>37度</s> 41度

[7] 高亮文字：mark 表示高亮或用于引用而标记的文字。

We're all hoping it rains soon, some farmers have installed irrigation systems, at considerable expense

1
2

We're all hoping it rains soon, some farmers have installed irrigation systems,
at considerable expense

[8] 次要评论：small 表示旁注，可用于免责声明、使用条款和版权信息等需要小字体的场景。

图片仅供参考，请以实物为准 Chris Elhorn | The city Press

1
2

图片仅供参考，请以实物为准
Chris Elhorn | The city Press

[9] 术语处理：dfn，用来定义术语；abbr，缩写词，可配合 dfn 定义术语。

The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.

1
2
3

The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals
The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to
open the iris.

[10] wbr 需要时指定单词可以换行的位置。

Irrigation Direct

1

Irrigation Direct

[11] 换行 br // 文本级语义元素，可设置行高和字体大小，但设置宽高无效

在 HTML 中，段落中的文字从左到右依次排列，直到浏览器窗口的右端，自动换行。

如果希望某段文本强制换行显示，就需要使用换行标签。 // 敲回车键换行，在浏览器中只是多了一个空格

 The City Press 123 General Street Springfield, OH 45501 

1
2
3
4
5


 The City Press 
 123 General Street 
 Springfield, OH 45501

[12] 上标下标：sup sub 常用于数学等式、科学符号和化学公式中。

sup 表示上标

 a2 + b2 = c2 

1
2
3
4
5
6
7


 a2
 +
 b2
 =
 c2


sub 表示下标

 H2 SO4 

1
2
3
4


 H2
 SO4

[13] 特定时间：time // 表示时间和日期

属性： datatime：表示确切的时间，遵循格式YYYY-MM-DDThh:mm:ssTZD，表示年-月-天-分割符T-时-分-秒-时区 pubdate：表示time元素中的日期或时间是文档的发布日期 我们在每天早上 <time>9:00</time> 开始营业。 我在<time datetime="2008-02-14">情人节</time>有个约会。 Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time>

1
2
3
4
5
6
7

属性：
datatime：表示确切的时间，遵循格式YYYY-MM-DDThh:mm:ssTZD，表示年-月-天-分割符T-时-分-秒-时区
pubdate：表示time元素中的日期或时间是文档的发布日期

我们在每天早上 <time>9:00</time> 开始营业。
我在<time datetime="2008-02-14">情人节</time>有个约会。
Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time>

~~[14] 注音标识：ruby rt rp~~

ruby 标签定义注音标识，多用于 CJK 文字，CJK 是指中日韩统一表意文字（ Chinese、Japanese、Korean ）。

<ruby>表示ruby标记； <rt>表示ruby标记文字； <rp>表示ruby标记括号； <ruby> 汉 <rp>(</rp> <rt>hàn</rt> <rp>)</rp> 语 <rp>(</rp> <rt>yǔ</rt> <rp>)</rp> </ruby>

1
2
3
4
5
6
7
8
9
10
11
12

<ruby>表示ruby标记； <rt>表示ruby标记文字； <rp>表示ruby标记括号；

<ruby>
 汉
 <rp>(</rp>
 <rt>hàn</rt>
 <rp>)</rp>
 语
 <rp>(</rp>
 <rt>yǔ</rt>
 <rp>)</rp>
</ruby>

[15] 文本删改 如果要表示文档的增删改记录，则应该使用 ins 和 del 标签。

<ins> 文档中插入的内容，文字以加下划线的方式显示

<del> 文档中删除的内容，文字以加删除线的方式显示。 // <ins> 和 <del> 可以嵌套任何元素

属性： datetime：用于标明编辑的日期和可选的时间 cite：用于指定说明编辑的文档网址 一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。

1
2
3
4
5

属性：
datetime：用于标明编辑的日期和可选的时间
cite：用于指定说明编辑的文档网址

一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。

~~[16] 文字方向~~

<bdi> 忽略周围文字方向的文字

<bdo> 覆盖两种方向的设置，允许显式设置方向，并覆盖所有其他当前方向

When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'

1

When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'