HTML

8.列表标签

容器里面装载着文字或图表的一种形式，叫列表。

列表的最大特点：整齐、整洁、有序。

（1）无序列表ul

各个列表项之间没有顺序级别之分，是并列的。

基本语法格式为：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    ......
</ul>

例如：

*注：<ul>标签只能放<li>标签，其他标签都不允许

        <li>标签相当于一个容器，<li>标签里可以放其他标签，下面有序列表同理

（2）有序列表ol

各个列表项之间有顺序级别之分，是有序的。

基本语法格式为：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    ......
</ol>

例如：

（3）自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表前没有任何项目符号。

其基本语法为：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</dl>

例如： 

9.表格table

表格：常见处理、显示表格式的数据。

（1）创建表格

创建表格的基本语法格式如下：

<table>
    <tr><!--行-->
        <td>单元格内的文字</td><!--单元格-->
        ...
    </tr>
    ...
</table>

<table>、<tr>、<td>都是创建表格的基本标签，缺一不可。 

*<table>--->用于定义一个表格
 <tr>--->用于定义表格的一行，在<table>中有几对<tr>就有几行表格
 <td>--->用于定义表格的单元格，必须嵌套在<tr>中，一对<tr>中有几对<td>，就表示该行有几列

例如： 

*注： 格式固定，只有<td>标签可以放其他标签。表格里没有列，只有单元格。

（2）表格属性

（3）表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中。设置表头仅需用表头标签<th>替换相应的单元格标签<td>即可。

例如：

（4）表格结构

给表格划分一下结构，一部分是表头(用<thead>包起来)，一部分是表体(用<tbody>包起来)。例如：

（5）表格标题标签

表格的标题：caption

caption元素定义表格标题。基本语法为：

<table>
    <caption>...表格标题...<caption>

</table>

例如：

*注：caption标签必须紧跟table标签，对每个表格只能定义一个标题。通常这个标题会被居中在表格之上。

（6）合并单元格

跨行合并：rowspan，用法为：rowspan="num"（num为合并的单元格数量）例如：

跨列合并：colspan，用法为：colspan="num"（num为合并的单元格数量）例如：

其思想：将多个内容合并的时候，就会有多余的东西，把它删掉。

公式：删除的个数 = 合并的个数 -1

合并的顺序：先上，先左

10.表单标签

在HTML中，一个完整的表单通常由表单控件、提示信息和表单域三个部分构成。

表单，例如说牛客平台的登陆页面。其目的是收集用户信息。

（1）input控件

<input />为单标签，其常用属性如下：

例如：

（2）label标签

label标签为input元素定义标签。

label标签的使用：

1.直接用label包裹input，即

 2.如果label里有多个表单，想定位到某个表单可以通过for id的格式来实现，即

（3）textarea控件(文本域)

若需要输入大量的信息，就需要用到 textarea 控件了(主要用于做留言框)。其基本语法格式如下：

<textarea cols="每行的字符数" rows="显示的行数">
    文本内容
</textarea>

例如：

（4）下拉菜单

其基本格式为：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

*注：

（5）表单域

表单域用<form>标签进行定义，即创建一个表单，以实现用户信息的收集和传递，<form>中的所有内容都会被提交给服务器。它的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

1. action属性用于指定接收并处理表单数据的服务器程序的url地址
2. method用于设置表单数据的提交方式，其取值为get或post
3. name用于指定表单的名称，以区分同一页面中的多个表单

*注：每个表单都应该有自己的表单域

11.datalist标签

*注：datalist里用id来和input进行连接 

12.fieldset标签 

fieldset元素可将表单内的相关元素分组、打包，与<legend>搭配，例如：

 13.HTML5新增

（1）新增input的type属性值

例如： 

（2）常用新属性

*注：关于autocomplete的用法：1.需要提交按钮
                                                    2.表单必须要有name属性

14.多媒体标签

• embed：标签定义嵌入内容
  先上传到视频平台，再点击分享，获得链接
• audio：播放音频
• video：播放视频

多媒体audio

其基本语法：

<audio src="音频文件路径"></audio>

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg

其属性有：
autoplay --- 自动播放（Google浏览器可能禁用了自动播放）
controls --- 是否显示默认播放控件
loop --- 循环播放（loop="-1"无限循环播放）

为了浏览器兼容，需要做三种声音文件：ogg mp3 wav

<audio controls autoplay>
    <source src="音频文件名" />
    <source src="音频文件名" />
    <source src="音频文件名" />
</audio>

考虑兼容性则需要以下代码（由上至下运行）：

当前MP3基本支持主流浏览器，在开发中一般写一个MP3基本是够用的。

多媒体video

 其基本语法：

<video src="音频文件路径"></video>

 <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg

其属性有：
autoplay --- 自动播放（Google浏览器禁用了自动播放，在后面加上 muted="muted" 可以解决）
controls --- 是否显示默认播放控件
loop --- 循环播放（loop="-1"无限循环播放）
width --- 设置播放窗口宽度
height --- 设置播放窗口高度
muted --- 静音播放
preload --- auto预先加载，反之是 none
poster --- 其属性值为 imgurl ，加载时等待的画面图片

为了浏览器兼容，需要做三种视频格式：ogg、MPEG 4、WebM

<video controls autoplay>
    <source src="音频文件名" />
    <source src="音频文件名" />
    <source src="音频文件名" />
</video>

考虑兼容性的做法，以下代码（以下代码由上至下运行）：

当前MP4基本支持主流浏览器，在开发中一般写一个MP4基本是够用的。