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

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

news 2025/11/13 21:20:09

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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/11/12 9:37:09

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/11/7 14:07:46

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/11/9 17:12:53

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/11/8 9:59:27

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/11/10 14:03:36

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/11/12 15:04:04

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/9/29 4:00:38