H5新增特性详解

示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
...
</body>
</html>

一、新增元素

语义元素:<header>、<footer>、<article>、<section>。

表单元素属性:number、date、time、calendar、range。

图形元素:<svg>、<canvas>。

多媒体元素:<audio>、<video>

二、新增HTML5 API

API(应用程序编程接口):

1、地理定位(Geolocation)

2、拖放(Drag and Drop)

3、本地存储(Local Storage),cookies强力替代

4、应用缓存(Application Cache)

5、Web Workers

5、SSE 服务器推送事件(Server-sent Events)

三、H5中已删除元素

已删除 替代
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS, <s>, or <del>
<tt> CSS

四、浏览器支持

H5受到所有现代浏览器的支持。

所有的浏览器都会自动将不能识别的元素处理为内联元素。

所以,我们可以利用这个特性教会浏览器处理未知元素。

1、将语义元素定义为块级元素

H5中新增的8个语义元素,都为块级元素。

为了安全地纠正老版浏览器的行为,可以使用CSS的display属性来定义:

header, section, footer, aside, nav, main, article, figure{
    display:block;
}

2、添加自定义元素

如下例,添加一个自定义元素<myHreo>,并定义其样式:

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")<script>
<style>
myHreo{
    display:block;
    background-color:#dddddd;
    padding:50px;
    font-size:30px;
}
</style>
</head>
<body>
<h1>标题</h1>
<myHero>MyHero元素</myHero>
</body>
</html>

IE8及其支持版本不支持上述操作,但幸运的是,Sjoerd Visscher开发了HTML5 Shiv,参看:https://github.com/aFarkas/html5shiv

3、HTML5Shiv

HTML5Shiv置于<head>标签中,用<script>标签引用,如果使用了<article>, <section>, <aside>, <nav>, <footer>等H5标签,就最好引用HTML5Shiv,引用方法如下:

<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>

可以在GitHub上下载最新版本的HTML5Shiv:https://github.com/aFarkas/html5shiv

或者使用CDN版:https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

一个完整的使用示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>

<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>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</article>

</section>

</body>
</html>

五、新增元素讲解

1、新增语义/结构元素

标签 描述
<article> 定义文章
<aside> 定义侧边
<bdi> 隔离一段文本方向可能与其之外文本不同的文本
<details> 定义元素细节
<dialog> 定义对话框或窗口
<figcaption> 定义<figure>元素的标题
<figure> 定义自包含内容
<footer> 定义页脚
<header> 定义标头
<main> 定义文档主体内容
<mark> 定义标记的/高亮的文本
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项
<meter> 定义已知范围内的度量
<nav> 定义导航组
<progress> 代表任务进度
<rp> 定义不支持Ruby注释的浏览器中显示的内容
<rt> 定义字符的解释/发音(东亚印刷)
<ruby> 定义ruby注释(东亚印刷)
<section> 定义节
<summary> 为<details>元素定义一个可见的标题
<time> 定义日期/时间
<wbr> 定义可能的换行符

语义元素即有意义的元素,例如<form>、<table>、<article>,很明显就能看出其内容。非语义元素,如<div>、<span>等。

1)、section

W3C的HTML5文档是这样描述的:“A section is a thematic grouping of content, typically with a heading”,比如主页通常可以分为这几个部分:介绍、内容、联系方式。

<section>
	<h1>WWF</h1>
	<p>The World Wide fund for nature.</p>
</section>

2)、article

<article>元素应当是较为完整、相对独立的,本身就有意义,比如论坛上的一个帖子,博客上的一篇文章,报纸上的一篇报道。

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

3)、section与article的嵌套关系

两者应当是相互可以嵌套的关系,例如在一份报纸中,一篇文章article可能属于体育版块section,而每篇文章article中又可能有技术分析版块section。

4)、header

<header>元素应当作为介绍内容的容器。例如:

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

5)、footer

指定文档/section的页脚,通常包含作者、版权、联系方式等信息。例如:

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

6)、nav

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

7)aside元素

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

8)、figure

在H5中,图像及其说明应当共同置于<figure>元素中。

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>

9)、为何使用语义元素

在HTML4中,开发者会使用id/class来区分不同的组件,而有了HTML5之后么,这就变得更简单、更加语义化了。

W3C语义化网站:“Allows data to be shared and reused across applications, enterprises, and communities.”。

2、新增表单元素

标签 描述
<datalist> 指定预定义选项
<keygen> 定义密钥对生成区
<output> 定义计算结果

3、新增input类型与属性

新增input类型 新增input属性
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

详见:http://www.icoder.top/blog/index.php/2017/05/12/html-forms/

4、HTML5新增属性语法

HTML5中可以使用四种不同的语法:

类型 示例
<input type=”text” value=”John” disabled>
不加引号 <input type=”text” value=John>
双引号 <input type=”text” value=”John Doe”>
单引号 <input type=”text” value=’John Doe’>

5、HTML5图形元素

标签 描述
<canvas> 通过脚本绘制图形
<svg> 绘制矢量图形

6、新增媒体元素

Tag Description
<audio> 音频
<embed> 定义外部应用(非HTML)容器
<source> 为媒体元素(<vedio>、<audio>)定义多个媒体资源
<track> 定义媒体元素的文本字幕 (<video>、<audio>)
<video> 视频

六、HTML4到HTML5的迁移

HTML4 HTML5
<div id=”header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div class=”article”> <article>
<div id=”footer”> <footer>

一个典型的H4页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: black;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

div#menu ul {
    padding: 0;
}

div#menu ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>

<div id="header">
  <h1>Monday Times</h1>
</div>

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

<div id="content">
  <h2>News Section</h2>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
</div>

<div id="footer">
  <p>&amp;copy; 2016 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

其HTML5形式为:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5</title>
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}

section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}

nav ul {
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>

<header>
<h1>Monday Times</h1>
</header>

<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>

<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>

<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>

<article>、<section>与<div>的区别

在HTML5标准中,<section>被定义为相关元素块,<article>元素被定义为完整的、自包含的相关元素块,<div>为子元素块。

如何解释这种定义呢?

在上例中,我们将<section>作为相关文章的容器,其实,也可以用<article>来代替:

<article>

<h2>Famous Cities</h2>

<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>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

</article>

<article>中的<div>:

<article>

<h2>Famous Cities</h2>

<div class="city">
<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>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</article>

<div>—<section>—<article>

<article>

<section>
<h2>Famous Cities</h2>

<div class="city">
<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>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

<section>
<h2>Famous Countries</h2>

<div class="country">
<h2>England</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>
</div>

<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>

</article>

发帖时间: web