第十一章网页

水印
day 11
一、HTML5中新增的元素(布局标签)
1、新增的结构标签
(1) header标签
网页的头部标签，页眉标签
<header></header>
( 2) footer标签
网页的底部标签，页脚标签
<footer></footer>
(3)nav标签
导航标签，可以放导航链接组、侧边导航、翻页操作、业内导航；
<nav></nav>
(4)article标签
可以放页面中独立的内容区，例如文章，用户的评论、独立的插件、论坛的帖子等<article></article>
(5)section标签
(5)section标签
网页中独立的章在section中一般会有标题和正文等构成
<section></section>
(6)aside标签
网页的侧边栏，页面中附属的信息内容都可以使用aside标签
<aside></aside>
(7) hgroup标签
标题组
<hgroup>
<h3></h3>
<h4></h4>
</hgroup>
2、h5新增的其他标签
(1) figure标签
设置独立的流内容(可以放图片，图表和代码等)
注意：
figcaption在—日igure中最多只允许使用一次，其他内容可以使用多次
<!-- 不带标题的gifure -->
<figure>
<img src="./images/pikachen.jpg" alt="">
</figure>
<!-- 带标题的figure->
<figure>
<img src="./images/pikachen.jpg" alt="">
<figcaption>大唐不夜城——皮卡晨</figcaption>
</figure>
<!-- figcaption在一组figure中最多只允许使用一次，其他内容可以使用多次 --><figure class="box">
<img src="./images/xian.jpg" alt="">
<img src="./images/xian2.jpg" alt="">
<img src="./images/xian3.jpg" alt="">
<figcaption>西安---陕西的省会，beautiful!</figcaption>
</figure>
(2)mark标签
定义带有记号的文本
包裹在mark标签中的内容会显示黄色背景，高亮显示
<mark></mark>
(3)time标签
时间，在页面中不会有特殊的显示效果
<time></time>
可以使用datetime属性设置具体的时间
<P>我们今天中午<time>13：40</time>上课</P>
<P>我们今天中午<time datetime="13:40">一点四十</time>上课</P>
me datetimen7030-07-08：0/5m2加油くPm由。
二、HTML5兼容
IE9+以上的浏览器支持H5部分特性
HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：
• 使用javascript新增元素的方法解决
<script>
// 使用javascript新增元素的方法解决
// 创建元素
var ele = document.createElement("header");
// 通过id名称获取元素
var box = document.getElementById("box1")；
//给ele元素添加文字内容
ele.innerHTML = “123";
//将创建好的元素放入box中
box.appendchild(ele);
/ecrint>
时间，在页面中不会有特殊的显示效果
<time></time>
可以使用datetime属性设置具体的时间
<P>我们今天中午<time>13：40</time>上课</P>
<P>我们今天中午<time datetime="13:40">一点四十</time>上课</P>
me datetimen7030-07-08：0/5m2加油くPm由。
二、HTML5兼容
IE9+以上的浏览器支持H5部分特性
HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：
• 使用javascript新增元素的方法解决
<script>
// 使用javascript新增元素的方法解决
// 创建元素
var ele = document.createElement("header");
// 通过id名称获取元素
var box = document.getElementById("box1")；
//给ele元素添加文字内容
ele.innerHTML = “123";
//将创建好的元素放入box中
box.appendchild(ele);
/ecrint>
WebM video/webm chrome、Firefox、Opera
浏览器的支持情况：IE9+及标准浏览器下可以支持
3、source标签
为视频/音频定义媒介资源
<source src="" type="">
• src属性 定义音频/视频的url
• type属性 MIME的类型
<audio controls>
<source src="./media/biubiubiu.ogg" type="audio/ogg"> <source src="./media/hanmai.mp3" type="audio/mpeg"> <source src="./media/nada.wav" type="audio/wav">
您的浏览器可能需要升级了~
</audio>