HTML常见标签
1. 标题标签
<h1>标题 # 1</h1>
<h2>标题 # 2</h2>
<h3>标题 # 3</h3>
<h4>标题 # 4</h4>
<h5>标题 # 5</h5>
<h6>标题 # 6</h6>
h1 ~ h6 是标题标签，默认字体加粗
2. 段落标签
<p>段落....</p>
<!--
段落标签、通常形容一段文本、一段字符
p标签不可以嵌套div或其他块元素，如果采用p标签嵌套div标签，就会出现p标签被分割。
p标签可以嵌套文本、行内元素,但是不能直接嵌套块元素。
p标签也是一种块标签，因为可以独占一行，可以直接设置宽度高度
-->
列表标签
<!-- 无序列表标签 -->
<ul>
<li>新闻xxxxx</li>
<li>财经xxxxx</li>
<li>体育xxxxx</li>
<li>历史xxxxx</li>
<li>娱乐xxxxx</li>
</ul>
<!-- 有序列表标签 -->
<ol>
<li>新闻yyyyy</li>
<li>财经yyyyy</li>
<li>体育yyyyy</li>
<li>历史yyyyy</li>
<li>娱乐yyyyy</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>一级菜单</dt>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
</dl>
<dl>
<dt>一级菜单</dt>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
</dl>
<!--
列表标签：可以独占一行显示，也可以直接设置宽度高度。视为块级元素。
-->
4. 图片标签
<!-- img 单标签 ， 是行内块标签。在同一行显示，可以直接设置宽度高度-->
<!-- src 属性 填写图片文件路径 -->
<!-- alt 属性 描述图片 -->
<style>
img {
width: 200px;
}
</style>
<img src="photo/p2.jpeg" alt="这是一朵美丽的荷花" title="美丽的荷花">
<img src="photo/icon1.png" alt="图标1">
<img src="./photo/icon1.png" alt="图标1">
<img src="../icon2.png" alt="图标1">
<!--
路径问题：
以后看到404 要联想到路径拼写问题，
404的意思是找不到资源，找不到对象的意思。
1） 本地相对路径 （推荐）
./ 当前路径
../ 上一级目录路径
../../ 上上一级目录路径
-->
<!--
注明： 此处这个http路径，是讲台电脑的环境下的图片路径。
除非你的电脑是把HTMLCSS作为工作目录（意思直接把“HTMLCSS”这个目录拖拽到vscode打开）
2） http环境下相对路径
-->
<img src="http://127.0.0.1:5500/p1.jpeg" alt="图片p1">
<!--
3) 绝对路径：带电脑盘符 （在客户端通常不推荐使用，浏览器叫做客户端）
例如： E:\stu\GZH52429\HTMLCSS\DAY01
这种路径的图片，需要在文件传输协议上 file:///E:/ 才能访问到。
-->
<img src="E:\stu\GZH52429\HTMLCSS\DAY01\icon2.png" alt="图标2">
<!--
4）线上的图片路径
这种是别人服务器的图片路径，需要连网才能访问。
-->
<img src="https://img10.360buyimg.com/img/jfs/t1/176863/16/41608/14330/668e3421F64b41094/15c9d9130b980a51.png" alt="">
5. 表格标签
<!-- 表格标签 -->
<!-- cellspacing 设置单元格与单元格之间的距离 -->
<!-- cellpadding 设置内容与边框之间的间距 -->
<table cellspacing="0" cellpadding="0">
<!-- 表格头部 -->
<thead>
<!-- 行 -->
<tr>
<!-- 列 (加粗字体) -->
<th>名称</th>
<th>价格</th>
<th>库存</th>
<th>日期</th>
<th>地址</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<!-- 列 (没有加粗) -->
<td>短袖</td>
<td>29.9 </td>
<td>50</td>
<td>2024/07-11</td>
<td>广州</td>
</tr>
<tr>
<td>鞋子</td>
<td>19.9 </td>
<td>60</td>
<td>2024/07-11</td>
<td>深圳</td>
</tr>
</tbody>
</table>
6. 链接标签
<!-- a 标签、用于做跳转、导航。 -->
<!--
它是行内标签，不可以直接设置宽度高度
这个a标签是用于跳转的标签，它可以嵌套文本、行内元素、块级元素。
href 属性用于填写页面或者文件地址
-->
<style>
/*
a {
background-color: red;
height: 100px;
}
*/
a {
font-size: 24px;
font-weight: bold;
}
/* :伪类选择器 {} */
/* 1. 未访问的链接样式 */
a:link {
color: green;
}
/* 2. 已访问的链接样式 */
a:visited {
color: pink;
}
/* 3. 鼠标在链接上悬停的样式 */
a:hover {
color: orange;
}
/* 4.鼠标激活链接的样式（点击的一瞬间） */
a:active {
color: red;
}
</style>
<!-- href 设置为“#” ,表示不会跳转到其他页面 -->
<a href="#">链接1</a>
<br>
<br>
<a href="./pages/my.html">跳转“个人中心”</a>
<br>
<br>
<!-- target="_blank" 会在另一个窗口打开页面 -->
<a href="./pages/my.html" target="_blank">跳转“个人中心”</a>
<br>
<br>
<a href="./pages/catetory.html">跳转“分类页”</a>
<br>
<br>
<style>
.box {
height: 600px;
}
.box-1 {
background-color: deepskyblue;
}
.box-2 {
background-color: yellowgreen;
}
.box-3 {
background-color: lightgreen;
}
</style>
<div class="box box-1" id="box1">box-1</div>
<div class="box box-2">box-2</div>
<div class="box box-3">box-3</div>
<a href="#">链接2 (返回顶部)</a>
<br>
<br>
<!-- “#” 在web开发中叫做锚点 -->
<a href="#box1">链接3 (跳转到 “box-1” )</a>
<br>
<br>
<!-- 下载img.zip压缩包 -->
<a href="img.zip" download="img.zip">点击“下载素材”</a>
<!--
链接标签：
1. 跳转页面
2. 返回页面顶部、跳转页面指定区域
3. 下载文件
-->
7. 带默认样式的行内标签
<span>测试(没有默认样式)</span>
<u>测试（默认下划线）</u>
<i>测试（默认斜体字）</i>
<del>测试（带删除线）</del>
<b>测试（加粗字体）</b>
<strong>测试（加粗字体）</strong>
<!--
u 带下划线标签 text-decoration: underline;
i 斜体字标签 font-style: italic;
del 带删除线标签 text-decoration: line-through;
b 加粗标签 font-weight: bold;
strong 字体加粗标签 font-weight: bold;
以上行内标签可用于修饰页面的细节。（是一些起到强调/突出效果作用的标签）
-->
8. 表单标签
<form action="http://47.92.204.130:3000/api/admin/login" method="POST">
<div>
<!--
type 类型，text 文本输入框
placeholder , 表示占位符，做提示
name 键（key）, 需要提交的参数的名称
参数： admin_email 、 admin_pwd
-->
<input type="text" placeholder="请输入账号" name="admin_email">
</div>
<br>
<div>
<!-- <input type="text" placeholder="请输入密码" name="admin_pwd"> -->
<!-- type 类型，password 密码输入框 -->
<input type="password" placeholder="请输入密码" name="admin_pwd">
</div>
<br>
<div>
<!-- <button>登录</button> -->
<!-- type 类型，button 表示按钮 -->
<!-- <input type="button" value="登录"> -->
<input type="submit" value="登录">
<!-- 重置表单信息的按钮 -->
<input type="reset" value="重置">
</div>
<div>
<input type="password" placeholder="密码输入框">
</div>
<div>
<input type="number" placeholder="请输入数字">
</div>
<div>
<input type="date">
</div>
<div>
<input type="time">
</div>
<div>
<!-- 0 - 9 十进制 -->
<!-- 0 - f 十六进制 -->
<input type="color" value="#00ff00">
</div>
<div>
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
<div>
性别:
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2"> 女
<input type="radio" name="sex" checked value="3"> 未知
</div>
<div>
爱好:
<input type="checkbox">阅读
<input type="checkbox">跑步
<input type="checkbox">游泳
<input type="checkbox">骑行
</div>
<div>
<select name="province">
<option value="0" disabled>请选择省份</option>
<option value="1">广东省</option>
<option value="1">浙江省</option>
<option value="1" selected>福建省</option>
<option value="1">湖北省</option>
</select>
<!--
遇到UI设计稿是select标签实现不了的，需要自定义的“下拉菜单”，怎么办?
答： 采用普通标签例如: div ul li 这些标签作为结构，css设置外观，JS实现用户交互
ul > li
-->
</div>
<div>
<input type="text" placeholder="文本输入框" disabled>
</div>
<!--
checked 在单选框、复选框中，视为默认勾选的意思
selected 在下拉菜单中，视为默认选中的意思
disabled 禁止、禁止输入、禁止选择
-->
<div>
<!-- 选择文件框
multiple 加了这个属性，表示可以选择多个文件
-->
<input type="file" name="photo">
<br>
<input type="file" name="photo" multiple>
</div>
<div>
<!-- 起到说明、描述作用的标签 -->
<!-- label标签的for属性 对应input标签的id属性、点击描述文本，输入框可以获取焦点 -->
<label for="username">用户名:</label>
<input type="text" id="username">
</div>
</form>
<!--
表单标签： 收集、采集信息。
举个例子： 做用户登录、注册功能，就需要收集用户的账号、密码等等信息。
form 属于块级元素，可以独占一行显示，可以直接设置宽度高度
input 属于行内块元素，在同一行显示，可以直接设置宽度高度
form 标签点击“提交”按钮，会刷新页面，页面会发生跳转。。。
-->
9. 框架标签
<div class="wrapper">
<div class="left">
<!--
target: 目标、跳转的位置
href: 页面文件地址
-->
<a target="container" href="./web/one.html">页面1</a>
<a target="container" href="./web/two.html">页面2</a>
<a target="container" href="./web/three.html">页面3</a>
</div>
<div class="right">
<!-- 框架标签 -->
<!--
src 可以填写页面地址
name 作为框架名称、容器名称
-->
<iframe class="ifr" name="container" src="./web/one.html" frameborder="0"></iframe>
</div>
</div>
10. 转义字符/实体字符
<div class="layout">
¥
©
>
⪧
<
⪦
<br>
<!-- a b -->
ǵ
γ
≌
κ
<br>
<!-- 解析转义字符 页面渲染的是 <div>box</div> -->
<div>box</div>
<!-- 解析html标签 页面渲染的是 box -->
<div>box</div>
</div>
最后
在代码的世界里，HTML 是开启精彩网页之旅的钥匙。每一个标签都是构建梦想网页的基石，每一行代码都蕴含着无限可能。不要畏惧学习的艰难，只要你坚持不懈地钻研 HTML，就能用它编织出属于自己的绚丽数字画卷，创造出令人惊艳的网络作品，向着成为优秀网页开发者的道路大步迈进！
