【前端】【HTML】【总复习】一万六千字详解HTML 知识体系
🌐 HTML 知识体系
一、HTML 基础入门
1. HTML 简介与作用
HTML(HyperText Markup Language,超文本标记语言)是构建网页的基础语言。它的核心作用是:
- 定义网页内容的结构(标题、段落、图片、表格等)
- 提供语义化标签,帮助搜索引擎与辅助设备理解页面内容
- 配合 CSS 实现页面样式、配合 JS 实现交互功能
简而言之:HTML 是网页的骨架。
2. HTML 文件结构
一个完整的 HTML 页面通常包含以下基本结构:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>我的网页</title></head><body><h1>Hello HTML!</h1></body>
</html>
核心组成:
元素 | 作用 |
---|---|
<!DOCTYPE> | 声明 HTML5 文档类型,浏览器按标准模式解析 |
<html> | 根元素,包含整个页面内容 |
<head> | 页面头部信息(元数据、引入资源) |
<body> | 页面可见内容 |
3. 常见开发工具与编辑器推荐
开发 HTML 网页时,推荐使用以下编辑器(支持语法高亮、自动补全):
- VS Code(推荐,轻量强大)
- Sublime Text
- WebStorm(功能强大,适合大型项目)
- Notepad++(轻量基础)
💡 大多数现代浏览器也提供了强大的开发者工具(DevTools)用于调试页面结构和样式。
4. 标签命名规范与大小写约定
HTML 标签命名建议遵循以下规范:
- 小写书写标签名(HTML5 标准推荐)
✅ 正确:<div>
,<h1>
;❌ 错误:<DIV>
,<H1>
- 使用语义化标签(如
<header>
、<article>
)提升代码可读性与 SEO - 合理嵌套标签,避免结构混乱
- 属性值建议使用 双引号包裹,例如:
class="title"
二、常用基础标签
HTML 提供了多种语义清晰的标签,用于表达不同类型的内容结构。以下是最常用的一类基础标签。
1. 文本内容标签
标签 | 作用描述 |
---|---|
<h1> ~<h6> | 标题标签,<h1> 为最高级标题 |
<p> | 段落 |
<span> | 行内文本容器(无语义) |
<strong> | 强调内容(加粗 + 语义) |
<em> | 强调语气(斜体 + 语义) |
<br> | 换行(单标签) |
<hr> | 分隔线(单标签) |
<h2>HTML 是什么?</h2>
<p><strong>HTML</strong> 是网页的结构语言。</p>
<span>这是一段内联文字。</span>
2. 超链接标签 <a>
标签用于创建超链接,允许用户从一个页面跳转到另一个页面,或者执行其他操作,如跳转到锚点、拨打电话、发送邮件等。
基本用法
<a href="https://www.example.com" target="_blank">访问官网</a>
href
: 必须属性,指定链接目标地址,可以是一个网页的 URL,或者是一个相对路径。target="_blank"
: 可选属性,指定在新窗口或新标签页打开链接。常用于外部链接。download
: 可选属性,表示点击链接时下载指定资源,而不是直接打开该资源。
常见属性
href
: 设置链接的目标地址。- 例如,跳转到一个网页:
<a href="https://www.example.com">官网</a>
- 跳转到页面中的锚点:
<a href="#section1">跳到第一个部分</a>
- 例如,跳转到一个网页:
target
: 控制链接打开的方式。_blank
: 在新窗口或标签页中打开链接。_self
(默认):在同一窗口或标签页中打开链接。_parent
: 在父窗口中打开链接。_top
: 在整个浏览器窗口中打开链接。
rel
: 用来指定与目标文档之间的关系。通常与target="_blank"
一起使用,用来增强安全性。- 例如:
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">官网</a>
noopener
: 防止新页面通过window.opener
访问原始页面。noreferrer
: 防止传递 HTTP Referer 头。
- 例如:
download
: 表示点击链接时触发文件下载,而不是跳转到该文件。- 例如:
<a href="file.pdf" download="filename.pdf">下载 PDF</a>
- 例如:
tel
: 用于拨打电话。- 例如:
<a href="tel:+123456789">拨打电话</a>
- 例如:
mailto
: 用于打开用户的邮件客户端并创建一个新邮件。- 例如:
<a href="mailto:someone@example.com">发送邮件</a>
- 例如:
锚点链接
- 用于在当前页面中定位到特定部分。
<!-- 锚点目标 -->
<h2 id="section1">第一个部分</h2><!-- 锚点链接 -->
<a href="#section1">跳转到第一个部分</a>
多重用途
- 链接到电子邮件:
<a href="mailto:someone@example.com">发送邮件</a>
- 链接到电话号码:
<a href="tel:+1234567890">拨打电话</a>
无链接的 <a>
标签
如果不为 href
属性指定值,<a>
标签仍然可以用作其他目的,如 JavaScript 事件监听:
<a href="#" onclick="alert('按钮点击')">点击我</a>
注意:
href="#"
常用于 JavaScript 操作中,但不建议过度使用,因为这会导致页面滚动到顶部或产生不必要的行为。
3. 图片与媒体标签
图片 <img>
<img src="logo.png" alt="网站Logo" width="100" loading="lazy" />
src
: 图片路径alt
: 替代文本(无图时代替显示)width/height
: 控制图片尺寸loading="lazy"
: 启用图片懒加载,图片只有在进入可视区域时才会加载
图片懒加载(Lazy Loading)
使用 loading="lazy"
属性可以实现图片懒加载,优化页面的加载性能,减少不必要的请求。只有当图片滚动到视口时才会加载,从而加速页面初始加载。
注意:
loading="lazy"
是 HTML5 中新增的属性,现代浏览器(如 Chrome、Firefox、Edge)支持它。但老版本的浏览器可能不支持该功能,可以通过 JavaScript 或第三方库(如lazysizes
)来实现懒加载。
音频 <audio>
<audio controls src="music.mp3"></audio>
视频 <video>
<video controls width="300"><source src="movie.mp4" type="video/mp4" />浏览器不支持该视频。
</video>
4. 列表标签
- 无序列表
<ul>
+<li>
- 有序列表
<ol>
+<li>
- 定义列表
<dl>
+<dt>
(术语)+<dd>
(定义)
<ul><li>苹果</li><li>香蕉</li>
</ul><ol><li>第一步</li><li>第二步</li>
</ol><dl><dt>HTML</dt><dd>网页的结构</dd>
</dl>
5. 表格标签
标签 | 作用 |
---|---|
<table> | 表格容器 |
<tr> | 表格行 |
<td> | 单元格 |
<th> | 表头单元格 |
<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td
相关文章:
【前端】【HTML】【总复习】一万六千字详解HTML 知识体系
🌐 HTML 知识体系 一、HTML 基础入门 1. HTML 简介与作用 HTML(HyperText Markup Language,超文本标记语言)是构建网页的基础语言。它的核心作用是: 定义网页内容的结构(标题、段落、图片、表格等)提供语义化标签,帮助搜索引擎与辅助设备理解页面内容配合 CSS 实现…...
支持向量机与逻辑回归的区别及 SVM 在图像分类中的应用
支持向量机与逻辑回归的区别及 SVM 在图像分类中的应用 在机器学习的多元算法领域中,支持向量机(SVM)和逻辑回归(LR)作为两种经典的监督学习算法,被广泛应用于各类分类任务。尽管它们有着相似的目标&#…...
MySQL基础面试题集锦
MySQL基础面试题集锦 一、SQL基础语法 1. 数据库和表操作 -- 创建数据库 CREATE DATABASE test_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;-- 创建表 CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50) NOT NULL UNIQUE,email VARCH…...
【网络分析工具】网络工具wireshark、TCPdump、iperf使用详解
这里写目录标题 1. wireshark1.1. 过滤包1.2. 常见分析 2. tcpdump3. iperf 1. wireshark **ip.dst eq 10.0.0.21** 是用于网络流量分析工具(例如 Wireshark 或 tcpdump)的过滤器表达式。 它的作用是筛选出所有目标IP地址为 10.0.0.21 的数据包 IP.add…...
【漫话机器学习系列】253.超平面(Hyperplane)
超平面(Hyperplane)详解:从二维到高维空间 在机器学习、深度学习、支持向量机(SVM)等领域中,经常会遇到一个重要的数学概念——超平面(Hyperplane)。但超平面究竟是什么?…...
#微调重排序模型:Reranking从入门到实践
🧠 向所有学习者致敬! “学习不是装满一桶水,而是点燃一把火。” —— 叶芝 我的博客主页: https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区! 🚀 让我们一起努力,共创…...
vector 常见用法及模拟
文章目录 1. vector的介绍与使用1.1 vector的构造1.2 vector iterator 的使用1.3 有关大小和容量的操作1.4 vector 增删查改1.5 vector 迭代器失效问题(重点)1.6 vector 中二维数组的使用 2. vector 的模拟实现2.1 拷贝构造和赋值重载的现代写法2.2 memc…...
可变参数模板
引入:为什么会有可变参数模板? 在C98/03中,也就是我们之前学的类模版和函数模版中只能含固定数量的模版参数,而C11中新增的可变参数模板能够不固定数量的模版参数! 一:可变参数模板的格式 // Args是一个模板…...
缓存(5):常见 缓存数据淘汰算法/缓存清空策略
主要的三种缓存数据淘汰算法 FIFO(first in first out):先进先出策略,最先进入缓存的数据在缓存空间不够的情况下(超出最大元素限制)会被优先被清除掉,以腾出新的空间接受新的数据。策略算法主要比较缓存元素的创建时…...
深入了解linux系统—— 自定义shell
shell的原理 我们知道,我们程序启动时创建的进程,它的父进程都是bash也就是shell命令行解释器; 那bash都做了哪些工作呢? 根据已有的知识,我们可以简单理解为: 输出命令行提示符获取并解析我们输入的指令…...
【通讯录教程】如何将号码快速导入手机通讯录,支持苹果和安卓手机,一次性导入大量号码进入手机通讯录,基于WPF的解决方案
以下是一个基于WPF的解决方案,用于将大量号码快速导入苹果和安卓手机通讯录: 项目应用场景 企业员工通讯录批量导入:HR需要将数百名员工的联系方式快速导入公司手机客户关系管理:销售人员需要将大量客户信息导入…...
Git初始化相关配置
Git配置 在Git安装完成后,windows操作系统上会多出一个Git Bash的软件,如果是linux或者是macOS,那么直接打开终端,在终端中敲击命令即可 # 检查git版本 git -v # 或 git --version在使用git时,需要配置一下用户名和邮…...
n8n中订阅MQTT数据
第一步:创建mqtt登录证证 第二步:创建mqtt trigger组件,并配置凭证和订阅主题 第三步:创建Code节点,编写格式转换代码 第四步:创建转发MQTT节点,并配置MQTT凭证 第五步:启用工作流 整…...
Docker、ECS 与 K8s 网段冲突:解决跨服务通信中的路由问题
🧩 问题背景 在阿里云的项目中,在项目初期搭建过程中遇到了一个让人头疼的网络冲突问题:同一个 VPC 中的 Docker 容器和 Kubernetes 集群由于使用相同的网段,导致k8s pod连接ECS容器之间的网络连接失败。 背景环境: …...
《智能网联汽车 自动驾驶系统设计运行条件》 GB/T 45312-2025——解读
目录 1. 标准概述 2. 核心概念 3. 标准核心内容 3.1 一般要求 3.2 ODC基础元素层级 3.3 ODC元素具体要求 3.4 附录A(ODC示例) 4. 技术挑战与实施建议 5. 标准意义 原文链接:国家标准|GB/T 45312-2025 (发布:2…...
AARRR用户增长模型(海盗指标)详解
目录 一、模型起源与概述二、五大阶段详解1. 获取(Acquisition)1.1 定义1.2 关键指标 2. 激活(Activation)2.1 定义2.2 关键指标 3. 留存(Retention)3.1 定义3.2 关键指标3.3 提升留存手段案例3.4 互联网留…...
CSS专题之自定义属性
前言 石匠敲击石头的第 12 次 CSS 自定义属性是现代 CSS 的一个强大特性,可以说是前端开发需知、必会的知识点,本篇文章就来好好梳理一下,如果哪里写的有问题欢迎指出。 什么是 CSS 自定义属性 CSS 自定义属性英文全称是 CSS Custom Proper…...
JVM——Java字节码基础
引入 Java字节码(Java Bytecode)是Java技术体系的核心枢纽,所有Java源码经过编译器处理后,最终都会转化为.class文件中的字节码指令。这些指令不依赖于具体的硬件架构和操作系统,而是由Java虚拟机(JVM&…...
【React中useRef钩子详解】
一、useRef的核心特性 useRef是React提供的Hook,用于在函数组件中创建可变的持久化引用,具有以下核心特性: 持久化存储 返回的ref对象在组件整个生命周期内保持不变,即使组件重新渲染,current属性的值也不会丢失。无触发渲染 修改ref.current的值不会导致组件重新渲染,适…...
《AI大模型应知应会100篇》第58篇:Semantic Kernel:微软的大模型应用框架
第58篇:Semantic Kernel:微软的大模型应用框架 ——用C#和Python构建下一代AI应用的统一编程范式 📌 摘要 随着大模型(LLM)技术的快速发展,如何将这些强大的语言模型与传统代码系统进行无缝集成ÿ…...
ssh -T git@github.com 测试失败解决方案:修改hosts文件
问题描述 通过SSH方式测试,使用该方法测试连接可能会遇到连接超时、端口占用的情况,原因是因为DNS配置及其解析的问题 ssh -T gitgithub.com我们可以详细看看建立 ssh 连接的过程中发生了什么,可以使用 ssh -v命令,-v表示 verbo…...
c++面向对象:接口设计
一、什么是接口(Interface)? 在面向对象编程中,接口可以理解为一种“规范”或“约定”。 更具体一点: 它定义了“某个对象”应该具备哪些功能(方法、行为)但不关心这些功能的具体实现细节 用…...
[Java][Leetcode middle] 80. 删除有序数组中的重复项 II
删除重复元素,最多只保留两个 1. 计数法 第一个元素直接加入当与前一个元素相同时,计数器1,不同时计数器恢复1; 只有计数器小于2时,记录元素; public int removeDuplicates2(int[] nums) {int cnt 1;in…...
【Bluedroid】蓝牙HID DEVICE断开连接流程源码分析
蓝牙HID(Human Interface Device)的断开连接流程涉及从应用层到协议栈的多层交互。本文通过剖析Android Bluetooth协议栈代码,梳理从上层调用disconnect()到最终物理链路断开的完整流程,涵盖状态检查、消息传递、L2CAP通道关闭、资…...
嵌入式硬件篇---陀螺仪|PID
文章目录 前言1. 硬件准备主控芯片陀螺仪模块电机驱动电源其他 2. 硬件连接3. 软件实现步骤(1) MPU6050初始化与数据读取(2) 姿态解算(互补滤波或DMP)(3) PID控制器设计(4) 麦克纳姆轮协同控制 4. 主程序逻辑5. 关键优化与调试技巧(1) 传感器校准(2) PID…...
redis数据结构-07(SADD、SREM、SMEMBERS)
Redis Sets 简介:SADD、SREM、SMEMBERS Redis 集合是一种基础数据结构,可用于存储一组唯一且无序的元素。了解如何管理集合对于各种应用至关重要,从跟踪唯一访客到管理用户权限。本课将全面介绍 Redis 集合,重点介绍核心命令 SAD…...
嵌入式硬件篇---TOF|PID
文章目录 前言1. 硬件准备主控芯片ToF模块1.VL53L0X2.TFmini 执行机构:电机舵机其他 2. 硬件连接(1) VL53L0X(IC接口)(2) TFmini(串口通信) 3. ToF模块初始化与数据读取(1) VL53L0X(基于HAL库)(…...
# Anaconda3 常用命令
Anaconda3 常用命令及沙箱环境管理指南 Anaconda3 是一个强大的 Python 发行版,广泛用于数据科学、机器学习和科学计算。其核心优势在于通过 沙箱环境(Conda Environment) 实现项目隔离,避免依赖冲突。本文将介绍 Anaconda3 的常…...
嵌入式硬件篇---无线通信模块
文章目录 前言一、四种无线串口模块深度对比二、模块优缺点分析1. 蓝牙模块(HC-05)优点缺点 2. WiFi模块(ESP8266)优点缺点 3. 2.4G射频(NRF24L01)优点缺点 4. LoRa模块(SX1278)优点…...
MySQL 索引(二)
文章目录 索引理解MySQL对page做管理page的概念单个page多个page 页目录单页情况(提高page内部的查找的效率)多页情况(提高page间的查找效率)复盘一下为什么选择B树,不选择其他数据结构呢聚簇索引 VS 非聚簇索引 索引操…...
代码随想录算法训练营第六十天| 图论7—卡码网53. 寻宝
图论第七天,prim和kruskal算法,说实话都没看的很懂,有点抽象难理解,只能照着题解理解一下了。 53. 寻宝(prim) 53. 寻宝(第七期模拟笔试) 复制一下网站上的prim算法的结论 prim算…...
「OC」源码学习—— 消息发送、动态方法解析和消息转发
「OC」源码学习—— 消息发送、动态方法解析和消息转发 前言 前面我们在学习alloc源码的时候,就在callAlloc源码之中简单的探究过,类初始化缓存的问题,我们知道在一个类第一次被实例化的时候,会调用objc_msgSend去二次调用alloc…...
MySQL数据库下篇
#作者:允砸儿 #日期:乙巳青蛇年 四月十四 今天笔者将会把MySQL数据库的知识完结,再者笔者会浅写一下sql注入的内容。在后面笔者会逐渐的将网安世界徐徐展开。 php与mysql联动 编程接口 笔者在前面的文章写了php的内容,现在我…...
Linux之进程概念
目录 一、冯诺依曼体系结构 二、操作系统(Operator System) 2.1、概念 2.2、设计OS的目的 2.3、系统调用和库函数概念 三、进程 3.1、基本概念 3.1.1、描述进程-PCB 3.1.2、task_struct 3.1.3、查看进程 3.1.4、通过系统调用获取进程标识符 3.1.5、两种杀掉进程的方…...
numpy模块综合使用
一、numpy模块的综合使用方法 # 使用矩阵的好处,矩阵对于python中列表,字典等数据类型一个一个拿来计算是会方便计算很多的,底层使用的是c语言 # 在数据分析和数据处理的时候也经常常用 import numpy as np array np.array([[1,2,3],[2,3,4…...
嵌入式硬件篇---SPI
文章目录 前言1. SPI协议基础1.1 物理层特性四线制(标准SPI)SCKMOSIMISONSS/CS 三线制(半双工模式)通信模式 1.2 通信时序(时钟极性CPOL和相位CPHA)常用模式Mode 0Mode 3 1.3 典型通信流程 2. STM32F103RCT…...
【大模型】AI智能体Coze 知识库从使用到实战详解
目录 一、前言 二、知识库介绍 2.1 coze 知识库功能介绍 2.2 coze 知识库应用场景 2.3 coze 知识库类型 2.4 coze 知识库权限说明 2.5 coze 知识库与记忆对比 2.6 知识库的使用流程 三、知识库创建与使用 3.1 创建知识库入口 3.2 创建文本知识库 3.2.1 上传文件 3.…...
深度学习:系统性学习策略(二)
深度学习的系统性学习策略 基于《认知觉醒》与《认知驱动》的核心方法论,结合深度学习的研究实践,从认知与技能双重维度总结以下系统性学习策略: 一、认知觉醒:构建深度学习的思维操作系统 三重脑区协同法则 遵循**本能脑(舒适区)-情绪脑(拉伸区)-理智脑(困难区)**的…...
TikTok 推广干货:AI 加持推广效能
TikTok 推广是提升账号影响力、吸引更多关注的关键一环。其中,巧妙利用热门话题标签是增加视频曝光的有效捷径。运营者需要密切关注当下流行趋势,搜索与账号定位紧密相关的热门标签。例如,对于美妆账号而言,带上 “# 美妆教程 #热…...
滑动窗口——将x减到0的最小操作数
题目: 这个题如果我们直接去思考方法是很困难的,因为我们不知道下一步是在数组的左还是右操作才能使其最小。正难则反,思考一下,无论是怎么样的,最终这个数组都会分成三个部分左中右,而左右的组合就是我们…...
无侵入式弹窗体验_探索 Chrome 的 Close Watcher API
1. 引言 在网页开发中,弹窗(Popup)是一种常见的交互方式,用于提示用户进行操作、确认信息或展示关键内容。然而,传统的 JavaScript 弹窗方法如 alert()、confirm() 和 prompt() 存在诸多问题,包括阻塞主线程、样式不可定制等。 为了解决这些问题,Chrome 浏览器引入了 …...
牛客周赛 Round 92 题解 Java
目录 A 小红的签到题 B 小红的模拟题 C 小红的方神题 D 小红的数学题 E 小红的 ds 题 F 小红的小苯题 A 小红的签到题 直接构造类似于 a_aaaa,a_aaaaaaaa 这种 即可 // github https://github.com/Dddddduo // github https://github.com/Dddddduo/acm-java…...
DAY 17 训练
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 DAY 17 训练 聚类算法聚类评估指标介绍1. 轮廓系数 (Silhouette Score)2. CH 指数 (Calinski-Harabasz Index)3. DB 指数 (Davies-Bouldin Index) 1. KMeans 聚类算法原理确定…...
多源最短路径(Floyed)
#include <iostream> #include <vector> #include <stack> using namespace std; class Graph{ private: int vertex; //顶点数 //int** matrix; //有向图关系矩阵 int** path; //存储关系矩阵 int** pre; //存储中间节点k public: con…...
基于去中心化与AI智能服务的web3钱包的应用开发的背景描述
Web3代表了下一代互联网模式,其核心特征包括去中心化、数据主权、智能合约和区块链技术的广泛应用。根据大数据调查显示,用户希望拥有自己的数据控制权,并希望在去中心化网络中享受类似Web2的便捷体验。DeFi(去中心化金融) 生态日趋成熟的背景…...
LabVIEW车牌自动识别系统
在智能交通快速发展的时代,车牌自动识别系统成为提升交通管理效率的关键技术。本案例详细介绍了基于 LabVIEW 平台,搭配大恒品牌相机构建的车牌自动识别系统,该系统在多个场景中发挥着重要作用,为交通管理提供了高效、精准的解决方…...
C# Newtonsoft.Json 使用指南
Newtonsoft.Json (也称为 Json.NET) 是一种适用于 .NET 的常用高性能 JSON 框架,用于处理 JSON 数据。它提供了高性能的 JSON 序列化和反序列化功能。 安装 通过 NuGet 安装 基本用法 1. 序列化对象为 JSON 字符串 using Newtonsoft.Json;var product new Prod…...
Python_day22
DAY 22 复习日 复习日 仔细回顾一下之前21天的内容,没跟上进度的同学补一下进度。 作业: 自行学习参考如何使用kaggle平台,写下使用注意点,并对下述比赛提交代码 kaggle泰坦里克号人员生还预测 一、Kaggle 基础使用步骤 注册与登录…...
浏览器的B/S架构和C/S架构
浏览器的B/S架构和C/S架构 概述拓展 欢迎来到 Shane 的博客~ 心有猛虎,细嗅蔷薇。 概述 C/S架构? Client/Server架构。但是缺少通用性、系统维护、升级需要重新设计和开发,并且需要开发不同的操作系统,增加了维护和管理的难度。&…...
【C++】内存管理 —— new 和 delete
文章目录 一、C/C 内存分布二、C 语言中动态内存管理方式1. malloc / calloc / realloc / free 三、C 内存管理方式1. new / delete2. operator new 与 operator delete 函数3. new 和 delete 的实现原理(1) new 的原理(2) delete 的原理(3) new T[N] 的原理(4) delete[] 的原理…...