前端 HTML5+CSS3基础知识一

CSS3有哪些新特性？
html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？
如何实现浏览器内多个标签页之间的通信?
你如何对网站的文件和资源进行优化？
什么是响应式设计？
新的 HTML5 文档类型和字符集是？
HTML5 Canvas 元素有什么用？
HTML5 标准提供了哪些新的 API？
用H5+CSS3解决下导航栏最后一项掉下来的问题
常用的伪类与伪元素
请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。
知道css有个content属性吗？有什么作用？有什么应用？
如何在 HTML5 页面中嵌入音频?
如何在 HTML5 页面中嵌入视频？
HTML5 引入什么新的表单属性？

1. CSS3有哪些新特性？

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

2. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
SGML、HTML、XML、XHTML、HTML5 之间的关系，知道否？
新特性：

拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器多背景 rgba

移除的元素：

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

支持HTML5新标签，浏览器兼容问题：

普通浏览器
普通不支持HTML5新标签的浏览器 —— 能正常解析，但会当初成inline元素对待
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素inline对待，所以我们只需要将其转换成块元素block即可使用；经常会到初始化 css中看到：
```
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
```
IE9以下的浏览器

IE9 (不含IE9)以下浏览器 —— 不能解析，即使想办解析了也会当成 inline 元素对待

我们需要先想办法让浏览器能够正常解析后，再将其转化成块级元素 block。常见有两种方法

方法一：
将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。再通过css将其转化成block 元素

方法二：
在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库html5shiv.js来解决兼容问题
```

```

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5声明：

<!doctype html>

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

Cookies:

服务器和客户端都可以访问；
大小只有4KB左右；
有有效期，过期后将会删除；

本地存储：

只有本地浏览器端可访问数据，服务器不能访问本地存储。直到通过POST或者GET通道发送给服务器；
每个域5MB；
没有过期数据，它将保留数据，直到用户从浏览器清除或者使用Javascript代码移除

cookie localStorage sessionStorage (¦3」∠) 看完你居然就懂了！！！

4. 如何实现浏览器内多个标签页之间的通信?

调用 localstorge、cookies 等本地存储方式

5. 你如何对网站的文件和资源进行优化？

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

【前端性能优化】不懂优化的前端不是好前端…
【前端性能优化】JS优化，难么？
静态资源优化：图片优化

6. 什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。
响应式设计是让所有的人能在这些设备上让网站运行正常

7. 新的 HTML5 文档类型和字符集是？

HTML5文档类型：<!doctype html>
HTML5使用的编码：<meta charset=”UTF-8”>

8. HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

JS五彩连珠小游戏(Canvas绘制)
JS打砖块小游戏 canvas绘制

9. HTML5 标准提供了哪些新的 API？

主要有：
Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

10. 用H5+CSS3解决下导航栏最后一项掉下来的问题

 box-sizing: border-box;

CSS盒模型 ╰(‵□′)╯So Easy!

11. 常用的伪类与伪元素

伪类：
一个 CSS 伪类是以一个冒号:作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。
例如 :hover，当用户悬停在指定元素时，可以在这个状态给指定元素添加相应的样式。

:first-child 表示在一组兄弟元素中的第一个元素。
:first-of-type 表示一组兄弟元素中指定类型的第一个元素。
:last-child 表示在一组兄弟元素中的最后一个元素(类似:first-child)。
:last-of-type 表示一组兄弟元素中指定类型的最后一个元素(类似:first-of-type)。
:not 一个否定伪类，用于匹配不符合参数选择器的元素。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
:nth-last-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。

注意：

n 可以是数字、关键词或公式
odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词，例如：:nth-child(even)匹配偶数位，:nth-of-type(odd)匹配奇数位

伪元素：
伪元素的前缀是两个冒号::，同样是添加到选择器后面去选择某个元素的某个部分。
伪元素创建了不存在 DOM 树中的元素，并为其添加样式。

::after(:after) 伪元素在元素之后添加内容。
::before(:before) 选择器在被选元素的内容前面插入内容。
::first-letter（:first-letter）伪元素向文本的第一个字母添加特殊样式。（某些语言有一些要处理为单个字符的字母组合，如果是这样，用户代理可能会把首字母同时应用到这个字母组合。）
::first-line (:first-line) 伪元素向文本的首行添加特殊样式。
::selection 用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

注意：
::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。
注: IE8仅支持:after。

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

<div class="test"></div>

.test{width: 200px;height: 100px;border-radius: 10px;box-shadow: 10px 10px 5px #888888; background-color: pink;transition: 0.7s;
}
.test:hover {opacity: 0;}

13. 知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。

<div class="test">好好学习</div>

.test::before{content:url('https://img-blog.csdnimg.cn/20200216171758318.gif')
}
.test::after{content:" 多敲代码"
}

代码效果（录屏后转换gif的图）：

14. 如何在 HTML5 页面中嵌入音频?

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：

<audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频嵌入功能。
</audio>

15. 如何在 HTML5 页面中嵌入视频？

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：

<video width="450" height="340" controls> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频嵌入功能。
</video>

16. HTML5新增加的一些表单属性

新的 form 属性：

autocomplete
规定 form 或 input 域应该拥有自动完成功能。该属性有可能在 form元素中是开启的
novalidate
是一个 boolean(布尔) 属性。novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

新的 input 属性：

autocomplete
规定 form 或 input 域应该拥有自动完成功能。该属性有可能在input元素中是关闭的
autofocus
规定在页面加载时，域自动地获得焦点。这个属性在注册登录页面以及表单的第一项input中还是比较实用的。（height 和 width 属性只适用于 image 类型的标签。）
form
form 属性规定输入域所属的一个或多个表单。
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
height 和 width
规定用于 image 类型的标签的图像高度和宽度。
list
list 属性引用的 <datalist>元素中包含了 <input>元素的预定义选项。
min, max 和 step
min 和 max 属性规定元素的最小值和最大值。
multiple
multiple 属性是布尔属性
如果设置，则规定允许用户在元素中输入一个以上的值
pattern (regexp)
pattern 属性规定用于检查元素值的正则表达式。
placeholder
该属性提供一种提示（hint），描述输入域所期待的值。在微信小程序中应用广泛，而且非常非常实用，避免了再使用JS判断该输入项应该填什么。
required
必填项属性，当该项加入该属性后，则不能为空

W3C HTML5 表单属性