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。
时间: 2024-08-01 22:43:06

web前端学习随笔的相关文章

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

Web前端学习小建议

这里跟大家扯一扯学习前端的小方法,是我自己的学习方法,大家凑合看看,倒也不一定对~ 在写css前,其实html的结构要是比较合理的,这样写css也会比较顺手.在写一个网页之前,建议先琢磨几分钟,不要上来就写.多去看看别人是怎么写的,然后结合自己的项目,心中有一个大致规划.可以先把最外层轮廓写好,先不着急去写某一个具体的部分. 这里给大家分享一些css小技巧: 1.使用reset.css火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同.这种情况下,使用reset.css重置所有的基本样

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

效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- //舞台元素,设置perspective,让其子元素获得透视效果. --> <div class="container">    <!-- //容器,设置transform-style: preserve-3d,让其子元素在3D空间呈现 --> <div c

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

web前端学习的基础知识1

Web前端是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.目前看来,这个一个就业前景很大的职业. web前端的学习不能一蹴而就,也不是那么轻而易举就能够学会的,需要我们慢慢的去学习,去理解. 今天,给大家说的就是一些web前端学习中的一些基础知识. web前端中使用的语言不是我们人与人之间进行交流的语言,而是计算机语言.计算机的语言有很多种:C.PHP.Rudy.Java.C#.Basic.JS.....这里主要

web前端学习的基础知识2

今天给大家分享的是web前端学习中的变量和数据类型的数据. 数据类型其实就是指对数据的分类. C#语言中的数据类型有一下几种常见的数据类型:1.char(字符类型):单个字符(汉字.字母.数字.标点符号):用成对英文单引号表示. 2.string(字符串类型):不限数量的文字:用英文双引号表示 3.int(整数类型):用于表示一个整数:直接书写 4.double(小数类型):用于表示小数点的数字 变量:一块存储数据的空间,并且该内存区域的数据内容可以变化 在代码中使用变量,必须先声明后赋值.声明

Web前端学习第二篇

今天看到了一篇写的不错的文章,是有关对JQuery.js等一些源代码初识的内容,感觉写的还是不错,所以拿过来分享一下. 文章的地址:http://my249645546.iteye.com/blog/1716629 1.对(function(){})(); 几乎所有的开源js代码开篇都是这样(function(……){……})(……); 下面是Jquery的部分源码: (function( window, undefined ) { var jQuery = function( selector