文章目录
表格标签
作用
主要用于展示数据,使数据显示规整
表格基本语法
<table> <!--定义表头-->
<tr> <!--定义表格中的行-->
<th>表头1</th> <!--定义表格中的单元格-->
<th>表头2</th> <!--定义表格中的单元格-->
...
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
...
</tr>
</table>
<table>
<thead></thead> 定义表格头部
<tbody></tbody> 定义表格主体
</table>
表格属性
实际开发中,通过css来设置。结构与样式相分离 |
属性 | 属性值 | 说明 |
---|---|---|
align | left、center、right | 对齐方式 |
alt | 文本 | 替换文本 |
border | 1或"" | 表格是否有边框,默认""无边框 |
cellpadding | 像素值 | 单元边沿与内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值/百分比 | 规定表格的宽度 |
小说排行榜案例
<h2 align="center">小说排行榜</h2>
<table align="center" border="1" cellpadding="20" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="../img/up.jpg" width="40"></td>
<td>345</td>
<td>123</td>
<td><a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">鬼吹灯</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="../img/down.webp" width="40"></td>
<td>124</td>
<td>675432</td>
<td><a
href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859?fr=aladdin">盗墓笔记</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="../img/up.jpg" width="40"></td>
<td>212</td>
<td>333005</td>
<td><a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723?fr=aladdin">西游记</a></td>
</tr>
</tbody>
</table>
单元格合并
-
方式
- 跨行合并 rowspan= “合并单元格个数”
- 跨列合并 colspan = “合并单元格个数” 示例
- 表格表头单元格合并
<table align="center" border="1" cellpadding="10" cellspacing="0">
<tr>
<th colspan="5">个人简历</th>
</tr>
<tr>
<td>姓名:</td>
<td></td>
<td>性别:</td>
<td></td>
<td rowspan="3">照片</td>
</tr>
<tr>
<td>出生年月:</td>
<td></td>
<td>民族:</td>
<td></td>
</tr>
<tr>
<td>政治面貌:</td>
<td></td>
<td>学历:</td>
<td></td>
</tr>
</table>
列表标签
作用
表格是用来显示数据的,列表是用来布局的
整齐、整洁、有序,作为布局会自由方便
无序列表
ul 标签表示 HTML 页面中项目的无序列表
li标签用于定义列表项
-
示例
- 无序列表
<h3>无序列表-您喜欢吃的食物</h3>
<ul>
<li>臭豆腐</li>
<li>榴莲</li>
<li>鱼罐头</li>
<li><p>123</p></li>
</ul>
有序列表
ol 标签用于定义有序列表,列表排序以数字来显示,
li 标签来定义列表项。
-
示例
- 有序列表
<h3>有序列表-粉丝排行榜</h3>
<ol>
<li>刘德华 10000</li>
<li>刘若英 1000</li>
<li>路人 100</li>
</ol>
-
注意
-
①ol中只能嵌套li
②有序列表会带有自己的样式属性(行首有数字序号等),可通过css设置
自定义列表
dl:用于定义描述列表(或定义列表)
dt:定义项目/名字
dd:描述每一个项目/名字
-
注意
-
①dl中只能嵌套dt、dd
②常常一个dt对应多个dd
③dt和dd是并列关系
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
表单标签
作用
表单是为了在网页中收集用户信息
HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。
表单域是form大标签,囊括表单信息
input输入表单元素
type属性
属性值 | 描述 |
---|---|
checkbox | 复选框(name属性值必须相同) |
radio | 单选按钮(必须有相同的name属性值) |
file | 定义输入字符按和“浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字符被隐藏 |
button | 可点击按钮(如获取短信验证码) |
reset | 重置 |
submit | 提交按钮 将表单数据发送给服务器(如注册、提交) |
text | 定义单行输入字段,默认宽度20 |
示例
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以在里面输入任何文字 -->
用户名:<input type="text" name="username" value="请输入用户名"><br/>
<!-- password 密码框 用户看不见输入的密码 -->
密码:<input type="password" name="password"><br/>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可实现多选一 -->
性别:男<input name="sex" type="radio" value="男"> 女<input name="sex" type="radio" value="女"><br/>
<!-- checkbox 复选框 可以实现多选 -->
爱好:吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆">
<!-- value可以设置值,把该value送到后台 -->
<!-- name和value是每个表单元素都有的属性值 主要给后台人员使用
name是表单元素的名字 要求单选按钮和复选框要有相同的name值 -->
<!-- sunmit 提交按钮 把表单数据发送到服务器 -->
<input type="submit" value="提交按钮">
<input type="submit" value="免费注册"><br/>
<!-- reset 重置按钮 可以还原表单初始的默认状态 -->
<input type="reset" value="重新填写"><br/>
<!-- button 普通按钮 定义可点击按钮 后期结合JavaScript使用 -->
<input type="button" value="获取短信验证码"><br/>
<!-- file 文件域 上传文件 -->
上传头像:<input type="file"><br/>
</form>
效果如下:
其他属性
属性 | 属性值 | 描述 |
---|---|---|
name | 用户自定义 | 定义input元素名称(单选按钮、复选框) |
value | 用户自定义 | 规定input的值(打开页面就显示的默认值) |
checked | checked | 规定此input元素首次加载时应被选中(单选按钮、复选框默认值) |
maxlength | 正整数 | 规定输入字段中 字符最大长度 |
label标签
😊😊label 标签用于绑定一个表单元素, 当点击 |
示例
<label for="addr">住址:</label>
<input type="text" id="addr">
<input type="radio" name="sex2" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex2" id="nv">
<label for="nv">女</label>
label标签的核心:label标签的for属性应当和相关元素的id属性相同
select下拉表单元素
注意
①select中至少包含一对 。
②在option 中定义 selected =“ selected " 时,当前项即为默认选中
示例
籍贯:
<select>
<option>岳阳</option>
<option selected="selected">武汉</option>
<option>广州</option>
</select>
效果:
textarea文本域元素
场景
- 用户输入内容较多的情况下,我们就不能使用文本框表单
- textarea标签是用于定义多行文本输入的控件
- 控件常见于留言板,评论。
示例
留言评论:
<textarea>
这里可以填写默文本域中的默认值
</textarea><br/>
留言评论:
<!-- 设置3行 实际可以写到456行 自动加滑动条
实际开发中 用css改变大小 -->
<textarea rows="3" cols="60">感谢您的留言
</textarea>
综合案例:注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
</head>
<body>
<h3>青春不常在,抓紧谈恋爱</h3>
<table>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"><label for="nan"><img src="../img/man.jpg" width="18">男</label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="../img/woman.jpg" width="18">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>1993</option>
<option>1995</option>
<option>1997</option>
<option>1999</option>
<option>2000</option>
<option>2002</option>
</select>
<select>
<option>--请选择月--</option>
<option>4</option>
<option>5</option>
<option>8</option>
<option>10</option>
<option>12</option>
</select>
<select>
<option>--请选择日--</option>
<option>13</option>
<option>17</option>
<option>23</option>
<option>28</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marriage" id="single" checked="checked"><label for="single">未婚</label>
<input type="radio" name="marriage" id="married"><label for="married">已婚</label>
<input type="radio" name="marriage" id="divorced"><label for="divorced">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" name="education" value="博士后"></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="likes">妩媚的
<input type="checkbox" name="likes">可爱的
<input type="checkbox" name="likes">小鲜肉
<input type="checkbox" name="likes">老腊肉
<input type="checkbox" name="likes" checked="checked">都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><input type="textarea" value="自我介绍" rows="3" cols="20"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" checked="checked">我已同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td><a href="#">我是会员 立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h4>我承诺</h4>
<ul>
<li>年满18岁 单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
效果: