## scetion  
### 说明   
- HTML5新增标签    
- 定义文档的某个区域。如章节、头部、底部或者文档的其他区域    



### 浏览器支持
IE9+、Firefox、Opera、Chrome和Safari <section> 标签   

### 全局属性和事件属性
- 支持HTML的全局属性  
- 支持HTML的事件属性  

## textarea  
### 说明  
定义一个多行文本输入的标签  
### 参数  
| 属性        | 取值 | 作用                             |
| ----------- | ---- | -------------------------------- |
| placeholder | text | 文本占位符                       |
| maxlength   | text | 规定文本区域允许的最大字符串个数 |
### 常配合使用的初始化样式  
| 样式 | 取值 | 作用 |
| --- | --- |--- |
| resize | none | 禁止用户拖拽 |

### Eg  
```
<textarea placeholder="最多输入100字" maxlength="100" style="resize:none"></textarea>
```

HTML-其它常用标签

## 说明   
HTML5新增标签用于引入视频 ，支持的视频格式为MP4、WebM、Ogg  



##  归属   
- 双标签   
- 块级元素   

## 语法
```html
<video src="" width="" height="" controls  autoplay loop>
    <source src="视频资源地址" type="video/mp4">
 </video>
```

### 参数   
width、height：自带，用于设置宽高     
controls：加属性后用于添加视频控件（播放、暂停、音量调节等）  
autoplay：自动播放   
loop：循环播放    

### <font  style="color:red">注意</font>   
不可用于设置“背记视频”  



# 音频  
## 说明   
用于引入音频，支持三种音频格式：MP3、Wav、Ogg   

## 归属  
- 双标签  
- 块级元素  


## 语法   
```html
<audio autoplay controls loop>
  <sourcd src="" type="audio/mp3">
</audio>
```
### 参数   
autoplay：自动播放    
controls：播放/暂停    
loop：循环播放

HTML-视频与音频标签

## 列表的分类  
- 有序列表   
- 无序列表  

## 有序列表  
### 说明  
有序列表，ol为父元素，li为列表项；适用于强调顺序的情况下使用  



### 语法  
```html
<ol>
  <li>我第一个列表元素</li>
  ...
  <li>我是第n个列表元素</li>
</ol>  
```

## 无序列表  
### 说明  
无序列表，ul为父元素，li为列表项，适用于不强调顺序的情况下使用  

### 语法  
```html
<ul> 
  <li></li>
  ...
</ul>  
```

### 相关属性  
#### 有序列表正序和倒序排列　　
<font color="red">注意</font> 
reversed用于制定有序列表降序排列　　

#### 选择标记  
<font color="red">无论是有序列表还是无序列表都可以选择出现在列表项目左侧的标记的类型</font>  
 参数 | 说明
---|---
disc | 圆点
circle | 圆圈 
square | 方块  
decimal | 数字 ，1、2、3...
upper-alpha | 大写字母A、B、C...
lower-alpha | 小写字母a、b、c... 
upper-roman | 大写罗马数字,I、II、III、IV、V、VI、VII、VIII、IX  
lower-roman | 小写罗马数字，i、ii、iii、iv...  


#### 显示无标记列表  
```css
ol {
    list-style-type: none;
}
```


#### 使用定制标记　　　　
可以指定列表标记   
```css
li {background: url(image.png) repeat-type horizontal vertical;}
```
##### 说明  
repeat-type: 图片平铺方式，no-repeat：不平铺、repeat-x：水平平铺、repeat-y：垂直平铺  
horizontal: 水平位置  
vertical: 竖直位置  
此时的URL：因为样式位于CSS中，所以图片URL是相对于CSS的路径

#### 选择有序列表的起始编号  
```html
<ol start="n">
  <li value="b"></li>
  ...
</ol>  
```
##### 说明  
start="n"：列表起始编号n     
value="b": 设置指定列表项目li的编号  

##### <font color="red">注意</font> 
1. 当第一个列表项设置value后且设置  start属性时，value属性值会覆盖start属性值    
2. 设置value属性后，后续li列表会相应的重新编号   
3. 列表可以包含一个以上的带value属性的li  


#### 控制标记的位置  
默认情况下列表标记位于列表项外侧，而list-style-position值为inside可以使得列表标记位于列表项内测  

##### 使用对象  
ul或者ol  

##### 语法    
```css
ol {
    //列表标记位于列表项内测
    list-style-position:  inside;
    //列表标记位于列表项外侧（默认）
    //  list-style-position: outside;
}
```


### <font color="red">注意</font>  
1. list-style-type:none可移除列表的默认设置  
2. 默认情况下列表ul或ol还设置了内边距和外边距，可使用 margin:0 和 padding:0来移除  




## 描述列表[亦称为自定义列表]  
### 作用  
HTML提供了专门用于描述成组出现的名称（术语）及其值之间关联的列表类型  

### 语法  
```html
<dl>
 <dt>术语</dt>
 <dd>解释术语的值</dd> 
</dl> 
```

### 说明  
1. dt与dd关系可以是一对一、一对多或者多对一，多对多  
2. 对于描述值dd通常浏览器会进行缩进，设置其margin-left可以改变缩进量  

### <font color="red">注意</font>
1. 若dd描述值有多个文本段组成，应该使用多个p元素进行标记


# 表格
## 作用  
过时、仅了解；用来显示、展示数据，提高数据可读性  

## 语法   
```html
<table>
   <caption>人员统计</caption>
   <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>22</td>
    </tr>
</table>  
```
### 说明  
table: 用于定义表格的标签  
caption：表格标题<font  color="red">必须位于第一行</font>   
tr: 用于定义表格中的行，必须在table标签中    
th: 表头标签、默认浏览器会<font color="red">加粗居中</font>显示     
td：用于定义表格中的单元格，必须嵌套在tr中      

## 表格属性(已弃用，仅做了解)  
### 对齐 
algin，取值为center、left、right
```html
<table algin="center">
   ...
</table>
```

### 边框  
border,取值为1或者空值，规定表格是否拥有边框，默认为空值即没有边框  

### 距离  
cellpadding: 规定单元格边缘与其内容之间空白距离
cellspacing：规定单元格之间的空白

###  宽度
width：规定表格的宽度  

## 表格结构标签 
为避免表格过长，所以thead标签表示表格头部区域【一般包含第一行表头标签th】、tbody标签表示表格主体区域，可以更好划分表格结构  

### 语法  
```html
<table align="left">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
```

## 合并单元格   
###  作用  
用于将多个单元格合并为一个单元格  

### 分类  
- 跨行合并    
- 跨列合并  

### 目标单元格  
* 跨行合并的目标单元格  
最上侧的单元格为目标单元格，写合并代码  

* 跨列合并的目标单元格  
最左侧的单元格为目标单元格，写合并代码  

### 跨行合并  
  rowspan="合并单元格的个数"
  
### 跨列合并  
  colspan="合并单元格的个数"
  
### 合并单元格步骤    
1. 确定是跨行还是跨列    
2. 确定目标单元格  
3. 删除多余单元格

HTML-列表与表格标签

## 作用  
收集用户目标信息  

## 组成  
在HTML中，一个完整的表单由表单域、表单控件(即表单信息)、提示信息组成  



## 表单域 【已经废弃使用Ajax提交，仅作了解】  
### 作用  
一个包含表单元素的区域，用来收集用户信息  

### 语法  
```html
<form action="服务器脚本HRL地址" method="提交方式"  name="表单域名称">
  ...
</form>  
```

# input

## 常用属性  
属性 | 属性值   | 作用
---|---|---
name | 自定义 | 定义input元素的名称
value | 自定义 | 规定input元素的默认值  
checked | checked | 规定此input元素首次加载时默认被选中  
maxlength | 正整数 | 规定输入字段中的字符的最大长度【用的较少，一般使用正则表达式】
placeholder | 文本占位符 
type | 指定类型、email-邮件、text-文本、password-密码  

## 常用属性-value属性  
value 属性对于不同 input 类型，用法也不同：
- 对于 "button"、"reset"、"submit" 类型   定义按钮上的文本  
- 对于 "text"、"password"、"hidden" 类型   定义输入字段的初始（默认）值  
- 对于 "checkbox"、"radio"、"image" 类型  
定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL  

注意：value 属性对于\<input type="checkbox"> 和 \<input type="radio"> 是必需的  

注意：value 属性不适用于 <input type="file">。

## input之type属性文本块和密码框
### 文本框
#### 语法  
```html
<form>
  <input type="txt" placeholder="默认展示文本">
</form>  
```
#### 说明   
type取值为：text-文本框、password-密码框【浏览器会 以星号或小圆点隐藏密码】 

### 密码框  
#### 语法  
```html
<form>
  <input type="password">
</form>  
```

## input之type属性单选按钮和复选框  
### 单选按钮 
#### 作用    
<font color="red">按钮必须具有同一个name值【不然有重复选择错误】</font>实现多选一的效果

#### 语法
```html
<form>
  男 <input type="radio" name="gender"> 
  女 <input type="radio" name="gender"> 
</form>  
```

### 复选框 
#### 作用
实现多选效果
#### 语法
```html
<form>
  <input type="checkbox"> 
</form>  
```

### 提交按钮  
####  作用  
将表单域中的值提交到服务器  

#### 语法
```html
<form>
  <input type="submit" value="提交默认文本替换文本"> 
</form>  
```

#### 说明  
使用value可以替换默认的提交文本  


### 重置按钮  
#### 作用  
删除所有表单数据，重置表单域内容，恢复到初始状态   

#### 语法
```html
<form>
  <input type="reset" value="重置按钮文本"> 
</form>  
```

### 普通按钮  
点用后不会提交文件,常搭配js使用   
```html
<form>
  <input type="button" value="获取网站验证码登录"> 
</form>  
```

### 文件域  
上传文件时使用  
```html
<form>
  <input type="file" value="获取网站验证码登录"> 
</form>  
```


## <font  color="red">注意</font>
1. radio和checkbox各自多个单选按钮或复选框的name值应相同  


# label标签 
## 作用  
label标签用于绑定一个表单元素，当点击<label>标  签内的文本时，浏览器将自动将焦点转到对应的元素上  ，以此增加用户体验  
## 语法  
label标签的for属性值指向input的id属性值
```html
<form>
     <label for="gender">男</label>
     <input type="txt" id="gender">
</form>
```

# select下拉表单元素  
## 使用场景  
表单中填写时下拉列表
## 语法  
```html
<form>
  籍贯 
  <select>
    <optgroup label="中国">
      <option selected="hb"value="hubei">湖北</option>
           ...
  </select>  
  <optgroup label="国外">   
     ...
</form>  
```
## <font color="red">注意</font>
1. select中最少包含一对option元素  
2. 可以在option中设置selected="selected"时，当前设置项则默认选中  
3. 其中option设置value值用于传输到后台 【若省略了value则会将下拉文本发送，注意！！！】


# textarea文本域  
## 说明   
定义多行文本输入  

## 使用场景  
当用户输入文本过多的情况下不建议使用input标签，而应该使用textarea文本域标签【如：评论、留言板等】  

## 语法  
```html
<form>
   <textarea cols="n" rows="b">

  </textarea>
</form>
```

HTML-表单类标签

## 属性  
指用来描述标签特征的，属性表现形式，属性名="属性值"。也称为键值对，key=value；  



## 添加图像  
### 说明  
用于放置各种图片、标志等  

### 归属  
- 单标签  
- 内联块元素  

### 语法  
```html
<img src="图片路径" alt="图片无法显示时的替代文本" />
```

# 图片标签  
## 语法  
```html
<img scr="" alt="" title="">
```

## 标签属性说明 
img： 图片标签  
src：图片路径   
alt：图片无法显示时的替换文本  
title： 鼠标选悬停在图片时显示的文本  

## 注意  
1. 图片标签的宽高单独设置时，图片会自动等比列缩放  
2. 图片命名时不应该有空格或空号   
3. 标志、线条艺术等图片一般格式为PNG-8，图片为PNG-24格式  
4. 主要目标是在保留可以接受的图像品质时让图像尺寸经可能减小  

## 为元素添加title属性  
### 说明  
注意与title元素区分，此处只用作提示标签或屏幕阅读器为用户朗读文本的文本内容  

### 语法  
在要添加title的HTML元素中，输入title="label"，其中label时访问者将鼠标移动到这个元素上时希望出现在提示框里的文本，或者希望有屏幕阅读器朗读的文本  


## 添加网站图标  
### 说明  
一般为16pxX16px或72pxX72px，背景设置为透明的，且格式为ICO

### 语法  
```html
<head>
  <link rel="shortcut icon" href="Images/blog.ico">
</head>  
```

### 注意  
1. 建议命名为favicon.ico  
2. 图标最好位于根目录