上一篇
html网页开发难吗？零基础自学html网页开发教程
“`
- <!DOCTYPE html>：声明文档类型为 HTML5，告诉浏览器如何渲染页面。
- <html>：根元素，包含整个页面。lang 属性有助于搜索引擎和屏幕阅读器理解语言。
- <head>：包含元数据（Metadata），如字符集、视口设置、标题和链接的外部资源（CSS、JS），这部分内容不会直接显示在页面上。
- <body>：包含所有用户可见的内容，如文本、图片、链接、表格等。
常用语义化标签
现代 HTML 开发强调语义化，即使用最能描述内容含义的标签，这不仅有助于 SEO（搜索引擎优化），还能提高可访问性（Accessibility）。
| 描述 | 示例用途 | |
|---|---|---|
| <header> | 页面或章节的头部 | 网站 Logo、导航栏、文章标题 |
| <nav> | 导航链接部分 | 主菜单、面包屑导航 |
| <main> | 文档的主要内容 | 页面核心内容，每个页面应只有一个 |
| <section> | 文档中的独立章节 | 包含主题相关的一组内容 |
| <article> | 独立的、完整的内容 | 博客文章、新闻条目、论坛帖子 |
| <aside> | 侧边栏或附属内容 | 广告、相关链接、作者信息 |
| <footer> | 页面或章节的底部 | 版权信息、联系方式、网站地图 |
对比非语义化标签：
过去开发者常使用 <div> 包裹所有内容，虽然 <div> 依然有用（用于布局容器），但过度使用会导致代码缺乏语义，不利于无障碍访问和 SEO。
文本与媒体元素
文本格式化
- <h1> 到 <h6>，<h1> 最重要，<h6> 最次要。
- 段落：<p> 用于定义段落。
- 强调：
- <strong>：表示重要内容，通常加粗显示。
- <em>：表示强调语气，通常斜体显示。
- <mark>：高亮显示文本。
媒体嵌入
- 图片：<img src="image.jpg" alt="图片描述">。alt 属性至关重要，当图片加载失败时显示替代文本，也是屏幕阅读器读取的内容。
- 链接：<a href="https://example.com">链接文本</a>。href 指定目标地址。
- 视频/音频：使用 <video> 和 <audio> 标签，配合 src 或 <source> 子标签。
表单与用户交互
表单是用户与网页交互的主要方式。
- <form>：定义表单。action 指定数据提交地址，method 指定 HTTP 方法（GET 或 POST）。
- <input>：最通用的输入控件，通过 type 属性改变行为（如 text, password, email, checkbox, radio 等）。
- <label>：关联输入框，点击标签文字即可聚焦输入框，提升用户体验。for 属性需与对应 input 的 id 一致。
- <textarea>：多行文本输入。
- <button>：提交按钮。type="submit" 会触发表单提交。
表格（Table）
表格用于展示结构化数据,而非页面布局。
<table border="1"> <caption>员工信息表</caption> <thead> <tr> <th>姓名</th> <th>职位</th> <th>部门</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>工程师</td> <td>研发部</td> </tr> <tr> <td>李四</td> <td>设计师</td> <td>设计部</td> </tr> </tbody> </table>
- <table>：表格容器。
- <caption>。
- <thead> / <tbody>：表头和表体，便于样式分离和语义区分。
- <tr>：表格行（Table Row）。
- <th>：表头单元格（Table Header），默认加粗居中。
- <td>：标准数据单元格（Table Data）。
最佳实践与注意事项
- 始终闭合标签：虽然 HTML5 允许某些标签（如 <p>, <li>）不闭合，但养成闭合习惯（如 <br />, <img />）能避免兼容性问题。
- 使用小写字母：HTML 标签名应全部小写，如 <div> 而非 <DIV>。
- 属性值加引号：属性值建议始终用双引号包裹，如 <img src="a.jpg" alt="test">。
- 避免内联样式：尽量将 CSS 放在 <style> 标签或外部 .css 文件中，保持结构与表现分离。
- 响应式设计：在 <head> 中务必包含 <meta name="viewport" content="width=device-width, initial-scale=1.0">，以确保页面在移动设备上正确显示。
- 无障碍访问（A11y）：
- 为图片提供 alt 文本。
- 确保表单控件有对应的 <label>。
- 使用语义化标签帮助屏幕阅读器理解页面结构。
相关问题与解答
问题 1：HTML 中的 <div> 和 <span> 有什么区别？
解答：
<div> 和 <span> 都是通用的容器元素，本身没有特定的语义，但它们的应用场景不同：
- <div>（Division）：是一个块级元素（Block-level element），它默认占据父容器的全部宽度，并在前后换行，通常用于构建页面布局的大区块，如页头、侧边栏、内容区域等。
- <span>：是一个内联元素（Inline element），它只占据内容所需的宽度，不会换行，通常用于对文本中的某一部分进行样式修饰或脚本操作，例如将一段话中的某个词标红或添加点击事件。
示例：
<!-div 用于布局 --> <div class="container"> <p>这是一个段落。</p> </div> <!-span 用于文本样式 --> <p>这是一个<span class="highlight">重要</span>的词语。</p>
问题 2：为什么推荐使用语义化标签（如 <header>）而不是全部使用 <div>？
解答：
使用语义化标签主要有以下三大优势：
- SEO 优化：搜索引擎爬虫（如 Google Bot）通过标签含义来理解页面内容的重要性。<h1> 和 <article> 中的内容通常被认为比 <div> 中的内容更重要，有助于提高搜索排名。
- 可访问性（Accessibility）：屏幕阅读器（Screen Readers）依赖 HTML 语义来向视障用户描述页面结构，如果全部使用 <div>，用户可能无法快速导航到主要内容或理解页面布局，语义标签能让辅助技术更准确地传达信息。
- 代码可读性与维护性：语义化标签使代码自解释，看到 <nav> 就知道是导航，看到 <footer> 就知道是底部，无需查看 CSS 或注释即可理解结构，便于团队协作和后期维护。
