专栏首页Micro_awake webHTML&CSS书写规范

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 条评论
登录 后参与评论

相关文章

  • vue的计算属性computed和监听器watch

    用户1149564
  • vue中样式的典型操作(:class,:style)

    用户1149564
  • Vue学习2:模板语法

    参考:https://cn.vuejs.org/v2/guide/syntax.html,http://www.runoob.com/vue2/vue-temp...

    用户1149564
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study
  • HTML规范 - 整体结构

    申霖
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程

扫码关注云+社区

领取腾讯云代金券