关于html静态页面书写的知识点整理
1.web标准：结构，表现，行为 结构（xhtml,xml）表现（css）行为（DOM ECMASCRIPT）
2.W3C：万维网联盟 行为标准：DOM（ECMA制定的欧洲电脑厂商联合会）
3.html:Hyper Text Markup Language （超文本标记语言）
xhtml:Extensible HyperText Markeup Language（可扩展超文本标记语言）
4.声明文档类型
5.HTML基本语法：常规标记：<标记 属性="属性值">
空标记：<标记 属性="属性值"/>
6. 加粗：区别：这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求；
这个标签意思是加强，表示该文本比较重要，提醒读者／终端注意。为了达到这个目的，浏览器等终端将其加粗显示；
总结：为了加粗而加粗，为了标明重点而加粗。
7.倾斜：标签告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示；
标签中的文本表示为强调的内容，对于所有浏览器的显示效果来说，是把这段文字用斜体来显示；
8.get与post的区别：get（幂等）是从服务器上获取数据，post（非幂等）是向服务器传送数据。
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
建议：
get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
9.link 和@import的区别：
link可以加载css外，@import是css提供的一种方式，也只能加载css；
link引用的css会和页面同时加载，@import会等页面全部下载完成后再被加载
@import存在兼容问题，低版本浏览器不识别。
link可以控制dom元素，@import不是dom可以控制的。
10. 伪类和伪元素：伪类（单引号）代表某一刻的状态：：after等
伪元素（双引号）是指元素中特别的内容：(:：last-child）等
a标签中顺序：：link（默认） ：visited（鼠标访问后） ：hover （鼠标滑过） :active （访问时）
11.css层叠：元素的样式根据它样式所占权重的大小进行渲染（元素是1，类是10，id是100，伪类是1，伪元素是10）
包含块：包含块（Containing Block）是绝对定位的基础，包含块为绝对定位元素提供坐标，偏移量和显示范围的参照物，定义元素为包含块，给绝对定位元素的父元素添加position：relative,即父元素就是一个包含块
12.font：加粗（bolder normal 100~500） 倾斜（italic oblique normal）字体/行高 "宋体"
13.word-spcing:词间距（单词与单词之间的间隔）
letter-spacing:控制英文字母和汉字的字距
border:double dotted dashed
background-attachment:fixed：背景图固定，相对浏览器
14.层级选择器：子级选择器，兄弟选择器，通用兄弟选择器
15.给子元素设置外边距时:会默认加到父元素上
给父元素或者子元素任意一个加float
给父元素加padding或border
16.内联元素：盒模型左右支持，上下不支持，水平从左到右排列，宽高为内 容大小（span strong em i br a img（行内块） input（行内块））
块状元素： （div p li ul ol tr h1等 ）border 重叠显示
可变元素：
applet - java applet
◎ button - 按钮
◎ del - 删除文本
◎ iframe - inline frame
◎ ins - 插入的文本
◎ map - 图片区块(map)
◎ object - object对象
◎ script - 客户端脚本
17.设置float属性后，相当于给该属性加display:inline-block
18.visiblity:hidden/visible 隐藏可见，但是还是占空间
display：none 使对象完全消失，不占空间
overflow:hidden auto visible(默认) inherit scroll
19.定位：相对定位：relative（相对于自己的定位），占位
绝对定位：absolute（相对于body的定位），不占位，如果有定位的父元素，则根据父元素进行定位
固定定位：fixed（相对浏览器的窗口定位）
默认值：static
20.让一个元素始终在窗口水平 垂直位置居中：
div{width:200px;height:200px;position:fixed/absolute;left:0;top:0;right:0;bottom:0;margin:auto}
div{width:200px;height:200px;position:fixed/abolute;left:50%;top:50%;margin:-100px 0 0 -100px（自身宽高一半）};
21.ie透明度：filter:alper(opacity:50)
22.删除线：
22.white-spacing:normal（默认值，空白会被浏览器忽略）/nowrap（文本不会换行，忽略回车换行以及空格）/pre（空格回车换行会被浏览器保留，其行为方式类似html中的pre标签）/pre-wrap（保留空白符和回车换行序列，正常进行换行）/pre-line（合并空白符系列，但是保留换行符，正常进行换行）/inherit
此属性用来设置如何处理元素内的空白
23.文字溢出省略号显示： width：value;
white-spacing:nowrap;
overflow:hidden;
text-overflow:ellipsis
24.png:支持透明，高清，色彩丰富，字节大
psd：photoshop源文件格式，只能通过ps打开
gif:支持动态图片，图片质量差，字节小，不清晰，支持透明
jpg:不支持动图，不支持透明，字节小，图片清晰
25.alt+delete:填充前景色
ctrl+delete:填充背景色
26.css精灵图（sprites）利用ps将图片进行整合，然后利用background-images,background-position进行精确定位
优点:减少http请求数量，减少服务器压力，减少图片字节，提高网页加载速度
缺点：后期不好维护，做图片比较繁琐
27.ie6最小高度的写法：
hack1 min-height:value;_height：value
hack2 min-height:value;height:auto !import;height:value
28.高度塌陷解决办法：
原因：父元素没有高度，子元素浮动，父元素高度塌陷
解决办法：在浮动元素与受影响元素之间加一个空元素，给空元素清除浮动
直接给受影响的元素加浮动。
28.万能清除法：： after{content："";display:block;width:0;height:0;overflow:hidden;clear:both;}
29.去除textarea 下面的横杠：resize:none
30:浏览器内核：Trident:三叉戟 ie 360 世界之窗 腾讯
Gecko:壁虎 Mozilla Firefox（开源）
Presto:Opera Presto 渲染速度最快
Webkit safari :chrome
Blink:chrome
31.css hack三种形式：
css属性前缀法 选择器前缀法 ie条件注释法
条件注释法：这段文字只在IE显示
属性前缀法：*（6/ 7）+（6/7）-（6）_（6）#（6/7）color
color:red\9: ie6~ie10
color:red\0:ie8~ie10
color:red\9\0:ie9~ie10
选择器前缀法：*html:只对ie6生效
*+html:只对ie7生效。
32.表单高级：
标题
33.表格前后对比：
css:width:200px;height:200px;border:1px solid red;border-spacing:10px;background:red;vertical-align:top;text-align:center;
html:width="200" height="200" border="1" bordercolor="red" cellspacing="10" cellpadding="10" bgcolor="red" valign="top" align="center"
新增：border-collapse:collapse（合并边框）/separate（边框分开）加table里
empty-cells:hide（拼成不规则效果，删掉表格内容）show（显示）
table-layout:fixed（固定宽度）auto
34.BFC（块级格式化上下文）
a.上下相邻的两个盒子margin值叠加
为什么加float和display可以解决margin值重叠
为什么发生margin值重叠
b.一个元素的左边一定挨着包含块
c.BFC里面的子元素一定要参与高度计算，浮动也如此
为什么overflow可以解决高度塌陷问题。
35.产生BFC环境：
根元素（body）
float部位none
position为absolute fixed
display为inline-block table-cell table-caption flex inline-flex
overflow不为visible
36.html5新增标签：section article aside header nav footer main figure figurecaption mark canvas audio video
37.表单新增type属性
number range date month week search color email
38.
通过id和list绑定
通过id和form 绑定
novalidate加在form上，取消必填 autofocus高亮提示，可直接输入
39.
40.怪异盒模型：ie6里面width包含margin与padding的值，因为没有声明正确文档类型。boxsizing:border-box触发怪异盒模型。
41.
你好
你好
42.cursor:auto（默认） crosshair（加号） text（文本） wait（等待） help （帮助）progress（过程） inherit（继承） move（移动） no-resize（向上或向右移动） pointer（手型）
43.iframe链接：，设备信息
44.ui状态的伪类选择器
：checked
：disabled
:enabled
:read-only
:read-write
:default
45:text-shadow:水平位移 垂直位移 模糊 描边（2px 2px 1px blue,2px 3px 1px red 可叠加）
box-shadow:0 0 5px red inset（默认outset,）可叠加
border-radius:10px 10px 10px 10px （左上 右上 右下 左下）
word-break:normal（默认） break-all（从单词里换行，非中日韩换行模式） keep-all（空格或连接符换行）
46.背景新增属性：
background-origin:padding-box（默认） content-box border-box
background-clip:content-box padding-box（默认）
background-size:cover（覆盖，盒子完整，图片可能会少） contain（图片完整，盒子并未铺完
background:rgba(0,0,0,.5)
background:hsl/hsla(120,100%,60%)色调（0~360） 饱和度（百分比） 亮度（百分比）
47.优雅降级：先构建站点的完整功能，针对浏览器进行测试与修复，然后逐步针对各大浏览器进行hack，使其可以在低版本浏览器上正常浏览
渐进增强：先针对低版本浏览器进行构建页面，完成基本的功能，然后针对高级浏览器进行效果，交互，达到更好的体验
48.弹性盒子 display:flex
flex-direction:row-reverse（横着反向） column（竖着） column-reverse（竖着反向）定义主轴
justify-content:center（居中） flex-end（主轴从末尾排） flex-start（主轴从头排） space-around（左右边距一样） space-between（两边对齐 其余均分）
align-items:center（垂直居中） flex-end（居下） flex-start（顶端）
flex-wrap:wrap（换行） nowrap（不换行） wrap-reverse
align-content:flex-end（末端对齐） flex-start（从主轴开始居上） center（居中） space-between（平分）
flex:1（占比，子元素空间分配，可以写宽高，也可以不写
flex-grow:
align-self:flex-end（只对某一个元素操作，侧轴对齐方式） flex-start
display:-webkit-box ,box不认识，使旧版认识，兼容性有差别，内核
order:1（排列最后）
49.css多列：
column-count:属性规定元素应该被分隔的列数
column-gap：属性规定列之间的间隔大小
column-rule:属性设置列之间的宽度，样式和颜色规则
column-rule-color column-rule-style column-rule-width
column-fill:balance（默认值，对列进行协调，浏览器应对列长度的差异进行最小化处理）auto（自动排列，规定如何对列进行填充）
column-span:all（默认1），无其他数值，横跨列数
50.响应式布局：@media screen and (max-width:1400px) and (min-width:100px)
条件：orientation:landscape横屏 portrait:竖屏
link写法:
51.移动端布局：网格布局 悬挂式布局 百分比布局 流式布局 圣杯布局 输入框布局
em:一个字的大小，相对单位，相对于当前元素的文字大小
%：百分比 ，相对单位 相对于父元素的大小
vw:viewpoint width 相对于body 视窗宽度 视窗宽度的10% 10vw
vh:viewpoint height body高度的1%,1vh,相对单位，相对于body
rem：font-size:0.1rem;1rem等于html的font-
size大小（html的font-size px单位乘以元素的font-size rem单位大小 等于实际px）
52.屏幕分辨率：横纵方向上的像素点数，单位为px 1px 为 1个像素点
屏幕像素密度：ppi=px 屏幕上每英寸可以显示的像素数量 pixels per inch，与屏幕尺寸 屏幕分辨率有关
像素：逻辑像素和物理像素（设备像素）
物理像素：1DPR/100=1vw（px单位） iphone 6 为26.66
vw与rem合作确定等比缩放布局
font-size:100px (31.25vw)
53.背景颜色渐变：
线性渐变：background:linear-gradient(red,blue)
-wibkit-linear-gradient(left,red,blue,yellow)
background:linear-gradient(to right,red,blue)
background:linear-gradient(45deg,red,blue)
径向渐变：radial-gradient:(red,blue)
repeating-gradient:(red,blue 20%)
repeating-linear-gradient(red,yellow 10%,red 20%)
repeating-radial-gradient(red,yellow 20%)
简写：background:-webkit-gradient(linear,0,0,0,100%,from (red),to (blue));
线性，从（0，0）开始，垂直渐变
background:-webkit-gradient(linear,0,0,0,100%,color-step(0,red),color-step(0.2,blue));
54.css3过渡：transition-property:width height all (规定过渡属性)
transition-duration:1s 10ms（过渡时间）
transition-timing-function:linear（匀速，速度曲线）
transition-delay:1s(等待时间)
transition:all 2s linear 2s
55.transform
transform:translateX translateY translate
transform:rotate(180deg)
transform:scale(倍数) scaleX scaleY
transform:skewX(90deg)
56.字体渐变：
font-size:60px;background-image:repeating-linear-gradient(red 10%,blue 20%);color:transparent(透明)；-webkit-background-clip:text(背景只能文字显示)
57.box-sizing:border-box(边框与padding等计算在里面，padding会撑开盒子)
58.3D旋转：transform;rotateX(360deg);transform:rotateY(360deg)顺时针默认
3D景深：perspective:200px;(向前伸展，观察角度)
perspective-origin:top left(观察距离)
transform-origin:bottom top(旋转基点)
transform-style:preserve-3d（父元素上允许子元素保留3D属性）flat(子元素不保留3D属性)
59.css动画：animation
@keyframes name(更改){
from {width:200px}
to{width:400px}
}
@keyframes name{
0%{width:10px ;background:red}}
然后css中引入动画名称：animation-name:
animation-duration:2s
animation-timing-function:linear;
animation-iteration-count:2;
animation-direction:alternate
animation-play-state:paused(动画播放时状态与hover连用)
animation-fill-mode:forwards(动画结束时保留最后一帧效果)
backwards（动画播放之前展示第一帧效果）
翻转时背景图片消失：backface-visibility:hidden(从而显示另外一张压在上面的图片)
60.
61.iframe标签通过scrolling:no去掉滚动条
62.ie6中，如果将某一个div的高度设置为3像素。=，需要添加font-size:0
63.清除浮动的方法：在浮动元素下添加div
优点：代码少，浏览器支持好
缺点：如果页面浮动布局多，就要多增加div
给父元素添加overflow:hidden
优点：简单，代码少
缺点：不能和position配合使用
万能清除法：：after{content="" overflow:hidden;height:0;clear:both'visibility:hidden;display:block}
64.vertical-align用法：必须给父元素加text-align:center;
当前元素：display:inline-block;vertical-align:middle
当前元素后：
span{vertical0-align:middle;width:0;height:100%;display:inline-block}
65.内联元素与块状元素的区别：
块状元素在网页中就是以块的形式显示块状即显示为矩形区域
默认情况下，块状元素将会占据一行，两个相邻的块状元素不会出现并列显示的现象，默认情况下，块状元素会自上向下排列
块状元素可以设置自己的宽度和高度
块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素。
66.标准盒模型和怪异盒模型：
标准：content+border+padding 实现：box-sizing:content-box
怪异：content 实现：box-sizing:border-box
67.响应式布局：
设计特点：面对不同分辨率设备灵活性强
能够快速解决多显示设备问题