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
email 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语义化标签迁移

HTML4HTML5
<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是一像素一像素地渲染。在画布中,一旦图形绘制好了,就会被浏览器遗忘。如果你想改变某一个的位置,整个场景都需要重新绘制,包括可能已经被图形覆盖的任何对象。
CanvasSVG
与分辨率相关(可以理解为位图,图形放大会失真看到一个个像素点) 与分辨率无关(可以理解为矢量,图形放大不会失真)
不支持事件处理程序 支持事件处理程序
文字呈现功能比较简单 最适合具有大型渲染区域地应用程序(如Google地图)
可以将生成的图像保存为.png或.jpg 如果复杂地话渲染速度慢(其实任何使用DOM的东西都会很慢)
非常适合图形密集性游戏 不适合游戏应用程序

七、新的多媒体标签

videoaudio
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;
     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
来源:简书
代码改变了我们,也改变了世界
原文地址:https://www.cnblogs.com/wencaiguagua/p/13586212.html