HTML 核心总结
一、HTML 基础结构
1.1 文档声明与根元素
所有 HTML 文档应以 <!DOCTYPE html> 开头，声明使用 HTML5 标准。省略此声明会导致浏览器进入怪异渲染模式。
根元素 是页面所有元素的祖先元素，其 lang 属性指定文档内容的自然语言（如 lang="zh-CN"）。
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 页面内容 -->
</html>1.2 文档头与文档体
<head>：存放元数据（如字符编码、标题），不直接显示在页面中。
<meta charset="UTF-8">：指定字符编码（推荐 UTF-8）。
<title>：定义网页标题（显示在浏览器标签页）。
<body>：存放页面所有可见内容。<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<h1>欢迎！</h1>
</body>二、元素与属性
2.1 元素组成
元素由 起始标记、结束标记、内容 和 属性 组成。
示例：
<a href="https://example.com" title="示例链接">点击这里</a>元素名：a
属性：href（跳转地址）、title（悬停提示）
内容：点击这里
2.2 空元素
没有内容的元素可简写为单标记形式，如 <img> 或<img />。
常见空元素：
<meta charset="UTF-8">
<img src="image.jpg" alt="图片">2.3 全局属性与局部属性
全局属性：所有元素通用（如 id、class、title）。
局部属性：特定元素专用（如 <a> 的 href）。
三、文本与语义化
3.1 文本元素
| 元素 | 语义 | 示例 |
|---|---|---|
<h1>~<h6> | 标题 | <h1>一级标题</h1> |
<p> | 段落 | <p>这是一个段落。</p> |
<pre> | 预格式化文本 | <pre>Hello World</pre>（保留空格和换行） |
<span> | 无语义容器 | <span style="color:red">红色文字</span> |
3.2 语义化的重要性
SEO 优化：搜索引擎通过语义化标签理解页面内容。
无障碍访问：辅助工具（如屏幕阅读器）依赖语义化结构。
代码可维护性：增强代码可读性。
原则：选择元素时基于内容含义，而非显示效果（样式由 CSS 控制）。
四、链接与路径
4.1 <a> 元素
href 属性：指定跳转地址。
锚链接：<a href="#section1">跳转到章节1</a>（需目标元素有 id="section1"）。
功能链接：mailto:contact@example.com（发送邮件）、tel:123456（拨号）。
target 属性：控制打开方式（_self 当前页，_blank 新标签页）。
4.2 路径写法
绝对路径：完整 URL（如 https://example.com/image.jpg）。
相对路径：
./：当前目录（可省略）。
../：上级目录（如 ../images/logo.png）。
五、多媒体与图片
5.1 图片元素 <img>
src：图片地址。
alt：替代文本（图片加载失败时显示）。
联用示例：
<a href="large.jpg">
<img src="thumb.jpg" alt="缩略图">
</a>5.2 多媒体元素
<video>：支持 controls（显示控件）、autoplay（自动播放）、loop（循环）。
<audio>：属性与 <video> 一致。
<video controls muted>
<source src="video.mp4" type="video/mp4">
</video>六、列表与容器
6.1 列表类型
| 类型 | 标签 | 用途 |
|---|---|---|
| 有序列表 | <ol> + <li> | 步骤、排名 |
| 无序列表 | <ul> + <li> | 菜单、导航项 |
| 定义列表 | <dl> + <dt> + <dd> | 术语解释 |
6.2 容器元素
通用容器：<div>（无语义）。
语义化容器：
<header>：页头或文章头部。
<footer>：页脚或文章尾部。
<article>：独立内容块（如文章）。
<section>：文档章节。
<aside>：侧边栏内容。
七、HTML 实体
用于显示特殊字符：
| 实体 | 显示 | 示例 |
|---|---|---|
< | < | <p> → <p> |
| 空格 | 连续空格 |
© | © | 版权符号 |
八、元素包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
元素的包含关系由元素的内容类别决定。
例如，查看h1元素中是否可以包含p元素
总结：
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素（
ul>li，ol>li，dl>dt+dd） - 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
九、最佳实践
始终闭合标签：避免 <p> 未闭合导致的布局错误。
使用语义化标签：优先选择 <article> 而非 <div>。
兼容性处理：为多媒体提供多格式源（如同时提供 MP4 和 WebM）。
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>
1 条评论