最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的《编写高质量代码web前端开发修炼之道》,看完觉得不错,它从一个整体架构上来说明如何编写高质量代码,而细处也着重说明一些比较重要的技术点,给人一种从高处俯瞰web开发、很完整的感觉,在这感谢老大,谢谢他让我们不停的进步着。下面是我看书过程中的笔记。

第一章:从网站重构说起

没什么好说的,从一个糟糕的老网页实例说明需要将web的结构,样式和行为分离开来,既html文件,css文件,js文件。

总结:Html标签只负责承载内容,样式交给css,行为交给Javascript。做到“精简,重用,有序”。

【相对我以前做的项目,我经常会把一些click事件,mouseover事件直接写进html标签中,其实更好的做法应该是放到js中去,直接Document.getelementbyid("").onclick(){},或者用jquery的click事件关联】

第二章:团队合作

欲精一行,必先通十行

“经常听到做前端开发的朋友抱怨要学的东西太多,东学一点,西学一点,什么都会,但是都不精,于是有人认为‘通十行不如精一行’,而在前端领域,这句确行不通,对于前端来说,你不通十行,就无法精一行。” 看到作者的这句话,我总算有点成就感。O(∩_∩)O~

这章主要说明前端需要了解的语言,html, css要精通、及其重要,js,及架构div+css,RIA富媒体应用,jquery,YUI,ps,AI设计等等

团队之间的开发要注意:

1:增加代码可读性----注释

2:重用性---公共组件和私有组件的维护

3:冗余和精简的矛盾---选择集中还是选择分散   (合理的前端架构中css和js都会提取公共组件,如何组织需要权衡,完美的解决方案不存在,只能在冗余和精简中尽量找到最佳平衡点)

4:前期的构思很重要。

5:制定规范

6:团队合作最大难度不是技术,而是人

第三章:高质量的Html

总算来了点实际的用得着的技术,呵呵

1)标签的语义:大家都懂的。

2)标签布局

table布局网页的缺点:1:代码量大,结构混乱。2:标签语义不明确,对搜索引擎不友好

css布局(div+css):弱化了标签的布局能力,将布局完全放到样式中去控制,而标签重新恢复了原来语义的作用。它与table布局相比具有代码量少,结构精简,语义清晰等优点。

总结:在布局的过程中,Html结构才是重点,css是用来修饰结构的,正确的做法是:先确定html,确定语义的标签,再来选用合适的css.

3)如何确定你的标签是否语义良好

在做完一个页面后,去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性

"css裸体日"这个日子的目的就是为了提醒大家选用合适的HTML标签的重要性。------------显然我是第一次听说哈。

4)标题和内容的实例

这个实例用的是Html中无语义的标签-----div分隔 和span范围 来架构的, 而正确的做法一般使用h2,p,a来架构

需要特别说明的是:当页面内标签无法满足设计需要时,才会适当添加div和span等无语义的标签来辅助实现。

5)表单和表格

表单

一般需要直接submit的内容需要放置在表单内,为了有清晰的语义,一般表单域要用fieldset标签包起来,并用legend标签说明表单的用途,若不想要它自带的默认样式,可将border:none;不想显示设置 display:none,以此来兼顾语义和设计两方面的需求。

每个input标签对应的说明文本都需要使用label标签,并通过为input设置id属性,在label中设置“for=someId”来将对应的label和input关联起来。

表格

虽然在css布局中table不推荐用来布局,但它在二维数据展示方面确实最好的选择。

一般用table,我常使用它的<table><tr><th><td>标签,在有需要的时候还可以用他的其他标签,表格标题用caption,表头用thead包围,主体部分tbody包围,尾部tfoot包围

总结:语义化标签应注意的一些问题

1:尽可能少地使用无语义标签div和span

2:语义不明显,既可用P也可用div的地方,建议尽量用p,因为有上下间距,可读性好。(还是视情况而定)

3:不要使用纯样式标签,如:b,font,u等 ,直接写进css设置。

转载请注明出处

原文地址:http://www.cnblogs.com/Joans/archive/2012/09/11/2679074.html

编写高质量代码:Web前端开发修炼之道(一)的更多相关文章

  1. 编写高质量代码:Web前端开发修炼之道(四)

    这一节是继上一节高质量的Javascript 7)编程实用技巧 1:弹性 从 一个标签区和内容区的实例(就是点击不同的标签菜单显示不同的内容块)来说明不需要每个tabmenu都设置onclick事件, ...

  2. 编写高质量代码:Web前端开发修炼之道(三)

    第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免 ...

  3. 编写高质量代码:Web前端开发修炼之道(二)

    第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...

  4. 《编写高质量代码——Web前端开发修炼之道》读后随笔

    结构样式行为的分离 结构标准包括XML标准.XHTML标准.HTML标准:样式标准有CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 通常的项目会按照如上的方式进行分离,但自己曾今做 ...

  5. 读《编写高质量代码-Web前端开发修炼之道》笔记

    第一章 1.Web标准由一系列标准组合而成,核心理念是将网页的结构,样式和行为分离,所以分为三大部分:结构标准,样式标准和行为标准.结构标准包括XML标准,XHTML标准,HTML标准:样式标准指CS ...

  6. 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象

    JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...

  7. [已读]编写高质量代码--Web前端开发修炼之道

    我觉得还蛮实用的一本,推荐看看,主要涉及到这些: 标签语义化.css模块化. css的一些东西,比如haslayout 文档流,还有如何实现水平.垂直居中. js代码组织与js分层.js压缩 编码规范 ...

  8. 通用base.css —— 《编写高质量代码 web前端开发修炼之道》

    @charset "utf-8"; /*CSS reset*/ html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol, ...

  9. 『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS

    1.怪异模式和DTD 标准模式:浏览器根据规范表现页面 怪异模式:模拟老浏览器行为防止老站点无法工作(为了兼容老式浏览器的代码),如果漏写DTD(Document Type Definition文档定 ...

随机推荐

  1. Angular25 组件的生命周期钩子

    1 生命周期钩子概述 组件共有9个生命周期钩子 1.1 生命周期的执行顺序 技巧01:测试时父组件传递对子组件的输入属性进行初始化操作 import { Component, Input, Simpl ...

  2. Python学习笔记_一个Tkinter示例,使用FileDialog

    为了使用Python进行数据分析,编写一个图形界面,选择一个Excel文件(或CSV),然后进行后续处理. 一.本示例涵盖如下知识点: 1.FileDialog的使用 2.退出程序 3.消息提示框的示 ...

  3. MySQL - pt-query-digest的下载与使用

    对于脚本文件,是可以执行的,我们不用安装.所以,但是这个脚本文件没有执行的权限,所以,我们首先赋予这个脚本文件的可执行的权限. 再次查看文件的信息后. 已经有了执行的权限了. 运行脚本的时候,可要注意 ...

  4. java 实现mysql数据库备份

    package com.itenp.gen.action; import java.io.BufferedReader; import java.io.FileInputStream; import ...

  5. ROS naviagtion analysis: costmap_2d--LayeredCostmap

    博客转自:https://blog.csdn.net/u013158492/article/details/50490490 在数据成员中,有两个重要的变量:Costmap2D costmap_和 s ...

  6. 为什么有时候在Windbg中下断点下不了呢??

    1.今天我发现我下断点的地方是我声明的变量,变量还仅仅是声明,没有赋值.因此不能下断点. 2.当不能下断点时,如何解决呢? (1)重启Vmware虚拟机.(2)在虚拟机中恢复“快照”.

  7. 使用Cytoscape画PPI网络图

    打开Cytoscape软件,根据菜单导入string_interactions.tsv文件 File ----> Import ----> Network from File 会弹出下图对 ...

  8. linux安装JDK后发现系统带有openjdk的处理

    1.JDK下载. 官网下载网址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  9. jquery中attr和prop的区别(转)

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  10. asp.net core 外部认证多站点模式实现

    PS:之前因为需要扩展了微信和QQ的认证,使得网站是可以使用QQ和微信直接登录.github 传送门 .然后有小伙伴问,能否让这个配置信息(appid, appsecret)按需改变,而不是在 Con ...