2018年7月30日15:50:28HTML5评论245字数 4481阅读14分56秒阅读模式

第1章媒体标签

1.1 audio 音频标签

1.1.1 定义和用法

<audio> 标签用于播放声音，比如音乐或其他音频流，是 HTML 5 的新标签。文章源自JAVA秀-https://www.javaxiu.com/697.html

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。文章源自JAVA秀-https://www.javaxiu.com/697.html

1.1.2 实例

案例需求：

播放一段简单的 HTML 5 音频文章源自JAVA秀-https://www.javaxiu.com/697.html

案例效果：

HTML5拓展教程文章源自JAVA秀-https://www.javaxiu.com/697.html

案例代码：

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

1.1.3 属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

1.2 video 视频标签

1.2.1 定义和用法

<video> 标签用于播放视频，比如电影片段或其他视频流，是 HTML 5 的新标签。文章源自JAVA秀-https://www.javaxiu.com/697.html

注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。文章源自JAVA秀-https://www.javaxiu.com/697.html

1.2.2 实例

案例需求

播放一段简单的 HTML5 视频文章源自JAVA秀-https://www.javaxiu.com/697.html

案例代码

您的浏览器不支持 video 标签。
</video>

1.2.3 属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

第2章框架标签

2.1 框架标签：frame

注：框架标签在html5中已经淘汰，但后期某些项目中会使用到文章源自JAVA秀-https://www.javaxiu.com/697.html

2.1.1 应用场景：

用于HTML4.01，框架主要用于后台管理系统的界面开发。在一个页面中引用了其它几个页面，每个页面是一个框架，整个构成了一个框架集。文章源自JAVA秀-https://www.javaxiu.com/697.html

HTML5拓展教程文章源自JAVA秀-https://www.javaxiu.com/697.html

2.1.2 与普通页面的区别

需要使用框架的DTD文件
页面中没有body标签，而是使用frameset标签代替

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2.2 框架标签的属性

2.2.1 frameset框架集的属性

属性名	作用
rows	设置框架每1行的高度。如： rows="100,300,300" 表示有3行，第1行高100，第2行300，第3行300 rows="10%,90%" 表示有2行，第1行高占页面的10%，第2行占90% rows="200,*" 表示有2行，第1行200个像素，剩下的给第2行单位：固定像素或百分比
cols	设置框架每1列的宽度如： cols="200,*"

2.2.2 frame框架的属性

属性名	作用
src	框架中显示的HTML文件
name	当前框架的名字
noresize	不能修改框架的尺寸

2.3 案例：后台管理页面的制作

2.3.1 案例需求

使用框架标签制作如图所示的后台管理页面文章源自JAVA秀-https://www.javaxiu.com/697.html

2.3.2 案例效果

HTML5拓展教程文章源自JAVA秀-https://www.javaxiu.com/697.html

2.3.3 案例分析

HTML5拓展教程文章源自JAVA秀-https://www.javaxiu.com/697.html

2.3.4 案例结构

HTML5拓展教程文章源自JAVA秀-https://www.javaxiu.com/697.html

2.3.5 案例代码

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <!--将原来的body换成frameset-->
    <frameset rows="80,*" border="2">
        <!--noresize 表示不能修改框架的大小-->
        <frame src="top.html" noresize="noresize"/>
        <!--下面又分成左右两个部分-->
        <frameset cols="120, *">
            <frame src="left.html" />
            <frame src="main.html" name="main"/>
        </frameset>
    </frameset>
</html>

left.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <body>
        <h3>菜单项</h3>
        <a href="welcome.html" target="main">欢迎页面</a>
        <hr />
        <a href="#">菜单选项</a>
        <hr />
        <a href="#">菜单选项</a>
        <hr />
        <a href="#">菜单选项</a>
        <hr />
        <a href="#">菜单选项</a>
        <hr />
        <a href="#">菜单选项</a>
    </body>
</html>

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <body>
        <h1>显示的主要内容main</h1>
    </body>
</html>

top.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <body>
        <h2>公司的Logo</h2>
    </body>
</html>

welcome.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <body>
        <h2>欢迎主页面</h2>
    </body>
</html>

第3章内联框架iframe

3.1 定义和用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架），用于在一个页面中包含另一个页面或资源。文章源自JAVA秀-https://www.javaxiu.com/697.html

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。文章源自JAVA秀-https://www.javaxiu.com/697.html

3.2 属性

属性	值	描述
align	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。
width	pixels %	定义 iframe 的宽度。

3.3 案例

3.3.1 案例需求

将一张图片使用内联框架，嵌入到另一个页面中文章源自JAVA秀-https://www.javaxiu.com/697.html

3.3.2 案例效果

HTML5拓展教程文章源自JAVA秀-https://www.javaxiu.com/697.html

3.3.3 案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe框架</title>
</head>
<body>
    <iframe src="image/eg_landscape.jpg">您的浏览器不支持iframe</iframe>
    <p>一些老的浏览器不支持 iframe。</p>
    <p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>

第4章语义化标签

4.1 概念

语义化就是你看到某个标签就知道它是干什么的，见名知义。语义化的主要优点如下：文章源自JAVA秀-https://www.javaxiu.com/697.html

提升浏览器对网页的可访问性；
有利于百度等搜索引擎的优化；
对于开发者来说，结构更加清晰，利于文档的维护；

4.2 常用的语义化标签

语义化标签	作用
<header>	用于网页的页眉，页眉通常用于设置网站标志、主导航、全站链接以及搜索框。
<nav>	用于页面的导航，仅对文档中重要的链接群使用。
<main>	页面主要内容，一个页面只能使用一次。
<section>	具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
<footer>	用于网页的页脚，只有当父级是body时，才是整个页面的页脚。