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:高度
```