HTML - Bookends

什么是 HTML

HTML（Hyper Text Markup Language）是一种超文本标记语言，用于描述网页的结构和内容。

Web 标准

Web 标准由 W3C（万维网联盟）制定，包含三个部分：

方面	技术	作用
结构	HTML	网页元素
表现	CSS	样式
行为	JavaScript	交互

基本框架

<html>
    <head>html头部</head>
    <body>html主体</body>
</html>

完整框架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    主要内容
</body>
</html>

头部标签详解

DOCTYPE 声明

<!DOCTYPE html>

告诉浏览器使用 HTML5 版本来显示网页
位于文档最前面，不是一个 HTML 标签

lang 语言

<html lang="zh-CN">

en：英语，zh-CN：中文

charset 字符集

<meta charset="UTF-8">

UTF-8 是国际通用字符集，GBK 是中国中文字符集

移动端适配

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width：视口宽度等于设备宽度
initial-scale=1.0：初始缩放比例
user-scalable=no：禁止用户缩放

title 标题

<title>网页标题</title>

显示在浏览器标题栏上。

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

h 是 header 的缩写
标题标签独占一行

段落标签

<p>这是一个段落。</p>

段落文字会随窗口大小自动换行
段落之间有空隙

文本格式化标签

标签	作用
`<strong>` `<b>`	加粗
`<em>` `<i>`	斜体
`<del>` `<s>`	删除线
`<ins>` `<u>`	下划线
`<sup>`	上标
`<sub>`	下标

注释

<!-- HTML 注释内容 -->

/* CSS 注释内容 */

// JavaScript 注释

特殊字符

字符	描述	代码
空格	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`

文件路径

相对路径：相对于当前文件的路径
绝对路径：从根目录开始的完整路径
Windows 用反斜杠 \，Linux/Web 用正斜杠 /

换行标签

<br />

强制换行，单标签无闭合。

水平线标签

<hr />

用于分割内容，单标签无闭合。

图像标签

<img
  src="图像URL"
  alt="图像无法显示时的替代文本"
  title="鼠标悬停时显示的文本"
/>

src：图片路径（必须属性）
alt：替换文本
title：提示文本
width / height：设置宽高

超链接

基本语法

<a href="链接目标" target="打开方式">文本或图像</a>

核心属性

属性	说明
`href`	链接目标的 URL（必须）
`target`	`_self`（当前窗口）/ `_blank`（新窗口）

常见链接类型

外部链接（必须带 http:// 或 https://）：

<a href="http://www.baidu.com">百度</a>

内部链接：

<a href="/about.html">关于我们</a>

下载链接：

<a href="files/document.pdf" download>下载文档</a>

空链接（占位测试用）：

<a href="#">空链接</a>

图片链接：

<a href="http://example.com">
  <img src="image.jpg" alt="描述" />
</a>

锚点链接（页面内跳转）：

<h2 id="two">第二部分</h2>
<a href="#two">跳到第二部分</a>

注意事项

外部链接必须写全协议，否则会被识别为相对路径
使用 target="_blank" 时建议加 rel="noopener noreferrer" 防止安全风险

视频

<video src="movie.mp4" controls width="600">
  您的浏览器不支持 video 标签。
</video>

多格式兼容写法：

<video controls width="600" poster="cover.jpg">
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持 HTML5 视频。
</video>

常用属性：

属性	说明
`controls`	显示播放控件
`autoplay`	自动播放（需配合 `muted`）
`loop`	循环播放
`muted`	静音
`poster`	预览图
`width` / `height`	播放器宽高

音频

<audio src="music.mp3" controls>
  您的浏览器不支持 audio 标签。
</audio>

多格式兼容：

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

常见音频格式：MP3（兼容性最广）、Ogg、WAV、AAC。

Track 字幕

<video controls width="700">
  <source src="video.mp4" type="video/mp4">
  <track src="subs-zh.vtt" kind="subtitles" srclang="zh-CN" label="中文" default>
  <track src="subs-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

核心属性：

属性	说明
`src`	`.vtt` 文件 URL
`kind`	subtitles / captions / descriptions / chapters / metadata
`srclang`	语言代码（如 `zh-CN`）
`label`	轨道标题
`default`	默认启用

WebVTT 文件示例（.vtt）：

WEBVTT
00:00:00.000 --> 00:00:03.500
欢迎收看本教程
00:00:04.000 --> 00:00:07.200
今天我们来学习 HTML 的 track 标签

媒体通用注意事项

多数浏览器不允许带声音自动播放，除非设置 muted
为最大兼容性，建议同时提供 MP4/MP3 和 WebM/Ogg 版本
可通过 JavaScript 控制播放：video.play() / video.pause()

列表

标签	作用
`<ul>`	无序列表，列表项前显示圆点
`<ol>`	有序列表，列表项前显示数字
`<li>`	列表项，必须放在 ul 或 ol 中
`<dl>`	自定义列表
`<dt>`	自定义列表中的术语
`<dd>`	自定义列表中的描述

表格

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
  </tbody>
</table>

标签	作用
`<table>`	表格容器
`<thead>`	表头区域
`<th>`	表头单元格（文字加粗居中）
`<tr>`	行
`<td>`	普通单元格
`<tbody>`	表格主体
`<tfoot>`	表尾（不常用）

单元格合并

<td rowspan="2">跨两行</td>
<td colspan="2">跨两列</td>

rowspan：跨行合并
colspan：跨列合并
左上原则：合并从左上角单元格开始

元素类型

块级元素

独占一行
可嵌套其他元素
如 <p>、<div>、<h1>~<h6>

内联元素

不独占一行，一行可放多个
不可嵌套块级元素
如 <a>、<span>、<img>

div 与 span

<div>块级容器，配合 CSS 布局</div>
<span>内联容器，配合 CSS 局部样式</span>

<div>：块级，无实际语义，纯布局容器
<span>：内联，无实际语义，用于包裹文本

语义化结构标签

标签	作用
`<header>`	页眉（头部）
`<main>`	主体内容（每页唯一）
`<nav>`	导航栏
`<article>`	文章
`<section>`	分块/章节
`<aside>`	侧边栏
`<footer>`	页脚

表单

表单容器

<form action="提交地址">
  <!-- 表单控件 -->
</form>

输入控件

<input type="text" name="username" value="默认值" placeholder="提示文本" />

属性	说明
`type`	控件类型（text / password 等）
`name`	控件名称，提交到后端用
`value`	默认值
`placeholder`	提示文本
`disabled`	禁用
`autocomplete`	自动填充，on / off

文本域

<textarea name="content" cols="30" rows="10" placeholder="请输入文本"></textarea>

cols：列数（一行多少字符）
rows：行数

文件上传

<input type="file" name="file" multiple accept=".jpg,.png,.zip" />

multiple：允许多选
accept：限制文件类型

单选框

<input type="radio" name="gender" value="0" checked />女
<input type="radio" name="gender" value="1" />男

name 相同的为一组，组内只能选一个
checked：默认选中

复选框

<input type="checkbox" name="hobby" value="0" />篮球
<input type="checkbox" name="hobby" value="1" />足球

下拉列表

<select>
  <option value="北京" selected>北京</option>
  <option value="上海">上海</option>
</select>

selected：默认选中

按钮

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

type	行为
`submit`	提交表单
`reset`	重置表单
`button`	无默认行为，需配合 JS

label 辅助标签

label 可提升用户体验，点击 label 自动聚焦到对应 input：

<!-- 方式一：直接包裹 -->
<label>用户名：<input type="text" name="username" /></label>

<!-- 方式二：for + id 关联 -->
<label for="username">用户名：</label>
<input type="text" name="username" id="username" />

字符	描述	代码
空格	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`

字符	描述	代码
空格	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`

字符	描述	代码
空格	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`