HTML5新增标签
head设置页面头信息
设置页面标题
<title> ~ </title>
设置页面编码:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
utf-8 多国语言编码
gb2312 中文简体编码
设置页面关键字,内容介绍
<meta name="keywords" content="关键字1,关键字2,..." />
<meta name="description" content="关键字1,关键字2,..." />
<meta name="author" content="mycodewind，mycodewind@qq.com">
<meta name="copyright" content="本网站版权归XXXXX所有">
audio音频标签
1.标签定义及使用说明
<audio> 标签定义声音，比如音乐或其他音频流。
目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
2. 浏览器支持
IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。
注释： IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。
3.属性
Autoplay:如果出现该属性，则音频在就绪后马上播放 autoplay=”autoplay”
Controls:如果出现该属性，则向用户显示音频控件 controls=”controls”
Loop:如果出现该属性，则每当音频结束时重新开始播放 loop=”loop”
4. 实例
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.wav" type="audio/wav">
您的浏览器不支持 audio 元素。
</audio>
video标签将视频作为页面背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin:0;
}
video{
position: fixed;
right:0;
bottom:0;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-1000;
}
</style>
</head>
<body>
<video autoplay id="background" muted>
<source src="./80s.mp4" />
</video>
</body>
</html>
<script>
var background = document.getElementById("background");
background.playbackRate = 0.5;
</script>
div布局容器标签
div 与其它标签一样,也是一个XHTML所支持的标签
div 是XHTML中指定的,专门用于布局设计的容器标签
在css布局方式中,div是这种布局方式的核心对象,我们的页面排版不再依赖于表格
仅从div的使用上说,做一个简单的布局只需要两样东西:div与css
因此我们称这种布局方式为 div + css 布局
<div id="header">页面头部</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer">页脚</div>
span区块标签
1.标签定义及使用说明
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
实例：
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
1.标签定义及使用说明
<header> 标签定义文档或者文档的一部分区域的页眉。
<header> 元素应该作为介绍内容或者导航链接栏的容器。
在一个文档中，您可以定义多个 <header> 元素。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
1. 浏览器支持
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <header> 标签。
注释：IE 8 或更早版本的 IE 浏览器不支持 <header> 标签。
3. 实例
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
1.标签定义及使用说明
<footer> 标签定义文档或者文档的一部分区域的页脚。
<footer> 元素应该包含它所包含的元素的信息。
在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
在一个文档中，您可以定义多个 <footer> 元素。
2. 浏览器支持
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <footer> 标签。
注释：IE 8 或更早版本的 IE 浏览器不支持 <footer> 标签。
3. 实例
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
nav导航元素
1.标签定义及使用说明
表示页面中导航链接的部分，例如：传统导航条，侧边栏导航，页内导航，翻页等
<nav> 标签定义导航链接的部分。
并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。
在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。
1. 浏览器支持
目前大多数浏览器支持 <nav> 标签。
3. 实例
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
base标签
1.标签定义及使用说明
<base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。
在一个文档中，最多能使用一个 <base> 元素。
<base> 标签必须位于 <head> 元素内部。
2.浏览器支持
所有主流浏览器都支持 <base> 标签。
3.实例
<head>
<base href="/Volumes/dancework/html/images/">
</head>
<body>
<img src="cover.jpg" />
</body>