本篇博客介绍一些常用的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>
3895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
