搜索到
5
篇与
的结果
-
前端开发规范之html编码规范 原则1.规范 。保证您的代码规范，趋html5，远xhtml，保证结构表现行为相互分离。2.简洁。保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。3.实用。遵循标准，但是不能以牺牲实用性为代价。4.忠诚。选择一套规范，然后始终遵循。不管代码由多少人参与，都应该看起来像一个人写的一样。语法1.小写。html标签、html属性全部小写。2.嵌套。所有元素必须正确嵌套。3.闭合。双标签必须闭合，单标签（自关闭标签）不闭合。<!--bad--> <br/> <hr/> <!--good--> <br> <hr> 1.详尽注释。解释代码解决问题、解决思路、是否为新鲜方案等。2.模块注释。github建议不使用模块结束注释。<!-- 新闻列表模块 --> <div class="news"> ... <!-- /新闻列表模块 --> <!-- 有不少规范建议不使用结束模块的注释，因为这样太丑了，又加重文件负荷。 --> 3.待办注释。 文档1.文档类型使用html5标准文档类型，文档类型声明之前，不允许出现任何非空字符。不允许添加<meta>强制改变文档模式。2.html元素上指定lang属性。显示页面语言，有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则，等等。3.指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。4.IE兼容模式。Internet Explorer 支持使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要，通常通过 edge mode 来通知 IE 使用最新的兼容模式。<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 5.head部分的顺序：a.<meta>元素，b. 需要的js文件（eg. Moddernizr or HTML5 Shiv），c. <title>元素，d.样式表。6.可以使用IE条件注释的方式兼容IE，但是不要添加额外的样式表。<!--bad--> <!--[if IE8]> <link rel="stylesheet" href="/Assets/styles/IE8.css" > <![endif]--> <!--[if IE7]> <link rel="stylesheet" href="/Assets/styles/IE7.css" > <![endif]--> <!--good--> <!--[if IE8]><html class="ie8" lang="zh-cn"><![endif]--> <!--[if IE7]><html class="ie7" lang="zh-cn"><![endif]--> 属性1.双引号属性值，不要使用单引号。2.省略type属性。使用style、link、script，不用指定type属性，因为 text/css 和 text/javascript 分别是他们的默认值。3.省略Boolean属性值。Boolean属性不用添加取值，disabled,checked,selected等。4.省略url类属性资源协议头。5.属性顺序。html属性应该按照特定的顺序出现以保证易读性。class->id,name->data-*->src,for,type,href->title,alt->aria-*,role。6.多媒体元素添加替代属性。图像增加alt属性，音视频增加替代文字。7.不手动设置tabindex属性，让浏览器自动设置。元素1.避免冗余标签。2.避免JS生成标签。3.段落文字应该用<p>，避免使用<br>。4.列表项放<ul>、<ol>、<dl>，不要使用一系列的<div>或<p>5.<input>使用for属性绑定<label>。6.使用<label>标签包裹radio或checkbox和他们的文字，不用再使用for属性。7.使用单选、复选替代下拉菜单。（radio or checkbox instead of select menu）8.form button应制定type类型，使用type="submit"、type="reset"或type="button"。9.首要的表单按钮首先出现(在DOM中)，尤其是适用多个提交按钮的场合。视图中显示的顺序可以利用css修改。10.有效使用<thead>、<tfoot>、<tbody>、<th>（scope属性）。可以把<tfoot>放<tbody>前提高加载速度。 <table summary="This is a chart of invoices for 2011."> <thead> <tr> <th scope="col">Table header 1</th> <th scope="col">Table header 2</th> </tr> </thead> <tfoot> <tr> <td>Table footer 1</td> <td>Table footer 2</td> </tr> </tfoot> <tbody> <tr> <td>Table data 1</td> <td>Table data 2</td> </tr> </tbody> </table>格式1.soft tab。2.嵌套缩进。3.删除行尾空格。4.块元素、列表元素、表格元素都放在新行。5.inline元素视情况换行。6.努力保持每行长度小于80列，如果太长可换行。<!--bad--> <img class="block_element" id="unicorn" src="http://cl.ly/image/1a1u013e002z" alt="unicorn, rainbows, poop and stuff" width="500" height="400" /> <!--good--> <img class="block_element" id="unicorn" src="http://cl.ly/image/1a1u013e002z" alt="unicorn, rainbows, poop and stuff" width="500" height="400" > 关于编码规范，没有标准答案，没有正确对错，只有更合理、更有效。来源：前端开发whqet 的博客 -
最佳PHP，HTML5和CSS框架大荟萃之三 CSS框架 1. Twitter BootstrapTwitter Bootstrap是Twitter发起的一个工具型类库，可以高效的帮助你开发网站。基于LESS和一些基础的CSS/HTML，包括： 表单 按钮 表 导航 标签页 字体排版 Grid 提供了940px及其16列的布局，支持流体布局及其固定布局。（最新的BS3，缺省提供了响应式的支持，倡导Mobile First）。更多阅读：移动为先的Bootstrap 3使用Bootstrap能够让你免除自己维护和处理CSS的痛苦过程，特别是对于开发人员来说，但是缺点是界面的同质化严重，大家开发的网站都一个样子。源代码 2. Pure : CSS FrameworkPure是Yahoo创建的一个比较新的CSS框架。使用Normaliz.css并且不提供任何的JS，只提供纯HTML/CSS。这个框架发布的时候就很紧跟响应式的布局潮流，拥有字体排版，网格，表单，按钮，表格和导航等等。使用非常简单，整个框架也非常轻量级（这里推荐一个Pure使用的教程，大家可以阅读）源代码 3. Fitgrd : Responsive Grid SystemFitgrd其实不是一个框架。它是一个非常健壮可以帮助你开发响应式网站的基础。设计的初衷是为了快速的原型搭建，但是作为产品网站开发基础来说也非常的好用。如果你不希望页面看起来都是Bootstrap风格的话，这套Grid系统非常适合高级web设计师。除了Grid外所有的其它设计都可以自由掌控，它提供了很多保存非必要代码的机会。4. Metro UI CSSMetro UI CSS是一套创建UI界面的框架。包含了一个自封装的解决方案，同时也可以和其它框架联合使用。包含了图片，提示，表单，按钮，印刷字体等等的支持。这个框架目前还在开发中，未来将会提供更多的特性和选项。源代码5. SkelJSSkelJS是一个轻量级的前端框架，用来帮助你创建响应式的网站和应用。包含一个单独的JS文件（大概18kb），提供给设计师和开发人员方便的访问组件的能力，包括：CSS网格系统，响应式处理，CSS所写和插件系统源代码6. CardinalCardinal是一个超迷你，移动为先的CSS框架，使用一些非常实用的样式，可缩放的字体，可重用的模块，及其响应式的网格系统。提供了一个新的方式来缩放web字体，并且支持多种不同的设备。对于像素的精确度有一定的要求，但是并非使用非常严格。相反，Cardinal利用了模块化的缩放，非单位的行高，及其强大了REM单位来使得字体和布局在不同的设备上缩放更加简单。源代码 7. GumbyGumby框架是一个灵活的响应式的CSS框架，基于SASS。使用一个灵活的响应式网格框架和UIkit来快速创建逻辑页面和应用原型。基于强大的SASS - SASS是一个强大的CSS预编译处理器（这里了解更多SASS），可以允许你快速的开发Gumby，支持快速自定义和扩展。Gumby的开发符合最新的标准和spec。为了能够保持这种犀利，Gumby支持现代浏览器，如下：Chrome, Firefox, Opera, Internet Explorer 8 – 10.源代码8. 52 Framework52frameworks是一个CSS框架，提供了一些简单的方式来使用HTML/CSS3创建网站并且支持所有现代浏览器（包括ie6）。使用HTML5标签，例如，header，nav，section，article，footer或者新的输入字段如，url，email等等，这个框架也可以作为HTML5兼容的reset样式源代码9. 960 GS一个CSS的框架，帮助你按照960GS来开发你的网站。最重要的，提供了两个不同的包装方式：12列和16列。可以单独使用或者互相配合使用。其次，提供了一个overlay工具。源代码10. Less : HTML Powered CSS FrameworkLess框架是一个帮助你创建灵活的多列网站和布局的轻量级CSS框架。包含了8列的针对行高24px和基于黄金组合的字体预设的网格优化设计。源代码11. YAMLYAML是一个知名的多列布局CSS框架。这个框架最棒的地方在于支持几乎所有的浏览器。除此之外，这个框架的开发者也将web标准考虑到开发中去。并且这个框架兼容YAML builder。源代码12. Foundation
-
-
html+css 中 em和px 的尺寸解释 px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。因此用px来定义字体，就无法用浏览器字体放大的功能。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。CSS中em属性有如下特点1.em的值并不是固定的；2.em会继承父级元素的字体大小。所以我们在写CSS的时候，需要注意1.body选择器中声明Font-size=62.5%；2.将你的原来的px数值除以10，然后换上em作为单位；3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em,因为此em非彼em，它因继承#content的字体高而变为了1em=12px。但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。
-
wordpress真正静态化插件Really Static使用方法 生成HTML <转载>Really Static有点像拔站工具，所以如果要用它生成纯静态，请先确保你原本的伪静态或动态页面链接是可以访问的，它才可以根据目标工作。如果原本是动态页面，Really Static里面有个rewrite设置，在Advanced（高级设置）里，可以设置生成对应名字的html，这个我也不是很懂，所以最好的方法是根据伪静态直接生成过来。一句话就是，要想让Really Static顺利工作前提条件是你的博客将要生成纯静态的每个页面原本是可访问的。1、Really Static设置第一项：Source（文件来源）url to wordpressinstalltion :填写你的wordpress安装的根目录url path to the actuall used templatefolder:填写你的wordpress的主题路径2、Really Static设置第二项：Destination（保存路径）这里有三种保存方法work with ftp（通过ftp保存）work with sftp（通过sftp保存）work with local filesystem（直接系统保存）我选直接系统保存，填的地址要填绝对地址，一般的虚拟机可以在空间的控制面板里查到，如果真的不知道可以问空间商。Domainprefix for your cached files:这个是缓存路径，我直接按他提示填了网站根地址Url to the templatefolder：css样式保存路径，如果你填了这个，记得最后要把你的主题css手动复制一份放到这个文件夹，感觉它不会自动复制过来。3、Really Static设置第三项： Setting（设置）4、Really Static设置第四项： Reset（重设）这个是用来重新生成文件用的，如果是第一次生成就不用管他，需要完全重新生成一遍，要首先点这里的“reset filedatabase”按钮，再到第五个选项“Manual Refresh”里点“write all files”，就可以重新生成了。5、Really Static设置第五项： Manual Refresh（手动更新）有两个生成方式，单篇日志生成和全部生成6、Really Static设置第六项： Advanced（高级设置）更新频率里有三个选项：1)当有日志建立、修改和删除时。2)24小时更新一次。3)Really Static总是在运行。好了，Really Static的设置就主要是这几个选项，其他的选项是没有什么用的，可以跳过。值得一说的是，如果是中文博客，再加上你的网址里有中文字符，生成的静态文件名要是带上%的形式，这样的文件很多服务器和空间是不支持直接读取的，访问这样的网址可能访问不到，所以生成前最好把自己的网址规范一下，很多人的tag都是直接用中文，那tag就没必要生成静态文件了。转载自：http://blog.sina.com.cn/s/blog_65f387740100kr2r.html
