HTML进阶常用标签

1、表格标签

表格的基本语法

<table>
    <tr>
        <td>单元格</td>
        ...
    </tr>
    ...
</table>

• <table> </table> 是用于定义表格的标签
• <tr> </tr> 用于定义表格中的行，必须嵌套在 <table> </table> 标签中
• <td> </td> 用于定义表格中的单元格（列），必须嵌套在 <tr> </tr> 标签中
  

表头单元格标签—th

一般表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格里面的文本内容默认加粗居中显示。

<th> 标签表示 HTML 表格的表头部分（table head 的缩写）。

<table>
    <tr>
    	<th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        ...
    </tr>
    ...
</table>

表格属性

**注意：**表格标签的属性在实际开发中并不常用，而是通过后面的 CSS 来设置，这里了解即可。

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：style="text-align: center;" 设置）（了解）
border	1 或 ""	规定表格单元是否拥有边框，默认为 “”，表示没有边框（了解）
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认 1 像素（了解）
cellspacing	像素值	规定单元格之间的空白，默认 2 像素（了解）
width	像素值 或 百分比	规定表格的宽度（了解）
height	像素值 或 百分比	规定表格的高度（了解）

合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，这里会最简单的合并单元格即可。

合并单元格的方式：

• 跨行合并（上下合并）：rowspan="合并单元格的个数"
• 跨列合并（左右合并）：colspan="合并单元格的个数"

目标单元格：（写合并代码）

• 跨行：最上侧单元格为目标单元格，写合并代码
• 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

• 先确定是跨行还是跨列合并
• 找到目标单元格，写上 合并方式=合并的单元格数量，比如：<td colspan="2"> </td>
• 删除多余单元格

<table align="center" border="1"   width="400px"  height="300px">

    <tr>
        <!-- 跨行合并，rowspan=“合并单元格的个数” -->
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <!-- 上边已经占了一列，下边的要删掉<td></td> -->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <!-- colspan删掉  <td></td> -->
    </tr>

</table>

2、列表标签

根据使用情景不同，列表可以分为三大类：无序列表、有序列表 和 自定义列表。

标签名	定义	说明
<ul> </ul>	无序标签	里面只包含 li，没有顺序，使用较多，li 里面可以包含任何标签
<ol> </ol>	有序标签	里面只包含 li，有顺序，使用相对较少，li 里面可以包含任何标签
<dl> </dl>	自定义标签	里面只能包含 dt 和 dd，dt 和 dd 里面可以放任何标签，dd 一般作为对 dt 的细分描述

3、表单标签

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

表单域

• action——存放的是 后台地址 也就是后端接口
• method —— 请求方式: get获取，放到调试工具处，隐藏起来相对安全 post更新，传回后端

<!-- 表单标签—— -->
    <!-- action存放的是 后台地址 也就是后端接口-->
    <!-- method  请求方式: get获取，放到调试工具处，隐藏起来相对安全  post更新，传回后端 -->

<form action="http://127.0.0.1:8080" method="get">
    <!-- 各种表单元素控件 -->
</form>

表单域是一个包含表单元素的区域。
在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器。

常用属性：

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

form 表单中 method 的 get 和 post 区别：

method 方法规定如何发送表单数据（表单数据会被发送到在 action 属性规定的服务器地址中）。

表单数据可被作为 URL 变量的形式来发送（method=“get”）或者作为 HTTP post 的形式来发送（method=“post”）。

关于 GET：

• 将表单数据以名/值对的形式附加到 URL 中
• URL 的长度是有限的（大约 3000 字符）
• 绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的，且浏览器会缓存 URL）
• 对于用户希望加入浏览器书签的表单很有用（因为信息记录在 URL 中，直接保存 URL 即可）
• GET 更适用于非安全数据，比如在 Google 中查询字符串

关于 POST：

• 将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
• 没有长度限制
• 通过 POST 提交的表单不能加入书签
• POST 数据也是不安全的，但起码不会明目张胆的直接把数据显示在地址栏 URL 上，且不会缓存数据

表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

输入框—input

在表单元素中 <input> 标签用于收集用户信息。

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本、字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值">

• <input> 标签为单标签

• type 属性设置不同的属性值用来指定不同的控件类型

文本输入框—text

<label for="password">，for中字段要与id中字段相同

• label，通常配合使用,优化用户体验
• id，类似数据库中id的作用，标志着“唯一标签”的含义
• name，做数据传递，要与实体类中的名字相同

<!-- lable标签，通常配合使用,优化用户体验 -->
<label for="name">请输入姓名:</label>
<input type="text" id="name" name="name"> <!-- name中相当于规范传回后端的值为什么 -->

<br /><br />

<!-- password 做文本内容加密 -->
<label for="password">请输入密码:</label>
<input type="password"  id="password" name="password">

单选框—radio

• checked——被选中，默认展示的是哪一个

<!-- radio 单选框 name相同时才可以算作一个选项 -->
        <input type="radio" name="sex" value="0" checked>男 <!-- checked,被选中，默认展示的是哪一个-->
        <input type="radio" name="sex" value="1">女 <!-- value是指传回后端二点数据，0代表男，1代表女 -->

多选框—checkbox

  <!-- 多选框 -->
        第一题
        <br />
        <input type="checkbox" name="hoby">A
        <input type="checkbox" name="hoby">B
        <input type="checkbox" name="hoby">C
        <input type="checkbox" name="hoby">D

• name —— 做数据传递，要与实体类中的名字相同，相当于规范传回后端的值为什么
• class —— 样式优化，css通常通过class来优化标签
• id —— 类似数据库中id的作用，标志着“唯一标签”的含义
  

按钮 — button、submit

        <!-- button 按钮 -->
        <input type="button" value="按钮">

        <!-- submit 提交，提交到后端 -->
        <input type="submit" value="提交">

下拉框 —select

• option——展示在下拉框中的内容
• selected——被选择，默认展示的是哪一个
• value——中是返回后端的值

<!-- 下拉框，功能 -->
        <select name="nationality" id="nationality">
            <!-- option，展示在下拉框中的内容 -->
            <option value="0">中国</option> <!-- value中是返回后端的值-->
            <option value="1" selected>美国</option> <!-- selected,被选择，默认展示的是哪一个-->
        </select>

文本表单 — textarea

cols、rows代表长宽，可以在表单中输入字符，可以在网页端修改框的大小

<!-- 文本表单 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>