【前端三剑客】HTML 超文本标记语言

更新日期：2022/04/05
只要我们一起大笑，可怕的东西就会跑光光了。

目録

1. HTML 简介
2. DOCTYPE 声明
3. head 文档信息
4. 创建电子邮件链接
5. map 图像映射
6. 为 HTML 添加新元素/标签
7. Canvas 画布
8. SVG 简介
9. HTML 拖放
10. HTML 地理定位 Geolocation
11. input 类型
12. HTML 页面结构
13. Html5 新增属性和事件
- 13.1 HTML5 全局中新增属性
- 13.2 HTML5 标签中新增属性
- 13.3 HTML5 中新增事件
14. Html 标签列表大全（字母排序）

1. HTML 简介

HTML（Hyper Text Markup Language）是一种用于创建网页的标准标记语言，主要用来实现静态页面。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。
HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。HTML5 将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。

HTML 网页结构：只有 <body> 区域 (白色部分) 才会在浏览器中显示。

常见字符实体
虽然 html 不区分大小写，但实体字符对大小写敏感。

显示结果	描述	实体名称	实体编号
	空格	` `
<	小于号	`<`	<
>	大于号	`>`	>
&	和号	`&`	&
"	引号	`"`	"
'	撇号	`'`（IE不支持）	’
¢	美分	`¢`	¢
£	英镑	`£`	£
¥	日元	`¥`	¥
€	欧元	`€`	€
§	小节	`§`	§
©	版权	`©`	©
™	商标	`™`	™
®	注册商标	`®`	®
×	乘号	`×`	×
÷	除号	`÷`	÷

结合音标符
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。

音标符	字符	结合音标符	输出结果
̀	a	`à`	à
́	a	`á`	á
̂	a	`â`	â
̃	a	`ã`	ã
̄	a	`ā`	ā

2. DOCTYPE 声明

DOCTYPE 声明位于文档中的最前面的位置，处于 html 标签之前，有助于浏览器正确显示网页。它不是一个 HTML 标签，是用来告知 Web 浏览器页面使用了哪种 HTML 版本。网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。HTML5 不是基于 SGML，因此不要求引用 DTD。doctype 声明是不区分大小写的。

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

` HTML 4.01 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

3. head 文档信息

head 元素包含了所有的头部标签元素。在 head 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。
meta 如果设置了 name，说明是一个文档页面，适用于整个页面。
meta 如果设置了 http-equiv，说明是一个 pragma 指令，通常由Web服务器提供有关如何提供网页的信息。

viewport
提供有关视口初始大小的提示，仅供移动设备使用。

key	value	description
width	一个正整数或者字符串 device-width	以 pixels （像素）为单位，定义 viewport（视口）的宽度
height	一个正整数或者字符串 device-height	以 pixels （像素）为单位，定义 viewport（视口）的高度
initial-scale	一个 0.0 到 10.0 之间的正数	定义设备宽度与视口大小之间的缩放比率
maximum-scale	一个 0.0 到 10.0 之间的正数	定义缩放的最大值
minimum-scale	一个 0.0 到 10.0 之间的正数	定义缩放的最小值
user-scalable	一个布尔值（yes 或 no）	用户能否缩放网页，默认为 yes

<!--定义文档类型-->
<!DOCTYPE html>
<!-- HTML 的 lang 属性可用于声明网页或部分网页的语言，这对搜索引擎和浏览器是有帮助的 -->
<html lang="zh-cn">
<head><!-- 该标签作为 HTML 文档中所有的链接标签的默认链接/链接目标 --><base href="//https://image.baidu.com/" target="_blank"><!-- meta 标签描述了一些基本的元数据，不显示在页面上，但会被浏览器解析，通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据等 --><!-- 中文网页需要声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK为默认编码，则你需要设置为 <meta charset="gbk"> --><meta charset="UTF-8"><!-- 把 content 属性关联到一个名称：描述内容 --><meta name="description" content="This is an interesting world!"><!-- 把 content 属性关联到一个名称：搜索引擎定义关键词 --><meta name="keywords" content="HTML,CSS,XML,JavaScript"><!-- 把 content 属性关联到一个名称：作者 --><meta name="author" content="Ouseki"><!-- 把 content 属性关联到一个名称：定义页面的最新版本 --><meta name="revised" content="Ouseki, 2022/04/04/"/><!-- 把 content 属性关联到一个名称：定义网页版权信息 --><meta name="copyright" content="Copyright 2022 Ouseki ITGodRoad. All rights reserved."><!-- 把 content 属性关联到一个名称：定义邮箱地址 --><meta name="reply-to" content="ling_l@sohu.com"><!-- 把 content 属性关联到一个名称： 启用 WebApp 全屏模式--><meta name="apple-mobile-web-app-capable" content="yes"><!-- 把 content 属性关联到一个名称： 定义搜索引擎爬虫的索引方式（禁用）all 允许机器人索引当前网页及其链接的网页; none 阻止机器人索引当前网页及其链接的网页index 允许机器人索引当前页面; noindex 阻止机器人索引当前页面follow 允许机器人跟踪页面上的链接; nofollow 阻止机器人跟踪页面上的链接 --><meta name="robots" content="none"><!-- 提供有关视口初始大小的提示，仅供移动设备使用 --><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><!-- 把 content 属性关联到 HTTP 头部：设定页面定时跳转，单位为秒。如果 content 只包含一个正数，则是重新加载页面的时间间隔 --><meta http-equiv="refresh" content="30;url=https://www.baidu.com"><!-- 1.定义了浏览器工具栏的标题;2.当网页添加到收藏夹时，显示在收藏夹中的标题;3.显示在搜索引擎结果页面的标题 --><title>ITGodRoad</title><!-- title 左侧显示 logo 等图片 --><link rel="icon" href="../../../static/image/icon/icon/icon_ITGodRoad.png"><!-- 定义了文档与外部资源之间的关系，通常用于链接到样式表 --><link rel="stylesheet" type="text/css" href="../../../static/css/common/default.css"/><!-- 定义了客户端的脚本文件 --><script src="../../../static/plugin/jquery-3.6.0.js"></script>
</head>
<body></body>
</html>

4. 创建电子邮件链接

使用 <a> 超链接时请始终将正斜杠添加到子文件夹。
假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
另外后面最好加上：rel="noopener noreferrer" 意思是不会打开其他的网站，因为恶意病毒可能会修改你的浏览器空白页地址。

<a href="http://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

mailto
在进行邮件内容发送时，需要使用关键字：mailto。
注：多个邮件地址用 ; 隔开，空格用 %20 代替。

参数	描述
mailto:name@email.com	邮件接收地址
cc=name@email.com	抄送地址（Carbon Copy）
bcc=name@email.com	密件抄送地址（Blind Carbon Copy）
subject=subject text	邮件主题
body=body text	邮件内容
?	第一个参数分隔符
&	其他参数分隔符

发送邮件示例

<a href="mailto:vip.ouseki@qq.com?subject=html超链接邮件测试&body=html使用mailto关键字发送邮件" rel="nofollow">发送邮件</a>

点击超链接会自动弹出邮箱，选择好我们发送的账户后，超链接中的内容就自动填好了。

发送刚才的邮件，之后到我们的目标邮箱查看邮件。

5. map 图像映射

map 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
图片中的 alt 属性是在图片不能正常显示时出现的文本提示，这对于使用纯文本浏览器的人是非常有用的。
图片中的 title 属性是在鼠标在移动到元素上的文本提示。
指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏 HTML 页面的整体布局。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><link rel="icon" href="../../../static/image/icon/icon/icon_ITGodRoad.png"><title>ITGodRoad</title>
</head>
<body>
<a href="mailto:vip.ouseki@qq.com?subject=html超链接邮件测试&body=html使用mailto关键字发送邮件" rel="nofollow">发送邮件</a>
<img src="../../../static/image/map/fruits.jpg" width="300px" height="300px" alt="fruits" usemap="#fruits">
<map name="fruits"><!--矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))--><area shape="rect" coords="230,170,290,210" alt="apple" href="../../../static/image/map/apple.jpg"><!--圆形：(圆心坐标为(X1,y1)，半径为r)--><area shape="circle" coords="20,160,40" alt="orange" href="../../../static/image/map/orange.jpg"><!--多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)--><area shape="poly" coords="170,180,220,180,220,220,170,220" alt="cherry"href="../../../static/image/map/cherry.jpg">
</map>
</body>
</html>

6. 为 HTML 添加新元素/标签

JavaScript 语句 document.createElement(“ouseki”) 是为 IE 浏览器添加新的元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><link rel="icon" href="../../../static/image/icon/icon/icon_ITGodRoad.png"><title>ITGodRoad</title><script>document.createElement("ouseki");</script><style>ouseki {display: block;background-color: lightgray;padding: 20px;font-size: 30px;color: red;border-left: 10px solid darkgray;}</style>
</head>
<body>
<ouseki>自定义标签</ouseki>
</body>
</html>

7. Canvas 画布

canvas 元素用于图形的绘制，canvas 标签只是图形容器，必须通过脚本（通常是 JavaScript）来完成。

了解更多请访问 → 菜鸟教程参考手册

创建一个画布

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><link rel="icon" href="../../../static/image/icon/icon/icon_ITGodRoad.png"><title>ITGodRoad</title><style>canvas {border: 2px solid lime;display: block;margin: 50px auto;}</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>

使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
ES6新增语法：let 定义变量，变量不可以再次定义，但可以改变其值；
const 定义常量，常量不可以再次定义，也不可以改变其值。

声明方式	变量提升	暂时性死区	重复声明	初始值	作用域
var	允许	不存在	允许	不需要	非块级
let	不允许	存在	不允许	不需要	块级
const	不允许	存在	不允许	需要	块级

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><link rel="icon" href="../../../static/image/icon/icon/icon_ITGodRoad.png"><title>ITGodRoad</title><link rel="stylesheet" type="text/css" href="../../../static/css/common/customTag.css"/><script src="../../../static/js/common/customTag.js"></script><style>canvas {border: 2px solid lime;display: block;margin: 50px auto;}</style><script>function draw() {// 首先，找到 <canvas> 元素const canvas = document.getElementById('myCanvas');if (!canvas.getContext) return;// 然后，创建 context 对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。const ctx = canvas.getContext("2d");for (let i = 0; i < 6; i++) {for (let j = 0; j < 6; j++) {ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +Math.floor(255 - 42.5 * j) + ',0)';ctx.fillRect(j * 50, i * 50, 50, 50);}}}</script>
</head>
<body>
<canvas onclick="draw()" id="myCanvas" width="300" height="300"></canvas>
</body>
</html>

8. SVG 简介

SVG（Scalable Vector Graphics）可伸缩矢量图形，是 W3C 推出的基于 XML 的二维矢量图形标准。SVG 可以提供高质量的矢量图形渲染，同时由于支持 JavaScript 和文档对象模型，SVG 图形通常具有强大的交互能力。另一方面，SVG 作为 W3C 所推荐的基于 XML 的开放标准，能够与其他网络技术进行无缝集成。

更多内容 → 菜鸟教程 SVG在线编辑器

在 HTML 中，能够将 SVG 元素直接嵌入 HTML 页面中
所有的点都是以原点为参照的，第四象限绘制。

<svg xmlns="http://www.w3.org/2000/svg" height="190"><polygon points="100,20 40,180 180,80 10,80 150,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>

SVG

Canvas 与 SVG 的比较
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

9. HTML 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。拖放操作期间，会有一个可拖放元素的半透明快照跟随着鼠标指针。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖放事件
注意：当从操作系统向浏览器中拖放文件时，不会触发 dragstart 和 dragend 事件。

事件	说明
ondragstart	网页元素开始拖动时触发
ondrag	被拖动的元素在拖动过程中持续触发
ondragenter	被拖动的元素进入目标元素时触发，应在目标元素监听该事件
ondragover	被拖动元素停留在目标元素之中时持续触发（每100毫秒触发一次），应在目标元素监听该事件
ondragleave	被拖动的元素离开目标元素时触发，应在目标元素监听该事件
ondrop	被拖动元素或从文件系统选中的文件，拖放落下时触发
ondragend	网页元素拖动结束时触发

快速开始

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><link rel="icon" href="../../../static/image/icon/icon/icon_ITGodRoad.png"><title>ITGodRoad</title><link rel="stylesheet" type="text/css" href="../../../static/css/common/customTag.css"/><script src="../../../static/js/common/customTag.js"></script><style>#container {display: flex;flex-direction: row;justify-content: space-evenly;}#div1, #div2 {width: 100px;height: 100px;border: 2px solid maroon;text-align: center;}img {padding-top: 25px;}</style><script>function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("text/plain", ev.target.id);}function drop(ev) {let data = ev.dataTransfer.getData("text/plain");ev.target.appendChild(document.getElementById(data));}</script>
</head>
<body>
<div id="container"><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="../../../static/image/icon/svg/american-football.svg" id="drag1" draggable="true"alt="american-football" width="50" height="50" ondragstart="drag(event)"/></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</body>
</html>

设置元素为可拖放
为了使元素可拖动，需要把 draggable 属性设置为 true

<img draggable="true">

拖动监听事件 ondragstart
规定当元素被拖动时要进行怎样的处理，一般是添加数据到数据传输对象

function drag(ev) {/*dataTransfer 属性保存着事件的数据：setData() 方法为拖拽数据添加一个项将目标元素的 width 和 id 添加到数据传输对象*/ev.dataTransfer.setData("text/plain", ev.target.width);ev.dataTransfer.setData("text/html", ev.target.id);/*dataTransfer 属性保存着事件的数据：定义拖拽效果copy 表明被拖拽的数据将从它原本的位置拷贝到目标的位置。move 表明被拖拽的数据将被移动。link 表明在拖拽源位置和目标位置之间将会创建一些关系表格或是连接。*/ev.dataTransfer.dropEffect = "move";
}

进行放置 ondrop
当放置被拖动的数据时，会发生 drop 事件。

function drop(ev) {// 获取目标的宽度并输出文本let width = ev.dataTransfer.getData("text/plain");ev.target.textContent = "该物体的宽度为：" + width;// 获取目标的 id 并将移动的元素添加到目标的 DOMlet data = ev.dataTransfer.getData("text/html");ev.target.appendChild(document.getElementById(data));
}

10. HTML 地理定位 Geolocation

HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

谷歌地图API教程 百度地图开放平台

getCurrentPosition
使用 getCurrentPosition() 方法来获得用户的位置。

属性	说明
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

获取用户经纬度实例
简单的地理定位，可返回用户位置的经度和纬度:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ITGodRoad</title>
</head>
<body>
<p id="geolocation">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点击获取经纬度</button>
<script>let geo = document.getElementById("geolocation");function getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);} else {geo.innerHTML = "该浏览器不支持获取地理位置。";}}function showPosition(position) {geo.innerHTML = "纬度: " + position.coords.latitude +"<br>经度: " + position.coords.longitude;}</script>
</body>
</html>

获取用户经纬度并添加错误处理实例
简单的地理定位，如果获取地理位置失败不会有任何提示，让人摸不到头脑，所以需要加入错误处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ITGodRoad</title>
</head>
<body>
<p id="geolocation">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点击获取经纬度</button>
<script>let geo = document.getElementById("geolocation");function getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);} else {geo.innerHTML = "该浏览器不支持获取地理位置。";}}function showPosition(position) {geo.innerHTML = "纬度: " + position.coords.latitude +"<br>经度: " + position.coords.longitude;}function showError(error) {switch (error.code) {case error.PERMISSION_DENIED:geo.innerHTML = "用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:geo.innerHTML = "位置信息是不可用的。"break;case error.TIMEOUT:geo.innerHTML = "请求用户地理位置超时。"break;case error.UNKNOWN_ERR:geo.innerHTML = "未知错误。"break;}}</script>
</body>
</html>

接入百度地图 API 实例
WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。
非中国地区地图，服务坐标统一使用WGS84坐标。

百度地图拾取坐标系统

百度和谷歌 geolocation 的经纬度属性不同，百度的纬度是：e.point.lat ；经度是：e.point.lng

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ITGodRoad</title><!--  引入百度地图 API  --><script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=1GdHRtGurMeBmRc90kF6XqI7hlvGyv62"></script><style>#map {width: 500px;height: 500px;border: 1px solid red;}#result {padding: 7px 10px;position: fixed;top: 10px;left: 20px;width: 300px;background: #fff;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);border-radius: 7px;z-index: 99;}#cityName {width: 170px;margin-right: 10px;height: 25px;border: 1px solid rgba(27, 142, 236, 0.5);border-radius: 5px;}button {border: 1px solid rgba(27, 142, 236, 0.5);border-radius: 5px;background: rgba(27, 142, 236, 0.5);color: #fff}</style>
</head>
<body>
<div id='result'><label>城市名：<input type="text" id="cityName" list="cities" value="长春" placeholder="请选择城市"/></label>
</div>
<datalist id="cities"><option value="吉林"><option value="北京"><option value="四川"><option value="广东"><option value="上海">
</datalist>
<br/>
<br/>
<p id="geolocation">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点击获取经纬度</button>
<br/>
<br/>
<div id="map"></div>
<script>let geo = document.getElementById("geolocation");function getLocation() {initialize();if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);} else {geo.innerHTML = "该浏览器不支持获取地理位置。";}}function showPosition(position) {geo.innerHTML = "纬度: " + position.coords.latitude +"<br>经度: " + position.coords.longitude;}function showError(error) {switch (error.code) {case error.PERMISSION_DENIED:geo.innerHTML = "用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:geo.innerHTML = "位置信息是不可用的。"break;case error.TIMEOUT:geo.innerHTML = "请求用户地理位置超时。"break;case error.UNKNOWN_ERR:geo.innerHTML = "未知错误。"break;}}function initialize() {// 创建Map实例var map = new BMap.Map('map');var city = document.getElementById("cityName").value;if (typeof (city) == "undefined" || city === '' || city == null) {// 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(new BMap.Point(125.******, 43.*****), 15);} else {// 用城市名设置地图中心点map.centerAndZoom(city, 11);}// 设置地图显示的城市map.setCurrentCity(city);// 开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes: [// 标准地图BMAP_NORMAL_MAP,// 混合地图BMAP_HYBRID_MAP]}));}</script>
</body>
</html>

11. input 类型

注意：并不是所有的主流浏览器都支持新的 input 类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

color

<input type="color"/>

range

<input type="range"/>

date

<input type="date"/>

time

<input type="time"/>

datetime-local

<input type="datetime-local"/>

month

<input type="month"/>

week

<input type="week"/>

下列类型在谷歌浏览器上无特殊样式，不做展示。

url
number
datetime
email
search
tel

12. HTML 页面结构

结构元素
header 元素，表示页面中一个内容区块或整个页面的页眉。
nav 元素，表示页面中的导航链接。
hgroup 元素，用于对页面中一个区块或整个页面的标题进行组合。
article 元素，表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。
section 元素，表示页面中一个内容区块，比如章节。
aside 元素，表示article内容之外的内容，辅助信息。
figure 元素，表示媒介内容的分组，以及它们的标题。
footer 元素，表示页面中一个内容区块或整个页面的页脚。

aside 元素
代表跟文档的主内容区相关，但它又独立于主内容区，并且可以被单独拆分出来，而不会对整体内容产生影响。通常表现为侧边栏、说明、提示、引用、附加注释、广告等。如，在经典的页面布局中，页面被分为 header、main、aside、footer 四个部分。
main 元素
标签规定文档的主要内容。元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ITGodRoad</title>
</head>
<body><!-- 整个页面的页眉 --><header><p>Posted by: Ouseki</p><p><time pubdate datetime="2021-08-04"></time></p></header><!-- 页面中的导航链接 --><nav><a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a>| <a href="/jquery/">jQuery</a></nav><!-- 文档的主要内容 --><main><h1>Web 浏览器</h1><p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p><!-- 独立内容 --><article><h1>Google Chrome 浏览器</h1><p>Google Chrome 浏览器是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p></article><!-- 独立内容 --><article><!--定义文章的页眉--><header><h1>Internet Explorer 9</h1><p><time pubdate datetime="2011-03-15"></time></p></header><h1>Internet Explorer 浏览器</h1><p>Internet Explorer 浏览器由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p></article></main><!-- 整个页面的页脚 --><footer><p>Posted by: Ouseki</p><p><time pubdate datetime="2020-08-04"></time></p></footer>
</body>
</html>

13. Html5 新增属性和事件

13.1 HTML5 全局中新增属性

属性	说明
contenteditable	规定元素内容是否可编辑
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示
data-*	用于存储页面或应用程序的私有定制数据
draggable	规定元素是否可拖动
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接
hidden	隐藏元素
spellcheck	规定是否对元素进行拼写和语法检查
translate	规定是否应该翻译元素内容

13.2 HTML5 标签中新增属性

属性	说明
autocomplete	属性规定 form 或 input 域应该拥有自动完成功能
autofocus	属性规定 form 或 input 域在页面加载时，自动获得焦点
required	属性规定必须在提交之前填写输入域（不能为空）
placeholder	属性提供一种提示（hint），描述输入域所期待的值
pattern	属性规定用正则表达式验证 input 域的值
multiple	属性规定输入域中可选择多个值
novalidate	属性规定在提交表单时不应该验证 form 或 input 域
height、width	属性规定用于 image 类型的 input 标签的图像高度和宽度
list	属性规定输入域的 datalist。datalist 是输入域的选项列表
min、max、step	属性用于为包含数字或日期的 input 类型规定限定（约束）
form	属性规定输入域所属的一个或多个表单
formaction	重写表单的 action 属性
formenctype	重写表单的 enctype 属性
formmethod	重写表单的 method 属性
formnovalidate	重写表单的 novalidate 属性
formtarget	重写表单的 target 属性

13.3 HTML5 中新增事件

window 事件

事件	说明
onafterprint	文档打印之后运行的脚本
onbeforeprint	文档打印之前运行的脚本
onbeforeunload	文档卸载之前运行的脚本
onerror	在错误发生时运行的脚本
onhashchange	当文档已改变时运行的脚本
onmessage	在消息被触发时运行的脚本
onoffline	当文档离线时运行的脚本。判断是否有网络
ononline	当文档上线时运行的脚本
onpagehide	当窗口隐藏时运行的脚本
onpageshow	当窗口成为可见时运行的脚本
onpopstate	当窗口历史记录改变时运行的脚本
onredo	当文档执行撤销（redo）时运行的脚本
onstorage	在 Web Storage 区域更新后运行的脚本
onundo	在文档执行 undo 时运行的脚本

form 事件

事件	说明
oncontextmenu	当上下文菜单被触发时运行的脚本
onformchange	在表单改变时运行的脚本
onforminput	当表单获得用户输入时运行的脚本
oninvalid	当元素无效时运行的脚本

mouse 事件

事件	说明
ondrag	元素被拖动时运行的脚本
ondragend	在拖动操作末端运行的脚本
ondragenter	当元素元素已被拖动到有效拖放区域时运行的脚本
ondragleave	当元素离开有效拖放目标时运行的脚本
ondragover	当元素在有效拖放目标上正在被拖动时运行的脚本
ondragstart	在拖动操作开端运行的脚本
ondrop	当被拖元素正在被拖放时运行的脚本
onmousewheel	当鼠标滚轮正在被滚动时运行的脚本
onscroll	当元素滚动条被滚动时运行的脚本

touch 事件

事件	说明
touchstart	当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发
touchmove	当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动
touchend	当手指从屏幕上离开的时候触发
touchcancel	当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明

14. Html 标签列表大全（字母排序）

高亮文本表示HTML5新增的标签，删除线表示HTML5中已废除属性

标签	说明/定义
`<!--...-->`	注释
`<!DOCTYPE>`	文档注释
`<a>`	超链接
`<abbr>`	缩写
`<acronym>`	首字母缩写
`<address>`	文档作者或拥有者的联系信息
`<applet>`	嵌入的 applet
`<area>`	图像映射中的区域
`<article>`	一个文章区域
`<aside>`	页面的侧边栏内容
`<audio>`	音频内容
`<b>`	粗体
`<base>`	页面中所有链接的基准URL
`<basefont>`	基准字体，颜色或尺寸
`<bdo>`	允许您设置一段文本，使其脱离其父元素的文本方向设置
`<bdi>`	文本显示的方向
`<big>`	大号文本
`<blockquote>`	长的引用
`<body>`	文档的主体
`<br>`	换行
`<button>`	按钮
`<canvas>`	图形（基于 JavaScript 的绘图 API）
`<caption>`	表格标题
`<center>`	居中文本
`<cite>`	引用
`<code>`	计算机代码文本
`<col>`	表格列的属性
`<colgroup>`	表格列的分组
`<command>`	命令按钮
`<datalist>`	下拉列表（定义 input 可能的值）
`<dd>`	定义列表中项目的描述
`<del>`	删除文本
`<details>`	描述文档或文档某个部分的细节
`<dfn>`	定义项目
`<dfn>`	定义项目
`<dialog>`	对话框，比如提示框
`<dir>`	目录列表
`<dl>`	定义列表
`<dt>`	定义的项目
`<em>`	强调文本
`<embed>`	外部交互内容或插件
`<fieldset>`	围绕表单中元素的边框
`<figcaption>`	figure 元素的标题
`<figure>`	媒介内容的分组，以及它们的标题
`<font>`	字体、尺寸和颜色
`<footer>`	section 或 page 的页脚
`<form>`	表单
`<frame>`	子窗口（框架）
`<frameset>`	框架的集
`<h1> to <h6>`	标题1 到标题6
`<head>`	关于文档的信息
`<header>`	section 或 page 的页眉
`<hgroup>`	有关文档中的 section 的信息
`<hr>`	水平线
`<html>`	html 文档
`<i>`	斜体文本
`<iframe>`	行内的子窗口（框架）
`<img>`	图像
`<input>`	输入域
`<ins>`	插入文本
`<kbd>`	键盘文本
`<keygen>`	生成密钥
`<label>`	表单控件的标注
`<legend>`	fieldset 中的标题
`<li>`	列表的项目
`<link>`	文档与外部资源的关系
`<main>`	文档的主体部分
`<map>`	图像映射
`<mark>`	有记号的文本
`<menu>`	菜单列表
`<meta>`	元信息
`<meter>`	预定义范围内的度量
`<nav>`	导航链接
`<noframes>`	对不支持框架的用户的替代内容
`<noscript>`	对不支持客户端脚本的用户的替代内容
`<object>`	嵌入对象
`<ol>`	有序列表
`<optgroup>`	选项组
`<option>`	下拉列表中的选项
`<output>`	输出的一些类型
`<p>`	段落
`<param>`	为对象定义参数
`<pre>`	预格式化文本
`<progress>`	任何类型的任务的进度
`<q>`	短的引用
`<rp>`	若浏览器不支持 ruby 元素显示的内容
`<rt>`	ruby 注释的解释
`<ruby>`	ruby 注释
`<s>`	加删除线的文本
`<samp>`	样本计算机代码
`<script>`	脚本
`<section>`	文档中的节
`<select>`	可选列表
`<small>`	小号文本
`<source>`	媒介源
`<span>`	文档中的 section
`<strike>`	加删除线的文本
`<strong>`	强调文本
`<style>`	样式定义
`<sub>`	下标文本
`<summary>`	details 元素的标题
`<sup>`	上标文本
`<table>`	表格
`<tbody>`	表格的主体
`<td>`	表格单元
`<textarea>`	多行的文本输入控件
`<tfoot>`	表格的脚注
`<th>`	表格中的表头单元格
`<thead>`	表格中的表头内容
`<time>`	日期/时间
`<title>`	文档的标题
`<tr>`	表格行
`<track>`	媒介规定外部文本轨道
`<tt>`	打字机文本
`<u>`	下划线文本
`<ul>`	无序列表
`<var>`	变量
`<video>`	视频
`<wbr>`	在文本中的何处适合添加换行符
`<xmp>`	预格式文本