标记文字

[TOC]

元素速览

元素 说明 类型 新增或有无变化
a 生成超链接 短语、流 有变化
abbr 缩略语、缩写 短语 无变化
br 换行 短语  无变化
cite 表示其它作品的标题 短语 有变化
dfn 表示术语定义 短语 无变化
em 表示着重强调一段文字 短语  无变化
strong 表示重要内容 短语 无变化
span 一个没有自己语义的通用元素。可以用在一些希望引用全局属性却不想引入额外语义的地方 短语 无变化
b 不带强调或着重意味地标记一段文字 短语 有变化
u 不带强调或着重意味地标记一段文字 短语 有变化
i 表示与周边内容秉性不同的一段文字,例如来自另一种语言的词语,科学术语 短语 有变化
ins 表示加入文档的文字 短语、流 无变化
del 表示从文档中删除的文字 短语、流  新增
mark 表示一段因与上下文中另一词语相关而被突出显示的内容 短语 新增
q 表示引自它处的内容 短语 无变化
rp 与ruby元素结合使用,标记括号 短语 新增
rt 与ruby元素结合使用,标记注音符号 短语 新增
ruby 表示位于表意文字上方或右方的注音符号 短语 新增
s 表示文字已不再准确 短语 有变化
small 表示小号字体 短语 有变化
sub 表示下标文字 短语 无变化
sup 表示上标文字 短语 无变化
time 表示时间或日期 短语 新增
code 表示计算机代码片段 短语  无变化
kbd 表示用户输入内容 短语 无变化
samp 表示计算机程序的输出内容 短语  无变化
var 表示程序或计算机中的变量 短语 无变化
wbr 表示可以安全换行的地方 短语 新增
bdo bdi 文本方向和隔离 短语 -

a 表生成超链接

超链接是一种跳转方式,当用户点击超链接的标签时,浏览器会将显示跳到标签链接到的地方。 用于页面跳转(站内或站外)和页内跳转。

元素 a
元素类型 包含短语原始时被视为短语元素,包含流元素时,被视为流元素。
父元素 可以包换短语元素的任何元素。
局部属性 href、hreflang、medai、rel、target、type
内容 短语内容和流内容
标签用法 双标签
html新增
HTML5中变化 现在既能包含短语内容又能包含流内容。包含流内容,恢复H4中被启用的target属性。其他属性不再使用。
默认样式 a:link, a:visited {color:blue; text-decaration: underline; cursor:auto; }
默认样式 a:link:active, a:visited:active {color:blue; }
  • href: 指定连接到的URL或标签ID值
  • hreflang: 说明所连接资源使用的语言
  • media:说明连接资源用于那种设置,该属性使用的值和head中style元素的media属性相同。
  • rel: 说明连接文档和连接资源的关系类型,与head中link元素的rel属性相同。
  • target: 指定所打开资源的浏览器环境。
  • 说明所连接资源的MIME类型。

a 标签不能嵌套,因为当你点击时浏览器不知道你要跳转那个链接。所以当嵌套时,浏览器会以为出错了,将内部的a标签拆分出来,并列显示。就会出现奇怪的文档结构变了的的现象。

url 不一定都要指定其他网页。尽管URL使用最多的是HTTP协议,但浏览器也支持一些其他协议(如ftp何email)。如果想引用一个邮箱地址,可以使用mailto协议。如 mailto:[email protected]

使用img也可以生成基于图像的超链接。 页面内跳转使用cssid选择器的格式:#id名。如果找不到id值,浏览器将再查找一次name属性值与其匹配的元素。

target 支持的属性值与form 的target 一致。这里不再重复。

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

b 表示关键词和产品名称

标记一段文字但并不表示特别的强调或重要性。H5给出的例子是文章中提到的关键词或产品评论中的产品名称。

元素 b
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 重新定义语义,呈现被降级为默认样式
默认样式 b {font-weight: border; }

em 加以强调

加以强调,可以向读者提供关于句子或段落的含义的一种语境。

元素 em
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 无
默认样式 em {font-weight: italic; }

考虑em元素的方式就是对句子进行提问,回答,需要重读的部分。

i 表示外文词语和科技术语甚至某人的想法(与言语相区别)

表示一段文字和其他内容有本质区别。

元素 i
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 H4 中只具有斜体的含义,H5将其降级为默认样式。并为其添加了语义。
默认样式 em {font-weight: italic; }

s 表示不准确或校正

表示其含义以不再准确,想要删除。默认样式表现为一个中划线删除。 元素 | s -------- | ---- 元素类型 | 短语。 父元素 | 可以包换短语元素的任何元素。 局部属性 | 无 内容 | 短语内容 标签用法 | 双标签 html新增 | 否 HTML5中变化 | H4 中只具有斜体的含义,H5将其降级为默认样式。并为其添加了语义。 默认样式 | em {text-decoration: line-through; }

strong 表示重要的文字

元素 strong
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 无
默认样式 strong {font-weight: border; }

u 不突出重要性或强调

仅样式有一个默认的下划线,保留下来是为了兼容历史上的文档中使用了改元素。因为现实样式有点和a类似,容易引起用户的误解,也是应该尽量避免在非链接的地方使用下划线。完全没有任何作用,完全可以用span代替。可以设置更多的样式。

small 用于免责声明、澄清说明、补充说明

例如用于一句话中对关键词或关系的补充说明的括号中的内容。默认样式为小号字体。

元素 strong
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 H4 中只具有小号字体的含义,H5将其降级为默认样式。并为其添加了语义。
默认样式 strong {font-size:small; }

sub sup 添加下标和上表

在数学表达式中会经常用到

元素 sup sub
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 无
默认样式 sub {vertical-align: sub; font-size: smaller; } sup {vertical-align: super; font-size: smaller; }

br、wbr 换行

br 会在插入的地方形成一个换行。 而wbr换不换行有浏览器决定,它表示长度超过浏览器的窗口是,适合再次换行,只不过是对恰当换行位置的建议而已。

元素 br wbr
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 无
标签用法 虚标签形似
html新增 wbr为新增
HTML5中变化 无
默认样式

br 只适合用在换行也是内容的一部分的情况,切勿用它来制造段落或别的内容组,那是其他元素的任务。

跟程序相关的四个标签

它们没有局部属性,也不是H5新增的。

元素 说明 默认样式
code 计算机代码片段 code {font-family: monospace; }
var 变量或用于插入值的占位符 var {font-style: italic; }
samp 表示程序或计算机的输出 samp { font-family: monospace; }
kbd 表示用户输入 kdb {font-family: monospace; }

文章、论文等可以文献相关的标签

abbr:缩写

dnf:定义术语

q:引自它处的内容

cite:表示所引用作品(图书、文章、电影、十个)的标题

元素 abbr、dnf、q
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性 abbr和dnf的全局属性title具有特殊含义: attr必须设置为完整术语。dnf必须设置为所定义术语;q具有 cite 属性指定原文章的URL;
内容 abbr:短语元素; dnf: 文字或一个abbr元素
标签用法 双标签
html新增
HTML5中变化 无;cite 元素不能在用来引用人名,只能表示标题。
默认样式 q {display: inline; } q:before {content:open-quote; } q:after {content:close-quote; } cite {font-style: italic; }

使用语言元素,为使用非西方语言提供支持

ruby 语言支持 rt 和 rp

注音符号(ruby character)是用来帮助读者掌握表意语言(如汉语和日语)文字正确发音的符号,位于这些文字的上方或右方。ruby表示一段包含注音符号的文字。

元素 ruby
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容以及rt(注音符号)和rp(用于标记不支持注音符号特性的浏览器显示在注音前后的括号)元素
标签用法 双标签
html新增
HTML5中变化 无
默认样式 ruby {text-indent: 0; }

bdo指定内容中文字的方向。

元素 bdo
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性 无,但必须要有全局属性dir
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 无
默认样式

dir:rtl right to left; ltr:left to right

bdi 一段出于文字方向原因而与其他内容隔离来的文字。

适用于显示的内容文字方向位置的情况。这种情况下浏览器会自动确定文字方向。这有可能搅乱页面布局。 元素 | bdi -------- | ---- 元素类型 | 短语。 父元素 | 可以包换短语元素的任何元素。 局部属性 | 无 内容 | 短语内容 标签用法 | 双标签 html新增 | 是 HTML5中变化 | 无 默认样式 | 无

其他元素

span 一般性的元素

主要作用是应用全局属性,添加样式

元素 span
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 无
默认样式

mark 相关文本突出显示

表示因与某段上下文相关而突出显示的一段文字。

元素 mark
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 无
默认样式 mark {background-color: yellow; color: black; }

ins del 表示添加和删除的文字

元素 ins
元素类型 跟父元素相同
父元素 短语或流元素
局部属性 cite、datetime
内容 短语内容或流内容,取决于父元素的类型
标签用法 双标签
html新增
HTML5中变化 无
默认样式 ins {text-decaration: underline; }
元素 del
元素类型 跟父元素相同
父元素 短语或流元素
局部属性 cite、datetime
内容 短语内容或流内容,取决于父元素的类型
标签用法 双标签
html新增
HTML5中变化 无
默认样式 ins {text-decaration: line-through; }

cite: 解释添加或删除相关文字的原因的文档的URL。 datatime: 设置修改时间

 time 表示时间和日期

元素 time
元素类型 短语。
父元素 可以包换短语元素的任何元素。
局部属性 datetime, pubdate
内容 短语内容
标签用法 双标签
html新增
HTML5中变化 无
默认样式

如果pubdate属性存在,那么time 表示真个文档或离该元素最近的artical元素内容的发布日期。

  • datetime: 格式使用RFC3399 规定个格式。用户内容显示任何格式内容,浏览器又能够无歧义的解析指定的日期和时间。

results matching ""

    No results matching ""