【前端基础】3、HTML的常用元素(h、p、img、a、iframe、div、span)、不常用元素(strong、i、code、br)
HTML结构
一个HTML包含以下部分:
- 文档类型声明
- html元素
- head元素
- 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>
常见的两个属性:-
src
属性:
是必须的。
包含你想嵌入图片的路径。 -
alt
属性
不是强制的。有两个作用:
①如果图片加载失败(图片地址错误或者图片不存在),那么会显示这段文本。
②屏幕阅读器会都这段文字给使用者,指导这张图的含义。 -
其他属性也都可以,例如:
width
属性
-
-
图片的路径
src
- 网络图片:给一个网络的URL就行。很简单。
- 本地图片:己电脑上的图片。
本地图片的地址分两种:
①绝对路径(几乎不用)
从电脑的本目录开始一直找到资源路径。
②相对路径
对于当前文件而言的一个路径。
.
:代表当前文件夹,可省略。
..
:代表上一层的文件夹,可省略。 - 注意路径分割都是
/
。
<img src="./../images/test.jpg" alt="">
img
支持的图片格式
a
元素
-
作用:需要跳转到某个链接的时候使用
a
元素。 -
<a>
元素:定义超链接,用于打开新的URL
。 -
<a>
元素两个,常见的属性:href
属性
指定要打开的URL。
也可以是一个本地地址。target
属性
指定在何处显示链接的资源。
①_self
:在当前窗口打开。
②_blank
:在新的窗口打开。
③_parent
:在父窗口打开。(单独使用没效果,需要和iframe
元素配合使用。)
④_top
:在最顶层窗口打开。(单独使用没效果,需要和iframe
元素配合使用。)
-
a
元素:设置锚点链接- 作用:跳到网页的某个位置。(例如:目录跳转)
- 具体步骤:
①在要跳的的元素上定义一个id
属性
②定义a
元素,让他的href
指向对应的id
。
-
a
元素:设置图片链接- 作用:点击某个图片,跳转到指定链接。
- 具体步骤:
①定义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包含以下部分: 文档类型声明html元素 head元素body元素 例(CSDN): 一、文档类型声明 HTML最一方的文档称为:文档类型声明,用于声明文档类型。即:<!DOCTYPE html>…...
安装mysql
1、安装数据库 下载链接 https://downloads.mysql.com/archives/community/ 下载zip安装包,解压到某个路径下,将bin文件夹添加到系统环境变量 。 然后终端输入指令 mysql --version 验证 2、初始化数据库 打开命令提示符(以管理员身份&am…...
关于 QPalette设置按钮背景未显示出来 的解决方法
若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/146047054 长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV…...
记一次ScopeSentry搭建
介绍 Scope Sentry是一款具有资产测绘、子域名枚举、信息泄露检测、漏洞扫描、目录扫描、子域名接管、爬虫、页面监控功能的工具,通过构建多个节点,自由选择节点运行扫描任务。当出现新漏洞时可以快速排查关注资产是否存在相关组件。 目前功能 插件系…...
【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题
【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题 1、HarmonyOS 有关webview Header无法更新的问题? 业务A页面 打开 webivew B页面,第一次打开带了header请求,然后退出webview B页面…...
优选算法的智慧之光:滑动窗口专题(二)
专栏:算法的魔法世界 个人主页:手握风云 目录 一、例题讲解 1.1. 最大连续1的个数 III 1.2. 找到字符串中所有字母异位词 1.3. 串联所有单词的子串 1.4. 最小覆盖子串 一、例题讲解 1.1. 最大连续1的个数 III 题目要求是二进制数组&am…...
Android ChatOn-v1.66.536-598-[构建于ChatGPT和GPT-4o之上]
ChatOn 链接:https://pan.xunlei.com/s/VOKYnq-i3C83CK-HJ1gfLf4gA1?pwdwzwc# 添加了最大无限积分 删除了所有调试信息 语言:全语言支持...
十一、Redis Sentinel(哨兵)—— 高可用架构与配置指南
Redis Sentinel(哨兵)—— 高可用架构与配置指南 在分布式应用中,Redis 主从复制(Master-Slave)虽然能提供读写分离的能力,但它 无法自动故障转移(failover)。如果主节点(Master)发生故障,系统管理员需要手动将某个从节点(Slave)提升为主节点,并重新配置所有从节…...
【STM32】玩转IIC之驱动MPU6050及姿态解算
目录 前言 一.MPU6050模块介绍 1.1MPU6050简介 1.2 MPU6050的引脚定义 1.3MPU6050寄存器解析 二.MPU6050驱动开发 2.1 配置寄存器 2.2对MPU6050寄存器进行读写 2.2.1 写入寄存器 2.2.2读取寄存器 2.3 初始化MPU6050 2.3.1 设置工作模式 2.3.2 配置采样率 2.3.3 启…...
《张一鸣,创业心路与算法思维》
张一鸣,多年如一日的阅读习惯。 爱读人物传记,称教科书式人类知识最浓缩的书,也爱看心理学,创业以及商业管理类的书。 冯仑,王石,联想,杰克韦尔奇,思科。 《乔布斯传》《埃隆马斯…...
深入浅出:UniApp 从入门到精通全指南
https://juejin.cn/post/7440119937644101684 uni-app官网 uniapp安卓离线打包流程_uniapp离线打包-CSDN博客 本文是关于 UniApp 从入门到精通的全指南,涵盖基础入门(环境搭建、创建项目、项目结构、编写运行)、核心概念与进阶知识&#x…...
低空经济-飞行数据平台 搭建可行方案
搭建一个飞行数据平台是低空经济中至关重要的一环,它能够实现对飞行器的实时监控、数据分析、路径优化以及安全管理。以下是搭建飞行数据平台的详细步骤和技术方案: 一、平台的核心功能 实时监控: 实时获取飞行器的位置、速度、高度、电池状态等数据。提供可视化界面,展示飞…...
【四.RAG技术与应用】【12.阿里云百炼应用(下):RAG的云端优化与扩展】
在上一篇文章中,我们聊了如何通过阿里云百炼平台快速搭建一个RAG(检索增强生成)应用,实现文档智能问答、知识库管理等基础能力。今天咱们继续深入,聚焦两个核心问题:如何通过云端技术优化RAG的效果,以及如何扩展RAG的应用边界。文章会穿插实战案例,手把手带你踩坑避雷。…...
3-7 WPS JS宏 工作表移动复制实例-2(多工作簿的多工作表合并)学习笔记
************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...
【智能机器人开发全流程:硬件选型、软件架构与ROS实战,打造高效机器人系统】
文章目录 1. 硬件层设计(1) 传感器选型(2) 计算平台 2. 软件架构设计(1) 核心模块划分(2) 通信框架 3. 关键实现步骤(1) 硬件-软件接口开发(2) SLAM与导航实现(3) 仿真与测试 4. 典型框架示例基于ROS的移动机器人分层架构 5. 优化与扩展6. 开源项目参考 1. 硬件层设计 (1) 传感…...
【CSS—前端快速入门】CSS 选择器
CSS 1. CSS介绍 1.1 什么是CSS? CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式; CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果;能够做到页面的样式和 结构分离; 1…...
二、QT和驱动模块实现智能家居-----5、通过QT控制LED
在QT界面,我们要实现点击“LED”按钮就可以控制板子上的LED。LED接线图如下: 在Linux 系统里,我们可以使用2种方法去操作上面的LED: ① 使用GPIO SYSFS系统:这需要一定的硬件知识,需要设置引脚的方向、数值…...
在UI设计中使用自定义控件
生成: 自定义控件完成: 看控件的父类是谁: 在想使用的窗口中: 拖动一个与他父类相同类型的控件: 点击控件右键 这样就是你自定义的控件了 运行后: //点击QSpinBox,滑块跟着移动void (QSpinBox::…...
docker 离线安装redis(离线)
docker离线安装redis时,我找了挺多资料都是需要先在另一台能联网的机器上先下载镜像,然后移动内网中的docker服务器进行部署,我也是这么操作的,但是必须拥有能上网的docker环境才能下载,我在github上找到了一种可以直接…...
利用python实现对Excel文件中数据元组的自定义排序
问题引入: 假设你是一个浙江省水果超市的老板,统筹11个下辖地市的水果产量。假设11个地市生产的水果包括:苹果、香蕉和西瓜。你如何快速得到某种水果产量突出(排名前几)的地市?产量落后(排名后…...
基于 Python 深度学习的电影评论情感分析可视化系统(2.0 全新升级)
基于 Python 深度学习的电影评论情感分析可视化系统,基于 Flask 深度学习,构建了一个 影评情感分析系统,能够 自动分析影评、计算情感趋势 并 可视化展示,对于电影行业具有重要参考价值! 基于 Python 深度学习的电影评…...
【MYSQL数据库异常处理】执行SQL语句报超时异常
MYSQL执行SQL语句异常:The last packet successfully received from the server was 100,107 milliseconds ago. The last packet sent successfully to the server was 100,101 milliseconds ago. 这个错误表明 MySQL 服务器与 JDBC 连接之间的通信超时了。通常由…...
docker拉取失败
备份原始配置文件 sudo cp /etc/docker/daemon.json /etc/docker/daemon.json.bak 清理或修复 daemon.json 文件 sudo nano /etc/docker/daemon.json 删除 文件中的所有内容,确保文件为空。 cv下面这个文件内容 { "registry-mirrors": [ &…...
Linux的一些配置(网络建设与运维)
for i in 的指令使用集 传输内容指令 for i in {1..7};do ssh 10.4.220.10${i} "指令";done 传输文件指令 for i in {1..7};do scp 文件 root10.4.220.10${i}:文件位置;done DNS循环内容指令 for i in {1..7};do echo "linux$i A 10.4.220.10$i" >> …...
嵌入式L6计算机网络
Telnet不加密 socket是应用层和下面的内核...
大型语言模型演变之路:从Transformer到DeepSeek-R1
大型语言模型的崛起被认为是人工智能领域的一次革命,从2017年Transformer架构的引入开始,到2025年DeepSeek-R1的推出,每一步都在不断改变着人机交互的方式,推动着学术界与产业界的深度融合。 1. Transformer的引领(201…...
Idea配置注释模板
一、配置类注释模板 打开IDEA,打开settings(快捷键:Ctrl Alt s),选择Editor,找到File and Code Templates 这里以设置class文件为例,点击Class,在右侧配置以下内容 #if (${PACKAGE_NAME} && $…...
通过计费集成和警报监控 Elasticsearch Service 成本
作者:来自 Elastic Alexis Charveriat 使用 Elasticsearch 服务计费集成来跟踪、定制和提醒 Elasticsearch 服务费用。 监控和管理你的Elasticsearch服务(ESS)使用情况和成本对高效运营至关重要。 Elasticsearch服务计费集成提供了一种简化的…...
50.xilinx fir滤波器系数重加载如何控制
, 注意:matlab量化后的滤波器系数为有符号数,它是以补码形式存储的,手动计算验证时注意转换为负数对应数值进行计算。...
每日一题——接雨水
接雨水问题详解 视频学习推荐 建议先参考以下视频进行学习: 问题描述 给定一个非负整数数组 height,表示每个宽度为 1 的柱子的高度图。计算按此排列的柱子,下雨之后能接多少雨水。 示例 示例 1: 输入:height …...
【Flink银行反欺诈系统设计方案】1.短时间内多次大额交易场景的flink与cep的实现
【flink应用系列】1.Flink银行反欺诈系统设计方案 1. 经典案例:短时间内多次大额交易1.1 场景描述1.2 风险判定逻辑 2. 使用Flink实现2.1 实现思路2.2 代码实现2.3 使用Flink流处理 3. 使用Flink CEP实现3.1 实现思路3.2 代码实现 4. 总结 1. 经典案例:短…...
【15】蚂蚁链产品与服务
15-1 蚂蚁链一体机 蚂蚁链一体机概述 蚂蚁链一体机是深度融合软硬件技术、针对区块链技术特色打造的软硬一体化服务器。面对区块链技术落地中的性能、安全和隐私等技术挑战,结合自主硬件技术,打造了高性能、强隐私和高安全的软硬件一体化服务器&#x…...
DeepSeek:如何通过自然语言生成HTML文件与原型图?
在当今快节奏的开发与设计环境中,快速生成HTML文件或原型图是每个开发者与设计师的迫切需求。虽然DeepSeek无法直接生成图片,但它却能够通过自然语言生成流程图、原型图以及交互式页面,甚至可以直接输出HTML代码。本文将详细介绍如何与DeepSe…...
【JAVA架构师成长之路】【持久层】第2集:SQL常用优化手段
课程标题:SQL常用优化手段——15分钟快速提升数据库性能 目标:掌握10+核心SQL优化技巧,解决慢查询、高负载等生产问题 0-1分钟:优化核心原则——减少数据扫描量 本质逻辑:通过索引、分页、过滤条件等手段,最小化磁盘I/O和内存计算。 反例:SELECT * FROM orders(全表扫…...
文件上传和下载前后端交互逻辑
上传】 1、后端给前端一个上传接口:进行文件上传,上传成功后,该接口返回文件的路径,名称,id 2、表单提交接口,提交表单时,将文件的id和表单信息一块提交给后台,实现文件和表单的绑…...
全向广播扬声器在油气田中的关键应用 全方位守护安全
油气田作为高风险作业场所,安全生产始终是重中之重。在紧急情况下,如何快速、有效地传达信息,确保人员安全撤离,是油气田安全管理的关键环节。全向广播扬声器凭借其全方位覆盖、高音质输出和强大的环境适应性,成为油气…...
PHP之运算符
在你有别的编程语言的基础下,你想学习PHP,可能要了解的一些关于运算符的信息。 三元运算符,短径求值,为空判断 echo 1 ? "b" : "c";//第一个为真时返回第一个,为假时返回第二个 echo 1 ?: &qu…...
hive之lag函数
从博客上发现两个面试题,其中有个用到了lag函数。整理学习 LAG 函数是 Hive 中常用的窗口函数,用于访问同一分区内 前一行(或前 N 行)的数据。它在分析时间序列数据、计算相邻记录差异等场景中非常有用。 一、语法 LAG(column,…...
3427. 变长子数组求和
给你一个长度为 n 的整数数组 nums 。对于 每个 下标 i(0 < i < n),定义对应的子数组 nums[start ... i](start max(0, i - nums[i]))。 返回为数组中每个下标定义的子数组中所有元素的总和。 子数组 是数组中…...
RabbitMQ 2025/3/5
高性能异步通信组件。 同步调用 以支付为例: 可见容易发生雪崩。 异步调用 以支付为例: 支付服务当甩手掌柜了,不管后面的几个服务的结果。只管库库发,后面那几个服务想取的时候就取,因为消息代理里可以一直装&#x…...
C#+Halcon 检测稳定性提升的方式
前言 众所周知,C#是一个带垃圾回收机制的语言,开发过程中不需要考虑垃圾回收,你就可劲造吧。但我们在设计图像处理软件时,应时刻对图像等大内存资源进行管控,做到自行管控,及时释放,不应将其交…...
第一个Hadoop程序
编写和运行第一个 Hadoop 程序是学习 Hadoop 的重要步骤。以下是一个经典的“WordCount”程序示例,它统计文本文件中每个单词出现的次数。我们将使用 Java 编写 MapReduce 程序,并在 Hadoop 集群上运行它。 一、WordCount 程序概述 WordCount 是 Hadoo…...
Leetcode 378-有序矩阵中第 K 小的元素
给你一个 n x n 矩阵 matrix ,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素。 请注意,它是 排序后 的第 k 小元素,而不是第 k 个 不同 的元素。 你必须找到一个内存复杂度优于 O(n2) 的解决方案。 示例 1࿱…...
python之爬虫入门实例
链家二手房数据抓取与Excel存储 目录 开发环境准备爬虫流程分析核心代码实现关键命令详解进阶优化方案注意事项与扩展 一、开发环境准备 1.1 必要组件安装 # 安装核心库 pip install requests beautifulsoup4 openpyxl pandas# 各库作用说明: - requests&#x…...
第一个 C++ 程序
文章目录 “Hello, World!” 程序代码示例程序基本结构详细解释头文件(#include <iostream>)命名空间(std)主函数(int main())输出语句(std::cout << "Hello, World!" &l…...
深度学习篇---不同框架下的图像通道
文章目录 前言一、核心概念NCHWNHWCCHW 二、主流框架的通道顺序1.PyTorch默认格式特点调整方法 2.TensorFlow默认格式特点调整方法 3.Keras默认格式特点 4.PaddlePaddle默认格式特点调整方法 5.MXNet默认格式调整方法 6.ONNX默认格式特点 三、通道顺序的影响性能差异NCHWNHWC 框…...
在 C++ 中,通常会使用 `#define` 来定义宏,并通过这种方式发出警告或提示。
在 C++ 中,通常会使用 #define 来定义宏,并通过这种方式发出警告或提示。 如何实现 GBB_DEPRECATED_MSG 宏: 你可以通过以下方式定义一个宏,显示弃用警告: #include <iostream>// 定义一个宏,用来打印弃用警告 #define GBB_DEPRECATED_MSG(msg...
10x Research:Secured Finance 基于 FIL 的美元稳定币如何推动 Filecoin 生态系统发展
“众多与 Filecoin 数据进行互动的参与者,将从全新灵活性与金融化的体系中受益。” 在 10X Research 的最新研究内容中,揭示了在 Filecoin 生态系统内推出以美元计价的稳定币为用户带来的巨大增益。 Filecoin 是 Web3 中增长最快的平台之一,…...
解决Spring Boot中LocalDateTime返回前端数据为数组结构的问题
在Spring Boot开发中,处理日期时间数据是一个常见的需求。Java 8 引入了新的日期时间API,如LocalDateTime,它提供了更强大的日期时间处理功能。然而,在将LocalDateTime对象序列化为JSON时,可能会遇到返回为数组结构的问…...
【Linux】进程间通信 续
目录 管道的原理(匿名管道) 核心原理 站在内核的角度看管道的本质 接口 创建管道文件 代码示例 管道的特征 管道读写端的四种情况 管道的应用场景 命令行的管道。 使用管道实现进程池 初始化 控制子进程 退出 命名管道 命名管道的理解 …...