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