30分钟学会HTML

HTML 基本语法

HTML（HyperText Markup Language）是构成网页内容的基础。它使用一系列的标签来描述网页的结构，包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。

在线体验一下 CodePen (在线 HTML 编辑器)。

千万不要被「超文本」、「标记语言」吓到，HTML 的语法非常直观，常用的标签结构并不复杂，用于构建基础网页已经足够，稍微了解一下就能上手。

就是这些基本的标签结构，却能让人优雅地组织你的网页内容，专注于信息的呈现而不是纠结于如何显示，达到“心中有页，落笔成型”的境界。

HTML 文档结构

每个 HTML 文档都需要一个基本的结构，声明文档类型，并包含 <html>、<head> 和 <body> 等核心标签。

HTML 语法	作用	示例
`<!DOCTYPE html>`	声明文档类型为 HTML5
`<html></html>`	HTML 文档的根元素
`<head></head>`	包含文档的元数据，如标题、字符编码等
`<title></title>`	定义文档的标题，显示在浏览器标签上	`<title>我的网页标题</title>`
`<meta charset="UTF-8">`	定义字符编码为 UTF-8，支持多种字符集
`<body></body>`	包含网页可见内容的主体部分
`<h1></h1>` 到 `<h6></h6>`	定义不同级别的标题	`<h1>主标题</h1>`, `<h2>副标题</h2>`
`<p></p>`	定义段落	`<p>这是一个段落。</p>`

可选语法 (实际上是不同的 HTML 版本和doctype)

虽然 <!DOCTYPE html> 是 HTML5 的标准声明，但以前的 HTML 版本有不同的doctype声明方式。现在推荐使用 HTML5 的简洁声明。

最佳实践

一个标准的 HTML 文档应该以 <!DOCTYPE html> 开头，并包含 <html>、<head> 和 <body> 标签，确保语义清晰和结构完整。

✅ Do this	❌ Don't do this
使用 `<!DOCTYPE html>` 声明 HTML5	忘记添加 `<!DOCTYPE html>` 声明
包含 `<head>` 和 `<body>` 标签	缺少 `<head>` 或 `<body>` 标签

HTML 标题

HTML 提供了六级标题标签 <h1> 到 <h6>，用于表示不同级别的标题内容。

HTML 语法	作用	预览效果 (描述性)
`<h1>一级标题</h1>`	定义一级标题	页面中最主要的标题
`<h2>二级标题</h2>`	定义二级标题	次要的标题
`<h3>三级标题</h3>`	定义三级标题	更细分的标题
`<h4>四级标题</h4>`	定义四级标题
`<h5>五级标题</h5>`	定义五级标题
`<h6>六级标题</h6>`	定义六级标题

可选语法 (无直接对应，但强调语义化)

虽然可以使用 CSS 来改变标题的显示样式，但应该根据内容的逻辑结构来选择合适的标题标签，而不是仅仅为了改变字体大小而随意使用。

最佳实践

按照内容的逻辑重要性使用标题标签，<h1> 用于最重要的标题，依次递减。

✅ Do this	❌ Don't do this
使用 `<h1>` 作为页面主标题	为了加大字体而使用 `<h1>`，忽略语义化
按照标题层级嵌套使用 (`h2` 在 `h1` 下)	跳跃使用标题标签 (例如 `h1` 后直接使用 `h4`)

HTML 段落

<p> 标签用于定义段落，将文本内容组织成独立的段落块。

HTML 语法	作用	预览效果 (描述性)
`<p>这是一个段落。</p>`	定义一个段落	文本会分段显示
`<p>这是第一个句子。<br>这是第二个句子。</p>`	使用 `<br>` 换行	在段落内换行显示

段落（Paragraph）用法的最佳实践

使用 <p> 标签包裹文本内容，以清晰地划分段落。使用 <br> 标签在段落内进行换行。

✅ Do this	❌ Don't do this
使用 `<p>` 标签组织文本内容	依赖换行符或空格来分隔段落
在需要换行的地方使用 `<br>`	为了视觉效果而滥用 `<br>` 标签

HTML 文本格式化

HTML 提供多种标签用于格式化文本，例如加粗、斜体等。

HTML 语法	作用	预览效果 (描述性)
`<b>加粗文本</b>`	定义粗体文本	文本显示为粗体
`<strong>重要文本</strong>`	定义重要文本	文本显示为粗体 (强调语义)
`<i>斜体文本</i>`	定义斜体文本	文本显示为斜体
`<em>强调文本</em>`	定义强调文本	文本显示为斜体 (强调语义)
`<small>小号文本</small>`	定义小号文本	文本显示为较小字号
`<mark>标记文本</mark>`	定义标记文本	文本背景高亮显示
`<del>删除文本</del>`	定义删除文本	文本带有删除线
`<ins>插入文本</ins>`	定义插入文本	文本带有下划线
`<sub>下标文本</sub>`	定义下标文本	文本显示为下标
`<sup>上标文本</sup>`	定义上标文本	文本显示为上标

文本格式化（Text Formatting）用法的最佳实践

根据语义选择合适的文本格式化标签。<strong> 和 <em> 更侧重于语义强调，而 <b> 和 <i> 则更多是视觉呈现。

✅ Do this	❌ Don't do this
使用 `<strong>` 标记重要的关键词或句子	仅为了加粗而使用 `<b>`，忽略语义化
使用 `<em>` 强调需要突出显示的文本	使用 `<i>` 代替 `<em>` 进行强调

HTML 列表

HTML 提供了有序列表、无序列表和描述列表三种类型的列表。

HTML 语法	作用	预览效果 (描述性)
`<ul><li>项目 1</li><li>项目 2</li></ul>`	定义无序列表	生成带有项目符号的列表
`<ol><li>项目 A</li><li>项目 B</li></ol>`	定义有序列表	生成带有数字编号的列表
`<dl><dt>术语</dt><dd>描述</dd></dl>`	定义描述列表	生成带有术语和描述的列表
`<li></li>`	定义列表项	包含在 `<ul>` 或 `<ol>` 中
`<dt></dt>`	定义描述列表中的术语	包含在 `<dl>` 中
`<dd></dd>`	定义描述列表中术语的描述	包含在 `<dl>` 中

列表（List）用法的最佳实践

根据信息的组织方式选择合适的列表类型。使用嵌套列表可以清晰地表示层级关系。

✅ Do this	❌ Don't do this
使用 `<ul>` 创建无需特定顺序的项目列表	使用段落和 `<br>` 标签模拟列表
使用 `<ol>` 创建需要排序的项目列表	混淆无序列表和有序列表的使用场景
使用 `<dl>` 创建术语及其解释的列表	在无序或有序列表中尝试模拟描述列表的效果

HTML 链接

<a> 标签用于创建超链接，将用户导向其他网页、文件或同一页面的不同位置。

HTML 语法	作用	预览效果 (描述性)
`<a href="URL">链接文本</a>`	创建指向 URL 的链接	"链接文本"显示为可点击的链接，跳转到 URL
`<a href="URL" target="_blank">链接文本</a>`	在新标签页打开链接	点击链接将在新的浏览器标签页中打开
`<a href="mailto:邮箱地址">发送邮件</a>`	创建邮件链接	点击链接将打开用户的邮件客户端并填写收件人
`<a href="#section">跳转到Section</a>`	创建内部链接	点击链接将滚动到页面中 ID 为 "section" 的元素

链接（Link）用法的最佳实践

为链接添加清晰的链接文本，并根据需要使用 target 属性来控制链接的打开方式。

✅ Do this	❌ Don't do this
使用描述性的链接文本 (例如 "了解更多")	使用 "点击这里" 等模糊的链接文本
外部链接使用 `target="_blank"` 在新标签页打开	所有链接都强制在新标签页打开，影响用户体验

HTML 图片

<img> 标签用于在网页中嵌入图片。

HTML 语法	作用	预览效果 (描述性)
`<img src="图片URL" alt="图片描述">`	插入图片	在指定位置显示图片
`<img src="图片URL" alt="图片描述" width="宽度" height="高度">`	指定图片尺寸	按照指定的宽度和高度显示图片

图片（Image）用法的最佳实践

为 <img> 标签提供 src 属性指定图片路径，并使用 alt 属性提供图片描述，这对于可访问性和 SEO 非常重要。

✅ Do this	❌ Don't do this
为所有 `<img>` 标签添加 `alt` 属性	忽略 `alt` 属性，影响可访问性
使用有意义的 `alt` 文本描述图片内容	使用 "图片" 或空 `alt` 属性
尽量优化图片大小，提高网页加载速度	插入过大的图片，导致网页加载缓慢

HTML 代码

HTML 提供了 <code> 和 <pre> 标签用于在网页中显示代码。

HTML 语法	作用	预览效果 (描述性)
`<code>行内代码</code>`	表示行内代码	代码以等宽字体显示在文本中
`<pre>多行代码</pre>`	表示预格式化的文本	代码块以原始格式显示，保留空格和换行符
`<pre><code>带语法的代码</code></pre>`	显示带语法的代码	通常与 JavaScript 库一起使用以进行语法高亮

代码（Code）用法的最佳实践

使用 <code> 标签包裹行内代码，使用 <pre> 标签包裹多行代码块。结合 JavaScript 库可以实现代码语法高亮。

✅ Do this	❌ Don't do this
使用 `<code>` 标签标记行内代码	直接在文本中输入代码，导致格式不易区分
使用 `<pre>` 标签显示多行代码	手动使用空格和换行符来模拟代码显示
考虑使用代码高亮库提升代码的可读性	在技术文档中直接粘贴未格式化的代码

HTML 语义化标签

HTML5 引入了一些语义化标签，用于更清晰地描述文档的结构和内容，提高可访问性和 SEO。

HTML 语法	作用	示例
`<article></article>`	表示文档、页面或应用程序中独立的、完整的、可以独立分发或复用的内容	一篇博客文章、一篇新闻报道
`<aside></aside>`	表示与周围内容相关但不属于主要内容的辅助信息	侧边栏、广告、相关链接
`<details></details>`	表示用户可以展开或收起的内容摘要	常见问题解答、产品详情
`<figcaption></figcaption>`	表示 `<figure>` 元素的标题	图片的描述或标题
`<figure></figure>`	表示独立的流内容（图像、图表等），通常带有标题	一张图片及其标题
`<footer></footer>`	表示文档或节的页脚	版权信息、联系方式
`<header></header>`	表示文档或节的头部	网站 Logo、导航菜单
`<main></main>`	表示文档的主要内容	网页的主要信息区域
`<nav></nav>`	表示页面的导航链接	网站的导航栏
`<section></section>`	表示文档中的一个 тематический 分组内容	章节、主题分组
`<summary></summary>`	为 `<details>` 元素定义一个可见的标题	常见问题解答的标题
`<time></time>`	表示日期或时间	发布日期、活动时间

语义化标签（Semantic Tags）用法的最佳实践

使用语义化标签来组织 HTML 结构，提高代码的可读性和可维护性，并提升网页的可访问性。

✅ Do this	❌ Don't do this
使用 `<article>` 包裹独立的文章内容	使用 `<div>` 替代所有语义化标签
使用 `<nav>` 包裹导航链接	使用无序列表 `<ul>` 模拟导航，缺少语义信息
使用 `<footer>` 标记页脚信息	将所有内容都放在 `<body>` 中，缺乏结构

HTML 元素和属性

HTML 文档由一系列嵌套的元素组成。元素由开始标签、内容和结束标签构成。标签可以拥有属性，提供关于元素的额外信息。

HTML 语法	作用	示例
`<标签名>内容</标签名>`	定义一个 HTML 元素	`<p>这是一个段落。</p>`
`<标签名属性名="属性值">内容</标签名>`	带有属性的 HTML 元素	`<a href="https://example.com">链接</a>`
`class="类名"`	定义元素的类名 (用于 CSS 样式)	`<div class="container"></div>`
`id="唯一ID"`	定义元素的唯一 ID (用于 CSS 和 JavaScript)	`<div id="header"></div>`
`style="CSS 样式"`	定义元素的内联样式	`<p style="color: red;">红色文本</p>`

元素和属性（Elements and Attributes）用法的最佳实践

合理使用 HTML 元素和属性来描述网页内容。避免过度使用内联样式，推荐使用外部 CSS 文件来管理样式。

✅ Do this	❌ Don't do this
使用合适的 HTML 元素来表达内容语义	为了样式效果而滥用 `<div>` 和 `<span>`
使用 `class` 属性为元素添加类名，方便 CSS 管理	大量使用 `id` 选择器，提高 CSS 优先级，不易维护
尽量避免使用内联样式，保持 HTML 结构的清晰	将所有样式都写在 `style` 属性中，导致 HTML 臃肿