H5C3 复习总结

1.新增语义化标签（与div一样）

  header         页头

  nav              导航栏

  main            主体内容

  aside           侧边栏

  article          文档

  section        文档节

  footer          页脚

2.新增标单控件和属性

语法：<input type="属性值"   属性 >

常用的表单新属性：

  placeholder=' 输入提示信息'              为表单提供提示信息

 autofocus                                            规定当前页面加载input时自动获取焦点

multiple                                                多文件上传

autocomplete                                        规定表单是否应该启用自动完成功能，on默认，启用自动                                                                  完成（name必须有，提交按钮必须）

required                                                 必填项

accesskey                                               规定激活（使元素获得焦点）元素的快捷键,Alt+S键

tabindex                                                   指定获取焦点的顺序

data-*                                                      自定义标签属性

pattern                                                     规定正则表达式（不需要  /   /  反斜杠）

3.C3新特性：

1.颜色：新增RGBA，HSLA模式 

2. 文字阴影（text-shadow） 

3. 边框： 圆角（border-radius）边框阴影： box-shadow 

4. 盒子模型：box-sizing 

5. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局 

6. 渐变：linear-gradient、radial-gradient 

7. 过渡：transition，可实现动画 

8. 自定义动画 

9. 在CSS3中唯一引入的伪元素 ：selection. 

10. 媒体查询，多栏布局 

11. border-image 

12. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y) 

13. 3D转换 

14.新增选择器：属性选择器、伪类选择器、伪元素选择器。 

4.弹性盒模型
容器：

display:flex

表明当前的容器时弹性父容器

flex-directionsh

设置项目排列方向（主轴）

Row默认值从左向右

Row-reverse从右向左

Column从上到下

Column-reverse从下向上

justify-content设置项目在主轴方向上的对齐方式

flex-start（默认值）：左对齐；

flex-end：右对齐；

center： 居中；

space-between：两端对齐，项目之间的间隔都相等；

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；

align-items设置项目在交叉轴方向上对齐方式

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

flex-warp设置超出容器的项目是否换行

nowrap（默认值）：项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度;

wrap：如果需要，从左到右和从上到下，弹性项目将显示在多行中;

wrap-reverse：如果需要，从左到右和从下到上，弹性项目将显示在多行中;

align-content设置项目换行的对齐方式

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

ocation 对象

5. Location对象（包含有关当前 URL 的信息）

location 对象是 window 对象的一部分，可通过window.location属性对其进行访问。