一、语义化标签
1、没有语义的布局标签——div和span
场景:实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签
div标签:一行只显示一个(独占一行)
span标签:一行显示多个
<!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>
<!-- 没有语义的布局标签 -->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
</body>
</html>
2、有语义的布局标签
场景:在HTML5新版本中,推出了一些有语义的布局标签供开发者使用
标签:(独占一行)
标签名 | 语义 |
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
[注:以上标签显示特点和div一致,但是比div多了不同的语义]
<!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>
<!-- 有语义的布局标签 -->
<header>网页的头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
</body>
</html>
3、字符实体
HTML的空格合并现象
场景:如果在HTML代码中同时并列出现多个空格、换行、缩进等,最终浏览器只会解析出一个空格
常见字符实体
场景:在网页中展示特殊符号效果时,需要使用字符实体替代
结构:&英文;
显示结果 | 描述 | 实体名称 |
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
<!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>
<!--HTML空格合并现象 -->
四叶草:爱你们哟~
TFBOYS:想你们了啦~<br><br>
p标签长这个样子:<p></p>
</body>
</html>
4、综合案例一:优秀学生信息表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width, initial-scale=">
<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>
5、综合案列二:会员注册表单
<!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>
<h1>橙海不会暗,我啵不会散</h1>
<hr>
<form >
昵称:<input type="text" placeholder="请输入昵称"><br><br>
性别:<input type="radio" name="gerder">男
<input type="radio"name="gerder">女<br><br>
生日:<input type="date"> <br><br>
城市:<select>
<option >上海</option>
<option >北京</option>
<option >深圳</option>
<option >重庆</option>
</select><br><br>
婚姻状况:<input type="radio" name="marry" checked>未婚
<input type="radio" name="marry">已婚
<input type="radio"name="marry">保密<br><br>
兴趣爱好:<input type="checkbox" checked>TFBOYS
<input type="checkbox">王俊凯
<input type="checkbox">王源
<input type="checkbox">易烊千玺 <br><br>
个人介绍:<br><br>
<textarea cols="50" rows="10">
</textarea>
<h2>我承诺</h2>
<ul>
<li>十年之约,不离不弃</li>
<li>从开始到未来之只为王俊凯</li>
<li>农夫山泉有点甜,不爱王源有点悬</li>
<li>一心一意,易烊千玺</li>
</ul>
<input type="checkbox">我同意所有款项 <br><br>
<input type="submit" value="免费注册">
<input type="reset">
</form>
</body>
</html>