HTML基础概念
HTML（HyperText Markup Language）是构建网页的核心语言，通过标签定义内容的结构和语义。文档以.html或.htm为后缀，由浏览器解析渲染。基本结构包含<!DOCTYPE>声明、<html>根元素、<head>（元信息）和<body>（可见内容）。
示例代码：
<!DOCTYPE html> <html> <head> <title>页面标题</title> </head> <body> <h1>主标题</h1> <p>段落内容</p> </body> </html>核心标签分类
文本标签<h1>到<h6>定义标题层级，<p>表示段落，<span>为行内容器，<br>强制换行，<hr>插入水平线。
<h1>主标题</h1> <h2>次级标题</h2> <p>这是一个段落。<span>行内文本</span></p>格式化标签<strong>加粗强调，<em>斜体强调，<del>删除线，<sup>上标，<sub>下标。
<strong>加粗文本</strong> <em>斜体强调</em> <del>删除线文本</del> H<sub>2</sub>O 和 E=mc<sup>2</sup>多媒体标签<img src="url" alt="描述">嵌入图像，<audio>和<video>支持媒体播放，<source>指定多格式资源。
<img src="image.jpg" alt="描述文本" width="300"> <video controls> <source src="video.mp4" type="video/mp4"> </video>超链接与锚点
<a href="URL">链接文本</a>创建超链接，target="_blank"控制新标签页打开。锚点通过id属性跳转至页面特定位置：
<a href="#section1">跳转至第一节</a> <section id="section1">目标内容</section><a href="https://example.com" target="_blank">外部链接</a> <a href="#section1">跳转到章节</a> <section id="section1">目标内容</section>列表与表格
列表类型
- 无序列表
<ul>搭配<li>项 - 有序列表
<ol>自动编号 - 定义列表
<dl>包含术语<dt>和描述<dd><ul> <li>无序项1</li> <li>无序项2</li> </ul> <ol> <li>有序项1</li> <li>有序项2</li> </ol>
表格结构<table>定义表格，<tr>为行，<td>为单元格，<th>表头单元格，<caption>添加标题。
<table> <caption>学生成绩</caption> <tr> <th>姓名</th> <th>分数</th> </tr> <tr> <td>张三</td> <td>90</td> </tr> </table>表单与输入控件
<form action="URL" method="GET/POST">收集用户输入。常见控件：
- 文本输入：
<input type="text"> - 密码框：
<input type="password"> - 单选/复选框：
<input type="radio/checkbox"> - 下拉菜单：
<select>与<option> - 多行文本：
<textarea>
示例：
<form action="/submit" method="POST"> <label>用户名：<input type="text" name="user"></label> <button type="submit">提交</button> </form><input type="radio" name="gender" value="male"> 男 <input type="checkbox" name="hobby" value="reading"> 阅读 <select name="city"> <option value="bj">北京</option> </select> <textarea name="comment" rows="4"></textarea>语义化HTML5标签
HTML5引入语义化标签提升可读性和SEO：
<header>页眉<nav>导航栏<article>独立内容<section>文档分区<footer>页脚<aside>侧边内容<header>网站页眉</header> <nav> <a href="/">首页</a> </nav> <article> <h2>独立文章</h2> </article> <footer>版权信息</footer>
元信息与SEO优化
<head>内关键标签：
<title>影响搜索引擎标题<meta name="description">页面描述<meta charset="UTF-8">字符编码<link rel="icon" href="favicon.ico">网站图标<head> <title>页面标题（SEO关键）</title> <meta name="description" content="页面描述"> <meta name="keywords" content="HTML,教程"> <link rel="icon" href="favicon.ico"> </head>
性能与可访问性
性能优化
- 压缩图片减少加载时间
- 使用
<picture>响应式图像 - 延迟加载：
<img loading="lazy"><img src="image.jpg" alt="描述" loading="lazy"> <picture> <source media="(min-width: 800px)" srcset="large.jpg"> <img src="small.jpg" alt="响应式图像"> </picture>
可访问性
alt属性描述图像- ARIA角色：
<div role="button"> - 键盘导航支持
<button aria-label="关闭">X</button> <div role="navigation">导航区域</div>
验证与调试
使用W3C验证工具检查语法错误。开发者工具（F12）实时调试元素和样式。
进阶技巧
- 自定义数据属性：
<div><div><template id="card-template"> <div class="card">{{content}}</div> </template> - Web Components：通过
<custom-element>创建自定义标签
通过系统化掌握这些知识点，能构建结构清晰、语义明确且高性能的网页。持续关注HTML标准更新（如HTML5.3草案）保持技术前沿性。
