HTML5 学习笔记 2017-02-13 am

细线表格

在表格标签中向通过指定外边距为0来实现细线表格是不靠谱的，其实它是将2条线合并为一条线，所以看上去很不舒服

细线表格的制作方式
1.给 table 标签设置 bgcolor
2.给 tr 标签设置 bgcolor
3.给 table 标签设置 cellspacing="1px"

注意点
table 标签和 tr 标签以及 td 标签都支持 bgcolor 属性，但是以上内容仅仅作为了解，因为样式以后都是通过 CSS 来控制的

<table bgcolor="black" cellspacing="1px">
        <tr bgcolor="white">
                <td bgcolor="red">1.1</td>
                <td>1.2</td>
        <tr bgcolor="white">
                <td>2.1</td>
                <td>2.2</td>

表格标签的其他标签

表格标题

• 在表格标签中提供了一个标签专门用来设置表格的标题这个标签叫做 caption， 只要将标题写在 caption 标签中，那么标题就会自动相对于表格的宽度居中
• caption 标签的注意点
• caption 一定要写在 table 标签中，否则无效
• caption 一定要紧跟在 table 标签后面
• 标题单元格标签
• 在表格标签中提供了一个专门用来存储每一列的标题，这个标签叫做 th 标签，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
• 到此为止我们就发现其实表格中有两种单元格，一种是 td，一种是 th， td 是专门用来存储数据的，th 是专门用来存储当前列的标题的

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
        <caption>
                <h2>
                        今日小说排行榜
                </h2>
        </caption>
        <tr bgcolor="#a9a9aa9">
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
        </tr>
        <tr bgcolor="white" align="center">
                <td>1</td>
                <td align="left">暴走大事件</td>
                <td>
                          ![](images/up.jpg)
                </td>
                <td>623557</td>
                <td>4088311</td>
                <td>
                          <a href="#">贴吧</a>
                          <a href="#">图片</a>
                          <a href="#">百科</a>
                </td>
        </tr>

表格的结构

• 由于表格中存储的数据比较复杂，为了便于管理和阅读以及提升语义，我们可以对表格中存储的数据进行分类

表格中存储的数据可以分为4类

• 表格的标题
• 表格的表头信息
• 表格的主体信息
• 表格的页尾信息

表格的完整结构

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

caption 作用：指定表格的标题
thead 作用：指定表格的表头信息
tbody 作用：指定表格的主体信息
tfoot 作用：指定表格的附加信息

注意点

• 如果我们没有编写 tbody，系统会给我们添加 tbody
• 如果指定了 thead 和 tfoot，那么在修改整个表格的高度时，thead 和 tfoot 有自己默认的高度，不会随之表格的高度变化而变化

<table border="1px" width="500px" height="300px">
    <caption>学生信息</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>40</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>2</td>
            <td>30</td>
        </tr>
    </tfoot>
</table>

单元格的合并

• 水平方向上的单元格合并可以给 td 标签添加一个 colspan 属性，来指定把某一个单元格当作多个单元格来看待（水平方向）

• 例如 <td colspan="2"></td>
  含义：把当前单元格当作两个单元格来看待

• 垂直方向上的单元格合并可以给 td 标签设置一个 rowspan 属性，来指定把某一个单元格当作多个单元格来看待（垂直方向）

• 例如 <td rowspan="2"></td>
  含义：把当前单元格当作两个单元格来看待

注意点

• 由于把某一个单元格当作了多个单元格来看待，所以会多出一些单元格，所以需要删掉一些单元格才能正常显示
• 一定要记住单元格合并永远都是向后或者向下合并，而不能向前或者向上合并

<table bgcolor="black" width="500px" height="300px" align="center">
    <tr bgcolor="white">
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<table bgcolor="black" width="500px" height="300px" align="center">
    <tr bgcolor="white">
        <td colspan="2"></td>
        <!--<td></td>-->
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td colspan="2"></td>
        <!--<td></td>-->
    </tr>
</table>

表单标签

什么是表单
表单就是专门用来收集用户信息的
什么是表单元素
什么是元素
在 html 中 标签/标记/元素都是指 HTML 中的标签

• 例如：<a>标签/<a>标记/a 元素

表单元素其实还是 HTML 中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能

• 表单的格式

<form>
        <表单元素>
</form>

常见的表单元素

• input 标签，input 标签有一个 type 属性，这个属性有很多类型的取值，取值的不同就决定了 input 标签的功能和外观不同

注意：表单元素一定要写在表单中t

明文输入框

账号：<input type="text">

暗文输入框

密码：<input type="password">

给输入框设置默认值

账号：<input type="text" value="wxy">
密码：<input type="password" value="123">

单选框

• 默认情况下单选框不会互斥，要想单选框互斥那么必须给每一个单选框标签都设置一个 name 属性，然后 name 属性还必须设置相同的值
• 要想让单选框默认选中某一个框，那么可以给 input 标签添加一个 checked 属性
• 在 html 中如果属性的取值和属性的名称一样，可以只写一个，但是在 xhtml 中必须写上取值，所以在企业开发中我们推荐不省略取值

性别
<input type="radio" name="xx" checked="checked">男

<input type="radio" name="xx">女

<input type="radio" name="xx">保密

多选框

爱好
<input type="checkbox">篮球

<input type="checkbox">足球

<input type="checkbox">棒球

<input type="checkbox" checked=checked>足浴

普通按钮

• 可以通过 value 属性来给按钮指定标题
• 作用：配合 JS 完成一些操作
  <input type="button" value="我是按钮">

图片按钮

• 作用：配合 JS 完成一些操作

<input type="image" src="images/register.jpg">

input type="image" src="image/register.jpg" 这里 image 有提交的功能
重置按钮

• 作用:用于清空表单中已经填写好的数据
• 注意点：如果想要修改重置按钮默认的按钮标题可以通过 value 属性来修改

<input type="reset">

提交按钮

• 作用：将表单中已经填写好的数据提交到远程服务器
• 注意点：要想把表单中填写好的数据提交到远端服务器必须具备两个条件
• 需要给 form 表单添加一个 action 的属性，通过这个 action 属性指定需要提交到的服务器地址
• 需要给需要提交到服务器的表单元素添加一个 name 属性

账号：<input type="text" name="aa">
<input type="submit">

隐藏域

• 作用：配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器，Ajax相关

<input type="hidden" name="cc" value="kukuku">

label 标签

• 默认情况下文字和输入框是没有关联关系的，也就是说点击文字输入框不会聚焦，如果向点击文字时让对应的输入框聚焦，那么就需要让文字和输入框进行绑定
• 要想让输入框和文字绑定在一起，那么我们可以使用 label 标签
• 绑定格式：
• 将文字利用 label 标签包裹起来
• 给输入框添加一个 id 属性
• 在 label 标签中通过 for 属性和输入框中的 id 进行绑定即可

<label for="account">账号：</label><input type="text" id="account">
 <label for="pwd">密码:</label><input type="password" id="pwd"><br>

datalist 标签

• 作用：给输入框绑定待选项
• datalist 格式：

<datalist>
        <option>待选内容</option>
</datalist>

• 如何给输入框绑定待选项
• 搞一个输入框
• 搞一个 datalist 列表
• 给 datalist 列表标签添加一个 id
• 给输入框添加一个 list 属性，将 datalist 的 id 对应的值赋值给 list 属性即可

<input type="text" list="cars">
<datalist id="cars">
        <option>宝马</option>
        <option>奔驰</option>
        <option>奥迪</option>
        <option>路虎</option>
        <option>宾利</option>
</datalist>

H5新增的表单标签

邮箱表单
可以自动校验输入的内容是否符合邮箱的格式

邮箱：<input type="email">

URL表单
可以自动校验输入的内容是否是 URL 地址

域名：<input type="url">

数字表单
输入框中只能输入数字

电话：<input type="number">

日历表单
可以通过日历来选择日期

时间：<input type="date">

取色板表单
可以通过取色板来选择颜色

颜色：<input type="color">

select 标签

作用：用于定义下拉列表
格式：

<select>
        <optgroup label="分组名称">
                <option>列表数据</option>
        </optgroup>
</select>

注意点

• 下拉列表不能输入内容，但是可以直接在列表中选择内容
• 可以通过给 option 标签添加一个 selected 属性来指定列表的默认值
• 可以通过给 option 标签包裹一层 optgroup 标签来给下拉列表中的数据分类

<select>
        <optgroup label="北京">
                <option selected="selected">朝阳区</option>
                <option>昌平区</option>
                <option>通州区</option>
        </optgroup>
        <optgroup label="广州">
                <option>天河区</option>
                <option>越秀区</option>
                <option>黄浦区</option>
        </optgroup>
</select>

textarea 标签

作用：定义一个多行输入框
格式：

<textarea>
</textarea>

注意点

• 默认情况下输入框可以无限换行
• 默认情况下输入框有自己的宽度和高度
• 可以通过 cols 和 rows 来指定输入框的宽度和高度，但是虽然指定了列数和行数，仍然可以无限往下输入
• 默认情况下输入框是可以手动拉伸的

fieldset 标签

fieldset 标签，可以给表单添加一个边框，legend 标签，可以给边框指定一个标题

<fieldset>
        <legend>注册界面</legend>
</fieldset>