浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1. 私有前缀

2. 提倡的写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

一. HTML5简介

html5是超文本标记语言(HyperText Mark Language)的第5代版本，也是目前最新的html版本。作为新 HTML语言，具有新的元素，属性和行为。

1. html5优势

二. H5新增语义化标签

1. 标签语义化

以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的。

<div class="header"> </div>
<div class="nav"> </div>
<div class="content"> </div>
<div class="fodeer"> </div>

2. 新增语义化标签

三. H5新增多媒体标签

1. audio音频标签

HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。

1.1 音频格式

1.2 音频标签常见属性

1.3 音频标签语法格式

<audio src= "文件地址" controls="controls"></audio>
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg" >
<source src= "happy.ogg" type="audio/ogg" >
您的浏览器暂不支持audio标签。
</audio>

2. video视频标签

HTML5 规定了一种通过 video 元素来包含视频的标准方法，这样播放视频就不必依赖外部插件。目前由于专利、商业竞争等原因各个浏览器对视频的支持格式各不相同，但是这个支持是动态变化的。

2.1 视频格式

2.2 视频标签常见属性

2.3 视频标签语法格式

<video src= "文件地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.mp4" type="video/mp4" >
<source src= "move.ogg" type="video/ogg" >
您的浏览器暂不支持video标签播放视频
</video>

3. 总结

四. H5原有的表单

1. 表单标签

1.1作用

1.2 input控件(重点)

1.3 type属性

1.4 value属性

1.5 name属性

1.6 checked属性

1.7 input属性小结

2. label标签(理解)

3. textarea控件(文本域)

4. select下拉列表

语法：

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>

5. form表单域

五. H5新增表单属性

1. H5新增表单

新的表单的特性：

1.在移动端会调用对应的系统控件，比如说日期

2.自动报错，比如邮箱格式，但是报错不够完善

2. H5新增表单属性

六. 视口（移动端）

2. 视觉视口visual viewport

3. 理想视口ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

4. 总结

5. meta视口标签

6. 标准的viewport设置

七. 移动开发选择

1. 移动端主流方案

1.1 单独移动端页面（主流)

通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

1.2 响应式兼容PC移动端

三星电子官网：www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端。缺点：制作麻烦，需要花很大精力去调兼容性问题

1.3 总结

现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方法，现在市场主流的选择还是单独制作移动端页面

1.4 移动端技术选型

1.5 流式布局(百分比布局)

八. 移动端技术解决方案

1. 移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用H5标签和 CSS3样式。同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

2. CSS初始化normalize.css

做css初始化的原因:

不同浏览器对各个元素的margin,padding,border,font等属性的定义各有不同，不同浏览器的显示效果可能不一样，为杜绝这种情况，通过css强制让所有元素的属性值都一样，这样浏览器显示就一致了，减少了不兼容情况的发生，这个过程叫做css的初始化。

移动端CSS初始化推荐使用normalize.css/

Normalize.css：保护了有价值的默认值

Normalize.css：修复了浏览器的bug

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

官网地址：http://necolas.github.io/normalize.css/

3. CSS3盒子模型box-sizing

传统模式宽度计算：

盒子的宽度=CSS中设置的width + border + padding

CSS3盒子模型：盒子的宽度=CSS中设置的宽度width里面包含了border和padding

也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子了

/*css3盒子模型*/
box-sizing : border-boX;
/*传统盒子模型*/
box-sizing: content-box;

传统or CSS3盒子模型?

移动端可以全部CSS3盒子模型

PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型

九. 拓展

1. small元素

small元素表示旁注，可以免责声明、注意事项、法律声明、版权信息等，也可以用它来表示署名等，它通常是文本块中的一小块，而不是包含多个或其他元素的大块文本。

默认情况下，浏览器将 small元素中的文本将以小字号显示。

虽然浏览器将 small元素中的文本以小字号显示，但是，一定要在符合内容语义的情况下使用该元素。如果纯粹为了显示为小字号，建议不要使用 small元素，而是使用CSS来控制字体的大小。

2. mark元素

3. figure元素

4. CSS背景

4.1 背景颜色(color)

4.2 背景图片(image)

4.3 背景平铺(repeat)

4.4 背景位置(position)重点

4.5 背景附着

4.6 背景简写

4.7 背景透明(CSS3)

4.8 背景缩放(background-size)

4.9 背景总结

5. 插入图片和背景图片区别

6. iframe内联框架

iframe这个标签，它的作用是可以在网页内显示网页

HTML5简介(补充. 浏览器私有前缀)相关推荐

HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
CSS3新特性(属性选择器、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀）
这里写目录标题一.CSS3 属性选择器二.CSS3 结构伪类选择器三. CSS3 伪元素选择器四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
css3中animation动画、浏览器私有前缀、文字阴影
animation动画: 可以设置多个节点来控制一个或一组动画,动画可以实现更多变化,更多控制,连续自动播放等效果.动画的使用分两步:1.定义动画 2.调用动画(调用必须写调用名称和持续时间),其属 ...
CSS系列之浏览器私有前缀
文章の目录 1.私有前缀 2.提倡写法写在最后浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加. 1.私有前缀 -moz-:代表 firefox 浏览器私有属性 -ms-:代表 i ...
-moz、-ms、-webkit浏览器私有前缀详解，作用、出处
名称私有前缀作用为了兼容老版本的写法.例如:比较新版本的浏览器都支持直接写:border-radius. -moz代表firefox浏览器私有属性,-ms代表ie浏览器私有属性,-webkit代 ...
375~407（2D+动画+3D+浏览器私有前缀）
4 2D转换转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果移动:translate 旋转:rotate 缩放:scale 4.1 二维坐标系 2D ...
使用Modernizr 检测HTML5和CSS3浏览器支持功能
http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html 传统浏览器目前不会被完全取代,令你难以将最新的 CSS ...
[css] css中兼容ie浏览器的前缀是什么?
[css] css中兼容ie浏览器的前缀是什么 -webkit- 谷歌 -moz- 火狐 -o- opera -ms- ie 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定 ...
html5简介、选项输入框、表单元素分组、input新增属性及属性值
HTML5简介: 定义:HTML5号称下一代HTML,html的最新版本,定义了新的标签.css.JavaScript,html5新标签IE9以上版本浏览器才兼容,因此在实际开发中要问老板是否兼容低版 ...

HTML5简介(补充. 浏览器私有前缀)