文本标签及文本样式
Posted xuweiweiwoaini
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本标签及文本样式相关的知识，希望对你有一定的参考价值。
1 文本标签
1.1 概述
- 标识网页中的不同内容。
1.2 <em>和<strong>
- <em>标签用于表示一段内容中的着重点。
- <strong>标签用于标识一个内容的重要性。
- 两个标签可以单独使用，也可以一起使用。
- 通常，<em>显示为斜体，而<strong>显示为粗体。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- em和strong都表示一个强调的内容 - em主要表示语气上的强调，em在浏览器中默认使用斜体表示 - strong表示强调的内容，比em更强烈，默认使用粗体表示 --> <p>今天天气<em>真不错</em></p> <p> <strong>好好学习，天天向上！</strong> </p> </body> </html>
1.3 <i>和<b>
- i标签会使文字变为斜体。
- b标签会使文字变为粗体。
- 这两个标签和em以及strong类似，但是这两个标签没有语义。
- 根据HTML5标准，如果我们只想设置文本的特殊显示，而不需要强调内容的时候就可以使用i和b标签。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- em和strong都表示一个强调的内容 - em主要表示语气上的强调，em在浏览器中默认使用斜体表示 - strong表示强调的内容，比em更强烈，默认使用粗体表示 --> <p>今天天气<em>真不错</em></p> <p> <strong>好好学习，天天向上！</strong> </p> <!-- i标签中的内容会以斜体显示 b标签中的内容会以粗体显示 H5规范中规定，对于不需要着重的内容而是单纯的加粗或斜体，就可以使用i标签和b标签 --> <p> <i>我是i标签中的文字</i> <b>我是b标签中的文字</b> </p> </body> </html>
1.4 <small>
- small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。
- 浏览器在显示small标签时会显示一个比父元素小的字号。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- em和strong都表示一个强调的内容 - em主要表示语气上的强调，em在浏览器中默认使用斜体表示 - strong表示强调的内容，比em更强烈，默认使用粗体表示 --> <p>今天天气<em>真不错</em></p> <p> <strong>好好学习，天天向上！</strong> </p> <!-- i标签中的内容会以斜体显示 b标签中的内容会以粗体显示 H5规范中规定，对于不需要着重的内容而是单纯的加粗或斜体，就可以使用i标签和b标签 --> <p> <i>我是i标签中的文字</i> <b>我是b标签中的文字</b> </p> <!-- small标签中的内容会比它的父元素中的文字小一些 在HTML5中，使用small标签来表示一些细则一类的内容 比如：合同中的小字，网站的版权声明都可以放到small标签中 --> <p> 我是p标签中的文字 <small>©2020 版权所有，翻版必究。</small> </p> </body> </html>
1.5 <cite>
- 使用cite标签可以指明对某内容的引用或参考。例如：戏剧、文章或图书的标题。歌曲、电影、照片的名称等。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- em和strong都表示一个强调的内容 - em主要表示语气上的强调，em在浏览器中默认使用斜体表示 - strong表示强调的内容，比em更强烈，默认使用粗体表示 --> <p>今天天气<em>真不错</em></p> <p> <strong>好好学习，天天向上！</strong> </p> <!-- i标签中的内容会以斜体显示 b标签中的内容会以粗体显示 H5规范中规定，对于不需要着重的内容而是单纯的加粗或斜体，就可以使用i标签和b标签 --> <p> <i>我是i标签中的文字</i> <b>我是b标签中的文字</b> </p> <!-- small标签中的内容会比它的父元素中的文字小一些 在HTML5中，使用small标签来表示一些细则一类的内容 比如：合同中的小字，网站的版权声明都可以放到small标签中 --> <p> 我是p标签中的文字 <small>©2020 版权所有，翻版必究。</small> </p> <!-- 网页中的所有加书名号的内容都可以使用cite标签，表示参考的内容 比如：书名、歌曲名、电影名…… --> <p> <cite>《诗词》</cite>坐地日行八万里，巡天遥看一千河 </p> </body> </html>
1.6 <blockquote>和<q>
- blockquote和q表示标记所引用的文本。
- blockquote用于长引用，q用于短引用。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- em和strong都表示一个强调的内容 - em主要表示语气上的强调，em在浏览器中默认使用斜体表示 - strong表示强调的内容，比em更强烈，默认使用粗体表示 --> <p>今天天气<em>真不错</em></p> <p> <strong>好好学习，天天向上！</strong> </p> <!-- i标签中的内容会以斜体显示 b标签中的内容会以粗体显示 H5规范中规定，对于不需要着重的内容而是单纯的加粗或斜体，就可以使用i标签和b标签 --> <p> <i>我是i标签中的文字</i> <b>我是b标签中的文字</b> </p> <!-- small标签中的内容会比它的父元素中的文字小一些 在HTML5中，使用small标签来表示一些细则一类的内容 比如：合同中的小字，网站的版权声明都可以放到small标签中 --> <p> 我是p标签中的文字 <small>©2020 版权所有，翻版必究。</small> </p> <!-- 网页中的所有加书名号的内容都可以使用cite标签，表示参考的内容 比如：书名、歌曲名、电影名…… --> <p> <cite>《诗词》</cite>坐地日行八万里，巡天遥看一千河 </p> <!-- q标签表示一个短的引用（行内引用） q标签引用的内容，浏览器会默认加上引号 blockquote标签表示一个长引用（块级引用） --> <p> 子曰：<q>学而时习之，不亦说乎！</q> </p> <div> 子曰： <blockquote>有朋自远方来，不亦乐乎？</blockquote> </div> </body> </html>
1.7 <sup>和<sub>
- sup和sub用于定义上标和下标。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- em和strong都表示一个强调的内容 - em主要表示语气上的强调，em在浏览器中默认使用斜体表示 - strong表示强调的内容，比em更强烈，默认使用粗体表示 --> <p>今天天气<em>真不错</em></p> <p> <strong>好好学习，天天向上！</strong> </p> <!-- i标签中的内容会以斜体显示 b标签中的内容会以粗体显示 H5规范中规定，对于不需要着重的内容而是单纯的加粗或斜体，就可以使用i标签和b标签 --> <p> <i>我是i标签中的文字</i> <b>我是b标签中的文字</b> </p> <!-- small标签中的内容会比它的父元素中的文字小一些 在HTML5中，使用small标签来表示一些细则一类的内容 比如：合同中的小字，网站的版权声明都可以放到small标签中 --> <p> 我是p标签中的文字 <small>©2020 版权所有，翻版必究。</small> </p> <!-- 网页中的所有加书名号的内容都可以使用cite标签，表示参考的内容 比如：书名、歌曲名、电影名…… --> <p> <cite>《诗词》</cite>坐地日行八万里，巡天遥看一千河 </p> <!-- q标签表示一个短的引用（行内引用） q标签引用的内容，浏览器会默认加上引号 blockquote标签表示一个长引用（块级引用） --> <p> 子曰：<q>学而时习之，不亦说乎！</q> </p> <div> 子曰： <blockquote>有朋自远方来，不亦乐乎？</blockquote> </div> <!-- sup和sub用于定义上标和下标 --> <p> 10<sup>3</sup> H<sub>2</sub>O </p> </body> </html>
1.8 <ins>和<del>
- ins表示插入的内容，显示的时候通常会加上下划线。
- del表示删除的内容，显示的时候通常会加上删除线。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- em和strong都表示一个强调的内容 - em主要表示语气上的强调，em在浏览器中默认使用斜体表示 - strong表示强调的内容，比em更强烈，默认使用粗体表示 --> <p>今天天气<em>真不错</em></p> <p> <strong>好好学习，天天向上！</strong> </p> <!-- i标签中的内容会以斜体显示 b标签中的内容会以粗体显示 H5规范中规定，对于不需要着重的内容而是单纯的加粗或斜体，就可以使用i标签和b标签 --> <p> <i>我是i标签中的文字</i> <b>我是b标签中的文字</b> </p> <!-- small标签中的内容会比它的父元素中的文字小一些 在HTML5中，使用small标签来表示一些细则一类的内容 比如：合同中的小字，网站的版权声明都可以放到small标签中 --> <p> 我是p标签中的文字 <small>©2020 版权所有，翻版必究。</small> </p> <!-- 网页中的所有加书名号的内容都可以使用cite标签，表示参考的内容 比如：书名、歌曲名、电影名…… --> <p> <cite>《诗词》</cite>坐地日行八万里，巡天遥看一千河 </p> <!-- q标签表示一个短的引用（行内引用） q标签引用的内容，浏览器会默认加上引号 blockquote标签表示一个长引用（块级引用） --> <p> 子曰：<q>学而时习之，不亦说乎！</q> </p> <div> 子曰： <blockquote>有朋自远方来，不亦乐乎？</blockquote> </div> <!-- sup和sub用于定义上标和下标 --> <p> 10<sup>3</sup> H<sub>2</sub>O </p> <!-- 可以使用del标签表示一个删除的内容 del标签中的内容，会自动添加删除线 --> <p> <del>17.75</del> <br> 15.54 <br> </p> <!-- ins表示一个插入的内容 ins中的内容，会自动增加下划线 --> <p> 我们的老师真<ins>好</ins>啊！ </p> </body> </html>
1.9 <code>和<pre>
- code标签专门用来表示一段代码。
- pre标签表示预格式化文本。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- em和strong都表示一个强调的内容 - em主要表示语气上的强调，em在浏览器中默认使用斜体表示 - strong表示强调的内容，比em更强烈，默认使用粗体表示 --> <p>今天天气<em>真不错</em></p> <p> <strong>好好学习，天天向上！</strong> </p> <!-- i标签中的内容会以斜体显示 b标签中的内容会以粗体显示 H5规范中规定，对于不需要着重的内容而是单纯的加粗或斜体，就可以使用i标签和b标签 --> <p> <i>我是i标签中的文字</i> <b>我是b标签中的文字</b> </p> <!-- small标签中的内容会比它的父元素中的文字小一些 在HTML5中，使用small标签来表示一些细则一类的内容 比如：合同中的小字，网站的版权声明都可以放到small标签中 --> <p> 我是p标签中的文字 <small>©2020 版权所有，翻版必究。</small> </p> <!-- 网页中的所有加书名号的内容都可以使用cite标签，表示参考的内容 比如：书名、歌曲名、电影名…… --> <p> <cite>《诗词》</cite>坐地日行八万里，巡天遥看一千河 </p> <!-- q标签表示一个短的引用（行内引用） q标签引用的内容，浏览器会默认加上引号 blockquote标签表示一个长引用（块级引用） --> <p> 子曰：<q>学而时习之，不亦说乎！</q> </p> <div> 子曰： <blockquote>有朋自远方来，不亦乐乎？</blockquote> </div> <!-- sup和sub用于定义上标和下标 --> <p> 10<sup>3</sup> H<sub>2</sub>O </p> <!-- 可以使用del标签表示一个删除的内容 del标签中的内容，会自动添加删除线 --> <p> <del>17.75</del> <br> 15.54 <br> </p> <!-- ins表示一个插入的内容 ins中的内容，会自动增加下划线 --> <p> 我们的老师真 <ins>好</ins> 啊！ </p> <!-- 需要在页面中编写一些代码 pre标签是一个预格式标签，会将代码中的格式保存，不会忽略多个空格 code专门用来表示代码 --> <pre> <code> public class HelloWorld{ public static void main(String[] args){ System.out.println("Hello World"); } } </code> </pre> </body> </html>
1.10 列表
1.10.1 概述
- 列表就相当于去超市购物时的那个购物清单。在HTML中也可以创建列表，在网页中一共有三种列表。
- ①无序列表。
- ②有序列表。
- ③定义列表。
1.10.2 有序列表
- 使用ol和li来创建一个有序列表。
- 语法：
<ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol>
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序列表</title> </head> <body> <ol> <li>张三</li> <li>李四</li> <li>王五</li> </ol> </body> </html>
1.10.3 无序列表
- 使用ul和li来创建一个无序列表。
- 语法：
<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul>
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表</title> </head> <body> <ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul> </body> </html>
1.10.4 定义列表
- 使用dl、dt、dd来创建一个定义列表。
- 语法：
<dl> <dt>定义项</dt> <dd>描述</dd> </dl>
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义列表</title> </head> <body> <dl> <dt>Java</dt> <dd> <p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p> <p>Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。</p> </dd> </dl> </body> </html>
2 文本格式化
以上是关于文本标签及文本样式的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap中语义化标签字体风格文本布局列表排列特殊字体颜色及特殊背景颜色