期末复习之html5和css3
第一章 html5开发基础与应用
感觉前端知识太琐碎了，大佬若有好的学习方法可再评论区分享下。
第一节 简介
html5的区别变化
- 某些元素可以省略结束标签（p li dt dd）
- 单标签（area base br）
- 连开头标签一起省略的元素（html head body colgroup tbody）
- 属性值不可以用引号扩起来（‘ ’）可以用单引号
- 标签不区分大小写
- 标志性的属性可以省略属性值 boolean
html5 的优势
- 跨平台跨浏览器：95%的浏览器支持html5，包括移动设备
- 增强的web应用程序：可以直接使用html来播放视频
第二节常用的元素和属性
html5保留了大部分html标签但也废弃一些
废弃标签
basefont big center font strike tt：用 CSS 处理可以更好地替代他们
frame frameset noframes：使用这些标签，破坏了可使用性和可访问性
acronym applet dir：不经常使用、会引起混乱、可被其他元素替代
新增元素
增加大量结构元素
新增通用全局属性
HTML5 规范对通用属性也做了一定的修改。 保留了 id、style、class、dir、title、lang、accesskey 等通用属性。也新增了 contenteditable、designMode、hidden 等通用属性。
- contentEditable
- designMode
- hidden：所有的h5元素都具有hidden属性，默认显示，false隐藏 等价与display none
第三节 表单控件
用于表示计算或用户操作的结果，一般用来更加明确的显示其 他表单控件的值，如 range 类型的具体值，color 的具体值
input新增type
-
color
用来创建一个允 许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域
time
生成一个时间选择器
datetime
生成一个 UTC 的日期时间选择器
datetime-local
生成一个本地化的日期时间选择器
date
显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。
month
生成一个月份选择器，它结果值包括年份和月份， 但不包括日期
week
生成一个选择的几周的选择器
email
生成一个 E-mail 输入框
number
生成一个只能输入数字的输入框，
range
生成一个拖动条，通过拖动条，使得用户只能输入指定范围，指定步长的值
search
生成一个专门用于输入搜索关键字的文本框
tel
生成一个只能输入电话号码的文本框
url
生成一个 URL 输入框
input新增 属性
- placeholder
主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autocomplete
为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择
autofocus
当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点
list
为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
pattern
用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效
novalidate
当提交表单时不对其进行验证
required
必需在提交之前填写输入字段
spellcheck
拼写检查，为、等元素新增属性
formenctype
规定在发送到服务器之前应该如何对表单数据进行编码
formtarget
带有两个提交按钮的表单，会提交到不同的目标窗口
multiple
一次上传多个文件
maxlength wrap
第二章 css3
第一节 新增选择器
兄弟选择器
- 元素1~元素2 : 第1个元素之后，所有的元素2都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻）。
属性选择器
E[attr^=value] : 选取带有指定开头的属性值
E[attr$=value]：属性值结尾
^代表开头$代表结尾
E[attr*=value] :用于选取属性之中包含指定元素
伪类选择器
- root
选择文档的根元素，HTML 里，永远是元素
:last-child
向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n)
向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n)
向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
:only-child
向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type
向元素添加样式，且该元素是同级同类型元素中第一个元 素
:last-of-type
向元素添加样式，且该元素是同级同类型元素中最后一个 元素
:nth-of-type(n)
向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
:nth-last-of-type(n)
向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type
向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty
向没有子元素（包括文本内容）的元素添加样式
伪元素选择器
：enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
：disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
:checked 向当前处于选中状态的元素添加样式
:not(selector) 向不是 selector 元素的元素添加样式
:target 向正在访问的锚点目标元素添加样式
::selection 向用户当前选取内容所在的元素添加样式
css3新增属性
background-clip
设置背景覆盖范围
border-box/paddingbox/content-box
background-origin
设置背景覆盖的起点
border-box/paddingbox/content-box
background-size
设置背景的大小
cover/contain/长度/百分比
字体相关属性
text-overflow： 文本溢出处理 clip/ellipsis
word-wrap：单词换行方式normal/break-word
word-break 自动换行方式normal/break-all/keep-all
盒模型属性
border-radius； border-top-left-radius；border-top-right-radius；border-bottom-left-radius；border-bottom-right-radius
圆角 长度/百分比
box-shadow 阴影 h- v-shadow
resize 调整尺寸 none both
outline-offset 轮廓偏移量 length inherit
第三节新增 变形动画属性transform
transform
translate(x,y)
rotate(deg)
scale(x,y) 缩放
skew(deg x,deg y)
transform-origin
表示元素旋转的中心点，默认值为 50% 50%。第一个值表 示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比；第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。
第四节 css3的3D变形属性
三维空间xyz
我们知道xy可以确定一个二维平面上的点再加上z就可表示三维空间了，即真实所处的空间，z可以理解为高度；就像两面墙交接下面的两条直角边是xy轴，竖直那条是z
transform3D函数
rotateX
rotateY
rotateZ
transform-style
用来设置嵌套的子元素在 3D空间中显示效果。它可以设置两个属性值，flat（子元素不保留其 3D 位置，默认值）和 preserve-3d（子元 素保留它的 3D 位置）。
perspective
透视效果单位为像素，默认为0；
perspective-origin
设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同 transform-origin，默认值为 50% 50%。
backface-visibility
用来设置当元素背面面向屏幕时是否可见，通常用于设置 不希望用户看到旋转元素的背面。它的属性值有visible（背面可见，默认值）、 hidden（背面不可见）两个。
第五节 CSS3的过渡属性
css3增加了一些过渡属性，给元素增加过渡动画。
-
transition-delay ：过渡延迟 ： time
-
transition=duration ：过渡时间：time
-
transition-timing-function ：过渡时间曲线：linear/ease/ease- in/easeout/ease-in-out/cubic-bezier(x1,y1,x2,y2)
-
transition-property:指定哪一个css使用过渡：none/all/css属性名
-
transition：一条声明设置所有过渡属性
第六节 css3动画属性
补间动画支持：animation，可以做一系列图形变换（平移 缩放 旋转 改变透明）
-
@keyframes ： 定义动画选择器 ： name时间css样式
-
animation-name ：使用@keyframes定义的动画： none/动画选择器
-
animation-delay ：动画持续时间：none
-
animation-timing-function：动画时间曲线：linear/ease/ease- in/easeout/ease-in-out/cubic-bezier(x1,y1,x2,y2)
-
animation-iteration-count：动画播放次数：数/infinite
-
animation-direction ： 动画反向播放：normal/alternate
-
animation-play-state：动画播放状态：paused/running
-
transition：一条声明设置所有过渡属性
第七节 css3新增多列属性
CSS为文本排版提供了多列模式，例在一个div里里面文本左右分栏的效果；属性
不可继承
- column-count ： 设置元素应该被分割列数 ： 数字/auto
- column-width ： 列宽：长度 /auto
- columns ： 一条声明列宽和烈数 ： column-count/column-width
- column-gap：列之间的间隔“：长度/normal
- column-span：横跨列数：1/all
- column-rule-style：列之间的间隔样式：none/hidden/dotted/dashed/solid/double/。。。
- column-rule/color：列间隔颜色”：
- column-rule-width : 列之间间隔宽度：thin/medium/thick/length
- column-rule：column-rule-style/column-rule-color/column-rule-width
第八节 css3新增单位
使用 px em rem vh vw %实现页面布局
- px绝对单位 精确的像素展示
- em相对单位基准点为父节点字体大小 如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。em会根据父级元素的大小而变化，但是如果嵌套了多个元素，要计算它的大小，是很容易出错的，这样就引申出了rem。
- rem 相对单位 root em 相对跟节点html字体来计算大小，css新增属性
- % 百分比 长度
- vw vh vmin vmax： view 视角，w：width。h：height
第九节 弹性盒模型
设计更复杂的版面布局 flex
• 任何一个容器都可以指定弹性布
• 设置flex布局以后，子元素的float,clear,virtical-align等样式全部失效
• display:flex;或display:inline-flex;
box-orient ： 设置或检索弹性盒子元素排列
box-pack ： 子元素对其方式
box-align ： 子元素的对齐方式。
box-flex : 子元素如何分配其剩余空间
box-flex-froup：子元素所属组
box-ordinal-group：子元素显示顺序
box-direction：子元素排列顺序是否反转
box-lines ： 子元素是否可以换行显示
用于表示计算或用户操作的结果，一般用来更加明确的显示其 他表单控件的值，如 range 类型的具体值，color 的具体值
input新增type
-
color
用来创建一个允 许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域
time
生成一个时间选择器
datetime
生成一个 UTC 的日期时间选择器
datetime-local
生成一个本地化的日期时间选择器
date
显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。
month
生成一个月份选择器，它结果值包括年份和月份， 但不包括日期
week
生成一个选择的几周的选择器
email
生成一个 E-mail 输入框
number
生成一个只能输入数字的输入框，range
生成一个拖动条，通过拖动条，使得用户只能输入指定范围，指定步长的值
search
生成一个专门用于输入搜索关键字的文本框
tel
生成一个只能输入电话号码的文本框
url
生成一个 URL 输入框
input新增 属性
- placeholder
主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autocomplete
为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择
autofocus
当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点
list
为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
pattern
用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效
novalidate
当提交表单时不对其进行验证
required
必需在提交之前填写输入字段
spellcheck
拼写检查，为、等元素新增属性
formenctype
规定在发送到服务器之前应该如何对表单数据进行编码
formtarget
带有两个提交按钮的表单，会提交到不同的目标窗口
multiple
一次上传多个文件
maxlength wrap
第二章 css3
第一节 新增选择器
兄弟选择器
- 元素1~元素2 : 第1个元素之后，所有的元素2都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻）。
属性选择器
E[attr^=value] : 选取带有指定开头的属性值
E[attr$=value]：属性值结尾
^代表开头$代表结尾
E[attr*=value] :用于选取属性之中包含指定元素
伪类选择器
- root
选择文档的根元素，HTML 里，永远是元素
:last-child
向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n)
向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n)
向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
:only-child
向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type
向元素添加样式，且该元素是同级同类型元素中第一个元 素
:last-of-type
向元素添加样式，且该元素是同级同类型元素中最后一个 元素
:nth-of-type(n)
向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
:nth-last-of-type(n)
向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type
向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty
向没有子元素（包括文本内容）的元素添加样式
伪元素选择器
：enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
：disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
:checked 向当前处于选中状态的元素添加样式
:not(selector) 向不是 selector 元素的元素添加样式
:target 向正在访问的锚点目标元素添加样式
::selection 向用户当前选取内容所在的元素添加样式
css3新增属性
background-clip
设置背景覆盖范围
border-box/paddingbox/content-box
background-origin
设置背景覆盖的起点
border-box/paddingbox/content-box
background-size
设置背景的大小
cover/contain/长度/百分比
字体相关属性
text-overflow： 文本溢出处理 clip/ellipsis
word-wrap：单词换行方式normal/break-word
word-break 自动换行方式normal/break-all/keep-all
盒模型属性
border-radius； border-top-left-radius；border-top-right-radius；border-bottom-left-radius；border-bottom-right-radius
圆角 长度/百分比
box-shadow 阴影 h- v-shadow
resize 调整尺寸 none both
outline-offset 轮廓偏移量 length inherit
第三节新增 变形动画属性transform
transform
translate(x,y)
rotate(deg)
scale(x,y) 缩放
skew(deg x,deg y)
transform-origin
表示元素旋转的中心点，默认值为 50% 50%。第一个值表 示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比；第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。
第四节 css3的3D变形属性
三维空间xyz
我们知道xy可以确定一个二维平面上的点再加上z就可表示三维空间了，即真实所处的空间，z可以理解为高度；就像两面墙交接下面的两条直角边是xy轴，竖直那条是z
transform3D函数
rotateX
rotateY
rotateZ
transform-style
用来设置嵌套的子元素在 3D空间中显示效果。它可以设置两个属性值，flat（子元素不保留其 3D 位置，默认值）和 preserve-3d（子元 素保留它的 3D 位置）。
perspective
透视效果单位为像素，默认为0；
perspective-origin
设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同 transform-origin，默认值为 50% 50%。
backface-visibility
用来设置当元素背面面向屏幕时是否可见，通常用于设置 不希望用户看到旋转元素的背面。它的属性值有visible（背面可见，默认值）、 hidden（背面不可见）两个。
第五节 CSS3的过渡属性
css3增加了一些过渡属性，给元素增加过渡动画。
-
transition-delay ：过渡延迟 ： time
-
transition=duration ：过渡时间：time
-
transition-timing-function ：过渡时间曲线：linear/ease/ease- in/easeout/ease-in-out/cubic-bezier(x1,y1,x2,y2)
-
transition-property:指定哪一个css使用过渡：none/all/css属性名
-
transition：一条声明设置所有过渡属性
第六节 css3动画属性
补间动画支持：animation，可以做一系列图形变换（平移 缩放 旋转 改变透明）
-
@keyframes ： 定义动画选择器 ： name时间css样式
-
animation-name ：使用@keyframes定义的动画： none/动画选择器
-
animation-delay ：动画持续时间：none
-
animation-timing-function：动画时间曲线：linear/ease/ease- in/easeout/ease-in-out/cubic-bezier(x1,y1,x2,y2)
-
animation-iteration-count：动画播放次数：数/infinite
-
animation-direction ： 动画反向播放：normal/alternate
-
animation-play-state：动画播放状态：paused/running
-
transition：一条声明设置所有过渡属性
第七节 css3新增多列属性
CSS为文本排版提供了多列模式，例在一个div里里面文本左右分栏的效果；属性
不可继承
- column-count ： 设置元素应该被分割列数 ： 数字/auto
- column-width ： 列宽：长度 /auto
- columns ： 一条声明列宽和烈数 ： column-count/column-width
- column-gap：列之间的间隔“：长度/normal
- column-span：横跨列数：1/all
- column-rule-style：列之间的间隔样式：none/hidden/dotted/dashed/solid/double/。。。
- column-rule/color：列间隔颜色”：
- column-rule-width : 列之间间隔宽度：thin/medium/thick/length
- column-rule：column-rule-style/column-rule-color/column-rule-width
第八节 css3新增单位
使用 px em rem vh vw %实现页面布局
- px绝对单位 精确的像素展示
- em相对单位基准点为父节点字体大小 如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。em会根据父级元素的大小而变化，但是如果嵌套了多个元素，要计算它的大小，是很容易出错的，这样就引申出了rem。
- rem 相对单位 root em 相对跟节点html字体来计算大小，css新增属性
- % 百分比 长度
- vw vh vmin vmax： view 视角，w：width。h：height
第九节 弹性盒模型
设计更复杂的版面布局 flex
• 任何一个容器都可以指定弹性布
• 设置flex布局以后，子元素的float,clear,virtical-align等样式全部失效
• display:flex;或display:inline-flex;
box-orient ： 设置或检索弹性盒子元素排列
box-pack ： 子元素对其方式
box-align ： 子元素的对齐方式。
box-flex : 子元素如何分配其剩余空间
box-flex-froup：子元素所属组
box-ordinal-group：子元素显示顺序
box-direction：子元素排列顺序是否反转
box-lines ： 子元素是否可以换行显示