HTML标签是由尖括号括起来的词,如<html>,<head>,<body>等。标签通常成对出现。一对中的第一个标签是开始标签,第二个标签是结束标签。也可以将开始标签称为起始标签,结束标签称为闭合标签。
关于HTML文档的结构以及标签的意义可以参考:
我们着重介绍HTML中一些标签的用法。
1. 文本标签
1.1 段落标签<p>
<html>
<!-- html文档中可以不用头标签 -->
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落元素由 p 标签定义</p>
</body>
</html>
浏览器会自动地在段落的前后添加空行,段落标签可以不加结束标签,大多数浏览器可以正常显示出来,但是不建议这么做,因为不能提现段落标签的语义化。
当显示页面时,浏览器会移除内容中多余的空格和空行(不仅是<p>标签的内容)。所有连续的空格或空行都会被算作一个空格。
1.2 标题标签<hx>
标题(Heading)是通过<h1> ~ <h6> 等标签进行定义的,x代表标题的等级(大小)。<h1> 定义最大的标题,<h6> 定义最小的标题。
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
浏览器会自动地在标题的前后添加空行。
<hx>标签只用于标题,不要仅仅是为了产生粗体或大号的文本而使用标题,这会破坏标签的语义化,我们用CSS可以很容易的做到这一点。
1.3 强调标签<em>,<strong>
<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。
<html>
<body>
<em>em标签</em>
<br/><!-- 换行标签 -->
<strong>strong标签</strong>
</body>
</html>
1.4 引用标签
引用标签作用是给标签内的内容两侧加上引号,感觉这个操作很废是吧,其实不然,还是为了语义化,HTML所有标签共同维护的语义化。
<q> 用于短的引用
<blockquote>用于长引用
1.5 换行标签<br/>
像在<p>,<hx>,<q>等标签内,文本的换行会被浏览器忽略,但是可以使用<br>进行换行,这是它唯一的作用。
1.6 分割线标签<hr/>
<hr>可以产生一条分割线,它的样式可以通过CSS进行改变。
1.7 特殊字符:
HTML提供了一些可以加在页面中的特殊字符,如下:
字符 | 显示结果 |
---|---|
| 空格 |
® | ® 已注册 |
© | © 版权 |
™ | ™ 商标 |
2. address标签
<address>标签,为网页加入地址信息,是标签包围的内容另起一行,并且首行缩进。在浏览器上显示的样式为斜体,可以使用css样式来修改<address>标签的默认样式。
地址标签的唯一作用就是语义化。
3. code标签
<code>标签描述一行代码
<pre>预格式化文本,可以描述多行代码
在<pre>标签中的文本会保留空格和换行符。
4. 列表标签
4.1 无序列表
<ul>标签定义无序列表,每行用<li>表示。
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
效果:
- 第一行
- 第二行
4.2 有序列表
<ol>标签定义有序列表,每行用<li>表示。
<ol>
<li>第一行</li>
<li>第二行</li>
</ol>
效果:
- 第一行
- 第二行
4.3 自定义列表
<dl>标签表示自定义列表, 每个自定义列表以 <dt> 开始。每个自定义列表的行以 <dd> 开始。
<dl>
<dt>
<ol>
<li>第一行</li>
<li>第二行</li>
</ol>
</dt>
<dt>
</dt>
<ul>
<li>第一行</li>
<li>
<ol>
<li>第一行</li>
<li>第二行</li>
</ol>
</li>
</ul>
</di>
显示效果:
-
- 第一行
- 第二行
- 第一行
-
- 第一行
- 第二行
自定义列表可以互相嵌套。
可以通过CSS样式表对列表的显示进行修改。