html+css+javascript学习总结

html用来写页面的结构和内容，css写样式和呈现效果，javascript写行为和动作

1.html常用标签
a 超链接
div 盒子，常用来控制样式的
ul，ol 无序列表和有序列表
img 图片标签
button 按钮
form 表单
input 输入框标签，type属性不同，功能也不同。例如：text文本输入框，button按钮，submit提交按钮，checkbox复选框，radio单选按钮，password密码输入框
label 定义 input 元素的标注。

2.css
2.1.常用选择器
class属性选择器 .class属性名
id选择器 #id名
标签选择器 标签名
选择下级元素用空格隔开，同级元素用逗号’,'隔开。
选择子元素中指定的第几个用nth-child，例: div:nth-child(2),选择div元素下的第二个子元素
2.2.常用属性
background 设置背景相关属性
color 设置元素中文字颜色
font 设置字体相关元素
text-indent 设置首行缩进
text-align 设置元素对其方式
text-decoration 设置a元素的下划线
line-height 设置文字行高
list-style:none 取消列表前面默认的数字或小圆点
a:hove hove属性设置当鼠标移动到元素上时显示的样式
margin 设置元素的外边距
padding 设置元素的内边距
border 设置元素边框
border-radius 设置圆角
outline 设置元素被选中时的边框
transition 设置动画
transform 设置动画属性，这个属性要和transition配合使用，例如rotate(90deg)旋转90度，translate(20px,20px)元素在x轴移动20像素在y轴移动20像素
animation 使用这个动画要先用@keyframes定义
2.3.浮动相关
float 设置浮动，left左浮动，right右浮动
.clearfix:after,.clearfix:before{ content: “”;display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动或者解决塌陷问题
overflow:hidden 设置当元素超出父元素时的显示模式，hidden为隐藏，scroll显示滚动条，auto如果超出则自动显示滚动条
2.4.移动端布局
移动端布局首先要用下列方式在html头部声明视口问题,（在sublime text3编辑器里输入 meta:vp再按tab键即可出来）

用rem可以解决移动端缩放的问题，其原理是把文档内元素的尺寸换算成基于html根标签定义的font-size尺寸，随着屏幕尺寸的变化改变根标签的font-size尺寸就可改变文档整体的尺寸。
2.4.1 首先在文档里加入以下javascript代码

(function(){
var calc = function(){
var docElement = document.documentElement;
var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
docElement.style.fontSize = 20*(clientWidthValue/375) + ‘px’;
}
calc();
window.addEventListener(‘resize’,calc);
})();
2.4.2
然后把文档里所有元素的尺寸换算成rem就好。例如：200px等于200/40=5rem。为什么要除以40而不是20，是因为要解决移动端视网膜屏（retina屏）的问题

3.JavaScript
3.1 JavaScript用来处理页面的一些行为和动作，常用函数。
window.οnlοad=function(){}; 当文档加载完后要执行的函数
document.getElementById(‘box’); 获取文档中id为box的元素
元素.οnclick=function(){}; 当鼠标点击某个元素时触发的事件。
javascript内容太多，请参看https://www.runoob.com/js/js-tutorial.html