HTML5 - 技术栈

一、前序

1、相关网址

W3C官网： www.w3c.org
W3School： www.w3school.com.cn
MDN： https://developer.mozilla.org/zh-CN/

2、常见浏览器的内核

Chrome：Blink（源自 WebKit 分支，谷歌主导）
IE：Trident（IE内核，已淘汰）
Edge：Blink
Firefox：Gecko（Mozilla 自研开源内核）
Safari：WebKit（苹果专属）
Opera：早期Presto，现Blink
国产 PC 浏览器（大多双核：Blink 极速 + Trident 兼容）

3、URL 编码

URL 只能使用ASCII 字符集在互联网上发送
如果 URL 包含 ASCII 集以外的字符，则必须对该 URL 进行转换。URL 编码使用 "%" 后跟十六进制数字来替换非 ASCII 字符
URL 不能包含空格。URL 编码通常用加号 (+) 或 %20 替换空格

4、网页三剑客

html：结构
css：样式
javascript：行为

5、HTML 发展历史

HTML1.0：1993年，由IETF发布
HTML2.0：1995年，由IETF发布
HTML3.2：1997年，由W3C 发布
HTML4.0/HTML4.01：1997--1999，由W3C 发布，分为三个版本：Strict（严格版）、Transitional（过渡版）、Frameset（框架版）
XHTML1.0：2000年，由W3C 发布，想把 HTML 改成严格 XML 语法
HTML5：
- 背景：各大浏览器厂商（谷歌、Mozilla、苹果、Opera）联合 WHATWG 工作组，脱离 W3C 保守路线，开发兼容、现代化新标准
- 2014：W3C 正式发布 HTML5 标准
- 现状：W3C 与 WHATWG 达成协议，不再发布 HTML6、HTML7 这类版本，HTML 是持续更新的动态标准

6、相关组织

W3C：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域最具影响力的技术标准机构
WHATWG：Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组）成立于2004年，是一个以推动网络HTML 5 标准为目的而成立的组织。由Opera、Mozilla基金会、苹果，等这些浏览器厂商组成。官网： https://whatwg.org/

7、源代码

浏览器右键点击【查看网页源代码】：看到的是程序员编写的源代码
浏览器右键点击【检查】（常用）：看到的是经过浏览器 "处理" 后的源代码，会自动修复了一些错误语法

8、开发工具VSCode

轻量便捷、功能丰富、免费
常用设置：字体大小、主题、图标主题
生成html结构
- 创建html文件，输入 ! ，随后回车即可快速生成标准结构
- 配置 VScode 的内置插件 emmet ，可以对生成结构的属性进行定制，如指定lang=zh-CN
安装常用插件
- 中文简体语言包
- Live Server 插件：以服务器方式部署并打开网页；代码改动后自动刷新

二、HTML4

1、入门

HyperText Markup Language（超文本标记语言）
文件后缀名.html或.htm
代码中的多个空格、多个回车，都会被浏览器解析成一个空格

1）标签

又称元素
分为双标签和单标签，单标签不用闭合 ，如<br>（但在xhtml中必须写成<br/>）
标签名不区分大小写，推荐小写
语义化：标签的默认效果不重要（后期通过 CSS 控制效果），语义最重要，可读性强

2）标签属性

不同的标签具有不同的属性，也有一些通用属性：
- id：给标签指定唯一标识，id不能重复
- class：类名
- style：设置行内样式
- title：设置一个文字提示，鼠标悬停时显示
- lang ：给标签指定语言，如"en、en-US"
- dir：内容的方向，值:ltr、rtl
属性名不区分大小写，推荐小写

属性值建议使用引号包裹

html 复制代码

<!-- 可以使用双引号或单引号，甚至不写都行 -->
<p title=Bill>
<!-- 如果值包含空格，则必须使用引号 -->
<p title="Bill 'ShotGun' Nelson">
<p title='Bill "ShotGun" Nelson'>

有些特殊的属性没有属性名，只有属性值，如disabled

3）注释

4）文档声明

作用：告诉浏览器当前网页的版本，必须在网页的第一行
旧写法：要依网页所用的HTML版本而定，写法有很多
新写法：W3C 推荐使用 HTML 5 的写法<!DOCTYPE html>

5）字符编码

存储网页源代码时采用哪种方式编码，浏览器读取渲染时就要采用哪种方式解码，否则数据乱码
最佳实践
- 编写 html 文件时，统一用 UFT-8 编码
- 为了让浏览器在渲染 html 时不乱码，使用meta标签指定字符编码<meta charset="UTF-8">

6）设置语言

作用：让浏览器显示对应的翻译提示；有利于搜索引擎优化
写法：<html lang="zh-CN">
属性值格式（语言-国家/地区）
- zh-CN ：中文-中国大陆（简体中文）
- zh-TW ：中文-中国台湾（繁体中文）
- en-US ：英语-美国
- en-GB ：英语-英国

7）标准结构

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这些写网页标题</title>
</head>
<body>
   这里写网页内容 
</body>
</html>

2、基础

块级元素：独占一行，排版标签都是块级元素
行内元素：不独占一行

1）排版标签

h1-h6：标题
- <h1> 定义最重要的标题。<h6> 定义最不重要的标题
- 搜索引擎使用标题来索引网页的结构和内容。一般一个网页仅使用一个 <h1>
p：段落
div：没有任何语义，用于整体布局

2）文本标签

用于包裹词汇、短语等。通常都是行内元素
常用
- em：定义强调文本。其内容通常以斜体显示
- strong：定义具有强烈重要性的文本。其内容通常以粗体显示
- span：没有语义，用于包裹短语的通用容器
- del ：删除的文本
- ins：插入的文本
- sub、sup：下标文字、上标文字

3）图片标签

img
- 行内块元素
- 请始终指定图像的宽度和高度。这可以减少闪烁，因为浏览器可以在加载之前为图像预留空间
属性
- src ：图片路径
- alt ：图片描述。作用：搜索引擎通过 alt 属性得知图片的内容。当图片无法展示时候，有些浏览器会呈现 alt 属性的值
- width ：图片宽度，单位是像素
- height ：图片高度，单位是像素
常见图片格式
- jpg/jpeg
  - 是一种有损的压缩格式
  - 特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图
- png
  - 是一种无损的压缩格式，能够更高质量的保存图片
  - 特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。如logo
- bmp
  - 不进行压缩的一种格式，在最大程度上保留图片更多的细节
  - 特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。网页中很少使用
- gif
  - 仅支持256种颜色，色彩呈现不是很完整
  - 特点：支持的颜色较少、支持简单透明背景、支持动态图
- webp
  - 谷歌推出的一种格式，专门用来在网页中呈现图片
  - 特点：具备上述几种格式的优点，但兼容性不太好，使用时需要解决兼容性问题
- base64
  - 把图片进行 base64 编码，形成一串文本。直接作为 img 标签的 src 属性的值即可，要通过浏览器打开
- ico
  - 可配置网站图标，名字为"favicon.ico"。一般将图标保存到 Web 服务器的根目录
  - 使用 link 元素插入网站图标
  html 复制代码
```
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
```

4）超链接

a标签是行内元素，但可以包裹除它自身外的任何元素
属性
- href ：指定要跳转到的具体目标
- target ：控制跳转时如何打开页面，常用值
  - _self ：在本窗口打开
  - _blank：在新窗口打开
- name ：元素的名字，写在 a 标签中，也能设置锚点

作用

跳转到指定页面

跳转到指定文件（也可触发下载）

html 复制代码

<!-- 浏览器能直接打开的文件 -->
<a href="xxx.jpg">看自拍</a>
<a href="xxx.mp4">看小电影</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="xxx.zip">内部资源</a>
<!-- 强制触发下载，download属性值即为下载文件的名称-->
<a href="xxx.mp4" download="xxx.mp4">下载电影</a>

跳转到锚点位置

html 复制代码

<!-- 1、定义锚点： 
	具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点
	注意 name 和 id 都是区分大小写的 -->
<!-- 第一种方式：a标签配合name属性  -->
<a name="anchor1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="anchor2">我是一个位置</h2>

<!-- 2、跳转锚点 -->
<a href="#anchor1">跳转anchor1锚点</a>
<a href="index.html#anchor1">跳转到deindexmo.html页面的anchor1锚点</a>
<a href="#">回到本页顶部</a>
<a href="">刷新本页面</a>

唤起指定应用

html 复制代码

<a href="tel:10010">电话联系</a>
<a href="mailto:someone@example.com">发送电子邮件</a>
<a href="sms:10010">短信联系</a>

执行js

html 复制代码

<a href="javascript:;">如果还不知道执行什么，可以留空</a>
<a href="javascript:alert(1);">点我弹窗</a>

5）列表

有序列表ol（order list）：li是一个列表项
无序列表ul（unorder list）：li是一个列表项
自定义列表dl：dt是一个标题， dd 就是描述（可以有多个）

6）表格

组成：标题caption、头部thead、主体tbody、脚注tfoot
一般通过CSS来控制样式

html 复制代码

<!-- 
border ：只能控制表格最外侧边框的宽度,并不控制单元格边框的宽度
height ：设置表格最小高度，表格最终高度可能比设置的值大 
cellspacing ： 设置单元格之间的间距
-->
<table border="10" width="500" height="500" cellspacing="0">
    <caption>学生信息</caption>
    <thead height="50" align="center" valign="middle">
        <tr>
            <!-- 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
width ：设置单元格的宽度，同列所有单元格全都受影响。
heigth ：设置单元格的高度，同行所有单元格全都受影响。 -->
            <th width="50" height="50" align="right" valign="bottom">姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>民族</th>
            <th>政治面貌</th>
        </tr>
    </thead>
    <tbody height="520" align="center" valign="middle">
        <tr height="50" align="center" valign="middle">
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>
        <tr>
            <td align="right" valign="top">李四</td>
            <td>女</td>
            <td>18</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>
    </tbody>
    <tfoot height="50" align="center" valign="middle">
        <tr>
            <!-- colspan 跨列；rowspan 跨行 -->
            <td colspan="5">共计：2人</td>
        </tr>
    </tfoot>
</table>

7）表单

在提交表单时，禁用的输入字段的值不会被发送；没有name属性的字段的值不会被发送

html 复制代码

<!-- form
    action 属性： 表单要提交的地址。如果省略 action 属性，则将 action 设置为当前页面
    target 属性： 交表单后在何处显示响应，_self（默认）、_blank、_parent、_top、framename
    method 属性： 请求方式
-->
<form action="https://search.jd.com/search" target="_blank" method="get">
    <!-- fieldset 可以为表单控件分组、 legend 标签是分组的标题。 -->
    <fieldset>
        <legend>主要信息</legend>
        <!-- label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
			方式1：让 label 标签的 for 属性的值等于表单控件的 id  -->
        <label for="zhanghu">账户：</label>
        <!-- input
            type 属性： 指定表单控件的类型。值： text、password、radio、checkbox、hidden、submit、reset、button、file 等。
            name 属性： 指定数据名称
            value 属性：
                对于输入框：指定默认输入的值；
                对于单选和复选框：实际提交的数据；
                对于按钮：显示按钮文字
            disabled 属性： 设置表单控件不可用。
            maxlength 属性： 用于输入框，设置最大可输入长度。
            checked 属性： 用于单选按钮和复选框，默认选中
        -->
        <!-- 文本输入框 -->
        <input
               id="zhanghu"
               type="text"
               name="account"
               value="zhangsan"
               maxlength="10"
               />
        <br />
        <!-- 方式2： 把表单控件套在 label 标签的里面 -->
        <label>
            <!-- 密码输入框 -->
            密码：<input type="password" name="pwd" value="123" maxlength="6" />
        </label>
    </fieldset>
    <br />
    <!-- 单选框 多个name 属性值要保持一致 -->
    性别：
    <input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="female" checked />女<br />
    <!-- 多选框 多个name 属性值要保持一致-->
    爱好：
    <input type="checkbox" name="hobby" value="smoke" checked />抽烟
    <input type="checkbox" name="hobby" value="drink" />喝酒
    <input type="checkbox" name="hobby" value="perm" checked />烫头<br />
    其他：
    <!-- 文本域
        name 属性： 指定数据名称
        rows 属性： 指定默认显示的行数，影响文本域的高度
        cols 属性： 指定默认显示的列数，影响文本域的宽度
        disabled 属性： 设置表单控件不可用
        -->
    <textarea name="other" cols="23" rows="3"></textarea><br />
    籍贯：
    <!-- 下拉框
        select
            name ： 指定数据名称
			multiple： 允许多选
            disabled ： 设置整个下拉框不可用
        option
            disabled ： 设置拉下选项不可用
            value ：提交的数据，如果没有 value 属性，提交的数据是 option 中间的文字
            selected ： 默认选中
        -->
    <select name="place">
        <option value="冀">河北</option>
        <option value="鲁">山东</option>
        <option value="晋" selected>山西</option>
        <option value="粤">广东</option>
    </select>
    <!-- 隐藏域 -->
    <input type="hidden" name="from" value="toutiao" />
    <br />
    <!-- 确认按钮_第一种写法 type 属性的默认值是 submit -->
    <button type="submit">确认</button>
    <!-- 确认按钮_第二种写法 -->
    <!-- <input type="submit" value="确认"> -->
    <!-- 重置按钮_第一种写法 -->
    <button type="reset">重置</button>
    <!-- 重置按钮_第二种写法 -->
    <!-- <input type="reset" value="重置"> -->
    <!-- 普通按钮_第一种写法 -->
    <button type="button">检测账户是否被注册</button>
    <!-- 普通按钮_第二种写法 -->
    <!-- <input type="button" value="检测账户是否被注册"> -->
</form>

8）框架

html 复制代码

<!-- 作用1：利用iframe嵌入其他内容
      frameborder 是否显示边框，值：0或者1
-->
<iframe src="https://www.toutiao.com" width="900" height="300" frameborder="0"></iframe> 
<iframe src="xxx.pdf" frameborder="0"></iframe>


<!-- 作用2：与超链接或表单的 target 配合，展示不同的内容 -->
<iframe name="container" frameborder="0" width="900" height="300"></iframe>

<!-- 与超链接的target属性配合使用 -->
<a href="https://www.toutiao.com" target="container">点我看新闻</a>
<a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
<!-- 与表单的target属性配合使用 -->
<form action="https://so.toutiao.com/search" target="container">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>

9）其他标签

br 换行
hr 分割
pre 按原文显示（一般用于嵌入代码）

10）字符实体

HTML中的保留字符必须替换为字符实体，如小于号 < 用于定义 HTML 标签的开始。如果希望浏览器显示这些字符，必须在 HTML 源码中插入字符实体
字符实体的组成：&实体名称; 或 &#实体编号;
常用字符实体
- 空格： 或  
- 版权（copyright）：©或©
- 小于号：<或<

11）meta元信息

html 复制代码

<head>
    <!-- 配置字符编码 -->
    <meta charset="UTF-8" />
    <!-- 针对IE浏览器的一个兼容性设置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 设置视口
		width=device-width 部分将页面宽度设置为跟随设备的屏幕宽度（这将根据设备而变化）
		initial-scale=1.0 部分设置页面首次被浏览器加载时的初始缩放级别
	-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 配置网页的关键字 -->
    <meta name="keywords" content="xxx" />
    <!-- 配置网页描述信息 -->
    <meta name="description" content="xxx" />
    <meta name="author" content="xxx">
    <meta name="copyright" content="2025-2026©版权所有">
    <!-- 自动刷新，每3s刷新 -->
    <!-- <meta http-equiv="refresh" content="3"> -->
    <!-- 10s后跳转到百度 -->
    <meta http-equiv="refresh" content="10;url=http://www.baidu.com" />
    <!-- 针对搜索引擎爬虫配置 -->
    <meta name="robots" content="xxx">
</head>

三、HTML5

HTML5 在狭义上是指新一代的 HTML 标准，在广义上是指整个前端
优势
1. 新增了一些语义化标签、全局属性，更加侧重语义化
2. 新增了多媒体标签，可以很好的替代 flash
3. 可移植性好，可以大量应用在移动设备上
4. 兼容性好，支持主流浏览器
5. 针对 JavaScript新增了很多可操作的接口

1、新增语义化标签

1）布局标签

header 头部
footer 底部
nav 导航
aside 侧边栏

article 指定独立、自包含的内容，如文章、帖子、杂志、新闻、博客、评论等

html 复制代码

<article>
    <h2>Google Chrome</h2>
    <p>Google Chrome 是由 Google 开发的网页浏览器，于 2008 年发布。Chrome 是当今世界上最流行的网页浏览器！</p>
</article>

section 定义文档中的一个节，如某段文字，通常里面会包含标题

html 复制代码

<section>
    <h1>WWF</h1>
    <p>世界自然基金会（WWF）是一个致力于环境保护、研究和恢复的国际组织，前身为世界野生动物基金会。WWF 成立于 1961 年。</p>
</section>

注意：article 和 section 根据使用场景可以互相嵌套

2）状态标签

meter
- 语义：定义已知范围内的标量测量。也被称为 gauge （尺度），例如：电量、磁盘用量
- 属性
  - high 规定高值
  - low 规定低值
  - max 规定最大值
  - min 规定最小值
  - optimum 规定最优值
  - value 规定当前值
progress
- 语义：显示某个任务完成的进度的指示器，一般用于表示进度条
- 属性
  - max 规定目标值
  - value 规定当前值

3）列表标签

datalist 用于搜索框的关键字提示

html 复制代码

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

details 用于展示问题（summary）和答案，或对专有名词进行解释
html 复制代码
```
<details>
    <summary>1+1=？</summary>
    <p>2</p>
</details>
```

4）文本标签

文本注音

html 复制代码

<ruby>
    <span>张三</span>
    <rt>zhang san</rt>
</ruby>

文本标记：mark
- 常用于标记搜索结果中的关键字

2、新增表单功能

1）新增属性

placeholder 提示文字，适用于文字输入类的表单控件
autocomplete 自动完成，可以设置为 on 或 off ，适用于文字输入类的表单控件，密码和多行文本不可用
pattern 填写正则表达式，适用于文本输入类表单控件。多行输入不可用，且空的输入框不会验证，往往与 required 配合
required 必填，适用于除按钮外其他表单控件
autofocus 自动获取焦点，适用于所有表单控件
novalidate form标签属性，表单提交的时候不再进行验证

2）input type新增属性值

email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url url类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number 数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search 搜索类型的输入框，表单提交时不会验证格式。
tel 电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。
range 范围选择框，默认值为 50 ，表单提交时不会验证格式。
color 颜色选择框，默认值为黑色，表单提交时不会验证格式。
date 日期选择框，默认值为空，表单提交时不会验证格式。
month 月份选择框，默认值为空，表单提交时不会验证格式。
week 周选择框，默认值为空，表单提交时不会验证格式。
time 时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local 日期+时间选择框，默认值为空，表单提交时不会验证格式。

3、新增多媒体标签

HTML 标准仅支持 MP4、WebM 和 Ogg 视频格式
HTML 标准仅支持 MP3、WAV 和 Ogg 音频格式

1）视频标签video

src 视频地址
poster 视频封面URL地址
width 播放器的宽度
height 播放器的高度
controls 向用户显示视频控件（比如播放/暂停按钮）
muted 静音
autoplay 自动播放，Chromium 浏览器在大多数情况下不允许自动播放。但是，静音+自动播放是允许的
loop 循环播放
preload 视频预加载，如果使用 autoplay ，则忽略该属性
- none : 不预加载视频
- metadata : 仅预先获取视频的元数据（例如长度）
- auto : 下载整个视频文件

html 复制代码

<video width="320" height="240" controls muted autoplay>
    <!-- 
<source> 元素指定浏览器可以选择的备用视频文件。浏览器将使用第一个识别的格式。
<video> 和 </video> 标签之间的文本仅在不支持 <video> 元素的浏览器中显示
-->
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

2）音频标签audio

src 音频地址、controls、muted、autoplay、loop、preload
使用方法同video

4、新增全局属性

contenteditable：表示元素是否可编辑，true/false
draggable：表示元素可以被拖动，true/false
hidden：隐藏元素
spellcheck：规定是否对元素进行拼写和语法检查，true/false
contextmenu：规定元素的上下文菜单，在用户鼠标右键点击元素时显示
data-xxx ：用于存储页面的私有定制数据

5、兼容性处理

添加元信息，让浏览器处于最优渲染模式

html 复制代码

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签

html 复制代码

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

<!-- 语法： --> 
<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]--->
<!--[if lt IE 8]>仅IE8以下可见<![endif]--->
<!--[if gte IE 8]>IE8及以上可见<![endif]--->
<!--[if lte IE 8]>IE8及以下可见<![endif]--->
<!--[if !IE 8]>非IE8的IE可见<![endif]-->