H5-C3新特性

HTML5新特性

​ HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

​ 这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

新增的语义化标签

标签	含义
	头部标签
	导航标签
	内容标签
	定义文档某个区域
	侧边栏标签
	底部标签

注意∶

• 这种语义化标准主要是针对搜索引擎的

• 这些新标签页面中可以使用多次

• 在IE9中，需要把这些元素转换为块级元素

多媒体标签

​ 新增的多媒体标签主要包含两个:视频:<video> </video> 音频:<audio></audio>

​ 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。（注意：谷歌浏览器把音频和视频自动播放禁止）

1. 视频：video

当前video元素支持三种视频格式（MP4 WebM ogg）:尽量使用mp4格式

<video src="文件地址" controls=" controls"></video>

兼容性设置：

<video width="320" height="240" controls>
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
	您的浏览器不支持video标签。
</video>

video常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动摇放问题）
controls	controls	向用户显示播放控件
width	pixels(像素)	设置摇放器宽度
loop	loop	摇放完是否继续播放该视频，循环播放
preload	auto(预先加载视频)/none(不应加载视频)	规定是否预加戟视频(如果有autoplay就忽略该属性)
src	url	视频url地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音摇放

<video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="media/mi9.jpg"></video>

音频audio语法

<audio></audio>元素支持三种音频格式（MP3 Wav ogg）: 尽量使用mp3格式

<audio src="文件地址" controls=" controls"></ audio>

兼容性设置：

<audio controls=" controls">
	<source src="happy.mp3type="audio/mpeg” >
	<source src="happy.ogg" type="audio/ ogg" >
	您的浏览器暂不支持<audio>标签。
</ audio>

音频audio常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性。则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始摇放。
src	url	要播放的音频的 URL地址。

新增的input类型

属性	描述
type="email	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

重点记住：number tel search这三个

<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
  <ul>
        <li>邮箱: <input type="email" /></li>
        <li>网址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>时间: <input type="time" /></li>
        <li>数量: <input type="number" /></li>
        <li>手机号码: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>颜色: <input type="color" /></li>
        <!-- 当我们点击提交按钮就可以验证表单了 -->
        <li> <input type="submit" value="提交"></li>
  </ul>
</form>

新增的表单属性

属性	值	描述
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息“存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如autocomplete=“on“；关闭autocomplete =”“off”；需要放在表单内，注意：加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

CSS3新特性

新增的CSS3特性有兼容性问题，ie9+才支持且移动端支持优于PC端

重点：新增选择器和盒子模型以及其他特性

CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

注意：类选择器和属性选择器 伪类选择器 权重都相当于 10

选择符	描述
E[att]	选择具有att属性的E元素
E[att=val"]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性且值以val开头的E元素
E[att$=“val”]	匹配具有att属性且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且值中含有val的E元素

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符	描述
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后—个
E:nth-of-type(n)	指定类型E的第n个

重点：**nth-child(n)**选择某个父元素的一个或多个特定的子元素

​ (1) n可以是数字，关键字和公式

​ (2) n如果是数字，就是选择第n个子元素,里面数字从1开始…n

​ (3) n可以是关键字:even偶数,odd奇数

​ (4) n可以是公式∶常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)，

属性	描述
nth-child (n)	选择所有孩子
nth-child(2n)	选择所有偶数孩子
nth-child(2n+1)	选择所有奇数孩子
nth-child(5n)	选择第5、10、15、20…个孩子
nth-child(n+5)	选择第5个开始（包含第5个）到最后一个孩子
nth-child(n-5)	选择前5个孩子

E: nth-child与E: of-type区别

nth-child 会把所有的盒子都排列序号

div:nth-child(n) 执行的时候首先看第n个孩子，之后回去与前面 div对比，正确则执行

nth-of-type 会把指定元素的盒子排列序号

div:nth-of-type(1)执行的时候首先看指定的div元素，之后回去看第n个孩子执行

总结：

结构伪类选择器一般用于选择父级里面的第几个孩子

E:nth-child(n)对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

E:nth-of-type(n) 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

关于nth-child ( n)我们要知道n是从0开始计算的，要记住常用的公式

如果是无序列表，我们肯定用nth-child更多

类选择器、属性选择器、伪类选择器，权重为10。

伪元素选择器（重点）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

属性	描述
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容
\	转义字符

注意∶

before和after创建一个元素，但是属于行内元素

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

语法: element::before {}

before和after必须有content属性（content: ‘文本内容’;）

before在父元素内容的前面创建元素，after在父元素内容的后面插入元素伪元素选择器和标签选择器—样，权重为1

在元素内部的后面插入内容

盒子模型

​ CSS3中可以通过 box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况∶

1. box-sizing: content-box 盒子大小为width + padding + border (以前默认的)
2. box-sizing: border-box 盒子大小为width

如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度)

滤镜（图片模糊）

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter:函数(); 例如: filter: blur(5px); blur模糊处理数值越大越模糊

Cala函数计算

CSS3 calc函数:

calc()函数可以在声明CSS属性值时执行一些计算。

width: calc(100% - 80px);

括号里面可以使用±*/来进行计算。

过渡（重点)

过渡( transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本）但是不会影响页面布局。

我们现在经常和:hover一起搭配使用。

transition要过渡的属性、花费时间、运动曲线、何时开始;

• 属性︰想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。

• 花费时间:单位是秒(必须写单位)比如0.5s

• 运动曲线:默认是ease(可以省略)

• 何时开始︰单位是秒(必须写单位)可以设置延迟触发时间默认是0s（可以省略)

注意：过渡的使用口诀︰谁做过渡给谁加（谁需要过渡变化加给谁）

如果想要写多个属性，利用逗号进行分割

例如：transition: width .5s ease 0s, height .5s ease 1s;

如果想要多个属性都变化，属性写all就可以了

例如：transition: height .5s ease 1s;

清除浮动

清除浮动有以下几种方法

• 额外标签法是W3C推荐的做法（浮动元素末尾加元素，元素加入clear: both;属性）。

• 父级添加overflow属性

• 父级添加after伪元素

• 父级添加双伪元素

伪元素清除浮动

两种伪元素清除浮动算是额外标签法的一个升级和优化。

.clearfix::after {
    content : " ";      伪元素必须写的属性
    display: block;     插入的元素必须是块级
    height: 0;       不要看见这个元素
    clear: both;      核心代码清除浮动
    visibility: hidden;    不要看见这个元素
)

Ps基本操作

因为网页美工大部分效果图都是利用PS ( Photoshop )来做的,所以以后我们大部分切图工作都是在PS里面完成。

• 文件>打开:可以打开我们要测量的图片

• Ctrl+R:可以打开标尺,或者视图→标尺

• 右击标尺 ,把里面的单位改为像素

• Ctrl+加号(+)可以放大视图，Ctrl+减号(-)可以缩小视图

• 按住空格键,鼠标可以变成小手,拖动PS视图

• 用选区拖动可以测量大小

• Ctrl+ D可以取消选区,或者在旁边空白处点击- 下也可以取消选区

PS 切图

常见的图片格式

1. jpg图像格式:JPEG ( JPG )对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的
2. gif图像格式:GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果
3. png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明的图片,请选择png格式
4. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说,最大的优点我们可以直接从上面复制文字,获得图片,还可以测量大小和距离

图层切图

PS有很多的切图方式：图层切图、切片切图、PS插件切图等。

最简单的切图方式：右击图层→快速导出为PNG。

但是很多情况下,我们需要合并图层再导出:

• 选中需要的图层:图层菜单→合并图层(ctrl+e)

• 右击→快速导出为PNG

切片切图

1. 利用切片选中图片

   利用切片工具手动划出

2. 导出选中的图片

   文件菜单→导出→存储为web设备所用格式→选择我们要的图片格式→存储。

扩展工具切图

1. 打开切图工具：选择窗口→扩展工具→Cutterman -切图神器

   (1) 登录切图工具设置导出图片类型为web → PNG24

   (2) 配置导出文件位置

2. 选择待切图层

   (1) 点选所需切片图层

   (2) 点击Cutterman -切图神器→导出选中图层，即可导出PNG图片