HTML基础与前端开发概览-优快云博客

本文详细介绍了HTML的基本概念，包括其作用、结构、标签使用及属性设置，同时涵盖了前端开发的三个主要层面：结构层、样式层和行为层。此外，还探讨了HTML与XHTML的区别，以及W3C组织的角色。

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

HTML：HyperText Markup Language，搭建网页结构的超文本标记语言。HTML 文件本身是纯文本的，里面只有文字，主要是用标签对的方式为文本添加语义。

前端的三层：

结构层：使用 HTML 语言，用来搭建结构、放置组件、描述语义。
样式层：使用 CSS 语言，用来美化页面、实现布局。
行为层：使用 JavaScript 语言，用来实现交互效果、数据收发、表单验证等。

W3C 组织：W3C（The Word Wide Web Consortium，万维网联合会）是万维网的主要国际标准组织，该联盟成立于 1994 年，负责指定 Web 标准，主要是 HTML 和 CSS。

IDE：Integrated Development Environment，集成开发环境，是含代码编辑、关键词高亮、智能感应、智能纠错、格式美化、版本管理等功能于一身的高级代码编辑器。

框架是一个半成品的应用，框架直接左右了应用怎么来写，是框架的代码在调用开发者的代码。
库实现了可重用的功能，但并不能左右应用，应用可以使用这个库也可以使用那个库，是开发者的代码在调用库的代码。

可以到 https://caniuse.com/ 网站查询兼容性。

标签（标记）：

标签：HTML 用于描述功能的符号，不同的标签有不同的功能。在使用时必须使用尖括号括起来。

直接书写的文本会以浏览器默认的样式显示，包含在标签中的文本会被显示为标签所拥有的样式。

ul.nav.navbar 显示为 <ul class=”nav navbar”></ul>
li*2 显示为 <li></li> <li></li>
li>a 显示为 <li><a></a></li>

标签的类型有两种：

双标签：包含起始标签和结束标签，必须成对出现，可以包含内容，<标签>内容</标签>
单标签：只有起始标签，没有结束标签，不能包含内容，<标签>或<标签/>

在 HTML 4 中，单标签结尾必须写一个反斜杠；在 HTML 5 中，则不再需要。

用来描述标签的性质。格式为：<标签名属性名=“属性值”>内容</标签名>。

属性的声明必须位于开始标签里。每个属性都有属性值，属性与属性值之间用 = 连接，属性值用引号括住，多个属性之间不区分先后顺序，用空格隔开。

转义字符：在一个字符序列中，出现在它之后的后续几个字符采取一种替代解释。由 &实体名字; 或者 &#实体编号: 构成。

在 HTML 中输入转义字符，就会转变成相应的符号。

常见的转义字符：

文字和文字之间的多个空格、换行会被折叠成一个空格；标签内壁和文字之间的空格会被忽略。

<div>文字    文字</div> // 文字和文字之间的多个空格只显示为一个空格

<div>文字
文字</div> // 文字和文字之间的换行只显示为一个空格

<div>    文字    </div> // 标签内壁和文字之间的空格会被忽略

可以使用   转义字符在网页中增加空格。使用 <br> 换行标签来换行。

<div>文字&nbsp;&nbsp;文字</div>

<div>文字<br>文字</div>

<div>&nbsp;&nbsp;文字&nbsp;&nbsp;</div>

HTML 注释的语法：。

只在编辑文档情况下可见，在浏览器展示页面时并不会显示。注释不可以嵌套在其他注释中。

请添加图片描述

文档类型声明：在文档的起始用 <DOCTYPE> 声明指定版本和风格，让浏览器清楚文档的版本类型和风格。不写会引发浏览器的一些兼容问题。

<DOCTYPE> 不是 HTML 标签。

<!DOCTYPE> 声明：用于告知浏览器当前文档使用的是哪种文档类型，以便浏览器以正确的模式渲染页面。
DTD 文档类型定义：是一种用于定义 XML 或者 HTML 文档结构的规则集合，规定了文档中可以包含哪些元素、属性以及它们之间的层次关系等。
在 HTML4.01 中，DTD 定义了文档的规则，<!DOCTYPE> 指向 DTD；在 HTML5 中，<!DOCTYPE> 不再依赖 DTD，仅作为标识文档类型的简单声明。
HTML 页面：都放置在 <html></html> 标签对中，lang 属性表示网页的语言（en 是英文，zh 是中文）。
- 文档头: <head></head> 标签对中是网页的配置。
- 文档主体：<body></body> 标签对中是网页的内容。