您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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"


联系我
置顶