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

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

news 2025/8/2 23:13:52

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

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/7/31 5:34:43

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/7/30 16:32:34

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/6/21 18:39:26

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/27 1:33:21

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/7/19 3:59:22

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/8/2 2:38:24

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/7/31 20:13:39

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2025/7/30 15:06:20

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/6/21 5:00:15