HTML 超文本标记语言详解-优快云博客

本文链接：https://blog.youkuaiyun.com/lan_shen/article/details/115313902

本文介绍了HTML的基本概念，包括其含义、超文本的两个方面、HTML标签的分类和关系，以及开发工具的使用。重点讲解了HTML骨架标签、文档类型<!DOCTYPE>、页面语言lang和字符集的重要性。此外，还强调了HTML标签的语义化在代码可读性和SEO优化中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML 含义

HTML 指的是超文本标记语言（Hyper Text Markup Language）是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言（Markup language）
标记语言是一套标记标签（markup tag）

所谓超文本，有2个含义：

1.因为它可以加入图片，声音，动画，多媒体等内容（超越文本限制）

2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

html 总结：

html 是超文本标记（标签）语言
学习html主要是学习html标签
用html标签描述网页元素，比如图片标签，文字标签，链接标签等等
标签有自己的语法规范，所有的html标签都是用<>表示的

1.1 HTML骨架标签

格式：

<html>
	<head>
		<title></title>
	</head>
	<body></body>
</html>

html骨架标签总结

标签名	定义	说明
	HTML标签	页面中最大的标签，称为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让页面拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

团队约定大小写

HTML标签名，类名，标签属性和大部分属性值统一用小写

1.2 HTML元素标签分类

标签：

在HTML页面中，带有“<>”符号的元素被称为HTML标签。

分类：

1常规元素（双标签）

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>”表示该标签的作用结束，一般称为“结束标签（end tag）”

2.空元素（单标签）

<标签名 />  比如 <br />

1.3 HTML 标签关系

1.嵌套关系

<head>
	<title></title>
</head>

2.并列关系

<head></head>
<body></body>

2 代码开发工具

Dreamweaver
SublimeText
WebStorm
HBuilder
VScode

生成HTML骨架小技巧

双击打开软件
新建文件（ctrl+n）
保存（ctrl+s）,保存为：文件名.html （注意后缀名必须是 .html )
放大缩小代码按住 ctrl 在滚动鼠标滚轮或者 ctrl+ 加号键和 ctrl + 减号键
生成页面骨架结构
- html: 5 按下tab键或者
- ! 按下tab键
在浏览器中预览页面
- 右键在浏览器中打开

3.文档类型<!DOCTYPE>

用法：

<!DOCTYPE html>

作用：

声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

目前浏览器是按照HTML5规范解析页面

团队约定

HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明

4.页面语言lang

<html lang="en">  指定html 语言种类

最常见的有2个：

1.en定义语言为英语

2.zh-CN定义语言为中文

@拓展阅读：

可以告诉浏览器，搜索引擎，一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。

根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
等等

5.字符集

<meta charset="UTF-8" />

字符集(Character set)是多个字符的集合。

计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字 GUO BIAO
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则基本包含全世界所有国家需要用到的字符

注意：

这个代码必须要写，否则可能会引起乱码的情况

这是让 html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容。

团队约定：

一般情况下统一使用 "UTF-8" 编码, 请尽量统一写成标准的 "UTF-8"，不要写成 "utf-8" 或 "utf8" 或 "UTF8"。

6. HTML标签的语义化

所谓标签语义化，就是指标签的含义

语义化的目的：

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化