# 标签

# 什么是标签？

标签也称之为标记、元素。在HTML语言中，是用于描述功能的符号。比如<a>、<b>、<div>、<p>，标签在使用时需要用<>括起来。

# 标签的类型

1、封闭类型标签，也称为“双标签”，是由开始标签和结束标签共同组成的，必须成对出现， 内容要写在两个标签之间的位置，如：

<div>这是一个块标签<div/>
<p>这是一个段落标签<p/>

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

如果你在使用双标签时忘记写结束标签了，大多数浏览器也会正确显示的

<p>这是一段文字

但是，这是一个不合规的写法，而且在特殊情况下会出现不可预料的错误，我们要避免这种情况发生。

2、非封闭类型标签，也称为“单标签”或“空标签”，可以没有结束符号 /

<br>  
<hr>  
<img> 
<input>

等同于

<br/> 
<hr/> 
<img/> 
<input/>

单标签因为没有封闭标签，所以就不能嵌套其他的内容。

标签的嵌套

在一对标签中，允许出现另一对标签，叫做嵌套标签。

<div>
	<p>文本内容</p>
</div>

# 标签的属性和值

# 什么是属性？

属性是用来修饰标签的，让标签的自身状态或展现样式更加丰富。

<p align="center">这是一个居中对齐的标题</p>

这里的 align 就是 p 标签的属性，属性值是 center，属性值使用引号（单引、双引）包裹，但更多的使用双引号。

也就是，双标签写法：

<标签名 属性="值"></标签名>

单标签写法：

<标签名 属性="值" />

# 四大基础属性

HTML中任何标签都会具备的属性

1、id：定义元素在页面中独一无二标识，相当于一个不能重复的名字

2、title：定义鼠标移入到元素上时所提示的文本

3、class：类，定义元素要引用的类选择器（CSS中使用）

4、style：定义元素的内联（或者叫 行内）样式（CSS中使用）

<div id="container" title="容器" align="center">这是一段文本</div>

代码解释：定义一个div元素，定义其id属性为container，定义鼠标移入元素时提示为“容器”，并且让内部文本水平居中对齐。

# 其他属性

除了四大基本属性外，不同的标签还拥有自己特有的属性，例如：

<a href="www.luoyy.top" target="_blank">跳转链接</a>

代码解释：a标签的功能是用于链接跳转，href属性是跳转的链接地址，target属性定义跳转的方式，这里的“_blank”表示在浏览器的新窗口中打开链接。

<img src="www.luoyy.top/images/img1.jpg" width="500px" height="300px"/>

代码解释：img标签的功能是用于展示图片，src属性是图片的地址，width属性定义展示图片的宽度，height属性定义展示图片的高度。

# 字符实体

在HTML语言中，有些字符已经被预定义了，例如小括号（<）和大括号（>），如果代码中的文字被<>包裹住了，浏览器解析时就会认为被包裹的是标签名称，并已标签的方式解析，举个列子：

<div>
	下面是一个段落
    <p>这是一段文字</p>
</div>

上面的代码在浏览器中展示出来是这样的:

但假如我想在浏览器中看到这样的展示效果：

怎么办呢？这里我们就需要使用到字符实体替换预定义的字符了。

<div>
	下面是一个段落
	<br>
	&lt;p&gt;这是一段文字&lt;/p&gt;
</div>

使用&lt；替换 < ，使用&gt；替换 >就行了。

这里的**&lt；就是字符实体的实体名称，它等价于实体编号&#60；**。

常用的实体字符（注意分号是英文分号）：

# 文本标记

下面这些标签是特定用来修饰文本样式的：

特点：多个标记与其他文本会在一行内显示。

例子：

<div>
	这是一段<b>文本</b>描述，它<i>包含</i>了很多<u>文本标记</u>，使用<s>这些标签</s>包裹文字<sup>就能</sup>产生不同的<sub>效果</sub>。
</div>

效果：

# 标题元素

下面这些标签是特定用来描述标题等级的：

特点：

1、 h1一级标题最大，h6六级标题最小；

2、 每个标题独占一行

3、 每个标题都会加粗

4、 每个标题都具备上下垂直的空白距离

5、 每个标题都具备align属性，取值为left、right、center中的一个

例子：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>效果对比</p>

效果：

# 段落元素

# 换行元素

# 分割线元素

# 预格式化元素

# 分区元素

# 块级元素

# 行内元素

# 结构标记元素

# 注意