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 网页文字章
-->
字符实体
<!-- 在代码中敲键盘的空格,网页只识别一个 -->
<!--
显示结果 描述 实体名称
空格
< 小于号 <
> 大于号 >
-->
<
>