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

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

news 2026/4/3 4:55:55

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>…...

编程日记 2025/3/3 19:42:29

【前端场景题】如何应对页面请求接口的大规模并发问题

如何应对页面请求接口的大规模并发问题&#xff0c;尤其是前端方面的解决方案&#xff0c;并且需要给出详细的代码解释。首先&#xff0c;我需要仔细阅读我搜索到的资料&#xff0c;找出相关的信息&#xff0c;然后综合这些信息来形成答案。 首先看&#xff0c;它提到前端优化策…...

编程日记 2025/3/3 19:37:21

Sublime Text4安装、汉化

-------------2025-02-22可用---------------------- 官方网址下载&#xff1a;https://www.sublimetext.com 打开https://hexed.it 点击打开文件找到软件安装目录下的 ctrlf 查找 8079 0500 0f94 c2右边启用替换替换为:c641 0501 b200 90点击替换按钮 替换完成后 另存为本地…...

编程日记 2025/3/3 19:32:16

Python PDF文件拆分-详解

目录 使用工具 将PDF按页数拆分 将PDF的每一页拆分为单独的文件 将PDF按指定页数拆分 根据页码范围拆分PDF 根据指定内容拆分PDF 将PDF的一页拆分为多页 在日常生活中&#xff0c;我们常常会遇到大型的PDF文件&#xff0c;这些文件可能难以发送、管理和查阅。将PDF拆分成…...

编程日记 2025/3/3 19:30:13

MacDroid for Mac v2.3 安卓手机文件传输助手 支持M、Intel芯片 4.7K

MacDroid 是Mac毒搜集到的一款安卓手机文件传输助手&#xff0c;在Mac和Android设备之间传输文件。您只需要将安卓手机使用 USB 连接到 Mac 电脑上即可将安卓设备挂载为本地磁盘&#xff0c;就像编辑mac磁盘上的文件一样编辑安卓设备上的文件&#xff0c;MacDroid支持所有 Andr…...

编程日记 2025/3/3 19:29:12

人大金仓国产数据库与PostgreSQL

一、简介 在前面项目中&#xff0c;我们使用若依前后端分离整合人大金仓&#xff0c;在后续开发过程中&#xff0c;我们经常因为各种”不适配“问题&#xff0c;但可以感觉得到大部分问题&#xff0c;将人大金仓视为postgreSQL就能去解决大部分问题。据了解&#xff0c;Kingba…...

编程日记 2025/3/3 19:28:10

阿里云 Qwen2.5-Max：超大规模 MoE 模型架构和性能评估

大家好，我是大 F，深耕AI算法十余年，互联网大厂技术岗。分享AI算法干货、技术心得。 欢迎关注《大模型理论和实战》、《DeepSeek技术解析和实战》，一起探索技术的无限可能！ 一、引言 Qwen2.5-Max 是阿里云通义千问团队研发的超大规模 Mixture-of-Expert（MoE）模型，旨在通…...

编程日记 2025/3/3 19:26:07

C++ 标准库容器的常用成员函数

目录 C 标准库容器简介 通用成员函数 1. 大小相关 size() empty() max_size() 2. 元素访问 operator[] at(size_t n) front() back() 3. 修改容器 push_back(const T& value) pop_back() clear() insert() erase() 4. 迭代器相关 begin() end() rbegi…...

编程日记 2025/3/3 19:25:06

MySQL双主搭建-5.7.35

文章目录 上传并安装MySQL 5.7.35双主复制的配置实例一&#xff1a;172.25.0.19&#xff1a;实例二&#xff1a;172.25.0.20&#xff1a; 配置复制用户在实例 1 &#xff08;172.25.0.19&#xff09;上执行&#xff1a;在实例 2 &#xff08;172.25.0.20&#xff09;上执行&…...

编程日记 2025/3/3 19:23:03

Uniapp开发微信小程序插件的一些心得

一、uniapp 开发微信小程序框架搭建 1. 通过 vue-cli 创建 uni-ap // nodejs使用18以上的版本 nvm use 18.14.1 // 安装vue-cli npm install -g vue/cli4 // 选择默认模版 vue create -p dcloudio/uni-preset-vue plugindemo // 运行 uniapp2wxpack-cli npx uniapp2wxpack --…...

编程日记 2025/3/3 19:19:58

Vscode通过Roo Cline接入Deepseek

文章目录 背景第一步、安装插件第二步、申请API key第三步、Vscode中配置第四步、Deepseek对话 背景 在前期介绍【IDEA通过Contince接入Deepseek】步骤和流程&#xff0c;那如何在vscode编译器中使用deepseek&#xff0c;记录下来&#xff0c;方便备查。 第一步、安装插件 在…...

编程日记 2025/3/3 19:17:55

不同规模企业如何精准选择AI工具： DeepSeek、Grok 和 ChatGPT 三款主流 AI 工具深度剖析与对比

本文深入探讨了最近国内外主流的 DeepSeek、Grok 和 ChatGPT 三款主流 AI 工具的技术细节、性能表现、应用场景及局限性&#xff0c;并从技术能力、功能需求、成本预算、数据安全和合规以及服务与支持五个关键维度&#xff0c;详细分析了不同规模企业在选择 AI 工具时的考量因素…...

编程日记 2025/3/3 19:11:48

如何有效判断与排查Java GC问题

目录 一、GC的重要性与对性能的影响 &#xff08;一&#xff09;GC对性能的影响简要分析 1.GC暂停与应用停顿 2.GC吞吐量与资源利用率 3.GC对内存管理的作用&#xff1a;资源回收 4.GC策略与优化的选择 &#xff08;二&#xff09;GC的双刃剑 二、GC性能评价标准 &…...

编程日记 2025/3/3 19:06:42

【笔记】用大预言模型构建专家系统

最近闲庭漫步&#xff0c;赏一赏各个AI大语言模型芳容。也趁着时间&#xff0c;把倪海夏一家的天纪和人纪视频看完了&#xff0c;感谢倪先生和现在网络的知识分享&#xff0c;受益匪浅。但是发现看完&#xff0c;很多不错的知识都不能记录在脑子里&#xff0c;那用的时候岂不是…...

编程日记 2025/3/3 19:02:39

Android SystemUI深度定制实战：下拉状态栏集成响铃功能开关全解析

一、功能实现全景视图 目标场景&#xff1a;在Android 14系统级ROM定制中&#xff0c;为SystemUI下拉状态栏的QuickQSPanel区域新增响铃模式切换开关&#xff0c;实现静音/响铃快速切换功能。该功能需通过三层关键改造实现&#xff1a; 二、核心实现三部曲 1. 配置注入&…...

编程日记 2025/3/3 19:01:37

【Python】基础语法三

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解Python的函数、列表和数组。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! > 专栏选自&#xff…...

编程日记 2025/3/3 18:59:34

[Computer Vision]实验六：视差估计

目录 一、实验内容 二、实验过程 2.1.1 test.py文件 2.1.2 test.py文件结果与分析 2.2.1 文件代码 2.2.2 结果与分析 一、实验内容 给定左右相机图片&#xff0c;估算图片的视差/深度&#xff1b;体现极线校正&#xff08;例如打印前后极线对&#xff09;、同名点匹配…...

编程日记 2025/3/3 18:58:33

【 开发知识点 一 】 随机数生成器 /dev/urandom 和 /dev/random

文章目录 一、随机数生成器 是什么 ？二、为什么 需要 随机数生成器 ？三、随机数生成器 基本原理四、随机数生成器 三个输出接口五、随机生成器 应用1、简单应用2、项目应用一、随机数生成器 是什么 ？ /dev/random 和 /dev/urandom 是 Linux 上的字符设备文件，它们是随机数…...

编程日记 2025/3/3 18:57:32

LabVIEW虚拟弗兰克赫兹实验仪

随着信息技术的飞速发展&#xff0c;虚拟仿真技术已经成为教学和研究中不可或缺的工具。开发了一种基于LabVIEW平台开发的虚拟弗兰克赫兹实验仪&#xff0c;该系统不仅能模拟实验操作&#xff0c;还能实时绘制数据图形&#xff0c;极大地丰富了物理实验的教学内容和方式。 ​ …...

编程日记 2025/3/3 18:53:25

LLC谐振变换器恒压恒流双竞争闭环simulink仿真

1.模型简介 本仿真模型基于MATLAB/Simulink&#xff08;版本MATLAB 2017Ra&#xff09;软件。建议采用matlab2017 Ra及以上版本打开。&#xff08;若需要其他版本可联系代为转换&#xff09;针对全桥LLC拓扑&#xff0c;利用Matlab软件搭建模型&#xff0c;分别对轻载&#xf…...

编程日记 2025/3/3 18:49:20

提升代码可读性的可视化注释工具推荐

1. 代码注释的艺术化工具推荐作为一名嵌入式开发者&#xff0c;我深知良好的代码注释对于项目维护和团队协作的重要性。但传统的纯文本注释往往枯燥乏味&#xff0c;缺乏直观性。今天我要分享几款能让你的代码注释"活起来"的神器&#xff0c;它们不仅能提升代码可读性…...

编程新知 2026/4/3 4:49:56

基于S7-1200PLC的物业供水控制系统设计》 PLC触摸屏，图纸，博图16 一、设计任务书...

基于S7-1200PLC的物业供水控制系统设计》 PLC触摸屏&#xff0c;图纸&#xff0c;博图16 一、设计任务书 1.自动工作时&#xff0c;当用水量少&#xff0c;压力增高&#xff0c;K 接通&#xff0c;此时可延时30s后撤除1台水泵工作,要求先工作的水泵先切断;当用水量多时,压力降低…...

编程新知 2026/4/3 4:43:50

小红书内容保存难题，这款Python工具如何实现一键无水印下载？

小红书内容保存难题&#xff0c;这款Python工具如何实现一键无水印下载&#xff1f; 【免费下载链接】XHS-Downloader 小红书&#xff08;XiaoHongShu、RedNote&#xff09;链接提取/作品采集工具&#xff1a;提取账号发布、收藏、点赞、专辑作品链接&#xff1b;提取搜索结果作…...

编程新知 2026/4/3 3:18:42

成本控制实战：OpenClaw+Qwen3.5-9B的Token消耗优化指南

成本控制实战&#xff1a;OpenClawQwen3.5-9B的Token消耗优化指南 1. 为什么需要关注Token消耗&#xff1f; 第一次用OpenClaw执行整夜自动化任务时&#xff0c;早上看到账单差点从椅子上跳起来——单次任务消耗了接近18万Token。这让我意识到&#xff0c;如果不加控制&#…...

编程新知 2026/4/3 2:44:12

基于Matlab的多自由度轴承静刚度计算之旅

基于Matlab的多自由度轴承静刚度计算 因分析静态下刚度结果&#xff0c;仅考虑重力作用&#xff0c;未考虑离心力的作用 深沟球轴承和圆锥轴承基本参数包括滚珠数量、滚珠直径、中称直径、曲率和材料参数 程序已调通&#xff0c;可直接运行在机械工程领域&#xff0c;深入了解轴…...

编程新知 2026/4/3 1:30:46

从LVGL菜单组件反推：手搓一个轻量级C语言菜单框架（适合RTOS/单片机）

从LVGL菜单组件反推&#xff1a;手搓一个轻量级C语言菜单框架&#xff08;适合RTOS/单片机&#xff09; 在嵌入式开发中&#xff0c;菜单系统是人机交互的重要组成部分。虽然LVGL等GUI库提供了现成的菜单组件&#xff0c;但理解其底层实现原理对于开发资源受限的MCU应用至关重要…...

编程新知 2026/4/3 1:28:45

寒武纪高级系统软件工程师面试技术解析

1. 寒武纪高级系统软件工程师面试全解析 作为一名在芯片验证领域摸爬滚打多年的工程师&#xff0c;去年我经历了寒武纪高级系统软件工程师岗位的完整面试流程。这个岗位对系统底层和芯片验证的要求非常高&#xff0c;今天我就把两轮技术面的核心问题拆解给大家&#xff0c;并分…...

编程新知 2026/4/3 0:44:35

区块链AI骗局：深扒某DeFi项目的测试造假链

当技术信任沦为欺诈工具 在软件测试领域&#xff0c;我们习惯于与代码、流程和标准打交道&#xff0c;致力于构建可靠、可验证的系统。然而&#xff0c;在区块链与人工智能融合的前沿地带&#xff0c;一场针对“信任”本身的系统性造假正在上演。本文旨在从一个软件测试工程师…...

编程新知 2026/4/3 0:14:11

贾龙栋与鸽姆智库：贾子哲学思想理论体系的构建、创新与全球影响 —— 基于跨学科视角的深度研究

贾龙栋与鸽姆智库&#xff1a;贾子哲学思想理论体系的构建、创新与全球影响 —— 基于跨学科视角的深度研究引言在人工智能技术迅猛发展与全球治理体系深刻变革的时代背景下&#xff0c;人类文明正面临前所未有的认知挑战与价值重构。一方面&#xff0c;技术能力的指数级增长与…...

编程新知 2026/4/3 0:08:06

实战踩坑：antv G6与vite集成时的兼容性难题与解决方案

1. 当antv G6遇上vite&#xff1a;开发环境与生产环境的"薛定谔式报错" 最近接手一个数据可视化项目&#xff0c;需要用到antv G6这个流程图工具库。开发阶段一切顺利&#xff0c;页面渲染流畅得像德芙巧克力。但当我用vite打包准备上线时&#xff0c;控制台突然抛出…...

编程新知 2026/4/2 23:57:57