HTML5权威指南笔记：8-标记文字_base元素-优快云博客

本文链接：https://blog.youkuaiyun.com/u011069189/article/details/78317493

本文详细介绍了HTML5中各种文本元素的使用方法及其属性，包括超链接、文字样式元素、换行元素等，并通过实例展示了如何正确应用这些元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 生成超链接（a元素）

a元素
元素类型	包含短语内容时被视为短语元素，包含流内容时被视为流元素
允许具有的父元素	可以包含短语元素的任何元素
局部属性	href 、hreflang 、media 、rel 、target 、type
内容	短语内容和流元素
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	该元素现在既能包含短语内容也能包含流内容。media属性是新增的。HTML4中已弃用的target属性现在又被恢复。在HTML5 中，不含href值的a元素作为超链接的占位符使用。原有的id 、coords 、shape 、urn 、charset 、methods 、rev属性现已不再使用
习惯样式	`a:link, a:visited { color: blue;text-decoration:underline; cursor: auto; } a:link:active, a:visited:active { color: blue; }`

例子：

<!--
a元素的局部属性
href        指定a元素所指资源的URL
hreflang    说明所链接资源使用的语言
media       说明所链接资源用于哪种设备。该属性使用的设备和特性值与第7章所说的相同
rel         说明文档与所链接资源的关系类型。该属性与第7章介绍过的link元素的rel属性使用相同的值
target      指定用以打开所链接资源的浏览环境
type        说明所链接资源的MIME类型（比如text/html )
-->

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <!--1 生成指向外部的超链接
        将a元素的href属性设置为以http://开头的URL即可生成到其他HTML文档的超链接-->
        <a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.    

        <!--2 使用相对URL
        如果href属性值不是以类似http://这样的已知协议开头，那么浏览器会将该超链接视为相对引用--> 
        You can see other fruits I like <a href="fruitlist.html">here</a>.

        <!--3 生成内部超链接
        超链接也可用来将同一文档中的另一个元素移入视野。为此需要用到形如css 中针对目标元素的ID选择器的表达式： #<id>-->
        You can see other fruits I like <a href="#fruits">here</a>.
        <p id="fruits">
            I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
        </p>
        <!--如果浏览器找不到具有指定id属性值的元素，那么它会再进行一次查找，试图找到一个name属性值与其匹配的元素。-->

        <!--4 设定浏览环境
        供a元素的target属性使用的值
        _blank      在新窗口或标签页中打开文档
        _parent     在父窗框组( frameset ) 中打开文档
        _self       在当前窗口中打开文档（这是默认行为）
        _top        在顶层窗口打开文档
        <frame>     在指定窗框中打开文档
        -->
</body>
</html>

2 用基本的文字元素标记内容

2.1 表示关键词和产品名称（b元素）

b元素
元素类型	短语
允许具有的父元素	可以包含短语内容的任何元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	在HTML4中b元素只具有呈现性质的含义。在HTML5中，其语义如前所述。其呈现性的一面已被降格为习惯样式
习惯样式	b { font-weight: bolder; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--开始标签和结束标签之间的内容会从周围内容中凸现出来-->
        I like <b>apples</b> and <b>oranges</b>.
    </body>
</html>

2.2 加以强调（em元素）

em元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	em{ font-style: italic; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--em元素表示对一段文字的强调,这个元素的习惯样式是斜体字-->
        <em>I</em> like <b>apples</b> and <b>oranges</b>.
    </body>
</html>

2.3 表示外文词语或科技术语（i元素）

i元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	在HTML4中i元素只具有呈现性质的含义。在HTML5 中，其语义如前所述。其呈现性的一面已被降格为习惯样式
习惯样式	i { font-style: italic; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--注意该元素的习惯样式与em元素相同-->
        as <i>citrus reticulata</i>.
    </body>
</html>

2.4 表示不准确或校正（s元素）

s元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	在HTML4中s元素只具有呈现性质的含义。在HTML5 中，其语义如前所述。其呈现性的一面已被降格为习惯样式
习惯样式	s { text-decoration: line-through; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--s元素用来表示一段文字不再正确或准确。其习惯样式是在文字上显示一条删除线-->
        Oranges at my local store cost <s>$1 each</s> $2 for 3.
    </body>
</html>

2.5 表示重要的文字（strong元素）

strong元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	strong { font 心eight: bolder; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--样式与b元素相同-->
        <strong>Warning:</strong> Eating too many oranges can give you heart burn.
    </body>
</html>

2.6 为文字添加下划线（u元素）

u元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	无
是否为HTML5新增	否
在HTML5中的变化	在HTML4中u元素只具有呈现性的含义。在HTML5 中，其语义如前所述。其呈现性的一面已被降格为习惯样式
习惯样式	u { text-decoration:underline; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--u元素让一段文字从周围内容中凸现出来，但并不表示强调或其重要性有所增加
        u元素的习惯样式与a元素类似。因此用户往往会把加下划线的文字误认为超链接。为了防止引起混淆，应该尽量避免使用u元素-->
        <u>too many</u> oranges can give you heart burn.
    </body>
</html>

2.7 添加小号字体内容（small元素）

small元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	在HTML4中small元素只具有呈现性的含义。在HTML5 中，其语义如前所述。其呈现性的一面已被降格为习惯样式
习惯样式	small { font-size: smaller; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--表示小号字体内容( fine print) , 常用于免责声明和澄清声明-->
        Oranges at my local store are $1 each <small>(plus tax)</small>
    </body>
</html>

2.8 添加上标和下标（sub和sup元素）

sub和sup元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	sub { vertical-align: sub;font-size: smaller; } sup { vertical-align: super;font-size: smaller;}

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        The point x<sub>10</sub> is the 10<sup>th</sup> point.
    </body>
</html>

3 换行

3.1 强制换行（br元素）

br元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	无
标签用法	虚元素形式
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	让后续内容从新行开始显示（无法用css办到）

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>     
        <!--br元素只宜用在换行也是内容的一部分的情况,切勿用它创建段落或别的内容组。那是其他元素的任务。--> 
        I WANDERED lonely as a cloud<br/>
        That floats on high o'er vales and hills,<br/>
        When all at once I saw a crowd,<br>
        A host, of golden daffodils;
    </body>
</html>

3.2 指明可以安全换行的建议位置（wbr元素）

wbr元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	无
标签用法	虚元素形式
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	如果需要换行，则从新行开始显示后续内容

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--wbr元素是HTML5 中新增的，用来表示长度超过当前浏览器窗口的内容适合在此换行， 究竟
        换不换行由浏览器决定。wbr元素只不过是对恰当的换行位置的建议而已-->
        This is a very long word: Super<wbr>califragilistic<wbr>expialidocious.
        We can help the browser display long words with the wbr element.
    </body>
</html>

4 表示输入和输出

元素	说明	习惯样式
code	表示计算机代码片段	code { font-family: monospace; }
var	在编程语境中表示变址。也可表示一个供读者在想象中插入一个指定值的占位符	var { font-style: italic; }
samp	表示程序或计算机系统的输出	samp { font-family: monospace; }
kbd	表示用户输入	kbd { font-family: monospace; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <p>
        <code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
            document.writeln("I like " + fruits.length + " fruits");</code>
        </p>
        <p>The variable in this example is <var>fruits</var></p>
        <p>The output from the code is: <samp>I like 4 fruits</samp></p>
        <p>When prompted for my favorite fruit, I typed: <kbd>cherries</kbd>
    </body>
</html>

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

5.1 表示缩写（abbr元素）

abbr元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无。但全局属性title具有特殊含义
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        I like apples and oranges.
        <!--abbr元素用来表示缩写。其title属性表示的是该缩写代表的完整词语
            abbr元素没有习惯样式，因此它包含的内容看上去没有什么特别之处-->
        The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida
        citrus industry.
    </body>
</html>

5.2 定义术语（dfn元素）

dfn元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无。但全局属性title具有特殊含义
内容	文字或一个abbr元素
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--如果要为dfn元素设置title属性，那么必须将其设置为所定义的术语。
        该元素没有习惯样式，因此其内容看上去没有什么特别之处-->
    The <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree,
    species Malus domestica in the rose family.
</body>
</html>

5.3 引用来自他处的内容（q元素）

q元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	cite
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	q { display: inline; } q:before { content: open-quote; } q:after { content: close-quote; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--q元素的cite属性可以用来指定来源文章的URL-->
    <q cite="http://en.wikipedia.org/wiki/Apple">
        The is the pomaceous fruit of the apple tree,species Malus domestica in the rose family.
    </q>
</body>
</html>

5.4 引用其他作品的标题（cite元素）

cite元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	cite元素不能再用来引用人名，只能用于作品标题
习惯样式	cite { font-style: italic; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite>by Stuppy & Kesseler
    </body>
</html>

6 使用语言元素

6.1 注音符号ruby 、rt和rp元素

ruby元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容及rt和rp元素
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	ruby { text-indent: o; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--注音符号(ruby character) 是用来帮助读者掌握表意语言（ 如汉语和日语）文字正确发音,位于这些文字上方或右方
    rt元素用来标记注音符号， 
    rp元素则用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号-->
    <ruby>魁<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
    <ruby>魅<rp>(</rp><rt>mei<lrt><rp>)</rp></ruby>
    <ruby>魁<rp>(</rp><rt>wang</rt><rp>)</rp></ruby>
    <ruby>魁<rp>(</rp><rt>liang</rt><rp>)</rp></ruby>
</body>
</html>

6.2 改变默认的文字方向（bdo元素）

bdo元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无。但是必须要有全局属性dir
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <!--使用bdo元素必须加上dir属性。该属性允许使用的值有rtl (从右到左）和ltr (从左到右）。-->
    <p>
        This is left-to-right: <bdo dir="ltr">I like oranges</bdo>
    </p>
    <p>
        This is right-to-left: <bdo dir="rtl">I like oranges</bdo>
    </p>
</body>
</html>

6.3 bdi元素

bdi元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

这个元素适用于欲显示内容的文字方向未知的情况。在这种情况下，浏览器会自动确定文字
方向，这有可能搅乱页面布局

7 其他文本元素

7.1 表示一段一般性的内容（span元素）

span元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            .fruit {
                border: thin solid black;
                padding: 1px;
            }
        </style>
    </head>
    <body>
        <!--span元素本身没有任何含义。它可以用来把一些全局属性应用到一段内容上
        这里使用了带class属性的span元素-->
        I like <span class="fruit">apples</span> and <span class="fruit">oranges</span>.
    </body>
</html>

7.2 突出显示文本（mark元素）

mark元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	mark { background-color: yellow; color: black; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body> 
        Homophones are words which are pronounced the same, but have different spellings
        and meanings. For example:
        <p>
            <!--用来表示因为与某段上下文相关而被突出显示的一段文字-->
            I would like a <mark>pair</mark> of <mark>pears</mark>
        </p>
    </body>
</html>

7.3 表示添加和删除的内容（ins元素和del元素）

ins和del元素
元素类型	身为短语元素的子元素时为短语元素，身为流元素的子元素时为流元素
允许具有的父元素	任何可以包含短语内容或流内容的元素
局部属性	cite 、datetime
内容	短语内容或流内容，取决于父元素的类型
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	ins { text-decoration: underline; } del { text-decoration: line-through; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <p>
            <!--cite属性用来指定解释添加或删除相关文字原因的文档的Url。
            datetime属性则用来设置修改时间-->
            <del>I can <mark>sea</mark> the <mark>see</mark></del>
            <ins>I can <mark>see</mark> the <mark>sea</mark></ins>
        </p>
    </body>
</html>

7.4 表示时间和日期（time元素）

time元素
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	datetirne 、pubdate
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>        
        I still remember the best apple I ever tasted.
        <!--如果布尔属性pubdate存在，那么time元素表示的是整个HTML文档或离该元素最近的
        article元素（见第10章）的发布日期。datetime属性以RFC3339规定的格式（参见http ://tools.
        ietf.org/htmJ/rfc3339 ) 指定日期或时间。有了datetime , 就能在元素中以便于阅读的形式设置日
        期或时间，同时又确保计算机能无歧义地解析指定的日期或时间。-->
        I bought it at <time datetime="15:00">3 o'clock</time>
        on <time datetime="1984-12-7">December 7th</time>. 
    </body>
</html>