为什么是随笔

好好算下来,学习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. 用c#创建支持多语言的WinForm应用程序

    实现多语言的方法可能有使用资源文件,或者配置xml两种方法吧.没时间研究过多,学习了一下使用资源文件的方法,成功了. 在.net2.0 中,m$ 为我们提供了一种简单方便的方法, 使用资源文件 1.新 ...

  2. ICollection

    ICollection 接口是 System.Collections 命名空间中类的基接口.ICollection 接口扩展 IEnumerable:IDictionary 和 IList 则是扩展 ...

  3. ASP.NET Core 1.0中的管道-中间件模式

    ASP.NET Core 1.0借鉴了Katana项目的管道设计(Pipeline).日志记录.用户认证.MVC等模块都以中间件(Middleware)的方式注册在管道中.显而易见这样的设计非常松耦合 ...

  4. HTML和CSS经典布局4

    如下图: 需求: 1. 如图 2. 可以从body标签开始. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xht ...

  5. 配置NHibernate将枚举保存为Oracle数据库中的字符串

    假设有这样一个枚举: /// <summary> /// 字典项类型 /// </summary> public enum DicItemType { [EnumDescrip ...

  6. Mint linux 自定义上下文菜单实现ZIP压缩文件无乱码解压

    1. 前提条件 我的Mint Linux 是Thunar文件管理器(默认的). 2. 配置自定义动作 打开Thunar文件管理器,点击菜单“编辑”=>“配置自定义动作”.点击“+”添加一个新的. ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (24) ------ 第五章 加载实体和导航属性之查询内存对象

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-4  查询内存对象 问题 你想使用模型中的实体对象,如果他们已经加载到上下文中, ...

  8. Java动态编译

    程序产生过程 下图展示了从源代码到可运行程序的过程,正常情况下先编译(明文源码到字节码),后执行(JVM加载字节码,获得类模板,实例化,方法使用).本文来探索下当程序已经开始执行,但在.class甚至 ...

  9. Android笔记——提升ListView的运行效率

    之所以说 ListView 这个控件很难用,就是因为它有很多的细节可以优化,其中运行效率就是很重要的一点.目前我们ListView 的运行效率是很低的,因为在 FruitAdapter 的getVie ...

  10. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...