HTML核心概念及代码示例的梳理

一、HTML基础与文档结构

文档声明与根元素

xml 复制代码

<!DOCTYPE html> <!-- 声明HTML5文档类型 -->
<html lang="zh-CN"> <!-- 根元素，lang属性定义语言 -->
</html>

<!DOCTYPE html> 强制浏览器使用标准模式渲染

头部元数据

xml 复制代码

<head>
  <meta charset="UTF-8"> <!-- 字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式设计 -->
  <title>网页标题</title> <!-- 浏览器标签页显示 -->
  <link rel="stylesheet" href="styles.css"> <!-- 外部CSS -->
</head>

viewport 是移动端适配关键属性

主体内容容器
xml 复制代码
```
<body>
  
</body>
```

二、文本内容与格式化

标题与段落

xml 复制代码

<h1>主标题</h1> <!-- 一个页面建议只有一个h1 -->
<h2>二级标题</h2>
<p>段落文本，自动带上下边距</p>

文本修饰标签

xml 复制代码

<strong>重要文本（加粗）</strong> <!-- 语义化强调 -->
<em>强调文本（斜体）</em>
<del>删除线文本</del>
<u>下划线文本</u>
H<sub>2</sub>O <!-- 下标 -->
10<sup>2</sup> <!-- 上标 -->

特殊符号

xml 复制代码

&nbsp;   <!-- 空格 -->
&lt;     <!-- < -->
&gt;     <!-- > -->
&copy;   <!-- © -->

三、多媒体嵌入

图像
ini 复制代码
```
<img src="image.jpg" alt="图片描述" loading="lazy"> 
```
- alt 为无障碍访问必需属性，loading="lazy" 启用懒加载

音频与视频

bash 复制代码

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="600" poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

HTML5原生支持媒体播放，无需插件

四、列表与表格

有序/无序列表

xml 复制代码

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

<ol type="A" start="3"> <!-- 从C开始的大写字母列表 -->
  <li>第一项</li>
</ol>

表格结构

xml 复制代码

<table border="1">
  <tr>
    <th>姓名</th> <!-- 表头 -->
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

五、表单与用户输入

表单容器

ini 复制代码

<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="user" required>
</form>

输入控件

xml 复制代码

<input type="email" placeholder="邮箱"> <!-- 邮箱验证 -->
<input type="date"> <!-- 日期选择器 -->
<input type="range" min="0" max="100"> <!-- 滑块 -->
<textarea rows="4"></textarea> <!-- 多行文本 -->
<select>
  <option value="bj">北京</option>
</select>

HTML5新增输入类型增强用户体验

六、HTML5语义化布局

css 复制代码

<header>网站头部</header>
<nav>导航栏</nav>
<main>
  <article>独立内容（如博客文章）</article>
  <aside>侧边栏</aside>
</main>
<section>内容区块</section>
<footer>页脚信息</footer>

优势：
- 提升SEO友好性
- 改善无障碍访问
- 代码可读性更强

七、超链接与资源

基础链接

ini 复制代码

<a href="https://example.com" target="_blank">在新标签页打开</a>

功能链接

xml 复制代码

<a href="tel:13800138000">电话联系</a>
<a href="mailto:contact@example.com">发送邮件</a>
<a href="#section-id">跳转到章节</a> <!-- 锚点链接 -->

八、元数据与脚本

CSS集成方式

xml 复制代码

<!-- 内联样式 -->
<p style="color:red;">红色文本</p>

<!-- 内部样式表 -->
<style> body { margin:0; } </style>

<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

JavaScript集成

xml 复制代码

<!-- 内嵌脚本 -->
<script> alert('页面加载！'); </script>

<!-- 外部脚本 -->
<script src="app.js" defer></script>

defer 属性确保脚本在DOM解析后执行

九、注释与调试

xml 复制代码

<!-- 这行注释不会显示在浏览器中 -->
<!-- 
  多行注释
  用于代码说明或临时禁用代码块
-->

快捷键：VS Code中按 Ctrl+/ 快速注释

十、现代开发实践

响应式图像

ini 复制代码

<picture>
  <source media="(min-width:800px)" srcset="large.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

语义化微数据

ini 复制代码

<div itemscope itemtype="https://schema.org/Person">
  姓名：<span itemprop="name">张三</span>
</div>

帮助搜索引擎理解内容结构

完整HTML5文档示例：

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>现代HTML示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <a href="#home">首页</a>
      <a href="#news">新闻</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>文章标题</h2>
      <p>这是<mark>重点内容</mark></p>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2025 公司名称</p>
  </footer>
  
  <script src="app.js"></script>
</body>
</html>

HTML核心概念及代码示例的梳理

​一、HTML基础与文档结构​​

​​二、文本内容与格式化​​

​​三、多媒体嵌入​​

​​四、列表与表格​​

​​五、表单与用户输入​​

​​六、HTML5语义化布局​​

​​七、超链接与资源​​

​​八、元数据与脚本​​

​​九、注释与调试​​

​​十、现代开发实践​​

一、HTML基础与文档结构

二、文本内容与格式化

三、多媒体嵌入

四、列表与表格

五、表单与用户输入

六、HTML5语义化布局

七、超链接与资源

八、元数据与脚本

九、注释与调试

十、现代开发实践