前言：HTML产生于1991年，1999年HTML4.01版本成为互联网标准，并广泛应用于互联网应用的开发。HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布，在 2012 年已形成了稳定的版本。
HTML5版本
概述：HTML5【超文本标记语言第五次重大修改】：在这次重大修改、调整当中。前端三层都有修改、新增。
- 结构层：新增了很多语义化标签【header、footer、nav、aside、main、article、section】新的表单控件类型【color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url】和多媒体【视频、音频简称音视频标签】以及 canvas【画布】和 svg 【矢量图】。
- 样式层：选择器【属性选择器、伪类选择器、伪选择器、子类选择器、关系型选择器】动画（2D、3D）过渡。
- 行为层：本地存储功能，拖放等新事件和地理定位 API 等。
哆啦A梦，测试浏览器的 H5 和 CSS3 的兼容性：点击测试
IE 浏览器可以在控制台找到不同的IE版本。
测试效果：
只有IE8以下的浏览器会有兼容问题
再来看看用户使用浏览器内核的份额：
百度流量研究院
数据来源于百度流量研究院
这年头要是有公司让你处理浏览器的兼容问题，估计你脑子进水了才会去干吧。
一、新的骨架
在使用HTML5之前，w3c希望用XHTML来替代HTML，因为HTML与XHTML相比，XHTML是一种更加严格，更加规范的HTML代码。
在XML文档中有且只能有一个根元素，文档中的元素必须由开始标签和结束标签组成，除了是单标签，标签之间不能交叉使用，标签之间如果没有内容，属性值作为便签的内容时必须用 "" 括起来。
在 HTML 4.01 中有三种 DTD（文档类型定义）的声明，但在 HTML5 中只有一种，为<!DOCTYPE html>注意<!DOCTYPE>声明没有结束标签且对大小写不敏感。在 HTML 4.01 中，DTD (规定了标记语言的规则)的三种声明方式为：
- HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!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">
正是因为 HTML 的文档声明有好几种，所以在写 HTML 文件必须指定文档 DTD 版本<!DOCTYPE html> 表示使用 HTML5。
<!DOCTYPE html>
<html lang="en">
<!--
HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。
lang="en"表示文档是英文的，所以使用谷歌浏览器打开，谷歌浏览器一般都会提示是否翻译。
所以我们一般指定为中文网站：lang="zh-CN"
lang="fr" 表示网站为法语网站
-->
<head>
<meta charset="UTF-8"><!--charset是网站编码格式，避免乱码， lang是浏览器语言环境.-->
<title>Document</title>
<style>
.cur{
color: red;
}
</style>
</head>
<body>
<div class=cur>你好</div>
<hr>
<script>
alert("不加type")
</script>
</body>
</html>
- 标签属性值可以省略双引号
- 单闭合标签可以省略反斜杠
- 标签的 type属性值可以省略（脚本(scripts)和链接(links)无需type）
- 标签不再区分大小写
总结：以后再书写的时候，还是按照以前习惯书写（知道即可）。
二、新增大纲标签
概述：以前常用大纲标签是div，但是在HTML5中新增了很多大纲标签（又叫语义化标签，语义化标签很重要一个作用是利于优化网站（SEO）)。它们都是双闭合标签，而且都是块元素。新增大纲标签用法和div是一模一样的。
| 标签 | 描述 |
|---|---|
| head | base,link,meta,script,styple,title |
| title | 用于定义文档的页面标题。 |
| style | 用于定义文档引入的样式。 |
| meta | 用于定义文档的元信息。 |
| base | 用于定义文档中所有链接规定的默认地址或者默认目标a标签不加href，可通过此默认跳转 |
| body | 用于定义文档的页面主题部分。 |
| h1~h6 | 用于定义标题。 |
| p | 用于定义段落。 |
| hr | 用于插入一条水平线。 |
| br | 用于插入一个换行符。 |
| div | 用于定义文档中的分区或者节，是一个块级元素。 |
| span | 行内元素 |
分割线
新的文档类型？
DOCTYPE
CSS3 新增选择器有哪些？
在 CSS3 中，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
答：属性选择器[]、伪类选择器CSS :focus-visible伪类让我感动哭了、伪元素选择器。
CSS3 新增伪类有那些？
| name | value |
|---|---|
| :root | 选择文档的根元素 |
| :empty | 向没有子元素的元素添加样式 |
| :disabled | 控制表单控件的禁用状态 |
| :enabled | 控制表单控件的正常状态 |
| :checked， | 单选框或复选框被选中。 |
| :not() | 非 |
| :first-child | 该元素是同级同类型元素中第一个元素 |
| :last-child | 该元素是它的父元素的最后一个子元素 |
| :nth-child(n) | 该元素是它的父元素的第n个子元素 |
| :nth-last-child(n) | 该元素是它的父元素的倒数第n个子元素 |
| :noly-child | 该元素是它的父元素的唯一子元素 |
| :first-of-type | 该元素是同级同类型元素中第一个元素 |
| :last-of-type | 该元素是同级同类型元素中最后一个元素 |
| :nth-last-of-type(n) | 该元素是同级同类型元素中倒数第n个元素 |
| :only-of-type | 该元素hi同级同类型元素中唯一的元素 |
CSS3 的伪元素？
答：CSS2.1 包括::first-letter,::first-line,::before,::after 。CSS3 增加了一个::selection
CSS3新特性有哪些？
1.颜色：新增RGBA，HSLA模式
2.文字阴影（text-shadow）
3.边框： 圆角（border-radius）边框阴影： box-shadow 边框图片：border-image
4.width 作用范围：box-sizing
5.背景：background-size 设置背景图片的尺寸、background-origin 设置背景图片的原点、
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
- 过渡：transition，可实现动画
- 自定义动画
animation:mymove 5s infinite;
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。alternate |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。forwards，backwards，both |
| animation-play-state | 指定动画是否正在运行或已暂停。paused、running |
- 媒体查询(media)，多栏布局(grid,flex)
- @import @supports @media @keyframes @font-face
一个 at-rule 是一个CSS 语句，以at符号开头, '@' (U+0040 COMMERCIAL AT), 后跟一个标识符，并包括直到下一个分号的所有内容, ';' (U+003B SEMICOLON), 或下一个CSS块，以先到者为准。
AT规则分为两种：
- 常规规则：@import
- 嵌套规则（带有花括号{}的）:@supports @media @keyframes @font-face @document
11.2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
上述2D变换属性底层实现皆为：transform:matrix();详情
理解CSS3 transform中的Matrix(矩阵)
3D变换，参考：好吧，CSS3 3D transform变换，不过如此！
- 3D转换
transform-style: preserve-3d;//flat
transform-origin:center;
perspective:1200;
backface-visibility:hidden;
- calc CSS3中的计算
CSS3 计算 calc 和 vw 单位巧妙实现滚动条出现页面不跳动
.wrap-outer {
margin-left: calc(100vw - 100%);
}
-
单位
vw 相对于视窗的宽度：视窗宽度是100vw
vh 相对于视窗的高度：视窗高度是100vh
HTML5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
新特性：
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签
header,nav,footer,aside,article,section,mark,progress,meter,details(open),summary,figure,figcaption
small:网站底部的版权状态，我常常用错使用 div 来替代。
formaction,formenctype,form(id)
借助HTML5 details,summary无JS实现各种交互效
HTML tabindex属性与web网页键盘无障碍访问
accesskey属性与web自定义键盘快捷访问
- 音频、视频API(audio,video)
- 画布(Canvas) API和 SVG（SVG几乎和CSS同岁，不属于CSS3）
- 地理(Geolocation) API
Geolocation：地理位置应用程序接口
浏览器地理位置(Geolocation)API 简介
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
- sessionStorage 的数据在浏览器关闭后自动删除
- 表单控件:
number,color,file,calendar、date、time、email、url、search(部分内置表单验证)
表单允许新的必要属性和自动获取焦点：<input type="text" name="someInput" required autofocus>
appearance 可结合伪元素去元素默认外观，另外从功能上讲，appearance 还可以把普通元素变成特殊元素
CSS3 appearance大全鉴赏以及是否影响box-sizing
-
data属性(The Data Attribute):自定义属性
-
WebWorker:
阮一峰——Web Worker 使用教程 -
WebSocket
WebSocket 教程 -
indexedDB
HTML5 indexedDB前端本地存储数据库实例教程 -
push&Notification 推送与通知
简单了解HTML5中的Web Notification桌面通知
之前 PC 端的通知实现方法：
let titleInit = document.title, isShow = true;
setInterval(function() {
let title = document.title;
if (isShow == true) {
if (/新/.test(title) == false) {
document.title = '【新消息】';
} else {
document.title = '【 】';
}
} else {
document.title = titleInit;
}
}, 500);
window.onfocus = function() {
isShow = false;
};
window.onblur = function() {
isShow = true;
};
// for IE
document.onfocusin = function() {
isShow = false;
};
document.onfocusout = function() {
isShow = true;
};
哪些不是HTML5(What is Not HTML5)?
- SVG:不是HTML5。
- CSS3:不是HTML5，它是…CSS。
- Geolocation:不是HTML5 ，通过HTML 5，您应该能够使Web应用程序可确定您的位置，并为您提供更多的相关信息。
- Client Storage(客户端存储):非HTML5，虽说有一点切合，但被排除在规范之外，原因在于，担忧其作为一个整体，会变得过于复杂。它现在有自己的规范。
- Web Sockets:不是HTML5，同样的，有着自己的一套准则。
网友评论