【HTML】文档类型与三大基础元素:先把网页的“底子”打好(附 HTML 注释用法)

📖 导读

本文主要记录 HTML 注释、文档类型声明，以及 <html>、<head>、<body> 三个基础元素：注释的写法与注意事项、文档类型的作用与新旧类型、三个元素的定义与书写格式，另附 lang 属性的常见应用。全文以概念和规范为主，配示例代码、图示、视频，适合入门查阅与复习。【卡片有深度，阅读需自选】

# 文章目录

一、HTML 注释

二、HTML 文档类型

三、HTML 三大基础元素 

注：本表为本文默认环境配置。文中涉及的软件与系统版本，若无特殊标注，均以此表为准。

✍️ 写在文前：如果这篇笔记帮到了你，不妨在右下角顺手点个 👍 赞 或者 ❤️ 推荐，当然也可以直接 ↗️ 转发 给需要的朋友~

▶进入本文正题◀

<!--  注释内容  -->

<!-- 【单行注释】注释内容 --><!--    【多行注释】注释内容-->

📝 备注 · 书写规范

●不能嵌套：因为 “<!--” 会优先与最前面的 “-->” 配对，若嵌套 HTML 注释，则注释范围会提前结束！那么其后面的注释内容会正常显示到页面上，进而导致页面内容错乱！

图 1：注释嵌套异常

●内容不能写敏感信息：因为用户可以使用浏览器开发者工具或者查看网页源代码都能看到 HTML 注释！所以自己的隐私信息（比如密码、密钥）都不建议用注释记录！

图 2 ：用户通过浏览器查看 HTML 注释（除开 VS Code 界面）

1.2 VS Code 操作技巧：一键注释

问“Ctrl + /”  一次是注释一行代码还是多行代码？

答“Ctrl+/” 是根据光标位置或者鼠标选区范围来注释代码，一次操作可以是单行，也可以是多行。

问我要如何操作才能一次性就注释掉多行代码？

答按住鼠标左键并上下拖动，让选区覆盖要注释代码的所在行，然后再按 “Ctrl + /” 来注释代码。

问我能跨行选择性的注释掉代码吗？

答先按住 “Alt” 键，然后用鼠标选着对应的行，待所有行都被标中后，再按 “Ctrl +/” 来去掉注释。

问我若要去掉代码注释呢？如何实现？

答按 “Ctrl +/” 来取消注释。取消注释的整个操作与加注释一样，只不过两者效果相反。

🔗 拓展 · HTML 注释应用

问为何要学 HTML 注释？

●说明性注释：供开发者阅读的说明文字，浏览器渲染时忽略。

图 3：说明性注释应用示例

●解析性注释：看起来像注释，但会被服务器、框架或工具识别并处理（行为因环境而异）。

图 4：解析性注释应用示例

注：上述只是便于理解的分类，非 HTML 规范术语。

二、HTML 文档类型

DOCTYPE（文档类型声明）：是 HTML 文档最顶部的一条特殊指令。

●基本书写格式

示例代码：文档类型声明基本书写格式

<!DOCTYPE html>

●位置：HTML 文档最开头（在 <html> 标签之前）

🔗 拓展 · 新旧文档类型

<!DOCTYPE html>

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

注：网页开发，一般情况只管用 HTML 5 写法就行，因为简单、方便、高效、规范！

三、HTML 三大基础元素

3.1 <html> 元素

<html> 元素：是 HTML 文档的根元素（顶级元素），也被称为文档元素。

●基本书写格式

示例代码：<html> 元素基本书写格式

<!DOCTYPE html><html><head>   <!--页面元数据 --></head><body>  <!-- 可视内容 --></body></html>

●相关说明

○整个 HTML 文档中只能有一个 <html> 元素，所有其他元素都必须是它的后代。

○<head>（元数据）与 <body>（可见内容）是它的两个直接子元素。

🔔 注意

不论 <html> 起止标签是否可省，实际开发都要写全！

🔗 拓展 · 全局属性 lang 在 <html> 下的应用

lang：是一个全局属性，用来定义元素使用的语言。此处仅罗列其在 <html> 元素上的应用。

●无障碍朗读：读屏软件据此选择对应语言的语音库和发音规则（如中文或英文发音）。

●搜索引擎（SEO）：告诉搜索引擎，网页使用的是什么语言，帮助其进行语言定向和搜索结果匹配。

●浏览器排版：影响字体回退选择、断词换行规则、引号形态等语言相关排版行为。

●翻译提示：作为浏览器判断页面语言与用户偏好语言是否一致的重要依据，决定是否提示“翻译此页”。

●拼写检查：影响拼写检查所使用的词典语言；中文页面中输入英文时，通常不会按英文词典标红。

<head>  <!-- 各种子元素 --></head>

图 5：<head> 及其子元素用法示例

图 6：<head> 子元素总览表

3.3 <body> 元素

<body>：表示 HTML 文档的主体部分，与存放元数据的 <head> 同级，是所有可见内容（比如段落、图片、标题等内容）的容器。

●基本书写格式

示例代码：<body> 基本书写格式

<body>  <!-- 可见内容 --></body>

图 7：<body> 及其子元素用法示例

✍️ 写在文后：本文为个人学习笔记，仅供参考。若有疏漏或建议，欢迎在评论区交流。

🏷️ 相关标签：#前端 #HTML #前端开发 #网页设计 #编程入门