HTML5新特性都有哪些？
一、W3C对HTML5的需求整体原则：
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求（比如 Flash）
更优秀的错误处理- 更多取代脚本的标记
- HTML5 应该独立于设备
- 开发进程应对公众透明
二、什么是HTML:
- HTML是创建网页的标准标记语言
- HTML描述了使用标记的网页结构
- HTML元素由标签显示
- 浏览器不会显示HTML标签，而是使用它们呈现页面的内容
三、新增的语义/结构化标签 Semantic
| 标签 | 标签 |
|---|---|
| <article>文档中定义文章内容 | <aside> |
| <details> | <dialog> |
| <figcaption> | <figure> img和figcaption组合放在figure里 |
| <footer> 一个文档可以有多个footer | <header>一个文档可以有多个header |
| <main> | <mark> |
| <nav> 导航 | <section> 在文档中定义部分 |
| <summary> | <time> |
四、新增的input类型和属性
| 类型type | 属性attribute |
|---|---|
| color | autocomplete |
| date | autofocus |
| datetime | form |
| datetime-local | formaction |
| formenctype | |
| month | formmethod |
| number | formnovalidate |
| range | formtarget |
| search | height and width |
| tel | list |
| search | min and max |
| time | pattern(regexp) |
| url | placeholder |
| week | required |
| step | |
| mutiple | |
| 其他 | 其他 |
五、HTML4 到HTML5语义化标签迁移
| HTML4 | HTML5 |
|---|---|
| <div id="header"></div> | <header> |
| <div id="menu"></div> | <nav> |
| <div id="content"></div> | <section> |
| <div class="article"></div> | <article> |
| <div id="footer"></div> | <footer> |
六，SVG与Canvas区别
- SVG适用于描述XML中的2D图形的语言
- Canvas随时随地绘制2D图形(使用JavaScript)
- SVG是基于XML的，这意味着每个元素在SVG DOM中都可用。你可以为每个元素添加JavaScript事件处理程序
- 在SVG中，每个绘制的形状都会被记忆为一个对象。如果SVG对象的书香发生变化，浏览器可以自动重新渲染形状。
- Canvas是一像素一像素地渲染。在画布中，一旦图形绘制好了，就会被浏览器遗忘。如果你想改变某一个的位置，整个场景都需要重新绘制，包括可能已经被图形覆盖的任何对象。
| Canvas | SVG |
|---|---|
| 与分辨率相关(可以理解为位图，图形放大会失真看到一个个像素点) | 与分辨率无关(可以理解为矢量，图形放大不会失真) |
| 不支持事件处理程序 | 支持事件处理程序 |
| 文字呈现功能比较简单 | 最适合具有大型渲染区域地应用程序(如Google地图) |
| 可以将生成的图像保存为.png或.jpg | 如果复杂地话渲染速度慢(其实任何使用DOM的东西都会很慢) |
| 非常适合图形密集性游戏 | 不适合游戏应用程序 |
七、新的多媒体标签
| video | audio |
|---|---|
| source | embed |
| track |
十、新的HTML5的API
- (Application Programming Interface)--应用程序编程接口
- HTML Geolocation 地理位置
- HTML Drag & Drop拖放
- HTML Local Storage 本地存储
- HTML Application Cache 应用程序缓存
- HTML Web Workers web工作者
- HTNL SSE
十一、浏览器的支持度
- 所有现代浏览器都支持HTML5
- 另外，对于新旧浏览器，无法识别的元素，作为内联自动处理
十二、语义元素转换为块元素：
- HTML5新定义了8个新的语义化元素，全都是块元素
- 如果像确保新老浏览器都支持，我们可以手动设置CSS样式
header, section, footer, aside, nav, main, article, figure {
display: block;
}
十三、可以自定义标签名字
- 自定义标签和style样式
<style>
display: block;
width: 400px;
height: 300px;
background: lightpink;
margin-left: 100px;
margin-top: 100px;
font-size: 30px;
text-align: center;
line-height: 300px;
color: green;
</style>
<body>
<aaa> //随便取的标签名字，你开心不就好啦~
你好，我是Amelia
</aaa>
</body>
1
高能预警：傻缺IE8(及以前)不允许未知元素
- HTML5Shiv是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
- HTML5Shiv包裹在<head>元素里，
- 是一个js外部文件
- 在使用HTML5新元素就可以引入它了
<head>
// 下面是HTML的条件注释判断。只给懂的人...呸、浏览器看
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- HTML5标签-->
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
</section>
</body>
十四、HTML5删除/废弃不能用的元素
| 删除的元素 | 被以下替代 |
|---|---|
| <acronym> 首字母缩写 | <abbr> |
| <applet> | <object> |
| <basefont> 页面上默认字体颜色和字号 | CSS样式 |
| <big> 更大的文本 | CSS样式 |
| <center> 文本水平居中 | CSS样式 |
| <dir> 目录列表 | CSS样式 |
| <font> 字体外观，尺寸，颜色 | CSS样式 |
| <frame> 定义子窗口 | |
| <frameset> 定义框架集 | |
| <noframes> 向浏览器显示无法处理框架的提示文本，位于frameset元素中 | |
| <strike> 文本添加删除线 | CSS样式，<s>或<del> |
| <tt> 定义打字机文本 | CSS样式 |
<acronym title="World Wide Web">WWW</acronym> //换成了abbr
<basefont color="red" size="5" /> //CSS样式替代
<frame></frame>
<frameset></frameset> //该标签对网页可用性的负面影响
十五、其他细节
- 闭合标签，双标签不写那个闭合的标签不会出现解析错误，但是建议闭合
<section>
<p>This is a paragraph. //没有</p>
<p>This is a paragraph.
</section>
- 单标签元素建议加 /来闭合；但在XHTML和XML文档中是必须要加的
<meta charset="utf-8">
<meta charset="utf-8" /> //两个都行
- HTML5元素命名 & class等属性名允许混合使用大写和小写字母，但建议用小写
- 1.混合使用本身就不符合命名习惯
- 2.视觉更干净
- 3.小写更容易编写
- 引号括起来的属性现在允许去掉，下面的例子都不会报错，
<table class="striped"> //建议用
<table class="striped"> //不建议用
<table class="table" striped> //更不建议用
- 在HTML5标准里，<html>,<body>,<header>标签甚至是可以省略的，但不建议哦~
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
- HTML5通过meta标签达到监听并适配设备屏幕的布局
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 扩展名.html和.htm的差异：
- 解析方面是没有区别的。任何浏览器Wen服务器都会将它们视为HTML
- 两者的差异体现在文化发展层面：
.htm 可以察觉早期讲扩展名限制为3个字符的DOS系统 .html 不会特定去识别Unix操作系统的这个扩展名字符限制- 技术层面的差异：
* 当URL没有指定文件名时(比如：https://www.w3schools.com/css/)，服务器将返回默认的文件名，通用的默认文件名是：index.html、index.htm、default.html、和default.html
* 但如果你的服务器仅配置了“index.html”作为默认文件名，那么你的文件就必须命名index.html，不能用index.htm
* 不过服务器可以配置多个默认的文件名，所以你可以根据需要设置多个默认文件名
* 总而言之，HTML文件的完整扩展名是.html，我们没有理由不用它啊~~~作者：小宝薯
链接：https://www.jianshu.com/p/37c0b1eb4145
来源：简书
代码改变了我们，也改变了世界
