HTML 语言 和 CSS | 天一阁

HTML 语言 和 CSS

HTML、CSS、Javascript是目前Web开发最最基础的三项技能,而我刚好不太懂这些,不懂就学,学了再忘,忘了再学。至上是15年前就接触过HTML,如果当时一直学下来,可能现在我也是前端技术大拿了 :)

HTML

HTML是互联网的基础之一,千百万的网页都需要用HTML来承载。

HTML特点就是通过Tag,标记一段内容,纯文本形式,可以跨平台。其实他主要的标签就那么几种:

HTML Head Body Div P A Img Span H1~H6 Ul Li Form Input Button

网页主要是用来传递信息,网页上的信息主要是标题、段落、图片、链接、列表、表格,对于需要用户输入信息的时候还需要表单,表单里面还会包括输入框、按钮、复选框、下拉框等等。通过各种链接的方式,利用HTTP协议,就可以把很多的网页链接在一起,就形成了有意义、有功能的网站,现在叫Web Application。

HTML和Text的区别在哪?一个是链接,能够连接,大家才叫互联网。另外一个重要的事情就是DOM。DOM如果直译就是“文档对象模型”,这简直就不是人话,可见老外也是很喜欢搞一些让人莫名其妙的概念,来显得自己很高大上。说白了,DOM的主要作用就是能让文档具备语义,通过标记的方式,在文字内容以外,还能对这段信息多一个维度的理解。另外,DOM是树结构的,这样既方便浏览器进行解释,同时给Javascript这样的脚本语言带来了发展机会。利用DOM就可以很轻松的,找到某段信息,然后对其进行操作。

制作HTML页面,现在也叫切页面,就是把射鸡师搞出来的效果图,用一个个的方块给变成,浏览器可理解的html代码。所以HTML语言更多是表示整个页面的结构信息,结构么,无非就是规定一下谁在上面,谁在下面,谁是上级,谁是孙子。至于具体的展示方式是要靠CSS来处理的,现在那么好看的页面,基本上都是靠CSS和JS来处理的。编程领域一个颠扑不破的一个普适的原则就是“低耦合、高内聚、一个模块只干一件事”。HTML、CSS、JS的分工也很好的体现了这一点。

CSS

CSS是描述了HTML页面各个元素的展示属性,就是页面上每个元素在网页上长什么样子,比如:大小、颜色、字体等等。CSS直译叫层叠样式表,这又不是人话,什么样式表?还尼玛层叠?N多年来,我都没法很好的理解这是什么?现在看,无非就是一个描述表,描述了所有展示属性,这个是给浏览器看的,浏览器拿到这个文件,才知道HTML页面怎么展示给用户。

CSS能够操控HTML元素的长相,是通过一种叫做Selector(选择器)的机制,定位HTML元素的。选择器可以是一个HTML标签、或者class(某一类HTML标签)、或者是id(某一个特定id的HTML标签),通过在DOM中查询,就可以规定这个DOM节点的颜色、字体、margin、padding等等,这些属性叫样式。所谓层叠就是说,父节点的样式会继承给儿子节点,同时儿子还可以长出个性化的节点。最终某个文字或图片的长相,是一层一层的样式叠加的效果。

CSS是个比较繁琐的事情,在编程领域,只要是特别费事,特别麻烦的地方,一定会有一个英雄站出来搞出一个类库,然后让大家都省事,同时大家也都在具体细节上变白痴。现在比较流行的就是Bootstrap,可以节省很多时间。

HTML和CSS其实没啥特别的,就是需要熟悉,熟悉这个工具最好的方式就是不停的做项目,我要尽快去动手写,dirty my hands才能有更深的体会。