黑马程序员技术交流社区

标题: 前端学习随笔 [打印本页]

作者: 李大哥 时间: 2020-2-23 16:22
标题: 前端学习随笔
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。

作者: 流浪的猫~ 时间: 2020-3-1 19:35
没有伞的孩子必须努力奔跑，加油

作者: 大雄的竹蜻蜓 时间: 2020-3-1 20:19
世上无难事只怕有心人

作者: 25个蛋 时间: 2020-3-1 21:06
纵使天空没有翅膀也不要忘记飞翔

作者: 抓住青春的尾巴 时间: 2020-3-2 09:58
乌云再密集，天也有放晴的时候;海洋再广阔，船也有到岸的时候。只要用乐观的心态来看待事物，面对生活，就会发现这个世界真的好美。

作者: 空白格。 时间: 2020-3-2 10:56
不要感叹人生苦短。拾起梦想的种子，用一生的时间去播种，在最后一刻去收获。你会发现，你的一生，其实很精彩很充实！

作者: 情非得已。 时间: 2020-3-2 13:00
青年是人生的骄傲，也是时代未来的希望。

作者: 简单77777 时间: 2020-3-2 13:25
收拾一下心情，开始下一个新的开始。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2