关闭

编码规范_html代码规范化编写

时间: 2018-12-01阅读: 1310标签: 规范

语法

  • 缩进使用soft tab(4个空格);

  • 嵌套的节点应该缩进;

  • 在属性上,使用双引号,不要使用单引号;

  • 属性名全小写,用中划线做分隔符;

  • 不要在自动闭合标签结尾处使用斜线(html5 规范 指出他们是可选的);

  • 不要忽略可选的关闭标签;


html5 doctype

在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现;

虽然doctype不区分大小写,但是按照惯例,doctype大写 (关于html属性,大写还是小写)。

<!DOCTYPE html>


lang属性

根据HTML5规范:

应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,告诉它们应当怎么去发音和翻译。

更多关于 lang 属性的说明在这里;

在sitepoint上可以查到语言列表;

但sitepoint只是给出了语言的大类,例如中文只给出了zh,但是没有区分香港,台湾,大陆。而微软给出了一份更加详细的语言列表,其中细分了zh-cn, zh-hk, zh-tw。

<html lang="en-us">


字符编码

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为'UTF-8'。

<meta charset="UTF-8"> 


IE兼容模式

用<meta>签可以指定页面应该用什么版本的IE来渲染; 

代码示例:

<meta http-equiv="X-UA-Compatible"content="IE=Edge">


引入css, js

根据HTML5规范, 通常在引入cssjs时不需要指明 type,因为 text/css和 text/JavaScript 分别是他们的默认值。


HTML5 规范链接

  • 使用link

  • 使用style

  • 使用script

<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">

<!-- In-document CSS -->
<style>    
</style>

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script>   
</script>


属性顺序

属性应该按照特定的顺序出现以保证易读性;

  • class

  • id

  • name

  • data-*

  • src, for, type, href, value , max-length, max, min, pattern

  • placeholder, title, alt

  • aria-*, role

  • required, readonly, disabled

class是为高可复用组件设计的,所以应处在第一位;

id更加具体且应该尽量少使用,所以将它放在第二位。

<a id="..." data-modal="toggle" href="#">
Example link
</a>
<img src="..." alt="...">


boolean属性

boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;boolean属性的存在表示取值为true,不存在则表示取值为false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>   
<option value="1" selected>1</option>
</select>


JS生成标签

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。


减少标签数量

在编写HTML代码时,需要尽量避免多余的父节点;

很多时候,需要通过迭代和重构来使HTML变得更少。


实用高于完美

尽量遵循HTML标准和语义,但是不应该以浪费实用性作为代价;

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1471

HTML 规范未来还需要哪些新内容?

HTML5 规范在 2014 年正式发布。时至今日,虽然这一规范已经引入了许多新的 API、功能和改进,但许多开发人员已经在展望下一代 HTML 规范了。有些人还是不知道 HTML 标准是怎样制定出来的。具体来说,一些组织提出自己的模式和协议

CSS团队协作规范

命名禁止缩写,禁止在非特殊情况下写!important,img请让它自动缩放,不可直接over write或在原本框架的class增加内容,设计RWD网站,请遵循移动设备优先原则

Css中bem书写规范

bem是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里用以下连接符扩展他们的关系:

一文看懂前端模块化规范

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起,块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信

完整的MySQL规范

所有数据库对象名称必须使用小写字母并用下划线分割·所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来)

数据库使用规范

关于MySQL数据库规范,相信大家多少看过一些文档。本篇文章给大家详细分类总结了数据库相关规范,从库表命名设计规范讲起,到索引设计规范,后面又给出SQL编写方面的建议

Web前端开发规范手册

文件命名规则:文件名称统一用小写的英文字母、数字和下划线的组合。引文件统一使用index.htm index.html index.asp文件名(小写),图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质

一份完整的MySQL开发规范,进大厂必看!

所有数据库对象名称必须使用小写字母并用下划线分割;所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来);数据库对象的命名要能做到见名识意

前端标准规范

总体原则:极简、极快、解耦,主要适用范围:vue 单页项目+;关于图片:少量直接放到本页面文件下(资源集中,互不影响),有两个页面以上公用则抽离放到 img 文件夹下(降低层级),assets 下的 img 主要放 favicon.png、pwa等全局图片

前端开发Js变量命名规范

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!