html
html的标签有很多，我感觉对于我而言记住这么多标签，可能性是比较低的。记住那些常用的应该就够了，毕竟后期开发项目的时候应该不可能从一个个最基本的标签开始写起，应该是使用的模板类型的ui框架，但如果在其基础上做细微的修改，应该也要有能力做到。
html其实没什么好总结的，写了也有一些页面了，写的一个过程就是
构思 （整个页面分成几个部分，几个模块）-------选择相应的标签-------写内容-------写样式-------打开浏览器f12不断微调-------完成
说几个技术点：
- 盒子模型，一开始接触到的div，要会使用padding、margin，还有几个布局的方式，比如float，position:absolute/relative/fixed/static，这里面要理清盒子 上下层级之间的关系。
- 要让两个块级标签处于同一行，有几个方法
（1）.
<style>
.item-left{
float:left
}
.item-right{
float:left/right
}
</style>
<div class="item">
<div class="item-left"></div>
<div class="item-right"></div>
</div>
（2）. 还是上述一样的布局，将item-left都设置成display:inline-block，这样他们俩既拥有了块级标签的宽、高属性，有用于了行级标签的特性。
（3）. 还有一个方法，就是弹性盒子，这个是做页面适配不同分辨设备的时候会用的，当然现在也可以用，在item这个父元素上写display=flex就行了，两个子元素就处于同一行了。
还有别的暂时没有去想，这些应该够用了，这是用于块级元素默认独占一行的情况的，行级元素本来就不会独占一行，所以行级元素就不需要考虑怎么排布在同一行，区分好哪些是行级哪些是块级，如果按照以上的方法还莫名其妙的没有处于同一行，比如说使用了float,那么可能是同一行容不下那些元素。
3.垂直居中的几种方法，水平居中的就不说了，常常头疼的不是水平怎么居中，毕竟text-align:center;margin:auto可以解决大部分问题。
（1）.
这些关键的点要写上去
<!--这是父元素，宽高就不写了 -->
.items{
position: relative;
}
<!--这是子元素，宽高就不写了 -->
.item{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
}
<body>
<div class="items">
<div class="item"></div>
</div>
</body>
（2）.写一下父元素就行了
.items{
display: table-cell;
vertical-align: middle;
}
（3）.
你如果只是想垂直居中，而不需要跑到整个父元素的中心位置去，也就是你只是想垂直而不想水平居中，你可以将left=0；
.items{
position:relative;
}
.item{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
4.这个弹性盒子的布局还是蛮好的，简单、效果也不错。
.items{
display: flex;
justify-content: center;
align-items: center;
}
4.还有form表单要会写，这个应该不难，以后注册、登录页面可能会需要写到，label标签和input标签搭配好就行，不要忘记input中间的属性需要写上name，以后会用于后台的数据的获取。
5.rem单位，现在初学期间都是写的px（像素）单位，以后如果要为了移动端也能响应式地浏览原本网页端的页面，就需要用到rem单位，动态的根据用户的设备来改变页面的尺寸。这个我目前是用js代码做的,他会监听页面的尺寸变化，从而触发事件。
<script type="text/javascript">
!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;
r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");
if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");
a.appendChild(r),d.write(a.innerHTML),a=null}n(),
o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),
"complete"===d.readyState?d.body.style.fontSize="16px":
d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}
(750,992);
</script>
6.flex布局要学好，特别是align-items:center/flex-start;justify-content:space-between/space-around前者交叉轴方向的布局（默认flex布局是沿着水平轴的，所以默认的交叉轴就是垂直方向），后者是水平方向的布局，这个在排列一系列小图标的时候蛮便捷的，这些都是写在父元素上的。
7，h5的几个新特性，说了localstorage，相较于cookie大一些，在2.5M—10.0M之间，比cookie更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。
数据以键/值对存在, web网页的数据只允许该网页访问使用。
- localstorage.setItem(K,V):存数据，接收两个参数，要求都是字符串，如果不是字符串，也会自动转化为字符串。如果存入的是对象，则需要
localstorage.setItem("person",JSON.stringfiy({name:"zhangsan",age:18})) - localstorage.getItem(K):取数据，如果要取回一个对象类型的数据，则
JSON.parse(localstorage.setItem("person")) - localstorage.removeItem(K):清除该键值对
- localstorage.clear():清除所有保存的数据
- localstorage.key(index):获取相应索引的key值
8，至于还有什么indexDB，canvas，map地图，视频video，音频auido,移动端事件touch等等就不说了，太多了，只能说需要用到的时候再查阅吧，写个小demo尝试尝试这些api，相信自己可以的，应该也能够快速上手。还有几个文字溢出省略的样式就不说了。
CSS部分
基础的CSS倒没什么难的，CSS3的话我也就掌握了几个过渡transition、animation动画、transform变形、box-shadow盒子阴影、liner-gradient线性渐变，感觉平时用的话够用了。做了几个案例，写了几个页面，感觉以后写页面的时候如果模块比较多的话，最好不要将css的样式写在一个文件中，这样维护起来不好维护，问题不便于排除，结构不清晰。最好分几张css层叠样式表写吧。
现在写个页面，什么商城的首页，如果还是像一开始学的时候，从最基础的一个个标签写起的话，效率真的太低，两天可能都只能刚好完成。所以我准备尝试着用框架来做做看，bootstrap建议大家可以去看看，感觉后面出来的很多模板类型的前端框架都是基于bootstrap做了更多的完善，Leyui的样式还不错，小伙伴们可以去试着学一学。
暂时也就总结了这么多，总的来说:写页面之前要将层次分好，模块划分好再开始写，写起来无非也就这边调调那边调调，谈不上多难，单纯的慢慢码，是个苦力活，哈哈。
接下来我会陆续总结：Js、JQuery、Bootstrap、Vue，前端貌似就这么多了吧，多写几个案例就好了，综合起来就会慢慢熟练。好的，HTML以及CSS的总结就到这边。
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
