<head>标签用于存放页面的元信息，如字符编码、标题、视口设置等，不直接显示在页面上；2. <body>标签包含所有用户可见的内容，如文本、图片、链接等；3. 常用基本标签包括<h1>到<h6>标题、<p>段落、<a>链接、<img>图片、<ul>和<ol>列表等；4. 常见错误有未闭合标签、缺少doctype声明、未设置字符编码、图片路径错误及滥用<div>；5. 最佳实践包括使用语义化标签、保持代码整洁、提供图片alt属性、使用小写标签名、外联css和js文件、添加注释并定期验证html代码。
HTML文件的基本结构可以说是一个约定俗成的骨架，它包含了声明文档类型、定义HTML内容的根元素，以及分别用于存放页面元信息和实际可见内容的两个主要区域。创建一个简单的HTML页面，本质上就是按照这个骨架，填入你想要展示的文本、图片或链接。
解决方案
一个HTML文件，或者说一个网页，最基础的模样通常是这样的：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的简单网页！</h1>
<p>这是一个段落。很高兴你看到了这里。</p>
<a href="https://www.example.com">点击这里访问一个示例网站</a>
</body>
</html>我们来拆解一下：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
：这行代码放在最顶部，它不是一个HTML标签，而是告诉浏览器，这是一个HTML5文档。没有它，浏览器可能会以“怪异模式”渲染页面，导致一些意想不到的布局问题。我个人觉得，这就像是给浏览器一个明确的信号，告诉它：“嘿，按最新的标准来！”<html lang="zh-CN">
: 这是整个HTML文档的根元素，所有其他内容都包含在它里面。lang="zh-CN"
属性告诉浏览器和搜索引擎这个页面的主要语言是中文（简体），这对于辅助技术和搜索排名都有好处。<head>
: 这个部分包含了页面的元数据，也就是关于页面的信息，而不是页面上实际显示给用户看的内容。比如：<meta charset="UTF-8">
: 定义了页面的字符编码为UTF-8，这能确保各种语言的字符都能正确显示，避免乱码。这几乎是现代网页的标配了，非常重要。<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 这是一个响应式设计的关键，告诉浏览器如何控制页面的视口（viewport）大小和缩放，让页面在不同设备上都能良好显示。<title>我的第一个HTML页面</title>
: 这是显示在浏览器标签页或窗口标题栏上的文本。它对SEO（搜索引擎优化）也很重要。
<body>
: 这个标签包含了所有可见的页面内容。你看到的所有文本、图片、视频、按钮等等，都应该放在这里。<h1>欢迎来到我的简单网页！</h1>
: 这是一个一级标题。HTML提供了h1
到h6
六个级别的标题，h1
是最重要的。<p>这是一个段落。很高兴你看到了这里。</p>
: 这是一个段落标签，用来包含普通的文本内容。<a href="https://www.example.com">点击这里访问一个示例网站</a>
: 这是一个超链接，href
属性指定了链接的目标地址。
要创建一个这样的页面，你只需要：
- 打开一个文本编辑器（比如记事本、VS Code、Sublime Text等）。
- 将上面的代码复制粘贴进去。
- 将文件保存为
.html
或.htm
后缀（例如：my_first_page.html
）。 - 双击保存的文件，它就会在你的默认浏览器中打开了。
HTML文档中的Head和Body标签有何区别？
理解
<head>和
<body>标签的区别，是掌握HTML结构的关键一步。它们虽然都嵌套在
<html>根元素内，但各自承担着截然不同的职责。简单来说，
<head>是给浏览器和搜索引擎看的“说明书”，而
<body>才是用户能直接体验到的“产品本身”。
在
<head>里，我们放置的是页面的元信息（metadata）。这些信息不会直接呈现在用户的屏幕上，但对页面的行为、显示方式以及搜索引擎的理解至关重要。举个例子，你可能会在这里定义页面的标题（
<title>），这个标题会出现在浏览器标签页上，而不是页面内容里。还有字符编码（
<meta charset="UTF-8">），它告诉浏览器如何正确解析页面上的文本，避免出现乱码。此外，CSS样式表（
<link rel="stylesheet" href="style.css">）和JavaScript脚本（
<script src="script.js"></script>）的引用也通常放在
<head>里，它们决定了页面的外观和交互功能。甚至，你还可以放一些SEO相关的描述（
<meta name="description" content="...">）和关键词，这些都是给搜索引擎看的，帮助它们更好地索引你的页面。
而
<body>标签则完全不同，它承载着所有用户在浏览器中能直接看到和交互的内容。从最基本的文本段落（
<p>），到各种标题（
<h1>到
<h6>），再到图片（
<img>）、链接（
<a>）、列表（
<ul>、
<ol>）、表格（
<table>）以及各种表单元素（
<input>、
<button>），乃至更复杂的布局容器（
<div>、
<span>），所有这些构成了网页的视觉和功能主体。当你访问一个网站时，屏幕上呈现的一切，都是由
<body>里的内容渲染出来的。所以，如果说
<head>是幕后英雄，那
<body>就是舞台上的主角。
我见过不少初学者，刚开始写HTML时会把CSS或者JS代码直接写在
<body>里，虽然浏览器多数时候也能解析，但这并不是最佳实践。分离关注点，把样式和脚本的引用放在
<head>里，内容放在
<body>里，能让代码更清晰、更易于维护，也更符合Web标准。
创建HTML页面时常用的基本标签有哪些？
在构建一个HTML页面时，除了我们刚才提到的骨架标签，还有一系列“积木”般的标签，它们构成了页面的基本内容和结构。掌握这些常用标签，你就能搭建出绝大多数的静态网页。
-
文本内容标签：
<h1>
到<h6>
：标题标签。<h1>
代表最高级别标题，重要性依次递减到<h6>
。选择合适的标题级别不仅关乎视觉呈现，对搜索引擎理解页面结构也至关重要。<p>
：段落标签。用于包裹普通的文本段落。这是最常用的文本标签，我个人写文章时，几乎每个自然段都会用<p>
包起来。<a>
：锚点（链接）标签。用于创建超链接，通过href
属性指定链接目标。比如<a href="https://www.google.com">Google</a>
。它也是实现页面跳转和导航的核心。<strong>
和<em>
：强调标签。<strong>
表示内容的重要性或严重性，通常显示为粗体；<em>
表示内容的强调，通常显示为斜体。它们比简单的<b>
和<i>
更具语义化。<br>
：换行标签。一个空标签，用于在文本中强制换行。<hr />
：水平线标签。一个空标签，用于在文档中插入一条水平分隔线。
-
媒体标签：
<img>
：图片标签。用于在页面中嵌入图片，通过src
属性指定图片路径，alt
属性提供图片的替代文本（对SEO和无障碍访问很重要）。比如<img src="image.jpg" alt="描述图片内容">
。<video>
和<audio>
：视频和音频标签。用于嵌入多媒体内容。它们提供了比旧的Flash插件更原生的支持，也更灵活。
-
列表标签：
<ul>
：无序列表。列表项通常用圆点标记。<ol>
：有序列表。列表项通常用数字或字母标记。<li>
：列表项。无论是无序列表还是有序列表，每个具体条目都用<li>
包裹。
-
容器标签：
<div>
：块级通用容器。它本身没有任何语义，主要用于组合其他HTML元素，以便通过CSS进行样式设置或通过JavaScript进行操作。在没有更具体语义的标签可用时，<div>
是万能的。<span>
：行内通用容器。与<div>
类似，但它是行内元素，通常用于对文本中的一小部分进行样式或操作。
这些标签是构建任何网页的基础。当你开始思考一个页面的布局时，通常会先用这些标签把内容和结构搭建起来，然后再通过CSS来美化它。
在编写HTML代码时有哪些常见的错误和最佳实践？
编写HTML代码，就像搭积木，看似简单，但要搭得稳固、高效，还是有一些门道。我这些年写代码，也踩过不少坑，总结了一些常见的错误和我觉得特别实用的最佳实践。
常见的错误：
-
忘记闭合标签或错误嵌套： 这是初学者最常犯的错误。比如写了
<p>
却忘了</p>
，或者<p><span></p></span>
这种交叉嵌套。虽然浏览器有时会“聪明”地帮你纠正，但这种不规范会导致不可预测的渲染问题，尤其是在复杂的布局中。调试起来会让人抓狂。 -
不使用
<!DOCTYPE html>
： 前面提过，这会导致浏览器进入“怪异模式”，影响CSS的渲染效果，让你的页面在不同浏览器上表现不一致。 -
不设置字符编码： 忘记
<meta charset="UTF-8">
，或者设置了错误的编码，会导致页面出现乱码，特别是当页面包含非英文字符时。 -
图片路径错误：
<img>
标签的src
属性如果指向了错误的图片地址，图片就无法显示，只会显示一个破碎的图标。这通常是相对路径和绝对路径混淆，或者文件名拼写错误造成的。 -
滥用
<div>
： 虽然<div>
是万能容器，但过度使用它而忽略了HTML5提供的语义化标签（如<header>
,<nav>
,<main>
,<article>
,<section>
,<footer>
等），会让你的代码结构不清晰，不利于SEO和可访问性。 -
直接在HTML中写大量行内样式或脚本： 比如
<p style="color:red;">
或<button onclick="alert('Hello!')">。这会让HTML文件变得臃肿、难以维护。样式和脚本应该尽可能地分离到独立的CSS和JS文件中。
最佳实践：
-
语义化HTML： 这是我个人非常推崇的一点。尽可能使用具有实际意义的HTML5标签，而不是一堆无意义的
<div>
。例如，用<nav>
表示导航链接，用<article>
表示独立的文章内容，用<aside>
表示侧边栏。这不仅让代码更易读，对搜索引擎优化（SEO）和屏幕阅读器等辅助技术也非常友好。 - 保持代码整洁和可读性： 使用一致的缩进（比如2个空格或4个空格），合理地组织标签，让代码结构一目了然。这对于团队协作和未来的维护至关重要。
-
为图片提供
alt
属性： 任何<img>
标签都应该包含alt
属性，提供图片的文字描述。这不仅在图片无法加载时提供替代信息，对视障用户和搜索引擎也很有帮助。 - 使用小写标签名和属性名： 虽然HTML不区分大小写，但使用小写是普遍的约定和最佳实践，可以提高代码的一致性和可读性。
-
外部化CSS和JavaScript： 将CSS样式规则放在
.css
文件中，JavaScript代码放在.js
文件中，并通过<link>
和<script>
标签引用。这有助于浏览器缓存这些文件，提高页面加载速度，也让HTML代码更纯粹、更易于管理。 -
注释代码： 对于复杂的HTML结构或不明显的部分，添加注释（
<!-- 这是一个注释 -->
）可以帮助你和未来的开发者理解代码的意图。 - 验证你的HTML： 使用W3C的HTML验证器（validator.w3.org）定期检查你的HTML代码是否符合标准。这能帮助你发现潜在的错误和不规范之处，确保代码的健壮性。
遵循这些实践，你的HTML代码会更健壮、更易于维护，也更能适应未来的发展。
