HTML基础
前言
什么是 HTML？
HTML 是一种用于创建网页结构的标记语言，通过标签（Tag）定义内容的结构和呈现方式。
浏览器解析 HTML 文档后，将其渲染为可视化网页。
一、HTML 语法
1. HTML 基本骨架
所有 HTML 文档必须包含以下基本结构：
<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN"> <!-- 根标签，lang 定义页面语言 -->
<head>
<meta charset="UTF-8"> <!-- 字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title> <!-- 显示在浏览器标签页上的标题 -->
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>2. 标签关系
-
父子关系：标签嵌套形成层级结构（如
<ul>包含多个<li>）。 -
兄弟关系：同一层级的标签（如多个
<p>并列）。 -
自闭合标签：无内容的标签（如
<img>,<br>）。
二、核心内容标签
1. 标题标签 <h1> - <h6>
-
作用：定义标题层级，
<h1>最高级，<h6>最低级。 -
示例：
<h1>主标题</h1> <h2>次级标题</h2> <h3>三级标题</h3> -
SEO 建议：一个页面仅一个
<h1>，层级应清晰。
2. 段落标签 <p>
-
作用：定义文本段落。
-
示例：
<p>这是一个段落。</p> <p>这是另一个段落。</p>
3. 换行标签 <br>
-
作用：强制文本换行（无需闭合标签）。
-
示例：
<p>第一行文本<br>第二行文本</p>
4. 水平线标签 <hr>
-
作用：插入水平分隔线。
-
示例：
<p>第一部分内容</p> <hr> <p>第二部分内容</p>
三、文本格式化标签
1. 语义化标签
-
<strong>：表示重要文本（默认加粗）。 -
<em>：表示强调文本（默认斜体）。 -
<ins>：下划线文本。 -
<del>：删除线文本。 -
<mark>：高亮文本（黄色背景）。 -
<code>：显示代码片段（等宽字体）。 -
<blockquote>：长引用（缩进显示）。
2. 物理样式标签
-
<b>：加粗文本（无语义）。 -
<i>：斜体文本（无语义）。 -
<u>：下划线文本。 -
<s>：删除线文本。
3. 示例：
<p>
<strong>重要提示</strong>：请<em>立即</em>保存文件。
<code>print("Hello World")</code>
<mark>高亮内容</mark>
</p>语义化优先：优先使用 <strong> 而非 <b>，<em> 而非 <i>。
四、图像标签 <img>
1. 基本用法
<img src="image.jpg" alt="图片描述">-
关键属性：
-
src：图像路径（必填）。 -
alt：替代文本（图片无法显示时展示，必填）。 -
width/height：定义宽高（单位像素或百分比）。 -
title：悬停提示文本（可选）。
-
2. 响应式图像
<img
src="small.jpg"
srcset="large.jpg 1200w, medium.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="响应式图片"
>-
srcset：定义不同分辨率/尺寸的图片源。 -
sizes：定义图片在不同视口中的显示尺寸。
五、超链接标签 <a>
1. 基本用法
<a href="https://example.com" target="_blank">访问示例网站</a>-
关键属性：
-
href：链接目标（URL、文件路径、锚点#id）。 -
target：打开方式（_blank新标签页，_self当前页）。 -
download：强制下载文件（如download="filename.pdf"）。
-
2. 锚点链接
<a href="#section1">跳转到第一部分</a>
<!-- 目标位置 -->
<h2 id="section1">第一部分</h2>六、多媒体标签
1. 音频 <audio>
<audio controls autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>-
关键属性：
-
controls：显示播放控件。 -
autoplay：自动播放（部分浏览器限制）。 -
loop：循环播放。 -
muted：静音播放。
-
2. 视频 <video>
<video controls width="600" poster="preview.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>-
关键属性：
-
poster：视频封面图。 -
preload：预加载策略（auto、metadata、none）。 -
playsinline：移动端内联播放（避免全屏）。
-
七、列表（List）
1. 无序列表 <ul>
-
用途：展示无顺序关系的项目（默认用实心圆点标记）。
-
标签结构：
<ul> <li>项目1</li> <li>项目2</li> </ul> -
属性：
-
type：定义项目符号类型（disc（默认）、circle、square，但推荐用 CSSlist-style-type替代）。
-
2. 有序列表 <ol>
-
用途：展示有顺序关系的项目（默认用数字标记）。
-
标签结构：
<ol> <li>第一步</li> <li>第二步</li> </ol> -
属性：
-
type：编号类型（1（默认）、A、a、I、i）。 -
start：起始编号（如start="3"从 3 开始）。 -
reversed：倒序编号（如reversed）。
-
3. 定义列表 <dl>
-
用途：展示术语及其描述（如字典）。
-
标签结构：
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表</dd> </dl>
八、表格（Table）与合并单元格
1. 基本表格结构
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总计：1人</td>
</tr>
</tfoot>
</table>-
核心标签：
-
<table>：定义表格。 -
<tr>：表格行。 -
<th>：表头单元格（默认加粗居中）。 -
<td>：普通单元格。 -
<thead>/<tbody>/<tfoot>：语义化分组。
-
2. 合并单元格
-
跨列合并（
colspan）：<td colspan="2">占两列</td> -
跨行合并（
rowspan）：<td rowspan="2">占两行</td>
表格：
-
避免用表格布局（使用 CSS Grid/Flexbox）。
-
合并单元格时确保结构完整，避免跨分组（如
<thead>与<tbody>）。
九、表单（Form）与输入控件
1. 表单容器 <form>
<form action="/submit" method="POST" enctype="multipart/form-data">
<!-- 表单控件 -->
</form>-
关键属性：
-
action：提交目标 URL。 -
method：HTTP 方法（GET或POST）。 -
enctype：编码类型（上传文件需设为multipart/form-data）。
-
2. 输入控件 <input>
-
常见类型：
<!-- 文本输入 --> <input type="text" name="username" placeholder="用户名" required> <!-- 密码输入 --> <input type="password" name="password"> <!-- 单选按钮 --> <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 <!-- 复选框 --> <input type="checkbox" name="hobby" value="reading"> 阅读 <input type="checkbox" name="hobby" value="sports"> 运动 <!-- 文件上传 --> <input type="file" name="avatar" accept="image/*"> <!-- 隐藏字段 --> <input type="hidden" name="token" value="abc123"> -
通用属性：
-
name：字段名称（后端接收数据的键）。 -
value：默认值。 -
required：必填字段。 -
disabled：禁用控件。
-
3. 下拉菜单 <select>
<select name="country">
<option value="">请选择国家</option>
<option value="cn" selected>中国</option>
<option value="us">美国</option>
<optgroup label="欧洲">
<option value="fr">法国</option>
<option value="de">德国</option>
</optgroup>
</select>-
属性：
-
multiple：允许多选。 -
size：可见选项数。
-
4. 文本域 <textarea>
<textarea name="comment" rows="4" cols="50" placeholder="请输入评论"></textarea>-
属性：
-
rows：可见行数。 -
cols：可见列数（推荐用 CSS 控制宽度）。 -
maxlength：最大字符数。
-
5. 按钮<button>
-
<button>标签：<button type="submit">提交</button> <button type="reset">重置</button> <button type="button" onclick="alert('点击')">普通按钮</button> -
<input>类型按钮：<input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="普通按钮">
6.关联标签 <label>
-
作用：提升表单可访问性，点击标签可聚焦控件。
-
用法：
<!-- 显式关联（推荐） --> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <!-- 隐式关联 --> <label> <input type="checkbox" name="agree"> 同意协议 </label>
表单：
-
始终为
<input>添加name属性，否则数据无法提交。 -
使用
label提升可访问性。
十、容器标签 <div> 与 <span>
1. <div>
-
用途：块级容器，用于布局或样式分组。
-
示例：
<div class="container"> <h1>标题</h1> <p>段落内容</p> </div>
2. <span>
-
用途：行内容器，用于局部文本样式或操作。
-
示例：
<p>这是一段<span style="color: red;">红色文本</span>。</p>
十一、HTML 字符实体
1. 常见字符实体
| 字符 | 实体名称 | 实体编号 | 用途 |
|---|---|---|---|
< | < | < | 避免被解析为标签 |
> | > | > | 同上 |
& | & | & | 避免被解析为实体 |
|   | 非换行空格 | |
© | © | © | 版权符号 |
2. 使用示例
<p>10 > 5 & 5 < 10</p>
<p>版权所有 © 2023</p>
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<h1>什么是JavaScript</h1>
<hr>
<p>欢迎来到 MDN 的 JavaScript 初学者课程！本节将在一定高度俯瞰
JavaScript，回答一些诸如“它是什么？”和“它能做什么？”的问题。
并使你熟悉 JavaScript 的用途。</p>
<h2>高层定义</h2>
<p>
<strong>JavaScript</strong> 是一种 <em>脚本编程语言</em>，它可以在网页上实现
复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、
2D/3D 动画、滚动播放的视频等等—— <ins>JavaScript</ins>就在其中。 <del>它是标准
Web技术蛋糕的第三层</del> ，其中<a href="#">HTML</a> 和
<a href="#">CSS</a> 我们已经在学习区的其他部分进行了详细的讲解。
</p>
<h2>它到底可以做什么？</h2>
<p>不再是<mark>简单的</mark>静态信息</p>
<ul>
<li>交互式的地图</li>
<li>2D/3D 动画</li>
<li>滚动播放的视频</li>
</ul>
<ol>
<li>交互式的地图</li>
<li>2D/3D 动画</li>
<li>滚动播放的视频</li>
</ol>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td> -->
<!-- <td>全市第一</td> -->
</tr>
</tfoot>
</tbody>
</table>
<h1>注册信息</h1>
<form action="">
<h2>个人信息</h2>
<label>
姓名： <input type="text" placeholder="请输入姓名">
</label>
<br><br>
<label>
密码： <input type="password" placeholder="请输入密码">
</label>
<br><br>
<label>
<input type="radio" name="gender">男
</label>
<label>
<input type="radio" name="gender">女
</label>
<br><br>
<label>居住城市：</label>
<select>
<option>北京</option>
<option selected>上海</option>
<option>南京</option>
</select>
<h2>教育经历</h2>
<select>
<option>2022</option>
<option>2023</option>
<option>2024</option>
</select>
<span>--</span>
<select>
<option>2026</option>
<option>2027</option>
<option>2028</option>
</select>
<h2>工作经历</h2>
<textarea ></textarea>
<br><br>
<label>
<input type="checkbox">已阅读并同意以下协议：
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul>
</label>
<br>
<button type="submit">免费注册</button>
<button type="reset">清空</button>
</form>
<!-- <img src="https://www.runoob.com/wp-content/uploads/2013/07/js-logo.png"
alt="123" width="200">
<img src="./pixmap.png" width="300">
<br>
<audio src="./银临,Aki阿杰+-+牵丝戏.mp3" controls></audio>
<br>
<video src="./不眠之夜.mp4" controls height="300" ></video> -->
</body>
</html>
