前端知识问答整理

本文主要整理一些我回答别人的前端问题……

如何写博客文章

答:可以学习下这篇文章:http://blog.jobbole.com/91942/ 。“写”的套路。
最开始初学前端时候写的:http://xuxun.me/blog/2012/03/word-press-problems-met-solved/ 。这是我写的第一篇技术文…………现在看特别low
其实很简单,就是记录一下自己学到了什么知识点。第一步做到这个就可以了。
然后写博客的好处就是,如果有别人看到你的博客,如果他们同样感兴趣,并且看到你文章中的不足,会帮你指正出来。这一个交流的过程就是一个很棒的学习过程。
第一步如果说是你学到的 what,那么接下来就尝试写写 how,甚至 why。知其然,知其所以然。在这个过程中你会发现你为了记录一个问题,会学习到更多相关的知识。这样你会发现你进步速度会有质变。

JavaScript 新手问题

A:知道思路就是不知道用代码怎么写。
B:举个例子?
A:就是简单的都不会:(

答:https://freecodecamp.cn/challenges/learn-how-script-tags-and-document-ready-work。我觉得你可以试试这个。由浅入深教你怎么写前端,通过一个个demo,从基础教起。我觉得光看视频还是不够的,还是要自己多写,多积累写的经验,多遇到难题然后想办法解决。

 

对于 > 750 设备宽度,设置 rem 作为字体单位;
对于 小于 750 设备宽度,设置 px 作为字体单位。

问:为什么是大于750用rem啊,不是小于750用rem么,我是新手。麻烦讲一下,我做的手机端的都是用rem啊。小屏幕的……

答:布局之类的用 rem 没问题的~
主要问题出在文字上,开发时候遇到一些问题。
当小屏的时候使用 rem 可能会导致文字过小,而用 px 可以保证文字显示正常.
但是 px 对于大屏幕就不友好了,屏幕大的时候使用 px 因为字体不会随屏幕放大,所以在超大屏幕上可能会使得页面文字有些空。
大致是以上这个情况 -。-

地址:http://www.ruanyifeng.com/blog/2017/05/css-variables.html

CSS 样式失效?

问:
但是 方框二 跟 方框三 咋效果一样呢?
我没查出来,难道它是默认 p 段落吗?

答:

首先,如果说效果一样的话,含义就是指,最终应用到元素上的 css 是一样的
如果说结构不同的话,那么有可能就是 p 元素的默认样式和浏览器对 body 元素的默认css样式是一样的
因为上面一个方框内容,实际上 Click here for 是 body 的子元素
over

md 与 html

好好理解一下每个标签的语义还是很有必要的
所以 md 其实也可以理解为另一种形式的 html
往深里说,这个就涉及到浏览器的渲染原理
简单来说,不管html还是md,对于开发者来说,都只是一种标记而已
不同的是他们的目的。 md 是为了出于写作方便而生

html 是浏览器能直接识别的语言
md 是对 html 的一层封装

前端开发经验札记

最后更新:2014年5月1日1:57:33

作者: 徐迅 (清风迅来 XX)

真正从事Web前端开发有一年多了,而接触前端最早可以追溯至小学时候电脑课上的网页制作,那个时候还在使用Front Page(我才不会说那个时候自己设计的网页巨丑…);后来一直到大学才“重拾旧业”:大二曾帮老师做过课程介绍网站,使用的仍然是DreamWeaver,并开始搭建 xuxun.me ;大三拥抱notepad++和zen-coding,开始折腾JavaEE的项目;大四毕业设计又回归PHP,偶尔接触了Python;工作以后爱上sublime text 2、less和coffee script,在C#坑中渐行渐远。

希望这篇文章能一直更新下去吧.

加油XX,奔跑在大前端之路上吧!

一、前端语言基础

(一)HTML

     1 标签语义化:使用合适标签,少使用无语义标签
     2 使用 <!DOCTYPE html> 既可以向前兼容,又体现了你网站的高大上!
     3

(二)CSS

     1 选择一款合适的CSS预处理语言(个人比较喜欢Less),大大提升CSS编写效率
     2 通用的样式提取成 .class 或者 less 中的 mixin() {} 更佳
     3 多使用限定度高的选择器, 例如 > + , 尽量避免后代选择器过度使用
     4 多用组合少用继承,减少耦合
     5 选择器权重222原则(XX自创……): 选择器权重不超过222,即最多2个id,2个class和2个tag……
     6 CSS伪类是个神器,例如使用:hover、:after等伪类可以替代JS实现不少效果

(三)JavaScript

     1 JS我是渣.

二、前端框架基础

(一) Bootstrap

     1 Bootstrap 的less 代码质量好,价值高,推荐学习

(二)JQuery Mobile

     1 深坑,慎入

三、前端杂七杂八

     1 适当了解浏览器的渲染机制,避免代码性能过低
     2 替换 .class 优于 替换 <xx style=”xx:xx;” ></xx>
     3 图片记得压缩, jpegtran 是个不错的jpg图片无损压缩工具

四、前端各种坑爹

1 IE 7 不支持 console.log ,因为 IE7 根本没有 console ,所以当你使用 IE 7 运行有 console.log 的页面你会悲剧..
2

 

徐迅 / 清风迅来

XX   / Dalston Xu

Google

【前端】table中使用colgroup应用样式在HTML5文档标准下的问题

近日,在做一个页面的时候,需要对一个表格的某几列添加一些样式,理所当然地想到了一个标签: colgroup。于是乎打算先在w3cschool上DIY下看看效果,结果发现被坑爹了……

 

colgroup样例代码的显示就出问题了

以上的代码我还没有对其修改,结果显而易见,colgroup里的style:color 属性失效了……  同时,就连 align 属性也跪了..

当时的开发需求是需要对N个网页里的表格模板进行样式修改,所以总不见得把每一个模板的table的那些行都手工添加上一个class吧 T_T..

在网上找了下原因,结果在  Table columns  这篇文章里,发现了一些相关的介绍,大致意思是:原先在HTML4的时候确实是可以对colgroup应用样式的,但是到了HTML5里:

“很不幸,W3C声明中,只有一部分的样式属性可以应用到column上(border,background,width和visibility)。例外: IE7 及更低版本”

这份介绍看得我真是菊花甚痛…… 我于是用ie浏览器去测试了一下,结果确实如此:从IE8一直到IE10,都无法显示colgroup的样式,但是到了IE7就瞬间亮瞎……

IE7下colgroup的属性正常应用样式

IE7下colgroup的属性能够正常应用样式..

以上的问题在 w3.org 的wiki上也有提及,确实是目前仅能应用4个样式。

按照语义化来说,使用 colgroup 确实是符合标准的诶,不知道为何目前仍然没有支持。根据 stackoverflow 上面的一个问答,发现竟然已经是5年前的问题了… 有一种可能性是因为table的物理模型上,colgroup以及col是位于第二、第三层,仅高于最底层的table,而tr,td,th等都位于最高层,会覆盖底层的样式?(可是也尝试给colgroup加了id以增加,不过也没有效果)

于是乎,回过头来看自己项目本身的需求,也只是需要修改下字体的对齐方式(居左改为居中),所以兼容性的要求相对也不是很高,决定使用 css 3 的 选择器。所以稍作权衡,就决定用css3选择器 :nth-child(n)

———————————————–

不过实际上,当我看到后台模板编辑里的某个东东的时候… 瞬间就手贱了……

富文本编辑器的text-align

妥妥地偷懒使用富文本编辑器的对齐功能了…… (不过实际上没偷懒多少吧… 还是要一个个跑到模板里去改…… ORZ….

 

徐迅
Dalston
2013年11月25日20:57:53