HTML 常用标签——文本与布局标签、框架与窗口标签、锚点标签、图片标签

原创已于 2025-10-22 20:05:09 修改 · 944 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2025-08-19 12:35:42 首次发布

该文章已生成可运行项目，

一、文本与布局标签

行内元素（不独占一行）：

<span>：

无特殊样式的行内容器，用于形成独立空间，不独占一行

<span></span>

<a>：

超链接标签，

<a href="网址" target="目标">文本</a>

标签详解：

href：指定跳转的网址
target：控制跳转方式，_blank（新窗口）、_self（本窗口，默认）、iframe名称（在指定 iframe 中打开）

<!-- a超链接标签  不独占一行 -->
    <a href="https://www.baidu.com/">点击跳转到百度</a>
    
    <!-- target="_blank"跳转到新窗口 -->
    <a href="https://www.baidu.com/" target="_blank">点击跳转到百度</a>
   
    <!-- target="_self"在本窗口直接打开 -->
    <a href="https://www.baidu.com/" target="_self">点击跳转到百度</a> <br>

<br>：

换行标签（单标签）

块级元素（独占一行）：

标题标签：

<h1> 到 <h6>，字体大小依次减小，默认加粗

<!-- 题标签  竖着布局 从1往后  字体逐渐变小  每个独占一行 -->
     <h1></h1>
     <h2></h2>
     <h3></h3>

<div>：

无默认样式的块级容器，用于布局，字体大小一致且无加粗

<!-- div  竖着布局 字体大小一样 无加粗放大效果 -->
     <div></div>
     <div></div>

<p>：

段落标签，用于文本分段，段落间有默认间距

<p></p>

二、框架与窗口标签

<iframe>：

嵌入其他页面的框架标签

语法：

<iframe src="网址" 属性></iframe>

常用属性：
src：初始显示的网址
width/height：设置框架尺寸（前面用style时需要加单位，如px）
frameborder：设置边框，0为无边框
name：给框架命名，配合<a>的target属性，使链接在该框架中打开

<!-- 窗口标签/框架标签  frameborder="0" 不独占一行  嵌套其他页面 -->
    <iframe src="https://www.baidu.com/"></iframe>
   
    <!-- 加大窗口 直接加或者用style标签都可以 style记得加单位 -->
    <iframe src="https://www.baidu.com/" width="900" height="1300"></iframe>
    <iframe src="https://www.baidu.com/" style=" width:900px;height: 1300px;"></iframe>
   
    
    <!-- 窗口无边界线 -->
   <iframe src="https://www.baidu.com/" frameborder="0"></iframe>

需要注意的一个点

<!-- name可以给它前面的网址命名为demo -->
    <!-- target窗口名  把链接内容放到名为 demo 的容器iframe里 -->
    <iframe src="https://www.baidu.com/" name="demo"></iframe>
    <a href="https://meeting.tencent.com" target="demo"></a>
   <!-- 最终打开的是target前面的网 即tencent -->

详解：
1. 核心规则： target 是“目标容器名”，不是“网址名”

<a target="demo"> ：意思是「点击这个链接时，把链接内容（ href 的网址）渲染到名为 demo 的容器里」，而不是“打开叫 demo 的网址”

简单说： target="demo" 是让超链接的内容 “定向显示到名为 demo 的 iframe 里”，不是直接打开新网址

2. 代码执行流程

页面里有个 <a href="https://leetcode.cn/" target="demo"> ，点击时，页面里 name="demo" 的容器（也就是下面的 <iframe> ）把 href 的内容（力扣网址）加载到这个 iframe 里，所以你看到 iframe 显示力扣，而不是百度

至于 <iframe src="https://www.baidu.com/"> ，它只是 iframe 初始显示的内容。但一旦被 <a target="demo"> 触发，就会被 href 的网址替换掉

三、锚点标签

作用：

实现页面内跳转。

语法：

定义锚点：

<a name="锚点名称"></a>（放在目标位置）
<!-- 锚点标签 -->
<!-- 先在你需要跳转的位置预留好锚点 用a+name -->
<a name="aa"></a>
<!-- 用a跳锚点，记得加# -->
<a href="#aa">点击返回顶部/底部</a>
<!-- 跳转到a所在的位置 -->

跳转锚点：

<a href="#锚点名称">文本</a>（点击跳转至锚点位置）
固定定位锚点：通过style="position: fixed; 位置属性"使锚点按钮不随页面滚动移动，例如：
<!-- 跳转到a所在的位置,并且位置固定，不随浏览器的滚动而滚动 -->
<a href="#bb" style="position: fixed;right: 100px;bottom: 100px;">点击返回顶部/底部</a>

四、. 图片标签

<img>：插入图片

语法：

<img src="图片路径" alt="替代文本" 样式>

需要注意的图片访问路径：

src：图片路径（绝对路径 / 相对路径：访问者与被访问者之间的相对关系只有两者在同一个文件夹下时，才能直接访问）：

同一级目录：

<img src="tu.jpg(所需要的图片名字)">

下一级目录（如img文件夹）：

<!-- 图片的上一级 与 html文件的上一级在同一个文件夹时 -->
 <img src="img/tu.jpg" >

上一级目录：

<!-- 图片 与 html文件的上一级在同一个文件夹时 -->
  <img src="../img/tu.jpg" >

alt：图片加载失败时显示的替代文本

<!-- alt作用，当图片因路径错误、网络故障、文件损坏等原因无法正常显示时，浏览器会在图片原本的位置显示alt属性中的文字，帮助用户了解这张图片的内容、类型或名称 -->
<img src="../img/tu.jpg" alt="风景图片">

样式控制：可通过style设置尺寸（如width: 100px），object-fit: cover可保持宽高比并填充容器（超出部分裁剪）

通用属性

id class style是所有标签都有的属性，其余都是各标签特有的

id：唯一标识（类似身份证，不可重复）。

class：类名（可重复，用于批量设置样式）。

style：行内样式（直接在标签内定义 CSS，优先级高）

本文章已经生成可运行项目

标签

#css #html #前端