当前位置: 首页 > 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 的基本结构、常用标签和属性,以及如何添加注释,可以创建出结构清晰、内容丰富的网页。随着不断的学习和实践,可以打造出更加精彩的网页内容。

http://www.lryc.cn/news/468727.html

相关文章:

  • EXCELL中如何两条线画入一张图中,标记坐标轴标题?
  • Zabbix企业级分布式监控环境部署
  • 水轮发电机油压自动化控制系统解决方案介绍
  • 今天不分享技术,分享秋天的故事
  • 转录组上游分析流程(三)
  • excel判断某一列(A列)中的数据是否在另一列(B列)中
  • [环境配置]macOS上怎么查看vscode的commit id
  • .net framework 3.5sp1组件安装进度条不动启动错误怎么解决
  • 学习threejs,利用THREE.ExtrudeGeometry拉伸几何体实现svg的拉伸
  • 大模型之三十二-语音合成TTS(coqui) 之二 fine-tune
  • JVM的内存模型是什么,每个区域的作用是什么,以及面试题(含答案)
  • 《设计模式三》Java代理模式实现
  • vue3中计算属性的用法以及使用场景
  • pytorh学习笔记——cifar10(六)MobileNet V1网络结构
  • 报表系统-连接数据库操作
  • [计算机网络] 常见端口号
  • Linux系统块存储子系统分析记录
  • 大数据——本地威胁检测的全球方法
  • 使用postman接口测试
  • Ubuntu24.04双系统安装(Linux/windows共存一文打通)
  • C++ - deque
  • 国产!瑞芯微米尔RK357核心板革新AIoT设备,8核6T高算力
  • 中国人寿财险青岛市分公司践行绿色金融,助力可持续发展
  • ajax 读取文件
  • 火语言RPA流程组件介绍--开始监听网络请求
  • CSS综合案例——新闻详情
  • 【【自动驾驶】车辆运动学模型】
  • 叉尖避障新科技:因泰立科技ILS-T52三维深度成像激光雷达
  • 精华帖分享 | 低估值还能涨多久?
  • 如何制作一个自己的网站?