HTML基础2

### 列表标签
1. 有序列表`<ol>`
2. 无序列表`<ul>`
    ```
    <ul>
        <li>....</li>
        <li>....</li>
        <li>....</li>
        <li>....</li>
    </ul>
    无序图标去除：在li/ul中，line-style：none/line-style-type:none
    li:列表项
    margin：设置外边距
    padding：设置空白
    background：设置背景，color颜色，size大小，position绝对定位,repeat：no-repeat 不重复
    ```

3. 定义列表`<dl>`
```
<dt>列表标题，必须的
<dd>列表列表项
```

## 表格标签 `<table>`
1. 
```
<table>
    <caption>表格的标题</caption>
    <tr>
        <th>标题一</th>
    </tr>
    <tr>
        <td>内容一</td>
    </tr>
</table>
1. caption：表格的标题
2. tr：行
3. td：列
4. th：加粗的单元格，相当于td+b
```
2. `<thead>`标签，`<tbody>`标签，`<tfoot>`标签
    * 如果写了，那么三个标签的顺序可以任意，如果不写，浏览器解析并显示的时候是按照代码的顺序从上往下
    * 当表格内容非常大非常多的时候，如果用这三个标签，那么数据可以边获取边显示。如果不写，必须等表格的全部内容从服务器获取完成才可以显示
3. 设置边框：border：大小 形状 颜色
4. 删除边框中的空格：border-collapse：collapse
5. 文本居中：text-align：center
6. 悬停效果 ： 标签:hover{...}
7. 跨列合并：colspan 跨行合并 ：rowspan
## 表单标签 `<form>`
1. 用于服务器的交互，表单就是收集用户的信息，就是让用户填写的选择的
2. 属性：
    + name:表单的名称，用于js来操作或者控制表单时使用
    + id：表单的名称，用于js来操作或者控制表单时使用
    + action：指定表单数据的处理程序，一般时PHP
    + method：表单数据的条件方式，一般取值：get（默认）和post
3.`<form>`中套`<table>`
4. 输入标签（文本框）：`<input>`
+ 属性
```
<input type="text" />
type="属性值"
1. text(默认)
2. password:密码类型
3.radio:单选按钮,name相同为一组
4.checkbox:多选按钮，name相同为一组
5.checked:单选按钮/默认选中状态
6.hidden:隐藏框
7.button:普通按钮
8.submit:提交按钮
9.reset:重置按钮
10.下拉列表：
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
```

## 表单标签
### 一.属性值
```
1. 提示文字：placeholder=""
2. 电子邮箱：email
3. 手机号码：tel
4. 多行文本：textarea
5. 取色器：color
6. 日期：date
7. 日期时间：datetime-local 
8. 文件：file 
9. 图片：image
10. 年月：month
11. 数量：number
```
### 二.单选点击文字选中
`<label for="id名"><input type="radio" name="值" id="id名">zhi</label>`
### 三.滚动字符标签
```
<marquee>
1. direction="left":移动的目标方向，left从右向左；right从左向右；up从下向上；down从上向下
2. behavior="slide":行为方式，slide移动一次，scroll循环移动（默认）
3. scrollamount="30"：移动的速度
4.loop="3"循环多少圈
5. scrolldelay="100"移动一次休息多长时间，单位是毫秒
```
## HTML5详解
1. 广义概念：H5代表浏览器端技术的一个发展阶段，包括H5,CSS3,Javascript API在内的一套技术组合
2. 总结：H5是新一代开发web富客户端应用程序整体解决方案。
3. 应用场景
    + 极具表现力的网页：内容简约而2不简单
    + 网页应用程序
        - 代替PC端的软件：iCloud 百度脑图等
        - APP端的网页：淘宝京东美团等
        - 微信端：公众号 小程序等
    + 混合式本地应用
    + 简单的游戏
4. H5中新增的语义标签
```
<section>:区块
<article>:文章
<header>:页眉
<footer>:页脚
<nav>:导航
<aside>:侧边栏
<figure>:媒介内容分组
<mark>:标记
<progress>:进度
<time>:日期
```
5. 表单元素（标签）
```
<input type="text" list="a">
<datalist id="a">
    <option>...</option>
</datalist>
```
6.表单属性
```
placeholder：提示文字
autofocus:自动获取焦点
multiple:文件上次多选或多个邮箱地址
autocomplete:自动完成
form:指定表单项属于哪个form。处理复杂表单式会需要
novalidate:关闭默认验证功能（只能加给from）
required:必填项
pattern:自定义正则，验证表单
```
## 多媒体
1. 音频`<audio>`
```
<audio src="" autoplay controls>dalal</audio>
autoplay:自动播放
controls:控制条
```
2. 视频`<video>`
```
<video src="" autoplay controls>aaa</video>
autoplay:自动播放
controls:控制条
loop:循环播放
preload：预加载，同时设置autoplay时失效
width：宽度
height：高度
```