HTML&CSS书写规范

第一部分:HTML书写规范:

1.1 HTML整体结构:

1.1.1:HTML基础设施:

  1. 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOCTYPE htlm>";
  2. 文档必须申明编码charset,与文件本身编码保持一致,推荐<meta charset="UTF-8">;
  3. 根据页面内容和需求适当填写keywords和description;<meta name="keywords" content=""><meta name="decription" content="">
  4. 页面title是极为重要的一项。

1.1.2:结构顺序与视觉顺序基本保持一致

  1. 按照从上到下,从左到右的顺序进行书写HTML;
  2. 有时候为了便于搜索引擎抓取,我们要将重要内容在HTML结构中提前;
  3. 用div替代table布局;
  4. 当需要一些表现形式为表格的数据,使用<table>

1.1.3:结构(html),表现(css),行为(js)三者分离,避免内联

  1. 使用link将css文件引入,置于head中;
  2. 使用script将js文件引入,置于body底部。

1.1.4保持良好的简洁的树形结构:

  1. 每一个块级元素都另起一行,每一行都使用Tab缩进对齐。删除冗余的行尾的空格
  2. 使用4个空格代替1个Tab(大多数编辑器均可设置)
  3. 对于内容较为简单的表格,建议将<tr>写成单行
  4. 大的模块之间,可以使用空行隔开,使结构更为清晰

另外,请做到下列几点:

  1. 结构上可以并列书写,就不要嵌套书写。如:如果可以写成<div></div><div></div,就不要写成<div><div></div></div>
  2. 如果结构上已经可以满足视觉上与语义上的要求,就不要有冗余的结构。如:<div><h2></h2></div>,就不要写成<div><div><h2></h2></div></div>
  3. 一个标签上引用的ClassName不要过多,如不要出现这种情况:<div class="calss1 class2 class3 class4 class5"></div>
  4. 对一个语义化的内部标签,尽量避免使用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 区块:

总是使用大括号表示区块

 1 if(false)
 2     var aa=1;
 3     var bb=2;
 4     var cc=3;
 5 console.log(aa,bb,cc);//undefined 2 3
 6 //等同于:
 7 if(false){
 8     var aa=1;
 9 }
10 var bb=2;
11 var cc=3;

起首的大括号跟在关键字后面

 1 function test(){
 2     return 
 3     {
 4         name:'apple'
 5     }
 6 }
 7 console.log(test());//undefined
 8 //上面函数原本是想返回一个对象,但其实上面代码等价于:
 9 function test(){
10     return ;
11     {
12         name:'apple'
13     }
14 }

正确的写法:

1 function test(){
2     return {
3         name:'apple'
4     }
5 }

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建议尽量避免使用!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏深度学习与计算机视觉

PEP 8 —Python代码风格指南(一)

原文:PEP 8 – Style Guide for Python Code PEP:8 题目:Python代码风格指南 作者:Guido van Ro...

2399
来自专栏编程

Python读书笔记4

上期介绍了数字型数据,本期和大家分享的是另一个常见的数据类型字符串,可以简单的理解为Excel中的文本。 Excel在存储内核中其实只有两种:文本、数字;日期归...

2335
来自专栏互联网杂技

h5新功能data-*,好好利用,还能做数据双向绑定

标题是data-,但是这里主要讲伪元素,看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符,然而...

3154
来自专栏飞雪无情的博客

Go语言实战笔记(二十六)| Go unsafe 包之内存布局

unsafe,顾名思义,是不安全的,Go定义这个包名也是这个意思,让我们尽可能的不要使用它,如果你使用它,看到了这个名字,也会想到尽可能的不要使用它,或者更小心...

802
来自专栏技术点滴

抽象工厂模式(Abstract Factory)

抽象工厂模式(Abstract Factory) 抽象工厂模式(Abstract Factory)[Kit] 意图:提供一个创建一系列相关或相互依赖对象的接口,...

25610
来自专栏Java3y

Juqery就是这么简单

什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我...

3425
来自专栏HTML5学堂

2016.05 第三周 群问题分享

HTML+CSS 一个div里面有个img标签,div的高度由img撑开;img的兄弟级有个div要使内层div的高度等于外层div的高度,除了用JS实现,还能...

36813
来自专栏阿凯的Excel

小小查找键、大大大乐趣

你是不是在高速路口堵车的时候看到本文章呢? 不要问我在干嘛! 今天和大家愉快的分享的是查找键!! 神马?查找键还需要分享? 查找键其实分两类,一种是Ctr...

2234
来自专栏漫漫前端路

在 Vue 中使用 TypeScript 的一些思考(实践)

两种形式输出结果一致,同是创建一个 Vue 子类,但在书写组件选项如 props,mixin 时,有些不同。特别是当你使用 Vue.extend() 时,为了让...

3782
来自专栏HTML5学堂

DOCTYPE 文档类型

HTML5学堂:在HTML版本从4.0升级到5.0之后,可以采用<!doctype html>这种最新的文档声明方式,那么以前4.0版本,我们也应当有所了解,主...

3136

扫码关注云+社区

领取腾讯云代金券