HTML标签

1.块属性标签

标签	用法
div	无语义标签，主要用于页面布局，没有默认样式
p	段落标签，可以在里面书写段落，如果很多文字独占一行可以用p
h	h1~h6标题标签，代表一级到六级标题；默认样式加粗，上下有间距。注：h1一般在网页中出现一次；不要跳着用
br	换行，为单标签；可以写成<br>，也可以写成<br />
ol&li	有序列表，ol与li组合使用。ol是有序列表的最外层容器，li是有序列表的每一项，ol的子元素只有li，li的父元素只有ol
ul&li	无序列表，ul与li组合使用。ul是无序列表的最外层容器，li是无序列表的每一项，ul的子元素只有li，li的父元素只有ul
dl&dt&dd	自定义列表，dl列表的最外层容器，dt列表的标题（上层项目），dd列表的内容（下层项目）

特点

• 独占一行，换行显示
• 块属性标签可以嵌套行和块属性标签，但是p标签不能嵌套块属性标签
• 不建议在h和dt标签中嵌套块标签

2.行属性标签

标签	用法
span	无语义标签，主要为了增加额外的结构，方便设置样式结构，无任何副作用
b	标签的内容加粗
i	标签的内容倾斜（现在多用于页面中的小图标）
u	标签的内容加下划线
em	强调作用（SEO），默认效果倾斜
strong	更加强调的作用（SEO），默认效果加粗
var	表示包含变量，默认效果倾斜

特点

• 行内显示
• 无法设置宽高，设置也不生效
• 行属性标签只能嵌套行属性标签

3.a标签

3.1基础使用

• a标签就是超链接，用于从一个页面连接到另一个页面（点击可以连接到其他网页）
• href属性：连接的网页路径（可以是相对路径，也可以使用添加http://的网络地址）
• title属性：鼠标悬浮之后的悬浮窗内容
• target属性：_self：在本标签页直接跳转；_blank：打开新的标签页跳转

<a href="http://www.baidu.com">百度一下</a> <!-- 点击直接跳转到百度 -->
<a href="http://www.baidu.com" target="_self">百度一下</a> <!-- 点击直接跳转到百度 -->
<a href="http://www.baidu.com" target="_blank">百度一下</a> <!-- 点击会跳转到一个新的页面打开百度 -->

3.2做锚链接

• 作用是跳转到当前页面或某个页面的某个标签的位置
• 使用：给需要跳转的元素添加一个id属性，并取一个属性值；给a标签的href属性书写“ #id值 ”点击a标签就可以跳到对应id标签所在的位置
• 如果是直接跳转到本页的锚点，则直接在href中写“ #id值 ”
• 如果要跳转到新的页面，则在href中写“ 路径#id值 ”

3.3其他功能

<a href="tel:12904790765">打电话</a>

<a href="sms:12904790765">发短信</a>

<a href="mailto:1290479@qq.com">发邮件</a>

<a href="" download="下载的路径">下载</a>

注：

• 如果a标签的href属性没写的话，点击会刷新页面
• 在href里书写多个#号（一个#号也会刷新），或者在href里写javascript来防止页面的刷新

<a href="">点击会刷新</a>
<a href="##">点击不会刷新</a> <!-- 写多个#不会刷新页面 -->
<a href="#">点击会刷新</a> <!-- 只写一个#代表回到顶部 -->
<a href="javascript:;">点击不会刷新</a>

• a标签也是行内标签，可以根据需求嵌套块（某个大块点击需要跳转），这种情况下不要对a设置样式等其他操作了
• a标签不能嵌套a标签

4.img标签

4.1常见图片格式

• .jpg 普通图片
• .png 透明图片，如果是普通图片建议使用 .jpg保存，体积更小
• .gif 动图
• webp 谷歌推出的一种图片格式，优点：同等画质下体积比 .jpg 和 .png更小

4.2 img标签属性

• src属性：写图片的路径（相对路径，网络路径）
• alt属性：描述图片（SEO识别图片内容，图片无法加载出来时将描述展示给用户）
• title属性：鼠标放在图片上展示悬浮框的内容

<img src="./images/cat.jpg" alt="一只猫" title="一只猫">      
<img src="./images/dog.webp" alt="一只狗" title="一只狗">
<img src="./images/huoying.gif" alt="动图" title="动图">
<img src="./images/logo.png" alt="一个logo" title="一个logo">