• html文本格式化标签

    在网页中，有时需要为文字设置粗体、斜体、下划线或上下标等效果，这时就需要用到 HTML 中的文本格式化标签(也叫文本标签)。

    常用文本格式化标签

    名称标签
    粗体标签strong(推荐)、b
    斜体标签em(推荐)、i、cite
    中划线标签del(推荐)、s
    下划线标签ins(推荐)、u
    上标标签sup
    下标标签sub
    大字号标签big
    小子号标签small

    一、粗体标签

    粗体标签顾名思义，就是文字加粗。Html粗体标签有两种，一个是，一个是,两种标签用法上都没有区别，浏览器都支持这两种标签。

    下面看一个例子

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.4 文本格式化标签title>
    6.     head>
    7.     <body>
    8.         <h2>木兰花·拟古决绝词h2>
    9.         <p>人生若只如<b>初见b>，何事<strong>秋风strong>悲画扇。p>
    10.         <p>等闲变却故人心，却道故人心易变。p>
    11.         <p>骊山语罢清宵半，泪雨零铃终不怨。p>
    12.         <p>何如薄幸锦衣郎，比翼连枝当日愿。p>
    13.     body>
    14. html>

    运行浏览器后得到的效果如图

    附加说明：标签更加符合新的HTML标准的要求，标签却渐渐被淘汰，所有建议大家尽量使用标签来给文字加粗。

    二、斜体标签

    标签、、标签显示斜体文本效果。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。

    斜体标签在文档中的应用

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.4 文本格式化标签title>
    6.     head>
    7.     <body>
    8.         <h2>木兰花·拟古决绝词h2>
    9.         <p><em>人生em>若只如初见，何事秋风悲画扇。p>
    10.         <p>等闲变却故<i>人心i>，却道故人心易变。p>
    11.         <p>骊山语罢清宵半，泪雨零铃终不怨。p>
    12.         <p>何如薄幸锦衣郎，<cite>比翼连枝cite>当日愿。p>
    13.     body>
    14. html>

     运行浏览器后得到的效果如图

     

    附加说明：这三个斜体标签虽然效果都一致，但在使用中要明白标签定义文字为斜体。标签可以指明对某作品的引用，例如戏剧名，歌曲名，电影名等等。标签告诉浏览器把其中的文本表示为强调的内容。

    三、中划线标签

    中划线标签（删除线标签）、。 标签是 标签的缩写版本。

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.4 文本格式化标签title>
    6.     head>
    7.     <body>
    8.         <h2>《木兰花·拟古决绝词》h2>
    9.         <p><s>原价120元s>，现价50元！p>
    10.         <p><del>原价120元del>，现价50元！p>
    11.     body>
    12. html>

    运行浏览器后得到的效果如图 

    附加说明：虽然标签还能在文档中使用，但在 HTML 4 和 XHTML 中已经不再赞成使用了，所以以后要遇到用这种删除线的文本就请使用 来 替代它！

    四、下划线标签

    实例 使用 、 标签为文本添加下划线：

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.4 文本格式化标签title>
    6.     head>
    7.     <body>
    8.         <p>如果文本不是超链接，就不要<u>对其使用下划线u>。p>
    9.         <p><ins>使用ins标签实现的下划线效果ins>p>
    10.     body>
    11. html>

     

    运行浏览器后得到的效果如图

    附加说明：请尽量避免为文本加下划线 ,因为用户会把它混淆为一个超链接！当用户去点的时候发现没有链接，这样的用户体验就不好。通常应连同标签一同使用，来描述文档中的更新和修正。例如下面的示例：

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.4 文本格式化标签title>
    6.     head>
    7.     <body>
    8.         <p>本班实际人数<del>四十del> <ins>三十八ins> 人。p>
    9.     body>
    10. html>

     

    运行浏览器后得到的效果如图

    五、上标标签

    在html中，标签是使用来定义上标文本的，所谓上标文本就是显示在当前文本的右上角，而且比当前文本更小的文本内容。标签可以使用来添加脚注、添加数学中的n次方等。

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.4 文本格式化标签title>
    6.     head>
    7.     <body>
    8.         <h3>sup标签演示h3>
    9.         <p>2<sup>1sup>+3<sup>2sup>=11p>
    10.     body>
    11. html>

     

    运行浏览器后得到的效果如图

    附加说明： 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。

    六、下标标签

    标签是使用来定义下标，和相反。sub标签可以用来表示一些化学式，比如：“水”化学式中的下标“2”，就可以使用该标签来实现。

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.4 文本格式化标签title>
    6.     head>
    7.     <body>
    8.         <h3>sub标签演示h3>
    9.         <p>水的化学式是：H<sub>2sub>Op>
    10.         <p>双氧水的化学式：H<sub>2sub>O<sub>2sub>p>
    11.         <p>氧气的化学式：O<sub>2sub>p>
    12.     body>
    13. html>

     

    运行浏览器后得到的效果如图

    七、大字号标签

    标签呈现大号字体效果。使用 标签可以很容易地放大字体。这简直不能再简单了：浏览器显示包含在 标签和其相应的 标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 标签将不起任何作用。

    1. html>
    2. <html lang="zh">
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.3 段落标签title>
    6.     head>
    7.     <body>
    8.         <h2>木兰花·拟古决绝词h2>
    9.         <p>人生若只如初见，何事秋风悲画扇。p>
    10.         <p><big>等闲变却故人心，却道故人心易变。big>p>
    11.         <p>骊山语罢清宵半，泪雨零铃终不怨。p>
    12.         <p>何如薄幸锦衣郎，比翼连枝当日愿。p>
    13.     body>
    14. html>

     

    运行浏览器后得到的效果如图

    附加说明：用于配置字体增大的标签，但兼容性不好，在HTML5中再也不用big标签元素，W3C验证也是会提示错误的。所以不推荐使用。大家可以对此节做一个了解就行了。

    八、小字号标签

    标签呈现小号字体效果。 标签和它所对应的 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 标签将不起任何作用。

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.3 段落标签title>
    6.     head>
    7.     <body>
    8.         <h2>木兰花·拟古决绝词h2>
    9.         <p>人生若只如初见，何事秋风悲画扇。p>
    10.         <p><small>等闲变却故人心，却道故人心易变。small>p>
    11.         <p>骊山语罢清宵半，泪雨零铃终不怨。p>
    12.         <p>何如薄幸锦衣郎，比翼连枝当日愿。p>
    13.     body>
    14. html>

     

    运行浏览器后得到的效果如图

    附加说明：与 标签类似， 标签也可以嵌套，从而连续地把文字缩小。每个 标签都把文本的字体变小一号，直到达到下限的一号字。例如下面的案例

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>4.3 段落标签title>
    6.     head>
    7.     <body>
    8.         <h2><small>木兰<small>花small>small>·拟古决绝词h2>
    9.         <p>人生若只如初见，何事秋风悲画扇。p>
    10.         <p>等闲变却故人心，却道故人心易变。p>
    11.         <p>骊山语罢清宵半，泪雨零铃终不怨。p>
    12.         <p>何如薄幸锦衣郎，比翼连枝当日愿。p>
    13.     body>
    14. html>

     

    运行浏览器后得到的效果如图

    总结

    本章节大致就是这些内容了，这八大标签在文本编辑中涉及到比较多，但在我们的html页面整体架构上用得还是比较少的。此章节可以作为一个简单的了解即可。

     

  • 相关阅读:
    简述人工智能，及其三大学派：符号主义、连接主义、行为主义
    HTML5响应式网站模板源码 自助建站平台系统源码 可视化后台+700多套模板+安装部署教程
    【数据分享】成渝城市群规划范围数据（市县两级/shp格式）
    [应用推荐]Web Scraper——轻量数据爬取利器
    面向对象高级
    Spring原生api操作之如何在spring配置文件添加Bean对象到Spring容器
    【es6】解决箭头函数所有的问题，箭头函数的 this 指针，使用 new 操作符
    ubuntu安装依赖包时显示需要先安装其所需要的各种安装包）apt-get源有问题
    (二)docker：建立oracle数据库mount startup
    sqli-labs(less-11)
  • 原文地址：https://blog.csdn.net/JSPSEO/article/details/125904901