HTML5新增的常用标签
1.HTML5新增文档结构标签
1.1标签
-
页眉标签
页眉标签 和 用于定义网页文档或节的页眉，通常为网站名称。 -
导航标签
-
节标签
节标签 和 用于定义独立的专题区域，里面可包含一篇或多篇文章。 -
-
侧栏标签
-
页脚标签
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5新增文档结构标签的综合应用title>
head>
<style>
body {
background-color: #CCCCCC;
margin: 0px auto;
max-width: 900px;
border: solid;
border-color: #FFFFFF;
color: black;
}
header {
background-color: lightskyblue;
display: block;
color: #FFFFFF;
text-align: center;
}
h1 {
font-size: 72px;
margin: 0px;
}
h2 {
font-size: 24px;
margin: 0px;
text-align: center;
}
h3 {
font-size: 18px;
margin: 0px;
text-align: center;
}
nav {
display: block;
width: 100%;
float: left;
text-align: center;
background-color: white;
padding-top: 20px;
padding-bottom: 20px;
}
nav a:link, nav a:visited {
display: inline;
border-bottom: 3px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav a:hover {
color: white;
background-color: lightskyblue;
}
nav h3 {
margin: 15px;
}
#container {
background-color: #dcf2ff;
}
section {
display: block;
width: 60%;
float: left;
}
article {
background-color: white;
display: block;
margin: 10px;
padding: 10px;
}
article header {
padding: 5px;
}
article footer {
padding: 5px;
}
article h1 {
font-size: 18px;
}
aside {
color: lightskyblue;
display: block;
width: 20%;
float: left;
}
aside h3 {
margin: 15px;
}
aside p {
margin: 15px;
font-weight: bold;
}
footer {
clear: both;
display: block;
background-color: lightskyblue;
color: #FFFFFF;
text-align: center;
padding: 15px;
}
footer h2 {
font-size: 14px;
color: white;
}
/* links */
a {
color: lightskyblue;
}
a:hover {
text-decoration: underline;
}
style>
<body>
<header>
<h1>页眉Headerh1>
header>
<div id="container">
<nav>
<a href="http://www.example.com">菜单一a>
<a href="http://www.example.com">菜单二a>
<a href="http://www.example.com">菜单三a>
<a href="http://www.example.com">菜单四a>
<a href="http://www.example.com">菜单五a>
<a href="http://www.example.com">菜单六a>
<a href="http://www.example.com">菜单七a>
<a href="http://www.example.com">菜单八a>
nav>
<aside>
<h3>侧栏Asideh3>
<p>侧栏内容p>
<p>侧栏内容p>
<p>侧栏内容p>
<p>侧栏内容p>
<p>侧栏内容p>
<p>侧栏内容p>
aside>
<section>
<article>
<header>
<h1>文章页眉Article Headerh1>
header>
<p>正文内容p>
<p>正文内容p>
<p>正文内容p>
<p>正文内容p>
<p>正文内容p>
<p>正文内容p>
<footer>
<h2>文章页脚Article Footerh2>
footer>
article>
<article>
<header>
<h1>文章页眉Article Headerh1>
header>
<p>正文内容p>
<p>正文内容p>
<p>正文内容p>
<footer>
<h2>文章页脚Article Footerh2>
footer>
article>
section>
<aside>
<h3>侧栏Asideh3>
<p>侧栏内容p>
<p>侧栏内容p>
<p>侧栏内容p>
<p>侧栏内容p>
<p>侧栏内容p>
<p>侧栏内容p>
aside>
<footer>
<h2>页脚Footerh2>
footer>
div>
body>
html>
1.2优点
-
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
-
比
标签有更加丰富的含义，方便开发与维护；方便搜索引擎能识别页面结构，有利于SEO；
方便其他设备解析（如移动设备、盲人阅读器等）；
有利于合作，遵守W3C标准；
2.常用的功能性API
-
-
画布：实现2D和3D绘图效果；
-
音频和视频：实现自带控件播放音频和视频；
-
表单：新增一系列输入类型，例如电话号码、数字范围、email地址等；
-
地理定位：使用浏览器进行地理位置经纬度的定位；
-
Web存储
这6个API此处不赘述,皆会另开一篇详谈.