本文介绍了HTML5的重要特性和应用场景，包括文档结构、新标签、拖放功能、地理定位等，展示了如何利用HTML5创建现代网页。
更新日期：2022/04/05
只要我们一起大笑，可怕的东西就会跑光光了。
目録
1. HTML 简介
HTML（Hyper Text Markup Language）是一种用于创建网页的标准标记语言，主要用来实现静态页面。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。
HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。HTML5 将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。
HTML 网页结构：只有 <body> 区域 (白色部分) 才会在浏览器中显示。
- 常见字符实体
虽然 html 不区分大小写，但实体字符对大小写敏感。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | | ||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | '（IE不支持） | ’ |
| ¢ | 美分 | ¢ | ¢ |
| £ | 英镑 | £ | £ |
| ¥ | 日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ™ | 商标 | ™ | ™ |
| ® | 注册商标 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
- 结合音标符
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
| 音标符 | 字符 | 结合音标符 | 输出结果 |
|---|---|---|---|
| ̀ | 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 的开放标准，能够与其他网络技术进行无缝集成。
在 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>
- 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 并将移动的元素添加到目标的 DOM
let data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
}
10. HTML 地理定位 Geolocation
HTML5 Geolocation 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
- 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> | |
<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> |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
