WEB学习笔记（二）：HTML5比常用的HTML多了哪些？
2015-02-04 22:37
190 查看
html5使得文档更加具有语义，内容更加多样化，表现力更强。
1.基本标签扩充：
语义标签扩充：写一篇文章不需要div构建就能完成
<html>
<head>
<title>
</title>
</head>
<body>
<article><!--新增的文章标签，用于定义文章，与以前的<h><p><br>标签很好的结合-->
<header><!--用于定义文档的头部，更具有语义-->
<h1></h1>
<header>
<section><!--用于定义文档的中的节，功能与div差不多，更具有语义-->
<details><!--定义元素的细节。-->
<summary>
</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
7.还加了一些属性和事件
事件基本是js操作。
1.基本标签扩充：
语义标签扩充：写一篇文章不需要div构建就能完成
<html>
<head>
<title>
</title>
</head>
<body>
<article><!--新增的文章标签，用于定义文章，与以前的<h><p><br>标签很好的结合-->
<header><!--用于定义文档的头部，更具有语义-->
<h1></h1>
<header>
<section><!--用于定义文档的中的节，功能与div差不多，更具有语义-->
<details><!--定义元素的细节。-->
<summary>
</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
7.还加了一些属性和事件
事件基本是js操作。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML学习笔记（二）_HTML5常用元素与属性
- <学习html>第八天笔记-HTML5文档类型和字符集、HTML5新标签与特性（常用新标签、新增input type属性值、常用新属性、多媒体标签）
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
- 学习笔记之javaweb基础:http协议&html基础
- Android菜鸟学习笔记（WebView加载html页面，页面提交数据问题）
- 【HTML5】学习笔记2(常用标签1)
- WEB学习笔记（一）：HTML基本标签
- HTML5学习笔记一web存储
- Html - web 第一语言， 学习笔记(一) [入门级别]
- HTML学习笔记（HTML5新特性）NO.5
- Android菜鸟学习笔记（WebView加载html,滑动时闪屏）
- Html - web 第一语言， 学习笔记 (二)
- 学习笔记_web——HTML
- HTML学习笔记——常用元素及其属性（二）
- html5 学习笔记三（web存储）
- 学习笔记(2):HTML 常用标签的归纳
- Java web 学习笔记 Html CSS 小节
- Java web 学习笔记 Html CSS 小节
- HTML常用标签的属性（学习笔记，慢慢更新中...）
- HTML5--web存储学习笔记