HTML5

行吟阁 2020-05-30

一、什么是HTML5

1.1 HTML5 简介

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素、属性和行为

XHTML可扩展超文本标记语言

是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求,基础班学习的是XHTML

HTML5

有更大的技术集,允许更多样化和强大的网站和应用程序

增加了新特性:语义特性,本地存储特性,设备兼容特性,链接特性,网页多媒体特性,三维、图形以及特效特性,性能与集成特性,css特性

1.2 广义的HTML5

广义的HTML5是HTML5本身+CSS+JavaScript

HTML5的一些特性仍让不被某些浏览器支持,但是他是一种发展趋势

二、HTML5新增语义化标签

  1. <header>:头部标签
  2. <nav>:导航标签
  3. <article>:内容标签
  4. <section>:块级标签
  5. <aside>:侧边栏标签
  6. <footer>:尾部标签

HTML5

 注意:以前经常使用的div标签是没有语义的,

  • 这种语义化标准主要针对搜索引擎的
  • 这些新标签也可以使用多次的
  • 在IE9中,需要把这些元素转换为块级元素
  • 其实我们移动端更喜欢使用这些标签

三、HTML5新增多媒体标签

音频:<audio>

视频:<video>

3.1<audio>音频标签

1.音频格式

HTML5

2.使用方法

<audio src="./media/snow.mp3" controls autoplay></audio>
<!-- 
    因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
    <source src="./media/snow.ogg" type="audio.mpeg" />     您的浏览器不支持audio播放
  </audio>

3.常见属性

HTML5

 谷歌浏览器禁用了autoplay属性

 3.2 <video>视频标签

1.视频格式

HTML5

2.语法格式

<video src="./media/video.mp4" controls="controls"></video>

3. 参数属性

HTML5

 4. 使用方法

<!-- <video src="./media/video.mp4" controls="controls"></video> -->
   
     <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 -->
     <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
       <source src="./media/video.mp4" type="video/mp4">
       <source src="./media/video.ogg" type="video/ogg">
     </video>

多媒体标签总结

   - 音频标签与视频标签使用基本一致

   - 多媒体标签在不同浏览器下情况不同,存在兼容性问题

   - 谷歌浏览器把音频和视频标签的自动播放都禁止了

   - 谷歌浏览器中视频添加 muted 标签可以自己播放

   - 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册

四、HTML5新增input表单、表单属性

HTML5

这些HTML5 的表单大量应用于移动端,PC段不是很常用

<input type="email">

 

新增属性

HTML5

placeholder和value属性的区别在于:placeholder的字体是灰色的,而且点击输入框可以直接定位到开始,而value属性字体是黑色的,点击框框里面的内容要手动清除 

<form action="">
        用户名:<input type="text" name="username" autocomplete="on">
        <input type="submit" value="提交">
</form>

相关推荐