文本标签及文本样式
时间：2020-02-01 12:23:33
收藏：0
阅读：78
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 文本格式化
评论（0）