HTML5 风格指南和编码方式

HTML编码习惯

网页开发者通常不确定在HTML里用什么编码风格和语法结构.

在2000年到2010年之间,许多开发者把HTML转换为XHTML.

在XHTML里,强制开发者们的代码写法必须合法且格式良好.

当验证代码时HTML5稍微更懒散.

在HTML5里,你必须创建你自己的最优方法,风格和编码习惯.

聪明点和未来校验

样式的后继使用,让其他人更容易理解和使用你的HTML.

今后,像XML阅读器这样的程序或许要阅读你的HTML.

使用格式良好(更接近XHTML)的语法,或许很聪明.

要一直保持你的编码风格良好,整洁,干净.

使用正确的文档类型

<!DOCTYPE html>

如果你想整个页面都用小写书写标签,你可以用:

<!doctype html>

用小写字母来书写元素名

HTML5允许元素名里大小写混合.

我们建立元素名用小写:

大小写混合的名字是不好的
开发者使用小写字母书写名字(像XHTML)
小写字母看起来更整齐
小写字母更容易书写

不好的

<SECTION> 
  <p>这是一个段落.</p>
</SECTION>

非常不好的

<Section> 
  <p>这是一个段落.</p>
</SECTION>

好的

<section> 
  <p>这是一个段落.</p>
</section>

关闭所有的HTML元素

在HTML5里,你可以不用关闭所有元素(例如<p>元素).

我们建议关闭所有的HTML元素:

看起来不好的:

<section>
  <p>这是一个段落.
  <p>这是一个段落.
</section>

看起来好的:

<section>
  <p>这是一个段落.</p>
  <p>这是一个段落.</p>
</section>

关闭空的HTML元素

在HTML5里,空元素可以不需要结束标签.

这是允许的:

<meta charset="utf-8">

这也是允许的:

<meta charset="utf-8" />

斜线(/)在XHTML和XML都是需要的.

如果你期望XML软件来访问你的页面,保持这种写法是一个好主意.

属性名字用小写字母

HTML5允许属性名用大小写混合.

我们建议属性名用小写字母:

大小写混合来书写名字不好
开发者用小写字母名字(例如XHTML)
小写字母看起来更整洁
小写字母更容易书写

看起来不好的:

<div CLASS="menu">

看起来好的:

<div class="menu">

属性值用引号引起来

HTML5允许属性值不带引号.

我们推荐属性值用引号引起来:

如果值包含空格,你就必须用引号
大小写字母混合写是不好的
值用引号引起来易于阅读

下面的这句将不会正常工作,因为值包含空格:

<table class=table striped>

下面这句将正常工作:

<table class="table striped">

图片属性

图片要一直用alt属性.当图片不可见时这很重要.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

要一直定义图片大小.不然会产生闪烁,因为在图片加载前浏览器用空格显示.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和相等符号

等于符号两边有空格是合法的:

<link rel = "stylesheet" href = "styles.css">

但是无空格更易于阅读,属性和值可以更好的在一起:

<link rel="stylesheet" href="styles.css">

避免代码行很长

当用编辑器编辑HTML时,左右滚动来查看HTML代码很不方便.

尽量不要让一行的代码超过80个字符.

空行和缩进

不要无缘无故的添加一个空行.

为了可读性,添加空行来分割大的或逻辑代码块.

为了可读性,添加两个空格来缩进.不要用TAB.

不要用多余的空行和缩进.不必在短的或逻辑一样的代码之间添加空行.不必给每个元素添加缩进:

不必要的

<body>

  <h1>知名的城市</h1>

  <h2>上海</h2>

  <p>上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市、
国家中心城市、超大城市,国际经济、金融、贸易、航运、科技创新中心和综合交通枢纽,
首批沿海开放城市.</p>

</body>

较好的:

<body>

<h1>知名城市</h1>

<h2>上海</h2>
<p>上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市、
国家中心城市、超大城市,国际经济、金融、贸易、航运、科技创新中心和综合交通枢纽,
首批沿海开放城市.</p>

</body>

表格例子:

<table>
  <tr>
    <th>名字</th>
    <th>描述</th>
  </tr>
  <tr>
    <td>A</td>
    <td>A的描述</td>
  </tr>
  <tr>
    <td>B</td>
    <td>B的描述</td>
  </tr>
</table>

列表例子:

<ol>
  <li>上海</li>
  <li>深圳</li>
  <li>北京</li>
</ol>

省略<html>和<body>?

在HTML5标准里,<html>标签和<body>标签能省略.

下面的代码将作为HTML5验证:

例子:

<!DOCTYPE html>
<head>
  <title>也标题</title>
</head>

<h1>这是标题</h1>
<p>这是段落.</p>

我们不建议省略<html>和<body>标签.

<html>元素是文档的根元素.推荐在这个元素上指定页面语言:

<!DOCTYPE html>
<html lang="en-US">

声明页面语言对于应用(屏幕阅读器)和搜索引擎的可访问性来说很重要.

省略<html>或<body>会使DOM和XML软件崩溃.

省略<body>在老版本浏览器(IE9)上会产生错误.

省略<head>?

在HTML5标准里,<head>标签也可以省略.

默认情况下,浏览前将把<body>标签前的所有元素放入一个默认的<head>标签里.

你可以通过省略<head>标签来减少HTML的复杂度:

<!DOCTYPE html>
<html>
<title>页标题</title>

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落.</p>
</body>

</html>

省略标签对于网页开发者来说很陌生.需要时间习惯.

元数据

在HTML5里<title>元素是必须的.尽量使标题更有意义:

<title>HTML5语法和编码方式</title>

为了确保正常的解析,搜索引擎正确的检索,语言和编码方式应该尽早的在文档里定义:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 语法和编码方式</title>
</head>

HTML 注释

短的文档注释应该写在一行里,:

<!-- 这是一个注释 -->

如果是很长的注释,生成很多行,注释应该这样写

<!-- 
  这是注释这是注释.
  这是注释这是注释.
-->

长的注释如果缩进两个空格比较容易阅读.

样式表

用简单的语法来链接样式表(type属性不是必须的):

<link rel="stylesheet" href="styles.css">

短规则可以压缩成这样写,在一行上,像这样

p.into {font-family: Verdana; font-size: 16em;}

多条样式要分行写:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

左花括号和选择器放在同一行.
在花括号之前留有一个空格.
用两个空格进行缩进.
属性和值之间用冒号和一个空格.
在每个逗号或分号之后加一个空格.
每个属性值对后面加分号,包括最后一对.
如果值有空格就用引号引起来.
把右花括号放在新的一行,没有前置空格.
避免每行超过80个字符.

在空格或分号后加一个空格.

在HTML里加载JavaScript

用简单的语法加载外部脚本(type属性不是必须的):

<script src="myscript.js">

用JavaScript使用HTML元素

不整洁的HTML风格可能会导致JavaScript错误.

下面的两句JavaScript语句将产生不同的结果:

例子

var obj = getElementById("Demo")

var obj = getElementById("demo")

如果可能的话,在HTML里使用相同的命名习惯(像JavaScript).

访问JavaScript风格指南

用小写字母书写文件名

大多数网络服务器(Apache,Unix)对文件名是区分大小写的:

london.jpg文件不能以London.jpg访问.

其它网络服务器(Microsoft,IIS)不区分大小写:

london.jpg可以以London.jpg或london.jpg访问.

如果你用大小写混合,将会很麻烦.

如果你从不区分大小写的服务器移到区分大小写的服务器,即使是一些小的错误也将破坏你的网站.

为了避免这些错误,要尽量一直用小写书写文件名.

文件扩展名

HTML文件的扩展名应该是.html或.htm.

CSS文件的扩展名应该是.css.

JavaScript文件的扩展名应该是.js.

.htm和.html之间的区别

.htm和.html这两个扩展名之间没有任何区别.两者都将被浏览器或服务器当做HTML处理.

不同的是:

.htm:在在早期的DOS系统里文件的扩展名限制为3个字符.

.html:Unix操作系统没有这个限制.

技术上的不同

当URL不指定文件名(例如:http://www.21xrx.com/css/),服务器将返回一个默认的文件名.通常默认文件名是index.html,index.htm,default.html和default.htm.

如果你的服务器只配置了"index.html"作为默认文件名,你的默认返回文件为"index.html",而不是"index.htm".

不管怎样,服务器可以配置多个默认文件,你可以根据需求设置许多默认文件.

无论如何,HTML文件的完整扩展名是".html".

HTML5 风格指南和编码方式

HTML编码习惯

聪明点和未来校验

使用正确的文档类型

用小写字母来书写元素名

不好的

非常不好的

好的

关闭所有的HTML元素

看起来不好的:

看起来好的:

关闭空的HTML元素

这是允许的:

这也是允许的:

属性名字用小写字母

看起来不好的:

看起来好的:

属性值用引号引起来

图片属性

空格和相等符号

避免代码行很长

空行和缩进

不必要的

较好的:

表格例子:

列表例子:

省略<html>和<body>?

例子:

省略<head>?

元数据

HTML 注释

样式表

在HTML里加载JavaScript

用JavaScript使用HTML元素

例子

用小写字母书写文件名

文件扩展名

.htm和.html之间的区别

技术上的不同

评论区