语法

  • 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符

  • 在属性上，使用双引号 ""，不要使用单引号 ''

  • 属性名 / 属性值全小写，用中划线 - 做分隔符

  • 不要在自动闭合标签结尾处使用斜线，例：<img>

  • 不要忽略可选的关闭标签，例：</li> 和 </body>

  • 自定义属性必须使用 data- 前缀

<!-- good -->

<body>

    <img src="logo.png" alt="logo">

    <ul>

        <li class="first-child">first</li>

        <li data-index="2">second</li>

    </ul>

</body>

HTML5 doctype

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

虽然 doctype 不区分大小写，但是按照惯例，doctype 使用全大写

<!-- good -->

<!DOCTYPE html>

lang 属性

根据HTML5规范：

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

在 sitepoint 上可以查到 语言列表

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

<!DOCTYPE html>

<html lang="zh-cn">

</html>

字符编码

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

    </head>

</html>

IE 兼容模式

用 <meta> 标签可以指定页面应该用什么版本的 IE 来渲染，PC 端项目，建议启用 IE Edge 模式

<!DOCTYPE html>

<html>

    <head>

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

    </head>

</html>

引入 CSS、JS

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

  • 在引入 CSS 时，必须指明 rel="stylesheet"

  • 将 script 放在页面中间将阻断页面的渲染，出于性能方面的考虑，如非必要，JavaScript 应当放在页面末尾

<html>

    <head>

        <link rel="stylesheet" src="index.css">

    </head>

    <body>

        <script src="index.js"></script>

    </body>

</html>

boolean 属性

boolean 属性指不需要声明取值的属性，XHTML 需要每个属性声明取值，但是 HTML5 并不需要

<!-- good -->

<input type="text" disabled>

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

<!-- bad -->

<input type="text" disabled="disabled">

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

减少标签数量

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

<!-- good -->

<img class="logo" src="logo.png">

<!-- bad -->

<span class="logo">

    <img src="logo.png">

</span>

实用高于完美

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

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

HTML 编码规范的更多相关文章

  1. Android的编码规范

    一.Android编码规范 1.学会使用string.xml文件 在我看来,当一个文本信息出现的次数大于一次的时候就必须要使用string.xml 比如一个保存按钮 , 不规范写法: <Butt ...

  2. PHP 高级编程(1/5) - 编码规范及文档编写

    PHP 高级程序设计学习笔记20140612 软件开发中的一个重要环节就是文档编写.他可以帮助未来的程序维护人员和使用者理解你在开发时的思路.也便于日后重新查看代码时不至于无从下手.文档还有一个重要的 ...

  3. 【原】JAVA SE编码规范

    /* * 编码规范: * 1.所有的命名遵循"见名知意"的原则 * 2.所有的命名不允许使用汉字或拼音 * 3.Java的工程命名建议使用小写,比如:oa.crm.cms... * ...

  4. 浅谈Android编码规范及命名规范

    前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 ...

  5. PHP编码规范PSR-2

    .note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...

  6. Objective-C开发编码规范【转载】

    概要 Objective-C是一门面向对象的动态编程语言,主要用于编写iOS和Mac应用程序.关于Objective-C的编码规范,苹果和谷歌都已经有很好的总结: Apple Coding Guide ...

  7. 前端编码规范之CSS

    "字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看.有条理,这还必须得有一点约束~ 团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对 ...

  8. 前端编码规范之JavaScript

    上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...

  9. Java Script 编码规范【转】

    Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript ...

  10. python编码规范

    python编码规范 文件及目录规范 文件保存为 utf-8 格式. 程序首行必须为编码声明:# -*- coding:utf-8 -*- 文件名全部小写. 代码风格 空格 设置用空格符替换TAB符. ...

随机推荐

  1. 分析Ajax来爬取今日头条街拍美图并保存到MongDB

    前提:.需要安装MongDB 注:因今日投票网页发生变更,如下代码不保证能正常使用 #!/usr/bin/env python #-*- coding: utf-8 -*- import json i ...

  2. PuTTY_0.67.0.0工具链接linux

    1.虚拟机设置 在网络适配器中选中桥接模式,勾选复制物理网络链接状态(p)选项.点击确认. 2.开启虚拟机,检查是否安装有ssh服务器 a.查看是否启动ssh服务器 ps -a | grep ssh ...

  3. python之简述上下文管理

    上下文管理器 原理 代码讲解 原理 上下文管理能保证资源会被正确回收,即保证退出步骤的执行.其用处最多的是,作为确保资源被正确回收的一种方式. 一种重复使用的 try-except-finally 结 ...

  4. c#设置button透明

    c#设置button透明 1.使用代码进行设置: this.button_welcom_login.FlatStyle = System.Windows.Forms.FlatStyle.Flat; t ...

  5. 仿照CIFAR-10数据集格式，制作自己的数据集

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50801226 前一篇博客:C/C++ ...

  6. eclipse svn -- - --- appears to be part of a subversion 1.7 or greater....解决方法

    安装与svn1.7相兼容的flex Eclipse中的SVN(subclipse) 今天差点被TortoiseSVN1.7和subclipse弄崩溃... 还好最后弄好了,在此把方法写出来,以免其他人 ...

  7. BA-siemens-insight报警设置

    以0007001(DDC-B3-09)为例,介绍insight报警的设置方法:

  8. sqlite学习笔记7：C语言中使用sqlite之打开数据库

    数据库的基本内容前面都已经说得差点儿相同了.接下看看如何在C语言中使用sqlite. 一 接口 sqlite3_open(const char *filename, sqlite3 **ppDb) 打 ...

  9. 剑指offer面试题14(Java版）:调整数组顺序使奇数位于偶数的前面

    题目:输入一个整数数组.实现一个函数来调整该数组中数字的顺序.使得全部奇数位于数组的前半部分.全部偶数位于数组的后半部分. 1.基本实现: 假设不考虑时间复杂度,最简单的思路应该是从头扫描这个数组,每 ...

  10. Oracle 常见的33个等待事件

    一． 等待事件的相关知识: 1.1 等待事件主要可以分为两类,即空闲(IDLE)等待事件和非空闲(NON-IDLE)等待事件. 1). 空闲等待事件指Oracle正等待某种工作,在诊断和优化数据库的时 ...