HTML 5 代码规范
本节我们列出了使用 html 5 过程中总结出来的良好的实践
使用正确的文档类型
文档类型声明位于 html 文档的第一行
<!DOCTYPE html>
如果习惯了全小写,可以使用下面的
<!doctype html>
使用小写元素名
HTML5 元素名可以使用大写和小写字母
但我们推荐全部都使用小写
混合了大小写的风格是非常糟糕的
开发人员通常使用小写
小写风格看起来更加清爽
小写字母容易编写
<SECTION><p>这是段落</p></SECTION>
<Section><p>这是段落</p></SECTION>
<section> <p>这是段落</p> </section>
所有 HTML 元素
HTML5 允许不一定要所有元素 ( 例如 <p> 元素)
但我们建议每个元素都要
<section> <p>这是段落 <p>这是段落 </section>
<section> <p>这是段落</p> <p>这是段落</p> </section>
空的 HTML 元素
HTML5 允许空的 HTML 元素也不一定要
但我们推荐空的 HTML 元素
可以这么写
< charset="utf-8">
也可以这么写:
< charset="utf-8" />
在 XHTML 和 XML 中斜线 (/) 是必须的
如果想要 XML 软件使用我们的,使用这种风格是非常好的
使用小写名
HTML5 名允许使用大写和小写字母
我们推荐使用小写字母名
同时使用大小写是非常不好的习惯
开发人员通常使用小写
小写风格看起来更加清爽
小写字母容易编写
<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;">
定义好的尺寸,在加载时可以预留指定空间,减少闪烁
<img src="html5.gif" alt="HTML5" style="width:128px;">
空格和等号
等号前后可以使用空格
<link rel = "stylesheet" href = "styles.css">
但我们推荐少用空格
<link rel="stylesheet" href="styles.css">
避免一行过长
使用 HTML 编辑器,左右滚动是不方便的
每行尽量少于 80 个字符
空行和缩进
不要无缘无故空行
为每个逻辑块空行,这样更易于阅读
缩进使用两个空格,不建议使用 TAB
比较短的间不要使用不必要的空行和缩进
<body> <h1>简单编程</h1> <h2>HTML</h2> <p> 简单编程,简单编程 简单编程,简单编程 简单编程,简单编程 简单编程,简单编程 </p></body>
<body><h1>简单编程</h1><h2></h2> <p>简单编程,简单编程。简单编程,简单编程。简单编程,简单编程。简单编程,简单编程</p></body>
<table> <tr> <th>Name</th> <th>Description</th> </tr> <tr> <td>A</td> <td>Description of A</td> </tr> <tr> <td>B</td> <td>Description of B</td> </tr> </table>
<ol> <li>London</li> <li>Paris</li> <li>Tokyo</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="zh">
声明语言是为了方便屏幕阅读器及引擎
省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃
省略 <body> 在旧版浏览器 (IE9) 会发生
省略 ?
HTML5 中, <head> 是可以省略的
认情况下,浏览器会将 <body> 之前的到认的 <head> 元素上
<!DOCTYPE html> <html> <title></title> <body> <h1>这是</h1> <p>这是段落</p> </body> </html>
元数据
HTML5 中 <title> 元素是必须的,名描述了的
<title>简单编程</title>
和语言可以让引擎很快了解的
<!DOCTYPE html> <html lang="zh"> <head> < charset="UTF-8"> <title>简单编程</title> </head>
HTML 注释
注释可以写在 <!-- 和 --> 中
<!-- 这是注释 -->
比较长的可以在 <!-- 和 --> 中分行写
<!-- 这是较长。 这是 较长。这是较长。 这是 较长 这是较长。 这是 较长。-->
长第字符缩进两个空格,更易于阅读
样式表
样式表使用简洁的语法格式,HTML5 中,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; }
在逗号和冒号后空格是常用的规则
在 HTML 中载入 JavaScript
使用简洁的语法来载入外部的脚本,在 HTML5 中 type 不是必须的
<script src="myscript.js"></script>
使用 JavaScript 访问 HTML 元素
糟糕的 HTML 格式可能会导致 JavaScript 执行
下面的两个 JavaScript 语句会不同结果
var obj = getElementById("Demo");var obj = getElementById("demo");
HTML 中 JavaScript 尽量使用相同的命名规则
使用小写名
大多 Web 服务器 (Apache,Unix) 对大小写敏感
london.jpg 不能通过 London.jpg 访问
其他 Web 服务器 (Microsoft,IIS) 对大小写不敏感
london.jpg 可以通过 London.jpg 或 london.jpg 访问
你必须保持统一的风格,我们建议统一使用小写的名
扩展名
HTML 后缀可以是 .html (或 .htm )
CSS 后缀是 .css
JavaScript 后缀是 .js
.htm 和 .html 的区别
.htm 和 .html 的扩展名本质上是没有区别的
浏览器和 Web 服务器都会把它们当作 HTML 来处理
区别在于:
.htm 应用在早期 DOS 系统,系统现在或者只能有三个字符
在 Unix 系统中后缀没有特别限制,一般用 .html
如果 URL 没有指定名, 服务器会返回认的名
通常认名为 index.html,index.htm,default.html,和 default.htm
如果服务器只配置了 "index.html" 作为认,那么必须将命名为 "index.html",而不是 "index.htm"
但是,通常服务器可以设置多个认,你可以根据需要设置认名
不管怎样,HTML 完整的后缀是 ".html"