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

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>
  1. <!DOCTYPE html>:此乃声明文档类型为 HTML5,是 HTML5 文档的标准开篇之笔。
  2. <html>:作为根元素,犹如一座宏伟的大厦,包含着整个网页的丰富内容。
  3. <head>:头部元素恰似大厦的顶层设计,包含网页的元数据,如字符编码、标题、样式表链接、脚本链接等。其中,<meta charset="UTF-8">用于指定网页的字符编码为 UTF-8,确保网页能够精准无误地显示各种字符。
  4. <title>:这个标签犹如大厦的铭牌,定义了网页的标题,骄傲地展示在浏览器的标题栏上。
  5. <body>:主体元素仿佛大厦的主体结构,包含网页的实际内容。

3.1 head头部标签

head标签包裹的子标签内容犹如幕后英雄,不会在网页上直接显现。它们主要用于存放外部资源链接地址以及进行网页相关配置等。

常用标签:metatitlestylescriptlink等;这些标签含义信息在之后会有专门总结,这里只是简单罗列增加印象。

3.2 body主体标签元素

body标签包裹的子标签内容则是舞台上的主角,会全部展现在界面之上,主要负责排版页面结构信息。

常用标签:h1~h6pdivulimgainputtable

3.3 标签注释

在 HTML 的世界里,注释就像是贴心的备注。可以使用注释来记录代码的用途和解释,它们犹如隐藏在代码背后的智慧之声,虽不会在浏览器中显示,却为开发者提供了极大的便利。注释的格式为 <!-- 注释内容 -->

<!--<div>被注释的内容</div> -->
<div>正常展示内容</div>

四、HTML标签属性

标签如同拥有魔法口袋的精灵,可以具有属性。属性为标签提供了额外的信息,就像是为精灵赋予了特殊的能力。例如,<img src="image.jpg" alt="图片描述">中的 srcalt 就是 <img> 标签的属性。属性通常以 “属性名 = 属性值” 的形式出现。

每个标签都可以设置特定属性,也可以自定义属性,这个后面会专门总结整理;敬请期待。

五、总结

HTML 基础语法是网页开发的基石。通过掌握 HTML 的基本结构、常用标签和属性,以及如何添加注释,可以创建出结构清晰、内容丰富的网页。随着不断的学习和实践,可以打造出更加精彩的网页内容。

相关文章:

HTML基础总结

一、简介 HTML&#xff08;HyperText Markup Language&#xff09;即超文本标记语言&#xff0c;是用于创建网页的标准标记语言。它通过使用各种标签来定义网页的结构和内容&#xff0c;告诉浏览器如何显示网页。HTML 文档由标签和文本组成&#xff0c;标签用于描述文本的性质…...

EXCELL中如何两条线画入一张图中,标记坐标轴标题?

1&#xff0c;打开excel&#xff0c;左击选中两列&#xff0c; 2&#xff0c;菜单栏>“插入”>”二维折线图”选中一个 3&#xff0c;选中出现的两条线中的一条右击>最下一行&#xff0c;“设置数据系列格式” 4&#xff0c;右测“系列选项中”>点击“次坐标轴” 5…...

Zabbix企业级分布式监控环境部署

“运筹帷幄之中&#xff0c;决胜千里之外”。在IT运维中&#xff0c;监控占据着重要的地位&#xff0c;按比例来算&#xff0c;说占30%一点也不为过。对IT运维工程师来说&#xff0c;构建一个真正可用的监控告警系统是一项艰巨的任务。在监控系统的开源软件中&#xff0c;可供选…...

水轮发电机油压自动化控制系统解决方案介绍

在现代水电工程中&#xff0c;水轮机组油压自动化控制系统&#xff0c;不仅直接关系到水轮发电机组的安全稳定运行&#xff0c;还影响着整个水电站的生产效率和经济效益。 一、系统概述 国科JSF油压自动控制系统&#xff0c;适用于水轮发电机组调速器油压及主阀&#xff08;蝶…...

今天不分享技术,分享秋天的故事

引言 这个爱情故事好像是个悲剧&#xff0c;你说的是婚姻。爱情没有悲剧&#xff0c;对爱者而言&#xff0c;爱情怎么会是悲剧呢。对春天而言&#xff0c;秋天是它的悲剧吗。结尾是什么&#xff0c;等待&#xff0c;之后呢&#xff0c;没有之后。或者说&#xff0c;等待的结果…...

转录组上游分析流程(三)

环境部署——数据下载——查看数据(非质控)——数据质控——数据过滤(过滤低质量数据) 测序得到的原始序列含有接头序列和低质量序列&#xff0c;为了保证信息分析的准确性&#xff0c;需要对原始数据进行质量控制&#xff0c;得到高质量序列(Clean Reads)&#xff0c;原始序列…...

excel判断某一列(A列)中的数据是否在另一列(B列)中

如B列如果有7个元素&#xff0c;在A列右边的空白列中&#xff0c;输入如下公式&#xff1a; COUNTIF($B$1:$B$7,A1), 其中&#xff0c;$B$1:$B$7代表A列中的所有数据即绝对范围&#xff0c;A1代表B列中的一个单元格....

[环境配置]macOS上怎么查看vscode的commit id

macOS的commit id和windows上有点不一样&#xff0c;windows可以在帮助-关于查看 macOS则需要再左边第一个查看...

.net framework 3.5sp1组件安装进度条不动启动错误怎么解决

安装.NET Framework 3.5 SP1通常需要管理员权限。这是因为安装过程可能需要修改系统文件和注册表项&#xff0c;这些操作通常需要管理员权限才能执行。在Windows系统上&#xff0c;安装.NET Framework 3.5 SP1通常通过控制面板中的“启用或关闭Windows功能”选项进行&#xff0…...

学习threejs,利用THREE.ExtrudeGeometry拉伸几何体实现svg的拉伸

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.ExtrudeGeometry拉伸…...

大模型之三十二-语音合成TTS(coqui) 之二 fine-tune

在 大模型之三十-语音合成TTS(coqui)[shichaog CSDN]中提到了xttsv2的fine-tune。 数据情况&#xff1a; 我是从bilibili up主小Lin说提取了一些视频&#xff0c;然后进行了重新的fine-tune。 训练结果 如下图所示&#xff0c;上面波形幅度较大的是xttsv2原始模型的结果&am…...

JVM的内存模型是什么,每个区域的作用是什么,以及面试题(含答案)

JVM&#xff08;Java 虚拟机&#xff09;内存模型定义了 Java 程序在运行时如何分配、管理和优化内存。JVM 内存模型主要分为几个关键区域&#xff0c;每个区域有特定的作用&#xff1a; JVM 内存模型 堆内存&#xff08;Heap&#xff09;&#xff1a; 作用&#xff1a;用于存…...

《设计模式三》Java代理模式实现

Java代理模式实现 静态代理实现 // Subject.java // 主题接口&#xff0c;定义了请求方法 public interface Subject {void request(); }// RealSubject.java // 真实主题实现类&#xff0c;实现了Subject接口 public class RealSubject implements Subject {Overridepublic …...

vue3中计算属性的用法以及使用场景

在 Vue 3 中&#xff0c;计算属性&#xff08;computed properties&#xff09;是一种基于依赖项动态计算并缓存的响应式数据。它与 Vue 2 中的计算属性类似&#xff0c;但在组合式 API 中使用 computed 函数来定义。计算属性的核心优势在于能够自动缓存计算结果&#xff0c;仅…...

pytorh学习笔记——cifar10(六)MobileNet V1网络结构

基础知识储备&#xff1a; 一、深度可分离卷积&#xff08;Depthwise Separable Convolution&#xff09; MobileNet的核心是深度可分离卷积&#xff08;Depthwise Separable Convolution&#xff09;&#xff0c;深度可分离卷积是卷积神经网络&#xff08;CNN&#xf…...

报表系统-连接数据库操作

本专栏用于解析自己开源的项目代码&#xff0c;作为复盘和学习使用。欢迎大家一起交流 本样例说明源码开源在&#xff1a; ruoyi-reoprt gitee仓库 ruoyi-report github仓库 欢迎大家到到项目中多给点star支持&#xff0c;对项目有建议或者有想要了解的欢迎一起讨论 连接数据库…...

[计算机网络] 常见端口号

前言 ​ 常见的端口号是指互联网协议&#xff08;如TCP/IP&#xff09;中预留给特定服务使用的数字范围。它们主要用于标识网络应用程序和服务&#xff0c;并帮助数据包在网络中找到正确的接收方。 按协议类型划分 TCP协议端口&#xff1a; 21&#xff1a;FTP文件传输协议2…...

Linux系统块存储子系统分析记录

1 Linux存储栈 通过网址Linux Storage Stack Diagram - Thomas-Krenn-Wiki-en&#xff0c;可以获取多个linux内核版本下的存储栈概略图&#xff0c;下面是kernel-4.0的存储栈概略图&#xff1a; 2 存储接口、传输速度 和 协议 2.1 硬盘 《深入浅出SSD&#xff1a;固态存储核心…...

大数据——本地威胁检测的全球方法

大数据似乎是众多专业人士关注的话题&#xff0c;从在自然灾害发生时帮助挽救生命&#xff0c;到帮助营销团队设计更有针对性的策略以接触新客户。 对于安全工程师来说&#xff0c;大数据分析被证明是抵御不断演变的网络入侵的有效防御手段&#xff0c;这得益于基于大量不同网…...

使用postman接口测试

一 、postman断言 1、什么是断言 postman 断言借助JavaScript -js 语言编写代码&#xff0c;自动判断预期结果与实际结果是否一致。 断言代码写在 Tests 的标签中。(新版本在Scripts标签中) 2、断言工作原理 3、常用断言 断言响应状态码 // 断言响应状态码 是否为 200 pm.…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

【SSM】SpringMVC学习笔记7:前后端数据传输协议和异常处理

这篇学习笔记是Spring系列笔记的第7篇&#xff0c;该笔记是笔者在学习黑马程序员SSM框架教程课程期间的笔记&#xff0c;供自己和他人参考。 Spring学习笔记目录 笔记1&#xff1a;【SSM】Spring基础&#xff1a; IoC配置学习笔记-CSDN博客 对应黑马课程P1~P20的内容。 笔记2…...

板凳-------Mysql cookbook学习 (十--2)

5.12 模式匹配中的大小写问题 mysql> use cookbook Database changed mysql> select a like A, a regexp A; ------------------------------ | a like A | a regexp A | ------------------------------ | 1 | 1 | --------------------------…...

C++参数传递 a与a的区别

在 C 中&#xff0c;&a&#xff08;引用&#xff09;和 a&#xff08;值传递&#xff09; 的关键区别在于 参数如何传递给函数&#xff0c;以及由此引发的 性能、语义和安全问题。 最核心的在于你想不想传入的参数被改变&#xff0c;如果想&#xff0c;就用参数传递&#…...