语义化标签
| 区块标签 | 说明 |
|---|---|
| 文档中的节（section、区段），语义比div大，用作内容标签 | |
| 文档的核心文章内容，会被搜索引擎主要抓取。 | |
| 文档的非必要相关内容，比如广告等。 | |
| 导航条 | |
| 页头 头部 | |
| 网页核心部分 | |
| 页脚 底部 | |
| 必须是作为联系信息出现，邮编地址、邮件地址等等 |
a标签
用于从一张页面链接到另一张页面，是互联网“成网”的原因
-
a是anchor（锚）的首字母
-
href是hypertext referen 的缩写，意思是超文本引用
-
href属性支持相对路径和绝对路径
- 值可以是一个外部网页的地址
- 值也可以是一个内部网页的地址
-
tittle属性：用于设置鼠标的悬停
格式：
<a href="链接的路径" tittle="悬停提示的文字">路径网页</a> -
target属性：表示以什么方式打开网页
- 格式：target="blank"新窗口打开
- 默认：target="self"原窗口打开
-
a标签的使用中，链接地址和链接显示的文字要保持一致，让链接合理
给图片设置超级链接
- 图片也可设置超链接，只需用a标签包裹img标签即可
页面内的锚点：
-
较长的页面可以适当的给h系列标签添加id属性，它将成为页面内的锚点
-
当页面后面添加#时，页面将自动滚动到锚点所在位置
-
href="#ID名" 跳转到页面的指定位置，只需将href属性设置为#目标元素id的属性值
-
其他页面的超级链接，可以链接到指定锚点
-
格式：
-
<a href="连接路径#锚点">路径对应链接名</a>
-
-
设置方法：
- 给元素设置一个id名
- 使用a标签设置href属性#id名
- 点击a标签即可跳转到想去的锚点位置
开发中，href属性可能不能确定如何书写，一般会用href="#"作为占位符,
- href="#" 会默认跳转到页面顶部
- href="##"使用占位符页面什么都不会发生
- href="javascript:;"使用占位符页面什么都不会发生
img图片标签
行内元素，置换元素，其属性与行内块相同
- 用于向当前页面引入一个外部图片
- img是图片images的缩写；src是source（来源）的缩写，代表图片的路径
- 图片必须复制到项目文件夹中的images文件夹中
- 图片只是被引入到网页之中，并未完成图片插入，因此，若想将图片一起上传到服务器上，须将图片复制到项目文件夹中，即可整体上传
img标签的属性
- alt：解释说明，不强制要求
- 如果由于某些原因无法加载图像，浏览器就会在页面上显示alt属性中的备用文本
- 供视力不方便的用户使用网页阅读器，也会将alt中的文本朗读
- width、height属性：
- 分别代表宽度和高度，单位是像素，一般不需要写单位
- 最好写图片的原始尺寸，有利于SEO优化
- 如果省略掉其中一个属性，则表示按照原始比例缩放图片
- 一般设置时，只设置图片宽度
- tittle 悬停文本
网页上图片支持的格式
| 格式 | 格式 |
|---|---|
| .bmp | windows画图软件默认的保存格式 |
| .gif | 颜色单一的图片，支持动画（必如表情包），文件体积较小 |
| .jpeg(.jpg) | 有损压缩图片，支持的颜色丰富，不支持透明效果，不支持动图，一般用于显示图片 |
| .png | 便携式网络图像，支持的颜色丰富（专为网页制作而生），用于logo、背景图形等，支持透明和半透明 |
| .svg | 矢量图片 |
| .webp | 谷歌专门推出的一种图片格式，罪行的压缩算法非常优秀，它具备所有图片的有点且文件极小，特点：兼容性不好 |
| base64 | 将图片使用base64进行编码，可直接将图片转换为字符，通过字符引入图片，一般小图片可直接使用 |
使用原则：
- 效果一样时用小的
- 效果不一样时用效果好的，同时应考虑图片大小
