HTML 第二天

目录

列表

无序列表

有序列表

定义列表

表格

表格 – 基本用法

表格结构标签

合并单元格

表单

input 标签基本使用

input 标签占位文本

单选框 radio

上传文件 - file

多选框 - checkbox

下拉菜单

文本域

label 标签

写法一

写法二

按钮 - button

语义化

字符实体

---

列表

作用：布局内容排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

无序列表

作用：布局排列整齐的 不需要规定顺序 的区域。

标签：ul 嵌套 li， ul 是无序列表， li 是列表条目。

注意事项：

• ul 标签里面只能包裹 li 标签

• li 标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的 需要规定顺序 的区域。

标签：ol 嵌套 li， ol 是有序列表， li 是列表条目。

注意事项：

• ol 标签里面只能包裹 li 标签

• li 标签里面可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd， dl 是 定义列表 ， dt 是定义列表的 标题 ， dd 是定义列表的 描述 / 详情 。

注意事项：

• dl 里面只能包含dt 和 dd

• dt 和 dd 里面可以包含任何内容

表格

表格 – 基本用法

网页中的表格与 Excel 表格类似，用来 展示数据 。

标签： table 嵌套 tr ，tr 嵌套 td / th 。

提示：在网页中， 表格默认没有边框线 ，使用 border 属性可以为表格添加边框线。

表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

合并单元格

作用：将 多 个单元格合并成 一 个单元格，以 合并同类信息 。、

合并单元格的步骤：

1. 明确合并的目标

2. 保留 最左最上 的单元格，添加属性（取值是 数字 ，表示 需要合并的单元格数量 ）

– 跨行合并，保留 最上 单元格，添加属性 rowspan

– 跨列合并，保留 最左 单元格，添加属性 colspan

3. 删除其他单元格

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）

 table {
      /* 合并相邻边框 */
      border-collapse: collapse;
     
    }

表单

作用：收集用户信息。

使用场景：

• 登录页面

• 注册页面

• 搜索区域

input 标签基本使用

input 标签 type 属性值不同，则功能不同 。

input 标签占位文本

占位文本：提示信息。

<input type="..." placeholder=" 提示信息 ">

文本框和密码框都可以使用。

单选框 radio

常用属性：

<input type="radio" name="gender" checked> 男

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

提示： name 属性值自定义。name相同时才能实现多选一

上传文件 - file

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现 文件多选 功能。

<input type="file" multiple >

多选框 - checkbox

多选框也叫 复选框 。

默认选中： checked 。

<input type="checkbox" checked > 敲前端代码

下拉菜单

标签： select 嵌套 option ， select 是下拉菜单整体， option 是下拉菜单的每一项。

默认显示第一项 ， selected 属性实现 默认选中 功能

<select>

<option> 北京 </option>

<option> 上海 </option>

<option> 广州 </option>

<option> 深圳 </option>

<option selected > 武汉 </option>

</select>

文本域

作用： 多行 输入文本的表单控件。

标签： textarea ，双标签。

<textarea> 默认提示文字 </textarea>

label 标签

作用：网页中，某个标签的说明文本。

作用： 增大表单控件的点击范围

写法一

label 标签 只 包裹 内容 ， 不包裹表单控件

设置 label 标签的 for 属性值 和表单控件的 id 属性值 相同

<input type="radio" id="man" >

<label for="man" > 男 </label>

写法二

使用 label 标签 包裹文字和表单控件 ，不需要属性

<label> <input type="radio"> 女 </label>

提示：支持 label 标签增大点击范围的表单控件： 文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域 等等。

按钮 - button

<button type=""> 按钮 </button>

type属性值：

提示：

• 注意：按钮需配合 form 标签 （表单区域）才能实现对应的功能。

语义化

无语义的布局标签

作用： 布局网页 （划分网页区域，摆放内容）

div ：独占一行                大盒子

span ：不换行                小盒子

有语义的布局标签

4

字符实体

作用：在网页中 显示预留字符 。

提示：

• lt 是 less than 的缩写

• gt 是 greater than 的缩写