为什么是随笔

好好算下来,学习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前端学习随笔的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  3. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  4. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  5. 立方体旋转 【web前端学习部落22群120342833】

    效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- // ...

  6. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. 2015 WEB前端学习路线图

    2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨

  9. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. android——数据库版本升/降级问题

    数据库版本升级 在开发android应用程序的时候,一般由于在我们开发的时候我们不知道以后会后什么新功能,也有可能增加业务逻辑(也就是更新),可想而知我们原来的数据库结构可能不适用已更新的应用,那么应 ...

  2. java 心得

    11. 最后的笑声 package javaBookPractice; public class LastLaugh { public static void main(String[] args) ...

  3. Visual Studio 2015 各版本对比及下载地址

    2015年7月20日23时30分,微软举行了Visual Studio 2015的发布会,跟随者Visual Studio 2015 而来的是,.net 开源,C#支持wp,ios,android三大 ...

  4. C++大会感悟

    写在前面: 我是一名学生,在北邮读研,也是跨专业学的计算机,个人对服务器端编程感兴趣,平时主用c/c++,所以逮到这次机会就参加了这次大会. 先附几张合影: 正文: 这次参加c++大会也算是我最认真的 ...

  5. 第一章-第十四题(Hello world程序)

    题目:请找一个同学结对 (参看本书结对编程的内容),两人共同工作 (不能分开干活),从上面的列表中选取两个平台,在每个平台上,写一个最简单的 "Hello World" 类型的程序 ...

  6. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  7. 使用JDBC的批处理功能

    package cn.itcast.jdbc; import java.sql.Connection; import java.sql.Date; import java.sql.PreparedSt ...

  8. Linux RAID卡优化

    200 ? "200px" : this.width)!important;} --> 介绍 我们的生产服务器经常会做raid存储,但是单单做了raid就能保证性能高效和数据 ...

  9. Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图 ...

  10. [公告][重要]Senparc.Weixin v4.9.0 & Senparc.Weixin.MP v14.3.104更新说明

    本次升级除了更新了发红包接口等接口之外,最重要的是重构了缓存模块. 如何升级? 之前的缓存是为Container设计的,原先的ContainerCacheStrategy继承自BaseCacheStr ...