文字形式
a(行内)
HTML 中的 < a>元素用于定义一个超链接到同一页上的某个位置,或者在网络上的任何其它页面。
属性:
download(HTML5):规定被下载的超链接目标。
在 < a> 标签中必须设置 href 属性。
download属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。href:这是一个必需属性,为锚定义一个超文本链接来源。
表示链接目标的URL或URL片段。- URL片段是由一个#开头,指定一个在当前文档中的目标的id。
- URL不限于网页(HTTP)的文件。URL可能使用浏览器所支持的任何协议。
您可以使用”top”特殊词来创建一个链接返回到页面顶部;
例如<a href="#top">返回顶部</ a>
的这种行为在HTML5上被指定。
hreflang:该属性用于指定被链接文档的语言。
仅在使用 href 属性时才可以指定 hreflang 属性。- 和 lang 属性类似,hreflang 属性的值也是 ISO 标准的双字符语言代码。
- 和 lang 属性不同的是,hreflang 属性不会指定标签中的内容所使用的语言,而是指定被 href 属性调用的文档所使用的语言。
media(HTML5):该属性指定目标链接的媒介类型。
它的值必须是 媒体查询. 这个属性主要是允许用户代理挑选最适合的设备,在链接到外部样式表时非常有用。ping(HTML5):用户追踪超链接将会发送的资源的URL的ping通知
- referrer:指示在获取资源时应该使用哪个提交者 (referer) 的字符串
rel:规定当前文档与被链接文档之间的关系。
该值是空格分隔的列表关系值。 该值和语义可能将会被一些权威文档编者赋予不同的含义。
在默认的情况下,如果没有其它定义,是无效的,只有在 href 存在的情况下,使用该属性。target:该属性指定在何处打开链接的资源。
- _self: 在当前页面加载。此值是默认的。
- _blank: 新窗口打开
- _ parent: 加载到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
- _ top: 加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
只有在href属性存在才能使用该属性。
- type:规定被链接文档的的 MIME 类型。
只有在href属性存在才能使用该属性。
以下是被废弃的属性:
- charset:定义链接资源的字符编码
- coords:规定链接的坐标。
- name:用于定义在页面中锚点的目标位置,但现在已经改用id
- rev: 该属性用于指定当前文档与被链接文档的关系。
rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。 - shape:规定链接的形状。
以下代码能够创建一个email链接,将用户的电子邮件程序打开,让他们发送新邮件。
这是通过一个mailto链接完成的:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
em(行内)
代表强调文字
< em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。
通常的,该元素会被浏览器展示为斜体文本
- i标签和em标签的不同
虽然二者的视觉效果相同,都为斜体。但是语义是不同的:
- em标签标示着重强调
- i标签则表示从正常的文本中区分出的文本。
strong(行内)
代表特别重要文字,一般用粗体显示
- b标签和strong标签的不同:
- strong表示一个逻辑状态,内容和表现是分离的。表示这段文字非常重要,但样式不一定是粗体,还可以规定成其他形式。
- b则表示一个物理状态,没有区分内容和表现。只是加粗了文本。
- em标签和strong标签的不同:
- strong表示一个更强的强调,或内容强烈的重要性。
- em表示重要和强调的等级没有strong高,往往只是强调一个文本片段的意思。
Strong和Em都可以分别通过嵌套来增加重要性或强调的相对强度。
small(行内)
代表注释 ,如免责声明、版权声明等,对理解文档不重要。
<small>
标签呈现小号字体效果。
<small>
标签和它所对应的 <big>
标签一样,但它是缩小字体而不是放大。
如果被包围的字体已经是字体模型所支持的最小字号,那么 <small>
标签将不起任何作用。
与 <big>
标签类似,<small>
标签也可以嵌套,从而连续地把文字缩小。每个 <small>
标签都把文本的字体变小一号,直到达到下限的一号字。
虽然small、b、i标签可能违背了表现和结构分离的原则,但这三个标签在HTML5中都是合理的。作者可以根据具体情况来判断是使用small标签还是CSS。
s(行内)
代表不准确或不相关的内容。
s标签将会为文本添加删除线的样式。
但是,s标签在指示文档编辑时并没有那么适用,最好只用del和ins元素。
cite(行内)
HTML引用标签表示一个作品的引用。它一般包含引用作品的符合简写格式的标题或者URL。
q(行内)
代表内联的引用。
这个标签是用来引用短的文本,所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote>
替代.
属性:
- cite:
这个属性的值是URL,意在指出被引用的文本的源文档或者源信息.
<p>Everytime Kenny is killed, Stan will announce
<q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
Oh my God, you/they killed Kenny!
</q>.
</p>
Everytime Kenny is killed, Stan will announce Oh my God, you/they killed Kenny! .
dfn(行内)
HTML 定义元素表示术语的一个定义。
abbr(行内)
代表省略 或缩写 ,其完整内容在 title 属性中。
data(HTML5)
time(HTML5)
用来标注日期和时间信息。
<p>The concert starts at <time>20:00</time>.</p>
属性:
- datetime:该属性表示此元素的时间和日期,并且属性值必须是一个有效的日期格式。
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
- pubdate:如果当前内容对应一个发表日期,则可以使用这个属性。
<p>This article was created on <time pubdate>2011-01-28</time>.</p>
code(行内)
HTML
<code>
元素呈现一段计算机代码.
默认情况下, 它以浏览器的默认等宽字体显示.
<p>Regular text. <code>This is code.</code> Regular text.</p>
CSS 规则可以覆盖浏览器默认的 code 标签字体样式. 但用户设置的浏览器字体选项可能会超过 CSS 的优先级, 使之无效.
var(行内)
代表代码中的变量 。
默认样式是:
var {
font-style: italic;
}
<p> A simple equation: <var>x</var> = <var>y</var> + 2 </p>
samp(行内)
代表程序或电脑的输出 。
通常使用浏览器缺省的 monotype 字体
<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>
kbd(行内)
代表用户输入 ,一般从键盘输出,但也可以代表其他输入,如语音输入。
以浏览器的默认monospace字体显示。
当
<kbd>
元素处于<samp>
元素之中时,它代表着被系统回显的输入。当
<kbd>
元素中包含<samp>
元素时,该输入是基于系统输出的,比如调用某个菜单项。当
<kbd>
元素处于另一个<kbd>
元素之中时,它代表了一个实际的按键,或是该输入机制下的某个单位输入。
sub、sup(行内)
分别代表下标和上标
i(行内)
代表一段 不同性质 的文字,如技术术语、外文短语等。
它的内容通常以斜体显示。
在较早版本的HTML技术参数声明中, <i>
标签只是一个用于将文本显示为斜体的表示性元素, 很像 <b>
标签被用来将文本显示为粗体。
现在情况不再是这样了,因为这些标签现在定义了更多的语义而不只是排版外观。<i>
标签应表现一系列带有不同语义的文本,而它的典型样式显示为斜体。
该元素只在没有更适合的语义元素表示时使用。例如:
- 使用
<em>
表示强调或重读。 - 使用
<strong>
表示重要性。 - 使用
<mark>
表示相关性。 - 使用
<cite>
标记著作名,如一本书、剧本或是一首歌。 - 使用
<dfn>
标记术语的定义实例。
b(行内)
HTML
<b>
元素表示相对于普通文本字体上的区别,但不表示任何特殊的强调或者关联。
一般显示为粗体
- 不要将
<b>
元素和<strong>、<em>
以及<mark>
元素混淆。
<strong>
元素明确表示文本很重要<em>
元素在文本上添加强调<mark>
元素明确表示文本的相关性。
<b>
元素并不包含这些特殊的语义信息,应当仅仅当其他元素都不合适时使用它。
- 类似的,也不要用
<b>
元素来标记标题。如果需要表示标题,请使用<h1>
到<h6>
标签。此外,可以通过样式表来改变这些元素的的默认样式,结果就是它们并不一定都是粗体。 - 通过在
<b>
元素上添加 class 属性来表示额外的语义信息是一个很好的方式(例如<b class="lead">
来表示段落中的第一句)。这使得网页文档的样式开放变得轻松,并且不用修改 HTML 代码。 - 以前
<b>
元素的意思就是让文本变成粗体。但从 HTML4 开始,不赞成标签表示样式信息,于是<b>
元素的含义发生了变化。 - 如果不是出于语义目的而使用
<b>
元素,那么让文本显示粗体更好的方式是使用 css 属性 font-weight 并且设置值为 bold。
u(行内)
代表一段需要下划线呈现的文本注释
mark(HTML5)
代表突出显示的文字。
浏览器会给mark中的文本添加黄色背景。
- 不要为了语法高亮而用
<mark>
元素; 你应该用<strong>
元素来实现这个目的(语法高亮)。 - 不要把
<mark>
元素和<strong>
元素搞混淆.<strong>
元素用来表示文本在上下文的重要型的, 而<mark>
元素是用来表示上下文的关联性的.
<p>The <mark> element is used to <mark>highlight</mark> text</p>
ruby(HTML5)
用来展示东亚文字注音或字符注释。
rt(HTML5)
代表ruby 注释 ,如中文拼音。
rp(HTML5)
代表 ruby 注释两边的额外插入文本 ,用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
以上三个标签通常一起使用:
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
bdi(HTML5)
代表需要脱离父元素文本方向的一段文本。
它允许嵌入一段不同或未知文本方向格式的文本。
<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>
bdo(行内)
指定子元素的文本方向 ,显式地覆盖默认的文本方向。
属性:
- dir:这个标签包含文本的文本方向.属性值可为:
- ltr: 从左往右写,与现代汉语的书写习惯相同.
- rtl: 从右往左写,与古代汉语书写习惯相同.
- auto: 自动,由浏览器决定文字的排列方向.
<!-- Switch text direction -->
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
span(行内)
代表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素。
应该在没有其他合适的语义元素时才使用它。<span>
与<div>
元素很相似,但<div>
是一个 块元素 而<span>
则是 行内元素 .
br(行内)
代表换行
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
wbr(HTML5)
代表建议换行 ,当文本太长需要换行时将会在此处添加换行符。
<p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>