HTML 超文本标记语言
- 用一组标签去标记内容, 比如: `<button>按钮</button>`
- 被浏览器解析、渲染
- 根据标签书写顺序从上到下,从左到右渲染
- HTML 标签都是以`<`开始并以`>`结束,中间包裹指定关键字
- 标签不区分大小写, 强制要求各位小写
- 标签基本是成对出现的, 把内容前边的标签称为开始标记(起始标签),例如`<button>`
`</button>`就称为结束标记
- 标签也有特殊的,比如`<br/>`。自封闭标签或自结束标签
### 元素
HTML 是使用标签标记内容。 比如: 使用 `button` 标签渲染按钮
```html
<button>我是按钮</button>
```
把上面整个内容(开始标签 + 内容 + 结束标签)称为 元素
### 属性(attribute)
标签可以定义属性(attr),属性的作用就是更好的去描述标签。属性都是键值对的形式进行声明
`key=value` 并且都声明在开始标记中。
### 元素间的关系
一个网页会有多个元素,根据元素的位置(书写位置)可以将元素间的关系划分为以下几类:
- 父子元素 (直接)
- 同级元素(兄弟)
- 后代元素(包含)
**父子元素**
一个元素的内容中有另外一个元素则称为父子元素。
```html
<div>
<span>子元素</span>
<button>按钮</button>
</div>
```
`div`元素的内容包含两个元素(`span`和`button`),这种情况就可以称作:`div`是`span`和`button`的父元素。相反`span`和`button`是`div`的 (直接)子元素
**同级元素**:
```html
<div>
<span>子元素</span>
<button>按钮</button>
</div>
```
`span`和`button` 有相同的父元素,那么`span`和`button`就是同级元素
**后代**
```html
<div>
<p>
<span>span元素</span>
</p>
</div>
```
`span`的直接父元素是`p`元素,`p`的直接父元素是`div`。 我们把`span`和`p`元素都称为`div`的后代元素。
### 结构
标准的网页结构如下:
```html
<!-- 文档声明,告诉浏览器这个页面是用 html5 解析 -->
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
```
整个网页会形成一棵树,树的每个枝叶都是每一个标签.
![](dom-tree.png)
## 常用的标签
### 分类
**行级元素**
默认情况下,元素不能占父元素一行的元素称为行级元素(行元素)
- 不换行
**块级元素**
默认情况下,元素占父元素一行的元素称为块元素
- 默认换行,独立存在
**hn**
**br**
**form**
**input**
**button**
**img**
**div**
**span**
**hr**
**audio**
**video**
**select**
**textarea**
**list列表**
ul ol dl
**table**
**a**
**p**
**其他**