面试三 h5+css3新增属性

H5新特性

语义化标签

查看上面标签语义化相关内容

标签	描述
header	定义了文档的头部区域
footer	定义了文档的尾部区域
nav	定义文档的导航
section	定义文档中的节（section、区段）
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
detailes	用于描述文档或文档某个部分的细节
summary	标签包含 details 元素的标题
dialog	定义对话框，比如提示框

Canvas元素

元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

标签只是图形容器，您必须使用脚本来绘制图形。

 <canvas>简单实例如下: 
     // 向 HTML5 页面添加 canvas 元素。
 <canvas id="myCanvas" width="200" height="100"></canvas>

https://www.w3school.com.cn/html5/html_5_canvas.asp

使用 JavaScript 来绘制图像

红色矩形：

<script>
var c=document.getElementById("myCanvas"); // 使用 id 来寻找 canvas 元素：
var ctx=c.getContext("2d"); // 获得的一个“绘图环境”对象上。
ctx.fillStyle="#FF0000"; // fillStyle 方法将其染成红色
ctx.fillRect(0,0,150,75); // fillRect 方法规定了形状、位置和尺寸。
</script>

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

线条：（指定从何处开始，在何处结束）

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);//第一个点
cxt.lineTo(150,50);//第二个点
cxt.lineTo(10,50);//第三个点
cxt.stroke();

规定尺寸、颜色和位置，来绘制一个圆

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true); // 水平坐标，垂直坐标，半径，圆周起始位置，弧长，顺逆时针
cxt.closePath();
cxt.fill();

弧长：

​ Math.PI是半圆

​ Math.PI*2是整个圆

​ 0.5为四分之一

顺逆时针：决定了圆弧的方向）

​ false为顺时针

​ true为逆时针（

拖放

图片和超链接默认是可拖放的。其他元素，使用HTML5 引进了一个新的属性”draggable”，这将用来设置元素是否接受拖放；

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：<img draggable="true">

• 拖动什么 - ondragstart 和 setData()

  拖动事件：

  dragstart:在元素开始被拖动时被触发

  dragend:在拖动元素操作结束后触发

  drag:在元素被拖动时触发

  在拖动时：可以使用dataTransfer.setData() 方法设置被拖数据的数据类型和值：

  /**
  	dataTransfer对象（在event对象中）：用于携带拖放过程中的数据
  	dataTransfer对象常用方法：
  		setData(数据格式, 数据) ：将拖拽元素的数据存放到dataTransfer对象中
  		getData(数据格式) : 读取存入dataTransfer对象中的数据
  		数据的格式常用值为：Text 和 URL
  **/
  box.ondragstart = function (e) {
       console.log('dragstart');
       e.dataTransfer.setData('id',e.target.id); // 设置文本数据
  } 
  // 设置和接收文本数据
  event.dataTransfer.setData("TEXT", "some Text")
  event.dataTransfer.getData("Text")
  // 设置和接收URL
  event.dataTranser.setData("URL", "http:www.baidu.com")
  event.dataTransfer.getData("URL")
  

• 放到何处 - ondragover

  释放区事件

  dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发

  dragover 当被拖动元素在释放区内移动时触发

  dragleave 当被拖动元素没有放下就离开释放区时触发

  drop: 当被拖动元素在释放区里放下时触发

  【注意：】在ondragover中一定要执行 preventDefault()否则ondrop事件不会被触发

  【要知道的：】

  1. 调用 preventDefault():来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

  2. 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

Audio(音频)、Video(视频)

video元素专门用来播放网络上的视频，audio元素专门用来播放网络上的音频；使用video和audio元素进行播放时不需要使用其他的插件，只要浏览器支持HTML5即可；

1. 如果获取和标签

   <script src="//api.html5media.info/1.2.2/html5media.min.js"></script>填在标签中

audio标签属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

audio 元素支持三种音频格式：

IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

video标签属性

• src：视频的URL
• poster：视频封面，没有播放时显示的图片
• preload：预加载
• autoplay：自动播放
• loop：循环播放
• controls：用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
• width：视频宽度
• height：视频高度

<video width="320" height="240" controls>
<!--video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：-->
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
</video>
<!--<video> 与 </video> 之间插入的内容是供不支持 video元素的浏览器显示的。-->

【视频格式】：

MP4 ：video/mp4 => 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM ：video/webm => 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg ：video/ogg => 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

HTML 音频/视频 方法:

方法用于播放、暂停以及加载等。

1、play():表示视频播放
2、pause():表示视频暂停

属性（比如时长、音量等）可以被读取或设置。

1、paused：设置或返回音视频是否被暂停
2、autoplay：设置或返回音视频加载完之后是否立即播放
3、controls：设置或返回音视频是否添加控件
4、duration：获取音视频的总时间，单位：秒
5、currentTime：获取当前播放时间
6、defaultMuted：设置音视频是否静音输出 true – 静音 默认false，不静音
7、muted：设置或返回当前播放音视频是否是静音输出。true – 静音 false — 不是静音
8、playbackRate：设置音视频播放速度。1.0表示正常；0.5表示半速；2.0表示倍速
9、loop：设置是否循环播放。true – 循环播放 false – 不循环播放
10、volume：设置或返回音视频的音量。介于1~0之间的数
11、ended：返回音视频是否播放结束。false – 未结束 true – 已结束

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            video{
                width: 600px;
                height:500px;
            }
        </style>
    </head>
    <body>
    
        <!--<video src="movie/chenai.mp4h"loop="loop"></video>-->
        <video id="video">
            <source src="movie/chenai.mp4"></source>
              您的浏览器不支持 HTML5 video 标签。
        </video>
        <br />
        <button onclick="bofang()">点击播放/暂停</button>
        <button onclick="timeAll()">点击获取总时间 </button>
        <button onclick="timeBf()">点击获取当前时间 </button>
        <button onclick="jingyin()">点击静音 </button>
        <button onclick="yinliang()">点击获取音量 </button>
        <button onclick="end()">是否播放结束 </button>
    </body>
    <script type="text/javascript">                
        var video = document.getElementById("video"); // 获取video元素    
        //点击播放或暂停
        function bofang(){
            if (video.paused) {//播放状态:是否暂停
                video.play(); // 播放
            }else video.pause();
        }data
        video.autoplay = true;
        video.controls = false;
        
        function timeAll(){
            alert(video.duration); // -- 音视频的总时间
        }
        
        function timeBf(){
            alert(video.currentTime);// -- 当前时间
        }
        video.defaultMuted = false;
        function jingyin(){
            if (video.muted == false) video.muted = true;
            else video.muted = false;
        }
        
        video.playbackRate = 1.0;  // -- 改变播放速度
        video.loop = true;        // -- 是否循环播放
        
        function yinliang(){
            
            video.volume = 0.5;
            alert(video.volume);
        }
        
        function end(){
            alert(video.ended);
        }
    </script>
</html>

增强型表单

HTML5 拥有多个表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

input 的 type	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

新增表单元素

表单元素	描述
datalist	元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist 元素的 id 绑定
keygen	提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段
output	用于不同类型的输出，比如计算或脚本输出

新增的表单属性

表单属性	描述
placehoder	简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失
required	是一个 boolean 属性。要求填写的输入域不能为空
pattern	描述了一个正则表达式用于验证 input 元素的值
min 和 max	设置元素最小值与最大值
step	为输入域规定合法的数字间隔
height 和 width	用于 image 类型的 input 标签的图像高度和宽度
autofocus	是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple	是一个 boolean 属性。规定 input 元素中可选择多个值

CSS3新增属性

选择器

伪类和伪元素

根本区别在于它们是否创造了新的元素（抽象）

伪类：用于向某些选择器添加特殊的效果（没有创建新元素）

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

伪元素：创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器

::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */

css3盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

• resize：none | both | horizontal | vertical | inherit 指定一个元素是否应该由用户去调整大小。
• box-sizing: content-box | border-box | inherit 允许您以确切的方式定义适应某个区域的具体内容。
• outline:outline-color outline-style outline-width outine-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

CSS3伸缩布局盒模型(弹性盒)

阮一峰参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

下表列出了在弹性盒子中常用到的属性:

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

背景和边框、阴影

1. background属性

background-image：设置元素的背景图像。

background-origin：规定背景图片的定位区（背景图片可以放置于 content-box、padding-box 或 border-box 区域）

background-size：规定背景图片的尺寸。

background-repeat：设置是否及如何重复背景图像。

2. 边框

   border-radius属性

   为元素添加圆角边框

   border-radius: 3px;
   

3. 阴影

   盒子阴影/文字阴影

   box-shadow / text-shadow：阴影

   text-shadow: 1px 1px 3px #ff00ff // 向文本设置阴影（文字阴影）
   <!--水平阴影 垂直阴影 模糊距离 阴影颜色-->
   box-shadow: 10px 20px 3px #ff993d // 向边框添加一个或多个阴影（盒子阴影）
   

2D/3D转换

• 2D 转换（transform）

1. translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px);
2. rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
3. scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);
4. skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);
5. matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

• 3D 转换

1. rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
2. rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
3. perspective：规定 3D 元素的透视效果

动画、过渡

• 过渡效果（transition），使页面变化更平滑，以下参数可直接写在 transition 后面

1. transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
2. transition-duration：过渡动画的一个持续时间。
3. transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
4. transition-delay：延迟多久后开始动画

• 动画（animation）
  先定义 @keyframes 规则（0%，100% | from，to）
  然后定义 animation，以下参数可直接写在 animation 后面

1. animation-name: 定义动画名称
2. animation-duration: 指定元素播放动画所持续的时间长
3. animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
4. animation-delay: 指定元素动画开始时间
5. animation-iteration-count: infinite | number：指定元素播放动画的循环次数
6. animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）
7. animation-play-state: running | paused ：控制元素动画的播放状态

媒体查询

// 使用媒体类型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
// 媒体查询规则
<script>
  @media all and (min-width: 800px) { ... } // 将此 CSS 应用于所有媒体类型。
  //  and 条件
  @media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
  //  or关键字
  @media (min-width:800px) or (orientation:portrait) { ... }
  // 使用not
  @media (not min-width:800px) { ... }
</script>

媒体类型

all: 所有设备

print：文档打印或打印预览设备

screen ：电脑屏幕设备

handheld ： 手持设备

媒体属性

参考链接：https://blog.csdn.net/proud2005/article/details/46532851

1. 宽度/高度 : 描述了输出设备渲染区域（如可视区域的宽/高度或打印机纸盒的宽/高度）的宽/高度。

   @media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
   @media screen and (min-width: 500px) and (max-width: 800px) { ... }
   

2. 设备宽度/高度：描述了输出设备的高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。

   // 向显示在最大宽度800px的屏幕上的文档应用样式表
   <link rel="stylesheet" media="screen and (max-device-width: 799px)" />
   

3. 方向： 指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式。

   @media all and (orientation: portrait) { ... } // 竖屏设备应用此样式
   

媒体查询可以在不同的条件下使用不同的样式，使页面在不同的终端下达到不同的渲染效果

逻辑操作符

and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。

// all媒体类型 媒体属性
@media (min-width: 700px) { ... } 
// all媒体类型 媒体属性 and 媒体属性
@media (min-width: 700px) and (orientation: landscape) { ... }

not 操作符用来对一条媒体查询的结果进行取反。

/** 
	not 关键字应用于整个媒体查询
	 not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。
**/
@media not all and (monochrome) { ... }
@media not (all and (monochrome)) { ... } // 正确
@media (not all) and (monochrome) { ... } // 错误

@media not screen and (color), print and (color)
@media (not (screen and (color))), print and (color) // 正确

only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

逗号分隔列表(相当于 or )

/**
	如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。
**/
/** 像素宽度 >= 700像素，或者是一个横屏的手持设备都会用到这个样式 **/
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
/** 相当于如下形式： **/
@media all and (min-width: 700px)

若使用了 not或 only 操作符，必须明确指定一个媒体类型。

使用

@media 媒体类型 and （媒体特性）{
	css样式
}

媒体特性组成： 媒体特性：媒体特性所指定的值。比如max-width: 480px

当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， <link> 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）。

在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all 。

RGBA和透明度

它是RGB色彩模型的一个扩展，除了红、绿、蓝三种颜色外还增加了一个代表透明度的通道即alpha（取值为0到1）。