之前一些章节介绍了html跟css单独的一些基础知识.大部分都是书上或者是其他教材上不会明确提及到的一些东西.

其实学习前端是一门想比较其他语言学习起来更加枯燥和繁琐的事情.比如我当初开始学习java的时候,有个eclipse,运行执行,写什么都很有劲的感觉.IO.net组件,那些玩意虽然很绕,但总会去总结,哪个api速度快,那个api用起来方便.但写来写去还脱不出那个天地.那时候估计还小,还不懂什么是设计模式,只知道怎么编写代码,自己看起来舒服.莫名其妙的学会了递归,学会了单例和工厂,只是当时还不知道.

后来看过python的教程,会写些简单的py,看过php,便又能写php.只是没了当初学习java的冲劲跟感悟.一直在用些自己常用的思维去编写代码.

直到自己开始正式的觉得自己是个前端.很多认为前端比较难,是,没错,前端需要掌握的语言笼统来说就有3种,html,css,js.变通起来,还不知道有多少变化.

实现一种效果,

有些人会说,”我仅用html就可以实现”.

一般的人说,”我得用html+css”.

还有人说,”除了html跟css以外,我还得用上js”

以上的3句话,并没有褒贬的意思,只是证明了前端制作是三种语言混合的产物.三种语言用到熟悉,至少也得1年,到精通就不知道啥时候了.主要还是看勤奋.

我是个有时候比较懒散的人,不想在博客里面写太多的基础知识.所以大家看我写的东西以外,还需要看些别的资料书.多看看别人的代码是怎么写的.

今天说说html跟css的组合吧.

一.关于dtd与浏览器细节差异.

之前在说html的时候呢,说到过dtd,这里我就不重复了,这里提到的重点是html4标准跟html5标准的差异.

总所周知,html5添加了一些标签,导致了低版本的ie,或者其他浏览器在解析的时候出现问题.现代支持html5的浏览器,如果用了html4的声明,但是文件里面写了html5的标签,大约也是会有解析上不一致.再加上本身各个浏览器的内核实现方式不一致,所以一些标签的默认属性不一致也是很正常的.

很久以前呢,有一群前端就已经发现了这个问题,并致力于解决这个问题.提出了一个方案,就是reset.css.差不多意思的还有normal.css(关键字有了,大家谷歌,百度均可.方案很多.)

原先前端内部的意见还是不够统一的,认为,这玩意是没有必要的.或者说是破坏了浏览器的初衷.

这玩意的原理其实很简单.利用了css选择器的优先级和属性的继承以及覆盖机制.

Ps:这块倒是真需要百度一下继承机制.我这里就不多说.因为完整的阐述这个性质,估计还得写个博文.

Css这块的默认属性解决了,html5的标签呢?

这就需要html5.js,原理嘛,其实就是向文档结构里面注册html5的标签,并给他们赋予默认的属性.性质跟自定义标签差不多.js这块,现在我还不想说,下面会具体谈js在前端技术中扮演的一个角色.大家可以自行参照.

还有个就是解决html5特性的js库,modernizr.

那么这些个小玩意到底需要不需要呢?我觉得还是需要的好,为啥呢?

这就是前端最重要的模块化思想.

二.模块化

前端为什么发展到现在如此的繁荣,就是因为他开放.

再穷的小孩,小时候都玩过积木,没玩过积木也玩过捏泥巴.在我看来,前端本身就是一个创造力大于体力的一个技术行业.前些日子幡然悔悟了两个字,匠义.大抵是看过程序猿的修炼之道,从小工到专家.

总觉得这个翻译有些中国化,专家这种东西在中国,大马路上掉下一块广告牌,若新闻报道里面说是砸死的人里面有什么什么方面的专家,一定不要觉得这是巧合.好吧,我又黑了一把专家.

既然是小工,即便是转行,同是技术行业,到后面便是匠.所以有能力的同学,还是建议你们看看原版的书,因为这块呢,语境和语义,只可意会,翻译出来,就少了那个味道.

扯远了,拉回来.

开始写代码的时候,都是一步一步的敲出来,重复的东西多了,就把他们共用出来,这是常识.而重复的东西大多有共性,对这行东西进行总结归纳,就是设计模式.而把那些具有特定用途的代码进行接口编程,这些就是模块工具.

什么叫接口编程呢,就是我告诉怎么用我这个工具,告诉你api,写个使用的demo,你需要关注的就是怎么用,是否得到你预期的结果,不需要在意我在这里面怎么做的.

如果有个工具说,帮你把你可能需要的所有技术都考虑了,我这里面有这么一个大个的工具集.这个玩意就是解决方案.你需要的就是把用这个工具集去解决大部分的问题.

这些都是思想性质的东西,我说了你可能现在不太明白.或者等你明白了对我说的有些别的意见.都没关系.拿出来讨论,见光,前端这个行业才能长足进步,造福于后来之人.

现在再去看reset.css之类的小玩意.你们觉得需要吗?

我的答案是,看你做什么东西,要去完成什么目标.然后选择你需要的这些模块或者说是工具.

某一点上我倒是很同意,国内有些过于追求片面的高手定义,比如说精通js,有些单位单位的面试要求里面就写到,精通js的原生api,然后要求,精通jquery的源代码.诸如此类的一些事情.

从立意上中国的软件开发似乎就低了国外一等.盲目的认为只有国外的软件,才是最优秀的.而中国的开源软件,有时候被喷,这不好,那不好,要么就是盲目崇拜,上来就是大神,能不能教我,比如老赵,有时去看看,我跟他也不认识.只是常去看看他的博客.

http://blog.zhaojie.me/

前端还有些人.比如周爱民,阮一峰等等,我就不一一去列举了,有兴趣的时候,百度一些知识点都是他们撰文的.

多看看他们的博客,想想他们是怎么做,怎么去学的.不要盲目的叫大神.你们要想的是,比我们,他们走的更远.

说的太杂了,大家看看吧,之后的博文会教大家怎么从小组建代码.

转载于:https://blog.51cto.com/daqianduan/1216106

前端 html结合css-1篇相关推荐

  1. 厚积薄发 前端学习笔记 CSS基础篇-左侧固定,右侧自适应(或右侧固定,左侧自适应)布局方法...

    这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接 写在前面 归纳总结了几种比较ok的方法,左右 ...

  2. 30个HTML+CSS前端开发案例(完结篇)

    30个HTML+CSS前端开发案例(完结篇) flex弹性布局-今日头条首页热门视频栏 代码实现 效果 flex弹性布局-微博热搜榜单 代码实现 效果 grid网格布局-360图片展示 代码实现 效果 ...

  3. 我的前端之路 (css篇)

    CSS基础篇 第一章 文章目录 CSS基础篇 前言 一.CSS是什么? 二.css能做什么 1.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. 2.CSS 能够对网 ...

  4. 【面试篇】前端点滴(css/css3)

    [面试篇]前端点滴(CSS/CSS3)---倾尽所有 面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...

  5. 【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标

    [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标 文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标 前言 一. ...

  6. (转)web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  7. 前端自学 - CSS总结篇(一)

    CSS 总结 一.CSS 的简介 二.CSS 的引入 (一)行内样式 (二)内联样式 (三)外联文件 三.CSS 语法 四.选择器 (一)选择器命名规范 (二)基本选择器  1. 元素选择器  2. ...

  8. (:◎)≡前端学习之CsS篇

    前端学习之CSS篇 1.CSS简介 2.CSS语法规范 3.CSS选择器 (1)标签选择器 (2)类选择器 (3)id选择器 (4)通配符选择器 (5)选择器总结 4.CSS字体属性 5.CSS文本属 ...

  9. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  10. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

最新文章

  1. 人脸真伪验证与识别:ICCV2019论文解析
  2. linux文本处理工具之grep与正则表达式语法
  3. tarjan求强连通分量的思考
  4. 极速写作2017彻底卸载_如何将 Flash 从 Mac 和 Windows 系统中彻底卸载?
  5. java 中map_Java中Map集合
  6. 常用方法 DataTable转换为Entitys
  7. 老铁,邀请你来免费学习人工智能!!!
  8. 全盘镜像只还原c盘有影响么_如何正确的清理C盘
  9. source insight 4 破解
  10. c语言 dll库是线程安全吗,vsprintf是线程安全的吗?解决思路
  11. 四款优秀的源代码扫描工具简介
  12. SVN教程代码比较(图文教程)
  13. 一位全减器逻辑电路图_用74ls138实现一位全减器 - 数字电路图
  14. Unable to import maven project: See logs for details
  15. wordpress 替换国外主题字体为微软雅黑
  16. 解决 zbrush导出的模型在blender里没有颜色的问题
  17. 计算机网络设备的运行温度,计算机机房控制温度与湿度方法
  18. SL8100 宽电压100V降压12V-24V大功率LED照明降压恒流驱动芯片IC
  19. JS获取图片的EXIF信息+纠正图片方向
  20. DC report_timing 报告分析(STA)

热门文章

  1. 浏览器差异总结,可以用此判断浏览器版本(转)
  2. C#反射之Assembly.Load,Assembly.LoadFile 与 Assembly.LoadFrom方法介绍
  3. linux下libpcap抓包分析
  4. Delphi关于StringGrid的公用模块[转]
  5. DXperience 8.2.4 简繁体汉化,本地化,Skins包含webform,winform
  6. 证券市场中银行的分类和作用
  7. 一种新的图像清晰度评价函数
  8. IOS pushViewController如何去隐藏tabbar
  9. mysql 返回随机行_从mysql数据库返回随机行而不使用rand()
  10. java hashmap遍历顺序_Java中HashMap遍历的两种方式