HTML&CSS书写规范
第一部分:HTML书写规范:
1.1 HTML整体结构:
1.1.1:HTML基础设施:
- 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOCTYPE htlm>";
- 文档必须申明编码charset,与文件本身编码保持一致,推荐<meta charset="UTF-8">;
- 根据页面内容和需求适当填写keywords和description;<meta name="keywords" content=""><meta name="decription" content="">
- 页面title是极为重要的一项。
1.1.2:结构顺序与视觉顺序基本保持一致
- 按照从上到下,从左到右的顺序进行书写HTML;
- 有时候为了便于搜索引擎抓取,我们要将重要内容在HTML结构中提前;
- 用div替代table布局;
- 当需要一些表现形式为表格的数据,使用<table>
1.1.3:结构(html),表现(css),行为(js)三者分离,避免内联
- 使用link将css文件引入,置于head中;
- 使用script将js文件引入,置于body底部。
1.1.4保持良好的简洁的树形结构:
- 每一个块级元素都另起一行,每一行都使用Tab缩进对齐。删除冗余的行尾的空格
- 使用4个空格代替1个Tab(大多数编辑器均可设置)
- 对于内容较为简单的表格,建议将<tr>写成单行
- 大的模块之间,可以使用空行隔开,使结构更为清晰
另外,请做到下列几点:
- 结构上可以并列书写,就不要嵌套书写。如:如果可以写成<div></div><div></div,就不要写成<div><div></div></div>
- 如果结构上已经可以满足视觉上与语义上的要求,就不要有冗余的结构。如:<div><h2></h2></div>,就不要写成<div><div><h2></h2></div></div>
- 一个标签上引用的ClassName不要过多,如不要出现这种情况:<div class="calss1 class2 class3 class4 class5"></div>
- 对一个语义化的内部标签,尽量避免使用ClassName。如这种情况中:<ul class="ask-help"><li class="item"></li></ul>,class="item"应该去除!
1.2 内容及语义:
1.2.1 内容类型决定使用的语义标签
在HTML中某种特定类型的内容要有特定的HTML标签来承载;也就是根据内容语义化HTML结构。
1.2.2 加强"资源型"内容的可访问性和可用性
在资源的内容上加上描述文案,比如img添加alt属性,在audio加上文案和链接
1.2.3 加强“不可见”内容的可访问性
背景图片上的文字应该同时写在html中,并使用css使其不可见,有利于搜索引擎抓取内容,同时CSS失效时可以看到内容
1.2.4 以字符实体代替与HTML语法相同的字符,避免浏览器解析错误
更多HTML规范:参考链接
第二部分:CSS书写规范
第三部分:JavaScript书写规范
3.1 区块:
总是使用大括号表示区块
if(false)
var aa=1;
var bb=2;
var cc=3;
console.log(aa,bb,cc);//undefined 2 3
//等同于:
if(false){
var aa=1;
}
var bb=2;
var cc=3;
起首的大括号跟在关键字后面
function test(){
return
{
name:'apple'
}
}
console.log(test());//undefined
//上面函数原本是想返回一个对象,但其实上面代码等价于:
function test(){
return ;
{
name:'apple'
}
}
正确的写法:
function test(){
return {
name:'apple'
}
}
3.2行尾分号:JavaScript规定,行尾分号可以省略。但是建议:能不省的地方不要去省略(这不是python,ruby等语言)
3.3变量申明:由于“变量提升”,所以,变量声明最好在头部就申明
3.4new 命令:
var a=new myObeject();
这是使用new命令,由构造函数生成一个对象。但是一旦忘记new,myObject()内部的this 关键字就会指向全局对象,导致所有绑定在this上面的变量,都变为全局变量。
因此构造函数首字母一般需要大写,而普通函数首字母小写!
3.5 with:尽量不要使用with
3.6 ==与===:建议总是使用严格相等(===)
3.7 switch...case结构:代码很容易冗长;容易造成程序流程的混乱,不符合面向对象编程原则。
switch...case建议尽量避免使用!
HTML&CSS书写规范的更多相关文章
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- html和css书写规范
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...
- CSS书写规范
一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...
- CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...
- CSS书写规范、顺序和命名规则
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考 这些是参考了国外一些文章以及我的个 ...
- 推荐大家使用的CSS书写规范、顺序(转载)
转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...
随机推荐
- 将DOS格式的shell脚本转为UNIX格式
shell脚本是UNIX格式,在修改其中内容时,务必保持UNIX格式.UE编辑器打开时,会询问是否转为DOS格式,请点否.如果修改完成后,不能确认是否为DOS格式,可以使用UE文件菜单下的Conver ...
- day3_字符串常用方法
s.upper()s.lower()s.capitalize()s.split(',')s.strip('abc')s.lstrip()s.rstrip()s.replace('old','new') ...
- python之路(转载)
Python之路 Python生产环境部署(fastcgi,uwsgi) Django 缓存.队列(Memcached.redis.RabbitMQ) Python(九) Python ...
- SearchContextMissingException[No search context found for id [1545782]]
这个原因是scroll的时间设置不够久,设久一些就可以了.
- BZOJ1280 Emmy卖猪pigs 网络流
正解:网络流 解题报告: 传送门! 我网络流的基础题都还麻油做完就来做这个了,,,wsl,,, 首先想下最基础的构图方法 不难想到把猪圈和顾客分别当做节点,然后新建一个源点和汇点 然后考虑怎么连边,首 ...
- nodejs 学习五 单元测试一
一. chai chai 自身是依赖nodejs的 assert,让检测更加语义化. chai 采用两种模式,TDD和BDD, TDD是类似自然语言方式 BDD是结构主义 chai文旦地址 二.moc ...
- JavaScript substr() 字符串截取函数使用详解
substr 定义和用法 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. 语法 stringObject.substr(start,length) 如果 length ...
- OC动画:CAAnimationGroup
//贝塞尔曲线路径 UIBezierPath *movePath = [UIBezierPath bezierPath]; [movePath moveToPoint:CGPointMake(10.0 ...
- Java基础知识(重载和覆盖)
重载(overload): 在一个类中,如果出现了两个或者两个以上的同名函数,只要它们的参数的个数,或者参数的类型不同,即可称之为该函数重载了. 即当函数同名时,只看参数列表.和返回值类型没关系. 重 ...
- vue-自定义pc端软键盘
<template> <div> <el-input v-model="money" type="textarea" placeh ...