2020-8-27

1. html5的新特性

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

1. 语义化标签

   header footer nav section article aside details summary dialog

2. 增强型表单

   input的type：color date datetime email month number range search tel time url week

3. 新增表单元素

   datalist https://www.w3school.com.cn/tags/tag_datalist.asp

   keygen

   output

4. 新增表单属性

   placehoder required pattern min 和 max step autofocus（自动地获得焦点） multiple

5. 音频视频

   audio video

6. canvas

7. 地理定位

8. 拖拽

9. 本地存储

10. 新事件

    onresize ondrag onscroll onmousewheel onerror onplay onpause

11. WebSocket webworker

2. css3新特性

https://www.w3school.com.cn/css3/css3_intro.asp

1. 选择器
2. 背景和边框
3. 文本效果
4. 2D/3D转换
5. 动画，过渡
6. 多列布局
7. 用户界面

选择器

1. id选择器（#）
2. 类选择器（.）
3. 标签选择器
4. 相邻选择器（h1+p）
5. 子选择器（ul>li）
6. 后代选择器（ul li）
7. 统配符选择器（*）
8. 属性选择器（div[class=“div_img”]）
9. 伪类选择器（a:>hover）

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:first-of-type 选择属于其父元素的首个元素
:last-of-type 选择属于其父元素的最后元素
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */

伪类

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

伪元素

::before {content:""} /*被选元素之前  添加内容*/
::after {content:""} /*之后*/
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */

伪类 : 伪元素 ::
边框

border-radius
box-shadow
border-image

背景

background-size  规定背景图片的尺寸
background-origin  规定背景图片的定位区域

文本效果

text-shadow  水平阴影、垂直阴影、模糊距离，以及阴影的颜色
word-wrap  规定文本的换行规则  word-wrap:normal|break-word;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nlrfI3nC-1598547152136)(C:\Users\小可爱\AppData\Roaming\Typora\typora-user-images\1598533049316.png)]

字体

@font-face

2D,3D

2D

translate()  transform: translate(50px,100px);
rotate()  transform: rotate(30deg);
scale()  transform: scale(2,4); 宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍
skew() transform: skew(30deg,20deg); 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
matrix()

3D

rotateX() //根据x轴旋转
rotateY()  //根据y轴旋转

动画，过渡

transition:属性名称   过渡时间   过渡效果  过渡延迟时间
一种样式过渡到另外一种样式
两个条件
1. 规定哪个属性需要过渡效果
2. 规定过渡的时间

animation （动画）
//使用
animation: 动画名称  过渡时间  ...
@keyframes 动画名称{
    
}

多列

column-count  规定元素应该被分隔的列数
column-gap  规定列之间的间隔
column-rule  设置列之间的宽度、样式和颜色规则

用户界面

resize  手动调整元素的大小  触发条件 overflow的属性 auto/hidden/scroll
box-sizing   值  content-box、border-box 和 inherit
outline-offset  对轮廓进行偏移

box-sizing

content-box：W3C标准盒模型 实际上的 width 大于原始设定的 width 元素实际宽度 = 内容宽度（设置width的值） + padding + border

border-box：IE怪异盒模型 设置width 包括了padding 和 border

https://www.w3school.com.cn/tiy/t.asp?f=css3_outline-offset

css兼容内核

-moz-:firefox
-ms-:IE
-webkit-:safari chrome
-o-:opera浏览器

3. 行内元素和块级元素

块级元素

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5 新增的 header、section、aside、footer 等

行内元素

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button

4. iframe标签的缺点（已经不常用）

1. 阻塞主页面的onload事件
2. 搜索引擎的检索程序无法解读这种页面，不利于 SEO
3. iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
4. 很多移动设备无法显示框架 设备兼容性差

https://www.w3school.com.cn/tags/tag_iframe.asp

5. 语义化的理解

1. HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

2. 在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。

3. 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利 SEO 。

4. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

   便于阅读，搜索

6. 浏览器的内核

IE：trident

firefox：gecko

Safari：webkit

Opera：Blink

Chrome：Blink

7. 对浏览器内核的理解

渲染引擎：用于获取 html、css 和图片,然后会输出至显示器或打印机

js引擎：解析和执行js代码