HTML网页标签之标题、段落、图片及路径介绍

目录

…

标题标签p 段落标签img图片标签    img图片标签介绍    相对路径    绝对路径

…

标题标签     在 HTML 中，

至

标签被用于定义不同层级的标题，它们属于容器级标签。其中，

标签定义的标题级别最大，最为突出醒目，而

标签定义的标题级别最小。     所有的主流浏览器都对这一系列标签提供了良好的支持。从理论层面来讲，h 系列标签内部可以放置

、

等元素，然而从语义表达的合理性角度出发，不提倡进行这样的操作。    使用标题标签可以使网页的结构更加清晰，便于用户理解和搜索引擎抓取。    示例代码如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

    运行结果：

p 段落标签

在 HTML 中，p 标签作为一个文本级的标签，具有特定的用途和规范。它可以容纳文字、图片以及表单元素，要知道，这三种元素都属于流元素。    p 标签的主要功能是定义段落，当使用 p 标签时，浏览器会自动在段落的前后添加一些空白区域，从而在视觉上形成段落的分隔效果。这些空白是由浏览器自动生成的，但如果有需要，开发者也可以在样式表中对其进行更加精细的规定，以满足特定的设计需求。值得一提的是，所有主流浏览器都对 p 标签提供了良好的支持，确保了网页在不同浏览器环境下的一致性和稳定性。    以下是正确与错误写法的示例代码：    正确的写法：      

标题

      

段落

        分析：在这种正确的写法中，标题和段落分别被清晰地定义，符合 HTML 的结构规范。    错误的写法：      

          

标题

          段落      
        分析：这种错误的写法从语义和结构上都不太恰当。虽然在某些情况下，浏览器可能不会完全报错，但这样的写法不符合 HTML 的标准规范，可能会在不同的浏览器或设备上产生不可预测的显示效果。    在进行网页开发时，我们应当始终遵循正确的 HTML 结构规范，合理使用 p 标签以及其他标签，以确保网页的质量和可读性。    以下是错误的写法在浏览器中的运行结果：

img图片标签

img图片标签介绍    在 HTML 中，标签可谓至关重要，为网页嵌入图像，赋予网页非凡的生动性与丰富度，从而极大地提升用户体验。    标签属于单标签，且为文本级标签，能够自行封闭。它能够在网页中嵌入多种类型的图像，常见的有 jpg（jpeg）、gif、png 和 bmp 等格式。值得一提的是，所有主流浏览器都对标签给予了良好的支持。    其完整写法为：      img 标签拥有多个属性，其中主要的属性有：属性值描述srcURL用于规定显示图像的网络地址（此属性必不可少，可采用相对或绝对路径来指定图像文件路径）。alt文本规定了图像的替代文本（当由于某种原因图像无法显示时，该替代文字会出现，为用户提供必要的信息提示。不过，部分浏览器可能不支持此属性。）title文本当用户鼠标悬停于图像上时，会显示额外信息。width像素或使用百分比用于指定图像的宽度height像素或使用百分比用于指定图像的高度usemap

前端基地微信公众号二维码

      

                

      

                                                    

        分析：首先有一个标签，展示了一个名为 “qrcode.jpg” 的图像，并通过usemap="#imageMap"属性关联了一个图像映射。    然后定义了一个