我是HTML5和CSS3（只介绍开发常用的）

1.HTML5相较于HTML

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单，和新的表单属性等。这些新特性都有兼容性的问题，基本是IE9以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

1.1HTML5新增的语义化标签

< header >:头部标签
< nav >:导航标签
< article >:内容标签
< section >:定义文档某个区域
< aside >:侧边栏标签
< footer >：尾部标签

1.1.1语义化标签总结

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，我们需要把这些元素转换成块级元素
移动端使用这些标签更多

1.2 HTML5新增的多媒体标签

1.音频：< audio >
2.视频：< video >
使用他们可以很方便的在页面中嵌入视频和音频而不再使用flash和其他浏览器

当前元素支持三种视屏格式，简易尽量使用mp4格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
       <title>HTML5新增视频标签</title>
    <style>
        video {
           width: 100%;
        }
    </style>
</head>
<body>
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"  controls></video>
</body>
</html>

动图太大放不上来就这样感受一下吧

几个属性分别介绍一下
1.src属性和poster属性

src属性这个属性用于指定视频的地址，而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。
而视频数据无效可能是视频正在加载，可能是视频地址错误等。

2. preload属性

此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。

3.autoplay属性

autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。

4.loop属性
是否循环播放，布尔值。

5.controls属性
用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
控制栏须包括播放暂停控制，播放进度控制，音量控制等等,如上图。

音频和视频相似，也感受一下不解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>HTML5新增音频标签</title>
</head>
<body>
    <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>
</html>

1.2.1多媒体标签总结

音频标签和视频标签的使用方法基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以把视频标签添加muted属性来静音播放视频，音频不可以（通过js解决）
视屏标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

1.3 HTML5新增的input属性

  <!-- 我们验证的时候必须添加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>

1.4 HTML5新增表单属性

<form action="">
            <input type="search" name="sear" id="" required="required" placeholder="请输入内容" autofocus="autofocus" autocomplete="on">
            <input type="file" name="" id="" multiple="multiple">
            <input type="submit" value="提交">
    </form>

2.CSS3现状

新增的css3特性有兼容问题，ie9+才支持
移动端支持优化pc端
应用广泛，不断改进中

2.1 CSS3 新增选择器

css3 新增了选择器可以更加便捷，更加自由的选择目标元素

属性选择器
结构伪类选择器
伪元素选择器

2.1.1属性选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增属性选择器</title>
    <style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>
</head>
<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>

</body>
</html>

2.1.2 结构伪类选择器

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

n可以是数字，关键字和公式
n如果是数字，就是选择第几个元素，里面数字从1开始，但是第0个元素或者超出了元素的个数会忽略
n可以是关键字，even偶数，odd是奇数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增结构伪类选择器-nth-child</title>
    <style>
        /* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
        /* ol li:nth-child(2n) {
            background-color: pink;
        }
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        /* ol li:nth-child(n+3) {
            background-color: pink;
        } */
        ol li:nth-child(-n+3) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

</html>`

结构伪类选择器总结

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child对夫元素里面所有孩子排序选择（序号固定）先找到第几个孩子，然后看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后根据E照到第几个孩子
关于nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式
如果是无序列表，我们肯定用nth-child更多
类选择器，属性选择器，伪类讯择期权重都为10

2.1.3伪元素选择器（重点）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <title>伪元素选择器before和after</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>
</html>

伪元素总结

before和after创建一个与元素，属于行内元素
新创建的元素在文档树种是找不到的，所以我们称为伪元素
语法：elemennt::before{}
before和 after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

2.1.4伪元素使用场景

a.伪元素字体图标

图标下载地址

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪元素选择器使用场景-字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

b.显示隐藏遮罩案例

主要实现效果是页面正常加载的情况下遮罩层隐藏，当鼠标划过我们就让before遮罩层显示出来

当鼠标划过显示遮罩层

tudou:hover::before {
display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

</html>

c.伪元素清除浮动

1.额外标签法（隔墙法）
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素

必须都是块级元素

2.2 CSS3盒子模型

css3中可以通过box-sizing来指定盒模型，即可指定为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的宽度）

2.3CSS3滤镜fiter

将模糊或者颜色偏移等效果应用于元素
filter：函数（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片模糊处理filter</title>
    <style>
        img {
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(15px);
        }
        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
   <img src="images/tudou.jpg" alt="">
</body>
</html>

2.4 CSS3过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。
我们经常使用过渡于：hover一起搭配使用
谁过渡给谁加过渡属性

后面两个值经常可以省略

<style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

<body>
    <div></div>
</body>

2.4.1 过渡进度条制作

<style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>

整理的一些HTML5 CSS3面试题

查漏补缺，先试着回忆一下再看答案吧,希望对你有帮助

1.html5有哪些新特性，移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分html和html5？

新特性：
1.拖拽释放（drag and drop）API
2.语义化内容标签（header，nav，footer，asider，article，section）
3.音频，视频（audion,video）API
4.画布（canvas）API
5.地理（Geolocation）API
6.本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；
7.seeionStorage的数据在浏览器关闭后自动删除
8.表单控件：calendar,data,time,email,url,search
9.新的技术 webworker,websocket,geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；

⽀持HTML5新标签：
IE8/IE7/IE6⽀持通过 document.createElement ⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签，浏览器⽀持新标签后，还需要添加标签默认的样式（当然最好的⽅式是直接使⽤成熟的框架、
使⽤最多的是html5shim框架）：
< !--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-- >

如何区分：
DOCTYPE声明新增的结构元素、功能元素

2.CSS3有哪些新特性？

CSS3实现圆⾓（border-radius），阴影（box-shadow）
对⽂字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯⼀引⼊的伪元素是 ::selection.
媒体查询，多栏布局
border-image

3. 本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

Cookies:服务器和客户端都可以访问；⼤⼩只有4KB左右；有有效期，过期后将会删除；
本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留直到⽤户从浏览器清除或者使⽤Javascript代码移除

4.如何实现浏览器之间多个标签页面之间的通信
调⽤ localstorge、cookies 等本地存储⽅式

5.如何对你的网站文件和资源进行优化
文件合并，文件最小化或者文件压缩，使用cdn托管，使用缓存

6.什么是响应式设计
低成本实现一套代码一个网页在多终端设备下访问达到一定用户体验的开发方式，起布局会根据终端情况自适应调整达到一定水平的用户体验

7.新的html5文档类型和字符集?
HTML5⽂档类型：<!doctype html>
HTML5使⽤的编码< meta charset=”UTF-8”>

8. HTML5 Canvas 元素有什么⽤？
Canvas 元素⽤于在⽹页上绘制图形，该元素标签强⼤之处在于可以直接在 HTML 上进⾏图形操作。

9. 用H5+CSS3解决下导航栏最后⼀项掉下来的问题
box-sizing: border-box;
10. CSS3新增伪类有那些？
p :ﬁrst-of-type 选择属于其⽗元素的⾸个 < p > 元素的每个 < p > 元素。
p:last-of-type 选择属于其⽗元素的最后 < p> 元素的每个 < p> 元素。
p:only-of-type 选择属于其⽗元素唯⼀的 < p> 元素的每个 < p> 元素。
p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个 < p > 元素。
p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个 < p> 元素。
:enabled、:disabled 控制表单控件的禁⽤状态。
:checked，单选框或复选框被选中。

10.请⽤CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明</title>
    <style>
        body{margin:0;padding:0;}
        .m-test{width: 200px;height: 100px;border-radius: 10px;box-shadow: 10px 10px 5px #888888; background-color: pink;transition: 1s; }
        .m-test:hover {opacity: 0;}  
    </style>
</head>
<body>
<div class="m-test">
</div>
 
</body>
</html>

11. 你怎么来实现⻚面设计图，你认为前端应该如何⾼质量完成⼯作? ⼀一个满屏品字布局如何设计?
⾸先将页面划分为头部，body…
实现效果图是最基本的⼯作，精确到2px；
与设计师，产品经理的沟通和项⽬的参与
做好的页⾯结构，页⾯重构和⽤户体验
处理hack，兼容、写出优美的代码格式优化服务器

12. 知道css有个content属性吗？有什么作用？有什么应用？
css的content属性专门应⽤在 before/after 伪元素上，⽤来插⼊⽣成内容。最常见的应⽤是利⽤伪类清除浮动。

 //⼀种常见利⽤伪类清除浮动的代码
.clearﬁx:after {
    content:"."; //这⾥利⽤到了content属性
    display:block;   
    height:0;    
    visibility:hidden;     
    clear:both; } 
    .clearﬁx {     
    *zoom:1; }

after伪元素通过 content 在元素的后⾯⽣成了内容为⼀个点的块级元素，再利⽤clear:both清除浮动。
　　
知道css计数器（序列数字字符⾃动递增）吗？如何通过 css content属性实现css计数器？
css计数器是通过设置counter-reset 、counter-increment 两个属性、及 counter()/ counters()⼀个⽅法配合after / before 伪类实现。

13. 如何在 HTML5 ⻚面中嵌⼊音频?
HTML 5 包含嵌⼊⾳频⽂件的标准⽅式，⽀持的格式包括 MP3、Wav 和 Ogg：
< audio controls> < source src="jamshed.mp3" type="audio/mpeg"> Your browser does'nt support audio embedding feature. < /audio>

14. 如何在 HTML5 ⻚面中嵌⼊入视频？
和⾳频⼀样，HTML5 定义了嵌⼊视频的标准⽅法，⽀持的格式包括：MP4、WebM 和 Ogg：
<video width="450" height="340" controls> <source src="jamshed.mp4" type="video/mp4"> Your browser does'nt support video embedding feature. </video>

15. HTML5 引⼊什么新的表单属性？
Datalist datetime output keygen date month week time number range emailurl

16描述一段语义的html代码吧。
（HTML5中新增加的很多标签（如：< article>、< nav>、< header>和< footer>等）就是基于语义化设计原则）
< div id=“header”>
< h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>

语义 HTML 具有以下特性：
⽂字包裹在元素中，⽤以反映内容。
例如：
段落包含在 < p> 元素中。
顺序表包含在< ol>元素中。
从其他来源引⽤的⼤型⽂字块包含在 < blockquote >元素中。

HTML 元素不能⽤作语义⽤途以外的其他⽬的。
例如：
< h1>包含标题，但并⾮⽤于放⼤⽂本。
< blockquote>包含⼤段引述，但并⾮⽤于⽂本缩进。
空⽩段落元素 ( < p>< /p> ) 并⾮⽤于跳⾏。

⽂本并不直接包含任何样式信息。
例如：不使⽤ < font> 或 < center> 等格式标记。
类或 ID 中不引⽤颜⾊或位置。

15.你对标签语义化的理解
⽹页使⽤什么HTML标签要看这个元素是什么元素，⽽不是看这个元素像什么元素。
例如我们⽤h2标签，是因为这个元素是⼆级标题，⽽不是因为它看起来⽐较字体⽐较粗⽐较⼤。

16.HTML5离线存储方式
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后⾃动删除。

sessionStorage和localStorage的存储空间更⼤；
sessionStorage和localStorage有更多丰富易⽤的接口；
sessionStorage和localStorage各⾃独⽴的存储空间；