HTML基础总结
一、简介
HTML(HyperText Markup Language)即超文本标记语言,是用于创建网页的标准标记语言。它通过使用各种标签来定义网页的结构和内容,告诉浏览器如何显示网页。HTML 文档由标签和文本组成,标签用于描述文本的性质和结构。
二、发展历程
HTML 的发展恰似一部波澜壮阔的史诗,历经多个重要阶段:
2.1 起源阶段(1989 - 1995)
1989 年,蒂姆・伯纳斯・李发明了 HTML,最初的版本非常简单,主要用于定义文本的标题、段落和链接等基本元素。1995 年,HTML 2.0 发布,开始被广泛认可,增加了表格、表单和图像等功能。
2.2 快速发展阶段(1996 - 1999)
HTML 3.2 和 HTML 4.0 相继推出。HTML 3.2 引入了更多的标签和属性,如字体样式、颜色、列表样式等。HTML 4.0 则引入了样式表(CSS)概念,实现了网页样式和布局与内容的分离,同时增加了框架、表单验证等新特性。
2.3 标准化与稳定阶段(2000 - 2008)
W3C 致力于推动 HTML 的标准化,确保不同浏览器和设备能正确显示网页。HTML 在各个领域广泛应用,发展较为稳定。
2.4 HTML5 时代(2008 年至今)
2008 年开始制定 HTML5 标准,引入了视频、音频、画布、本地存储、离线应用等众多新功能,极大地提升了网页的多媒体和交互效果。2014 年 HTML5 正式发布后,迅速成为网页开发主流标准,各大浏览器厂商纷纷支持。
三、基本结构标签
前面我们了解到HTML是通过各种标签来定义网页的结构与内容,下面通过一个简单的示例让我们来了解组成网页的基本结构有哪些:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页的标题</title>
</head>
<body>网页展示的内容
</body>
</html>
<!DOCTYPE html>:此乃声明文档类型为 HTML5,是 HTML5 文档的标准开篇之笔。<html>:作为根元素,犹如一座宏伟的大厦,包含着整个网页的丰富内容。<head>:头部元素恰似大厦的顶层设计,包含网页的元数据,如字符编码、标题、样式表链接、脚本链接等。其中,<meta charset="UTF-8">用于指定网页的字符编码为 UTF-8,确保网页能够精准无误地显示各种字符。<title>:这个标签犹如大厦的铭牌,定义了网页的标题,骄傲地展示在浏览器的标题栏上。<body>:主体元素仿佛大厦的主体结构,包含网页的实际内容。
3.1 head头部标签
被head标签包裹的子标签内容犹如幕后英雄,不会在网页上直接显现。它们主要用于存放外部资源链接地址以及进行网页相关配置等。
常用标签:meta、title、style、script、link等;这些标签含义信息在之后会有专门总结,这里只是简单罗列增加印象。
3.2 body主体标签元素
body标签包裹的子标签内容则是舞台上的主角,会全部展现在界面之上,主要负责排版页面结构信息。
常用标签:h1~h6、p、div、ul、img、a、input、table等
3.3 标签注释
在 HTML 的世界里,注释就像是贴心的备注。可以使用注释来记录代码的用途和解释,它们犹如隐藏在代码背后的智慧之声,虽不会在浏览器中显示,却为开发者提供了极大的便利。注释的格式为 <!-- 注释内容 -->。
<!--<div>被注释的内容</div> -->
<div>正常展示内容</div>
四、HTML标签属性
标签如同拥有魔法口袋的精灵,可以具有属性。属性为标签提供了额外的信息,就像是为精灵赋予了特殊的能力。例如,<img src="image.jpg" alt="图片描述">中的 src 和 alt 就是 <img> 标签的属性。属性通常以 “属性名 = 属性值” 的形式出现。
每个标签都可以设置特定属性,也可以自定义属性,这个后面会专门总结整理;敬请期待。
五、总结
HTML 基础语法是网页开发的基石。通过掌握 HTML 的基本结构、常用标签和属性,以及如何添加注释,可以创建出结构清晰、内容丰富的网页。随着不断的学习和实践,可以打造出更加精彩的网页内容。
相关文章:
HTML基础总结
一、简介 HTML(HyperText Markup Language)即超文本标记语言,是用于创建网页的标准标记语言。它通过使用各种标签来定义网页的结构和内容,告诉浏览器如何显示网页。HTML 文档由标签和文本组成,标签用于描述文本的性质…...
EXCELL中如何两条线画入一张图中,标记坐标轴标题?
1,打开excel,左击选中两列, 2,菜单栏>“插入”>”二维折线图”选中一个 3,选中出现的两条线中的一条右击>最下一行,“设置数据系列格式” 4,右测“系列选项中”>点击“次坐标轴” 5…...
Zabbix企业级分布式监控环境部署
“运筹帷幄之中,决胜千里之外”。在IT运维中,监控占据着重要的地位,按比例来算,说占30%一点也不为过。对IT运维工程师来说,构建一个真正可用的监控告警系统是一项艰巨的任务。在监控系统的开源软件中,可供选…...
水轮发电机油压自动化控制系统解决方案介绍
在现代水电工程中,水轮机组油压自动化控制系统,不仅直接关系到水轮发电机组的安全稳定运行,还影响着整个水电站的生产效率和经济效益。 一、系统概述 国科JSF油压自动控制系统,适用于水轮发电机组调速器油压及主阀(蝶…...
今天不分享技术,分享秋天的故事
引言 这个爱情故事好像是个悲剧,你说的是婚姻。爱情没有悲剧,对爱者而言,爱情怎么会是悲剧呢。对春天而言,秋天是它的悲剧吗。结尾是什么,等待,之后呢,没有之后。或者说,等待的结果…...
转录组上游分析流程(三)
环境部署——数据下载——查看数据(非质控)——数据质控——数据过滤(过滤低质量数据) 测序得到的原始序列含有接头序列和低质量序列,为了保证信息分析的准确性,需要对原始数据进行质量控制,得到高质量序列(Clean Reads),原始序列…...
excel判断某一列(A列)中的数据是否在另一列(B列)中
如B列如果有7个元素,在A列右边的空白列中,输入如下公式: COUNTIF($B$1:$B$7,A1), 其中,$B$1:$B$7代表A列中的所有数据即绝对范围,A1代表B列中的一个单元格....
[环境配置]macOS上怎么查看vscode的commit id
macOS的commit id和windows上有点不一样,windows可以在帮助-关于查看 macOS则需要再左边第一个查看...
.net framework 3.5sp1组件安装进度条不动启动错误怎么解决
安装.NET Framework 3.5 SP1通常需要管理员权限。这是因为安装过程可能需要修改系统文件和注册表项,这些操作通常需要管理员权限才能执行。在Windows系统上,安装.NET Framework 3.5 SP1通常通过控制面板中的“启用或关闭Windows功能”选项进行࿰…...
学习threejs,利用THREE.ExtrudeGeometry拉伸几何体实现svg的拉伸
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.ExtrudeGeometry拉伸…...
大模型之三十二-语音合成TTS(coqui) 之二 fine-tune
在 大模型之三十-语音合成TTS(coqui)[shichaog CSDN]中提到了xttsv2的fine-tune。 数据情况: 我是从bilibili up主小Lin说提取了一些视频,然后进行了重新的fine-tune。 训练结果 如下图所示,上面波形幅度较大的是xttsv2原始模型的结果&am…...
JVM的内存模型是什么,每个区域的作用是什么,以及面试题(含答案)
JVM(Java 虚拟机)内存模型定义了 Java 程序在运行时如何分配、管理和优化内存。JVM 内存模型主要分为几个关键区域,每个区域有特定的作用: JVM 内存模型 堆内存(Heap): 作用:用于存…...
《设计模式三》Java代理模式实现
Java代理模式实现 静态代理实现 // Subject.java // 主题接口,定义了请求方法 public interface Subject {void request(); }// RealSubject.java // 真实主题实现类,实现了Subject接口 public class RealSubject implements Subject {Overridepublic …...
vue3中计算属性的用法以及使用场景
在 Vue 3 中,计算属性(computed properties)是一种基于依赖项动态计算并缓存的响应式数据。它与 Vue 2 中的计算属性类似,但在组合式 API 中使用 computed 函数来定义。计算属性的核心优势在于能够自动缓存计算结果,仅…...
pytorh学习笔记——cifar10(六)MobileNet V1网络结构
基础知识储备: 一、深度可分离卷积(Depthwise Separable Convolution) MobileNet的核心是深度可分离卷积(Depthwise Separable Convolution),深度可分离卷积是卷积神经网络(CNN…...
报表系统-连接数据库操作
本专栏用于解析自己开源的项目代码,作为复盘和学习使用。欢迎大家一起交流 本样例说明源码开源在: ruoyi-reoprt gitee仓库 ruoyi-report github仓库 欢迎大家到到项目中多给点star支持,对项目有建议或者有想要了解的欢迎一起讨论 连接数据库…...
[计算机网络] 常见端口号
前言 常见的端口号是指互联网协议(如TCP/IP)中预留给特定服务使用的数字范围。它们主要用于标识网络应用程序和服务,并帮助数据包在网络中找到正确的接收方。 按协议类型划分 TCP协议端口: 21:FTP文件传输协议2…...
Linux系统块存储子系统分析记录
1 Linux存储栈 通过网址Linux Storage Stack Diagram - Thomas-Krenn-Wiki-en,可以获取多个linux内核版本下的存储栈概略图,下面是kernel-4.0的存储栈概略图: 2 存储接口、传输速度 和 协议 2.1 硬盘 《深入浅出SSD:固态存储核心…...
大数据——本地威胁检测的全球方法
大数据似乎是众多专业人士关注的话题,从在自然灾害发生时帮助挽救生命,到帮助营销团队设计更有针对性的策略以接触新客户。 对于安全工程师来说,大数据分析被证明是抵御不断演变的网络入侵的有效防御手段,这得益于基于大量不同网…...
使用postman接口测试
一 、postman断言 1、什么是断言 postman 断言借助JavaScript -js 语言编写代码,自动判断预期结果与实际结果是否一致。 断言代码写在 Tests 的标签中。(新版本在Scripts标签中) 2、断言工作原理 3、常用断言 断言响应状态码 // 断言响应状态码 是否为 200 pm.…...
基于agent-foundry框架构建智能体:从核心原理到天气助手实战
1. 项目概述:从零构建你的智能体开发框架最近在GitHub上看到一个挺有意思的项目,叫hebertzhu/agent-foundry。乍一看名字,你可能会觉得这又是一个跟风大语言模型热潮的“又一个Agent框架”。但当我真正深入去研究它的代码结构、设计理念和实际…...
联邦学习与RAG融合:构建隐私保护的分布式智能问答系统
1. 项目概述:当联邦学习遇上检索增强生成最近在折腾一个挺有意思的开源项目,叫fed-rag,来自 Vector Institute。光看名字,老司机们大概就能猜出个七七八八了:这玩意儿是把联邦学习和检索增强生成给揉到一块儿去了。我花…...
5月17日搜狐科技年度论坛将启,近三十位嘉宾共探科学本源与AI未来
搜狐科技论坛:汇聚顶尖智慧,探索科学与AI前沿5月17日,2026搜狐科技年度论坛即将在北京盛大开幕。届时,来自科学界、学术界和产业界的近三十位嘉宾将齐聚一堂,共同探索基础科学的奥秘,解答人工智能带来的时代…...
Starter计划配额耗尽预警失效?我们逆向解析其API响应头,发现3个未文档化的速率控制暗门
更多请点击: https://intelliparadigm.com 第一章:Starter计划配额耗尽预警失效?我们逆向解析其API响应头,发现3个未文档化的速率控制暗门 在对 Starter 计划的 API 调用行为进行深度监控时,我们观察到配额耗尽告警频…...
十年后,编程还会是人类的工作吗?
一个正在被重写的职业剧本站在2026年的中点眺望2036年,没有人能准确预言未来。但作为软件测试从业者,我们或许是离“编程工作是否会被取代”这个答案最近的一群人。因为我们每天的工作,就是审视代码的边界、挖掘逻辑的漏洞、评估系统的风险。…...
ARM GIC中断控制器架构与关键寄存器详解
1. ARM GIC中断控制器架构概述ARM通用中断控制器(GIC)是现代ARM处理器中负责中断管理的核心组件,它实现了复杂的中断分发和处理机制。GIC架构从v2版本发展到现在的v4版本,功能不断增强,支持多核处理、虚拟化扩展和安全隔离等高级特性。GIC主要…...
2026金铲铲之战电脑版模拟器实测:选对模拟器轻松上分
一、实测前提说明作为拥有三年游玩经验的金铲铲之战老弈士,从手机端切换到电脑端游玩后,大屏在阵容运营、棋子对位、选秀博弈上的优势十分突出:手机小屏不仅看不清棋子星级、装备细节,频繁触屏操作还容易误触卖错棋子、放错站位&a…...
Faust.js实战:用Next.js构建高性能Headless WordPress前端
1. 项目概述:当WordPress遇见现代前端如果你和我一样,在过去几年里深度参与过企业级WordPress项目,那你一定对那个经典的“两难困境”记忆犹新:一方面,WordPress的后台管理体验和内容生态无可匹敌,是内容团…...
2026设备管理系统选型标准(技术向):8大核心维度,适配信创+全行业场景
对于企业IT运维、采购人员而言,设备管理系统选型需兼顾技术适配、合规要求、落地效率与长期扩展性。本文从技术与实践角度,梳理出8大核心选型标准,重点覆盖独享云部署、Excel导入能力、自定义扩展、信创适配等关键维度,为技术选型…...
长期使用Taotoken的Token Plan套餐在项目开发成本控制上的实际感受
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 长期使用Taotoken的Token Plan套餐在项目开发成本控制上的实际感受 1. 从按需付费到计划用量的转变 在AI应用开发的早期阶段&…...
