html5使得文档更加具有语义，内容更加多样化，表现力更强。
1.基本标签扩充：
语义标签扩充：写一篇文章不需要div构建就能完成
<html>
<head>
<title>
</title>
</head>
<body>
<article><!--新增的文章标签，用于定义文章，与以前的<h><p><br>标签很好的结合-->
<header><!--用于定义文档的头部，更具有语义-->
<h1></h1>
<header>
<section><!--用于定义文档的中的节，功能与div差不多，更具有语义-->
<details><!--定义元素的细节。-->
</summary><!--为 <details> 元素定义可见的标题。-->
</details>
<dialog> </dialog><!--定义对话框或窗口。-->
<p>
<bdo dir="rtl"><bdi></bdi></bdo></p><!--定义文字方向。-->
<p>
<mark></mark><!--定义有记号的文本。比用span或者样式包裹更加方便-->
<br/>
</p>
</section>
<footer><!--用于定义文档的尾部，比用div定义更具有语义-->
<time></time><!--用于定义时间-->
</footer>
</article>
<aside>
</aside>
</body>
</html>
2.多媒体标签扩充：
让object退出功成身退
<html>
<head>
<title>
</title>
</head>
<body>
<audio></audio><!--定义音频文件-->
<video></video><!--定义视频文件-->
<wbr></wbr><!--定义视频文件-->
<canvas></canvas><!--定义画布文件，跟windows系统带的画板一样-->
<progress></progress><!--进度条-->
<source></source><!--媒体来源-->
<track></track>><!--定义用在媒体播放器中的文本轨道。-->
<svg></svg><!--定义矢量图形-->
</body>
</html>
3.编程扩展
<embed> </embed>
<rp></rp>
<rt></rt>
<ruby></ruby>
- 存储
本地存储
localStorage ：
<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
sessionStorage：
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
应用缓存
<html manifest="/example/html5/demo_html.appcache">
- 地理位置
Geolocation
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
- 本地服务与服务器交互
web worker
server-sent event
扫一扫
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
