零基础学网络：三个月入门路径与核心实验指南
2026/10/14 3:48:50
大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。
本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储，文件 API，拖放 API，地理定位 API，Web Workers 入门。
视频教程+课件+源码 打包下载 ：
链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234
提取码：1234
HTML5（在第二阶段目录里）
HTML5 文本与排版标签
HTML5 的文本与排版标签重点在于语义：告诉浏览器和搜索引擎、屏幕阅读器“这段内容是什么”，而不只是控制外观。样式通常交给 CSS。
1. 标题：<h1>~<h6>
表示六级标题，<h1>级别最高，<h6>最低。
<h1>网页主标题</h1><h2>章节标题</h2><h3>小节标题</h3>注意：
- 用来构建文档大纲，不要为了“字大”而用标题。
- 不要跳级，例如从
<h1>直接到<h3>。 - 一个页面通常只有一个
<h1>，但 HTML5 中并非强制。
2. 段落：<p>
表示一个段落，是块级元素。
<p>这是一个段落。HTML 会自动在段落前后添加间距。</p><p>这是另一个段落。</p>3. 换行：<br>
强制换行，是空元素，不需要闭合标签。
<p>第一行<br>第二行</p>适合地址、诗歌、短行文本。
不要用<br>来制造段落间距，段落间距应该用<p>或 CSS。
4. 水平线：<hr>
HTML5 中<hr>表示主题转换或内容分隔，不只是“一条线”。它也是空元素。
<p>上一节内容。</p><hr><p>下一节内容。</p>注意：
- 不要为了装饰而滥用
<hr>。 - 颜色、宽度、边距等应使用 CSS 控制，不要用旧属性如
color、width。
5. 强调：<strong>和<em>
<strong>：表示重要性、严重性、警告
浏览器通常显示为粗体，但语义是“重要”。
<p><strong>警告：</strong>操作不可撤销。</p><em>：表示强调、重音
浏览器通常显示为斜体，但语义是“强调”。
<p>我<em>真的</em>很想去。</p>可以嵌套：
<p><strong>注意：<em>必须</em>先保存文件。</strong></p>如果只是想加粗或斜体，没有语义，可以用 CSS；HTML 中也有<b>、<i>，但语义不同。
6. 引用：<blockquote>
表示一段独立的块级引用，通常来自其他来源。
<blockquotecite="https://example.com/source"><p>这是一个引用段落。</p></blockquote>注意：
cite属性放的是来源 URL，不是来源名称。- 引用内容最好放在
<p>等块级元素中。 - 短的行内引用用
<q>：
<p>他说：<q>坚持就是胜利。</q></p>7. 代码：<code>和预格式：<pre>
<code>：行内代码片段
<p>使用<code>console.log()</code>输出内容。</p><pre>：预格式文本
保留空格、换行和缩进，通常用等宽字体显示。
<pre>第一行 第二行有缩进 第三行</pre>常见组合是<pre><code>：
<pre><code><h1>标题</h1><p>段落</p></code></pre>注意：
会保留源码中的换行和空格，所以标签位置会影响显示。
在
<pre>中展示 HTML 标签时，必须把<、>写成实体字符。
8. 实体字符
HTML 中有些字符有特殊含义，例如<会被当作标签开始。要显示它们，需要使用实体字符。
格式：
&实体名; &#十进制数字; &#x十六进制数字;常见实体：
| 字符 | 命名实体 | 数字实体 |
|---|---|---|
< | < | <或< |
> | > | >或> |
& | & | &或& |
" | " | "或" |
' | ' | '或' |
| 空格 | |  或  |
© | © | © |
® | ® | ® |
™ | ™ | ™ |
— | — | — |
… | … | … |
示例：
<p>HTML 中，<div>表示一个 div 标签。</p><p>版权©2026 价格<100&库存>0</p> 是不换行空格，不要用它来做段落缩进，缩进应该用 CSS 的text-indent。
综合示例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>页面标题</title></head><body><h1>HTML5 文本排版</h1><h1>网页主标题</h1><h2>章节标题</h2><h3>小节标题</h3><p>这是一段普通文字，其中有<strong>重要内容</strong>和<em>强调内容</em>。</p><hr><h2>代码示例</h2><pre><code><h1>标题</h1><p>段落</p></code></pre><blockquotecite="https://example.com"><p>这是一段引用文字。</p></blockquote><p>特殊字符：<>&"©</p></body></html>总结：h1-h6管结构，p管段落，br管换行，hr管主题分隔，strong/em管语义强调，blockquote管块引用，code/pre管代码与预格式，实体字符用于显示 HTML 中的特殊符号。