HTML常用标签
标题标签
<!--
1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的logo
2. h2 ~ h6 没有使用次数的限制
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<!-- 一般用在新闻段落、文章段落、产品描述信息等等。 -->
<p>我是一段文字</p>
<p>我是一段文字</p>
水平线标签
<hr>
换行标签
<br>
文本格式化标签
<!-- 为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等 -->
<!-- strong、em、ins、del 标签自带强调含义（语义） -->
<!-- 使用文本格式化标签尽量使用第一种写法，自带强调语义 -->
<!-- 第一种写法 -->
<strong>strong 加粗</strong>
<em>em 倾斜</em>
<ins>ins 下划线</ins>
<del>del 删除线</del>
<!-- 第二种写法 -->
<b>b 加粗</b>
<i>i 倾斜</i>
<u>u 下划线</u>
<s>s 删除线</s>
图像标签
<!-- 在网页中插入图片 -->
<img src="图片的 URL">
<!-- src用于指定图像的位置和名称，是 <img> 的必须属性 -->
<!--
图像属性
属性 作用 说明
alt 替换文本 图片无法显示的时候显示的文字
title 提示文本 鼠标悬停在图片上面的时候显示的文字
-->
相对路径与绝对路径
<!--
相对路径(开发中建议使用)
查找方式：从当前文件位置出发查找目标文件
特殊符号：
/ 表示进入某个文件夹里面 → 文件夹名/
. 表示当前文件所在文件夹 → ./
.. 表示当前文件的上一级文件夹 → ../
-->
<!--
绝对路径
查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发
提示
1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /
2. 特殊的绝对路径 → 文件的在线网址：<https://www.XXXXXXX/logo.png> "，应用场景：网页底部**友情链接**
-->
超链接标签
<!-- 点击跳转到其他页面 -->
<a href="https://www.baidu.com/">跳转到百度</a>
<!-- href 属性值是跳转地址，是超链接的必须属性 -->
<!-- 跳转到本地文件：相对路径查找 -->
<!-- 超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面 -->
<a href="https://www.baidu.com/" target="_blank">跳转到百度(新窗口打开)</a>
<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>
音频标签
<!-- 插入音频 -->
<audio src="音频的URL"></audio>
<!--
属性 作用 特殊说明
src （必须属性） 音频URL 支持：MP3、Ogg、Wav
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放 为了提升用户体验，浏览器一般会禁用自动播放功能
-->
<audio src="音频的URL" controls="controls" loop="loop" autoplay="autoplay"></audio>
<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="音频的URL" controls loop autoplay></audio>
视频标签
<!-- 插入视频 -->
<video src="视频的URL"></video>
<!--
属性 作用 特殊说明
src（必须属性） 视频RUL 支持：MP4、WebM、Ogg
controls 显示视频控制面板
loo 循环播放
muted 静音播放
autoplay 自动播放 为了提升用户体验，浏览器只支持在静音状态自动播放
-->
<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="视频的URL" controls loop muted autoplay></video>
无序列表
<!--
作用：布局排列整齐的不需要规定顺序的区域
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目
-->
<ul>
<li>列表条目1</li>
<li>列表条目2</li>
<li>列表条目3</li>
</ul>
<!--
注意事项：
ul 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容
-->
有序列表
<!--
作用：布局排列整齐的需要规定顺序的区域
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目
-->
<ol>
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>
<!--
注意事项：
ol 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容
-->
定义列表
<!-- 标签：
dl 嵌套 dt 和 dd
dl 是定义列表
dt 是定义列表的标题
dd 是定义列表的描述详情
-->
<!-- 基本在网页的最底层使用 -->
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
</dl>
<!--
注意事项：
dl 标签里面只能包裹 dt 和 dd 标签
dt 和 dd 标签里面可以包裹任何内容
-->
表格标签
<!-- 网页中的表格与 Excel 表格类似，用来展示数据 -->
<!-- 用 table 布局（了解，新项目全使用 div 布局方式） -->
<!--
标签名 说明
table 表格
caption 表格标题
tr 行
th 表头单元格
td 内容单元格
-->
<!-- 在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线，在css中设置-->
<table border="1">
<caption><h2>成绩表</h2></caption>
<!-- <thead> -->
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<!-- </thead> -->
<!-- <tbody> -->
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<!-- </tbody> -->
<!-- <tfoot> -->
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
<!-- </tfoot> -->
</table>
<!-- 用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰-->
<!--
标签名 含义 特殊说明
thead 表格头部 表格头部内容
tbody 表格主体 主要内容区域
tfoot 表格底部 汇总信息区域
-->
表格合并单元格
<!--
合并单元格的步骤：
1. 明确合并的目标
2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
跨行合并，保留最上单元格，添加属性 rowspan
跨列合并，保留最左单元格，添加属性 colspan
3. 删除其他单元格
-->
<!-- 不能跨表格结构标签合并单元格（thead、tbody、tfoot）-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
表单标签
<!-- 作用：收集用户信息 -->
<!--
input标签
<input type="..." >
input 标签 type 属性值不同，则功能不同
type属性值 说明
text 文本框，用于输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 长传文件
-->
<!-- 文本框 -->
文本框：<input type="text">
<br><br>
<!-- 密码框 -->
<!-- 特点：输入什么都是以 点 的形式显示 -->
密码框：<input type="password">
<br><br>
<!-- 单选框 -->
<!--
属性名 作用 特殊说明
name 空间名称 控件分组，同组只能选中一个（单选功能)
checked 默认选中 属性名和属性值相同，简写为一个单词
-->
性别：
<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女
<br><br>
<!-- 多选框 -->
<!--
checked 默认选中
-->
多选框：<input type="checkbox">
<br><br>
<!-- 文件上传 -->
<!--
文件文件上传表单控件只能上传一个文件
属性 说明
multiple 可以实现文件多选功能
-->
上传文件：<input type="file" multiple>
<!-- input 标签占位文本 -->
<!--
placeholder
占位文本：提示信息
<input type="..." placeholder="提示信息">
-->
文本框：<input type="text" placeholder="请输入用户名">
<br><br>
密码框：<input type="password" placeholder="请输入密码">
<!-- 下拉菜单 -->
<!--
标签：
select 嵌套 option
select 是下拉菜单整体
option是下拉菜单的每一项
默认显示第一项目，selected属性实现默认选中功能
-->
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
<!-- 文本域 -->
<!--
多行输入文本的表单控件
工作中，使用 CSS 禁用右下角的拖拽功能；使用 CSS 设置尺寸
-->
<textarea></textarea>
label 标签
<!--
网页中，某个标签的说明文本
用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围
-->
<!--
写法一
label 标签只包裹内容，不包裹表单控件
设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
-->
性别：
<input type="radio" name="gender" id="man"> <label for="man">男</label>
<!--
写法二
使用 label 标签包裹文字和表单控件，不需要属性
-->
<label><input type="radio" name="gender"> 女</label>
按钮标签
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<!-- method="" 数据提交方式 post安全，get不安全 -->
<!--
<button type="">按钮</button>
type属性 说明
submit 提交按钮，点击后可以提交数据到后台(默认功能)
reset 重置按钮，点击后将表单控件恢复默认值
button 普通按钮，默认没有功能，一般配合JavaScript使用
-->
<form action="" method="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<!-- 如果省略 type 属性，功能是 提交 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
语义化标签
<!-- 无语义的标签 -->
<!--
布局网页（划分网页区域，摆放内容）
div：独占一行
span：不换行
-->
<!-- div：大盒子 -->
<div>这是 div 标签</div>
<div>这是 div 标签</div>
<!-- span：小盒子 -->
<span>这是 span 标签</span>
<span>这是 span 标签</span>
<!-- 有语义的标签 -->
<!--
标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文字章
-->
字符实体
<!-- 在代码中敲键盘的空格，网页只识别一个 -->
<!--
显示结果 描述 实体名称
空格
< 小于号 <
> 大于号 >
-->
<
>
3567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
