HTML5拓展教程

  • A+
所属分类:HTML5

第1章 媒体标签

1.1 audio 音频标签

1.1.1 定义和用法

<audio> 标签用于播放声音,比如音乐或其他音频流,是 HTML 5 的新标签。

提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

1.1.2 实例

案例需求:

播放一段简单的 HTML 5 音频

案例效果:

HTML5拓展教程

案例代码:

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

1.1.3 属性

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

1.2 video 视频标签

1.2.1 定义和用法

<video> 标签用于播放视频,比如电影片段或其他视频流,是 HTML 5 的新标签。

注释:Internet Explorer 8 以及更早的版本不支持 <video> 标签。可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

1.2.2 实例

案例需求

播放一段简单的 HTML5 视频

案例代码

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

1.2.3 属性

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted规定视频的音频输出应该被静音。
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

第2章 框架标签

2.1 框架标签:frame

注:框架标签在html5中已经淘汰,但后期某些项目中会使用到

2.1.1 应用场景:

用于HTML4.01,框架主要用于后台管理系统的界面开发。在一个页面中引用了其它几个页面,每个页面是一个框架,整个构成了一个框架集。

HTML5拓展教程

2.1.2 与普通页面的区别

  1. 需要使用框架的DTD文件
  2. 页面中没有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 案例需求

使用框架标签制作如图所示的后台管理页面

2.3.2 案例效果

HTML5拓展教程

2.3.3 案例分析

HTML5拓展教程

2.3.4 案例结构

HTML5拓展教程

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 元素会创建包含另外一个文档的内联框架(即行内框架),用于在一个页面中包含另一个页面或资源。

提示:您可以把需要的文本放置在 <iframe> </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。

3.2 属性

属性描述
alignleft right top middle bottom不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder1 0规定是否显示框架周围的边框。
heightpixels %规定 iframe 的高度。
longdescURL规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheightpixels定义 iframe 的顶部和底部的边距。
marginwidthpixels定义 iframe 的左侧和右侧的边距。
nameframe_name规定 iframe 的名称。
sandbox"" allow-forms allow-same-origin allow-scripts allow-top-navigation启用一系列对 <iframe> 中内容的额外限制。
scrollingyes no auto规定是否在 iframe 中显示滚动条。
seamlessseamless规定 <iframe> 看上去像是包含文档的一部分。
srcURL规定在 iframe 中显示的文档的 URL。
srcdocHTML_code规定在 <iframe> 中显示的页面的 HTML 内容。
widthpixels %定义 iframe 的宽度。

3.3 案例

3.3.1 案例需求

将一张图片使用内联框架,嵌入到另一个页面中

3.3.2 案例效果

HTML5拓展教程

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 概念

语义化就是你看到某个标签就知道它是干什么的,见名知义。语义化的主要优点如下:

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

4.2 常用的语义化标签

语义化标签作用
<header>用于网页的页眉,页眉通常用于设置网站标志、主导航、全站链接以及搜索框。
<nav>用于页面的导航,仅对文档中重要的链接群使用。
<main>页面主要内容,一个页面只能使用一次。
<section>具有相似主题的一组内容,比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
<footer>用于网页的页脚,只有当父级是body时,才是整个页面的页脚。
历史上的今天
七月
30
  • 资源分享QQ群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
专业承接各类企业网站的开发和维护
动力节点最牛Java自学基础教程
美女讲师教你学C语言
TripodCloud:性价比最高的CN2 GIA服务器

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: