HTML5 入门
什么是HTML5？
HTML5是HTML最新的修订版本，在2010年，由万维网联盟（W3C）正式推出来，到2014年10月完成规范制定。
当时移动互联网刚刚兴起，iPhone手机也刚刚开始在国内火，诺基亚刚刚达到巅峰，HTML5的最初设计目的是为了在移动设备上支持多媒体，
HTML5 的规范刚推出来，就被浏览器厂商热烈欢迎和支持，各种布道文章也大喊新的WEB时代要来临了。
受欢迎的理由
第一：浏览器厂商的支持
现在主流的浏览器基本都是 Chromium ，Chrome系的，都已经完全支持HTML5了；
在最开始的时候，可并不是这样，当时主流的是IE，Chrome，Firefox，Safari，Opera。
W3C提出HTML5之后，下面是浏览器厂商的一些反应；
-
IE
：2010年3月16日，宣布推出IE9开发者预览版，支持HTML5,SVG,CSS3
- 其实在IE8的时候就已经开始支持HTML5了
-
Google：2010年2月19日，宣布暂停自家的Gears浏览器插件的支持，重点开发适用HTML5的浏览器
-
Firefox：2010年7月，开始支持HTML5规范
-
Safari：2010年6月7日，发布Sfari5，开始正式支持HTML5规范。
-
Opera：2010年5月5日选择开始研发HTML5相关的适配
以上这些表明，浏览器厂商对HTML5的支持，对HTML5的渴望和推动有非常大的热情。正是因为HTML5填补了市场上的痛点和空白，所以浏览器厂商才会如此热情。
这里面最能打的，当时是IE，IE是当时的绝对一哥；当时IE到处布道，宣城遵从互联网通用标准是一件非常重要的事情，并且以行动支持，在IE8里面就支持了HTML5；例如代替Cookie得sessionStorage。当时份额最大的IE都这么支持了，别的浏览器想要发展也要开始支持了。微软在这方面的贡献真的非常大。
第二：时代的需要
我们把时间退回到200X年，当时各个浏览器之间不统一，光是修改WEB浏览器的兼容问题就需要消耗大量的时间，开发者迫切想要一个统一的互联网通用标准。
你想象一下，你开发的一个网页，在浏览器A上正常运行，在浏览器B上一团糟，就是规范不统一导致的。
HTML5之前几乎没有符合规范标准的WEB浏览器！HTML的语法是在SGML语言基础上建立的，(SGML全称Standard Generalized Markup language)；
开发能解析SGML语法的程序很不容易，很多浏览器都不包含SGML的分析器，所以导致渲染出来的页面看起来不一样。
HTML5目标就是将WEB开发带出一个成熟的阶段，在这个规范里，视频，音频，图形，动画，以及点奥的交互都被标准化。
注：现在我们写CSS，经常会写reset相关的信息，就有点类似的意思，因为各个元素在浏览器中的默认表现不一致，所以需要统一成一个初始值，然后再进行操作。
同时对浏览器的安利也不错，形成一个思想，要想扩大WEB浏览器的市场份额，遵从规范是最有效的宣传方法。
第三：保障了兼容性
开发者最担心的就是新技术退出后，开始不成熟，老版本也一直在线上跑着，新东西出来，能不能在老版本的浏览器上运行？会不会报错？等问题非常直接导致他的推广。
HTML5在老版本浏览器上也可以正常的使用，虽然到了HTML5的时代，但是不代表HTML4创建出来的网站全部要重建，只需要以后正常运行HTML5开发出来的功能。也就是因为保证了兼容性，才可以让大家毫不犹豫的使用HTML5。
一个不考虑兼容性的技术，是很容易被抛弃的，强大如Google，它搞出来的Angular和Angular.js就是属于2个完全无关的框架，导致很多早期Angular.js开发者都抛弃了他，在国内至今还处理打酱油的，没有什么热度；虽然TypeScript已经被大家接收，但是国内使用Angular的还是不多。
第四：实用性
在之前HTML版本中，文档的结构不清晰，一般都是div元素加id或者class来表示；阅读时候不仔细很难看出文档结构的。对于搜索引擎和阅读器来说也很难去分辨。HTML增加了语义化标签，解决了这个问题。
以前HTML的交互很少，比如上传文件想同时选择一个以上的文件是做不到的，在HTML5里增加很多表单元素和类型，都是非常使用的东西。
低版本IE兼容HTML5的方法
低版本IE览器兼容HTML5的方法
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BeasGEQ-1619966598737)(https://a.axihe.com/img/html5/browsers_say.png)]
IE8 及更早 IE 版本的浏览器不支持以上的方式。无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.
IE9 以下版本浏览器兼容HTML5的方法，使用 html5shiv 包：
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->
以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
针对IE浏览器 html5shiv 是比较好的解决方案。 html5shiv 主要解决HTML5提出的新的元素不被IE6-8识别，并且重新设置HTML5元素的css样式。大家可以在源码里看下；
注意：不需要初始化新标签的CSS，有些教程建议引入后，再写下面的CSS样式，其实是没有必要的
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
完美的 Shiv 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>hello</h1>
<article>
hello world
</article>
</body>
</html>
html5shiv.js 引用代码必须放在顶部，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
为 HTML 添加新元素
你可以为 HTML 添加新的元素。
该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
JavaScript 语句 document.createElement(“myHero”) 是为 IE 浏览器添加新的元素。
JavaScript 语句 document.createElement(“myHero”) 是为 IE 浏览器添加新的元素。
HTML5 与 HTML4 的区别
前言
HTML5 以 HTML4为基础，进行了大量的修改，本章介绍做了哪些修改，有什么区别。
注意：这一问题也是常见的面试题，希望可以认真看一下。
相同点
文件扩展名和内容类型相同
HTML5文件扩展名和内容类型不变，文件扩展名容然是.html/.htm,内容类型仍然是text/html;
区别/不同点
1.Doctype不同
核心点：HTML5 不基于 SGML，所以不需要引用 DTD。
DOCTYPE无论4还是5中都是必不可少的，位于文件的第一行。
html4的声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html5的声明如下，并且不区分大小写。
<!DOCTYPE html><meta charset="UTF-8"><title>HTML5教程</title><p>这是符合HTML5规范的写法<br/>虽然看起来很不正经<p>
使用工具时候，也可以使用系统识别符
<!DOCTYPE html SYSTEM "about:baidu.com">
2.字符编码指定方式不同
html4的声明
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
html5声明
<meta charset="UTF-8">
注意不能混合使用，下面就是错误的。
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=utf-8">
新增元素和废除元素
新增属性和废除属性
全局属性
HTML5 元素标签的省略机制
元素标签省略机制
HTML5是保证与之前HTML语法最大程度兼容而设计的，所以以前HTML4常用语法都需要允许并且承认。以前HTML4中p是没有结束标签的（也叫结束标记）
<p>文字文字<p>文字文字
上面这种是被允许的。
在HTML5中元素标签可以省略的，具体分为
- 不允许写结束标签的元素
- 可以省略结束标签的元素
- 可以省略全部标签的元素
不允许写结束标签的元素
比如<br>...</br> 这种写法就是错误的，需要写<br/>
这部分的元素有
- area
- base
- br
- col
- command
- embed
- hr
- img
- input
- keygen
- link
- meta
- param
- source
- track
- wbr
可以省略结束标签的元素
- li
- dt
- dd
- p
- rt
- rp
- optgroup
- option
- colgroup
- thead
- tbody
- tfoot
- tr
- td
- th
可以省略全部标签的元素
- html
- head
- body
- colgroup
- tbody
下面的语法就是符合HTML5规范的写法
<!DOCTYPE html>
为了兼容：省略引号
当指定属性值的时候，属性值两边即可以双引号，也可以单引号，（不能单引号和双引号混合使用）
HTML5在此基础上进行了改进。当属性值不包括空字符串，”>“,”<“,”=“,单引号,双引号字符时，引号可以省略
下面三种都是合法的
<input type="text" /><input type='text' /><input type=text />
HTML5 具有boolean值的属性
具有boolean值的属性
对于 disabled / readonly 等属性，当只写属性而不指定属性值的时候，表示属性值尾true，如果想要将其属性值设置为false，可以不使用该属性值。
想要将属性值设定为true，也可以将属性名设定为属性值，或者空字符串设定其属性值。
下面是演示
<!-- 只写属性不写属性值，true -->
<input type="checkbox" checked />
<!-- 属性值等于空字符串，true -->
<input type="checkbox" checked="" />
<!-- 属性值等于属性名，true -->
<input type="checkbox" checked="checked" />
<!-- 不写属性值，false -->
<input type="checkbox" />
省略引号
当指定属性值的时候，属性值两边即可以双引号，也可以单引号，（不能单引号和双引号混合使用）
HTML5在此基础上进行了改进。当属性值不包括空字符串，”>“,”<“,”=“,单引号,双引号字符时，引号可以省略
下面三种都是合法的
<input type="text" /><input type='text' /><input type=text />
HTML5 新增的标签元素
HTML5 新元素
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，
比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。
canvas 新元素
| 标签 | 描述 |
|---|---|
<canvas> |
标签定义图形，比如图表和其他图像。本身只提供画布，该标签基于 JavaScript 的绘图 API |
新多媒体元素
| 标签 | 描述 |
|---|---|
<audio> |
定义音频内容，比如音乐，录音等 |
<video> |
定义视频，比如电影片段，其他视频流（video 或者 movie） |
<source> |
定义多媒体资源 <video> 和 <audio> |
<embed> |
定义嵌入的内容。用来插入各种多媒体，比如midi，wav，AIFF,mp3 |
<track> |
为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新表单元素
| 标签 | 描述 |
|---|---|
<datalist> |
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
<keygen> |
规定用于表单的密钥对生成器字段。 |
<output> |
定义不同类型的输出，比如脚本的输出。 |
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构；
| 标签 | 描述 |
|---|---|
<article> |
定义页面独立的内容区域。 |
<aside> |
定义页面的侧边栏内容。 |
<bdi> |
允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> |
定义命令按钮，比如单选按钮、复选框或按钮 |
<details> |
用于描述文档或文档某个部分的细节 |
<dialog> |
定义对话框，比如提示框 |
<summary> |
标签包含 details 元素的标题 |
<figure> |
规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> |
定义 <figure> 元素的标题 |
<footer> |
定义 section 或 document 的页脚。 |
<header> |
定义了文档的头部区域 |
<mark> |
定义带有记号的文本，典型的用法就是搜索结果中高亮显示搜索词。 |
<meter> |
定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> |
定义导航链接的部分。 |
<progress> |
定义任何类型的任务的进度，比如用来显示JS小号时间的函数进程。 |
<ruby> |
定义 ruby 注释（中文注音或字符）。 |
<rt> |
定义字符（中文注音或字符）的解释或发音。 |
<rp> |
在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> |
定义文档中的节（section、区段）。 |
<time> |
定义日期或时间，也可以同事表示两者。 |
<wbr> |
规定在文本中的何处适合添加换行符，宽度足够就不换行，和be有区别，中文用处不大。 |
已移除的元素
以下的 HTML4 元素在HTML5中已经被删除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
HTML5 移除和废弃的标签
能使用CSS代替的标签
一些标签纯粹是为了战士画面，HTML5建议放在CSS样式里处理，所以把这类元素给废弃了；并推荐使用css样式来搞定；
这部分废除的标签有
- font
- basefont
- big
- center
- s
- strike
- tt
- u
frame框架的标签
犹豫frame框架对网页可用性存在负面影响，所以HTML5已经不支持了，推荐使用iframe框架；
这部分废除的标签有
- frameset
- frame
- noframes
只有部分浏览器支持的标签
对于只有部分陆蓝旗支持的元素，在HTML5中被移除
这部分废除的标签有
- applet
- 可以由embed或者object元素代替
- bgsound
- 由audio元素代替
- blink
- marquee
- JS代码代替
其它废除的标签
-
rb
- 使用 ruby 代替
-
acronym
- 使用 abbr 代替
-
dir
- 使用 ul 代替
-
isindex
- 使用 from input 代替
-
insting
- 使用 pre 代替
-
xmp
- 使用 code 代替
-
nextid
- 使用 GUIDS 代替
-
plaintext
- 使用 “text/plian” MIME类型代替
HTML5 语义化页面
什么是主体结构标签?
HTML结构语义化，是HTML5开始才提出来的，以前的html结构，都是一堆没有语义的冷冰冰的div标签。div+css写出来，HTML一打开就是一堆div，为了改变这种这种状况，HTML5给出了几个新的结构化的标签。
HTML中比较重大的修改就是为了使文档结构更加清晰明确，容易阅读，增加了很多新的结构标签。
什么是语义标签?
HTML标签，也有的叫HTML元素，只是叫法不同；
我们常说的语义，语义化，是指有意义；
语义化标签，就是有意义的标签。
一个语义标签能够清楚的描述其意义，无论是浏览器，搜索引擎还是开发者都可以很直接的看明白。
-
无语义实例
:
<div>和<span>，这种无需考虑内容.
-
语义元素实例
<form>,<table>,<img>，这种会清楚的定义了它的内容.
什么是HTML结构语义化
所谓的HTML结构语义化，就是合理使用HTML5标签，让结构更加清晰明确，就这么简单。
很多人说的HTML静态页，符合语义化。其实是指结构化+语义化。
语义化的例子
一些网站都包含以下HTML代码：
<div id="nav">,<div class="header">,
这种标签，就是语义化标签，代表有意义的标签，不能和div一样随便用的。
HTML5语义标签大全
HTML5 添加了很多语义标签，可以在 HTML5 新增的标签元素 中查看 “新的语义和结构元素”部分的；
标签
<header> 标签的作用是引导和导航作用的，通常用来放置一个内容块的标题！！（除了标题，也可以包含其他内容的）
一个header标签，通常情况下，至少包含一个heading标签（就是h1-h6）,也包括后面要讨论的 hgroup，nav。
<header>
<h1>前端教程</h1>
</header>
注意：在页面中你可以使用多个 <header> 标签
<header>
<h1>前端教程</h1>
</header>
<div>
<header>
<h1>HTML5教程</h1>
</header>
</div>
标签
hgroup标签通常是用来将标题及子标题进行分组的
如果只有一个主标题是不需要hgroup标签的，比如上面header标签的例子；
但是如果还有子标题就需要了，比如下面这种
<header>
<hgroup>
<h1>前端教程</h1>
<h2>hello</h2>
</hgroup>
</header>
<nav> 标签定义导航链接的部分。
<nav> 元素用于定义页面的导航链接部分区域，不是所有的链接都需要包含在 <nav> 元素中,只需要把主要的链接组放进nav就可以了。
比如页脚的 服务条款，版权声明，联系我们等；
比如顶部导航条的，首页等
<nav>
<a href="/html/">HT
最低0.47元/天 解锁文章
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
