定义#

HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，由预定义的标签构成，浏览器负责解析这些标签并将其渲染为用户可见的网页。

• 超文本：超越普通文本的限制，可定义图片、音频、视频等内容
• 标记语言：由 <标签名> 构成，标签为浏览器预定义

基础文档骨架#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>页面标题</title>
7
</head>
8
<body>
9
    <!-- 页面主体内容 -->
10
</body>
11
</html>

骨架结构说明#

标签语法规则#

• HTML 标签通常成对出现：<tagname>内容</tagname>
• 自闭合标签（空元素）：<img>、<br>、<input> 等
• 标签可以嵌套，但必须正确闭合
• 属性写在开始标签内：<tagname attr="value">

浏览器渲染#

浏览器从上往下逐行解析 HTML，将代码转换为可视化的网页内容。<head> 中的内容不直接显示，<body> 中的内容呈现在浏览器内容区域。

注意事项#

• 标签名不区分大小写，但建议统一使用小写
• 属性值可用单引号或双引号，推荐双引号
• HTML 语法较松散，但编写时建议保持规范严谨

定义#

在 HTML 中引入图片、视频、音频、CSS 等外部资源时，需要指定文件的路径。路径分为 绝对路径 和 相对路径 两类。

语法/用法#

1
<img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">

1
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">

常见场景#

• <img> 标签的 src 属性引用本地图片
• <link> 标签引入外部 CSS 文件
• <video> 标签的 src 属性引用本地视频
• <a> 标签的 href 指定跳转链接

注意事项#

• 相对路径在项目迁移或部署到服务器后通常仍能正常工作，而绝对磁盘路径会失效
• 开发中优先使用相对路径，引用外部 CDN 资源时使用绝对网络路径
• ./ 可以省略不写，../ 不可省略

定义#

HTML 提供六级标题标签 <h1> 到 <h6>，用于定义文档的层级标题结构。<h1> 级别最高、字体最大，<h6> 级别最低、字体最小。

语法/用法#

1
<h1>一级标题</h1>
2
<h2>二级标题</h2>
3
<h3>三级标题</h3>
4
<h4>四级标题</h4>
5
<h5>五级标题</h5>
6
<h6>六级标题</h6>

常见场景#

• 页面主标题用 <h1>（一个页面通常只有一个 <h1>）
• 章节标题按层级递进使用 <h2>、<h3>
• 结合 id 属性用于锚点导航：<h1 id="title">标题</h1>

注意事项#

• 标题标签仅此六级，不存在 <h7>，HTML 标签不可自定义
• 标题标签自带加粗效果和上下外边距
• SEO 场景中 <h1> 权重最高，应合理使用层级结构
• 不可为了字号大小而跳级使用（如直接从 <h1> 跳到 <h4>）

定义#

HTML 提供多种标签用于组织文本内容，包括段落、换行、强调等。

语法/用法#

1
<p>这是一个段落，浏览器会自动在段落前后添加外边距。</p>

1
第一行<br>
2
第二行

1
<p>这是一段包含 <strong>加粗</strong> 和 <em>斜体</em> 的文本。</p>
2
<p>换行<br>在这里</p>

常见场景#

• 新闻正文、文章内容使用 <p> 分段
• 地址、诗歌等需要强制换行处使用 <br>
• 关键词、重要信息用 <strong> 或 <em> 强调
• 需要单独样式控制的文本片段用 <span> 包裹

注意事项#

• <p> 标签自带上下外边距，可通过 CSS 调整
• <br> 是自闭合标签，无结束标签
• <strong> 与 <b> 视觉效果相同，但语义不同（<strong> 表示重要性，<b> 仅视觉加粗）
• <em> 与 <i> 同理，<em> 有强调语义，<i> 仅视觉斜体

定义#

HTML 中的字符实体（Character Entities）用于在页面中显示特殊字符，如空格、尖括号、引号等。浏览器无法直接识别代码中的这些字符，需通过实体表示。

语法/用法#

字符实体以 & 开头，以 ; 结尾。

1
<p>HTML 标签示例：&lt;p&gt; 这是一个段落 &lt;/p&gt;</p>
2
<p>版权所有 &copy; 2024 公司名称</p>
3
<p>价格：$100 &amp; 运费：$20</p>

常见场景#

• 在页面中显示 HTML 代码片段
• 需要保留多个连续空格（普通空格会被浏览器合并为一个）
• 显示版权、商标等特殊符号
• 避免与 HTML 标签冲突的字符

注意事项#

• 实体名称（如 <）比实体编号（如 <）更易读，推荐使用
• 不换行空格   常用于固定间距，但不应滥用（应使用 CSS 控制间距）
• 现代浏览器对字符编码支持良好，但使用实体可确保兼容性