本文深入探讨了前端开发中的关键概念，包括结构、样式和行为的分离，代码注释的重要性，公共组件与私有组件的区分，以及jQuery与YUI的加载策略。此外，文章还强调了构思在项目开发初期的作用，人与人之间的交流在合作中的重要性，以及如何通过HTML语义化标签提升SEO。同时，提供了关于CSS组织、HTML结构优化、表单域的正确使用、语义标签的应用等实用建议。
-
前端结构，样式，行为分离
-
通一行，精一行
-
好的代码注释要占三分之一，维护别人代码成为间接合作团队
-
开发中要分为公共组件和私有组件
-
jquery集中加载，yui分散加载
-
开发前要先构思，磨刀不误砍柴工，前期构思占到整个项目开发的30%--60%
-
合作最大的困难是人，不是技术，与人交流合作很重要
-
先确定html，确定语义化标签，再来选择合适的css
-
判断网页标签语义是否良好的方法：去掉样式，看网页结构是否组织良好有序，是否任然有可读性。
-
搜索引擎对h标签比较敏感，多用标题语义，有利于seo，语义良好的页面，语义应该是连续的没有断层的
-
web developer,禁用css。看文件结构
-
网页也是需要构思的，强调html的重要性
-
一般来说，表单域要用filedset包含起来，并用legend标签说明表单的用途<legend>登录表单</legend>
-
filedset有默认的边框，legent也有默认的样式，因此，filedset的“border”设为“none”，legend的“display”设为none。
-
每个input标签对应的说明文本都需要使用label标签，并通过input设置id值，在label标签中设置“for=id”来让说明文本和相应的input关联起来。
-
表格标题用caption，表头thead，主题用tbody包围，尾部用tfoot，表头要用th，一般单元格td
-
尽量不使用无语义的div和span
-
可以用p的地方就不要用div
-
语义强调用em或者strong
-
浏览器解析网站有标准模式和怪异模式
-
写DTD声明避免浏览器解析为怪异模式
-
css组织方式，按照base，common，page三个层次来编写
-
base最底层，高可移植性
-
现在开发流行将html的原有标签全部覆盖掉，将常用的标签列出来，绑定新的样式
-
通用原子类，用的多而且基本的原子属性，最基本的html样式
-
.lf类和.fr类，除了设置float：left和float：right，还要有display:inline，解决ie6双外边距bug
-
class ="a b",为元素引入两个样式
-
clearfix类用来在父容器中取消子元素浮动，如<div class = "clearfix"><div class = "fl"></div></div>
-
zoom:1用来出发haslayout
-
模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应该将他们提取出来，
-
模块应该在尽可能少的原则下做到尽可能简单，以提高重用性
-
多个英语单词连接的命名法使用驼峰法或者划线法，驼峰法从第二个英文单词开始首字母大写
-
驼峰法用于区别不同单词，划线法用来表明从属关系
-
不要乱用子类，尤其是常用的命名方式常用的单词
-
为了避免不同的工程师开发使用相同的命名以至于代码覆盖或者重复，应该在类名前加上工程师的名字代号
-
class类的引用，多用组合少用继承，一个元素可以挂多个类
-
margin-top和margin-botto会造成margin重合，而左右margin不会有这样的问题
-
模块最好不要用margin-top或者margin-bottom的组合，而是统一使用
-
当不同的选择符的样式设置有冲突的时候，会采用权重高的选择器
-
html权重为1，class权重为10，id权重为100
-
如果css权重相同，那么样式会遵循就近原则，如果哪个选择符最后定义，就采用那个选择符的样式，注意是定义顺序不是绑定顺序。
-
使用子选择器可以提高css的权重，权重越高越不容易覆盖。为了保证样式容易被覆盖，提高可维护性，选择符权重保持权重尽可能降低，使用自选择器会降低才算是权重
-
css sprite 在一个背景大图中通过定位获得不同的展示，必须要是背景图片才行
-
一行式编码风格css
-
多写class，少写id
-
zoom：1或者position：relative触发haslayout，就可以在ie上正常显示样式
-
块级元素可以设置宽高，行内元素不可以设置宽高，行内元素margin，padding-top，bottom无效，左右可以
-
块级元素和行内元素可以相互转化，通过css绑定样式即可
-
ie css hack 第一种 ie注释<!--[if IE]><link /><![endif]> 第二种 *html .test{}only for ie 6 *+html .test{}only for ie7 第三种：在添加属性的时候*width
-
解决超链接访问后hover样式不出现的问题a:visit{} a:hover{}
-
在ie中实现inline block效果，display：inline-block，在行内元素中例如<span></span>内添加样式，出发haslayout，实现ie的行内元素并列，使用span只是为了出发haslayout，即让浏览器知道这个是块级元素布局的
-
main的内容比起sidebar更重要，在html标签上要保证main在slider之前被加载
-
z轴在元素设置position为absolute或者relative时被激活，
-
相对固定的布局用子选择符限定，较多花样的样式可以使用组合的方法
-
flash在ie浏览器中嵌入用object，在firefox下是embed嵌入
-
IE6透明的解决办法，png图片周围出现的透明在ie6下显示是浅蓝色的<script language=”JavaScript”>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(“MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
j = j-1
}
}
}
}
window.attachEvent(“onload”, correctPNG);
</script>
-
多个ie版本下开发，使用ietest可以测试效果
-
javascript合作避免相同变量或者全局变量，使用匿名函数(function(){})(),把变量控制在局部，局部变量，不能使用全程变量，避免冲突
-
使用命名空间可以更好的管理全局变量GLOBAL.A.CAT={};GLOBAL.A.DOG={};GLOBAL.A.CAT.name="mini";GLOBAL.A.DOG.name="hhh";
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
