HTML常用标签（二）

一、列表

（一）无序列表

1.标签：ul嵌套li，ul是无序列表，li是列表条目
2.作用：布局排列整齐的不需要规定顺序的区域
例：

<ul>
	<li>第一条</li>
	<li>第二条</li>
</ul>

运行结果：

• 第一条
• 第二条

注意：
ul标签里只能包裹li标签
li标签里可以包含任何内容

（二）有序列表

1.标签：ol嵌套li，ol是有序列表，li是列表条目
2.作用：布局排列整齐的需要规定顺序的区域
例：

<ol>
	<li>第一条</li>
	<li>第二条</li>
</ol>

运行结果：

1. 第一条
2. 第二条

注意：
ol标签里只能包裹li标签
li标签里可以包含任何内容

（三）定义列表

1.标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的详情/描述
2.作用：列出不同产品的主要特性，并逐个说明
例：

<dl>
	<dt>水产品</dt>
		<dd>螃蟹</dd>
		<dd>小龙虾</dd>
	<dt>蛋类</dt>
		<dd>鸡蛋</dd>
</dl>

运行结果：

水产品

螃蟹

小龙虾

蛋类

鸡蛋

注意：
dl标签里只能包裹dt和dd
dt和dd里可以包含任何内容

二、表格

1.标签：table嵌套tr，tr嵌套td和th，table是表格，tr是行，th是表头单元格，td是内容单元格
2.作用：更直观，更清晰的表达内容
例：

<table>
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>24</td>
	</tr>
</table>

运行结果：

姓名	年龄
张三	24

（一）border

• 表格默认没有边框线

<table border="1">设置表格边框线宽度为1px

（二）rowspan

• 合并多行

<td rowspan="2">合并两行

样例：

（三）colspan

• 合并多列

<td colspan="2">合并两列

样例：

三、表单

1.标签：form嵌套input
2.作用：收集用户信息
3.使用场景：

• 登录页面
• 注册页面
• 搜索区域

（一）form属性

• action：当提交表单时向何处发送表单数据
• method：提交表单方式
  1、post：通过HTTP请求体传递表单数据（通常用于提交或修改数据，数据不会显示在URL中）
  2、get：通过URL传递表单数据（通常用于查询操作，数据会显示在URL中）
• targer：提交表单后打开的方式
  1、_blank：在新窗口或新标签页中打开。
  2、_self：在相同的框架或标签页中打开（默认值）。
  3、_parent：在父框架中打开。
  4、_top：在整个窗口中打开，取消所有框架。
  5、framename：在指定的框架中打开。

（二）input

例：

文本框：<input type="text">
<br>
密码框：<input type="password">
<br>
单选框：<input type="radio" name=”xxx“ checked>
<!-- checked为默认选中 -->
<br>
多选框：<input type="checkbox">
<br>
上传文件：<input type="file">
<!-- 添加multiple属性可以实现文件多选功能 -->

运行结果：

注意：
同一组的单选框和多选框name必须一致，方便提交表单时的数据处理

（三）placeholder

例：

文本框：<input type="text" placeholder="请输入内容">
<br>
密码框：<input type="password" placeholder="请输入密码">

运行结果：

（四）下拉菜单

1.标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项
2.作用：类似表单中的单选项

省份：
<select>
	<option>辽宁省</option>
	<option>山西省</option>
	<option selected>吉林省</option>
	<!-- selected为默认选中 -->
</select>

运行结果：

（五）文本域

1.标签：teatarea
2.作用：多行输入文本的表单控件
3.使用场景：

• 发朋友圈
• 发表评论等
  例：

<textarea>请输入内容</textarea>
<!--
<textarea rows="10" cols="10">请输入内容</textarea> 
rows是高度，cols是宽度
-->

运行结果：

（六）lable

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

<!-- 写法一 -->
<label>文本框：<input type="text"></label>
<!-- 写法二 -->
<label for="one">文本框：</label>
<input type="text" id="one">

运行结果：

点“文本框：”光标自动选中

（七）button按钮

例：

<!-- 写法一 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<!-- title修改按钮上显示的内容 -->
<br><br>
<!-- 写法二 -->
<button type="submit">登录</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

运行结果：

四、无语义的布局标签

1.标签：

• div：独占一行
• span：不换行
  2.作用：布局网页，划分区域
  例：

<div>1111</div>
<div>2222</div>
<span>1111</span>
<span>2222</span>

运行结果：