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