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

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

news 2025/9/23 20:11: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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/9/23 6:03:53

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/17 8:08:37

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/9/22 6:31:11

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/9/23 10:20:53

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/9/23 17:31:30

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/9/22 18:14:12

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/9/22 23:01:10

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/9/12 21:09:32