HTML 全面知识整理

1. HTML 基础概念

1.1 什么是 HTML

HTML (HyperText Markup Language) 超文本标记语言
用于创建网页的标准标记语言
描述网页的结构，由一系列元素组成
通过标签来标记内容

1.2 HTML 文档结构

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. HTML 元素和标签

2.1 基本语法

html 复制代码

<标签名 属性="值">内容</标签名>
<空标签名 属性="值">

2.2 文档类型声明

html 复制代码

<!DOCTYPE html>  <!-- HTML5 文档类型 -->

3. 常用 HTML 标签详解

3.1 文档结构标签

<html>: 文档的根元素
<head>: 包含文档的元数据
<body>: 包含文档的可见内容
<title>: 文档标题
<meta>: 文档元数据
<link>: 链接外部资源
<style>: 内嵌CSS样式
<script>: 客户端脚本

3.2 文本内容标签

标题标签

html 复制代码

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落和文本标签

html 复制代码

<p>这是一个段落</p>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<pre>预格式化文本</pre>
<blockquote>块级引用</blockquote>
<q>短引用</q>

文本格式化标签

html 复制代码

<b>粗体文本</b>
<strong>重要文本</strong>
<i>斜体文本</i>
<em>强调文本</em>
<mark>标记文本</mark>
<small>小号文本</small>
<del>删除文本</del>
<ins>插入文本</ins>
<sub>下标</sub>
<sup>上标</sup>
<code>代码文本</code>
<kbd>键盘输入</kbd>
<samp>样本输出</samp>
<var>变量</var>
<abbr title="完整文本">缩写</abbr>
<address>联系信息</address>

3.3 链接和图像标签

链接标签

html 复制代码

<a href="https://example.com" target="_blank" rel="noopener">链接文本</a>
<a href="#section-id">锚点链接</a>
<a href="mailto:email@example.com">发送邮件</a>
<a href="tel:+1234567890">拨打电话</a>

图像标签

html 复制代码

<img src="image.jpg" alt="图片描述" width="300" height="200" loading="lazy">
<figure>
    <img src="image.jpg" alt="图片">
    <figcaption>图片说明</figcaption>
</figure>

3.4 列表标签

无序列表

html 复制代码

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

有序列表

html 复制代码

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<ol type="A" start="3">
    <li>项目A</li>
    <li>项目B</li>
</ol>

定义列表

html 复制代码

<dl>
    <dt>术语</dt>
    <dd>定义</dd>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
</dl>

4. 表格标签

4.1 基本表格结构

html 复制代码

<table border="1">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">总计</td>
            <td>2人</td>
        </tr>
    </tfoot>
</table>

4.2 表格属性

border: 边框宽度
cellspacing: 单元格间距
cellpadding: 单元格内边距
width: 表格宽度
colspan: 跨列
rowspan: 跨行

5. 表单标签

5.1 基本表单结构

html 复制代码

<form action="/submit" method="post" enctype="multipart/form-data">
    <!-- 表单控件 -->
</form>

5.2 表单控件

输入控件

html 复制代码

<!-- 文本输入 -->
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required placeholder="请输入姓名">

<!-- 密码输入 -->
<input type="password" name="password" minlength="8">

<!-- 邮箱输入 -->
<input type="email" name="email">

<!-- 数字输入 -->
<input type="number" name="age" min="0" max="120" step="1">

<!-- 日期输入 -->
<input type="date" name="birthday">
<input type="datetime-local" name="appointment">

<!-- 文件上传 -->
<input type="file" name="avatar" accept="image/*">

<!-- 隐藏字段 -->
<input type="hidden" name="user_id" value="123">

<!-- 颜色选择 -->
<input type="color" name="favcolor">

<!-- 范围滑块 -->
<input type="range" name="volume" min="0" max="100">

选择控件

html 复制代码

<!-- 单选按钮 -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">订阅新闻</label>

<!-- 下拉选择 -->
<select name="country">
    <option value="">请选择国家</option>
    <option value="china">中国</option>
    <option value="usa">美国</option>
</select>

<!-- 多选下拉 -->
<select name="hobbies" multiple>
    <option value="reading">阅读</option>
    <option value="sports">运动</option>
</select>

<!-- 选项分组 -->
<select name="car">
    <optgroup label="德国车">
        <option value="bmw">宝马</option>
        <option value="benz">奔驰</option>
    </optgroup>
    <optgroup label="日本车">
        <option value="toyota">丰田</option>
    </optgroup>
</select>

文本域

html 复制代码

<textarea name="message" rows="4" cols="50" placeholder="请输入消息"></textarea>

按钮

html 复制代码

<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

5.3 表单分组

html 复制代码

<fieldset>
    <legend>个人信息</legend>
    <!-- 表单控件 -->
</fieldset>

6. 语义化标签 (HTML5)

6.1 结构语义化

html 复制代码

<header>
    <nav>
        <!-- 导航链接 -->
    </nav>
</header>

<main>
    <article>
        <section>
            <h1>文章标题</h1>
            <p>文章内容...</p>
        </section>
    </article>
    
    <aside>
        <!-- 侧边栏内容 -->
    </aside>
</main>

<footer>
    <!-- 页脚内容 -->
</footer>

6.2 其他语义化标签

html 复制代码

<time datetime="2023-10-01">2023年10月1日</time>
<mark>高亮文本</mark>
<progress value="75" max="100">75%</progress>
<meter value="0.6">60%</meter>
<details>
    <summary>更多信息</summary>
    <p>详细内容...</p>
</details>

7. 多媒体标签

7.1 音频

html 复制代码

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频元素
</audio>

7.2 视频

html 复制代码

<video width="320" height="240" controls poster="preview.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持视频元素
</video>

7.3 嵌入内容

html 复制代码

<iframe src="https://example.com" width="800" height="600"></iframe>
<embed src="flash.swf" width="400" height="300">
<object data="document.pdf" width="800" height="600"></object>

8. 全局属性

8.1 核心属性

id: 唯一标识符
class: 类名
style: 内联样式
title: 提示文本
lang: 语言设置
dir: 文本方向 (ltr, rtl)

8.2 事件属性

onclick: 点击事件
onload: 加载完成
onchange: 值改变
onsubmit: 表单提交
onkeydown: 按键按下

8.3 其他重要属性

data-*: 自定义数据属性
aria-*: 可访问性属性
contenteditable: 可编辑
draggable: 可拖动
hidden: 隐藏元素
spellcheck: 拼写检查
tabindex: Tab键顺序

9. 字符实体

9.1 常用字符实体

html 复制代码

&amp;   <!-- & -->
&lt;    <!-- < -->
&gt;    <!-- > -->
&nbsp;  <!-- 空格 -->
&copy;  <!-- © -->
&reg;   <!-- ® -->
&trade; <!-- ™ -->
&euro;  <!-- € -->
&pound; <!-- £ -->
&yen;   <!-- ¥ -->

10. HTML5 新特性

10.1 新的输入类型

html 复制代码

<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="month">
<input type="number">
<input type="range">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">

10.2 新的表单属性

html 复制代码

<input required>          <!-- 必填 -->
<input placeholder="提示"> <!-- 占位文本 -->
<input autofocus>         <!-- 自动聚焦 -->
<input pattern="[A-Za-z]"><!-- 正则验证 -->
<input list="browsers">   <!-- 数据列表 -->
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
</datalist>

10.3 图形和媒体

html 复制代码

<canvas id="myCanvas" width="200" height="100"></canvas>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

11. 最佳实践

11.1 可访问性

html 复制代码

<!-- 使用语义化标签 -->
<!-- 为图片添加alt属性 -->
<img src="image.jpg" alt="描述图片内容">

<!-- 使用label关联表单控件 -->
<label for="username">用户名:</label>
<input id="username" name="username">

<!-- 使用ARIA属性 -->
<button aria-label="关闭对话框">×</button>

11.2 SEO优化

html 复制代码

<!-- 使用合适的标题结构 -->
<h1>主要标题</h1>
<h2>次级标题</h2>

<!-- 添加meta描述 -->
<meta name="description" content="页面描述">

<!-- 使用语义化标签 -->

11.3 性能优化

html 复制代码

<!-- 延迟加载图片 -->
<img src="image.jpg" loading="lazy" alt="图片">

<!-- 预加载关键资源 -->
<link rel="preload" href="style.css" as="style">

<!-- 使用合适的图片格式 -->
<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="图片">
</picture>

12. 验证和调试

12.1 HTML验证

使用W3C验证服务检查HTML有效性
确保标签正确嵌套
检查属性值是否正确
验证表单输入类型

12.2 浏览器兼容性

测试不同浏览器的渲染效果
使用特性检测而非浏览器检测
考虑渐进增强策略

这个全面的HTML知识整理涵盖了HTML的所有主要方面，从基础概念到高级特性，包括详细的标签说明、属性解释、表格和表单的完整用法，以及最佳实践建议。