本篇博客介绍一些常用的HTML文本标签。

em和strong

em表示一段内容中的着重点，表示语气上的强调；em在浏览器中默认是斜体。
strong表示一段内容的重要性，表示语义上的强调；strong在浏览器中默认是粗体。
两个标签都表示一个强调的内容。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>em和strong</title></head><body><p><em>试问岭南应不好？</em> <br /><strong>却道，此心安处是吾乡。</strong> <br /></p></body>
</html>

i和b

i标签表示斜体，b标签表示加粗。
HTML5中规定，对于不需要着重的内容而只是单纯需要斜体或粗体，就可以使用i和b标签。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>i和b</title></head><body><p><i>试问岭南应不好？</i> <br /><b>却道，此心安处是吾乡。</b> <br /></p></body>
</html>

small标签

small标签中的内容会比它的父元素中的文字要小一些。
在HTML5中会使用small标签来表示一些细则一类的内容；如：合同中的小字；网站的版权声明都可以放到small中。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>small标签</title></head><body><p>试问岭南应不好？ <br />却道，此<small>心安</small>处是吾乡。 <br /></p></body>
</html>

cite标签

网页中所有加书名的内容都可以使用cite标签，表示参考的内容。如：书名；歌名；话剧名；电影名。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>cite标签</title></head><body><p><cite>《定风波·南海归赠王定国侍人寓娘》</cite> <br />苏轼 <br />常羡人间琢玉郎。天应乞与点酥娘。尽道清歌传皓齿。风起。雪飞炎海变清凉。 <br />万里归来颜愈少。微笑。笑时犹带岭梅香。试问岭南应不好。却道。此心安处是吾乡。 <br /></p></body>
</html>

注意：我们看到cite标签的显示是斜体，我们对于HTML中的标签，并不关心它们的表现，只关心其语义。表现都是通过CSS来修改的。

q和blockquote

q标签表示一个短的引用（行内引用），q标签引用的内容，浏览器会默认加上引号。
blockquote标签表示一个长引用（块级引用），不能放在p标签中。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>q和blockquote</title></head><body><p>《周易》曰：<q>天行健，君子以自强不息；地势坤，君子以厚德载物。</q></p><blockquote>《周易》曰：天行健，君子以自强不息；地势坤，君子以厚德载物。</blockquote></body>
</html>

sup和sub

使用sup标签可以设置一个上标。
使用sub标签可以设置一个下标。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>sup和sub</title></head><body><p>苏轼<sup><a href="#">[1]</a></sup> <br />H<sub>2</sub>O <br /></p></body>
</html>

ins和del

ins表示一个插入的内容，ins中的内容会自动添加下划线。
del表示一个删除的内容，del中的内容会自动添加删除线。

<!doctype html>
<html><head><meta charset = "utf-8" /><title>ins和del</title></head><body><p><q>上善若水，水善利万物而不争，处众人之所恶，故几于道。</q>这句话是<ins>老子</ins>说的。 <br /><del>这句话需要被删除。</del></p></body>
</html>

code和pre

code是语义标签，专门用来表示代码，并不会保留格式。
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格。
一般这两个标签会结合使用来表示一段代码。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>code和pre</title></head><body><code>#include <iostream>int main() {std::cout << "hello, world!" << std::endl;return 0;}  </code><pre>#include <iostream>int main() {std::cout << "hello, world!" << std::endl;return 0;} </pre><code><pre>#include <iostream>int main() {std::cout << "hello, world!" << std::endl;return 0;}  </pre></code></body>
</html>

列表

在HTML中可以创建列表，网页中一共有三种列表：

无序列表；
有序列表；
定义列表。

无序列表

使用ul标签创建一个无序列表。
使用li在ul中创建列表项。
通过type属性可以修改无序列表的项目符号。不过一般不推荐使用项目符号，因为不同的项目符号在不同的浏览器中显示效果不同。所以一般都是通过CSS去掉项目符号，如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>无序列表</title><style type="text/css">.c1 {list-style: none;}</style></head><body><ul type="disc"><li>李白</li><li>杜甫</li></ul><ul type="square"><li>李白</li><li>杜甫</li></ul><ul type="circle"><li>李白</li><li>杜甫</li></ul><!--不显示项目符号--><ul class="c1"><li>李白</li><li>杜甫</li></ul></body>
</html>

有序列表

有序列表和无序列表类似，使用ol替换ul即可。
有序列表使用有序的项目符号作为项目符号。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>有序列表</title><style type="text/css">.c1 {list-style: none;}</style></head><body><ol type="1"><li>李白</li><li>杜甫</li></ol><ol type="a"><li>李白</li><li>杜甫</li></ol><ol type="A"><li>李白</li><li>杜甫</li></ol><ol type="i"><li>李白</li><li>杜甫</li></ol><ol type="I"><li>李白</li><li>杜甫</li></ol><!--不显示项目符号--><ol class="c1"><li>李白</li><li>杜甫</li></ol></body>
</html>

定义列表

定义列表用来对一些词汇或内容进行定义。
使用dl标签创建一个定义列表。dl中有两个子标签，分别是dt和dd，dt表示被定义的内容，dd表示对定义内容的描述。

代码演示：

<!doctype html>
<html><head><meta charset = "utf-8" /><title>定义列表</title></head><body><dl><dt>李白</dt><dd>唐代伟大的浪漫主义诗人</dd><dt>杜甫</dt><dd>唐代伟大的现实主义文学作家</dd></dl></body>
</html>

『HTMLCSS』文本标签相关推荐

JavaWeb『HTMLCSS』
前言:参考于尚硅谷的javaweb的笔记,复习专用第一节 HTML简介 1.名词解释 HTML是Hyper Text Markup Language的缩写.意思是『超文本标记语言』. html语言 ...
『HTMLCSS』第一个网页
根据W3C标准,一个网页主要由三个部分组成:结构(HTML).表现(CSS)和行为(JavaScript). 前端三剑客根据W3C标准,一个网页主要由三个部分组成:结构.表现和行为. 结构:HTML ...
『HTMLCSS』内联框架和超链接
本片博客主要介绍内联框架和超链接相关的一些知识,最后有一个简单的练习. 内联框架内联框架,有点像图片标签:使用内联框架,可以在一个页面中引入一个外部页面,使用iframe标签来实现.简单属性如下: ...
『转载』Debussy快速上手（Verdi相似）
『转载』Debussy快速上手(Verdi相似) Debussy 是NOVAS Software, Inc(思源科技)发展的HDL Debug & Analysis tool,这套软体主要不是 ...
『参考』.net CF组件编程（4）——为自定义组件添加工具箱图标!
前言: 在前三篇的文章中,和大家一起创建了一个用于TCP连接检测的小组件,如果你记不得了,可以通过以下链接去回顾一下: 『参考』.net CF组件编程(1)--基础之后『参考』.net CF组件编程 ...
『TensorFlow』命令行参数解析
argparse很强大,但是我们未必需要使用这么繁杂的东西,TensorFlow自己封装了一个简化版本的解析方式,实际上是对argparse的封装脚本化调用tensorflow的标准范式: impo ...
『Numpy』常用方法记录
numpy教程防止输出省略号 import numpy as np np.set_printoptions(threshold=np.inf) 广播机制 numpy计算函数返回默认是一维行向量: i ...
2018年『web』开发者不得不知的技术趋势
作为一个『web』开发者,无论是做前端还是后端,都应该时刻保持着对技术的敏感性.技术的流行需要一定时间的沉淀,有哪些web相关的技术会可能会在2018年成为web开发的新宠呢?下面列举业界经过实践并且 ...
『TensorFlow』函数查询列表_张量属性调整
博客园首页新随笔新文章联系订阅管理『TensorFlow』函数查询列表_张量属性调整数据类型转换Casting 操作描述 tf.string_to_number (string_te ...

『HTMLCSS』文本标签

em和strong

i和b

small标签

cite标签

q和blockquote

sup和sub

ins和del

code和pre

列表

无序列表

有序列表

定义列表

『HTMLCSS』文本标签相关推荐

最新文章

热门文章