HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它描述了网页的结构，告诉浏览器如何展示内容。
HTML使用"标签"（tags）来标记不同的内容元素。一个HTML标签通常由一对尖括号<和>包围的关键词组成。
浏览器读取HTML文档，识别各种标签及其内容，然后将它们渲染成用户可视的网页。HTML不是编程语言，而是一种标记语言，它告诉浏览器内容的结构和类型。
<h1>这是一个标题</h1>
<p>这是一个段落。</p>HTML标签不区分大小写，但建议使用小写字母。现代网页开发中，HTML通常与CSS（样式）和JavaScript（交互）一起使用。
浏览器是一种解释和显示HTML文档的软件。了解浏览器如何工作有助于更好地编写HTML代码。
当你在浏览器中输入网址时，浏览器会向服务器请求HTML文件，然后解析这些文件并将它们呈现为可视化的网页。
学习和编写HTML只需要几个基本工具：
用于编写HTML代码的软件。常见的编辑器包括：
用于查看和测试HTML页面。建议安装多个浏览器进行测试：
有助于边学边练：
每个HTML文档都有一个基本结构，包含必要的元素来定义网页。
一个完整的HTML文档通常包括文档类型声明、html、head和body元素。
<!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>
<h1>欢迎访问我的网页</h1>
<p>这是一个段落。</p>
</body>
</html>这种结构为浏览器提供了处理文档所需的所有信息。head部分告诉浏览器关于文档的信息，而body部分则包含实际显示给用户的内容。
文档类型声明（DOCTYPE）是HTML文档的第一行，告诉浏览器使用哪种HTML版本渲染页面。
在HTML5中，DOCTYPE的声明非常简单：
<!DOCTYPE html>DOCTYPE不是HTML标签，而是一条指令，告诉浏览器页面使用哪个HTML版本。如果没有DOCTYPE或DOCTYPE不正确，浏览器可能会进入"怪异模式"（Quirks Mode），这可能导致页面显示不一致。
较旧的HTML版本有更复杂的DOCTYPE声明：
/* HTML 4.01 Strict */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
/* XHTML 1.0 Transitional */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE声明必须出现在HTML文档的第一行，在任何HTML标签之前。现代Web开发几乎总是使用HTML5的简化DOCTYPE。
<head>部分包含关于HTML文档的元数据和信息，这些内容不会直接显示在页面上。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head><meta charset="UTF-8"> - 指定文档的字符编码<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 控制移动设备上的页面布局<meta name="description" content="页面描述内容"> - 提供搜索引擎使用的页面摘要<meta name="keywords" content="HTML, CSS, JavaScript"> - 提供与页面相关的关键词（现已不太重要）<meta name="author" content="作者姓名"> - 指定页面的作者head部分为浏览器和搜索引擎提供了处理和识别文档所需的信息。这些信息不会直接显示给用户，但对于页面的正确加载和优化至关重要。
<body>元素包含网页的所有可见内容，包括文本、图像、链接、表格、列表等。
<body>
<header>
<h1>网站标题</h1>
<nav>
<!-- 导航链接 -->
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
<footer>
<p>© 2023 我的网站</p>
</footer>
</body>body标签中可以包含多种类型的内容：
现代HTML鼓励使用语义化标签组织body内容：
HTML提供了多种元素来标记和结构化文本内容。
基础语法：HTML提供六级标题元素，从 <h1> 到 <h6>，用于表示不同级别的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>原理解释：标题元素用于创建文档大纲和层次结构，<h1>表示最重要的标题，<h6>表示最不重要的标题。
应用场景：
注意事项：每个页面应该只有一个<h1>标题，且应按层次使用标题（不要跳级）。标题对搜索引擎优化（SEO）很重要。
基础语法：<p>元素用于定义段落文本。
<p>这是一个段落。它包含一些文本内容。</p>
<p>这是另一个段落。</p>原理解释：段落元素会自动在前后添加一些空间（边距），使文本块之间有明显的分隔。
应用场景：
常用文本格式化标签：
<strong>重要文本</strong> // 显示为粗体，表示重要性
<em>强调文本</em> // 显示为斜体，表示强调
<mark>标记文本</mark> // 显示带有背景色的文本，如荧光笔效果
<del>删除文本</del> // 显示为带删除线的文本
<ins>插入文本</ins> // A显示为带下划线的文本，表示插入
<sub>下标</sub> // 显示为下标（如化学公式H₂O中的2）
<sup>上标</sup> // 显示为上标（如10²中的2）
<code>代码片段</code> // 显示为等宽字体，用于代码
<pre>预格式化文本</pre> // 保留文本中的空格和换行基本与样式标签对比：
/* 语义化（推荐） */
<strong>重要文本</strong>
<em>强调文本</em>
/* 仅表示样式（不推荐） */
<b>粗体文本</b>
<i>斜体文本</i>原理解释：语义化标签不仅改变文本的外观，还传达内容的含义或重要性。这对辅助技术（如屏幕阅读器）特别重要。
应用场景：
换行元素 <br>：
这是第一行文本<br>这是第二行文本水平线元素 <hr>：
<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>原理解释：<br> 和 <hr> 是空元素（没有结束标签）。<br> 在文本中插入一个换行符，而 <hr> 插入一条水平线，表示主题的改变。
注意事项：不要使用多个 <br> 标签来创建间距，应该使用CSS的margin或padding属性。
块引用 <blockquote>：
<blockquote cite="https://source.url">
<p>这是一段较长的引用文本。通常用于引用其他来源的整段内容。</p>
</blockquote>行内引用 <q>：
<p>爱因斯坦说：<q>想象力比知识更重要。</q></p>原理解释：引用元素表明内容是从其他来源引用的。<blockquote> 用于较长的引用并通常缩进显示，而 <q> 用于短引用，通常自动添加引号。
HTML提供几种不同类型的列表，用于组织相关信息。
基础语法：无序列表使用 <ul> 标签创建，其中每个列表项使用 <li> 标签。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>原理解释：无序列表中的项目没有特定的顺序，通常以项目符号（圆点）开头。
应用场景：
基础语法：有序列表使用 <ol> 标签创建，其中每个列表项使用 <li> 标签。
<ol>
<li>预热烤箱</li>
<li>准备面团</li>
<li>烘烤30分钟</li>
</ol>高级属性：
<ol start="5"> // 从5开始编号
<li>第五项</li>
<li>第六项</li>
</ol>
<ol type="A"> // 使用大写字母编号
<li>A项</li>
<li>B项</li>
</ol>
<ol type="i" reversed> // 使用小写罗马数字并倒序
<li>第三项</li>
<li>第二项</li>
<li>第一项</li>
</ol>原理解释：有序列表中的项目有明确的顺序，通常以数字或字母开头。
应用场景：
基础语法：定义列表用于术语及其定义，包括 <dl>（定义列表）、<dt>（定义术语）和 <dd>（术语描述）。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于创建网页的标准标记语言。</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于描述HTML文档样式的语言。</dd>
</dl>原理解释：定义列表专门用于术语及其解释或定义的列表，非常适合词汇表或FAQ。
应用场景：
基础语法：列表可以嵌套，创建层次结构。
<ul>
<li>水果
<ul>
<li>柑橘类
<ul>
<li>橙子</li>
<li>柠檬</li>
</ul>
</li>
<li>浆果类
<ul>
<li>草莓</li>
<li>蓝莓</li>
</ul>
</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>叶菜类</li>
<li>根茎类</li>
</ul>
</li>
</ul>原理解释：列表可以包含其他列表，创建层次结构，非常适合表示分类或导航菜单。
应用场景：
HTML链接允许用户从一个页面导航到另一个页面，是Web的基础功能之一。
基础语法：使用 <a> 标签创建超链接，href 属性指定链接目标。
<a href="https://www.example.com">访问Example网站</a>原理解释：当用户点击链接文本时，浏览器会导航到 href 属性中指定的URL。
应用场景：
绝对URL：完整的Web地址
<a href="https://www.example.com/page.html">绝对URL</a>相对URL：相对于当前页面的路径
<a href="about.html">当前目录中的页面</a>
<a href="pages/contact.html">子目录中的页面</a>
<a href="../index.html">上一级目录中的页面</a>锚点链接：链接到页面内的特定部分
<!-- 页面中的某个位置 -->
<h2 id="section1">第一节</h2>
<!-- 链接到该位置 -->
<a href="#section1">跳到第一节</a>
<!-- 链接到另一个页面的特定位置 -->
<a href="page.html#section1">跳到另一页面的第一节</a>邮件链接：打开邮件客户端
<a href="mailto:[email protected]">发送邮件</a>
<!-- 带主题和正文的邮件链接 -->
<a href="mailto:[email protected]?subject=问候&body=你好，我有一个问题...">发送邮件</a>电话链接：在移动设备上可触发拨号
<a href="tel:+1234567890">拨打电话</a>target 属性：指定链接的打开方式
<a href="https://www.example.com" target="_blank">在新标签页打开</a>
<a href="https://www.example.com" target="_self">在当前标签页打开（默认）</a>
<a href="https://www.example.com" target="_parent">在父框架中打开</a>
<a href="https://www.example.com" target="_top">在整个窗口中打开</a>rel 属性：指定当前文档与链接文档的关系
<a href="https://www.example.com" rel="nofollow">告诉搜索引擎不要跟踪此链接</a>
<a href="https://www.example.com" rel="noopener noreferrer" target="_blank">安全的外部链接</a>
<a href="terms.html" rel="help">帮助文档</a>download 属性：指定链接为下载链接
<a href="file.pdf" download>下载PDF</a>
<a href="image.jpg" download="custom-filename.jpg">下载图片</a>基础语法：图像也可以是链接
<a href="https://www.example.com">
<img src="button.png" alt="点击访问Example">
</a>rel="noopener noreferrer" 以提高安全性。HTML支持多种多媒体元素，包括图像、视频和音频。
基础语法：使用 <img> 标签在页面中嵌入图像。
<img src="image.jpg" alt="图像描述">原理解释：<img> 标签是一个空元素（没有结束标签），src 属性指定图像的URL，alt 属性提供替代文本，当图像无法显示时或对于使用屏幕阅读器的用户会用到。
常用属性：
<img src="image.jpg" alt="图像描述" width="500" height="300"> // 设置宽度和高度
<img src="image.jpg" alt="图像描述" loading="lazy"> // 懒加载，提高页面加载性能
<img src="image.jpg" alt="图像描述" title="悬停时显示的文本"> // 鼠标悬停提示响应式图片：使用 srcset 和 sizes 属性实现响应式图片。
<img
src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
alt="响应式图像">应用场景：
基础语法：使用 <video> 标签在页面中嵌入视频。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持视频标签。
</video>原理解释：<video> 标签定义了视频播放区域，可以包含多个 <source> 标签以提供不同格式的视频源，浏览器将使用它支持的第一种格式。
常用属性：
<video controls> // 显示播放控件（播放/暂停按钮、音量控制等）
<video autoplay> // 视频自动播放（注意：许多浏览器会阻止自动播放）
<video loop> // 视频播放结束后循环播放
<video muted> // 静音播放
<video poster="thumbnail.jpg"> // 在视频加载或播放前显示的图像
<video preload="auto|metadata|none"> // 视频预加载策略应用场景：
注意事项：出于隐私和带宽考虑，大多数移动浏览器不会自动播放视频，特别是带声音的视频。通常需要用户交互才能开始播放。
基础语法：使用 <audio> 标签在页面中嵌入音频。
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持音频标签。
</audio>原理解释：类似于 <video> 标签，<audio> 标签定义了音频播放区域，可以包含多个 <source> 标签以提供不同格式的音频源。
常用属性：
<audio controls> // 显示播放控件
<audio autoplay> // 音频自动播放（同样受浏览器限制）
<audio loop> // 循环播放
<audio muted> // 静音播放
<audio preload="auto|metadata|none"> // 音频预加载策略应用场景：
注意事项：与视频类似，大多数现代浏览器限制自动播放带声音的媒体，需要用户交互才能开始播放。
基础语法：图像映射允许在图像的不同区域创建可点击的区域。
<img src="workplace.jpg" alt="工作区" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="计算机" href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="电话" href="phone.html">
<area shape="circle" coords="337,300,44" alt="咖啡" href="coffee.html">
</map>原理解释：<map> 标签定义一个图像映射，<area> 标签定义映射中的可点击区域及其链接目标。
应用场景：
注意事项：图像映射在移动设备上不太实用，因为坐标是固定的，而响应式设计中图像大小可能会改变。现代网页开发中，图像映射的使用已经减少，通常更倾向于使用CSS和JavaScript创建更灵活的解决方案。
HTML表格用于以行和列的形式展示数据。
基础语法：使用 <table>、<tr>、<th> 和 <td> 标签创建表格。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
</table>原理解释：
应用场景：
基础语法：使用 <thead>、<tbody> 和 <tfoot> 标签可以更好地组织表格结构。
<table>
<thead>
<tr>
<th>产品</th>
<th>价格</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>手机</td>
<td>2999元</td>
<td>1</td>
</tr>
<tr>
<td>耳机</td>
<td>499元</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td colspan="2">3997元</td>
</tr>
</tfoot>
</table>原理解释：
优势：使用这些元素可以使表格结构更清晰，同时也便于使用CSS对表格不同部分进行样式设置。在打印长表格时，<thead> 和 <tfoot> 也会在每页上重复显示。
基础语法：使用 colspan 和 rowspan 属性可以合并单元格。
/* 列合并 */
<tr>
<td>单元格1</td>
<td colspan="2">这个单元格占据2列</td>
</tr>
/* 行合并 */
<tr>
<td rowspan="2">这个单元格占据2行</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
</tr>原理解释：
应用场景：
基础语法：使用 <caption> 标签为表格添加标题，使用 summary 属性添加摘要（不过 summary 属性在 HTML5 中已被弃用）。
<table>
<caption>员工信息表</caption>
<tr>
<th>姓名</th>
<th>部门</th>
</tr>
<tr>
<td>张三</td>
<td>开发部</td>
</tr>
</table>原理解释：<caption> 标签定义表格的标题或说明，通常会显示在表格的顶部。
基础语法：使用 scope 属性和 headers 属性可以提高表格的无障碍性。
<table>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
</tr>
<tr>
<th scope="row">张三</th>
<td>25</td>
</tr>
</table>
/* 更复杂的表格可以使用 id 和 headers 属性 */
<table>
<tr>
<th id="name">姓名</th>
<th id="age">年龄</th>
</tr>
<tr>
<td headers="name">张三</td>
<td headers="age">25</td>
</tr>
</table>原理解释：
重要性：这些属性对使用屏幕阅读器的用户特别重要，可以帮助他们理解表格的结构和内容之间的关系。
HTML表单用于收集用户输入，是用户交互的重要组成部分。
基础语法：使用 <form> 标签创建表单，其中包含各种输入元素。
<form action="/submit-form" method="post">
<!-- 表单元素放在这里 -->
<input type="text" name="username">
<input type="submit" value="提交">
</form>原理解释：<form> 标签定义了HTML表单。它是一个容器，包含各种输入元素，如文本字段、复选框、单选按钮、提交按钮等。
重要属性：
基础语法：<input> 标签是最重要的表单元素，可以通过type属性显示多种不同类型。
/* 文本输入框 */
<input type="text" name="username" placeholder="请输入用户名">
/* 密码输入框 */
<input type="password" name="password" placeholder="请输入密码">
/* 单选按钮 */
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>
/* 复选框 */
<input type="checkbox" name="interests" value="coding" id="coding">
<label for="coding">编程</label>
<input type="checkbox" name="interests" value="reading" id="reading">
<label for="reading">阅读</label>
/* 文件上传 */
<input type="file" name="document">
/* 隐藏字段 */
<input type="hidden" name="user_id" value="12345">
/* 提交按钮 */
<input type="submit" value="提交">
/* 重置按钮 */
<input type="reset" value="重置">HTML5新增输入类型：
/* 邮箱输入 */
<input type="email" name="email">
/* URL输入 */
<input type="url" name="website">
/* 数字输入 */
<input type="number" name="quantity" min="1" max="99" step="1">
/* 日期选择 */
<input type="date" name="birthday">
/* 滑块 */
<input type="range" name="rating" min="1" max="10">
/* 颜色选择器 */
<input type="color" name="favorite_color">
/* 搜索框 */
<input type="search" name="search_query">常用属性：
基础语法：使用 <textarea> 标签创建多行文本输入字段。
<textarea name="comment" rows="4" cols="50" placeholder="请输入评论"></textarea>原理解释：<textarea> 标签定义多行文本输入控件，适合输入较长的内容。
常用属性：
基础语法：使用 <select> 和 <option> 标签创建下拉列表。
<select name="country">
<option value="">--请选择国家--</option>
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
/* 分组的下拉列表 */
<select name="car">
<optgroup label="德国车">
<option value="audi">奥迪</option>
<option value="bmw">宝马</option>
</optgroup>
<optgroup label="日本车">
<option value="toyota">丰田</option>
<option value="honda">本田</option>
</optgroup>
</select>
/* 多选下拉列表 */
<select name="fruits" multiple size="4">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
<option value="grape">葡萄</option>
</select>原理解释：<select> 标签定义了一个下拉列表，<option> 标签定义了列表中的选项。
常用属性：
option标签属性：
基础语法：使用 <button> 标签创建按钮。
<button type="button">点击我</button>
<button type="submit">提交表单</button>
<button type="reset">重置表单</button>原理解释：<button> 标签定义了一个可点击的按钮。与 <input type="button"> 相比，<button> 标签可以包含HTML内容，而不仅仅是文本。
常用属性：
基础语法：使用 <label> 标签为表单元素定义标签。
/* 使用for属性关联表单元素 */
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
/* 将表单元素包裹在label内 */
<label>
记住我
<input type="checkbox" name="remember">
</label>原理解释：<label> 标签为输入元素定义标签。点击标签会将焦点转移到关联的输入元素上，这提高了表单的可用性，特别是对于复选框和单选按钮。
重要性：标签对于无障碍访问非常重要，它们使屏幕阅读器可以正确识别输入字段的用途，并允许用户通过点击标签选择相应的表单控件。
基础语法：使用 <fieldset> 和 <legend> 标签对表单元素进行分组。
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>联系方式</legend>
<label for="phone">电话：</label>
<input type="tel" id="phone" name="phone"><br>
<label for="address">地址：</label>
<input type="text" id="address" name="address">
</fieldset>原理解释：<fieldset> 标签用于将相关的表单元素分组，并在周围绘制一个框。<legend> 标签为 <fieldset> 元素定义标题。
优势：使用fieldset和legend可以使表单更有组织性，特别是在长表单中。这也提高了无障碍性，使屏幕阅读器用户更容易理解表单结构。
HTML5表单验证属性：
/* 必填字段 */
<input type="text" required>
/* 最小/最大长度 */
<input type="text" minlength="3" maxlength="50">
/* 数字范围 */
<input type="number" min="1" max="100">
/* 模式匹配（正则表达式） */
<input type="text" pattern="[A-Za-z]{3,}" title="至少3个字母">
/* 禁用验证 */
<form novalidate>
...
</form>原理解释：HTML5引入了内置的表单验证功能，允许浏览器在提交前检查输入是否有效，无需JavaScript。
优势：内置验证提供了即时反馈，减少了服务器负担，并提高了用户体验。但请注意，客户端验证不应替代服务器端验证，因为客户端验证可以被绕过。
全局属性是可以用于所有HTML元素的属性。它们提供了元素的额外信息或功能。
基础语法：为元素指定唯一标识符。
<div id="main-content">主要内容</div>原理解释：id 属性为元素提供唯一的标识符，在页面中必须是唯一的。可以用于CSS选择器、JavaScript操作和作为锚点链接的目标。
应用场景：
<label>标签的for属性配合使用注意事项：每个页面中的id值必须唯一，不能重复。
基础语法：为元素指定一个或多个类名。
<p class="note important highlight">这是一个重要的笔记。</p>原理解释：class 属性为元素指定一个或多个类名，多个类名用空格分隔。类名主要用于CSS样式表和JavaScript。
应用场景：
基础语法：为元素指定内联样式。
<p style="color: blue; font-size: 18px;">带样式的文本</p>原理解释：style 属性包含CSS声明，直接应用于特定元素。这些样式会覆盖外部样式表中的样式。
应用场景：
注意事项：一般推荐使用外部CSS文件而非内联样式，以保持内容和样式分离，便于维护。
基础语法：为元素提供额外的信息，通常在鼠标悬停时显示为工具提示。
<a href="https://example.com" title="访问Example网站">Example</a>原理解释：title 属性在用户将鼠标悬停在元素上时显示提示信息。它也可以被屏幕阅读器读取，提供额外的无障碍信息。
应用场景：
基础语法：指定元素内容的语言。
<html lang="zh-CN">
...
</html>
<p lang="en">This paragraph is in English.</p>
<p lang="fr">Ce paragraphe est en français.</p>原理解释：lang 属性指定元素内容的语言，帮助搜索引擎、浏览器和屏幕阅读器正确处理和呈现内容。
应用场景：
<p hidden>这段文字不会显示。</p><input tabindex="1"><div contenteditable="true">这段文字可以被用户编辑。</div><div data-user-id="123" data-role="admin">用户信息</div><button aria-label="关闭" aria-expanded="false">X</button><div draggable="true">可拖动元素</div><textarea spellcheck="true"></textarea>除了全局属性外，许多HTML元素还有特定的属性，用于控制元素的特定行为或特性。
主要属性：
<a href="https://example.com">Example</a><a href="https://example.com" target="_blank">在新窗口打开</a><a href="file.pdf" download>下载PDF</a><a href="https://example.com" rel="noopener noreferrer">安全链接</a>主要属性：
<img src="image.jpg"><img src="image.jpg" alt="山水风景"><img src="image.jpg" width="300" height="200"><img src="image.jpg" loading="lazy"><img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">表单 (<form>) 属性：
<form action="/submit"><form method="post"><form enctype="multipart/form-data">输入 (<input>) 属性：
<input type="text|password|checkbox|radio|submit|..."><input name="username"><input value="默认文本"><input placeholder="请输入用户名"><input required><input disabled>视频 (<video>) 和音频 (<audio>) 属性：
<video controls><video autoplay><video loop><video muted><video poster="thumbnail.jpg">表格相关属性：
<td colspan="2"><td rowspan="3"><th scope="col|row">语义化HTML是指使用适当的HTML元素来表达内容的含义，而不仅仅是外观。
结构性语义标签：
<header> - 页面或区段的页眉
<nav> - 导航链接区域
<main> - 文档的主要内容
<article> - 独立的内容单元
<section> - 文档中的区段
<aside> - 侧边内容
<footer> - 页面或区段的页脚
<figure> - 自包含内容，如图表、图片等
<figcaption> - figure的标题文本语义标签：
<em> - 强调内容
<strong> - 重要内容
<mark> - 标记或高亮内容
<cite> - 引用的作品标题
<blockquote> - 块级引用
<q> - 行内引用
<abbr> - 缩写
<time> - 日期/时间
<address> - 联系信息
<code> - 代码片段
<pre> - 预格式化文本非语义化写法：
<div class="header">
<div class="logo">网站名称</div>
<div class="nav">
<div class="nav-item"><a href="/">首页</a></div>
<div class="nav-item"><a href="/about">关于</a></div>
</div>
</div>
<div class="main-content">
<div class="article">
<div class="article-title">文章标题</div>
<div class="article-content">文章内容...</div>
</div>
<div class="sidebar">
<div class="sidebar-item">侧边栏内容</div>
</div>
</div>
<div class="footer">
<div class="copyright">版权信息</div>
</div>语义化写法：
<header>
<h1>网站名称</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<aside>
<section>侧边栏内容</section>
</aside>
</main>
<footer>
<p>版权信息</p>
</footer>HTML5是HTML的第五个主要版本，引入了许多新元素和API，使Web开发更强大。
语义化元素：
表单元素：
多媒体元素：
主要API：
Web Storage示例：
// 存储数据
localStorage.setItem("username", "张三");
// 获取数据
let username = localStorage.getItem("username");
// 删除数据
localStorage.removeItem("username");Geolocation示例：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
console.log(`纬度: ${latitude}, 经度: ${longitude}`);
},
error => {
console.error("获取位置失败:", error.message);
}
);
} else {
console.error("浏览器不支持地理定位");
}<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
您的浏览器不支持Canvas元素。
</canvas>
<script>
// 获取Canvas元素
const canvas = document.getElementById("myCanvas");
// 获取绘图上下文
const ctx = canvas.getContext("2d");
// 设置填充颜色
ctx.fillStyle = "#FF0000";
// 绘制矩形
ctx.fillRect(10, 10, 150, 80);
</script>Web无障碍性指确保所有人，包括残障人士，都能访问和使用网站。HTML提供了多种实现无障碍性的机制。
基础语法：使用正确的HTML元素和属性来提高无障碍性。
原理解释：无障碍性技术帮助残障用户使用辅助技术（如屏幕阅读器、放大镜或语音识别软件）访问网页内容。
应用场景：
图像替代文本：
<img src="logo.png" alt="公司徽标">表单标签关联：
<label for="username">用户名：</label>
<input id="username" type="text" name="username">标题层次结构：
<h1>网站主标题</h1>
<section>
<h2>部分标题</h2>
<p>内容...</p>
<h3>子部分标题</h3>
<p>更多内容...</p>
</section>链接文本：
/* 不好的做法 */
<a href="page.html">点击这里</a>
/* 好的做法 */
<a href="page.html">查看产品详情</a>表格标题和关联：
<table>
<caption>员工信息</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">部门</th>
</tr>
<tr>
<th scope="row">张三</th>
<td>销售部</td>
</tr>
</table>基础语法：ARIA提供了一组额外的HTML属性，用于增强网页的无障碍性。
ARIA角色：
<div role="navigation">
<!-- 导航内容 -->
</div>
<div role="search">
<!-- 搜索表单 -->
</div>
<button role="tab">选项卡</button>ARIA状态和属性：
<!-- 描述元素当前状态 -->
<button aria-expanded="false">展开菜单</button>
<!-- 提供额外标签 -->
<button aria-label="关闭">X</button>
<!-- 错误提示 -->
<input aria-invalid="true" aria-describedby="error-msg">
<div id="error-msg">请输入有效的邮箱地址</div>原理解释：ARIA不会改变元素的行为或外观，但会提供额外的语义信息，帮助辅助技术理解页面结构和元素的用途。
注意事项：尽可能使用HTML语义化元素，只在需要时才使用ARIA。不恰当地使用ARIA可能会造成更多问题。
基础语法：确保所有交互元素可以通过键盘访问。
Tab顺序：
<a href="#" tabindex="1">第一个项目</a>
<a href="#" tabindex="2">第二个项目</a>
<a href="#" tabindex="0">按照默认顺序</a>
<a href="#" tabindex="-1">从Tab顺序中移除</a>键盘事件：
<button onkeydown="handleKeyDown(event)">按钮</button>
<script>
function handleKeyDown(event) {
// 检查是否按下了Enter或空格键
if (event.key === 'Enter' || event.key === ' ') {
// 执行操作
console.log('按钮被激活');
}
}
</script>搜索引擎优化（SEO）是提高网站在搜索引擎中排名的过程。正确的HTML结构可以显著提升SEO效果。
基础语法：使用特定的HTML元素和属性来提升搜索引擎排名。
标题标签：
<title>产品名称 - 关键词 | 网站名称</title>title标签是SEO中最重要的元素之一，应包含主要关键词，通常是页面首要内容的概述。
Meta描述：
<meta name="description" content="这是一个简短的页面描述，包含关键词和吸引用户点击的信息。">虽然meta描述不直接影响排名，但可以影响点击率，间接提升SEO效果。
标题层次（h1-h6）：
<h1>主要标题（每页只使用一次）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>搜索引擎使用标题标签来理解页面结构和主题。h1标签尤为重要，应包含主要关键词。
语义化元素：
<article>, <section>, <nav>, <header>, <footer>语义化元素帮助搜索引擎理解页面结构和内容关系。
基础语法：优化链接文本和结构。
描述性链接文本：
/* 不利于SEO */
<a href="product.html">点击这里</a>
/* 有利于SEO */
<a href="product.html">高性能笔记本电脑</a>内部链接：
<a href="/related-article.html">相关文章标题</a>内部链接帮助搜索引擎理解网站结构和页面之间的关系。
外部链接：
<a href="https://example.com" rel="nofollow">外部网站</a>对于不信任的外部链接，使用rel="nofollow"告诉搜索引擎不要传递页面权重。
基础语法：优化图像以提高SEO效果。
Alt文本：
<img src="product.jpg" alt="高性能笔记本电脑 - 型号XYZ">alt文本不仅对accessibility有帮助，也让搜索引擎理解图像内容。
图像文件名：
/* 不利于SEO */
<img src="IMG001234.jpg" alt="笔记本电脑">
/* 有利于SEO */
<img src="high-performance-laptop-model-xyz.jpg" alt="高性能笔记本电脑 - 型号XYZ">使用描述性的文件名可以为SEO提供额外的上下文。
基础语法：确保网站对移动设备友好。
视口设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这个meta标签告诉浏览器如何在移动设备上调整页面大小，对移动SEO至关重要。
响应式设计：
<picture>
<source media="(max-width: 600px)" srcset="small-image.jpg">
<source media="(max-width: 1200px)" srcset="medium-image.jpg">
<img src="large-image.jpg" alt="响应式图像">
</picture>响应式图像和设计有助于改善移动用户体验，这对SEO越来越重要。
基础语法：使用结构化数据标记帮助搜索引擎理解页面内容。
JSON-LD格式：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "高性能笔记本电脑XYZ",
"description": "这是一款高性能商务笔记本电脑...",
"brand": {
"@type": "Brand",
"name": "品牌名称"
},
"offers": {
"@type": "Offer",
"price": "5999.00",
"priceCurrency": "CNY",
"availability": "https://schema.org/InStock"
}
}
</script>结构化数据可以生成富媒体搜索结果（如评分、价格等），提高点击率。
以下是HTML初学者常见的错误，了解这些可以帮助你避免同样的问题。
错误的写法：
<div>
<p>这是一个段落。
</div>正确的写法：
<div>
<p>这是一个段落。</p>
</div>解释：未闭合的标签会导致页面结构混乱，显示异常。
错误的写法：
<strong><em>强调文本</strong></em>正确的写法：
<strong><em>强调文本</em></strong>解释：标签必须正确嵌套，后打开的标签应该先关闭。
错误的写法：
<p>5 < 10 是真的，& 5 > 2 也是真的。</p>正确的写法：
<p>5 < 10 是真的，& 5 > 2 也是真的。</p>解释：HTML中某些字符（如 <, >, &）有特殊含义，需要使用字符实体（转义）来显示。常见的字符实体包括：
错误的写法：
<a href=https://example.com>链接</a>正确的写法：
<a href="https://example.com">链接</a>解释：虽然在某些情况下HTML允许省略引号，但始终使用引号是一种良好的做法，特别是当属性值包含空格时。
错误的写法：
<font color="red">红色文本</font>
<center>居中文本</center>正确的写法：
<p style="color: red;">红色文本</p>
<p style="text-align: center;">居中文本</p>解释：某些HTML标签和属性已经废弃，应该使用CSS来控制样式。
错误的写法：
<img src="image.jpg">正确的写法：
<img src="image.jpg" alt="图像描述">解释：alt属性对于无障碍性和SEO都很重要，应始终包含。
不推荐的写法：
<p style="color: blue; font-size: 14px;">
这是一个段落 <span onclick="alert('点击了!')">点击我</span>
</p>推荐的写法：
<!-- HTML -->
<p class="paragraph">
这是一个段落 <span id="clickable">点击我</span>
</p>
<!-- CSS（放在单独的文件或style标签中） -->
<style>
.paragraph {
color: blue;
font-size: 14px;
}
</style>
<!-- JavaScript（放在单独的文件或script标签中） -->
<script>
document.getElementById('clickable').addEventListener('click', function() {
alert('点击了!');
});
</script>解释：分离HTML、CSS和JavaScript可以提高代码的可维护性和可读性。
错误的写法：
用户名: <input type="text" name="username">正确的写法：
<label for="username">用户名:</label>
<input type="text" name="username" id="username">解释：为表单元素提供标签有助于提高可用性和无障碍性。
错误的写法：
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎</h1>
</body>
</html>正确的写法：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎</h1>
</body>
</html>解释：DOCTYPE声明告诉浏览器使用哪种HTML版本渲染页面，缺少它可能导致浏览器进入"怪异模式"。
不推荐的做法：使用表格（<table>）进行页面布局。
推荐的做法：使用CSS技术进行布局，如Flexbox或Grid。
解释：表格应该只用于展示表格数据，而不是控制页面布局。使用CSS进行布局提供更好的响应式设计和无障碍性。
以下是一些HTML编码的最佳实践，可以帮助你编写更好的代码。
始终在HTML文档的开头包含正确的DOCTYPE声明，以确保浏览器以标准模式渲染页面。
<!DOCTYPE html>选择能够准确描述内容的HTML标签，而不是仅基于样式需求。
/* 不推荐 */
<div class="article">
<div class="heading">文章标题</div>
<div>这是文章内容...</div>
</div>
/* 推荐 */
<article>
<h2>文章标题</h2>
<p>这是文章内容...</p>
</article>保持HTML（内容）、CSS（表现）和JavaScript（行为）的分离。
/* HTML文件中 */
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 内容在这里 -->
<script src="script.js"></script>
</body>始终为图像提供alt属性，并考虑使用响应式图像技术。
/* 基本图像 */
<img src="image.jpg" alt="描述性文本">
/* 响应式图像 */
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="描述性文本">
</picture>编写包容性代码，确保所有用户都能访问您的内容。
使用一致的缩进和代码格式，以提高可读性。
/* 一致的格式示例 */
<div class="container">
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
</div>虽然HTML不区分大小写，但使用小写是最佳实践。
/* 推荐 */
<a href="https://example.com">链接</a>
/* 不推荐 */
<A HREF="https://example.com">链接</A>在属性值上使用一致的引号风格（单引号或双引号）。
/* 一致使用双引号 */
<a href="https://example.com" title="访问example">链接</a>
/* 或者一致使用单引号 */
<a href='https://example.com' title='访问example'>链接</a>保持代码简洁，避免不必要的包装元素。
/* 不推荐 */
<div class="container">
<span>文本</span>
</div>
/* 如果不需要额外的容器，可以简化为 */
<div class="container">
文本
</div>使用W3C验证器等工具定期验证您的HTML代码，确保它符合标准。
以下是一些帮助你进一步学习和提高HTML技能的资源。