文章目录
目标:
1、列表标签
2、表格标签
3、表单标签
4、语义化标签
5、字符实体
6、综合案例
一、列表标签
1、列表应用场景
· 场景:在网页中按照行展示关联性内容,如:新闻列表、排行榜、账单等
· 特点:按照行的方式,整齐显示内容
· 种类:无序列表、有序列表、自定义列表
2、列表分类
2.1 无序列表
①场景:在网页中表示一组无顺序之分的列表,最常用
②标签组成:
ul:表示无序列表的整体,用于包裹li标签
li:表示无序列表的每一项,用于包含每一行的内容
③显示特点
列表的每一项前默认显示圆点标识
④注意点
ul标签中只包含li标签
li标签可以包含任意内容
<ul>
<li>椰子</li>
<li>苹果</li>
<li>葡萄</li>
</ul>
2.2 有序列表
①场景:在网页中表示一组有顺序之分的列表
②标签组成:
ol:表示有序列表的整体,用于包裹li标签
li:表示有序列表的每一项,用于包含每一行的内容
③显示特点
列表的每一项前默认显示圆点标识
④注意点
ol标签中只包含li标签
li标签可以包含任意内容
<ol>
<li>第一名:100</li>
<li>第二名:80</li>
<li>第三名:60</li>
</ol>
2.3 自定义列表
①场景:在网页的底部导航中通常会使用自定义列表实现
②标签组成:
dl:表示自定义列表的整体,用于包裹dt/dd标签
dt:表示自定义列表的主题
dd:表示自定义列表的针对主题的每一项内容
③显示特点
dd前会默认显示缩进效果
④注意点
dl标签中只包含li标签
dt/dd标签可以包含任意内容
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>订单操作</dd>
<dd>购物指南</dd>
</dl>
二、表格标签
1、表格的基本标签
1.1 表格的基本标签
①场景:在网页中以行+列的单元格的方式整齐展示和数据,如学生成绩表
②基本标签
table:表格整体,用于包裹多个tr
tr:表格每行,可用于包裹td
td:表格单元格,可用于包裹内容
③注意点
标签的嵌套关系:table>tr>td
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>
2、表格相关属性
①场景:设置表格基本展示效果
②常见相关属性
border:边框宽度
width:表格宽度
height:表格高度
③注意点
实际开发时针对于样式效果推荐用CSS设置
<table border="1" width = "300" height = "300">
3、表格标题和表头单元格标签
①场景:在表格中表示整体大标题和一列小标题
②常见相关属性
caption:表示表格整体大标题,默认在表格整体顶部居中位置显示
th:表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示
③注意点
· caption标签书写在table标签内部
· th标签书写在tr标签内部(用于替换td标签)
<table border="1" width = "300" height = "300">
<caption><h1>成绩表</h1></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
4、表格的结构标签(了解)
①场景
让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰。
②常见相关属性
thead:表格头部
tbody:表格主体
tfoot:表格底部
③注意点
· 表格结构标签内部用于包裹tr标签
· 表格的结构标签可以省略
<table border="1" width = "300" height = "300">
<caption><h1>成绩表</h1></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</tfoot>
</table>
5、合并单元格
①场景
将水平或垂直多个单元格合并成一个单元格
②合并单元格步骤
· 明确合并哪几个单元格
· 通过左上原则,确定保留谁删除谁
上下合并->只保留最上的,删除其他
左右合并->只保留最左的,删除其他
③给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
④注意点
只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨thead、tbody、tfoot)
<body>
<!-- table:表格整体 -->
<!-- tr:表格每行,可用于包裹td -->
<!-- td:表格单元格,可用于包裹内容 -->
<table border="1" width = "300" height = "300">
<!-- border:边框宽度 -->
<!-- width:表格宽度 -->
<!-- height:表格高度 -->
<!-- thead:表格头部 -->
<!-- tbody:表格主体 -->
<!-- tfoot:表格底部 -->
<caption><h1>成绩表</h1></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<!-- 保留 -->
<td rowspan="2">100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<!-- 删除 -->
<!-- <td>100分</td> -->
<td>小姐姐真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<!-- 保留 -->
<td colspan="2">郎才女貌</td>
<!-- 删除 -->
<!-- <td>郎才女貌</td> -->
</tr>
</tfoot>
</table>
</body>
三、表单标签
①input系列标签
②button按钮标签
③select下拉菜单标签
④textarea文本域标签
⑤label标签
1、input标签(单标签)
input标签可以通过type属性值的不同来展示不同的效果,属性值如下
text:文本框
placeholder:占位符,提示用户输入内容的文本
password:密码框
radio:单选框
name:分组,有相同name属性值的单选框为一组,一组中通时只能有一共被选择
checked:默认选中
checkbox:多选框
checked:默认选中
file:文件选择,用于上传文件
multiple:多文件选择,可以一次性选择多个文件
三个按钮(注意区别和button标签的使用方法)
①submit:提交按钮
②reset:重置按钮
③button:普通按钮,默认无功能,配合js添加功能
普通按钮默认是没有文字的,可以通过value属性添加文字
如果想要实现以上的按钮功能,需要配合form标签使用,
使用方法:用form标签把表单标签和按钮标签包裹起来
type属性值不要拼错或多加,否则就相当于设置了默认值状态
<body>
<form>
<!-- 1、文本框:text(type属性的默认值) -->
昵称:<input type="text" placeholder="请输入您的昵称"><br><br>
<!-- 2、密码框:passwprd -->
密码:<input type="password" placeholder="请输入您的密码"><br><br>
<!-- 3、单选框:radio -->
性别:<input type="radio" name="sex">男
<input type="radio" name="sex">女<br><br>
<!-- 4、多选框:checkbox -->
爱好:<input type="checkbox" checked>敲代码
<input type="checkbox">吃水果
<input type="checkbox">唱歌<br><br>
<!-- 5、文件选择:file -->
请上传您的照片:<input type="file" multiple><br><br>
<!-- 按钮 -->
<!-- 1、submit:提交按钮 -->
<input type="submit">
<!-- 2、reset:重置按钮 -->
<input type="reset">
<!-- 3、button:普通按钮 -->
<input type="button" value="普通按钮">
</form>
</body>
2、button按钮标签(双标签)
标签名button
type的属性值:
①submit:提交按钮
②reset:重置按钮
③button:默认按钮
button标签是双标签,更便于包裹其他内容、文字图片等
谷歌浏览器中button默认是提交按钮
3、select下拉菜单标签(双标签)
标签组成op
select标签:下拉菜单的整体(select用来包裹option)
option标签:下拉菜单的每一项
常见的属性:
selected:下拉菜单默认选中
textarea文本域标签(双标签)
标签名:textarea
常见属性:
cols:规定文本域内可见宽度
rows:规定文本域呢可见的行数
注意点;
4、label标签
标签名:label
使用方法:
用label标签把内容包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
<!-- label使用方法1 -->
<input type="checkbox" id="one"><label for="one">敲代码</label>
<!-- label使用方法2 -->
<label>
<input type="checkbox">熬夜
</label>
四、语义化标签
1、没有语义的布局标签
div和span
场景:实际开发网页时会大量频繁使用到div和span这两个没有语义的布局标签
div标签::一行只显示一个
spas标签:一行可以显示多个
2、有语义的布局标签:
header:网页头部
nav:网页导航
footer:网页 底部
aside:网页侧边栏
section:网页区块
article:网页文章
以上标签显示特点和div一致,但是比div多了不同的语义
五、字符实体
结构:&英文;
常见的字符实体:
空格:
小于号:<
大于号:>
六、综合案例
1、学生信息表格
<!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>Document</title>
</head>
<body>
<table border="1" width="400" height="400">
<caption><h3>优秀学生信息表格</h3></caption>
<!-- 表格的头部 -->
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<!-- 表格的主体 -->
<tbody>
<tr>
<!-- 保留 -->
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<!-- 删除 -->
<!-- <td>高三</td> -->
<td>赵四</td>
<td>120</td>
<td>三年二班</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td>评语</td>
<!-- 保留 -->
<td colspan="3">你们都很优秀</td>
<!-- 删除 -->
<!-- <td>你们都很优秀</td> -->
<!-- 删除 -->
<!-- <td>你们都很优秀</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
2、会员注册表单
<!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>Document</title>
</head>
<body>
<form>
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
昵称:<input type="text" placeholder="请输入昵称"><br><br>
性别:<input type="radio" name="gender">男
<input type="radio" name="gender">女<br><br>
生日: <input type="date"><br><br>
城市:<select>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>西安</option>
</select>
婚姻状况:<input type="radio" name="isMarriage" checked>未婚
<input type="radio" name="isMarriage">已婚
<input type="radio" name="isMarriage">保密 <br><br>
兴趣爱好:<input type="checkbox" checked>唱歌
<input type="checkbox" checked>跳舞
<input type="checkbox">看电影<br><br>
个人介绍:<br><textarea cols="50" rows="10"></textarea>
<br><br>
<h2>我承诺:</h2> <br><br>
<ul>
<li>年满18岁</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox">我同意所以条款<br><br>
<input type="submit" value="免费注册"><input type="reset">
</form>
</body>
</html>