1.排版标签
- h1 最好写一个， h2~h6 能适当多写。
- h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
- p 标签很特殊！p标签不能写块级元素(独占一行的叫块级元素)
- 块级元素可以写行内元素和块级元素(行内元素是不独占一行)
- 行内元素能写行内元素，不能写块级元素)
注: 3 4 5会在后面讲解
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML排版标签 </title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<div>
<h1> 把个人信息"安全堤"筑牢 </h1>
<p> 2022-06-21 07:34 </p>
<p>置身移动互联时代，人们在享受智能设备带来便利的同时，也在一些场景中面临个人信息泄露风险。随着时间推移，这样的风险日益呈现出新的表现形式。 </p>
<p>
一些APP声称看视频、玩游戏甚至走路都能赚钱，但用户想提现却难上加难，还容易泄露个人信息；新型不法软件图标透明、没有名称，在手机屏幕上十分隐蔽，不仅不停推送广告，还会收集并转卖用户隐私信息；个人信息安全和隐私保护话题引发关注，正说明其涉及群众切身利益，问题不容小视。
</p>
</div>
</body>
</html>
**2.**语义化标签
概念：用特定的标签，去表达特定的含义。
举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。
代码结构清晰可读性强。
有利于 SEO （搜索引擎优化）。
方便设备解析（如屏幕阅读器、盲人阅读器等）
3.块级元素 与 行内元素
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML块内元素与行内元素 </title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<!-- 块级元素 独占一行 -->
<!-- 行内元素：不独占一行 -->
<!-- 规则1 块内元素能写的：行内元素，块内元素 -->
<!-- <div>
<h1>武昌理工</h1>
<span>武汉大学</span>
<span> 华中科技大学</span>
</div> -->
<!-- 规则2:行内元素能写的: 行内元素，但不能写块内元素 -->
<!-- <span>
<span> 江汉大学</span>
<div> 长江大学</div>
</span> -->
<!-- 特殊规则 :h1-h6不能互相嵌套 -->
<!-- <h1>
你好
<h2> 你不好</h2>
</h1> -->
<!-- p标签不能写块内元素 -->
<!-- <p>
你好
<div>哈哈</div>
</p> -->
</body>
</html>- 块级元素 ：独占一行（排版标签都是块级元素）。
- 行内元素 ：不独占一行（目前只学了： input ，稍后会学习更多）。
- 使用原则：
- 块级元素 中 能 写 行内元素 和 块级元素 （简单记：块级元素中几乎什么都能写）。
- 行内元素 中 能 写 行内元素 ，但 不能 写 块级元素 。
- 一些特殊的规则：
h1~h6 不能互相嵌套。
p 中不要写块级元素。
**4.文本标签_**常用的
文本标签通常都是行内元素。
生活中的例子： div 是大包装袋， span 是小包装袋。
**5.文本标签_**不常用的
了解即可
总结：
HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
h1~h6 、 p 、 div 、 em 、 strong 、 span
**6.**图片标签
**1.**基本使用
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML图片元素</title>
</head>
<body>
<img src="奥特曼.jpg" alt="奥特曼图片" width="450" height="450">
<img src="./resource/小姐姐.gif" width="300" alt="小姐姐">
<img src="./resource/我的自拍.jpg" alt="">
<img src="./a/小姐姐.gif" alt="">
</body>
</html>
**2.**路径的分类
分为相对路径和绝对路径
相对路径 ：以 当前位置 作为参考点，去建立路径。
./resource/小姐姐.gif
注意点：
相对路径中的 ./ 可以省略不写。
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
绝对路径 ：以 根位置 作为参考点，去建立路径。
- 本地绝对路径： E:/a/b/c/ 奥特曼 .jpg 。（很少使用）
- 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。
注意点：
使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入
失败。
7.超链接
主要作用：从当前页面进行跳转。
1. 跳转到页面
html
<a href="https://chat.deepseek.com/" target="_blank"> 转AI</a>注意点：
1. 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！
**2.**跳转到文件
<!-- 浏览器能直接打开的文件 -->
html
<a href="./resource/小姐姐.gif">看小姐姐</a><!-- 浏览器不能打开的文件，会自动触发下载 -->
html
<a href="./resource/内部资源.zip">内部资源</a><!-- 强制触发下载 -->
html
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>注意：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML超链接</title>
</head>
<body>
<a href="https://chat.deepseek.com/" target="_blank"> 转AI</a>
<a href="09_HTML图片元素.html" target="_blank">
<img width="50" src="奥特曼.jpg" alt="图片">
HTML图片元素 </a>
<a href="12_HTML超链接跳转锚点.html#girl">看其他界面的女朋友</a>
</body>
</html>
**3.**跳转到锚点
什么是锚点？ ------ 网页中的一个标记点
第一步：设置锚点
第二步：跳转锚点
方法1
html
<a href="#test1">去test1锚点</a>
<a name="test1"></a>
<p>test1锚点</p>
<img src="./a/小姐姐.gif" alt="小姐姐">方法2
html
<a href="#girl">看女朋友</a>
<p id="girl">我的女朋友</p>
<img src="./resource/小姐姐.gif" width="800" alt="小姐姐">个人用方法****2
<!-- 跳到本页面顶部 -->
html
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a><!-- 刷新本页面 -->
<a href = "" > 刷新本页面 </a>
<!-- 跳转到其他页面锚点 -->
<a href = "demo.html#test1" > 去 demo.html 页面的 test1 锚点 </a>
**4.**唤起指定应用
过 a 标签，可以唤起设备应用程序。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>唤起指定应用</title>
</head>
<body>
<a href="tel:10010"> 电话联系</a>
<a href="mailto:10010@qq.com">邮件联系</a>
<a href="sms:10086">短信联系</a>
</body>
</html>8.列表
**1.**有序列表(ol)
概念：有顺序或侧重顺序的列表。
<li>是列表项
html
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>**2.**无序列表(ul)
概念：无顺序或不侧重顺序的列表。
html
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>**3.**列表嵌套
概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。
html
<ul>
<li>北京</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>东方明珠</li>
<li>武康路</li>
</ul>
</li>
<li>广州</li>
<li>深圳</li>
</ul>注意： li 标签最好写在 ul 或 ol 中，不要单独使用。
**4.**自定义列表
- 概念：所谓自定义列表，就是一个包含 术语名称 以及 术语描述 的列表。
- 一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多 个
html
<!-- 自定义列表 -->
<dl>
<dt>敲代码最重要的是什么？</dt>
<dd>不怕错，坚持</dd>
<dt>做好笔记</dt>
<dd>笔记是可以以后复习的</dd>
</dl>
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML列表</title>
</head>
<body>
<!-- 有序列表 -->
<h2>要把大象放进冰箱总共几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
<!-- 无序列表 和嵌套-->
<ul>
<li>北京</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>东方明珠</li>
<li>武康路</li>
</ul>
</li>
<li>广州</li>
<li>深圳</li>
</ul>
<!-- 自定义列表 -->
<dl>
<dt>敲代码最重要的是什么？</dt>
<dd>不怕错，坚持</dd>
<dt>做好笔记</dt>
<dd>笔记是可以以后复习的</dd>
</dl>
</body>
</html>
**9.**表格
**1.**基本结构
表格涉及到的标签：
table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML表格整体结构</title>
</head>
<body>
<table border="1">
<!-- 表格标题 -->
<caption学>生信息</caption学>
<!-- 表格头部 -->
<thead>
<!-- tr代表每一行，th是表格头部 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<!-- tr代表每一行，td代表主体或者表格脚注 -->
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
**2.**常用属性
<table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格
边框的宽度
**3.**跨行跨
- rowspan ：指定要跨的行数。
- colspan ：指定要跨的列数。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML表格属性</title>
</head>
<body>
<table border="1" cellspacing="0">
<!-- 表格标题 -->
<caption>课程表</caption>
<!-- 表格头部 -->
<thead>
<!-- tr代表每一行，th是表格头部 colspan 扩列 rowspan扩行-->
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<!-- tr代表每一行，td代表主体或者表格脚注 -->
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>化学</td>
<td>物理</td>
<td>英语</td>
<td>篮球比赛</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>物理</td>
<td>化学</td>
<td>英语</td>
<td>英语比赛</td>
</tr>
<tr>
<td>体育</td>
<td>数学</td>
<td>语文</td>
<td>化学</td>
<td>每周一考</td>
<td>社会实践</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>英语</td>
<td>体育</td>
<td>数学</td>
<td>物理</td>
<td>英语角</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>化学</td>
<td>物理</td>
<td>生物</td>
<td>数学</td>
<td>物理</td>
<td>自由活动</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
</tfoot>
</table>
</body>
</html>
10. 常用标签补充
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML标签扩展</title>
</head>
<body>
<div>br这个标签的作用就是换行:</div>
<br>
<a href="https://www.baidu.com/">去百度</a>
<br>
<div>hr这个标签的作用就是分割</div>
<hr>
<a href="https://www.bilibili.com/">去B站</a>
<div>pr这个标签就是按原文显示</div>
<pre>
I love you
love
I you
</pre>
</body>
</html>
10. 表单
**1.**基本结构
html
<!-- form是表单标签，input是输入标签，button是按钮标签 -->
<form action="https://baidu.com/s" method="get">
<input type="text" name="wd">
<button>百度搜索</button>
</form>
**2.**常用表单控件
html
<!-- 文本输入框 -->
账户: <input type="text" name="zh" value="zhangsan">
html
<!-- 密码输入框 -->
密码: <input type="password" name="pwd">
html
<!-- 单选输入框 -->
性别: <input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="男">男
html
爱好: <input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头注： 单选和复选框一定要加name，value 属性
html
<!-- 隐藏域 -->
<input type="hidden" name="tag" value="100"><br>
html
<!-- 提交按钮 -->
<!-- 方法一 -->
<button>确认</button>
<!-- 方法2 -->
<!-- <input type="submit" value="确定"> -->
html
<!-- 重置按钮 -->
<!-- 方法1 -->
<button type="reset">重置</button>
<!-- 方法2 -->
<!-- <input type="reset" value="重置"> -->
html
<!-- 普通按钮 -->
<button type="button">检查账户是否被注册</button>
html
<!-- 文本域 -->
其他: <textarea name="msg" rows="3" cols="23"></textarea>
html
<!-- 下拉框 -->
籍贯: <select name="from">
<option value="黑"> 黑龙江</option>
<option value="粤"> 广东</option>
<option value="鄂" selected> 湖北</option>
</select>
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>label 标签</title>
</head>
<body>
<form action="https://search.jd.com/search">
<fieldset>主要信息：
<br>
<label for="zhangsan">账户</label>
<!-- 文本输入框 -->
<input id="zhangsan" type="text" name="zh" value="zhangsan">
<br>
<label>
<!-- 密码输入框 -->
密码: <input id="password" type="password" name="pwd">
</label>
<br>
<!-- 单选输入框 -->
性别: <input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="男">男
<br>
</fieldset>
<br>
<fieldset>附加信息：
<br>
<!-- 复选输入框 -->
爱好: <input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
<br>
<!-- 文本域 -->
其他: <textarea name="msg" rows="3" cols="23"></textarea>
<br>
<!-- 下拉框 -->
籍贯: <select name="from">
<option value="黑"> 黑龙江</option>
<option value="粤"> 广东</option>
<option value="鄂" selected> 湖北</option>
</select>
</fieldset>
<!-- 隐藏域 -->
<input type="hidden" name="tag" value="100"><br>
<!-- 提交按钮 -->
<!-- 方法一 -->
<button>确认</button>
<!-- 方法2 -->
<!-- <input type="submit" value="确定"> -->
<!-- 重置按钮 -->
<!-- 方法1 -->
<button type="reset">重置</button>
<!-- 方法2 -->
<!-- <input type="reset" value="重置"> -->
<!-- 普通按钮 -->
<button type="button">检查账户是否被注册</button>
</form>
</body>
</html>