undefined

HTML5的新特性

发表于 | 分类于 ，
字数统计: 2,259 | 阅读时长 ≈ 11

HTML5新的页面结构和宽松的语义化规范

1
2
<!doctype html>
<meta charset=“utf-8”/>

语义化标签的由来

http://devfiles.myopera.com/articles/572/idlist-url.htm
•主要用于页面的头部的信息介绍，也可用于板块头部
页面上的一个标题组合 一个标题和一个子标题，或者标语的组合
导航 （包含链接的的一个列表）
页脚 页面的底部 或者 版块底部
页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节
用来在页面中表示一套结构完整且独立的内容部分 •可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分 •aside的内容应该与article的内容相关。 •被包含在
中作为主要内容的附属信息部分，其中的内容以是与当前文章有关的引用、词汇列表等 •在
之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
用于对元素进行组合。一般用于图片或视频
figure的子元素用于对figure的内容进行说明
用来表现时间或日期
用于描述文档或文档某个部分的细节 •该元素用于摘录引用等应该与页面的主要内容区分开的其他内容 •Open属性默认展开
details元素的标题
定义一段对话
定义文章 或页面作者的详细联系信息
需要标记的词或句子
给表单添加一个公钥
定义进度条 
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header>用在页面的头部或者版块的头部</header>
<footer>用在页面的头部或者版块的底部</footer>
</body>
</html>

hgroup

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<hgroup>
	<h1>标题一</h1>
	<h2>标题二</h2>
</hgroup>
</body>
</html>

导航 （包含链接的的一个列表）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<nav><a href="#">链接</a><a href="#">链接</a></nav>
<nav>
	<p><a href="#">isabelle</a></p>
	<p><a href="#">isabelle</a></p>
</nav>
<nav>
	<h2>计算机课程</h2>
	<ul>
		<li><a href="#">javascript</a></li>
		<li><a href="#">html+css</a></li>
    </ul>
</nav>
</body>
</html>

section

页面上的版块

用于划分页面上的不同区域,或者划分文章里不同的节

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<section>用来划分区域</section>
</body>
</html>

article

用来在页面中表示一套结构完整且独立的内容部分

•可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<article>主体</article>
<aside>和主体相关的附属信息</aside>
</body>
</html>

aside

元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

•aside的内容应该与article的内容相关。

•被包含在

中作为主要内容的附属信息部分，其中的内容以是与当前文章有关的引用、词汇列表等

•在

之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<article>主体</article>
<aside>和主体相关的附属信息</aside>
</body>
</html>

figure

用于对元素进行组合。一般用于图片或视频

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<figure>
	<img />
    <figcaption> 计算机课程 photo &copy 计算机课程</figcaption>
</figure>
</body>
</html>

figcation

figure的子元素用于对figure的内容进行说明

time

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
</body>
</html>

datalist

选项列表。与 input元素配合使用，来定义input可能的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="text" list="valList" />
<datalist id="valList">
	<option value="javascript">javascript</option>
	<option value="html">html</option>
	<option value="css">css</option>
</datalist>
</body>
</html>

details summary

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<details>
    <summary>react框架</summary>
    <p>最近热门的框架</p>
</details>
</body>
</html>

dialog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<dialog open>
  <dt>老师</dt>
  <dd>2+2 等于？</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>
</body>
</html>

adress

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<address>作者信息</address>
</body>
</html>

mark

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
mark{ background:Red;}
</style>
</head>
<body>
<mark>标记</mark>
</body>
</html>

keygen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
    用户: <input type="text" name="usr_name" />
    公钥: <keygen name="security" />
    <input type="submit" />
</form>
</body>
</html>

progress

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<progress max="200" value="100">
    <span>76</span>   //span用来做兼容，显示比例
</progress>
</body>
</html>

HTML5新标签在IE下的兼容

方法一 js解决

针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们.

HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是
display，所以在样式表里要对这些标签定义一下 它默认的display

方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
document.createElement("leo");
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>
<style>
body{margin:0;}
header{height:100px;background:#9F3; display:block;}
article{ padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative;  display:block;}
aside{width:200px;height:300px;background:#F06; position:absolute;left:10px;top:10px;  display:block;}
section{margin-left:210px;background:#F90;height:300px;  display:block;}
footer{ height:100px;background:#C6C; display:block;}
leo{ background:#F03;height:100px; display:block;}
</style>
</head>
<body>
<header>页面头部</header>
<article>
	<aside>侧边栏</aside>
    <section>内容区域</section>
</article>
<footer>页面底部</footer>
<leo>刘伟是个胖子</leo>
</body>
</html>

方法二、插件html5shiv.js解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="html5shiv.js"></script>
<style>
body{margin:0;}
header{height:100px;background:#9F3;}
article{ padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative;}
aside{width:200px;height:300px;background:#F06; position:absolute;left:10px;top:10px;}
section{margin-left:210px;background:#F90;height:300px;}
footer{ height:100px;background:#C6C;}
</style>
</head>
<body>
<header>页面头部</header>
<article>
	<aside>侧边栏</aside>
    <section>内容区域</section>
</article>
<footer>页面底部</footer>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="html5shiv.js"></script>
</head>
<body>
<input type="text" list="valList" />
<datalist id="valList">
	<option value="javascript">javascript</option>
	<option value="html">html</option>
	<option value="css">css</option>
</datalist>

<details>
    <summary>react框架</summary>
    <p>热门的框架</p>
</details>

<progress max="200" value="100">
	<span>76</span>%
</progress>
</body>
</html>
觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多