css3浏览器前缀/HTML5 新结构标签/HTML5 新增表单控件/HTML5 音频和视频

CSS浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

比如：

div
{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}

自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

 

HTML5新结构标签

h5新增的主要语义化标签如下：

1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚

页面使用标签布局示意图：

PC端兼容h5的新标签的方法，在页面中引入以下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表单控件

新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

<label>网址:</label><input type="url" name="" required><br><br> 
<label>邮箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词 

 

HTML5 音频和视频

html5增加了audio和video标签，提供了在页面上插入音频和视频的标准方法。

audio标签
支持格式：ogg、wav、mp3

对应属性：
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音

举例： 

<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<!-- 或者用如下方式：  -->

<audio  autoplay controls loop preload>
    <source src="source/audio.mp3" type="">
    <source src="source/audio02.wav" type="">
</audio>

source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。

video标签
支持格式：ogg、mp4、webM

属性：
1、width
2、height
3、Poster

可选第三方播放器：
1、cyberplayer
2、tencentPlayer
3、youkuplayer 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>HTML5新标签</title>
 9 </head>
10 <body>
11 
12 <!--h5端不兼容html5新标签-->
13 <header></header>  <!--页面头部、页眉-->
14 <nav></nav> <!--页面导航-->
15 <article>   <!--一篇文章-->
16     <section></section>  <!--文章中的章节-->
17 </article>
18 <aside></aside>   <!--侧边栏-->
19 <footer></footer>   <!--页面底部、页脚-->
20 
21 
22 <!--html5新增表单控件，这些新增类型很少用，一般都是自己写-->
23 <label>网址:</label><input type="url" name="" required><br><br>
24 <label>邮箱:</label><input type="email" name="" required><br><br>
25 <label>日期:</label><input type="date" name=""><br><br>
26 <label>时间:</label><input type="time" name=""><br><br>
27 <label>星期:</label><input type="week" name=""><br><br>
28 <label>数量:</label><input type="number" name=""> <br><br>
29 <label>范围:</label><input type="range" name=""><br><br>
30 <label>电话:</label><input type="tel" name=""><br><br>
31 <label>颜色:</label><input type="color" name=""><br><br>
32 <label>搜索:</label><input type="search" name=""><br><br>
33 <input type="submit" name="" value="提交">
34 <br><br><br>
35 
36 
37 <!--新增常用表单控件属性-->
38 <!--placeholder 设置文本框默认提示文字;autofocus 自动获得焦点;autocomplete="off"，关闭联想关键词-->
39 <input type="text" name="" placeholder="请输入用户名" autofocus="" autocomplete="off">
40 
41 </body>
42 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>h5 音频 视频</title>
 9 </head>
10 <body>
11 
12 /*
13 1、autoplay 自动播放
14 2、controls 显示播放器
15 3、loop 循环播放
16 4、preload 预加载
17 5、muted 静音
18 */
19 
20 <audio controls autoplay preload  muted  loop>  /* 这里的autoplay不能自动播放，不知道为啥？？？？*/
21     <!--<source src="../source/audio.mp3" >-->
22     <source src="../source/audio02.wav" >    /* source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。*/
23 </audio>
24 <br><br>
25 
26 <video controls autoplay preload muted loop width="600" height="400">
27     <source src="../source/mov.mp4" >
28 </video>
29 
30 </body>
31 </html>

 

posted on 2019-12-01 12:12  cherry_ning  阅读(217)  评论(0)    收藏  举报

导航