一、 HTML基础
1. Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
2. 框架
<frameset cols="25%,50%,25%">//垂直框架
//rows="25%,50%,25%"水平框架
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
3. http://www.w3school.com.cn/html/html_quick.aspHTML快速参考手册
4. XHTML 是以 XML 格式编写的 HTML
XHTML 指的是可扩展超文本标记语言
XHTML 是更严格更纯净的 HTML 版本
5. HTML 被设计用来显示数据
XML 被设计用来传输和存储数据
6.
二、 CSS基础
1.
2.
3. CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
4. outline 轮廓 在border外面 突出元素
5. 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并 后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
三、 CSS测验
1. css Cascading Style Sheets 层叠样式表
2. p {text-transform: uppercase}//全部大写
p {text-transform: lowercase}//全部小写
p {text-transform: capitalize}//每个单词首字母大写
四、 CSS响应式设计
1. viewport 视区 用户网页的可视区域
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 网格视图
确保边距和边框包含在元素的宽度和高度间
* {
box-sizing: border-box;
}
3. 媒体查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式
五、 zoom
1.vscode的css样式写颜色时，用vs color picker插件比较方便。
2.css样式优先级：id>class
3. zoom这个属性是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性，但是在webkit内核浏览器中zoom这个属性也是可以被支持的。
六、 二级菜单的边框问题
方法：
一级菜单：title下移1px，背景设置为白色
下移：position:relative; top:1px;
二级菜单：设置title的width=li的width+2(border) 背景设置为白色
设置z-index:2 如果另z-index起作用，需设置其position
七、 图片展示
a. 图片上下有空白
原因：图片是相对于基线对齐的
解决办法：
设置图片的 vertical-align: bottom;（将图像底部与行框底部对齐，行框底部就是这一行的最底部）
对图片使用 float（float的定义是元素紧挨元素，所以不会出现缝隙）
指定图片的 display: block; (垂直文本对齐属性 vertical-align 只适用于行内或者替换元素，display改变了元素的显示，实际上并不是只有block才会这样，只要不是带有inline的都不会出现缝隙，这样做的目的就是使图像成为块级元素，这样图像就不会生成行框，也就不会是相对于基线对齐，所以也不会有基线下面的缝隙)(《CSS 权威指南》第三版第203页)
指定父元素 font-size: 0; （实际上font-size并不是你看到的字体大小，而是用于设置字体的em框，它指定了如果没有额外行间距的情况下，字体基线间的距离）
指定父元素 line-height: 0; (line-height 指定了基线之间的最小距离，font-size是指定没有额外行间距时的基线距离，此处的额外行间距就是line-height来指定)
rowspan="3" 跨3行
colspan="3" 跨3列
style="border-collapse:collapse" table边框变细
图片排列可以用浮动或table
八、 延时提示框
window.onload=function(){
var odiv1=document.getElementById('div1');
var odiv2=document.getElementById('div2');
var timer=null;
odiv1.onmouseover=odiv2.onmouseover=function(){
odiv2.style.display='block';
clearTimeout(timer);
}
odiv1.onmouseout=odiv2.onmouseout=function(){
timer=setTimeout(function() {
odiv2.style.display='none';
}, 300);
}
}
九、 无缝滚动
布局：div包裹ul div宽度固定且overflow:hidden 滚动是ul的位置在改变
<div class="roll" id="roll">
<a href="javascript:void(0);" class="btn btn_left"></a>
<a href="javascript:void(0);" class="btn btn_right"></a>
<div class="wrap">
<ul>
<li><a href="#"><img src="img/1.jpg" alt=""></a></li>
<li><a href="#"><img src="img/2.jpg" alt=""></a></li>
<li><a href="#"><img src="img/3.jpg" alt=""></a></li>
<li><a href="#"><img src="img/4.jpg" alt=""></a></li>
</ul>
</div>
</div>
li的内容应该复制一倍 ul的长度在js在计算
oul.innerHTML+=oul.innerHTML;
oul.style.width=ali[0].offsetWidth*ali.length+'px';
向左减 向右加 到达转折点时进行判断并改变方向
timer=setInterval(function(){
//向左减 向右加
oul.style.left=oul.offsetLeft+ispeed+'px';
if(oul.offsetLeft<-oul.offsetWidth/2){
oul.style.left='0px';
}
else if(oul.offsetLeft>0){
oul.style.left=-oul.offsetWidth/2+'px';
}
},30);
点击方向按钮 改变速度正负
abtn[0].onmouseover=function(){
ispeed=-5;
}
abtn[1].onmouseover=function(){
ispeed=5;
}
鼠标移入清除定时器 移出开启
十、 clientWidth
oDiv.style.width 只能获取行间样式的宽 获得的结果带单位
oDiv.clientWidth 可视区的宽 包括padding，不包括border，不包滚动条，不带单位
oDiv.offsetWidth 实际的宽包括padding和border包滚动条，不包括margin 不带单位
oDiv.scrollWidth 实际内容的宽度，不包边线宽度，随对象中内容超过可视区后变大
oDiv.offsetLeft 在ie中距文档左边的距离 只读 在其他浏览器中是父辈中有定位的元素或body的左边缘的距离
oDiv.scrollLeft 假如你的页面太大，浏览器的宽度不够，就会出现滚动条。一开始scrollLeft的值为0，你就看到了你的页面最左边的内容。而不显示超过浏览器的那部分，当你向右拖动滚动条时，scrollLeft的值在增大，你就看到了右边因隐藏的东西，而看不到左边隐藏的部分。他就会从scrollLeft的位置开始显示，而不显示0-scrollLeft的元素内容。
document.body.clientTop
document.body.scrollTop
document.body.scrollWidth
var oEvent=ev||event;
oEvent.clientY