HTML5拓展教程

沙海
沙海
沙海
165
文章
2
评论
2018年7月30日15:50:28 评论 96 4481字阅读14分56秒

第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 属性

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

1.2 video 视频标签

1.2.1 定义和用法

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

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

1.2.2 实例

案例需求

播放一段简单的 HTML5 视频

案例代码

您的浏览器不支持 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中已经淘汰,但后期某些项目中会使用到

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 属性

属性 描述
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 案例需求

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

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
weinxin
资源分享QQ群
本站是一个IT技术分享社区, 会经常分享资源和教程; 分享的时代, 请别再沉默!
HTML5最后更新:2019-6-2
沙海
  • 版权声明:本站是一个IT技术分享社区,沙海技术团队的技术分享社区,我们会经常分享资源和教程。
  • 转载请注明:HTML5拓展教程 - Java秀 ☜(ˆ▽ˆ)
(新版)苏教版一年级数学下册课件
0005-基于JAVA技术新闻发布系统的设计与实现
最牛Java自学基础教程
2020部编版人教版初中语文七年级上册课件
匿名

发表评论

匿名网友 填写信息

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