行测 Docker UI Automator 短视频开发 整数转换 leetcodeLCP docker容器 input dynamic paypal flexbox io electron Way.js centos查看python版本 linux查看jdk安装路径 linux查看防火墙 linux重启mysql python内置库 python异常 javalist数组 java日期转时间戳 python输入数字 微信小程序提示框 winhex使用教程 3dmax插件神器 一件换肤 小票打印 js发送http请求 deallocate fireworks下载 方正徐静蕾字体 燃烧之血十字架 vc运行库合集 ipad内存怎么清理 拼多多推广软件 只狼钟 python游戏编程 ae合并图层 凯立德地图包下载
当前位置: 首页 > 学习教程  > 编程学习

【格式标签】

2021/1/9 2:13:57 文章标签: 轴号标注规范

格式标签1. 格式标签1.1 格式标签1.2 HTML5 中的格式标签1.3 ★ acronym [已废弃] 定义 首字母缩写1.4 ★ abbr 定义 简称 或缩写1.5 ★ address 定义 文档或文章的 作者/拥有者 的 联系信息1.6 ★ tt i b big small 规定 字体样式的 元素1.7 ★ bdi 设置 隔离 文本的方向⑴ di…

格式标签

  • 1. 格式标签
    • 1.1 格式标签
    • 1.2 HTML5 中的格式标签
    • 1.3 ★ acronym [已废弃] 定义 首字母缩写
    • 1.4 ★ abbr 定义 简称 或缩写
    • 1.5 ★ address 定义 文档或文章的 作者/拥有者 的 联系信息
    • 1.6 ★ tt i b big small 规定 字体样式的 元素
    • 1.7 ★ bdi 设置 隔离 文本的方向
      • ⑴ dir 属性: 文本方向 左向右/右向左 (枚举属性,双向隔离 文本)
    • 1.8 ★ bdo 覆盖重写 默认的 文本方向
      • ⑴ dir 属性: 文本方向 从左到右/从右到左 (覆盖,枚举属性)
    • 1.9 ★ blockquote 定义 块引用(长的引用)
      • ⑴ cite 属性: 引用来源 地址 url (主流浏览器 不支持)
      • 1.9.1 ★ q 定义 短的引用
    • 1.10 短语元素
      • 1.10.1 ★ em 表示 强调的内容
      • 1.10.2 ★ strong 表示 强调的程度 更强的内容
      • 1.10.3 ★ dfn 表示 术语或短语 的 定义
        • ⑴ title 属性: 被定义的术语
      • 1.10.4 ★ code 表示 计算机源代码
      • 1.10.5 ★ samp 表示 计算机程序的输出 的示例(或引用)
      • 1.10.6 ★ var 表示 变量的名称 或 用户提供的值
      • 1.10.7 ★ kbd 定义 从键盘 键入的文本
      • 1.10.8 ★ cite 表示引用文本 所在的作品名
    • 1.11 ★ progress 表示 任务的进度(进程)
    • 1.12 ★ meter 定义 已知范围 或分数值内 的 标量值
    • 1.13 ★ pre 定义 预格式化的文本
    • 1.14 ★ sup 定义 上标 文本
    • 1.15 ★ sub 定义 下标 文本
    • 1.16 ★ wbr 规定 在文本中的何处 适合换行
    • 1.17 ★ mark 定义 带有记号的文本 / 突出显示的文本
    • 1.18 ★ ruby, rp 不支持汉字注音 的浏览器 所显示的 回退圆括号
    • 1.19 ★ rt 定义 字符的 发音或翻译
    • 1.20 ★ strike [已废弃] 给文本 加删除线 (用 del 标签替代)
    • 1.21 ★ time 定义 公历的时间或日期
      • ⑴ datatime 属性: 日期和时间 (YYYY-MM-DDThh: mm: ssTZD 格式)
      • ⑵ pubdate 属性: 指定当前时间为 发布日期 (布尔属性)
  • 结束语

1. 格式标签

1.1 格式标签

标签名用于
<acronym>已废弃. 定义只取 首字母的缩写。使用<abbr>标签代替.
<abbr>定义 缩写。
<address>定义 文档作者或拥有者的联系信息。
<b>定义 粗体文本。
<bdo>定义 文字方向。
<big>定义 大号文本。
<blockquote>定义 长的引用。
<center>已废弃. 不赞成使用。定义 居中文本。
<cite>定义 引用(citation)。
<code>定义 计算机代码文本。
<del>定义 被删除文本。
<dfn>定义 定义项目。
<em>定义 强调文本。
<font>已废弃. 不赞成使用。定义文本的字体、尺寸和颜色
<i>定义 斜体文本。
<ins>定义 被插入文本。
<kbd>定义 键盘文本。
<pre>定义 预格式文本。
<progress>定义 任何类型的 任务的进度。
<q>定义 短的引用。
<s>已废弃. 不赞成使用。定义 加删除线的文本。
<samp>定义 计算机代码样本。
<small>定义 小号文本。
<strike>已废弃. 不赞成使用。定义 加删除线文本。
<strong>定义语气更为强烈的强调文本。
<sup>定义 上标文本。
<sub>定义 下标文本。
<tt>定义 打字机文本。
<u>已废弃. 不赞成使用。定义 下划线文本。
<var>定义 文本的变量部分。

1.2 HTML5 中的格式标签

标签名用于
<bdi>html5标签,定义 文本的文本方向,使其脱离其周围文本的方向设置。
<mark>定义 有记号的文本。
<meter>定义 预定义范围内的度量。
<rp>定义 若浏览器不支持 ruby 元素显示的内容。
<rt>定义 ruby 注释的解释。
<ruby>定义 ruby 注释。
<time>定义 日期/时间。
<wbr>定义 单词换行时机。

1.3 ★ acronym [已废弃] 定义 首字母缩写

  • 如何定义 首字母缩写 ?
    • 使用 <acronym>首字母缩写 标签
    • ['ækrənɪm]
    • 不要使用: 这个特性 已经过时废弃了。尽管它在一些浏览器中 仍然可以工作,但它的使用 是不被鼓励的,因为它可以随时被删除。尽量避免使用它。
    • 表示: 组成缩写词的字符序列 或一个词的缩写。该元素已在 HTML5 中删除。
    • 替代 : 使用<abbr>标签代替
  • 注意
    • HTML5 中 支持 <acronym> 首字母缩写 标签 吗 ?
      • 不支持 .使用 <abbr> 缩写 标签代替。
  • 使用
    • 缩写 能够作为单词 来朗读吗 ?
      • 是的 . 例如 NATO, NASA, ASAP, GUI。
    • 对缩写 进行标记,有什么用 ?
      • 可以为浏览器、拼写检查和搜索引擎 提供有用的信息。
  • 提示和注释
    • 提示:如何在鼠标指针 移动到元素上时 显示出 缩写的完整版本 ?
    • 信息提示: 使用 title 标题信息提示 属性
    • 注释:IE 5.5 或更早版本的 IE 浏览器 不支持 <acronym> 首字母 缩写标签。
  • 关于 <acronym> 首字母缩写 标签, HTML 4.01 与 HTML5 之间的差异
    • HTML5 中不支持 <acronym> 首字母缩写 标签,在 HTML 4.01 中支持。
<acronym title="World Wide Web">WWW</acronym>

在这里插入图片描述


1.4 ★ abbr 定义 简称 或缩写

  • 如何 定义简称 或缩写 ?比如 “WWW” 或 “NATO”
    • 使用 <abbr> 缩写 标签
      • abbreviation [əˌbrivɪ’eʃən]
    • 表示: 用来封装 一个缩写 或首字母缩略词,并提供了 该术语的完整扩展(包含在title属性中).
      • 替代性: <abbr> 包含了<acronym>标签的功能,所以后者废弃了,被<abbr>替代了
      • 完整描述:可选的 title 属性 可以 为缩写 提供 扩展 或描述。如果存在,title 标题属性 必须包含完整的描述 或缩写的扩展。
      • 工具提示文本: 当鼠标光标悬停 在元素上时,浏览器 通常将此文本 作为工具提示显示。
        • title属性 是全局属性,在这个<abbr>标签中 有特别的语义
    • 对缩写 进行标记 有什么用处 ?
      • 能够为 浏览器、拼写检查 和搜索引擎 提供有用的信息。
  • <abbr> 缩写标签 最初是在 哪个版本的 HTML 中引入的 ?
    • HTML 4.0 中引入的
  • 如何表示 所包含的文本 是一个 更长的 单词 或短语 的缩写形式 ?
    • <abbr> 缩写 标签
  • 提示和注释
    • 提示:如何在 鼠标指针移动到 <abbr> 缩写元素上时 显示 出简称/缩写的完整版本 ?
    • 可以在 <abbr>缩写 标签中使用 全局的 title 标题信息提示 属性
      • 同 acronym-title属性,该标签已废弃.
  • IE 6 或更早版本的 IE 浏览器支持 <abbr> 缩写标签吗 ?
    • 不支持.
  • 使用说明
    • 不用标记 所有缩写: 不需要使用<abbr>缩写 标签 标记所有缩写。需要使用缩写标签的情况 ↓:
      • 需要提供 缩写的扩展: 如果使用缩写,并且希望 在文档内容流之外 提供扩展或定义,可以使用<abbr>标签,并使用title属性 提供需要的扩展内容。

      • 陌生缩写: 要定义 读者可能不熟悉的缩写,可以使用<abbr>和提供定义的title属性 或内联文本来 表示该术语。

      • 特别的缩写: 当需要 在语义上 注意文本中的缩写时,可以使用 <abbr>标签。这可以反过来 用于样式化 或脚本编制目的。

      • 搭配<dfn>定义标签: 为缩略语 或首字母缩写词 建立定义。


  • 示例1: 标记缩写词 并提供完整的扩展
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

在这里插入图片描述


  • 示例2: 正式定义 一个缩写
    • dfn> abbr
<p>
<dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr></dfn>
 是一种标记语言,用于创建 web页面的 语义和结构。</p>

在这里插入图片描述


  • 示例3: 首次使用 完整拼写. 第一次在页面上 使用缩写词时 就把它完整地拼写出来,这有助于 帮助人们理解它,尤其是 如果内容是 技术术语 或行业术语。
<p>JavaScript Object Notation (<abbr>JSON</abbr>) 是一种 轻量级 数据交换格式。</p>

在这里插入图片描述

  • JavaScript Object Notation
    • 数据交换格式: JavaScript 对象表示法 是一种 轻量级 数据交换格式。

1.5 ★ address 定义 文档或文章的 作者/拥有者 的 联系信息

  • 如何定义文档 或文章作者/拥有者联系信息 ?

    • 使用<address> 联系信息 标签
  • 如何表示 文档的 联系信息 ?

    • <address> 联系信息 元素位于 <body> 主体 元素内
    • 个人 和组织的联系信息: <address>元素 表示所附的HTML 提供了 个人或组织的联系信息。
    • 可包含的 联系信息的类型: <address>元素的内容 提供的联系信息,
    • 可以包含 所需的 任何类型的联系信息,例如
      • 物理地址、URL、电子邮件地址、电话号码、社交媒体句柄、地理坐标 等等。
      • 名称: <address>元素应该包括 联系人信息 所指向的人 或组织的名称。
      • 企业的联系信息: <address>可以在 多种内容中 使用,例如 在页眉中 提供 企业的联系信息
      • 文章的作者: 通过在<article>中包含<address>元素 来指示 文章的作者
  • <address> 联系信息 元素中的文本 浏览器中 通常呈现为什么样式 ?

    • 斜体。
  • 大多数浏览器会在 <address> 联系信息 元素的前后 添加换行吗 ?

    • 会添加换行。(即,会单独占一行)
  • 注意事项-用法说明

    • <address> 联系信息 标签应该用于 描述一般的通讯地址吗 ?
      • 不应该 .只有联系信息的通讯地址 才用<address>标签 。
      • 当表示一个 和联系信息 无关的任意的地址时,请改用 <p>元素而不是 <address> 元素。
    • <address> 联系信息元素 一般放在哪个标签中 ?
      • <footer> 页脚 元素中。
    • 适用范围: 这个元素不能包含 除联系信息之外的任何信息,比如 出版日期(这应当 被包含在<time> 元素之中)。
  • 关于<address>联系信息 标签, HTML 4.01 与 HTML5 之间 有什么区别 ?

    • HTML 4.01 不支持 <article> 标签
      • 因此在 HTML 4.01 中,<address>标签始终定义 文档作者/拥有者的 联系信息。
      • H5 中 可以表示 文档的联系信息,也可以表示 文章的联系信息
  • 示例1: 表示网页作者

<p>联系本页的作者:</p>

<address>
 邮箱: <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  电话: <a href="tel:+13115552368">(311) 555-2368</a>
</address>

在这里插入图片描述


1.6 ★ tt i b big small 规定 字体样式的 元素

  • 规定 字体样式 元素 有哪些 ?
    • <tt> <i> <b> <big> <small> 标签
  • 推荐使用标签 来改变文本的样式吗?
    • 不推荐 . 建议使用 样式表 CSS 来控制样式 .
      • 废弃的样式标签 不要再使用
      • 带语义的样式标签,可以再使用,但偏于语义,而不是样式.
标签名用于
<tt>已废弃. 呈现类似 打字机或者等宽 的 文本效果。使用浏览器内置的 monotype 字体展示。这个元素用于 给文本排版,使其等宽展示,就像 电报那样。带有 CSS 的 <code>或者<span>来代替
<i>带语义的 斜体: 显示 斜体 文本 效果。❶ <i>用于表现 因某些原因 需要 区分普通文本 的一系列文本。例如 技术术语、外文短语 或是小说中人物的思想活动等,它的内容 通常以斜体显示.❷ 只在 没有 更适合的语义元素 表示时 使用。 ❸ 带语义: 定义了更多的语义 而不只是排版外观。<i>标签应表现 一系列 带有不同语义的文本,它的典型样式 显示为斜体。这意味着 浏览器通常任会将内容 显示为斜体,但是,根据定义,不再是必须的。
<b>带语义的 粗体: 呈现 粗体文本 效果。❶ 不应将<b>元素用于显示粗体文字;❷ 替代方案: 是使用 CSS font-weight="bold"属性 来创建粗体文字。❸ 添加语义信息: 在<b> 元素上添加 class类 属性 来表示额外的语义信息 是一个很好的方式(例如<b class="lead"> 来表示段落中的第一句)。这可以 在样式需要变动的情况下 更轻松地处理不同应用场合的<b>元素,无须改动HTML。❹ 不是出于 语义信息的目的 不要使用<b>标签
<big>已废弃. 呈现 大号字体效果。(<big>) 会使字体加大一号(例如 从小号(small) 到中号(medium),从大号(large) 到加大(x-large)),最大 不超过浏览器的 最大字体。 该元素在 HTML5 中 已经被移除,不应当再使用。取而代之,网页开发者 应当使用 CSS font-size:1.2em;属性。
<small>带语义的 小一号字体: ❶ 使文本的字体 变小一号。(例如 从大 变成中等,从中等 变成小,从小 变成超小)。❷ 版权和法律文本: 在HTML5中,除了它的样式含义,这个元素 被重新定义为 表示边 注释 和附属细则,包括版权 和法律文本。❸ 仅表示样式时,使用 css font-size:0.8em
 
<p>这是普通文本<tt> ,这是 tt 等宽文本</tt></p>
<p>这是普通文本<i> ,这是 i 斜体文本</i></p>
<p>这是普通文本<b> ,这是粗体文本</b></p>
<p>这是普通文本<big> ,这是 big 大号文本</big></p>
<p>这是普通文本<small> ,这是 small 小号文本</b></p>

在这里插入图片描述

  • 使用标签,优先以语义为主
    • 使用什么 表示 标题 ?
      • 使用 <h1> - <h6>一级到六级的 内容标题 标签
    • 使用什么 表示 强调的重点文本 ?
      • 使用 <em> 强调 标签
    • 使用什么 表示 更重要的文本 ?
      • 使用 <strong>更强调 标签
    • 使用什么 表示标注的 突出显示的文本 ?
      • 使用 <mark> 记号 标签
    • 使用什么 设置 粗体文本 ?
      • 使用 CSS 的 font-weight字体粗细 属性
      • 不建议使用<b> 粗体标签
  • 使用说明
    • 使用选择: 尽管<small>元素,<b>元素和<i>元素被认为 违反了 结构和样式分离的原则, 但是在 HTML5 中是 允许使用 这三个元素的. 应该自行判断使用 标签 还是CSS

  • 示例1: 使用<i>语义斜体 元素 标记 另一种语言的文本
<p>拉丁短语 <i class="latin">Veni, vidi, vici</i> 在音乐、艺术和文学中经常被提及。</p>

在这里插入图片描述


1.7 ★ bdi 设置 隔离 文本的方向

  • 如何设置 文本的方向 ?

    • 使用 <bdi> 双向隔离文本 标签
    • 双向隔离元素
      • bdi 指的是 bidirectional Isolate element
      • bdi 双向隔离。
    • 隔离处理文本: 告诉浏览器的双向算法 将其包含的文本 与周围的文本 隔离处理。
      • 当一个网站 动态地插入一些文本 而不知道插入文本的方向时,它尤其有用。
      • 双向文本 : 双向文本是 可以同时包含 从左到右排列 的字符序列(LTR) 和 从右到左排列 的字符序列(RTL)的文本,例如 嵌入在英语字符串中的 阿拉伯语引号。
      • 双向算法: 浏览器实现 Unicode 双向算法(Unicode Bidirectional Algorithm) 来处理这个问题。
        • 双向算法的 隐式方向: 在该算法中,字符具有隐式方向性:
          • 例如,拉丁字符被视为 LTR,而阿拉伯字符 被视为 RTL。
          • 其他一些字符(如空格 和一些标点符号)被视为 中性字符,并根据 其周围字符的方向 分配方向性。
      • 双向隔离: <bdi>元素用于 包装文本的范围,并指示 双向算法 将该文本 与其周围环境隔离。这在两方面起作用:
        • 不影响: <bdi>嵌入文本的方向性 不影响 周围文本 的方向性。
        • 不受影响: <bdi>嵌入文本的方向性 不受 周围文本 方向性的影响。
  • CSS<bdi>标签的选择

    • 优先选择标签:
      • 虽然使用 CSS 规则unicode-bidi: isolate;也可以实现相同的视觉效果
      • 语义性: 不应该使用这种CSS方法,因为它 不是语义的,浏览器 可以忽略 CSS样式。
  • 一般用在哪里 ?

    • 在发布用户评论 或其他 您无法完全控制的内容时
  • <bdi> 双向 标签 有哪些 浏览器支持 ?

    • 目前只有 Firefox 和 Chrome 支持 <bdi> 双向隔离 标签
      在这里插入图片描述
  • 关于<bdi> 双向 标签 ,HTML 4.01 与 HTML 5 之间的差异

    • <bdi> 双向标签是 HTML5 中的新标签,所以浏览器支持不好.

⑴ dir 属性: 文本方向 左向右/右向左 (枚举属性,双向隔离 文本)

  • <bdi> 双向 标签的 属性
    • 使用什么属性 设置方向 ?
      • bdi-dir 方向属性
    • bdi-dir方向 属性 的属性值 有哪些 ?
      • bdi-dir="ltr | rtl | auto"
      • 左向右: ltr
      • 右向左: rtl
      • 自动: auto 默认值
  • <bdi> 双向隔离文本 标签和 dir 方向属性的区别
    • 一个是 隔离标签,一个是 方向属性
    • 都是关于方向的
    • dir属性 不继承父元素。如果没有设置,默认值即为auto,以便浏览器 根据元素内容 决定 元素内容的方向。

  • 示例1: 使用和不使用 <bdi> 双向隔离文本的区别
<p>不使用 bdi 双向隔离文本 标签</p>
<ul>
 <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
 <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>
<p>不使用 bdi 双向隔离文本 标签</p>
<ul>
 <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
 <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

在这里插入图片描述

  • 默认是 rtl 文本 对周围文本的影响: 其中一个获胜者的 阿拉伯语名字 由 默认是RTL文本 组成,在这种情况下,由中性 或弱方向性的字符组成的“- 1”将采用 RTL文本的方向性,结果将被打乱
  • 隔离 默认文本方向的影响: 对这默认是 rtl文本的名字 采用双向隔离<bdi>,则不会影响后面的中性 弱方向性的文本

1.8 ★ bdo 覆盖重写 默认的 文本方向

  • 如何 覆盖 默认的 文本方向 ?
    • 使用 <bdo> 双向重写 标签
    • 重写文本方向: 重写 当前文本的方向性,以便 将其中的文本 呈现为不同的方向。
      • 给定方向的起点 开始: 文本的字符 是从给定方向的起点 绘制的;单个字符的方向 不受影响(例如,单个字符不会变反)。
    • bdo
      • bidirectional text override
      • 双向文本覆盖 元素
  • <bdo> 双向重写 标签的浏览器支持
    • 所有浏览器 都支持 <bdo>双向重写 标签。

⑴ dir 属性: 文本方向 从左到右/从右到左 (覆盖,枚举属性)

  • <bdo> 双向重写 标签 常用的 dir方向属性
    • 文本方向:文本 在该元素内容中 呈现的方向。可能的值是:
    • bdo-dir="ltr | rtl "
    • dir 方向属性
    • bdo-dir 方向属性 的属性值
      • ltr 指示文本 应按 从左到右的方向 排列。
      • rtl 指示文本 应按 从右到左的方向 排列。

  • 示例1: 改变文本方向
<bdo>默认文本方向: Here is some Hebrew text</bdo>

<p>反向文本方向,从右到左的方向:</p>
<bdo dir="rtl">Here is some Hebrew text</bdo>
  • 第一个字符,放到最后一个字符的位置.
    在这里插入图片描述

  • 示例2: 改变特殊文本的方向
<h1>著名的海滨歌曲</h1>

<p>英文歌 "Oh I do like to be beside the seaside"</p>

<p>在希伯来语中是这样的: אה, אני אוהב להיות ליד חוף הים</p>

<p>在计算机的内存中,它被存储为 <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo></p>

在这里插入图片描述

  • 疑问点: 为什么dir=ltr 左到右方向 显示的不是默认文本方向,反而是 反向的文本方向 ?因为是特殊字符 ?

1.9 ★ blockquote 定义 块引用(长的引用)

  • 如何定义 块引用(长的引用) ?
    • 使用 <blockquote> 块引用 标签
    • Block Quotation Element
    • 表示 引用文字: HTML 块级引用元素),代表 其中的文字 是引用内容。
    • 显示- 缩进: 通常在渲染时,这部分的内容 会有 一定的缩进。
    • 原文地址cite属性: 若引文 来源于网络,则可以将 原内容的出处 URL 地址 设置到 cite属性上
    • 原文名<cite>标签: 要以文本的形式 告知读者 引文的出处时,可以通过 <cite>元素。
  • 显示
  • 浏览器会怎样显示 <blockquote> 块引用 标签的内容 ?
    • 一般会在左、右两边 进行缩进(增加左右外边距)
    • 有时会 斜体

⑴ cite 属性: 引用来源 地址 url (主流浏览器 不支持)

  • <blockquote>块引用 标签 cite引用 属性**
    • cite引用 属性的属性值 一般是什么 ?
    • blockquote-cite="url"
      • URL
      • 用于:规定引用的来源
  • 示例1: 引用文的显示
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

注意,浏览器在 blockquote 元素前后添加了换行,并增加了 左右外边距。
<p>上面是一段长引用<p>
  • 增加了 左右外边距, 有前后换行
    在这里插入图片描述

  • 示例2: blockquote-cite引用属性的实用
    • 指定了 引用的来源
    • 主流浏览器 均不支持 cite引用 属性。不过,搜索引擎可能会 使用该属性 获得更多有关引用的信息。
Here is a quote from WWF's website:

<blockquote cite="http://www.wwf.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.(世界自然基金会的最终目标是建立一个人类与自然和谐相处的未来。)
</blockquote>

We hope that they succeed.

  • 示例3: 设置一个带样式的 引用
  • 嵌套关系
  • <blockquote> cite
    • <p>
    • <footer>
      • <cite>
<head>
	<style>
		blockquote p {
			background:#eee;/*引用文的 背景色*/
			padding:15px;/*引用文的 内边距*/
		}
		
		blockquote p::before {
			content:'\201C'; /*引用文最前面 添加左双引号*/
		}
		
		blockquote p::after {
			content:'\201D'; /*引用文最后面 添加右双引号*/
		}
	
	</style>
</head>
<body>
	<blockquote cite="https://www.huxley.net/bnw/four.html">
	    <p>文字就像 x射线,如果你使用得当,它们可以穿透任何东西。你一阅读,就被刺穿了。</p>
	    <footer>— 奥尔德斯·赫胥黎(著名英国作家), <cite>美好新世界</cite></footer>
	</blockquote>

</body>

在这里插入图片描述
在这里插入图片描述


1.9.1 ★ q 定义 短的引用

  • 如何 定义 短的引用 ?

    • 使用 <q> 短引用 标签
    • 短 内联引用: <q> 短引用 元素 指示包含文本为 短内联引用。
    • 显示: 加引号: 大多数 现代浏览器 通过 在文本周围 加上引号 来实现这一点。
    • 无段落中断: 此<q>短引用 元素 用于 不需要段落中断 的简短引用;
    • 长引用: 对于长引用,使用<blockquote>块引用 标签
  • 双引号: <q> 短引用 标签的内容 , 浏览器会怎样显示 ?

    • 添加 引号,一般是双引号
    • Firefox 以及 Opera 是这样的, IE 不是.
  • <q> 短引用标签 和 <blockquote> 长引用 标签 有什么 区别 ?

    • 本质上是一样的,都是引用.
    • 用于 简短的 行内引用 用什么标签 ?
      • 使用 <q> 短引用标签
      • 总结: 短引用 = 行内 + 双引号
    • 需要表示 从周围内容 分离出来的 比较长的引用 ?
      • 通常显示为 缩进的块,使用 <blockquote> 长引用 标签。
      • 总结 : 长引用 = 内容分离 + 缩进的块
  • <q> 短引用标签的cite 引用 属性

    • 如何 规定引用的来源 ?
    • 使用 cite 引用 属性
      • 源文档 或消息: 此属性的值是一个URL,它为引用的信息 指定源文档 或消息。
      • 解释或参考信息: 此属性用于 指向解释引用内容 或引用的参考信息。
    • cite 引用 属性的 属性值
      • URL = 引用的 来源的 URL
    • cite 属性 有哪些浏览器支持 ?
      • 主流浏览器 均不支持 cite 引用属性。不过,搜索引擎可能会使用 该属性获得更多 有关引用的信息。
  • 示例1: 长引用和短引用

<p> 这是一个短引用:<q> This is a short quotation</q></p>

这是一个长引用: <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere harum quas praesentium perspiciatis sunt ipsum consequuntur, sed unde hic maxime dolore magnam! Cupiditate quod itaque tempore nobis ex minima necessitatibus.</blockquote>

在这里插入图片描述

  • 长引用和短引用的 显示
    • 短引用: 引用前后,加了 双引号
    • 长引用: 前后折行,缩进

  • 示例2: 包含一个短内联引用,短引用设置为 斜体
<head>
	<style>
		q {font-style:italic;/*短引用文本的字体样式*/}
	
	</style>
</head>
<body>
	<p>包含 一个短内联引用 的句子</p>
	<p>当戴夫要求哈尔打开舱门时,哈尔回答道 <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>
</body>

在这里插入图片描述


1.10 短语元素

  • 什么是短语元素 ?
    • 短语标签的文本 大多会呈现出 特殊的样式
    • 短语标签 都拥有 确切的语义
    • 总结 :样式+语义 = 短语元素
标签名用于
<em>强调的重点. 把文本定义为 强调的重点内容。一般显示为 斜体.
<strong>把文本定义为 语气更强的强调的内容。
<dfn>定义 一个定义项目
<code>定义 计算机代码文本。
<samp>定义 样本文本。
<kbd>定义 键盘文本。它表示文本 是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>定义 变量。您可以将此标签与 <pre><code>
<cite>定义 引用。可使用该标签 对参考文献的引用 进行定义,比如 书籍或杂志的标题

1.10.1 ★ em 表示 强调的内容

  • 如何表示为 强调的内容 ?
    • 使用 <em>强调 标签
    • emphasis 重点;强调
    • 强调的重点: (<em>) 标记出 需要用户 着重阅读的内容
    • 嵌套和强调 重点中的重点. <em>元素是可以嵌套的,嵌套层次越深,则其包含的内容 被认定为 越需要着重阅读。
    • 重点和影响意义<em>强调重点 元素 是指 与周围的文本 相比具有强调重点的单词,而周围的文本通常局限 于 一个句子的单词,并影响 句子本身的意义。
    • 重读: <em>的一个例子可以是:“Just do it already!”或者:“We had to do something about it”。阅读文本的人 或软件 会使用重音重读 斜体单词。
    • 显示斜体: 通常,此元素 以斜体显示。但是,它不应该 简单地用于 应用斜体,样式.为此使用CSS font-style属性去设置斜体。
      • 作品的标题: 使用<cite>引用 元素 标记作品的标题(书、剧本、歌曲等)。
      • 特别的 不一样的语义: 使用<i>元素表示 由于某种原因 从正常文本中分离出来的文本, 比如一个技术术语、外来词、小说人物的思想,或者当文本 引用一个词的定义而不是 表示它的语义时。
        • 例如,可以是:“The Queen Mary sail last night”。在这里,“Queen Mary”一词 没有额外的 强调或重要性。它只是表明,所讨论的物体 不是名为玛丽的女王,而是一艘 名为玛丽女王的船。
        • 另一个例子是:“The word the is an article”。斜体 the是要说明的单词.
      • 更重要的文本: 使用<strong>元素标记 比周围文本更重要的文本。
  • 浏览器一般 怎样显示 <em> 强调标签的内容 ?
    • 一般用 斜体 来显示。
  • 强调的使用
    • 不要滥用强调,强调真正重要的部分 .

  • 示例1: 强调内容

<em>我是需要强调的内容</em>

在这里插入图片描述


  • 示例2: 将<em>元素 用于表示 隐式 或显式对比。
<p>
  In HTML 5, what was previously called
  <em>block-level</em> content is now called
  <em>flow</em> content.
</p>

<p>
在HTML 5中,以前称为 <em>块级</em> 内容的内容现在称为<em></em> 内容。
</p>

在这里插入图片描述

  • 显示: 斜体

1.10.2 ★ strong 表示 强调的程度 更强的内容

  • 如何表示 强调的程度 更强的内容 ?

    • 使用 <strong> 强重点 标签
    • Strong Importance
      • 表示其内容具有 很强的重要性、严肃性 或紧迫性
      • 显示 粗体: 浏览器通常 以粗体呈现内容。
  • <strong> 强重点 标签的内容 一般显示为怎样的 ?

    • 一般会 加粗(相对于<em>强调标签的斜体)
    • <em>强调标签 和 <strong> 强重点 标签的 区别是什么 ?
    • 语气更强: <strong> 强重点 标签 强调的语气更强,被使用的次数 应该更少
    • 嵌套: 都可以嵌套,分别增加 重要性的相对程度 或强调程度。
  • 为什么一般 教程页面的第一句摘要 都是以粗体显示的 ?

    • 是因为对这一句摘要使用了 <strong> 更强调 标签。
    • 摘要使用这个标签的理由 是什么 ?
      • 概括了内容 位置重要.
        • 教程摘要 概括 了其所在页面的 内容,而且 位于页面的 最重要的位置
  • 使用说明

    • 重要 严肃 紧急<strong>元素用于“非常重要”的内容,包括非常严肃 或紧急的事情( 如警告)。
    • 强重点: 这可能是 一个 对整个页面 非常重要的句子,或者你可以试着 指出一些单词 比附近的内容更重要。
    • 粗体样式: 通常,此<strong>元素在默认情况下 使用粗体 呈现。然而,它不应该简单地用于应用粗体的样式;设置粗体 使用 CSSfont-weight字体粗细 属性。
    • 注释 或警告段落 的标签<strong>的另一个公认用法是 表示段落的标签,这些段落 表示页面文本中的 注释或警告。
    • 特殊但不强调: 使用<b>元素将注意力吸引到 某些文本上,而不显示 更高级别的重要性。
    • 重点: 使用<em>元素 标记强调的重点文本。

  • 示例1: 表示非常重要的 严肃的重点内容

<p>... 最重要的规则,你永远不会忘记的规则,不管他怎么哭,不管他怎么哀求: <strong>不要在午夜之后喂他</strong>.</p>

在这里插入图片描述


  • 示例2: 警告的标签
<p><strong>重要提示:</strong> 在继续之前,确保你添加了足够的黄油。</p>

在这里插入图片描述


1.10.3 ★ dfn 表示 术语或短语 的 定义

  • 如何表示 特殊术语或短语 的 定义 ?
    • 使用 <dfn> 定义 标签
    • 被定义的 术语名: <dfn>表示 在定义短语 或句子的内容中定义的 术语
    • 术语的定义: <p>元素、<dt> <dd>对 或 <section>元素(<dfn>的最近祖先)被认为是 这个术语的定义。
    • definition element [,defi’niʃən]
  • 浏览器 一般如何显示 <dfn> 定义标签的内容 ?
    • 一般用 斜体 显示

⑴ title 属性: 被定义的术语

  • <dfn>定义 标签的属性
    • 包含 全局属性
    • 在HTML5中,title属性 具有特殊的含义,
    • 指定 要定义的术语: 定义的术语 是按照以下规则 确定的:
      • 被定义的术语 = dfn-title属性值
        • 如果<dfn>元素具有 title 属性,则认为 title 属性的值 就是 被定义的术语。<dfn>元素中 必须仍然包含文本,但是该文本 可以是缩写(可能使用<abbr>)或术语的另一种形式。
        • title属性值的限定: 如果<dfn>元素具有 title 属性,则title的属性值 必须是 被定义的术语,不能是 其他任何文本。
      • 被定义的术语 = dfn>abbr-title属性值
        • 如果<dfn> 定义标签 仅包含一个单独的子元素<abbr>缩写 标签,并且没有自己的文本内容,且<abbr>自带有title属性,那么<abbr>元素的title属性的值就是 定义的术语。
      • 被定义的术语 = <dfn>的标签文本
        • 否则,<dfn>元素的文本内容,是被定义的术语。
  • 快速导航到 术语的定义
    • a-href=#dfn-id
    • 如果在<dfn>定义 元素上包含id属性,则可以使用<a>超链接 元素 链接到它。
    • 快速导航到 术语的定义: 这样的链接 应该是 用于术语,其目的是 读者 可以通过 单击术语的链接 快速导航到术语的定义。

  • 示例1: 在技术文档中,当新的术语 第一次出现时,可以使用<dfn> 定义标签.
<p> <dfn id="def-validator">验证器</dfn> 是检查 代码或文档中的 语法错误的程序。</p>

在这里插入图片描述

  • 一般用 斜体显示 定义标签的内容
  • <dfn>标签的内容,是需要被定义的 术语的名称

  • 示例2: 快速导航到 定义的术语
    • 嵌套关系
      • strong> dfn 强调 被定义的术语名
      • code> a 标签代码的锚
    • 关联关系: a-href=#dfn-id
<p>The <strong>HTML Definition element</strong>
(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is
used to indicate the term being defined within the context of a
definition phrase or sentence.</p>

...省略中间内容

<p>Because of all of that, we decided to use the
<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for
this project.</p>

在这里插入图片描述
在这里插入图片描述

  • 快速跳转: 利用 a-href=#id 进行 快速导航跳转.

  • 示例3: 定义 有缩写词的术语
<p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn>
 (哈勃太空望远镜) 是有史以来最多产的科学仪器之一。它已经在轨道上运行了20多年,扫描天空,并对数据和照片进行前所未有的质量和细节处理。</p>

<p>显然, the <abbr title="Hubble Space Telescope">HST</abbr> (哈勃太空望远镜) 可以说,在推动科学发展方面所做的贡献超过了以往任何一种设备。</p>

在这里插入图片描述

  • 嵌套关系
    • dfn> abbr title
    • <abbr>缩写 标签 一定要是子元素, 被定义的术语 = abbr-title的属性值

1.10.4 ★ code 表示 计算机源代码

  • 如何表示 计算机源代码 或者其他机器可以阅读 的 文本内容 ?
    • 使用 <code>代码 标签
    • 代码片段 : <code>代码 元素 以一种样式 显示其内容,这种样式 指示文本 是计算机代码的一小段。
    • 显示 等宽: 默认情况下,内容文本 使用用户代理的 默认monospace等宽字体 显示。
  • <code> 代码标签的内容 浏览器显示的样式 是怎样的 ?
    • 一般是 等宽、类似 电传打字机样式 的字体
  • 提示:
    • 如果需要使用 等宽字体 的效果,可以使用 <code> 代码标签吗 ?
      • 不可以. 建议使用 font-family 字体系列 属性 设置字体
    • 如果要在 严格限制为等宽字体格式 的文本中 显示编程代码,可以使用<pre>预格式 标签。
  • 使用说明
    • 多行代码: 搭配<pre>
      • 要表示 多行代码,将<code>代码元素 放在<pre>预格式化 元素中。
      • 一个代码短语 或一行代码: <code>代码 标签 本身只表示 一个代码短语 或一行代码。
      • <code>是 行内元素,不换行.
    • 覆盖默认样式: 为code选择器 定义 CSS规则 来覆盖浏览器的默认字体。
      • 用户设置的首选项 可能优先于 指定的 CSS。

  • 示例1: 一段 包含代码片段的文本

<p> <code>push()</code> 方法将一个或多个元素添加到数组末尾 并返回数组的新长度。</p>

在这里插入图片描述

  • 总结:
    • <code>代码标签的 内容,一般显示为 等宽的样式
    • 代码标签的内容,前后没有折行

1.10.5 ★ samp 表示 计算机程序的输出 的示例(或引用)

  • 表示 计算机程序的输出 的示例(或引用) 从正常的上下文中 将这些 短字符序列 提取出来,加以强调 ?

    • <samp> 输出示例 标签
    • Sample Element
    • 程序的输出 示例: 用于 封装内联文本,内联文本表示 计算机程序的输出 的示例(或引用) 。
      • 区别于 输出容器: 如果 需要一个元素 作为 网站 或应用程序的 JavaScript代码 生成输出的容器,则应该使用<output>输出 元素。
    • 显示 等宽: 它的内容 通常使用浏览器默认的monospace字体(如CourierLucida Console)呈现。
    • 覆盖默认字体: 可以使用 CSS规则 为元素 覆盖浏览器的默认字体;如 font-family: "Courier";但是,浏览器的首选项 可能优先于 指定的任何 CSS。
  • 总结: <samp> = 输出示例 = 程序输出文本 的字符提取

  • 示例1: 计算机 输出字符

字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。

在这里插入图片描述

  • <samp>程序输出示例 标签 使用的比较少

  • 示例2: 计算机程序 输出的一段代码示例
<p>我试着启动我的电脑,但是我收到了一条消息</p>

<samp>Keyboard not found </br>Press F1 to continue</samp></p>

在这里插入图片描述


  • 示例3: 程序的 输出示例
<p>当流程完成时,实用程序将输出文本</p>
<samp>Scan complete. Found <em>N</em> results.</samp> 然后,您可以进行下一步。</p>

在这里插入图片描述


  • 示例4: 包括用户输入的 输出示例
<head>
	<style>
		.prompt {
		  color: #b00;/*设置 提示符的颜色*/
		}
		
		samp > kbd {
		  font-weight: bold;/*键盘用户输入的文字 设为粗体*/
		}
		
		.cursor {
		  color: #00b;/*设置 光标的颜色*/
	}
	</style>
</head>
<body>

	<pre><!-- 因为是多行代码,所以使用了pre 预格式化标签-->
		<samp><span class="prompt">mike@interwebz:~$</span><kbd>md5 -s "Hello world"</kbd>
		MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
		
		<span class="prompt">mike@interwebz:~$</span> <span class="cursor"></span></samp>
	</pre>


</body>

在这里插入图片描述
在这里插入图片描述


1.10.6 ★ var 表示 变量的名称 或 用户提供的值

  • 如何表示 变量的名称 或 用户提供的值 ?

    • 使用 <var> 变量标签
    • Variable element
    • 变量名称: 表示 数学表达式 或编程内容中 变量的名称。
    • 变量 显示 斜体: 它通常 使用当前字体的 斜体版本 来表示,尽管这种行为 依赖于浏览器。
    • 覆盖 默认样式: 如 font: bold 15px "Courier", "Courier New", monospace;使用font字体属性 可以改变字体粗细 字体类型
  • <var> 变量标签 一般和什么标签 一起使用 ?

    • 经常与 <code>代码标签 和 <pre> 预格式 标签一起使用,用来显示 计算机代码
  • <var> 变量标签的内容,浏览器一般 怎样显示?

    • 一般显示为 斜体
  • 为什么要使用更多的 语义标签 ?

    • 浏览器可以 更好的进行 信息显示
  • 示例1: 用变量标签 表示 公式中的变量


 <p>爱因斯坦的公式:</p>

 <p id="gongshi">
     <var>E</var>=
     <var>m</var>
     <var>c</var><sup>2</sup>
 </p>

在这里插入图片描述

  • 公式中的字母,可以用<var>变量标签 表示
  • <var> 变量标签显示
    • <var> 变量标签的内容,前后 不会折行
    • 内容,显示为 斜体

  • 示例2: 表示段落中 数学公式中的变量
<p>盒子的体积 = <var>l</var> × <var>w</var> × <var>h</var>,  <var>l</var> 表示长度, <var>w</var>  表示宽度 , <var>h</var> 表示高度</p>

在这里插入图片描述


1.10.7 ★ kbd 定义 从键盘 键入的文本

  • 如何 定义 从键盘 键入的文本 ?
    • 使用 <kbd> 键入文本 标签
      • Keyboard Input element 键盘输入
      • 内联的 用户输入文本: 表示一段内联文本,来自键盘、语音输入 或任何其他文本输入设备的 用户文本输入。
      • 显示 等宽: 浏览器 一般默认使用 默认的monospace字体呈现 <kdb>键入文本 元素的内容,尽管 HTML标准没有强制要求这样做。
      • 搭配<samp>输出示例: <kbd>键入文本 标签 可以嵌套在<samp>输出示例 标签 (Sample Output)的各种组合中,以表示 各种形式的输入 或基于视觉提示的输入。
  • <kbd> 键盘文本 标签的内容 浏览器如何显示 ?
    • 一般是 等宽字体,csdn 的编辑器中,还会显示出 按键的样式 . 如, Tab
  • 使用
    • <kbd> 键盘文本 标签经常用在哪里?
      • 计算机相关 文档和手册 中。
  • 使用说明
    • <kbd>的自嵌套: 将<kbd>元素嵌套到另一个<kbd>元素中,表示实际的键 或其他输入单元 作为较大输入的一部分。
      • 外部的<kbd>一般省略,可以简化代码 不影响有效性.
    • 回显的输入: 作为子元素 搭配<samp>. 将<kbd>元素嵌套在<samp>输出示例 元素中 表示输入 已被系统回显给用户。
    • 系统显示的 文本输入: 作为父元素 搭配<samp>. 将<samp>元素 嵌套在<kbd>元素中,表示 基于系统显示的文本 的输入,例如 菜单和菜单项 的名称,或者屏幕上显示的 按钮的名称。

  • 示例1: 表示 是需要使用键盘 键入的文本
键入 <kbd>quit</kbd> 来退出程序,或者键入 <kbd>menu</kbd> 来返回主菜单。

在这里插入图片描述

  • 输出: <kbd>键盘文本 标签的内容,显示为 等宽字体

  • 示例2: 表示需要使用键盘 键入的文本
<head>
	<style>
	
		kbd{
		border:1px solid #b5b5b5;
		box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
		padding:2px 4px;
		background-color:#eee;
		border-radius: 3px;
		font-weight:bold;
	
	}
	</style>
</head>
<body>

	<p>请按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 来保存文件. </p>

</body>

  • 默认样式
    在这里插入图片描述
  • 设置成键盘的样式: 边框 背景色 盒子阴影等
    在这里插入图片描述

  • 示例3: 表示 输入中的击键
    • 多个击键的输入: 自嵌套: 要描述 由多个击键组成 的输入,可以嵌套多个<kbd>元素,使用一个外部的<kbd>元素 表示整个输入,以及再用<kbd> 依次表示 包含在里面的 输入的 每个单独击键 或组件。
  • HTML
<p>您还可以 使用键盘快捷键 创建一个新文档: 
<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.</p>
  • CSS
kbd>kbd{
	border:1px solid #b5b5b5;
	box-shadow: 0px 2px 1px rgba(0,0,0,0.2);
	padding:2px 4px;
	background-color:#eee;
	border-radius: 3px;
	font-weight:bold;
}

  • 不带样式 和带样式的
    在这里插入图片描述
    在这里插入图片描述

  • 示例4:输出示例中 回显的输入
  • 嵌套关系: blockquote> samp> kbd
<p>如果出现语法错误,该工具将 输出您输入的初始命令 供您检查: </p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

在这里插入图片描述


  • 示例5: 表示 屏幕上的 输入选项
    • 例如,你可以解释 如何选择“文件”菜单中 的“新文件”选项 来创建新文件,使用如下HTML:
<p>要创建新文件,请选择菜单选项
	<kbd>
		<kbd><samp>File</samp></kbd><kbd><samp>New Document</samp></kbd>
	</kbd>.
</p>

<p>输入新文件的名称后, 别忘了点击 <kbd><samp>OK</samp></kbd> 按钮
进行确认。</p>

在这里插入图片描述

  • 总结
    • 表示 菜单输入: 指示 从屏幕工具中 选择的输入:kbd> samp如,菜单
    • 外部 <kbd>的省略: 不需要做 这些包装;可以选择 通过省略外部<kbd>元素 来简化它。换句话说,将其简化为<kbd>Ctrl</kbd>+<kbd>N</kbd>将是完全有效的。

1.10.8 ★ cite 表示引用文本 所在的作品名

  • 如何表示 引用文本 所在的作品名 ?

    • 使用 <cite> 引文作品名 标签
    • citation element [saɪ’teʃən] n.引用
      • <cite> 引文作品名 标签的内容,一般是 什么 ?
        • 传统媒体中的文档 ,如 书籍、杂志、期刊 等的标题.(方便 自动摘录 参考书目)
        • 作品的标题: 用于描述 对引用的 创造性作品 的引用,并且必须包括 该作品的标题。
        • 作者的名称 不要用: 值得注意的是,W3C (World Wide Web Consortium,万维网联盟) 规范指出,对 创造性作品的引用(包括在<cite>元素中)可能包括 该作品作者的名称。然而,WHATWG 规范 却恰恰相反:在任何情况下, 都 不能包含人名。
        • 使用 合理的简称: 根据 与引用元数据相关的 内容相关约定,引用可以 采用缩写形式.
  • <cite> 引文 作品名 标签的内容,浏览器如何显示 ?

    • 显示 斜体
    • 修改 默认样式: 使用 CSS font-style字体样式 属性
  • 如果 引用的这些文档有 在线的版本 ,如何指向 ?

    • 在线版本: 把引用 包括在一个 <a> 超链接标签中
  • 如何 从文档中 自动摘录 参考书目 ?

    • 参考的书目,都使用 <cite> 引文作品名 标签
    • 自动摘录: 浏览器 自动整理 引用表格,并把它们作为 脚注或者独立的文档 来显示。<cite>引文 作品名 的内容 会被自动摘录整理.
  • <cite>引文的作品名 可以是哪些 类型?

    • 书籍/ 研究报告/ 散文/ 诗/ 乐谱/ 歌曲/ 剧本 电影剧本/ 电影/ 电视节目/ 游戏/ 雕塑/ 画/ 戏剧/ 歌剧/ 音乐片/ 展览品/ 法律案件的报告/ 计算机程序/ 网站/ 网页/ 博客 或评论/ 论坛帖子 或评论/ 一条微博/ 一个Facebook帖子/ 书面或口头陈述…
    • 是不是 有标题,用了引文 就能用<cite>指明作品名(标题)?

  • 示例1: 引用某书籍中的名言,指明来源的 作品名
<cite>《记念刘和珍君》</cite>一文中,有一句脍炙人口的名句: <q>不在沉默中爆发,就在沉默中灭亡。</q>

在这里插入图片描述

  • <cite>引用标签,内容是书籍的标题,显示为斜体
  • <q>短引用 标签,内容是一句引用,加了双引号.

  • 示例2: 引用某作品中的 第一句话,并指明引文的作品名 和作品的在线版本
  • 嵌套关系:
    • blockquote
      • p
      • footer> cite> a
<blockquote>
    <p>It was a bright cold day in April, and the clocks were striking thirteen. (那是四月里一个晴朗寒冷的日子,钟敲了十三下。)</p>
    <footer>
        <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> 中的第一句话 by George Orwell (乔治·奥威尔(英国小说家))(Part 1, Chapter 1).
    </footer>
</blockquote>

1.11 ★ progress 表示 任务的进度(进程)

  • 如何表示 任务的进度(进程) ?

    • 使用 <progress> 进度 标签
    • 显示 进度条<progress>进度 元素显示一个指示符,该指示符 显示任务的完成进度,通常显示为进度条。
  • 哪些浏览器 支持 <progress> 进度 标签 ?

    • IE10, Firefox, Opera, Chrome 以及 Safari 6 支持 <progress> 进度标签。
    • 注释:IE 9 以及更早的版本不支持 <progress>进度 标签
  • 提示:

    • <progress>进度 标签一般与什么 一同使用,来显示任务的进度 ?
      • JavaScript
  • 注释:

    • <progress> 进度标签 适合用来表示 度量衡 吗 ?(例如,磁盘空间使用情况 或查询结果)
    • 不适合 .
    • 用什么 表示 度量衡 ?
      • 使用 <meter> 测量 标签
  • <progress> 进度标签 的属性有哪些 ?

    • new : HTML5 中的新属性。
属性名属性值用于
max=number❶ 规定<progress>指定的任务 一共需要 多少工作(总数)。❷ max属性(如果存在)的值 必须大于零,并且是一个 有效的浮点数。默认值是1。
value= number❶ 规定 当前已经完成 多少任务数目(已完成)。❷ 它必须是 0 和max之间 的有效浮点数,如果 省略max,则必须是 0和1之间 的有效浮点数。❸ 如果没有value属性,则进度条不确定;这表明 一个活动正在进行中,没有显示 预期需要多长时间。
  • 总需要完成数目 和当前已经完成的数目 属性值的数值
    • 都是 浮点数
  • 属性搭配: progress-value完成值 属性 和 progress-max最大总数值 属性 一起搭配使用
  • 进度 无最小值: 最小值总是0,并且<progress>进度 元素 不允许使用min属性。
  • 水平 和垂直显示: 可以使用- mozo -orient CSS 属性 来指定 进度条应该 水平呈现(默认)还是垂直呈现。
  • 不确定的进度条: 删除value当前完成值 属性 .不确定伪类 可用于匹配 不确定的进度条。要在给进度条赋值后 将其更改为 不确定,必须使用 element.removeAttribute("value") 删除value属性

  • 示例1: 表示下载进度

下载进度:
<progress value="30" max="100">
</progress>

在这里插入图片描述

  • 完成进度: 用来表示 完成进度,而不是 标量的测量值

  • 示例2: 文件的进度
    • 相关联: 标签文字 和进度条 相关联
    • 关联关系: label-for=#progress-id
    • 表示进度 的搭配属性: <progress> value max
<label for="file">文件的进度:</label>

<progress id="file" max="100" value="70"> 70% </progress>

在这里插入图片描述


1.12 ★ meter 定义 已知范围 或分数值内 的 标量值

  • 如何定义 已知范围 或分数值内 的 标量值?

    • 使用<meter> 测量标签
    • 标量值 或分数值: <meter>元素 表示在已知范围内 的标量值 或分数值。
      • 也被称为 gauge[gedʒ](尺度,计量器)。
        • 例子:磁盘用量、查询结果的相关性,等等。
  • 注释:<meter>测量 标签 不应用于

    • 指示进度(在进度条中)。如果 标记进度条,使用 <progress>进度 标签。
  • <meter> 测量标签 ,HTML 4.01 与 HTML 5 之间的差异

    • <meter>测量 标签是 HTML 5 中的新标签。
  • <meter> 测量标签, 哪些浏览器支持 ?

    • IE 不支持,Firefox, Chrome, Opera 以及 Safari 6 支持 <meter> 标签。
  • <meter>测量 标签 的属性有哪些 ?

属性名用于浏览器支持注释
① form=form_id规定 <meter> 测量元素 所属的 一个或多个表单。IE除外该属性的值 必须是同一文档中 <form> 元素的 id 属性值。此属性 将元素 与具有meter元素所有权 的表单元素 关联。
② high=number规定被视作 高的值的范围,测量范围高端的下界。IE除外high 属性必须小于 max 属性值,且必须大于lowmin 属性值
③ low=number规定被视作 低的值的范围,测量范围低端的上限。IE除外low 属性必须大于 min 属性值,且必须小于 high 和 max 属性值
④ max=number规定范围的 最大值IE除外max 属性值必须大于 min 属性值。如果未规定,则默认值是 1。提示:max 属性,与min属性一起,规定度量的完整范围 .测量范围的上限。如果指定,该值 必须大于最小值(min属性)。如果未指定,最大值为1。
⑤ min=number规定范围的 最小值IE除外min 属性值必须小于 max 属性值。如果未规定,则默认值是 0。测量范围的 较低数值界限。如果指定,该值必须小于最大值(max属性)。如果未指定,则最小值为0。
⑥ optimum=number规定度量的 优化值,此属性指示 最佳数值.IE除外最佳值的度量值,它必须在范围内(由min属性和max属性定义)。当与低属性和高属性一起使用时,它会给出一个指示,表明在哪个范围内被认为是更可取的。例如,如果在min属性和low属性之间,则认为较低的范围 是首选。
⑦ value=number必需。规定 度量的 当前值IE除外规定测量范围的 当前的或“测量过”的值。value 属性必须介于 minmax 属性值之间 除非value属性在0和1之间(包括),否则min和max属性应该定义范围,以便value属性的值在其中。

  • 总结
    • 值的大小 : min < low < high < max
    • 所有浏览器都不支持 <meter>测量标签的form所属表单 属性
    • IE不支持<meter>测量标签和<meter>测量标签的所有属性
    • 所有 属性值的数值
      • 都是 浮点数
<p>显示度量值:</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.5">50%</meter>

<p><b>注释:</b>Internet Explorer 不支持 meter 标签。</p>

在这里插入图片描述

  • 以类似电池的样式 展示测量标签的数值

  • 示例2:
<label for="fuel">燃油油位:</label>

<meter id="fuel" name="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
在 50/100
</meter>

在这里插入图片描述

  • 颜色 和 属性值之间的关系 (部分浏览器中)
    • value< low,显示红色
    • value< high,显示黄色
    • value≥ high,显示绿色
      在这里插入图片描述
      在这里插入图片描述

1.13 ★ pre 定义 预格式化的文本

  • 如何 定义 预格式化的文本 ?
    • 使用 <pre> 预格式标签
    • 预格式化: 元素表示 预格式化的文本,该文本 将与在HTML文件中 编写的文本格式 完全相同。
    • 字体: 文本通常使用非比例(“monospace”)字体呈现。该元素中的空格 保留。
  • <pre> 预格式标签 的内容 浏览器会怎样显示 ?
    • 保留 空格和换行
    • 字体会 等宽
    • 总结: 预格式 = 空格 + 换行 + 等宽
  • 一般用什么标签 来表示 计算机的源代码 ?
    • <pre> 预格式 标签
  • <pre> 预格式标签 不能包含什么样的标签 ?
    • 任何 块级元素(常见为可以导致段落断开的标签)
      • 块级元素会自动添加换行,就不是预格式 原本的格式了
    • 例如标题、<p> 段落标签和 <address> 类型信息 标签
    • <pre>预格式元素是块级元素吗 ?
      • 是的
  • <pre> 预格式 元素中允许 放置什么 ?
    • 只能包含文本或行内元素
    • 物理样式和 基于内容的样式的元素
    • 链接 ,图像 , 水平线等。
  • 提示
    • <pre>预格式标签中的 特殊符号 会怎样处理 ?
      • 被转换为 符号实体,比如 “&lt;” 代表 “<”
      • 总结 : 特殊符号 = 符号实体
    • <pre> 预格式 标签中 ,每个制表符 一般占据多少字符 ?
      • 8 个字符 的位置
      • 总结: 一个制表符 = 8个字符
    • 为什么不推荐使用 制表符 tab
      • 因为在 不同的浏览器中,Tab 的实现 各不相同。
      • 浏览器不同 = 实现不同
    • 在用 <pre> 预格式 标签中 ,使用什么 替代制表符 Tab ,可以确保 文本正确的 水平位置 ?
      • 使用空格

  • 示例1: 显示源代码
<p>使用 CSS 更改字体颜色 很容易。</p>
<pre>
body {
  color: red;
}
</pre>

在这里插入图片描述


  • 示例2: 预格式化文本的 可访问性问题
    • 图像 或者图表的替代性描述: 为 使用<pre>预格式化文本 创建的 任何图像或图表 提供替代描述非常重要。
    • 描述内容: 替代描述 应该清晰而简洁地 描述 图像或图表的内容。阅读障碍: 否则,视力低下的人,在屏幕阅读器等辅助技术的帮助下 浏览时,可能无法理解 按顺序读出的预格式化文本字符 所代表的内容。
    • 替代描述: <figure><figcaption>: 使用 <figure><figcaption> ,再通过idARIA role的 以及aria -labelledby属性的补充,可以将预格式化的文本 声明为图像,并使用<figcaption>作为 图像的替代描述。
  • 嵌套关系
    • <figure> role aria-labelledby
      • <pre>| <figcaption> id
<figure role="img" aria-labelledby="cow-caption">
  <pre>
  ___________________________
<我是我这个领域的专家。 >
  ---------------------------
         \   ^__^ 
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
一头牛说:“我是我这个领域的专家。”牛使用预格式化的文本字符 进行说明。
  </figcaption>
</figure>

在这里插入图片描述


  • 知识补充
  • 改变文本的 外观和含义 的标签分为哪两类 ?
    • 很多标签 都可以 改变文本的 外观,并为文本赋予 隐藏的含义。
    • ① 基于内容 的样式(content-based style)的标签
    • ② 物理 样式(physical style)的标签
  • 基于内容的样式是什么意思 ?
    • 有确切的含义,自带一定的样式
    • 总结: 含义 + 样式
    • 含义的重要性 为什么大于样式 ?
      • 浏览器 就会把与该含义 用法一致的格式 应用在文本上。
      • 含义 = 指导浏览器 应用格式
    • 当前的 HTML 和 XHTML 标准 为每一个 基于内容的标签 都定义一种格式了吗 ?
      • 没有,小部分标签
    • 基于内容,带样式的标签 有哪些 ?
      • <abbr>缩写
      • <acronym> 首字母缩写,已废弃
      • <cite>引用
      • <code>代码
      • <samp>样本
      • <var>变量
      • <dfn>定义
      • <kbd>键盘
      • <em>强调
      • <strong>更强调

  • 物理样式 的标签 是什么意思 ?
    • 用标签 为文本规定样式
  • 为什么 不建议使用 物理样式标签 ?
    • 因为 HTML 应该提供 更多有语义的标签,方便浏览器显示.控制样式,使用 CSS 样式表更专业.
  • HTML/XHTML 标准一共提供了 哪 9 种物理样式的标签 ?
    • 粗体(bold)、斜体(italic)、等宽(monospaced)、下划线(underlined)、删除线(strikethrough)、放大(larger)、缩小(smaller)、上标(superscripted)和下标(subscripted)文本。
    • <b> 粗体
    • <big> 大号
    • <i> 斜体
    • <s> = <strike> 删除
    • <small> 小号
    • <sub> 下标
    • <sup> 上标
    • <tt> 等宽

1.14 ★ sup 定义 上标 文本

  • 如何 定义 上标 文本 ?
    • 使用 <sup> 上标标签
    • Superscript element
    • 内联 上边文本: 指定 仅出于排版原因 将显示为上标的 内联文本。
    • 基线高 字号小: 上标通常使用 较小的文本 以提高基线 来呈现。
  • 显示
    • <sup> 上标标签 的内容 字符高度 是当前文本的多少 ?
      • 当前文本 字符高度的 一半
    • <sup> 上标标签 的内容 字体和字号 和当前文本 什么区别 ?
      • 一样的
  • 使用说明
    • 向文档 添加脚注 以及表示方程式中的 指数值时 可以使用什么标签 ?
      • <sup> 上标标签
    • 如何创建 超链接脚注 ?
      • <sup> 上标标签 和 <a> 超链接标签 一起使用
    • **排版原因 **: <sup>上标元素 应该只用于 排版的原因—也就是说,更改文本的位置 以符合排版约定或标准,而 不是仅仅用于 表示或外观目的。
      • 例如,要对 使用提升基线的 业务或产品的文字商标 进行样式设置,应该使用 CSS(很可能是vertical-align),而不是<sup>,vertical-align: super或者 将基线向上移动50vertical-align: 50%.
    • 适用于 使用<sup>的几种情况 (不限于此)
      • 显示 指数,如“x3”。
      • 显示 高级字母,这在某些语言中用于呈现 某些缩写。例如,在法语中,这个词 "mademoiselle"可以缩写为 “Mlle
      • 表示 序数,如 “4th” 而不是 “fourth.”

  • 示例1: 数学表达式中 的指数
  • p> var> sup
<p> <b>勾股定理</b> 通常表示为 下面这个方程:</p>

<p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>

在这里插入图片描述


1.15 ★ sub 定义 下标 文本

  • 如何定义 下标 文本 ?
    • 使用<sub> 下标标签
    • Subscript element
    • 内联 下标文本: 指定 内联文本,仅出于排版原因,内联文本应该显示 为下标。
    • 低基线 小字号: 下标通常使用 较小的文本 以较低的基线呈现。
  • 显示
    • 包含在 <sub> 标签的内容 字符高度 是当前文本的多少 ?
      • 当前文本 字符高度的一半
    • <sub> 标签 的内容 字体和字号 和当前文本 什么区别 ?
      • 一样的
  • 使用说明
    • <sub> 标签和 <sup> 标签,在哪里使用的比较多 ?
      • 数学等式、科学符号和化学公式 等需要上标和下标的地方使用的多
    • 排版原因: <sub>下标元素 和<sup>上标元素 一样,应该只用于 排版的原因—也就是说,更改文本的位置 以符合排版约定 或标准,而不是仅仅用于 表示或外观目的。
      • 应该使用 CSSvertical-align: sub 更精确地控制基线偏移 vertical-align: -25%.
    • 适用于 使用<sub>下标 的几种情况 (不限于此)
      • 脚注数字
      • 数学变量的下标
      • 表示 化学公式中 给定元素的原子数
  • 示例1:
<p>
This text contains <sub>subscript</sub><var>x</var><sub>2</sub>
</p>

<p>
This text contains <sup>superscript</sup>
<var>x</var><sup>2</sup>
</p>

在这里插入图片描述

  • 上标和下标,一般用在化学,数学等公示中

  • 示例2: 表示化学式中 的原子的数目
<p>几乎每个开发人员 最喜欢的分子 都是 
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, 也被称为“咖啡因”。"</p>

在这里插入图片描述


  • 示例3: 脚注数,传统的脚注 用<sub>下标表示的数字 表示。这是一个常见的用例:
<p>根据中村、约翰逊 和梅森<sub>1</sub>的计算 , 这将导致两个粒子完全湮灭。</p>

在这里插入图片描述


  • 示例4: 表示 数学变量的下标
    • 在数学中,与同一概念相关的变量族(例如沿同一轴 的距离)用相同的变量名 表示,后面带有下标。例如:
<p>水平坐标 沿x轴的位置 表示为:  <var>x<sub>1</sub></var> ... <var>x<sub>n</sub></var> .</p>

在这里插入图片描述


1.16 ★ wbr 规定 在文本中的何处 适合换行

  • Word Break Opportunity (<wbr>)

    • 单词换行时机
    • 单词换行时机: 元素表示一个 单词的换行时机——在文本中的一个位置,浏览器 可以选择在其中换行,尽管它的换行规则 不会在该位置创建换行。
    • 空标签
  • 用于

    • 如何规定 在文本中的何处 适合换行 ?
      • 使用 <wbr> 换行 标签
      • 防止 在错误的地方换行
  • 提示:

    • 如果单词太长,或者担心浏览器 会在错误的位置 换行 ?
      • 使用 <wbr> 换行标签 来添加 Word Break Opportunity(单词换行时机)。
  • 哪些浏览器 支持 <wbr> 换行 标签

    • 除了 IE,所有浏览器都支持<wbr> 换行 标签。
  • 连字符: <wbr>元素在 行断点处 不引入连字符。若要使连字符 只出现在行尾,请使用连字符实体 &shy;

  • 示例1

<b>没有 添加换行的文字</b>
<p>
如果想学习 AJAX,(文字填充文字填充文字填充文字填充)那么您必须熟悉 XMLHttpRequest 对象。
</p>

<b>添加了 指定位置换行的文字</b>
<p>
如果想学习 AJAX,(文字填充文字填充文字填充文字填充)那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
  • <wbr>换行标签的内容 在什么地方换行 ?
    • 文字过多,需要换行时,会在 换行标签内容的前后换行,不会分割这个标签的内容.
      在这里插入图片描述
      在这里插入图片描述

  • 示例2: url中的标点符号 断行
    • Yahoo Style指南建议在标点符号之前断开URL,以 避免在行尾 留下标点符号,读者可能会误认为 URL的末尾。
<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>

在这里插入图片描述


1.17 ★ mark 定义 带有记号的文本 / 突出显示的文本

  • 如何定义 带有记号的文本 突出显示文本 ?
    • 使用 <mark> 记号文本 标签
    • Mark Text element
    • 突出显示: 表示为参考或符号目的 而 标记或突出显示的文本,由于标记的段落 在包含内容中的 相关性或重要性。
  • 关于<mark>记号标签 ,HTML 4.01 与 HTML 5 之间的差异
    • <mark>记号 标签是 HTML 5 中的新标签。
  • <mark> 记号标签 的浏览器支持 ?
    • IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <mark> 记号文本 标签。
    • IE 8 以及更早的版本不支持 <mark> 记号文本 标签
  • <mark> 记号标签 浏览器显示 为?
    • 一般是黄色背景
  • 使用说明
    • 特别关注的文本: 用在引用中. (<q>) , <blockquote> ) 一般来说,它指的是 有特殊意义的文本,但在原始材料中 没有标明,或需要 特别关注的材料,尽管原始作者 并不认为这是特别重要的。就像 在书上用荧光笔 标出你感兴趣的段落一样。
    • 匹配搜索词: 指示文档内容中 可能与用户当前活动 相关的部分。例如,这可以用来表示 匹配搜索操作的单词。
    • 使用选择: 不要为了 语法高亮突出显示 而使用<mark>;相反,使用<span>元素并应用适当的CSS。
  • 可访问性问题
    • 屏幕读取技术 和元素声明: 大多数 屏幕读取技术 在默认配置中 都不会声明<mark>元素的存在。可以使用CSS content属性以及::before::after伪元素 来声明它。

  • 示例1: 突出显示 相关的搜索词

<p>“火蜥蜴”的搜寻结果:</p>

<hr>

<p>几个种类的 <mark>火蜥蜴</mark> 栖息于太平洋西北部的温带雨林。</p>

<p>大部分的 <mark>火蜥蜴</mark> 是夜行动物,捕食昆虫、蠕虫和其他小动物。</p>

在这里插入图片描述

  • <mark> 记号标签 内容的背景颜色,为黄色,比较亮眼,能达到突出显示的作用.

  • 示例2: 标记 感兴趣的文本
<blockquote>
  这是一段内战时期。起义军的宇宙飞船从一个隐蔽的基地发动攻击,首次战胜了邪恶的银河帝国。在战斗中,  <mark>叛军间谍设法窃取 了帝国的终极武器的秘密计划</mark>——
死亡之星,一个装甲空间站,其能量足以摧毁整个星球。
</blockquote>

在这里插入图片描述

  • 引用内容中,一段特别关注的文本
    • 嵌套关系: blockquote> mark

  • 示例3: 可访问性问题
    • 屏幕读取技术 和元素声明: 大多数 屏幕读取技术 在默认配置中 都不会声明<mark>元素的存在。可以使用CSS content属性以及::before::after伪元素 来声明它。
    • 适用时机: 一些使用屏幕阅读器的人 故意禁用 会造成额外冗长的内容。因此,重要的是 不要滥用这种技术,只在 不知道突出显示的内容 会影响理解的情况下才使用它。
mark::before, 
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [highlight start] ";
}

mark::after {
  content: " [highlight end] ";
}


1.18 ★ ruby, rp 不支持汉字注音 的浏览器 所显示的 回退圆括号

  • 如何 定义 不支持 ruby 元素 的浏览器 所显示的内容 ?
    • 使用 <rp> 回退圆括号 标签

    • HTML Ruby Fallback Parenthesis (<rp>) element

    • 回退括号

    • 回退圆括号: <rp>元素 用于 为不支持使用<ruby>元素显示 ruby注释 的浏览器 提供回退圆括号。

    • rp> (), ()> rt : 一个<rp>元素 应该将 每个开始 和结束圆括号 括起来,这些圆括号 将包含注释文本的<rt>元素 括起来。

      • <rp>回退圆括号 标签的内容: 一般是(,) 开始和结束 圆括号
  • 使用说明
    • ruby 注释 = 东亚 字符发音: Ruby注释, 用于显示 东亚字符的发音,比如使用日本的片假名注解 furigana 或 中文的汉语拼音bopomofo字符。
    • 适用情况: <rp>元素用于 不支持<ruby>元素支持的情况;
    • 圆括号 指示 ruby注释的存在: <rp>的内容 提供了应该 显示的内容,以便指示 ruby注释的存在, (通常是括号).
  • 如何定义 ruby 的注释 ?
    • 使用 <rt> 东亚字符 发音注释 标签
  • 提示
    • 如何定义 ruby 注释,如何定义 中文的 注音 ?
      • 使用 <ruby>东亚字符发音 标签
      • ruby 注释 = 中文注音或字符
    • 如果在东亚使用,显示的是 什么 ?
      • 东亚字符的发音。
    • <rp> 回退圆括号 标签常与什么标签一起使用 ?
      • <ruby> 中文注音字符标签和 <rt> 解释和发音 标签
  • <ruby>东亚字符发音 标签 是怎么组成的 ?
    • 需要被注音字符 + <rp> +<rt>
    • 表示 (需要注音的)一个或多个字符 用什么 ?
      • <ruby> 东亚字符发音 标签
    • 提供 需要的注音 用什么标签 ?
      • <rt> 注音 标签
    • 表示 当浏览器不支持 <ruby>东亚字符发音 标签 时显示的内容 用什么标签?
      • <rp> 回退圆括号 标签
      • <rp> 回退圆括号 标签 是必需的吗 ?
        • 可选的.
  • 提示
    • 支持 <ruby> 东亚字符发音 标签的浏览器, 会显示<rp> 回退圆括号 标签的内容 吗?
      • 不会.
  • 哪些浏览器 支持<rp> 不支持注音 标签 ?
    • IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <rp> 回退圆括号 标签。
    • 注释:IE 8 以及更早的版本 不支持 <rp> 回退圆括号 标签。
  • 嵌套关系
  • <ruby> 东亚字符发音 标签
    • 字符
    • <rt>注音
    • <rp>(可选)回退圆括号
  • 示例1: 一个ruby 注释: 一个汉字和汉字的注音
<ruby><rt> ㄏㄢˋ </rt>
</ruby>

在这里插入图片描述

  • <rt>注音 标签的内容,会自动显示在 该发音的汉字的上方
    • <rp>的内容 ( ) 没有显示,因为是支持 ruby注释的
    • 兄弟关系: <rp><rt> 是 兄弟关系
<ruby><rp>(</rp>
	 <rt>ㄏㄢˋ</rt>
	<rp>)</rp>

</ruby>

在这里插入图片描述


  • 示例2: 表示 一个汉字的注音 ,并提供 不支持<ruby>时的 回退圆括号
  • 嵌套关系: ruby> rp> ( , ) <rp>包含的 开始和结束 圆括号 位于 <rt>元素的两边
    • ruby
      • rp> ( )
      • rt
<ruby><rp>(</rp><rt>han</rt><rp>)</rp><rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

在这里插入图片描述

  • 不支持 <ruby>标签的浏览器,一般显示为

在这里插入图片描述


  • 示例3: 表示一个汉语词汇的 日语发音
    • 明日 ,日语中的发音: a shi ta
<ruby>
  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>

在这里插入图片描述


1.19 ★ rt 定义 字符的 发音或翻译

  • 如何 定义字符(中文注音或字符)的 解释或发音 ?
    • 使用 <rt> 注音和翻译 标签
    • Ruby Text (<rt>) element
    • 东亚的 发音 + 翻译 + 音译: 指定 ruby注释 的 ruby文本部分,用于 为东亚排版 提供 发音、翻译或音译 信息。
      • 音译,指用发音近似的汉字 将外来语翻译过来,这种用于译音的汉字 不再有其自身的原意,只保留其语音和书写形式.
    • 位置: <rt>元素 必须始终 包含在<ruby>元素中。作为<ruby>的子元素.
  • 哪些浏览器 支持 <rt> 注音和翻译 标签 ?
    • IE 9+, Firefox, Opera, Chrome 以及 Safari 支持 <rt> 注音和翻译 标签。
    • 注释:Internet Explorer 8 以及更早的版本不支持 <rt> 注音和翻译 标签。
  • 提示
    • 用什么定义 需要注释的 中文注音 ?
      • <ruby> 东亚字符发音 标签

1.20 ★ strike [已废弃] 给文本 加删除线 (用 del 标签替代)

  • 如何 给文本加删除线 ?
    • 使用 <strike> 删除线 标签
    • Strikethrough Element
  • 关于<strike> 删除线 标签, HTML 与 XHTML 之间 有什么差异 ?
    • 在 HTML 4.01 中,<strike>删除线 标签 不被赞成 使用。
    • 在 XHTML 1.0 Strict DTD 中, <strike> 删除线 标签 不被支持 。
    • 总结 :不赞成 + 不支持 = 不要使用<strike> 删除线 标签
  • 提示:
    • 用什么标签 替代<strike> 删除线 标签 ?
      • 使用 <del> 删除 标签
<strike>我是需要加删除线的文本</strike>
<del>我表示 已删除的内容</del>

在这里插入图片描述
在这里插入图片描述

  • 加删除线的文本,中间会显示一条横线

1.21 ★ time 定义 公历的时间或日期

  • 如何定义 公历的时间(24 小时制)或日期 ?(时间和时区偏移是 可选的)
    • 使用 <time> 时间标签
    • 特定的时间段: <time>时间标签 表示 一个特定的时间段。
    • 机器可读格式: 它可能包含datetime属性,以便将日期 转换成 机器可读的格式,从而实现 更好的搜索引擎结果 或自定义特性,比如 提醒功能。
    • 可以表示
      • 24小时 时钟上的时间
      • 公历中 精确的日期(带有可选的时间 和时区信息)
      • 一个有效的时间段
  • 如何以 机器可读的方式 对日期和时间进行 编码?
    • 使用 <time> 时间 标签
      • 用户能把 生日提醒或排定的事件 添加到日程表
      • 搜索引擎 能生成 更智能的搜索结果
  • 浏览器支持

在这里插入图片描述

  • 关于 <time>时间 标签 , HTML 4.01 与 HTML 5 之间的差异
    • <time> 时间 标签是 HTML 5 中的新标签。

  • <time> 时间标签 的属性

⑴ datatime 属性: 日期和时间 (YYYY-MM-DDThh: mm: ssTZD 格式)

  • time-datetime 属性
    • 如何规定 日期或时间 ?
      • datetime 日期属性
    • 使用
      • 一般由什么 给定日期 / 时间 ?
        • <time> 时间标签的内容
      • <time> 时间标签的内容 中 未指定 日期或时间时,使用什么指定日期或时间 ?
        • datetime 日期属性
          • <p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p>
        • 总结: 指定 日期或时间 = <time> 时间标签的内容 = datetime 日期属性
    • datetime 日期属性的 语法
      • <time datetime="YYYY-MM-DDThh: mm: ssTZD">
    • time-datetime日期属性的属性值
      • 年月日,分隔符,时分秒,时区
      • YYYY
        • 年 (例如 2011)
      • MM
        • 月 (例如 01 表示 January)
      • DD
        • 日 (例如 08)
      • T
        • 必需的 分隔符,若规定时间的话
      • hh
        • 时 (例如 22 表示 10.00pm)
      • mm
        • 分 (例如 55)
      • ss
        • 秒 (例如 03)
      • TZD
        • 时区 标识符 (Z 表示祖鲁,也称为格林威治时间)
  • 有效的datetime属性值
    • 有效的 年份字符串: 2011,0001
    • 有效的 月份字符串: 2011-11
    • 有效的 日期字符串: 2011-11-18
    • 一个有效的 无年 日期字符串: 11-18
    • 一个有效的 星期字符串: 2011-W47
    • 一个有效的 时间字符串: 14:54 , 14:54:39 , 14:54:39.929
    • 一个有效的 本地日期 和时间字符串: 2011-11-18T14:54:39.929 , 2011-11-18 14:54:39.929 (T 可以用空格代替)
    • 一个有效的 全球日期和时间字符串:
      • 2011-11-18T14:54:39.929Z
      • 2011-11-18T14:54:39.929-0400
      • 2011-11-18T14:54:39.929-04:00
      • 2011-11-18 14:54:39.929Z
      • 2011-11-18 14:54:39.929-0400
      • 2011-11-18 14:54:39.929-04:00
    • 有效的 时间段字符串: PT4H18M3S 使用PT , H ,M S

⑵ pubdate 属性: 指定当前时间为 发布日期 (布尔属性)

  • <time> 时间标签 pubdate发布日期 属性
    • 如何指定 <time> 时间元素中的日期 / 时间 是文档(或最近的前辈 <article> 文章元素)的 发布日期 ?
      • 使用 pubdate 发布日期 属性
    • 日期 / 时间 = 发布日期
    • 语法
      • <time pubdate="pubdate">

  • 示例1: 表示 具体的时间 和节日
<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>

<p>
我在 <time datetime="2010-02-14">情人节</time> 有个约会。
</p>

在这里插入图片描述

  • 适用: 把具体的时间,或者 节日 , 时间相关的关键词,用时间标签 来表示
    • 节日: 可以在datetime日期 属性中,写明节日的日期
  • 显示上: 一般没有特别之处,可以用 css 添加特别的样式

  • 示例2: 表示 文章的发布日期
    • 属性搭配: datetime , pubdate
<article>
	<time datetime="2011-09-28" pubdate="pubdate"></time>
	
	Hello world. This is an article....
</article>

在这里插入图片描述

  • 在 文章标签中,使用 时间标签, time-datetime/和pubdate属性一起使用,注明 发布日期

  • 示例3: 日期,具体的时间点. 时间段
<p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">7月7日</time> in London's Hyde Park.</p>

<p>The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at least <time datetime="PT2H30M">2个小时 30分钟</time>.</p>
time {
    font-weight: bold;/* 给时间加粗*/
}

在这里插入图片描述


结束语

  • 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
    在这里插入图片描述
  • 捐助二维码:
    在这里插入图片描述

  • 参考文档

    • W3School 教程
    • MDN HTML 教程
  • 感谢:♥♥♥ 如果这篇文章对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
    在这里插入图片描述

  • 转载 请注明出处 ,Thanks♪(・ω・)ノ

    • 作者:Hey_Coder
    • 来源:CSDN
    • 原文:https://blog.csdn.net/VickyTsai/article/details/89639181
    • 版权声明:本文为博主原创文章,转载请附上博文链接!

本文链接: http://www.dtmao.cc/news_show_1100387.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?