【HTML5】带你快速了解行级标签

什么是行级标签？

行级标签可以在页面中可以和其他元素在同行显示，直到一行不能放下一个完整的元素，并且通常行级标签内不会包含其他元素。

1、：图片标签

网页设计中选择的图片不会太大，图片过大影响网页的加载速度；过小内容模糊不清则失去了存在的意义。

网页中常用的图片格式为GIF、JPG和PNG等。

基础语法：

属性：

• src属性：

src属性表示引用图片的路径地址。

1）相对路径：以当前文件为准去寻找图片地址。

1. 与当前文件处于同一层的图片:直接写图片名
2. 图片在当前文件下一层：文件夹名/图片名
3. 图片在当前文件上一层：../图片名

2）绝对路径：file:///盘符:/文件夹/图片.扩展名

严禁使用绝对路径，原因：

1. 绝度路径只在当前计算机生效，若将网站转移服务器，则路径会失效。
2. 通过绝对路径打开图片使用的是file协议，但网页中使用的是http协议。

3）网络地址：使用网络上的图片链接。

一般不使用，因为网络图片可能由于各种原因被删除、转移位置，使图片无法打开。

• height（高度）和width（宽度）属性：

推荐CSS style="width:100px;height=100px;

• title属性:

用于设置图片的标题，即当鼠标指在图片上后显示的文字。

• alt属性：

设置用于图片无法加载时显示的文字。

• align属性：

用处不大，推荐使用CSS来控制样式。

设置图片周围文字相对于图片的位置。

常用值：top、 center、 bottom

2、：超链接标签

一个网站是由多个页面组成，用链接来完成不同页面的跳转。

标签可以设置一个超链接，单击则可跳转到新的文档或当前文档中的某个部分。

超链接

属性：

• href属性：

用来描述链接的地址，可以是网络地址也可以是本地文件。

当用#时，不是一个空的超链接。

• target属性：

定义通过超链接打开的文档在何处显示。

常用的属性值：

1. _self（默认值）：在与链接相同的框架中打开被链接的文档。
2. _blank：在新窗口在打开链接。

锚链接的用法

• 本页面锚链接

1. 设置锚点：
2. 在超链接上，使用#name跳转到对应锚点：超链接

• 页面间锚链接

1. 在即将跳转页面的指定位置，设置锚点。
2. 在超链接的href属性中，使用"页面地址.html#name"

页面间锚链接基础语法：

跳转到新页面指定部分

3、：行内标签

用来组合文档中的行内元素，无实际意义，用于包裹某部分文字。

div和span的区别

1. div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span是行内元素，可以与其他行内元素位于同一行。
2. div常用于页面中较大块的结构划分，然后配合css来操作；span一般用来包含文字等，他没有结构的意义，纯粹是样式应用。

其他行内元素都不适合的时候，可以用span来配合css操作，span标签往往用来配合css来修饰元素。

4、:强调标签

标签。



感谢兄弟们能看到最后，此篇为纯纯干货理论，适合做笔记使用。
看完这篇文章你就能快速了解常用行级标签。
欢迎访问我的博客：博客主页https://blog.csdn.net/m0_61901625?spm=1000.2115.3001.5343
希望大家能够一键三连。
块级标签：块级标签https://blog.csdn.net/m0_61901625/article/details/124450688?spm=1001.2014.3001.5501