江离书生

vuePress-theme-reco 史博辉    2024
江离书生 江离书生

Choose mode

  • dark
  • auto
  • light
主页
分类
  • html
  • java
  • 日常生活
  • markdown
  • mysql
  • nvm
  • pnpm
  • 常见问题
  • vue3
标签
时间轴
author-avatar

史博辉

51

文章

9

标签

主页
分类
  • html
  • java
  • 日常生活
  • markdown
  • mysql
  • nvm
  • pnpm
  • 常见问题
  • vue3
标签
时间轴
  • HTML

    • HTML5 简介

    • HTML5 的常用元素与属性

      • HTML5 的常用元素与属性
      • HTML5 保留的常用元素
      • 基本元素
      • 文本格式相关元素
      • 语义相关元素
      • 使用 a 元素添加超链接和锚点
      • 列表相关元素
    • HTML5 表单相关的元素和属性

    • HTML5 的绘图支持

    • HTML5 的多媒体支持

    • 级联样式单与 CSS 选择器

    • 字体与文本相关属性

    • 背景、边框和边距相关属性

    • 大小、定位、轮廓相关属性

    • 盒模型与布局相关属性

    • 表格、列表相关属性及 media query

    • 变形与动画相关属性

    • JavaScript 语法详解

    • DOM 编程详解

    • 事件处理机制

    • 本地存储与离线应用

    • 文件支持与二进制数据

    • Web Worker 多线程 API

    • 客户端通信

    • HTML5 疯狂俄罗斯方块

文本格式相关元素

vuePress-theme-reco 史博辉    2024

文本格式相关元素

史博辉 2023-07-01 01:23:00 html

下面这些元素让文本内容在浏览器中呈现出特定效果。

  • <b>:定义粗体文本。该元素可以指定 id、class、style、dir、title 等通用属性,还可以指定 onclick 等各种事件属性。
  • <i>:定义斜体文本。该元素可以指定 id、class、style、dir、title 等通用属性,还可以指定 onclick 等各种事件属性。
  • <em>:定义强调文本,实际效果与斜体文本差不多。该元素可以指定 id、class、style、dir、title 等通用属性,还可以指定 onclick 等各种事件属性。
  • <strong>:定义粗体文本。与<b>元素的作用和用法基本相同。

HTML5 为<strong.../>元素增加了语义,使用<strong.../>包起来的文本代表重要的文本。

  • <small>:定义小号字体文本。该元素可以指定 id、class、style、dir、title 等通用属性,还可以指定 onclick 等各种事件属性。

奇怪的是,HTML5 删除了原有的<big.../>元素,<big.../>元素用于定义大号字体文本。但 HTML5 保留了<small.../>元素,且对<small.../>元素进行了重新定义,HTML5 定义了<small.../>元素专门用于标识所谓的“小字印刷体”,通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字。

  • <sup>:定义上标文本。该元素可以指定 id、class、style、dir、title 等通用属性,还可以指定 onclick 等各种事件属性。
  • <sub>:定义下标文本。该元素可以指定 id、class、style、dir、title 等通用属性,还可以指定 onclick 等各种事件属性。
  • <bdo>:定义文本显示的方向。该元素可以指定 id、class、style、dir、title 等通用属性还可以指定 onclick 等各种事件属性。除此之外,该元素应该指定 dir 属性,该属性值只能是 ltr 或者 rtl,用于指定文本的排列方向。

上面这些文本格式化元素能包含文本、图像、超链接、文本格式化元素和表单控件元素等,除此之外,这些元素还可以和<span...>元素相互包含。如下 HTML 页面示范了这些文本格式化相关元素的用法。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文本格式化元素</title>
</head>
<body>
    <span><b>加粗文本</b></span><br />
    <span><i>斜体文本</i></span><br />
    <span><b><i>粗斜体文本</i></b></span><br />
    <span><em>被强调的文本</em></span><br />
    <p><strong>加粗文本</strong></p>
    <small><span>小号字体文本</span></small><br />
    <div>普通文本<sup>上标文本</sup></div>
    <span>普通文本<strong><sub>下标加粗文本</sub></strong></span><br />
    <!--指定文本从左向右(正常情况)排列 -->
    <bdo dir="ltr">从左向右排列的文本</bdo><br/>
    <!--指定文本从右向左排列 -->
    <bdo dir="rtl">从右向左排列的文本</bdo><br />
</body>
</html>

文本格式化元素的效果

如果希望让 HTML 页面内的文本更美观,例如改变它们的颜色、背景等,这此就不再由 HTML 元素来完成了。此处介绍的文本格式化元素只能进行一些基本格式化,如果需要对文本进行更丰富样式的格式化,则建议使用 CSS 样式单,关于CSS样式单请参考本书第6章内容。