HTML 与 XHTML区别？
DOCTYPE文档及编码
元素大小写
属性布尔值
属性引号
图片的alt属性
单标签写法
双标签闭合
strong和b、em和i？
strong 和 em 都是表示强调的标签，表现形态为文本加粗和斜体。b 和 i 标签同样也表示文本加粗和斜体。
区别在于，strong 和 em 是具备语义化的，而 b 和 i 是不具备语义化的。
引用标签
blockquote : 引用大段的段落解释
q : 引用小段的短语解释
abbr : 缩写或首字母缩略词
address : 引用文档地址信息
cite : 引用著作的标题
iframe嵌套页面
iframe元素会创建包含另一个文档的内联框架(即行内框架)
应用场景：数据传输、共享代码，局部刷新、第三方介入等。
br与wbr
br 标签表示换行操作，而 wbr 标签表示软换行操作。
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）
pre 与 code？
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。
map 与 area？
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
area 元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。
embed 与 object？
embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。
object 元素需要配合param 元素一起完成。。
audio 与 video？
audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签。。
文字注解与文字方向
ruby 标签定义 ruby 注释（中文注音或字符），rt 标签定义字符（中文注音或字符）的解释或发音。
bdo 标签可覆盖默认的文本方向。
练习：古诗排列
扩展link标签****
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
<link rel="dns-prefetch" href="//static.360buyimg.com">
扩展meta标签****
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keywords" content="大连美食,大连酒店,大连团购">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
HTML5新语义化标签
header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航
注：header、footer、main 在一个网页中只能出现一次。
article : 独立的内容
aside : 辅助信息的内容
section : 区域
figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分
datalist : 选项列表
details / summary : 文档细节 / 文档标题
progress / meter : 定义进度条 / 定义度量范围
time : 定义日期或时间
mark : 带有记号的文本
表单扩展学习？
添加单线 : border-collapse : collapse
隐藏空单元 : empty-cells : hide
斜线分类 : border / rotate
列分组 : colgroup / col
美化表单控件： 1. label + :checked 2. position + opacity
新的input控件
email : 电子邮件地址输入框
url : 网址输入框
number : 数值输入框
range : 滑动条
date / month / week : 日期控件
search : 搜索框
color : 颜色控件
tel : 电话号码输入框 ( 在移动端会默认调起数字键盘 )
time : 时间控件
表单属性：
autocomplete : 自动完成 默认 on / off
autofocus : 获取焦点
required : 不能为空
pattern : 正则验证
method : 数据传输方式
enctype : 数据传输类型
name / value : 数据的键值对
扩展标签 :
fieldset : 表单内元素分组
legend : 为fieldset元素定义标题
optgroup : 定义选项组
BFC规范？
触发BFC规范的元素，可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题。
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC 即 Block Formatting Contexts (块级格式化上下文) ，它属于上述中的其中一种规范。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
触发BFC
触发的样式：
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC特性及应用
解决margin叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题
浏览器前缀？
浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式语法还在波动的时候，他们提出了针对浏览器的前缀。
transition 过渡？
transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数)，也可以提前(数值为负数) )
transition-timing-function : 规定速度效果的速度曲线。
transition-timing-function
linear
ease（默认值）
ease-in
ease-out
ease-in-out
cubic-bezier
（ http://cubic-bezier.com ）
注：不要加到hover上。
transform变形？
translate : 位移
translateX
translateY
translateZ ( 3d )
scale : 缩放 （值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）
scaleX
scaleY
scaleZ (3d)
rotate : 旋转 （ 旋转的值，单位是角度 deg ）
rotateX (3d)
rotateY (3d)
rotateZ ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )
skew : 斜切
skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。
skewY
transform的注意事项：
1. 变形操作不会影响到其他元素。
2. 变形操作只能添加给块元素，但是不能添加给内联元素。
3. 复合写法，可以同时添加多个变形操作。
执行是有顺序的，先执行后面的操作，再执行前面的操作。
translate会受到 rotate、scale、skew的影响
4. transform-origin : 基点的位置
x y z(3d)
animation 动画？
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式
.box2{ width:100px; height:100px; background:red;
animation-name:myBox;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes myBox{
from{ transform: translate(0,0); }
to{ transform : translate(200px,0)}
}
注：
1. 运动结束后，默认情况下会停留在起始位置。
2. @keyframes : from -> 0% , to -> 100%
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%
.box1,.box2,.box3,.box4{ width:100px; height:100px; background:red; margin:5px;}
.box1{ animation:2s move 2s;}
.box2{ animation:2s move 2s; animation-fill-mode: backwards;}
.box3{ animation: 2s move 2s; animation-fill-mode: forwards;}
.box4{ animation: 2s move 2s; animation-fill-mode: both;}
@keyframes move{
0%{ transform: translate(0,0); background:blue;}
100%{ transform: translate(300px,0);}
}
animate.css？
一款强大的预设css3动画库。
官网地址：https://daneden.github.io/animate.css/
基本使用：
animated : 基类(基础的样式，每个动画效果都需要加)
infinite : 动画的无限次数
3D操作？
transform:
rotateX() : 正值向上翻转
rotateY() : 正值向右翻转
translateZ() : 正值向前，负值向后
scaleZ() : 立体元素的厚度
3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
perspective（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin : 景深-基点位置，观察元素的角度。
transform-origin: center center -50px; （Z轴只能写数值，不能写单词）
transform-style : 3D空间
flat (默认值2d)、preserve-3d (3d，产生一个三维空间)
backface-visibility : 背面隐藏
hidden、visible (默认值)
CSS3提供了扩展背景样式？
background-size : 背景图的尺寸大小
cover : 覆盖
contain : 包含
background-origin : 背景图的填充位置
padding-box (默认)
border-box
content-box
background-clip : 背景图的裁切方式
padding-box
border-box (默认)
content-box
注：复合样式的时候，第一个是位置，第二个是裁切
CSS3渐变？
1. 线性渐变 -> linear-gradient是值，需要添加到background-image属性上
注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。
2. 径向渐变 -> radial-gradient
字体图标？
font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。
好处：
1.可以非常方便的改变大小和颜色
font-size color
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端工程师的工作量
6.可使用计算机没有提供的字体
使用：
@font-face语法
像.woff等文件都是做兼容平台处理的, mac、linux等。
text-shadow:
文字的阴影
x y blur color
注：阴影的默认颜色是跟文字样色相同
注：通过逗号的方式进行分割，可以设置多阴影
box-shadow：
x
y
blur //模糊程度
spread //模糊范围
color
inset
多阴影
注：盒子阴影的默认样色是黑色。
注：默认就是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影。
mask 遮罩
url
repeat
x
y
w
h
多遮罩
注：mask目前还没有标准化，所以需要添加浏览器前缀。
注：默认是x、y都平铺。
box-reflect倒影
above 上
below 下
left 左
right 右
距离
遮罩 | 渐变
渐变：只是针对透明度的渐变，不能支持颜色的渐变。
blur模糊
filter : blur()
calc计算
四则运算
`.box{ height:100px; width:calc(100% - 100px); background:red;}`
分栏布局
column-count : 分栏的个数
column-width : 分栏的宽度
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏
注：column-width和column-count不要一起去设置。
伪元素：
伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
:: selection
:: first-line / first-letter
:: before / after
…
CSS Hack分类
1. CSS属性前缀法
.elem{ _background:red; }
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
2. 选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
*html .elem{ }
3. IE条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。
IE10以上已经不支持注释法
/* IE6 */
/* .box{ width:100px; height:100px; background: red; _background:blue;} */
/* IE6 7 */
/* .box{ width:100px; height:100px; background: red; +background:blue;} */
/* .box{ width:100px; height:100px; background: red; *background:blue;} */
/* IE6~9 */
/* .box{ width:100px; height:100px; background: red; background:blue\9;} */
/* IE8~11 */
/* .box{ width:100px; height:100px; background: red; background:blue\0;} */
/* IE6 */
/* *html .box{ width:100px; height:100px; background:red;} */
/* IE7 */
/* *+html .box{ width:100px; height:100px; background:red;} */
/* IE9及高级浏览器 */
/* :root .box{ width:100px; height:100px; background:red;} */
.box{ width:100px; height:100px; background:red;}
IE低版本常见BUG
由于旧浏览器在设计上有很多缺陷，导致一些BUG的产生，所以针对这些问题需要做出兼容处理。
1. 透明度
2. 双边距
3. 最小高度
4. 图片边框
渐进增强与优雅降级
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
