内敛文本语义(HTNL)

地址(在其后面加上需要查找的元素):https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/

内联文本语义

abbr元素

给文字添加注释

属性:title写abbr元素内包含元素的注解,当鼠标碰到时,会出现title的注解

br元素

无语义

文本中换行

bdo元素

(HTML双向覆盖元素)用于覆盖当前文本的朝向,它使得字符按给定的方向排列。

dir
这个标签包含文本的文本方向. 属性值可为:

  • ltr: 从左往右写,与现代汉语的书写习惯相同.
  • rtl: 从右往左写,与古代汉语书写习惯相同.

bdi元素

(双向隔离元素) 会隔离可能以不同方向进行格式化的外部文本。
当不知道是从什么方向嵌入文本,如来自于数据库的文本(有起数据库的文本方向)的时候,该元素是十分有用的。

dir属性不继承父元素。如果没有设置,默认值即为auto,以便浏览器根据元素内容决定元素内容的方向。

  • ltr: 从左往右写,与现代汉语的书写习惯相同.
  • rtl: 从右往左写,与古代汉语书写习惯相同.

修改属性值没有效果

b元素(语义化)

无语义元素,加粗文字

b元素——应用场合如:摘要中的关键字、评论中的产品名称,或其他典型的应该加粗显示的文字(除此之外无其它特别强调)。
在符合语义化,条件下使用,剩余情况下,使用font-weight调整字体

cite元素(语义化)

默认字体——斜体

HTML引用( Citation)标签 (cite) 表示一个作品的引用。它必须包含引用作品的符合简写格式的标题或者URL,它可能是一个根据添加引用元数据的约定的简写形式。

code元素

呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.

CSS 规则可以覆盖浏览器默认的 code 标签字体样式. 但用户设置的浏览器字体选项可能会超过 CSS 的优先级, 使之无效.

data元素(语义化)

将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的,一定要使用 time。

属性:

  • value——该属性指定元素内容对应的机器可读的翻译。

time元素

通用属性
给浏览器提供时间,给浏览器使用

用来表示24小时制时间或者公历日期,若表示日期则也可包含时间和时区。

  • 此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点。
  • datetime——该属性表示此元素的时间和日期,并且属性值必须是一个有效的日期格式,并可包含时间。 如果此值不能被解析为日期,元素不会有一个关联的时间戳.

dfn元素

默认斜体

dfn 元素标记了被定义的术语;术语定义应当在 p, section或定义列表 (通常是dt, dd对)中给出。

通过加入id="",在a元素中引用该id可以到声明id的位置
被定义术语的值由下列规则确定:

  1. 如果 dfn 元素有一个 title 属性,那么该术语的值就是该属性的值。当鼠标放到内容上,会出现title的注解
  2. 否则,如果它仅包含一个 abbr 元素,该元素拥有 title 属性,那么该术语的值就是该属性的值。
  3. 否则,dfn 元素的文本内容就是该术语的值。

em元素(语义化)

标记出需要用户着重阅读的内容, em 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。

i元素(语义化)

用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。

mark元素(语义化)

默认黄色背景,可以利用CSS属性修改

表示为引用或符号目的而标记或突出显示的文本,这是由于标记的段落在封闭上下文中的相关性或重要性造成的。

使用场景:

  • 在一个引用或者块级元素中,突出显示的文本通常是外部引用的文本,或者标记成特殊审查其他的作者很重要.
  • 在主要的文本中,突出显示的文本通常可能和用户当前活动具有某种关联性,比如搜索的结果.

strong元素(语义化)

表示文本十分重要,一般用粗体显示。

strong与b
  • strong是一个逻辑状态,而bold是一个物理状态。
  • 逻辑状态分离内容和表现形式,使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色,使用其它大小的字体、带有下划线或其他样式,而不是加粗的样式。必须要理解使用strong呈现出的表现形式不同于单纯的加粗
  • 因为bold是一个物理状态,他没有区分表现形式和内容。如果让bold做了加粗文本外的其它任何事情,都将会令人困惑而且也不符合逻辑。
  • 同样应该注意b 还有其他用途,比如想单纯地吸引注意而不增加其重要性。

kbd元素

用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示。

显示效果为 MDN 特殊显示效果,无法更改。

q元素

表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本,所以请不要引入换行符; 对于长的文本的引用请使用 blockquote 替代.
(属性cite="引用地址",给浏览器看的)
小段引用文本,自动加上双引号

rb元素

用于分隔ruby注释的基本文本组件(即正在注释的文本)。一个rb元素应该包装基本文本的每个单独的原子段。

  • Ruby 注解用于展示东亚文字的发音,例如使用日语罗马音和汉语拼音的文字。
  • rb 元素用于分隔出ruby基本文本的每个片段。
  • 虽然 rb 不是一个空元素,但是在源码中通常只包括每个元素的开始标签。 因此ruby标记就不那么复杂,也更容易阅读。在渲染版本中,浏览器也可以填充完整的元素。
  • 你需要为要注释的每个基本段(rb元素)包含一个 rt 元素。

rp元素

用于为那些不能使用 ruby 元素展示 ruby 注解的浏览器,提供随后的圆括号。

rt元素

包含字符的发音,字符在 ruby 注解中出现,它用于描述东亚字符的发音。这个元素始终在 ruby 元素中使用。

  • rp 的内容提供了应该展示的东西,通常是圆括号,以便表示 ruby 注解的存在

rp 必须位于 rt 的前面和后面

在使用rb和rt格式

正确方式:
       
       zhong
       
       guo
错误方式:(会出现guo,没有注音在国上)
       
       
       zhong
       guo

rtc元素

包含文字的语义注解,它们在 rb元素中展示。rb 元素可以拥有发音 (rt) 和语义(rtc) 注解。

ruby元素

被用来展示东亚文字注音或字符注释。


(zhong)(guo)

s元素

默认样式删除线,代表内容被删除

例如:ssssssssssssss

使用删除线来渲染文本。使用 s 元素来表示不再相关,或者不再准确的事情。但是当表示文档编辑时,不提倡使用 s ;为此,提倡使用 del和 ins 元素。

samp元素

用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 Lucida Console)

small元素

嵌套使用会使字体越来越小

  • 將使文本的字体变小一号。(例如从大变成中等,从中等变成小,从小变成超小)。
  • 在HTML5中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则,包括版权和法律文本。

span元素

短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。

  • span 与 div 元素很相似,但
    • div 是一个 块元素
    • span 则是 行内元素

sub元素

下标

有些浏览器不支持MathML;

MathML msub元素用于将下标附加到表达式。
MathML msup元素用于将上标附加到表达式。
MathML msubsup元素用于将下标和上标一起附加到表达式。
使用以下语法:

 base subscript 
 base subscript 
 base subscript superscript 

定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更低并且更小。

  • 这个元素应该只用于排版目的,也就是改变文本的位置会改变含义,例如在数学中(可以考虑使用 MathML——(W3c规定的数学符号编码) 公式)或者化学符号水( H2O)。
  • 这个元素不能用于样式上的目的,比如产品名称 LaTeX 的样式,这时应该使用 CSS样式: vertical-align 属性的 sub 值能实现相同效果。

sup元素

上标

定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更高并且更小。

  • 这个元素应该只用于排版目的,也就是改变文本的位置会改变含义,例如在数学中(f4,也可以考虑使用 MathML 公式)或者在法语缩写中( Mlle,Mme 或者 Cie)。
  • 这个元素不能用于样式上的目的,比如产品名称 LaTeX 的样式,这时应该使用 CSS样式: vertical-align 属性的 super 值能实现相同效果。

tt元素

该元素已废弃

产生一个内联元素,使用浏览器内置的 monotype 字体展示。这个元素用于给文本排版,使其等宽展示,就像电报那样。

u元素(语义化)

使文本在其内容的基线下的一行呈现下划线。在HTML5中, 此元素表示具有未标注的文本跨度,显示渲染,非文本注释,例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或 将文本标记为拼写错误。

  • 意思:将文本标记为应用了某种形式的非文本注释。

使用:

  1. u元素的有效用例包括注释拼写错误
  2. 不应该使用u简单地为文字加下划线,或者表示书籍的标题。
  3. 应用带下划线的外观而没有任何语义含义

var元素

默认样式斜体

标签表示变量的名称,或者由用户提供的值。

wbr元素

一个文本中的位置,其中浏览器可以选择来换行,虽然它的换行规则可能不会在这里换行。

Yahoo 代码规范 推荐 在标点之前为 URL 换行,以便避免将标点符号留在行尾,

问题

    • small元素,b 元素和 i 元素被认为违反了结构和样式分离的原则, 但是在HTML5中是允许使用这三个元素的. 读者应该自行判断使用 small 还是CSS

编辑标识

del元素

表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。标签的作用恰恰于此相反:表示文档中添加的内容。

这个标签通常(但不一定要)在文字上显示删除线。

属性:

cite
提供一个URI,其中的资源解释作出修改的原因(比如:根据某次会议讨论)。

datetime
这个属性说明修改的时间和日期,这里的时间和日期格式要符合规范。如果设置的值不符合该规范,那么它将没有任何意义。

ins元素

默认样式下划线

定义已经被插入文档中的文本。

属性见

cite 属性的值指向一个文档的 URL,该文档解释了文本被插入或修改的原因。(目前该属性还没有被主流浏览器支持)

datetime
该特性指示的此修改发生的时间和日期,并且该特性的值必须是一个有效的日期或者时间字符串。如果该值不能被解析为日期或者时间,则该元素不具有相关联的时间标记。

你可能感兴趣的:(内敛文本语义(HTNL))