当前位置： 首页 > article >正文

【前端基础】3、HTML的常用元素（h、p、img、a、iframe、div、span）、不常用元素（strong、i、code、br）

article 2026/3/27 23:42:01

HTML结构

一个HTML包含以下部分：

  • 文档类型声明
  • html元素
    1. head元素
    2. body元素

例（CSDN）：
在这里插入图片描述

一、文档类型声明

HTML最一方的文档称为：文档类型声明，用于声明文档类型。即：<!DOCTYPE html>

<!DOCTYPE html> 的作用：

  • HTML文档声明，用于告诉浏览器是HTML5页面。
  • 让浏览器用HTML5的标准去解析。
  • 必须放在最最前面，不可以省略。否则可能有兼容性问题。

二、html元素

1、 <html>元素

表示一个HTML 文档的根（顶级元素），也成为根元素。
其他元素必须是这个元素的后代。

2、一般都会加一个 lang属性

lang属性的作用：

  • 定义当前HTML文档的语言
  • 帮助语音合成工具确定要使用的发音。
  • 帮助翻译工具确定要使用的翻译规则。

常用lang属性的规则：

  • lang="zh-CN"：表示这个HTML文档的语言是中文。
  • lang="en"：表示这个HTML文档的语言是英文。

例（CSDN）：
在这里插入图片描述

三、head元素

1、 <head>元素

规定文档的配置信息（也成为元数据），包括文档的标题，引用的文档样式、脚本信息等等。

  • 元数据：描述数据的数据，可以理解为整个页面的配置。

常见的设置：

  • title元素
    设置网页的标题。
  • meta元素
    设置网页的编码。即：<meta charset=utf-8">，一般都是utf-8编码。
    ⭐meta元素是用来让机器识别元数据的。
    ⭐有各种元素类型。例如name & content可以指定元数据的名称（这部分对 SEO 非常有用）等等。

例（CSDN）：
在这里插入图片描述

四、body元素

body元素里面的内容是 在浏览器窗口中看到的东西，也就是网页的具体内容和结果。

五、常用元素

h元素

  • h：即heading，标题。
    作用：将一些重要文字作为标题。
  • <h1> 到 <h6>：六种不同级别。
    <h1>级别最高，<h6>级别最低。
    在这里插入图片描述

h元素通常和SEO优化有关。

p元素

  • p：即paragraph，段落。
    作用：表示文本的一个段落的时候使用。
  • 多个段落之间会存在间距。
    在这里插入图片描述

img元素

  • 作用：将图片嵌入文档。告诉浏览器显示图片。

  • <img>常见的两个属性：

    1. src属性：
      是必须的。
      包含你想嵌入图片的路径。

    2. alt属性
      不是强制的。有两个作用：
      ①如果图片加载失败（图片地址错误或者图片不存在），那么会显示这段文本。
      ②屏幕阅读器会都这段文字给使用者，指导这张图的含义。

    3. 其他属性也都可以，例如：width属性

  • 图片的路径src

    1. 网络图片：给一个网络的URL就行。很简单。
    2. 本地图片：己电脑上的图片。
      本地图片的地址分两种：
      ①绝对路径（几乎不用）
      从电脑的本目录开始一直找到资源路径。
      ②相对路径
      对于当前文件而言的一个路径。
      .：代表当前文件夹，可省略。
      ..：代表上一层的文件夹，可省略。
    3. 注意路径分割都是/。
<img src="./../images/test.jpg" alt="">

在这里插入图片描述

  • img支持的图片格式
    在这里插入图片描述

a元素

  • 作用：需要跳转到某个链接的时候使用a元素。

  • <a>元素：定义超链接，用于打开新的URL。

  • <a>元素两个，常见的属性：

    1. href属性
      指定要打开的URL。
      也可以是一个本地地址。
    2. target属性
      指定在何处显示链接的资源。
      ①_self：在当前窗口打开。
      ②_blank：在新的窗口打开。
      ③_parent：在父窗口打开。（单独使用没效果，需要和iframe元素配合使用。）
      ④_top：在最顶层窗口打开。（单独使用没效果，需要和iframe元素配合使用。）

  • a元素：设置锚点链接

    1. 作用：跳到网页的某个位置。（例如：目录跳转）
    2. 具体步骤：
      ①在要跳的的元素上定义一个id属性
      ②定义a元素，让他的href指向对应的id。
      在这里插入图片描述

  • a元素：设置图片链接

    1. 作用：点击某个图片，跳转到指定链接。
    2. 具体步骤：
      ①定义a元素，它的内容放一个img元素。（也就是img元素就是a元素的内容。）
      ②指定href，设置想跳转的地址。
      在这里插入图片描述

iframe元素

在一个HTML文档中嵌入另一个HTML文档。
在这里插入图片描述

div元素

  • div元素：就是一个容器，或者说盒子。用来包裹内容。
  • 作用：
    ①div包裹的内容在不同行显示。包裹的这部分是一个整体。
    ②把网页分割成多个独立的部分。

span元素

  • span元素：就是一个容器，或者说盒子。用来包裹内容。
  • 作用：
    ①span包裹的内容在同一行显示。包裹的这部分和普通文本没区别。
    ②用于区分特殊文本和普通文本，主要用来显示关键字。
    在这里插入图片描述

六、不常用元素

strong元素

  • 作用：内容加粗，强调。
    通常都是用css来完成。

i元素

  • 作用：内容倾斜。
    通常都是用css来完成。

code元素

  • 作用：用于显示代码

br元素

  • 作用：换行
    在这里插入图片描述

相关文章：

【前端基础】3、HTML的常用元素（h、p、img、a、iframe、div、span）、不常用元素（strong、i、code、br）

HTML结构 一个HTML包含以下部分&#xff1a; 文档类型声明html元素 head元素body元素 例&#xff08;CSDN&#xff09;&#xff1a; 一、文档类型声明 HTML最一方的文档称为&#xff1a;文档类型声明&#xff0c;用于声明文档类型。即&#xff1a;<!DOCTYPE html>…...

编程日记 2026/3/16 20:38:36

【漫话机器学习系列】113.逻辑回归（Logistic Regression） VS 线性回归（Linear Regression）

逻辑回归 vs 线性回归&#xff1a;详解对比 在机器学习和统计学中&#xff0c;逻辑回归&#xff08;Logistic Regression&#xff09; 和 线性回归&#xff08;Linear Regression&#xff09; 都是非常常见的模型。尽管它们的数学表达式有一定的相似性&#xff0c;但它们的应用…...

编程日记 2026/3/18 16:48:29

3 算法1-3 回文质数

题目描述 因为 151 既是一个质数又是一个回文数&#xff08;从左到右和从右到左是看一样的&#xff09;&#xff0c;所以 151 是回文质数。 写一个程序来找出范围 [a,b](5≤a<b≤100,000,000)&#xff08;一亿&#xff09;间的所有回文质数。 输入格式 第一行输入两个正…...

编程日记 2025/12/31 22:16:35

Redis---缓存穿透，雪崩，击穿

文章目录 缓存穿透什么是缓存穿透&#xff1f;缓存穿透情况的处理流程是怎样的&#xff1f;缓存穿透的解决办法缓存无效 key布隆过滤器 缓存雪崩什么是缓存雪崩&#xff1f;缓存雪崩的解决办法 缓存击穿什么是缓存击穿&#xff1f;缓存击穿的解决办法 区别对比 在如今的开发中&…...

编程日记 2026/3/16 20:38:39

联合省选 2025 游记

Day 1 不会 LCT&#xff0c;不会字符串&#xff0c;不会博弈 快进到考场 t 1 t1 t1 很快想到枚举中位数再 check&#xff0c;然后就会了&#xff0c;思路很清晰写的很快 t 2 t2 t2 干想 1h 编出来 n m 2 3 nm^{\frac{2}{3}} nm32​&#xff0c;然后认为 t 3 t3 t3 会和去年…...

编程日记 2025/11/30 16:48:02

Skywalking介绍，Skywalking 9.4 安装，SpringBoot集成Skywalking

一.Skywalking介绍 Apache SkyWalking是一个开源的分布式追踪与性能监视平台&#xff0c;特别适用于微服务架构、云原生环境以及基于容器&#xff08;如Docker、Kubernetes&#xff09;的应用部署。该项目由吴晟发起&#xff0c;并已加入Apache软件基金会的孵化器&#xff0c;…...

编程日记 2026/3/21 12:09:17

Thonny+MicroPython+ESP32开发环境搭建

1、下载&安装Thonny 安装成功后&#xff0c;会在桌面生成快捷键 双击快捷键&#xff0c;打开程序&#xff0c;界面如下 2、下载MicroPython 下载地址&#xff1a;MicroPython - Python for microcontrollers v1.19版(推荐&#xff0c;此版本稳定)&#xff1a; https://do…...

编程日记 2026/3/19 23:28:22

数据结构：反射 和 枚举

目录 一、反射 1、定义 2、反射相关的类 3、Class类 &#xff08;2&#xff09;常用获得类中属性相关的方法&#xff1a; &#xff08;3&#xff09;获得类中注解相关的方法&#xff1a; &#xff08;4&#xff09;获得类中构造器相关的方法&#xff1a; &#xff08;…...

编程日记 2026/3/16 20:38:30

前缀和算法 算法4

算法题中帮助复习的知识 vector<int > dp( n ,k); n为数组大小 ,k为初始化 哈希表unordered_map<int ,int > hash; hash.find(k)返回值是迭代器 ,找到k返回其迭代器 没找到返回hash.end() hash.count(k)返回值是数字 ,找到k返回1 ,没找到返回0. C和java中 负数…...

编程日记 2026/3/16 20:39:04

USRP7440-通用软件无线电平台

1、产品描述 USRP7440基于第三代XILINX Zynq UltraScale RFSoC架构&#xff0c;它将射频ADC、DAC、ARM、FPGA等集成一体&#xff0c;瞬时带宽可以达到2.5GHz&#xff0c;尤其适合于射频直采应用&#xff0c;比如通信与雷达。 第一代RFSOC高达4GHz • 8x 或 16x 6.554GSPS DAC…...

编程日记 2026/3/18 15:13:09

yunedit-post ，api测试比postman更好

postman应该是大家最熟悉的api测试软件了&#xff0c;但是由于它是外国软件&#xff0c;使用它的高端功能注册和缴费都比较麻烦。生成在线文档分享也经常无法访问被拦截掉。 这里可以推荐一下yunedit-post&#xff0c;该有的功能都有。 https://www.yunedit.com/postdetail …...

编程日记 2026/3/18 21:44:25

windows下玩转vllm：在wsl下安装vllm后续，设置modelscope作为下载源

文章目录 前言所涉及的之前的关键步骤解决模型权重下载网络不通畅的问题vllm和modelscope整合后的bug附录 ImportError: cannot import name _try_login from modelscope.utils.hf_util 全部报错信息前言 之前，咱们说了，由于windows不支持直接部署vllm，所以要么采用wsl，要…...

编程日记 2025/12/22 17:33:13

移动零

一 &#xff1a;题目 二&#xff1a;思路 双指针法&#xff1a; 两个指针将数组划分成三个部分&#xff1a; 解释&#xff1a; ①&#xff1a;所以一开始dest要等于-1&#xff0c;因为没有非零的元素&#xff0c;cur0&#xff0c;因为要从头开始遍历数组 ②&#xff1a;cur为…...

编程日记 2026/3/27 1:09:54

MySQL整体架构

目录 1 客户端 2 服务端 2.1 Server层 2.1.1 连接器 2.1.2 查询缓存 2.1.3 词法器 2.1.4 优化器 2.1.5 执行器 2.2 存储引擎层 1 客户端 ● 客户端为连接MySQL服务端的工具或者驱动&#xff0c;比如JDCB&#xff0c;ODBC等等 ● 用于连接目前服务器&#xff0c;并且发送需要执行…...

编程日记 2026/3/19 15:18:17

Linux之yum详解

—— 小 峰 编 程 目录 1、Linux软件的安装方式 2、什么是yum 3、配置网络yum源 4、yum命令 【语法】 【yum常用命令】 1、Linux软件的安装方式 在CentOS系统中&#xff0c;软件管理方式通常有三种方式&#xff1a; rpm安装 、 yum安装 以及 编译安装 。 2、什么是yum…...

编程日记 2026/3/18 3:12:20

大数据学习（52）-MySQL数据库基本操作

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…...

编程日记 2025/12/11 3:27:29

鸿蒙启动页开发

鸿蒙启动页开发 1.1 更改应用名称和图标 1.更改应用图标 找到moudle.json5文件&#xff0c;找到应用启动的EntryAbility下面的icon,将原来的图标改成自己设置的即可 2.更改应用名称 3.效果展示 2.1 广告页面开发 3.1 详细介绍 3.1.1 启动页面 import { PrivacyDialog } fr…...

编程日记 2026/3/15 23:45:18

记忆化搜索（典型算法思想）—— OJ例题算法解析思路

目录 一、509. 斐波那契数 - 力扣&#xff08;LeetCode&#xff09; 算法代码&#xff1a; 1. 动态规划 (fib 函数) 初始化&#xff1a; 递推计算&#xff1a; 返回结果&#xff1a; 2. 记忆化搜索 (dfs 函数) 备忘录初始化&#xff1a; 递归终止条件&#xff1a; 递…...

编程日记 2026/3/17 6:41:47

Day11，Hot100（贪心算法）

贪心 &#xff08;1&#xff09;121. 买卖股票的最佳时机 第 i 天卖出的最大利润&#xff0c;即在前面最低价的时候买入 class Solution:def maxProfit(self, prices: List[int]) -> int:min_price prices[0]ans 0for price in prices:ans max(ans, price - min_price…...

编程日记 2026/3/17 22:51:16

翻译: 深入分析LLMs like ChatGPT 一

大家好&#xff0c;我想做这个视频已经有一段时间了。这是一个全面但面向普通观众的介绍&#xff0c;介绍像ChatGPT这样的大型语言模型。我希望通过这个视频让大家对这种工具的工作原理有一些概念性的理解。 首先&#xff0c;我们来谈谈你在这个文本框里输入内容并点击回车后背…...

编程日记 2026/3/18 3:06:11

《白帽子讲 Web 安全》之移动 Web 安全

目录 摘要 一、WebView 简介 二、WebView 对外暴露 WebView 对外暴露的接口风险 三、通用型 XSS - Universal XSS 介绍 四、WebView 跨域访问 五、与本地代码交互 js 5.1接口暴露风险&#xff1a; 5.2漏洞利用&#xff1a; 5.3JavaScript 与 Native 代码通信 六、Chr…...

编程日记 2026/3/22 9:10:13

解锁 indexOf、substring 和 JSON.stringify：从小程序图片上传看字符串魔法 ✨

&#x1f31f; 解锁 indexOf、substring 和 JSON.stringify&#xff1a;从小程序图片上传看字符串魔法 ✨ 在 JavaScript 中&#xff0c;字符串操作和数据序列化是开发中不可或缺的技能。indexOf、substring 和 JSON.stringify 是三个简单却强大的工具&#xff0c;分别用于定位…...

编程日记 2026/3/24 10:41:16

常用的AI文本大语言模型汇总

AI文本【大语言模型】 1、文心一言https://yiyan.baidu.com/ 2、海螺问问https://hailuoai.com/ 3、通义千问https://tongyi.aliyun.com/qianwen/ 4、KimiChat https://kimi.moonshot.cn/ 5、ChatGPThttps://chatgpt.com/ 6、魔塔GPT https://www.modelscope.cn/studios/iic…...

编程日记 2026/3/27 22:18:09

DCN讲解

DCN是DeepFM的升级版&#xff0c;后者是只能做二阶交叉特征&#xff0c;随着阶数上升&#xff0c;模型复杂度大幅提高&#xff0c;且FM网络层较浅&#xff0c;表达能力有限。google团队通过构建深度交叉网络来自动进行特征的高阶交叉&#xff0c;且时空复杂度均为线性增长&…...

编程日记 2026/3/23 5:48:06

前端开发常用的加密算法

以下是前端开发中常用的加密方式及其适用场景的详细说明&#xff1a; 一、核心加密方案 加密类型常用算法特点适用场景对称加密AES、DES、3DES加密解密使用相同密钥&#xff0c;速度快本地存储加密、HTTP Body加密非对称加密RSA、ECC公钥加密私钥解密&#xff0c;安全性高传输…...

编程日记 2026/1/6 3:02:05

5. Nginx 负载均衡配置案例(附有详细截图说明++)

5. Nginx 负载均衡配置案例(附有详细截图说明) 文章目录 5. Nginx 负载均衡配置案例(附有详细截图说明)1. Nginx 负载均衡 配置实例3. 注意事项和避免的坑4. 文档: Nginx 的 upstream 配置技巧5. 最后&#xff1a; 1. Nginx 负载均衡 配置实例 需求说明/图解 windows 浏览器输…...

编程日记 2026/3/23 11:13:20

C++之再识模板template

目录 1.非类型模板参数 2.函数/类模板的特化 3.模板的分离编译 4.总结&#xff1a;模板的优缺点 1. 代码复用性高 2. 类型安全 3. 性能优化 2. 错误信息难以理解 3. 代码膨胀 易错易忽略的语法点&#xff1a; 1. 模板声明和定义分离问题 2. 模板参数推导问题 1.非类…...

编程日记 2026/3/20 2:28:36

【文献阅读】Collective Decision for Open Set Recognition

基本信息 文献名称&#xff1a;Collective Decision for Open Set Recognition 出版期刊&#xff1a;IEEE TRANSACTIONS ON KNOWLEDGE AND DATA ENGINEERING 发表日期&#xff1a;04 March 2020 作者&#xff1a;Chuanxing Geng and Songcan Chen 摘要 在开集识别&#xff0…...

编程日记 2026/3/23 19:47:16

力扣刷题DAY2（链表/简单）

一、回文链表 回文链表 方法一&#xff1a;双指针 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, L…...

编程日记 2026/3/27 8:03:56

golang 内存对齐和填充规则

内存对齐和填充规则 对齐要求&#xff1a;每个数据类型的起始地址必须是其大小的倍数。 int8&#xff08;1字节&#xff09;&#xff1a;不需要对齐。int16&#xff08;2字节&#xff09;&#xff1a;起始地址必须是2的倍数。int32&#xff08;4字节&#xff09;&#xff1a;起…...

编程日记 2025/3/26 16:39:08