到

标题、

段落、链接、图片、

和

列表等；4. 常见错误有未闭合标签、缺少doctype声明、未设置字符编码、图片路径错误及滥用
；5. 最佳实践包括使用语义化标签、保持代码整洁、提供图片alt属性、使用小写标签名、外联css和js文件、添加注释并定期验证html代码。



HTML文件的基本结构可以说是一个约定俗成的骨架，它包含了声明文档类型、定义HTML内容的根元素，以及分别用于存放页面元信息和实际可见内容的两个主要区域。创建一个简单的HTML页面，本质上就是按照这个骨架，填入你想要展示的文本、图片或链接。

解决方案

一个HTML文件，或者说一个网页，最基础的模样通常是这样的：

    
    
    


    
欢迎来到我的简单网页！
    
这是一个段落。很高兴你看到了这里。
立即学习“前端免费学习笔记（深入）”；
    点击这里访问一个示例网站

我们来拆解一下：

• ：这行代码放在最顶部，它不是一个HTML标签，而是告诉浏览器，这是一个HTML5文档。没有它，浏览器可能会以“怪异模式”渲染页面，导致一些意想不到的布局问题。我个人觉得，这就像是给浏览器一个明确的信号，告诉它：“嘿，按最新的标准来！”

• : 这是整个HTML文档的根元素，所有其他内容都包含在它里面。

  lang="zh-CN"

  属性告诉浏览器和搜索引擎这个页面的主要语言是中文（简体），这对于辅助技术和搜索排名都有好处。

• : 这个部分包含了页面的元数据，也就是关于页面的信息，而不是页面上实际显示给用户看的内容。比如：

  • : 定义了页面的字符编码为UTF-8，这能确保各种语言的字符都能正确显示，避免乱码。这几乎是现代网页的标配了，非常重要。

  • : 这是一个响应式设计的关键，告诉浏览器如何控制页面的视口（viewport）大小和缩放，让页面在不同设备上都能良好显示。

  • : 这是显示在浏览器标签页或窗口标题栏上的文本。它对SEO（搜索引擎优化）也很重要。

• : 这个标签包含了所有可见的页面内容。你看到的所有文本、图片、视频、按钮等等，都应该放在这里。

  • 欢迎来到我的简单网页！

    : 这是一个一级标题。HTML提供了

    h1

    到

    h6

    六个级别的标题，

    h1

    是最重要的。

  • 这是一个段落。很高兴你看到了这里。
    立即学习“前端免费学习笔记（深入）”；

    : 这是一个段落标签，用来包含普通的文本内容。

  • 点击这里访问一个示例网站

    : 这是一个超链接，

    href

    属性指定了链接的目标地址。

要创建一个这样的页面，你只需要：

1. 打开一个文本编辑器（比如记事本、VS Code、Sublime Text等）。
2. 将上面的代码复制粘贴进去。
3. 将文件保存为

   .html

   或

   .htm

   后缀（例如：

   my_first_page.html

   ）。
4. 双击保存的文件，它就会在你的默认浏览器中打开了。

HTML文档中的Head和Body标签有何区别？

理解

和

标签的区别，是掌握HTML结构的关键一步。它们虽然都嵌套在

根元素内，但各自承担着截然不同的职责。简单来说，

是给浏览器和搜索引擎看的“说明书”，而

才是用户能直接体验到的“产品本身”。

在

里，我们放置的是页面的元信息（metadata）。这些信息不会直接呈现在用户的屏幕上，但对页面的行为、显示方式以及搜索引擎的理解至关重要。举个例子，你可能会在这里定义页面的标题（