Web前端开发 课件 第5章 HTML5进阶_第1页
Web前端开发 课件 第5章 HTML5进阶_第2页
Web前端开发 课件 第5章 HTML5进阶_第3页
Web前端开发 课件 第5章 HTML5进阶_第4页
Web前端开发 课件 第5章 HTML5进阶_第5页
已阅读5页，还剩41页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章

HTML5进阶《Web前端开发》HTML5未来(2012)分化点分歧HTML

1.01993年(IETF)HTML

2.01995年(W3C)HTML

3.21996年(W3C)HTML

4.01997年(W3C)HTML

4.011999年(W3C)XHTML

1.02000年(W3C)XHTML

1.12001年(W3C)XHTML2.0?（W3C）HTML5草案2004年(WHATWG)HTML5正式版草案2008年(合并)5.1HTML语言版本变迁HTML5的文档声明HTML5没有指定的具体的版本，表示最新的

html版本5.2HTML5新特性HTML5中的一些有趣的新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search5.2HTML5新特性HTML5文档结构同样是由头部和主体两部分组成，只是新增了一些结构元素，如header、nav、article、section、aside、footer六个结构元素，这些元素都是块级元素。13.2.1HTML5页面结构图13-2HTML4.01页面布局图13-3HTML5结构元素布局5.3HTML5新增结构元素HTML5页面结构元素语法：<body><header> <nav>...</nav></header><article> <section>...</section></article><aside>...</aside><footer>...</footer></body>5.3HTML5新增结构元素1．header标记header标记定义文档和区域的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常<header>标记至少包含（但不局限于）一个标题标记（h1～h6），也可以包括hgroup（标题组合）标记、表格标识、搜索表单、导航等。<header> <hgroup> <h1>HTML5是下一代的HTML。</h1> <h3>什么是HTML5？</h3> <h5>HTML5将成为HTML、XHTML以及HTMLDOM的新标准。</h5> </hgroup></header>5.3HTML5新增结构元素2．nav标记nav标记代表页面的一个部分，是一个可以作为页面导航的链接组。建议不要在footer元素中使用nav元素，否则易造成页面显示不正确。配置相应的CSS代码可以实现水平导航。<body><header><nav><ul><li><ahref="#">HTML参考手册</a></li><li><ahref="#">HTML实例</a></li><li><ahref="#">HTML测验</a></li></ul></nav></header></body>5.3HTML5新增结构元素3.article标记article标记是一个特殊的section标记，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用，可包含header，footer。例如论坛帖子、博客文章、新闻故事、评论等。<article><header><hgroup><h1>HTML5结构元素的简介</h1><h2>HTML5的诞生</h2></hgroup><timedatetime="2017-04-28">2017-04-28</time></header><p>HTML5引入了许多新元素，包括几个用于更好地描述文本结构的元素……</p></article>5.3HTML5新增结构元素4．section标记section标记定义文档中的节。例如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。section元素不是一个普通的容器元素，它表示一段专题性的内容，可以带有标题。<section><h1>section标记</h1><p>用来定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。</p></section><article><h1>article标记</h1><p>article标记标识了Web页面中的主要内容。以博客为例，每篇帖子都构成一个重要内容。</p></article>5.3HTML5新增结构元素5．aside标记aside（侧栏，也称为旁注）标记用来说明其所包含的内容与页面主要内容相关，但不是该页面的一部分，类似于使用括号对正文进行注释（就像这样）。括号中的内容提供关于该元素的一些附加信息，例如广告、成组的链接、侧栏等。<header>我的博客</header><section><article><p>这是页面上重要的内容部分。也许是博客文章。带aside元素。</p><aside><p>这是第一篇博客文章。</p></aside></article><article><p>这是页面上重要的内容部分。也许是博客文章。不带aside元素</p></article></section>5.3HTML5新增结构元素6．footer标记footer标记定义section或文档的页脚，包含了与页面、文章或部分内容有关的信息，例如文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它与页眉header标记用法相同，在一个页面中可以多次使用，若在一个区段的最后使用footer标记，那么它就相当于该区段的页脚。<footerstyle="text-align:center;"><section><ahref="/"target="_blank">CAICT中国信通院</a><a>……</a><a>……</a></section><spanstyle="padding:2px5px;">京ICP备12046007号-5</span><spanstyle="padding:2px5px;">HTML5中国产业联盟版权所有</span></footer>5.3HTML5新增结构元素1.输入框占位符placeholder属性用于为input类型的输入框提供相关提示信息，以提示用户输入何种内容。在输入框为空时显式提示信息，当输入框获得焦点时，提示信息消失。案例演示5.4

HTML5表单2.输入框自动获取焦点autofocus属性用于指定页面加载后是否自动获取焦点，将autofocus属性的属性值指定为true时，页面加载完毕后会自动获取该焦点。案例演示5.4

HTML5表单3.输入框浏览器历史用户输入的浏览历史数据的展示，HTML5之前需要使用ul之类的列表配合CSS完成，HTML5中只需要使用datalist标签并在内部添加若干个option标签即可实现。例如：5.4

HTML5表单<inputlist="product"><datalistid="product">

<optionvalue="苹果">

<optionvalue="香蕉">

<optionvalue="橘子"></datalist>（1）email类型<inputtype="email"/>email类型的input控件是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。5.4

HTML5表单4.新增input标签类型（2）url类型<inputtype="url"/>url类型的input控件是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。5.4

HTML5表单4.新增input标签类型（3）日期输入表单<inputtype="date"/>5.4

HTML5表单4.新增input标签类型（4）日期输入表单<inputtype="time"/>（5）月份输入表单<inputtype="month"/>5.4

HTML5表单4.新增input标签类型（6）周日期输入表单<inputtype="week"/>（7）number类型<inputtype="number"/>5.4

HTML5表单（7）number类型<inputtype="number"/>number类型的input控件用于提供输入数值的文本框。在提交表单时，number类型的input控件会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。number类型具体属性说明如下。value：指定输入框的默认值。max：指定输入框可以接受的最大的输入值。min：指定输入框可以接受的最小的输入值。step：输入域合法的间隔，如果不设置，默认值是1。5.4

HTML5表单（8）tel类型<inputtype="tel"/>tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此tel类型通常会和pattern属性配合使用，验证输入的电话号码格式正确与否。5.4

HTML5表单(9)search类型<inputtype="search"/>search类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符。例如，站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。5.4

HTML5表单（10）color类型<inputtype="color"/>color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。颜色采用十六进制颜色值，基本形式是#RRGGBB，默认颜色值为#000，通过value属性值可以更改默认颜色。案例演示5.4

HTML5表单属性说明autocomplete属性规定表单或输入字段是否应该自动填充，自动填充上一次的值autofocus布尔类型，自动获取焦点form可以在<form>标签之外使用<input>，通过此属性指定<form>的id，此<input>属于指定<form>formaction适用于type=submit，当有多个submit，可以通过此属性指定不同的请求urlformenctype当把表单数据（form-data）提交至服务器时如何对其进行编码，仅针对method="post"的表单，formenctype属性覆盖<form>元素的enctype属性。formmethod适用于type=submit，定义请求方式，会覆盖<form>中的method，可以在有多个submit时使用formnovalidate规定在提交表单时不对

<input>元素进行验证formtarget相当于<a>的target属性，是否打开新的页面height和width宽高尺寸，仅适用于type="image"list引用<datalist>，一个单独的<datalist>不会显示min和max规定value的最大、最小值，适用于number、range、date、datetime、datetime-local、month、time以及weekmultiple布尔类型，允许用户在

<input>元素中输入一个以上的值，适用于type=file和emailpattern规定用于检查

<input>元素值的正则表达式placeholder预期提示文字required是否必填/必选step规定合法数字间隔，适用于number、range、date、datetime、datetime-local、month、time以及week5.4

HTML5表单5.5HTML5音频与视频在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中。在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。复杂冗长运用HTML5中新增的video标签和audio标签可以避免这样的问题。5.5HTML5音频与视频视频和音频编解码器由于视频和音频的原始数据一般都比较大，如果不对其进行编码就放到互联网上，传播时会消耗大量时间，无法实现流畅的传输或播放。通过视频和音频编解码器对视频和音频文件进行压缩，就可以实现视频和音频的正常传输和播放。5.5HTML5音频与视频多媒体格式运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。视频格式视频格式包含视频编码、音频编码和容器格式。音频格式音频格式是指要在计算机内播放或是处理音频文件。5.5HTML5音频与视频视频格式OggMPEGWebM多媒体格式音频格式VorbisMP3Wav5.5HTML5音频与视频5.5.1audio标签在HTML5中，audio标签用于定义播放音频文件的标准。基本语法格式<audiosrc="音频文件路径"controls="controls"></audio>src属性用于设置音频文件的路径，controls属性用于为音频提供播放控件。可在<audio>和</audio>之间也可以插入文字，用于不支持audio元素的浏览器显示。5.5HTML5音频与视频音频控件，用于控制音频文件的播放状态播放进度条声音5.5HTML5音频与视频5.5.1audio标签属性值描述autoplayautoplay当页面载入完成后自动播放音频。looploop音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。注意：以上列举的audio元素的属性和video元素是相同的，这些相同的属性在嵌入音视频时是通用的。5.5HTML5音频与视频5.5.1audio标签虽然html5支持Ogg、MPEG4和WebM的视频格式以及Vorbis、MP3和Wav的音频格式，但各浏览器对这些格式却不完全支持视频格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0Ogg

支持支持支持

MPEG4支持

支持支持WebM

支持支持支持

音频格式OggVorbis

支持支持支持

MP3支持

支持支持Wav

支持支持

支持视频音频文件的兼容性问题5.5HTML5音频与视频5.5.1audio标签在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。基本语法格式<audiocontrols="controls"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> ……</audio>src用于指定媒体文件的URL地址。type指定媒体文件的类型。5.5HTML5音频与视频5.5.1audio标签在HTML5中，video标签用于定义播放视频文件的标准。基本语法格式<videosrc="视频文件路径"controls="controls"></video>src属性用于设置视频文件的路径，controls属性用于为视频提供播放控件，这两个属性是video元素的基本属性。5.5HTML5音频与视频5.5.2video标签浏览器添加的视频控件，用于控制视频播放的状态播放进度条声音全屏5.5HTML5音频与视频5.5.2video标签属性值描述autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。posterurl当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。5.5HTML5音频与视频5.5.2video标签在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。注意：通过width和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（如“格式工厂”）对视频进行压缩。5.5HTML5音频与视频5.5.2video标签使用音频和视频注意事项1.

浏览器支持的音频和视频格式不同，需要在<source>标签中提供不同格式的文件来兼容不同的浏览器。2.

在设置src属性时，应该使用相对路径或绝对路径，避免使用相对于当前页面的路径。3.

使用controls属性会显示默认的播放器控件，但是在移动设备上默认控件可能无法显示或不够友好。此时可以使用JavaScript自定义控件。4.

在不同的浏览器和操作系统下，对于媒体的支持情况也可能不同，因此需要在不同的浏览器和设备上进行测试。5.

如果使用自定义控件，需要注意控件的可用性和兼容性，避免在某些浏览器或设备上无法使用。6.

浏览器默认情况下不会自动播放媒体文件，需要用户手动点击播放按钮。如果希望实现自动播放的效果，需要在设置<audio>或<video>标签时添加autoplay属性。7.

使用媒体文件会占用网站的带宽，需要注意使用合适的压缩方法来减小文件大小，避免对网站性能造成负面影响。总之，在使用<audio>和<video>标签时，需要进行充分的测试和优化，以提供良好的用户体验和兼容性。5.5HTML5音频与视频5.6绘图HTML5中增加了用于绘制图形的canvas

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论