## 标题标签
#### 语法　　
```html
....
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
...
<h6>h6</h6>
....
```



#### 说明　　
标题标签h1到h6，字号逐渐减小、重要性程度逐渐递减
 　　
 　　
 　　
## 段落标签  
```html
<p>
  这是段落标签  
</p>  
```
### 相关补充    
1. 默认情况下，浏览器会在标题和段落、段落与段落之间添加垂直间距，可通过CSS改变  
2. 段落属于块级元素  


## 指定细则  
  通常指旁注，包括免责声明、注意事项、法律限制、版权信息等  
```html
<p>
  这是段落标签  
  <small>
    &copy2021 By LS
  </small>
</p>  
```
### 相关补充  
  small只适用于短语、不可用于标记长的法律声明，如“使用条款”和“隐私政策”页，对于较长的法律声明应当使用段落或其他语义标签标记这些内容  



## 标记重要和强调文本  
### strong元素表示内容的重要性，em强调内容的着重点

HTML5中新的标签相比于旧标签语义更强   

### 语法  
```html

<p>
   123<strong>4</strong>56
   
<p>

<p>
   12345<em>6</em>
    
<p>
```

### 说明  
默认情况下，strong文本以粗体显示，em文本以斜体显示
若em为strong子元素，则同时以粗体和斜体显示文本



## 添加删除线、下划线和水平线
### 添加删除线  
```html
<del>text</del> 
 
```
### 添加下划线  
```html
<ins>text</ins>  
 
```  

### 水平线  
```html
<hr>
```


## 换行标签  
### 作用  
   br实现强制换行  
### 语法     
```html
<p>123456<br><p>
```
### <font color="red">注意</font>  
1. br是一个单标签  
2. 强制换行，所以上下文本之间并不会添加垂直间距  




## 指明引用或参考  
### cite
  cite元素可以指明对某内容源的引用或参考。如对戏剧、脚本或图书标题、法律文件等  

#### 语法  
```html
<p>书中<cite>《精通CSS高级web标准解决方案（第8版）》</cite>讲述了margin使用会遇到的问题与解决方案
</p>
```

#### 说明  
1. 默认情况下，cite元素以斜体显示   


### 引述块级文本  
  blockquote元素表示单独存在的引述，用于引述块级文本
#### 归属  
- 双标签  
- 块级元素  

#### 语法    
```html
<blockquote cite="https://www.baidu.com">百度上指出关于XX的问题...
</blockquote>
```


#### <font color="red">注意</font>
1. 对于blockquote和q使用可选属性cite="url"，默认情况下浏览器不会将url呈现给用户；若需要访问者看到此URL，可以使用a标签重复这个URL  
2. 若blockquote中仅包含一个单独的段落或短语，可以直接将内容放在blockquote中 
3. 浏览器默认对blockquote文本进行缩进，cite属性的值不会显示出来  

### 引述行内文本 
#### 归属  
- 双标签  
- 内联元素  

#### 语法  
```html
<p>问题在...<q cite="url"  lang="xx">javascript</q>中有描述</p>
```


#### 说明   
1. 浏览器默认为q元素加上特定语言的引号【由其属性lang的值变化不同语言中的引号】  
2. 因为q元素的跨浏览器问题，因避免使用q元素  
3. q元素引用的内容不能跨越不同的段落，在这种情况下因使用blockquote  



## 指定准确时间、日期或时间段  
### 说明 
用来指定准确时间、日期  

### 归属  
- 内联元素  
- 双标签  

### 语法  
```html
<time datetime="time">  文本</time>
```

### <font color="red">注意</font>
1. 其属性datetime的值为文本转为机器可读时间格式【有效时间格式 】
2. 文本指要显示再浏览器中的表示时间、日期或时间端的文本 
3. 不能在time元素中嵌套另一个time元素，也不能在没有datetime属性的time元素中包含其他元素(只能包含文本)
4. datetime属性不会单独产生任何效果，但可以配合其他web应用使用，因此必须使用机器可读格式  




## 解释缩写词  
### 语法  
```html
<abbr title="缩写词全称">缩写词</abbr>
```


###  <font color="red">注意</font>  

1. 用括号提供缩写词的全称是最直接的方式  
2. 默认情况下，对用户的视觉提示，firefox和Opera等浏览器会对带title属性的abbr元素使用虚线下划线。若看不到下划线，试着为其父元素的CSS添加line-height属性  



## 创建上下标  
### 语法  
```html
<sup>创建上标</sup>
<sub>创建下标</sub>
```

### <font color="red">注意</font>  
1. 上下标会扰乱行间距，需要通过css调整  



## 标记代码或文件名  
### 语法 
```html
<code> 代码或文件名</code>
```

# 图像类标签  
## 创建图  
  图可以是图表、照片、图形、插图、代码片段，以及其他类似的独立类容  

### 语法  
```html
<figure>
  <figcaption>图表、图片标题</figcaption>
  <img src="" />
</figure>    
```
### 注意点  
1. figure中可以包含多个图表、但是只能有一个figcaption  
2. 不要简单的将figgure作为在文本中嵌入独立内容实列的方法，在这种情况下，通常更适合aside元素  



# 链接标签  
## 说明  
链接主要有两个组成部分 
  - 目标  
目标可以指定访问者点击链接时会发送什么。【Eg: 实现页面内跳转、显示图像、下载文件等】  

  - 标签  
标签指访问者在浏览器中可以看到或屏幕阅读器中听到的部分  


## 超链接  
### 语法  
```html
<a href="https://www.w3school.com.cn/">W3C学习</a>
```

## <font color="red">注意</font>  
1. 链接中href值为同主机下不同文件时，可以是相对路径或绝对路径；若创建的是指向其他Web页面的链接，则href的值必须为绝对URL【Eg: https://www.w3school.com.cn/ ]  
2. 通常，对指向站内网站页面的链接使用相对URL；对指向站外网站页面的链接使用绝对URL  

## Eg  
### 创建块级链接  
a标签的name属性用于规定锚的名称，href用于指定链接目标  
```html
<a href="#commpany-name">公司名称</a>
...
<a name="commpany-name">XX公司</a>
```

### 创建锚并链接到锚  
通常，实现回到顶部或 跳转指特定区域的效果  
```html
<a href="#commpany-name">公司名称</a>
...
<a id="commpany-name">XX公司</a>
```

HTML-文本类标签

## 概念 
指元素标签以什么方式显示（div独占一行等）

## 分类  
- 块元素  
- 内联元素 
- 内联块元素  




## 块级元素  
   一个元素单独占据一行 

### 常见块级元素  
div ul ol li h1-h6(标题标签) p(段落标签)
table(表格) rowspan(占几行) colspan(占几列)

### 特点：  
1. 独占一行  
2. 宽度、高度、外边距和内边距都可以控制    
3. 宽度默认是容器(父级宽度)的100%    
4. 高度具有子集属性  
4. 是一个容器盒子，内部还可以存放行内或块级元素  
5. p中不能放任何块元素  

### 注意
1. <font color="red">文本类的元素内部不能存放块级元素</font>[Eg: p标签中不能放div等]</font>  


## 行内元素  
  一行内可以同时排列多个元素  

### 常见行内元素    
span a(超链接) img(图片标签) em b ins del 
input的属性 placeholder(占位符) value(值) type(类型) name(给服务器用的
名字)    button

### 特点： 
1. 相邻的行内元素在一行上可以显示多个  
2. 高、宽直接设置是无效的  
3. 默认宽度为自身内容的宽度  
4. 行内元素只能容纳文本或其他行内元素 

### 注意
1. <font color="red">链接中不能再放链接</font>    
2. <font color="red">a标签中还可以存放块级元素</font>    
3. 内联元素设置width、height无效  
4. 行内元素margin左右生效，上下不生效，padding水平生效  



## 行内块元素  
在行内元素中有部分标签同时具有行内元素和块元素的特点，所以称为行内块元素  

### 常见行内块元素  
img、input、td 

### 特点  
1.  和相邻行内块元素在一行上，但是它们之间会有空白间隙（元素本身自带的边距），一行可以显示多个(行内元素特点)  
2.  默认宽度为自身内容宽度(行内元素)   
3.  高度、宽度、外边距和内边距都可以控制 (块级元素特点)  


# 显示模式汇总 

元素模式 | 元素排列 | 设置样式 | 默认宽高 | 包含  | margin |padding
---|---|---|---|---|---|---
块级元素 | 一行只能放一个块级元素 | 可以设置宽高 | 容器(父级)的100%  | 可以包含任何标签   |四周都可以 | 四周都可以 
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽高 | 自身内容的宽高 | 文本或其他行内元素 | 水平有效、上下方向无效 | 四周都有效  
行内块元素 | 一行可以放多个行内块元素 | 可设置宽高 | 自身内容宽高 | | 四周都可以| 四周都可以 

# 显示模式的转换    
特殊情况下，需要一个模式的元素添加另一个元素的模式 【Eg：a标签增加触发范围】 

## 语法 
- 素转换为块级元素  

```css
  a {
      display: block;
  }
```

- 转换为内联元素  
```css
  div {
      display: inline;
  }
```

- 转换为内联块元素  
```css
  div {
      display: inline-block;
  }
```

HTML-元素显示模式

# 构造选择器  
## 作用  
配合css或js实现样式更改等效果  

## 选择器的构造  
通常位于开始标签中使用id或class构造，此外还有标签本身也视为选择器  




## 选择器的分类  
### 标签选择器  
顾名思义，按照元素标签选择元素  

```css
h1 {
  color: blue;
}
```

### 类名选择器  
按照元素开始标签中设置的类名选择元素  

```css
.nav-box {
  width: 200px;
  height: 75px;
}
```

### id选择器  
- 按照元素中id设置选择器  
- <font color="red">一个页面中只会出现一次id元素</font>  

```css
#hed {
  width: 100px;
  height: 200px;
}
```


### 后代选择器  
  - 适用于多个div嵌套时
  - <font color="red">此选择器会影响元素所有后代元素</font>  

Eg：   
- HTML代码  

```html
<div class="hed">
  <div class="header-box">
  </div>
   <div class="header-box">
      <div class="header-box">
  </div>
  </div>
</div>  
```

- CSS代码

```css
/*会影响hed中所有header-box元素*/
.hed .header-box{
  width: 100px;
  height: 200px;
}
```


### 子元素选择器  
  - 适用于多个div嵌套时
  - <font color="red">此选择器只影响父元素后子元素  </font>  

Eg： 

HTML代码

```html
<div class="hed">
  <div class="header-box1">
  </div>
   <div class="header-box2">
      <div class="header-box3">
  </div>
  </div>
</div>  
```
CSS代码
```css
/*只会影响hed元素的子元素header-box1*/
.hed>.header-box1{
  width: 100px;
  height: 200px;
}
```

### 按相邻同胞元素选择要格式化的元素  

同胞元素指拥有同一父元素的任何类型的子元素；相邻同胞元素是直接相互毗邻的元素，即它 们之间没有其他的同胞元素  

使用CSS相邻同胞结合符可以选择直接跟在指定的同胞元素后面的同胞元素  

Eg：

HTML
```html
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
```
CSS3 
```css
li + li {font-weight:bold;}
```
  最终会使得2和3被添加加粗效果，【应位CSS中使用的同胞元素选择器，会使得无序列表第一个li毗邻的第二个li加粗，第二个li毗邻的第三个li加粗；同样，在有序列表按中同样如此】  


### 选择第一个或最后一个子元素  
  - 适用于选择某元素的第一个或最后一个子元素  
选择某元素的第一个子元素  
Eg  
HTML  
```html
div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>  
```
CSS  
```css
li:first-child {
  border: 2px solid black;
}
```

选择某元素的最后一个子元素  
Eg  
HTML  

```html
div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>  
```
CSS  
```css
li:last-child {
  border: 2px solid black;
}
```


### 伪元素
  - 用于选择元素的第一个字母或第一行,可以实现首字母大写效果  



Eg:  
选择元素的第一个字母并将字体颜色设为红色  
```css
p:first-letter {
  color:red
}
```
从元素开始插入字母H   
```css
p:after {
  content:"H"
}
```

### 伪类选择符  
#### 链接常用伪类  
根据链接的当前状态对它们进行格式化，连接状态包括鼠标悬停、链接是否被访问  
第一步：输入a标签  
第二部：输入冒号  
第三步：设置链接状态  
 - 输入link以设置从未被激活或指向，当前也没有被激活或指向的链接的外观 
```css
a:link {
    color: blue;
}
```

- 输入visited以设置链接访问后的样式 
```css
a:visited {
    color: black;
}
``` 

- 输入hover设置鼠标悬停时的样式 
```css
a:hover {
    color: blue;
}
```    
- 输入active设置鼠标点击时的样式  
```css
a:active {
    color: blue;
}
```    


<font color="red">注意</font>  
  应该始终按照lvha这种顺序定义链接的样式，以避免链接处于多种状态  


#### 二级菜单  
```html
<ul>
  <li>
    <ul class="two_nav"></ul>
  </li>
</ul>  
```
对应CSS 
```
.two_nav {display: none;}
.ul>li:hover .two_nav {display: block;}
```


#### 表单伪类  
":focus"用于选取获得焦点的表单元素  

```css
input:focus {
    border: 2px solid blue;
}
```   


### 按属性选择元素  
  可以对具有给定属性或属性值的元素进行格式化  
Eg:  
HTML  
```html
element[attribute 条件] {
    color: red;
}
```
说明  
element: 表示标签或类名  
attribute: 元素所需要考察的属性
  - class
  - lang
  - href
  - src
条件  

选择器 | 属性值
---|---
[attribute] | 匹配指定属性，不论具体值什么
[attribute="value"] | 完全匹配指定的属性值  
[attribute~="value"] | 属性值是以空格分隔的多个单词，其中有一个完全匹配指定值  
[attribute管道符="value"''] | 属性值以value-开头
[attribute^="value"] |  选择attribute属性值以value开头（作为完整的单词，或单词的一部分）的元素将被选中
[attribute$="value"] | 属性值以value结尾（作为完整的单词、或单词的一部分 ）的元素将被选中
[attribute*="value"] | 选择attribute属性值包含指定值的元素


### 结构化伪类  
  常用的是nth-chid选择符，常用于为表格交替应用样式  
  括号内的值为： 
  - odd-奇数
  - even-偶数 
  - 数值,若为2则表示对第二行使用指定样式  
  - 表达式，若表达式为3n+4，表示先选择第四行使用样式，然后n从0开始不断循环【3x0+4=4，3x1+4=7,一直循环直到不再有元素可以匹配为止】 
```css
tr:nth-child(odd) {
    color: red;
}
```



## <font color="red">选择器的优先级</font>  
内联样式>id选择器>类选择器>标签选择器>通配符选择器  

##  <font color="red">权重</font>   
1. !important,加在样式属性值后，权重值为10000
2. 内联样式，如：style=""，权重值为1000
3. ID选择器，如：# content权重为0100
4. 类，伪类，属性选择器如：content、：hover权值为0010
5. 标签选择器和伪元素选择器，如：div、p、：before权值为0001
6. 通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)权值为0000

### 权重计算方式  
#### CSS优先级规则  
1. css选择规则的权值不同时，权值高的优先 
2. css选择规则的权值相同时，后定义的规则优先  
3. css属性后面加!important时，无条件绝对优先  

#### 计算公式  

权值 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数  

### 权重比较规则  
进行权重比较时，从高到低逐级将等级位上的权重值进行比较，且
<font color="red">低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的</font>
### 简而言之  
1. 先从高等级位进行比较，高等级位相同时，再比较低等级位的，以此类推  
2. 完全相同的话，就采用后者优先原则（也就是样式覆盖） 
3. css属性后面加!important时，无条件绝对优先（比内联样式还要优先）

## Eg
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 权重1
         * qz1= 100+1 =101
        */
       #box p {color: red;}
       /* 权重2
        * qz2=1+10*10+1=102
        */
       div .a.b.c.d.e.a1.b2.c3.d4.e5 {color: blue;}
       /*按道理qa1<qz2，所以颜色为蓝色,但实际为红色
        * why?
        * 权重比较的是高到低逐级将等级位上的权重值，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的;
       */
    </style>
</head>
<body>
<div id="box">
    <p class="a b c d e a1 b2 c3 d4 e5">
        123
    </p>
</div>
</body>
</html>
```

HTML-Basis(下-选择器)

# 创建通用容器  
## 标签  
div、span  

### 作用  
创建通用容器，从而配合ID或class可以为其应用CSS样式或JavaScript效果  



### div  
#### 作用  
可定义文档中的分区或节，此标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 可以搭配id或class来标记div  
#### 归属   
- 块级元素  
- 双标签  

#### 语法  
```html
<div>...</div>
```

### span  
#### 作用  
用来包裹文档中的行内元素  

#### 归属  
- 内联元素  
- 双标签 

#### 语法  
```html
<span>...</span>
```

## 为元素指定类别或ID名称  
### 说明  
可以给HTML元素分配唯一的标识符（ID），或指定其属于某个或某几个类别，也可以同时指定标识符和类别。方便对具有ID或class名称的元素添加样式  

### 语法  
ID或class都是在元素开始标签中添加  
- ID  
```html
<div id="login">...</div>
```

- class  
```html
<div class="register">...</div>
```

### 注意点  
1. id的值可以是任何字符，但不可以数字开头且不包含空格  
2. 需要指定多个类别时，class的值只需要使用空格隔开即可  
3. <font color="red">一个页面里不能出现两个具有相同id的元素，并且每个元素只能有一个id。相同的id可以出现在不同的页面中</font>  
4. 一个class可以分配给页面中任意数量的元素  
5. 在class和id命名中，一般使用短横线分隔多个单词

HTML-Basis(中-创建通用容器)

# 网页与网站  
## 网页  
  指由图片、链接、文字等元素组成的单一页面，通常后缀名为HTML格式的文件  
## 网站  
  指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合  



## 常用浏览器及内核  

|  浏览器     |       内核       |
| :-----------------: | :----------------: |
|      Edige       |       Chromium         |
|     IE      |     Trident        |
|     Firefox      |      Gecko     |
|     Safari     |   webkit     |
|     Opera      |        Blink       |
| 360浏览器、猎豹浏览器内核、2345浏览器 |    IE+Chrome双内核 |
|  搜狗、遨游、QQ浏览器内核   | Trident（兼容模式）+Webkit（高速模式） |
|   百度浏览器、世界之窗内核  |    Trident                 |


## HTML概念  
### HTML定义  
  HTML指的是超文本标记语言，用来描述网页的语言。

### HTML语义化  
  可以总结为：用最恰当的标签来标记内容  
HTML语义化的原因
1. 即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构  
2. 语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式  
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页  
4. 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重  
5. 便于团队开发和维护，语义化更具可读性  
6. 通常语义化HTML会使代码变的更少，使页面加载更快  

### W3C  
  万维网联盟（W3C）制定的Web标准  
  - 结构、样式、行为相分离   

### Web标准的构成  
|  构成     |       作用       |
| :---------------: | :--------------------------: |
| 结构 |   用于对网页元素进行整理和分类即HTML  |
| 表现  | 用于设置网页元素的版式、颜色、大小等外观样式即CSS |
| 行为 | 指网页模型的定义及交互的编写即Javascript |

## HTML规范及相关概念  

### HTML语法规范  

1. 使用正确的文档类型  
即文档类型声明  
```

<!DOCTYPE html> 
```

2. 使用小写元素名  
HTML5元素名可以使用小写和大写字母  
推荐使用小写字母： 
  - 小写字母便于识别阅读

3. 使用具有具体含义的小写类名  
- 元素类名推荐使用小写   
- 类名使用小写字母下划线或短线组成，开头不能使用数字  
```
<div class="banner_picture"></div>
```

4. 使用小写属性名  
小写字母容易书写和阅读  
```

<div CLASS="banner_picture"></div>

<div class="banner_picture"></div>
```

5. 属性值  
若属性值含有空格需要使用引号，建议一般都采用引号包裹属性值  
```

<div CLASS=banner picture></div>

<div class="banner picture"></div>
```

6. 避免单行代码过长  
建议每行代码不超过80个字符  


7. 类名中空格和等号  
等号前后可以使用空格，但建议少用空格  
```

<div CLASS = “banner-picture”></div>

<div class="banner-picture"></div>
```


8. 空行和缩进  
- 不要无缘无故添加空行  
- 为每个逻辑功能块添加空行，这样更易于阅读  
- 比较短的代码间不要使用不必要的空行和缩进  


9. 元数据  
HTML5 中 title元素是必须的，标题名描述了页面的主题；标题和语言可以让搜索引擎很快了解你页面的主题，有助于SEO优化；


10. HTML注释   
注释可以写在\中  
较长的注释则在其中分行写，同时第一个字符缩进两个空格，更易于阅读  
```


```


11. 样式表  
样式表使用简洁的语法格式(type属性不是必须的)  
```
<link rel="stylesheet" type="text/css"  href="styles.css" >
```

短的规则可以写成一行  
```
.p-text1 {font-size: 18px; font-family: Verdana;}
```

长的规则可以写成多行  
```
.picture-banner {
  width: 100%;
  height: 420px;
  border-bottom: 1tx solid black;
}
```

- 将左花括号与选择器放在同一行  
- 左花括号与选择器间添加一个空格  
- 使用两个空格来缩进  
- 冒号与属性值之间添加一个空格  
- 逗号和符号之后使用一个空格  
- 每个属性与值结尾都要使用分号  
- 只有属性值包含空格时才使用引号  
- 右花括号放在新的一行  
- 每行最多 80 个字符  

### HTML页面的基本结构组成  
#### 初始html结构   
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
```

#### 文档类型的声明  
声明文档类型  
```
<!DOCTYPE html>
```

#### 开始文档的实际html部分，并使用lang属性添加网站默认语言  【英语为en,汉语为zh-CN】
```
<html lang="en">
...
</html>
```
#### 开始文档的头部    
使用meta及属性charset设置文档的字符编码格式为utf-8  
使用title标签设置页面的标题  
```
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
```

> [[01.HTML中常见META标签#^mobmeta|移动端常用的meta标签]]

#### 开始文档的页面内容  
```
<html>
  ...
</html>
```
##### 文档页面内容  
主要包含四大组件： 带导航的页头、主要页面内容区域、相关但较为次要的信息、页脚  
- 创建页眉  
  一个网页可以有任意数量的页眉，通常页眉包括网站标志、主导航、和其他全站链接、甚至头部搜索框  
```
<header>
  ... 
</header>
```
- 标记导航  
  仅对文档中重要的链接群使用nav  
```
<header>
  <nav>
      ... 
  </nav>  
</header>
```

- 标记页面主要区域  
  一个页面中只有一部分代表其主要内容,可以将这样的内容包含在main元素中  
<font color="red">注意</font>
1. 一个页面仅使用一次main 
2. 若创建的是web应用,则使用main包围其主要功能  
3. 不能将main放置在article、aside、footer、header或nav元素中  
4. role="main"可以帮助屏幕阅读器定位页面的主要内容  
```
<main role="main">
  ...
</main>  
```

- 创建文章  
  article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分  
```
<article>
  ...
</article>  
```

注意
1. 一个页面可以有多个 article元素
2. 一个article元素可以包含一个或多个secrion元素  
3. 多个article元素可以互相嵌套，只要外层article元素和里层article元素是父子关系  


- 定义区块  
  section元素代表文档或应用的一个一般的区块，如网站的主页可以分成介绍、新闻条目、联系信息等区块  
```
<section>
  ...
</section>  
```

注意  
1. <font color="red">从语义上区分，section标记的是页面中的特定区域，而div则不传达任何语义</font>
2. 一个web页面可以有多个section  

- 指定附注栏  
  从语义上表示为与主体内容相关性不强、可以独立存在的内容  
  若aside嵌套在页面的主要内容(而不是作为侧边栏位于主要内容之外），则此时其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关  
```
<aside>
  ...
</aside>  
```

注意  
1. 在HTML中，重要的内容应该放在aside之前  
2. 附注栏中对于内容有关的图像(如图表、图形或带有说明文字的插图)应使用figure  
3. HTML5中不允许将aside嵌套在address元素内  

- 创建页脚  
 footer元素代表嵌套它的最近的artcile、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚   
 常用于附录、索引、版权页、许可协议这样的内容
```
<footer>
  ...
</footer>  
```

注意  
1. 不能在footer里嵌套header或另一个footer,同时，也不能将footer嵌套在header或address元素里  

- 定义文档或文章联系信息  
  此标签定义文档或文章的作者/拥有者的联系信息。如果 address元素位于 body 元素内，则它表示文档联系信息。如果 address 元素位于 article元素内，则它表示文章的联系信息。address元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。  
```
<footer>
  <address>
      &copy备案号：京2020890103
  </address>    
</footer>  
```

注意  
1. 提示：address标签不应该用于描述通讯地址，除非它是联系信息的一部分。  
2. 提示：address元素通常连同其他信息被包含在 footer元素中。  



### 标签、元素属性、元素关系  

#### HTML标签类型  
- 双标签  
此类标签都是成对出现，有开始标签也结束标签  

- 单标签(空元素)
此类标签单独出现  

####  属性和值  
##### 说明  
- 有的元素可以有多个属性值、各属性之间的顺序任意  
-  不同的属性-值对之间用空格隔开  
-  建议书写属性值两边的引号  

####  标签关系   
1. 包含关系  
```html
<head>
    <title>is me</title>
</head>

```
2. 并列关系  
```html
<head>
    <title>is me</title>
</head>
<body>
    <p>find you</p>
</body>

```

### 父元素和子元素    
#### 说明  
如果一个元素包含另一个元素、它就是被包含元素的父元素，被包含元素称为子元素。  
子元素中包含的任何元素都是外层元素的后代  

##### Eg: 
```html
<head>
    <title>is me</title>
</head>
<body>
    <p>find <em>you</em></p>
</body>
```
此处，head是title的父元素，title是head的子元素。同理，body是p的父元素，p是body的子元素。
p是em的父元素、em是p的子元素，p也是body的后代(但不是子元素)  


## 网页文件命名规则  
### 命名规则  
1. 文件名全部使用小写字母，用短横线分割单词，用.html作为扩展  
2. 文件夹的名称也全部使用小写字母  

###  命名文件的作用   
1. 有助于管理组织文件   
2. 有助于增强搜索引擎SEO优化  

# 路径 
网页与相关文件的位置关系 
## 相对路径  
文件相对于网页的位置 
## 同级相对路径  
网页和图片、js\css等在同一目录文件夹下   
### 下一级相对路径  
网页的当前目录的某个文件夹下存放着图片、js、css文件     
### 上一级相对路径  
网页中存放图片等文件的文件夹相对位于网页上一层目录下  
使用"../"表示上一级
```
<img src="../img/picture/banner.png">
```

## 绝对路径  
绝对路径：文件的物理地址  
构成：https://ip（或host）+文件路径