1464 字
7 分钟
HTML基础
AI 摘要
HTML基础结构
定义
HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，由预定义的标签构成，浏览器负责解析这些标签并将其渲染为用户可见的网页。
- 超文本：超越普通文本的限制，可定义图片、音频、视频等内容
- 标记语言：由
<标签名>构成，标签为浏览器预定义
基础文档骨架
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title></head><body> <!-- 页面主体内容 --></body></html>骨架结构说明
| 标签 | 作用 |
|---|---|
<!DOCTYPE html> | 声明文档类型为 HTML5 |
<html> | 根标签，包裹整个页面 |
<head> | 存放给浏览器看的信息（CSS 样式、网页标题、meta 元数据等） |
<body> | 存放给用户看的信息（文字、图片、视频、音频、表格等） |
<title> | 定义浏览器标签页标题 |
<meta charset="UTF-8"> | 声明字符编码 |
标签语法规则
- HTML 标签通常成对出现：
<tagname>内容</tagname> - 自闭合标签（空元素）：
<img>、<br>、<input>等 - 标签可以嵌套，但必须正确闭合
- 属性写在开始标签内：
<tagname attr="value">
浏览器渲染
浏览器从上往下逐行解析 HTML，将代码转换为可视化的网页内容。<head> 中的内容不直接显示，<body> 中的内容呈现在浏览器内容区域。
注意事项
- 标签名不区分大小写，但建议统一使用小写
- 属性值可用单引号或双引号，推荐双引号
- HTML 语法较松散，但编写时建议保持规范严谨
文件路径表示
定义
在 HTML 中引入图片、视频、音频、CSS 等外部资源时，需要指定文件的路径。路径分为 绝对路径 和 相对路径 两类。
语法/用法
绝对路径
绝对磁盘路径：从盘符开始指定完整的文件位置。
<img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">绝对网络路径：指向互联网上的资源 URL。
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">相对路径
以当前 HTML 文件所在目录为基准进行定位。
| 符号 | 含义 | 示例 |
|---|---|---|
./ 或省略 | 当前目录 | src="img/photo.jpg" 等价于 src="./img/photo.jpg" |
../ | 上一级目录 | src="../images/logo.png" |
常见场景
<img>标签的src属性引用本地图片<link>标签引入外部 CSS 文件<video>标签的src属性引用本地视频<a>标签的href指定跳转链接
注意事项
- 相对路径在项目迁移或部署到服务器后通常仍能正常工作，而绝对磁盘路径会失效
- 开发中优先使用相对路径，引用外部 CDN 资源时使用绝对网络路径
./可以省略不写，../不可省略
标题标签
定义
HTML 提供六级标题标签 <h1> 到 <h6>，用于定义文档的层级标题结构。<h1> 级别最高、字体最大，<h6> 级别最低、字体最小。
语法/用法
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>常见场景
- 页面主标题用
<h1>（一个页面通常只有一个<h1>） - 章节标题按层级递进使用
<h2>、<h3> - 结合
id属性用于锚点导航：<h1 id="title">标题</h1>
注意事项
- 标题标签仅此六级，不存在
<h7>，HTML 标签不可自定义 - 标题标签自带加粗效果和上下外边距
- SEO 场景中
<h1>权重最高，应合理使用层级结构 - 不可为了字号大小而跳级使用（如直接从
<h1>跳到<h4>）
段落与文本标签
定义
HTML 提供多种标签用于组织文本内容，包括段落、换行、强调等。
语法/用法
段落标签 <p>
<p>这是一个段落，浏览器会自动在段落前后添加外边距。</p>换行标签 <br>
第一行<br>第二行强调标签
| 标签 | 说明 | 示例 |
|---|---|---|
<strong> | 加粗强调，语义重要 | <strong>重要内容</strong> |
<em> | 斜体强调，语义强调 | <em>强调内容</em> |
<span> | 行内容器，无语义 | <span class="highlight">高亮</span> |
文本格式化
<p>这是一段包含 <strong>加粗</strong> 和 <em>斜体</em> 的文本。</p><p>换行<br>在这里</p>常见场景
- 新闻正文、文章内容使用
<p>分段 - 地址、诗歌等需要强制换行处使用
<br> - 关键词、重要信息用
<strong>或<em>强调 - 需要单独样式控制的文本片段用
<span>包裹
注意事项
<p>标签自带上下外边距，可通过 CSS 调整<br>是自闭合标签，无结束标签<strong>与<b>视觉效果相同，但语义不同（<strong>表示重要性，<b>仅视觉加粗）<em>与<i>同理，<em>有强调语义，<i>仅视觉斜体
字符实体
定义
HTML 中的字符实体（Character Entities）用于在页面中显示特殊字符，如空格、尖括号、引号等。浏览器无法直接识别代码中的这些字符，需通过实体表示。
语法/用法
字符实体以 & 开头，以 ; 结尾。
常用字符实体
| 字符 | 实体名称 | 实体编号 | 说明 |
|---|---|---|---|
< | < | < | 小于号 |
> | > | > | 大于号 |
& | & | & | 和号 |
" | " | " | 双引号 |
' | ' | ' | 单引号 |
| |   | 不换行空格 |
示例
<p>HTML 标签示例：<p> 这是一个段落 </p></p><p>版权所有 © 2024 公司名称</p><p>价格：$100 & 运费：$20</p>常见场景
- 在页面中显示 HTML 代码片段
- 需要保留多个连续空格（普通空格会被浏览器合并为一个）
- 显示版权、商标等特殊符号
- 避免与 HTML 标签冲突的字符
注意事项
- 实体名称（如
<）比实体编号（如<）更易读，推荐使用 - 不换行空格
常用于固定间距，但不应滥用（应使用 CSS 控制间距） - 现代浏览器对字符编码支持良好，但使用实体可确保兼容性
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
最后更新于 2026-05-14，距今已过 37 天
部分内容可能已过时
评论区
[ 标签 ]
[ 分类 ]
[ 公告 ]
如果你喜欢，那么欢迎来到我的世界！
了解更多[ 音乐 ]
音乐
暂未播放
0:00 0:00
找不到相关结果。
[ contents ]
[ 全部文章 ]
