2_31_HTML5及其新增的标签、表单类型、网页多媒体_191008

小知识：

Webstorm的使用

1. WebStorm 11.0.3.zip 解压

2. 在bin目录下有 webstorm.exe 和 webstorm64.exe 两个运行文件，选取一个点击运行， 然后百度查找 webstorm 的激活码激活。

3. 安装好后，统一规定在除C盘以外的盘下面，创建一个 web_file 文件夹专门用于 hmtl 相关文件的存放。

4. file — setting — Editor — Colors & Fonts — Font — 点击 save as — 改变 size 即可。

API (application program interface)：程序应用接口（不需要关心应用程序的内部实现，只需要知道接口名，调用即可。

HTML5
HTML5 并不仅仅只是做为 HTML 标记语言的一个最新版本，更重要的是它制定了 Web 应用开发的一系列标准，成为第一个将 Web 做为应用开发平台的 HTML 语言。

HTML5定 义了一系列新元素（新标签），如新语义标签、智能表单、多媒体标签 等，可以帮助开发者创建富互联网应用，还提供了一些 Javascript API，如 地理定位、重力感应、硬件访问 等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。

HTML5的广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持。它包括：HTML5新标签、CSS3、Javascript API在内的一套技术组合。

HTML5 不等于 HTML next version。
HTML5 包含： HTML的升级版、CSS的升级版、JavaScript API 的升级版。

总结：
HTML5 是 Web 应用开发的一系列标准。包括：HTML5，CSS3，Javascript API 在内的一套技术组合。

一、应用场景

列举几个HTML5 的应用场景：
（1）极具表现力的网页：内容简约而不简单（代码实现）。
（2）网页应用程序：
• 代替PC端的软件：iCloud、百度脑图、Office 365等。
• APP端的网页：淘宝、京东、美团等。（通过网页实现的web应用程序）
• 微信端：公众号、小程序等。
（3）混合式本地应用。
（4）简单的游戏。（html5 代替了flash做动画)

二、新增内容

注：HTML 的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由 CSS 来决定。

1、语义标签

•	
 表示区块
•	
 表示文章。如文章、评论、帖子、博客
•	
 表示页眉
•	
 表示页脚
•	
 表示导航
•	
 表示侧边栏。如文章的侧栏
•	
 表示媒介内容分组。
•	 表示标记 (用得少)
•	 表示进度 (用得少)
•	 表示日期

本质上新语义标签与< div>、< span>没有区别，只是其具有表意性，使用时除了在 HTML 结构上需要注意外，其它和普通标签的使用无任何差别。

可以理解成
 相当于
。

注：单标签不用写关闭符号。

2、智能表单类型
• email 只能输入email格式。自动带有验证功能。
• tel 手机号码。
• url 只能输入url格式。
• number 只能输入数字。
• search 搜索框
• range 滑动条
• color 拾色器
• time 时间
• date 日期
• datetime 时间日期
• month 月份
• week 星期

注：上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

代码举例：

    
    
    



    

        
表单类型
        
            email:
        


        
            color:
        


        
            url:
        


        
            number:
        


        
            range:
        


        
            search:
        


        
            tel:
        


        
            time:
        


        
            date:
        


        
            week:
        


        
            month:
        


        
            
        
    

效果：

代码解释：
① < fieldset> 标签
将表单里的内容进行打包，代表一组；而< legend> 标签则是 fieldset 里的元素定义标题。
②< label>标签
< label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。 标签的 for 属性应当与相关元素的 id 属性相同。

3、网页多媒体
在 HTML5 之前，在网页上播放音频/视频的通用方法是利用 Flash 来播放。但是大多情况下，并非所有用户的浏览器都安装了 Flash 插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持 Flash插 件。
H5里面提供了视频和音频的标签。

（1）音频
HTML5 通过 < audio> 标签来解决 音频 播放的问题。

实例：

效果如下：

• autoplay ：自动播放。写成 autoplay 或者 autoplay = “”，都可以。
• controls ：控制条。（建议把这个选项写上，不然都看不到控件在哪里）
• loop ：循环播放。
• preload： 预加载 同时设置 autoplay 时，此属性将失效。
• width：设置播放窗口宽度。
• height：设置播放窗口的高度。

处理兼容性问题：

不同的浏览器可支持播放的格式是不一样的

为了做到多浏览器支持，可以采取以下兼容性写法：

代码解释：如果识别不出音频格式，就弹出那句“抱歉”。

（2）视频
HTML5 通过< video>标签来解决视频播放的问题。

实例：

不同的浏览器可支持播放的格式是不一样的：

兼容性写法：

代码解释：如果识别不出 视频 格式，就弹出那句 “抱歉”。

综合练习：

    
    
    



    

        
        
表单类型
        
  
        email:
        

            
        

        

        color:
        

            
        

        

        url:
        

            
        

        

        number:
        

             
        

        

        range:
        

             
        

        

         search:
        

            
        

        

        tel:
        

             
        

        

        time:
        

             
        

        

         date:
        

            
        

        

        datetime:
        

             
        

        

         week:
        

            
        

        

        month:
        

             
        

        

        datetime-local:
        

             
        

        

        
        

        


        
        

        

    

效果如下：

注意：此图拼接而成，本该一起显示。