编码规范(HTML)
code {
font-family: "PT Mono", Menlo, "Courier New", monospace;
padding: 2px 4px;
font-size: 85%;
color: #d44950;
background-color: #f7f7f9;
border-radius: .2rem;
}
.dec, .var {color: #606;}
.pln {color: black;}
.tag {color: #008;}
.atv {color: #080;}
.pun, .opn, .clo {color: #660;}
.atn {color: #606;}
.com { color: #800;}
语法
- 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
- 嵌套元素应当缩进一次（即两个空格）。
- 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
- 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
- 不要省略可选的结束标签（closing tag）（例如，
</li>或</body>）。
实例：
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="data:images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
实例：
<!DOCTYPE html>
<html>
<head>
</head>
</html>
语言属性
根据 HTML5 规范：
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
更多关于 lang 属性的知识可以从 此规范 中了解。
这里列出了语言代码表。
<html lang="zh-CN">
<!-- ... -->
</html>
IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
<meta charset="UTF-8">
</head>
引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
HTML5 spec links
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
实用为王
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
classid,namedata-*src,for,type,hreftitle,altaria-*,role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
布尔（boolean）型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。
更多信息请参考 WhatWG section on boolean attributes：
元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。
如果一定要为其赋值的话，请参考 WhatWG 规范：
如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要再收尾添加空白符。
简单来说，就是不用赋值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
减少标签的数量
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
编码规范(HTML)的更多相关文章
- Android的编码规范
一.Android编码规范 1.学会使用string.xml文件 在我看来,当一个文本信息出现的次数大于一次的时候就必须要使用string.xml 比如一个保存按钮 , 不规范写法: <Butt ...
- PHP 高级编程(1/5) - 编码规范及文档编写
PHP 高级程序设计学习笔记20140612 软件开发中的一个重要环节就是文档编写.他可以帮助未来的程序维护人员和使用者理解你在开发时的思路.也便于日后重新查看代码时不至于无从下手.文档还有一个重要的 ...
- 【原】JAVA SE编码规范
/* * 编码规范: * 1.所有的命名遵循"见名知意"的原则 * 2.所有的命名不允许使用汉字或拼音 * 3.Java的工程命名建议使用小写,比如:oa.crm.cms... * ...
- 浅谈Android编码规范及命名规范
前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 ...
- PHP编码规范PSR-2
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...
- Objective-C开发编码规范【转载】
概要 Objective-C是一门面向对象的动态编程语言,主要用于编写iOS和Mac应用程序.关于Objective-C的编码规范,苹果和谷歌都已经有很好的总结: Apple Coding Guide ...
- 前端编码规范之CSS
"字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看.有条理,这还必须得有一点约束~ 团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对 ...
- 前端编码规范之JavaScript
上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...
- Java Script 编码规范【转】
Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript ...
- python编码规范
python编码规范 文件及目录规范 文件保存为 utf-8 格式. 程序首行必须为编码声明:# -*- coding:utf-8 -*- 文件名全部小写. 代码风格 空格 设置用空格符替换TAB符. ...
随机推荐
- CSMA/CD协议
为了通信的简便,以太网采取了两种重要的措施: 第一:采用较为灵活的无连接的工作方式,即不必先建立连接就可以直接发送数据: 第二:以太网对发送的数据帧不进行编号,也不要求对方发回确认. 因此,以太网提供 ...
- 将samba加入到windows域《转载》
将samba加入到windows域 那什么是域呢? 一台Windows计算机,它要么隶属于工作组,要么隶属于域.所以说到域,我们就不得不提一下工作组,工作组是MS的概念,一般的普遍称谓是对等网. 工作 ...
- (转)HTTP 无法注册 URL http://+:9999/CalculatorService/。进程不具有此命名空间的访问权限
写WCF时在 1 host.Open(); 报错:HTTP 无法注册 URL http://+:9999/CalculatorService/.进程不具有此命名空间的访问权限(有关详细信息,请参见 h ...
- visifire 图表双坐标轴 silverlight
public void CreateChart(Grid oGrid, ObservableCollection<ListItem> lBaseOilBar) { ...
- Mysql常用命令记录
-- 导出数据库: mysqldump -u user_name -p database_name > import_file.sql -- 执行脚本 source database.sql
- 有关SetTimer函数的用法
1 )用WM_TIMER来设置定时器 先请看SetTimer这个API函数的原型 UINT_PTR SetTimer( HWND hWnd, // 窗口句柄 UINT_PTR nIDEvent, // ...
- 连接SQLite 创建ADO.net实体类
0.开发环境 win10,vs2013-x64 1.安装: sqlite-netFx451-setup-bundle-x86-2013-1.0.102.0.exe 注意事项:选在VisualStudi ...
- Java中list<Object>集合去重实例
一:Java中list去重的方法很多,下面说一下其中一种方法:把list里的对象遍历一遍,用list.contain(),如果不存在就放入到另外一个list集合中: 二:实例 这里需要注意的是:使用c ...
- Java 中关键字transient引出序列化与反序列化
一:transient(临时的)关键字 1.transient关键字只能修饰变量,而不能修饰方法和类.注意,本地变量是不能被transient关键字修饰的. 2.被transient关键字修饰的变量不 ...
- mysql索引之组合索引
多列索引又称组合索引,在mysql的查询操作中,我们经常会遇到多个搜索条件,如:$sql = "select * from article where content='ma4' and t ...