文章目录
前言
提示：本篇文章介绍HTML部分基础知识，其中包括HTML列表、表格、表单：
随着网页开发的不断发展，学习Web前端这门技术也越来越重要，很多人都开启了学习HTML，本文就介绍了HTML的部分基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、HTML列表
1.HTML3种列表
HTML列表分为3种：有序列表、无序列表和定义列表。
有序列表和无序列表比较常用，定义列表比较少用，在实际应用中无序列表是被使用的最多的，请大家重点掌握。
- 有序列表
基本语法：
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
运行效果：
-
无序列表
无序列表是三个列表中最为重要的列表
基本语法：
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
运行效果：
- 定义列表
基本语法：
<dl>
<dt>食谱</dt>
<dd>我喜欢吃酸辣土豆丝</dd>
<dd>她喜欢吃酸菜鱼</dd>
<dd>你喜欢吃什么呢</dd>
</dl>
运行效果：
2.列表练习题
小练习：下面是一个网页在浏览器上面显示的效果，请制作一张一模一样的城市公约。
二、HTML表格
1.表格语义化标签
通过语义化记忆表格标签：
表格的基本标签
| 标签 | 语义 | 说明 |
|---|---|---|
| table | table(表格) | 表格 |
| tr | table row(表格行) | 行 |
| td | table data cell（表格列） | 列 |
| 表格结构标签 | ||
| 标签 | 语义 | 说明 |
| – | – | – |
| thead | table head | 表头 |
| tbody | table body | 表身 |
| tfoot | table foot | 表脚 |
| th | table header | 表头单元格 |
2.表格基本结构
<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签可以没有，但是这3者必须要有。
代码如下（示例）：
<table border="1" />
<tr>
<td>表格1</td>
</tr>
<tr>
<td>表格2</td>
</tr>
<tr>
<td>表格2</td>
</tr>
</table>
运行效果：
<table>和</table>标记着表格的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行，在表格中包含几组<td>和</td>就表示该表格为几列。
3.表格综合运用
代码如下（示例）：
<table border="1" cellpadding="1" cellspacing="1" bordercolor="red" width="500"/>
<tr>
<td width="300" align="center">1</td>
<td bgcolor="red">2</td>
</tr>
<tr bgcolor="red">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td bgcolor="yellow">5</td>
<td height="450">6</td>
</tr>
</table>
运行效果：
-
表格的基本标签以及可以使用的标签
table：定义表格 tr：代表每一行 td：代表行里面的每一格 border：边框宽度，默认是 bordercolor：边框颜色 bgcolor：背景颜色，可以加在table、td、tr上 width和height：宽和高 align:水平方向 center：水平居中 right：右对齐 left：左对齐 valign:垂直方向 middle：垂直居中 bottom：向下 top：向上 cellspacing：边框距离表格的间距 cellpadding：表格里的内容距离四周边框的边距
4.表格跨行、跨列合并
代码如下（示例）：
<table border="1" width="500" height="400">
<tr>
<td rowspan="3" valign="top">表格1</td>
<td colspan="2">表格2</td>
</tr>
<tr>
<td>表格2</td>
<td rowspan="2" align="right">表格3</td>
</tr>
<tr>
<td align="right">表格2</td>
</tr>
</table>
运行效果：
- 合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
- rowspan:表格跨几行（纵向合并）
- colspan:表格跨几列（横向合并）
5.表格练习题
流量调查表：下面是一个网页在浏览器上的效果，请制作该流量调查表网页。
要求：
大标题使用<h1>标签
表头使用<th>标签
行列使用<tr>、<td>标签
三、HTML表单
1.表单基本结构
表单有三部分组成：表单标签、表单域、按钮
-
表单标签
action：表单提交给后端的url地址，不写内容是提交到本网页 method：提交方式 get：参数会出现地址中 post：参数不会出现在地址中，更安全 -
表单域
type：type值有多种，所呈现的表单效果不一样，比如文本框、复选框、下拉框、单选框 name：代表表单的名称，后端通过name值获取用户所填写的内容 value：用来接收用户填写的内容，也可以设置默认值
代码如下（示例）：
<form action="" method="get">
<p>用户名：<input type="test" name="111" value=""/></p>
<p>密 码：<input type="password" name="1112" value=""/></p>
<p>     <input type="submit" value="登录"/> </p>
</form>
运行效果：
2.表单按钮类型
-
type:
image和submit：提交按钮，会自己将表单数据提交给后端 button：普通按钮，必须配合事件使用 rest：重置，回到表单最初状态 -
textarea:多行文本域
rows：代表文本初始容纳的行数，超过会自己显示滚动条 cols：规定每一行显示的字符数，比如10，汉字对应5个，英文对应10个
代码如下（示例）：
<form action="" method="get">
用户名：<input type="text" name="username" value="张三" /><br>
密 码: <input type="text" name="pwd" id="" value="" /><br>
留 言: <textarea rows="2" cols="6"></textarea><br>
<input type="submit" value="登录" /><br>
<input type="image" src="submit.jpg"/><br>
<input type="button" value="删除" onclick="alert('删除成功)'"/><br>
<input type="reset" value="重置" />
</form>
运行效果：
3.表单标注——label标签
-
label:
增强鼠标的可用性 自动将焦点转移到与该标注相关的表单元素上
代码如下（示例）：
<form action="" method="post">
<input type="radio" name="gender" id="a" value="male" />
<label for="a">男</label>
<input type="radio" name="gender" id="b" value="female" />
<label for="b">女</label>
</form>
运行效果：
4.表单单选框、下拉框和复选框
type:text（文本框）；password（密码框）
radio：单选按钮，name值必须保持一致，后端根据name获取到的是value值
checkbox：复选框按钮，name值必须保持一致，后端根据name可以获取到多个value值
checked：默认选中
select：下拉框
option：指下拉框的每一项
selected：下拉框默认选项，不设置默认第一条
multiple：下拉框多选
后端根据name获取到value值
代码如下（示例）：
<form action="" method="post">
性别：<input type="radio" name="xingbie" value="boy"/>男孩
<input type="radio" name="xingbie" value="girl"checked />女孩
爱好：<input type="checkbox" name="aihao" value="zhaogirl" checked />旅行
<input type="checkbox" name="aihao" value="gao money" checked />运动
<input type="checkbox" name="aihao" value="xuexi" checked/>学习
<input type="checkbox" name="aihao" value="shuijiao" />购物<br>
出生年月：
<select name="yesr">
<option value="">请选择</option>
<option value="2000">2000</option>
<option value="2001" selected>2001</option>
<option value="2002">2002</option>
</select>年
<select name="month" multiple >
<option value="">请选择</option>
<option value="9">9</option>
<option value="10" selected>10</option>
<option value="11">12</option>
</select>月<br><br>
<input type="submit" value="注册"/>
</form>
运行效果：
5.表单buttom按钮
buttom和type=“buttom”都是普通按钮，同样不能提交表单数据
但是buttom是双标签内容可以放置图片或者其他，比type=“buttom”更灵活
placeholder：预期提示
required：必填
readonly：只读，用户无法编辑，数据会随表单正常提交
disabled：禁用，相当于作废，数据不会随表单提交到后端
hidden：隐藏域，当有些数据需要提交给后端，但是又不希望用户看到
代码如下（示例）：
<form action="" method="get">
用户名：<input type="text" name="username" value="" placeholder="请输入6位字母数字组合" required /><br>
密码：<input type="text" name="pwd" value="13456" readonly /><br>
邮箱：<input type="text" name="email" value="[email protected]" disabled /><br>
id:<input type="hidden" name="id" value="5965" /><br>
<input type="submit" value="提交" /><br>
<button type="button" disabled>点击</button><br>
<button type="button" name="bth" value="123">
<img src="submit.jpg">
</button><br>
</form>
运行效果：
6.input属性
size：初始宽度，代表字符数
maxlength：可输入的最大字符长度
style：设置样式
语法:style="属性名：属性值；属性名：属性值..."
background-color：设置背景颜色
width：设置宽度
heigth：设置高度
color：设置字体颜色
代码如下（示例）：
<form action="" method="get">
<input type="text" size="20" maxlength="20" value="212" /><br>
<input type="password" maxlength="6" value="221" /><br>
<input style="background-color: aqua; color: red;width: 80px;" type="submit" value="提交" />
</form>
运行效果：
7.文件上传
-
文件上传：
提交类型必须是post enctype：告诉后端这是一个带有文件的表单 需要按照文件上传获取相应的数据 type： file，代表文件上传 multiple：多文件上传
代码如下（示例）：
<form action="" method="post" enctype="multipart/form-data">
用户名：<input type="text" name="username" value="" /><br>
照 片： <input type="file" name="file" value="" /><br>
多文件上传： <input type="file" name="file" multiple value="" /><br>
<input type="submit" value="上传" />
</form>
运行效果：
