07 - HTML常用标签（二）

九、常用布局标签

<div>和<span>标签常用作布局工具，我们俗称盒子，用于容纳内容。

<div>和<span>标签都没有像h1、p那种具体明确的语义，就是普普通通的盒子。

后期h5也增加了更多的布局标签，那时候的布局标签就有了明确的语义。

<div>标签

div：全称division，分割、区域、跨度的意思。俗称大盒子。

<div>是双标签，是最经典的容器级标签，内部可以放置任意内容，不像<h1>等内部内容有限制，这是<div>标签的一个好处。

作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用<div>包裹起来，整体设置大的布局效果。

<span>标签

span：小区域、小跨度的意思。俗称小盒子。

<span>也是双标签，容器级标签。

作用：在不改变整体效果的情况下，可以辅助进行局部调整。

十、表格

表格基础制作

创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、<td>标签。注意这里说的“至少”，并不仅限于这三个标签，这三个是最基本的。

table：表格，定义的是整个的表格大结构。

tr：table rows，表格的行，定义的是表格由多少行组成。

td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。

三者的关系：table>tr>td。一个表格中有多个行，每个行中有多个单元格。

例如一个3行4列的表格：

    <table>
       <tr>
           <td>第1行第1列</td>
           <td>第1行第2列</td>
           <td>第1行第3列</td>
           <td>第1行第4列</td>
       </tr>
       <tr>
           <td>第2行第1列</td>
           <td>第2行第2列</td>
           <td>第2行第3列</td>
           <td>第2行第4列</td>
       </tr>
       <tr>
           <td>第3行第1列</td>
           <td>第3行第2列</td>
           <td>第3行第3列</td>
           <td>第3行第4列</td>
       </tr>
    </table>

<table>标签的属性

<table>>标签可以添加border边框属性。属性值：数字，表示像素值。

表格的单元格之间有默认的空隙，会导致双线边框。

解决方法：设置标签样式属性style。

属性值：border-collapse : collapse; 表示边框塌陷。

这样就可以制作出单线表格：

表头单元格 

通常表格除了具体内容之外，还会有一些表头的说明内容，将其叫作表头单元格。

如果要绘制表头，使用标签<th>，table head data，表头单元格。

在表格中绘制的时候，替换的是<td>的位置。

<th>标签中自带默认的css样式效果，文字水平垂直居中显示且自带加粗效果，但注意这是css的功能，<th>的作用仅仅是定义一个表头单元格。

表格有多少列，<tr>中就有多少个<th>，也就是<tr>中有多少个<td>就有多少个<th>，例如上述3行4列的表格：

合并单元格

常见的表格操作中，有一种叫做合并单元格的操作，可以将垂直或水平方向的几个单元格合并为一个，可以通过单元格属性进行设置。

表格的单元格可以进行合并，通过<th>和<td>的两个属性可以进行合并设置。

• rowspan：跨行和并。上下的合并。

• colspan：跨列合并。左右的合并。

• 属性值：数字，数字是几表示跨几行或跨几列合并。

案例：

制作步骤：

1.先列出所有行<tr>，以最小单元格为标准，看看最小的单元格一共形成了多少行。     

2.再添加每一行的<td>或<th>单元格。

3.划分单元格所在行时，顶边对齐的单元格属于同一行。

4.将所有行和列写完后，即将<td>或<th>都划分完成后，再查看哪个单元格有跨行或跨列，有跨行或跨列的添加rowspan或colspan属性，属性值的个数要参考最小的单元格。

代码：

    <table border="1" style="border-collapse:collapse;">
       <!-- 第一步分辨出4行，所有4个<tr> -->
        <!-- 第二步：1  2  3 三个单元格顶边对齐（上边），所以它们三个属于第一行 -->
        <tr>
            <!-- 第四步：1左右跨两列，2上下跨两行，3左右跨两列 -->
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <!-- 第二步：第二行4 5 6 7 是对齐的，所有第二行有4个单元格 -->
        <tr>
            <!-- 第四步：4没有跨行跨列不用管，5上下跨两行，6没有跨行跨列不用管，7上下跨两行， -->
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
            <td rowspan="2">7</td>
        </tr>
        <!--第二步：第三行 8  9  10 三个单元格顶边对齐 -->
        <tr>
            <!--  第四步：8 9 10 三个单元格只有8上下跨两行 -->
            <td rowspan="2">8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <!-- 第二步：第四行 11  12  13 顶边对齐 -->
        <tr>
            <!-- 第四步：11  12  13 三个单元格只有12左右跨两列 -->
            <td>11</td>
            <td colspan="2">12</td>
            <td>13</td>
        </tr>
    </table>

表格分区

一个完整的表格分为四个大的区域：表格标题、表格头部、表格主体、表格页脚。

分区标签

• <table>内部最直接的子级包含四个分区标签（而不是那个<tr>标签），四个标签都是双标签。

caption：表格的标题，内部书写标题文字。

thead：table head，表格的头部。内部嵌套tr>th。

tbody：table body，表格的主体。内部嵌套tr>td。

tfoot：table foot，表格的页脚。内部嵌套tr>td。

• 四个分区可以选择性的进行组合，并不是这四个标签全部存在。

• 注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、 tbody、tfoot执行的。

案例：

制作技巧：

1.先书写大分区标签结构。

2.填充每个分区的内部内容。

3.如果有合并单元格内容，进行单元格合并。

代码：

    <table border="1" style="border-collapse:collapse;">
       <!-- 第一步：进行分区 -->
       <caption>各地区固定资产投资情况</caption>
       <thead>
           <!-- 头部有两行，第一行三个单元格顶边对齐所以三个<th>，第二行四个 -->
            <tr>
                <th rowspan="2">地区</th>
                <th colspan="2">按总量分</th>
                <th colspan="2">按比重分</th>
            </tr>
            <tr>
                <th>自年初累计（亿元）</th>
                <th>比去年同期增长（%）</th>
                <th>自年初累计（%）</th>
                <th>去年同期（%）</th>
            </tr>
       </thead>
       <tbody>
        <!-- 里面就是一个五行五列的表格了 -->
        <tr>
            <td>全国</td>
            <td>123456.90</td>
            <td>9.6</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
        <tr>
            <td>全国</td>
            <td>123456.90</td>
            <td>9.6</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
        <tr>
            <td>全国</td>
            <td>123456.90</td>
            <td>9.6</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
        <tr>
            <td>全国</td>
            <td>123456.90</td>
            <td>9.6</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
        <tr>
            <td>全国</td>
            <td>123456.90</td>
            <td>9.6</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>
       </tbody>
    </table>

十一、表单

表单是用来收集用户输入信息的。

表单的组成及各部分功能

HTML 表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件，比如输入框、按钮等。

在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个 部分构成。

 各部分的功能：

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

表单域

表单域标签

HTML表单域使用<form>标签进行定义。

<form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个<form>标签之内。

<form>标签为双标签，容器级标签。

表单域标签的属性

<form>标签通过对应属性规定提交数据的方法和提交位置，这是比较重要的。

重点记忆前面两个属性即 action 和 method 属性即可。一个网页中可能有多个表单，为了区分不同的表单可以用name属性进行区分。

<form action="xxx.php" method="post/get" name="message">
     提示信息及表单控件书写位置
</form>

表单元素

1. <input>标签

• <input>标签是最重要的一个表单元素。

• <input>标签为单标签，本身相当于一个特殊的文本。所以说它在书写的时候就像文字，没有特殊的设置不会自动换行，在工作中一般为了实现它的换行效果要么用一个可以自动换行的标签去包裹它，或者也可以写一些<br>进行换行。

• <input>标签作为单标签，只能通过标签属性实现各种功能。

• <input>标签常用属性:

其中，type属性是<input>标签最重要的属性，type属性的值不同，决定了<input>标签的形态不同。

（1）单行文本输入框：text

<input>标签的type属性值为text。

定义提供用户输入的单行文本的输入框，有个限制就是不能输入多行文字。

常用value属性定义默认的输入文字。

用户名：<input type="text" value="请输入您的用户名">

（2）密码输入框：password

<input>标签的type属性值为password。

定义提供用户输入的密码框。

password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

密码：<input type="password">

（3）单选框：radio

<input>标签的type属性值为radio。

定义提供用户点击选择的单选框。

单选框一般都是成组出现，多个单选框组成一组选择的情况。

同一组单选框之间必须是互斥的关系（选了A就不能同时也选上B），通过给同一组单选框都设置相同的name属性值实现，否则几个选项可以同时选择，不符合常理。

        <p>
            性别：
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </p>

（4）复选框：checkbox

<input>标签的type属性值为checkbox。

定义提供用户点击选择的多选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

同一组复选框最好也设置相同的name属性，它不是为了实现互斥，而是为了分组。

        <p>
            爱好：
            <input type="checkbox" name="hobby">唱歌
            <input type="checkbox" name="hobby">跳舞
            <input type="checkbox" name="hobby">编程
        </p>

默认选中设置

单选框和复选框都可以提前设置默认选中项。

<input>标签有一个checked属性，如果不设置表示默认没有选中。

属性值如果设置为"checked" ，表示该项默认被选中。

 （5）按钮

<input>标签有四种形式的按钮：

        <p>
            <input type="button" value="普通按钮">
            <input type="reset" value="重置按钮">
            <input type="submit" value="提交按钮">
            <input type="button" src="image/ceshi.jpg">
        </p>

（6）文件上传：file

<input>标签的type属性值为file。

定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。

使用input的multiple属性，可以决定是否可以选择多个文件，如果不设置此属性那么只可以上传一个文件，选了另一个就会把原来的替换掉，设置了此属性就可以上传多个文件。

        <p>
            文件：
            <input type="file" multiple="multiple">
        </p>

2. 文本域<textarea>

文本域使用<textarea>标签定义，制作可以输入多行文本的区域。

<textarea>标签为双标签，整个的文本域区域相当于一个特殊的文字。

文本域可以设置默认输入的文字，在双标签之间书写默认文字。

<textarea>标签属性

<textarea>有两个标签属性，可以设置显示区域大小。

rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条。

cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（英文一个字符占一个字节，汉字一个汉字占两个字节）。

这两个属性当作了解即可，实际工作中设置文本域的宽度和高度一般会用后续要学的css，很少使用这两个属性。

        <p>
            自我介绍：
            <textarea rows="5" cols="30">
                请书写一个200字的自我介绍
            </textarea>
        </p>

3. 下拉菜单

• HTML中的下拉菜单提前设置一些选项，然后可以通过点击选择其中一项。

• 下拉菜单需要至少两个标签完成结构：

  <select>：选择，表示定义下拉菜单整体结构。

  <option>：选项，表示定义下拉菜单的每一项。

• 两个标签都是双标签，文本级标签。

• 关系：select>option即select嵌套option，option可以有任意多项。

• 默认选中项

默认情况下，选中的是第一项。

下拉菜单可以通过给<option>标签设置selected属性，属性值为selected，更改默认选中项。

        <p>
            城市：
            <select>
                <option>北京</option>
                <option>上海</option>
                <option selected="selected">广州</option>
                <option>深圳</option>
            </select>
        </p>

分组管理

下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。

可以使用<optgroup>标签对选项进行分组，<optgroup>是一个双标签。

关系：select>optgroup>option

<optgroup>可以设置一个label属性，表示给这一组选项添加一个分组标签名，就是这个分组的名字，分组标签<optgroup>是不能被点击选择的。

        <p>
            <!-- 下拉菜单 -->
            城市：
            <select>
                <optgroup label="国内">
                    <option>北京</option>
                    <option>上海</option>
                    <option selected="selected">广州</option>
                    <option>深圳</option>
                </optgroup>
                <optgroup label="国外">
                    <option>伦敦</option>
                    <option>巴黎</option>
                </optgroup>
            </select>
        </p>

 4. <label>标签

所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个<label>标签。

<label>标签的作用是帮表单元素定义标注（标记）。

如果将表单控件与提示内容使用进行绑定后，当用户鼠标点击<label>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。

绑定方法一

1.给表单元素设置id属性。

2.然后将需要绑定的其他内容用<label>标签包裹。

3.给<label>标签设置for属性，属性值为绑定的表单元素的id属性值。

例如给性别中的“男”添加绑定，“女”未添加绑定，点击二者前面的空心圆圈都可以选中选项，但是点击“男”字时可以选中男这个选项，点击“女”字时是不可以选中女这个选项的，因为没有绑定。

        <p>
            性别：
            <input type="radio" name="sex" checked="checked" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex">女
        </p>

绑定方法二

如果绑定内容和表单元素写在一起，可以化简绑定写法。没有写在一起就只能用第一种方法。

直接使用标签将绑定内容与表单元素一起进行嵌套。

        <p>
            性别：
            <label><input type="radio" name="sex" checked="checked">男</label>
            <input type="radio" name="sex">女
        </p>

这两种方法有不同的使用场景：第一种方法适用于距离比较远的，这时使id和for对应是很方便的；如果绑定内容和表单元素写在一起就用第二种方法。

form表单实例

    <form action="ceshi.php" method="get" name="form1">
        <!-- 由于表单元素不会自动换行，所以这里暂时用p标签进行换行，后续学习了css会有更好地处理方法 -->
        <p>
            <!-- 单行文本输入框：text -->
            用户名：<input type="text" value="请输入您的用户名">
        </p>
        <p>
            <!-- 密码输入框：password -->
            密码：<input type="password">
        </p>
        <p>
            <!-- 单选框：radio -->
            性别：
            <label><input type="radio" name="sex" checked="checked">男</label>
            <input type="radio" name="sex">女
        </p>
        <p>
            <!-- 复选框：checkbox -->
            爱好：
            <input type="checkbox" name="hobby">唱歌
            <input type="checkbox" name="hobby">跳舞
            <input type="checkbox" name="hobby" checked="checked">编程
        </p>
        <p>
            <!-- 文件上传：file -->
            文件：
            <input type="file" multiple="multiple">
        </p>
        <p>
            <!-- 文本域 -->
            自我介绍：
            <textarea rows="5" cols="30">
                请书写一个200字的自我介绍
            </textarea>
        </p>
        <p>
            <!-- 下拉菜单 -->
            城市：
            <select>
                <optgroup label="国内">
                    <option>北京</option>
                    <option>上海</option>
                    <option selected="selected">广州</option>
                    <option>深圳</option>
                </optgroup>
                <optgroup label="国外">
                    <option>伦敦</option>
                    <option>巴黎</option>
                </optgroup>
            </select>
        </p>
        <p>
            <!-- 按钮 -->
            <input type="button" value="普通按钮">
            <input type="reset" value="重置按钮">
            <input type="submit" value="提交按钮">
            <input type="button" src="image/ceshi.jpg">
        </p>
    </form>

十二、字符实体

在普通文字书写时，有一些特殊符号不能直接书写（例如连续的空格，因为空白折叠现象），或者符号具有特殊功能也不能直接书写 （例如<>符号，不会被当做普通文字，而是当作标签）。

可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。其实字符实体就是一些特殊字符的替换写法。

如何查看字符实体？通过查询w3cshool手册，查看所有的字符实体。

w3school.com.cn这是一个中文在线文档，里面规范了所有语法的内容，也可以当作教程进行学习，HTML 、CSS等都包含在内。

 可以查询特殊字符的替换写法，包含实体名称以及实体编号。在代码中书写对应的实体名称或实体编号。

 其中几个常用的有空格、大于号、小于号、版权符号。

    <p>这是一个连续的空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
    <p>这是一个段落&lt;p>标签</p>

 使用规则和建议：

规则：所有的字符实体和实体编号都是以&开头，以；结尾的。

注意：实体名称对大小写敏感！

建议1：使用实体名称，好处是名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

建议2：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名称即可，其他可以通过手册进行查询。