web前端学习随笔
为什么是随笔
好好算下来,学习web前端已有半个月了,这半个月来主要学习的是HTML和CSS部分,期间有困惑,也有解决困惑时的快感,所以想把这段时间感受到的一些东西记下来,因为内容比较杂,所以干脆叫随笔吧。这里面不会说前端的相关基础知识,只是说一些自己对前端的一些认识。
- html是用来控制页面结构的
我曾经对这句话有过疑问,觉得html应该是控制页面内容的,为什么要说是控制页面结构的呢?在查看京东首页的代码时,我恍然大悟,html确实是定义页面内容的,但同时它也要控制页面的结构。举例来说,京东商品分类的div包含了顶部的dt,还包含了下面的细分目录dd,如果只是想呈现页面内容的话,其实完全不必这么做,但从现实的业务逻辑上来讲,div确实应该包含这两部分,这就是html控制页面结构的一个例子。


- 时刻关注元素的样式和他们在文档流中的位置
乍看起来,这好像很容易,但在编程过程中,如果头脑没有时刻保持这个意识,会很容易迷失,写代码写到一半,忘了布局,或忘了样式是加到哪个元素上了。另一方面,为了减少这种情况,应该适当的加一些注释,选择器的名字应更好识别。 - 合理利用div
虽然html是语义化的标记语言,但目前html提供的标签还不能充分提供各种语义,div是很好的一个替代方案,充分的利用div划分语义单元,同时不能过度使用div,这样才能写出语义清晰,代码简洁的页面。 - 选择器的使用
如果想给元素添加样式,通常要用到选择器,但注意不要把过度的描述选择器,举个例子,如果我们给一个div(class=“box”)加一个边框,可以直接写.box,尽量不要写div.outer div.inner div.box,这样只会增加样式的特殊性,同时不会带来什么好处,如果我们想给.box里面的div再加边框,就得再加上前面那一串选择器,这只会让代码冗余,并且子元素不好覆盖样式。 了解一些常见的bug
代码没有问题,可显示效果就是不对,相信每个前端同学都有过这种经历,找了半天发现原来是浏览器的bug,这绝对增大了程序猿的心理阴影面积。为了保护自己的玻璃心,建议多了解一些bug。共勉
自己刚刚踏入前端这条路,还没坚持过什么事情,这次我要坚持下去!
web前端学习随笔的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 立方体旋转 【web前端学习部落22群120342833】
效果: HTML部分: <body class="body"> <div class="rect-wrap"> <!-- // ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- 2015 WEB前端学习路线图
2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- WebP 原理和 Android 支持现状介绍(转)
本文为腾讯Bugly开发者社区 投稿,作者:soonlai,版权归原作者所有,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/582939577ef9c5b70855 ...
- mysql之触发器trigger
触发器(trigger):监视某种情况,并触发某种操作. 触发器创建语法四要素:1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/befo ...
- 参加MVP OpenDay 和2015 MVP Community Camp社区大课堂
微软MVP Openday 1月30日在北京召开,到时全国上百位 MVP 专家将齐聚北京.当然还有亚太的其他国家地区的MVP 也会来北京,1月31日微软 MVP 项目组主办的年度微软技术社区分享大会- ...
- Improve Your Study Habits
1.Plan your time carefully. Make a list of your weekly tasks.Then make a schedule or chart of your t ...
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
- ASP.NET MVC 从零开始 - 请求处理
这篇文章是从我的 github 博客 lxconan.github.io 导入的. 这是这个系列的第三篇了.前两篇文章请参见: ASP.NET MVC 从零开始 - Create and Run AS ...
- spring快速入门(四)
一.在spring快速入门(三)的基础上,我们来了解BeanFactory及配置. Client package com.murong.client; import org.springframewo ...
- Hibernate框架搭建实例
一,Hibernate是一个持久层,是一个专门负责管理数据库连接的框架: 二,Hibernate的搭建实例: 1.在Hibernate的官方网站(http://www.hibernate.org)可以 ...
- android 画虚线,虚线圆
Paint paint = new Paint(); paint.setAntiAlias(true); paint.setStyle(Paint.Style.STROKE); paint.set ...
- javascript 学习笔记
本文主要记录在学习过程中遇到的JavaScript难点或者容易疏忽的细节,也方便自己日后翻阅学习. 1.arr.length === + arr.length arr.length === + arr ...