整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML编码规范

版规则

缩进

使用2个空格缩进

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>
.example {
  color: blue;
}

大小写

只允许使用小写。

所有的代码都用小写字母:适用于元素名,属性,属性值(除了文本和CDATA), 选择器,特性,特性值(除了字符串)。

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png"
alt="Google">

行为空格

建议删除行尾白空格。

<!-- 不推荐 -->
<p>What?  </p>
<!-- 推荐 -->
<p>Yes please.</p>

常规Meta规则

编码

如果没有特殊需求,一般采用utf-8编码。如果是cms站点,则遵守该站点的编码规则。

<!-- 网页编码 -->
<meta charset="utf-8">

注释

尽可能的去解释你写的代码。说明该代码包括什么、目的是什么、能做什么、为什么使用它等。

注释是否需要详尽,取决于项目的复杂程度。

一般单行注释:

<!-- col -->

模块间注释:

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循环注释:

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms输出注释:

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab选项卡内容注释:

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常规HTML设计规则

文档类型

使用html5文档声明,不再使用XHTML(application/xhtml+xml)。

HTML5是目前所有HTML文档类型中的首选:

<!DOCTYPE html>

HTML 的正确性

编写有效、正确的HTML代码,否则很难达到性能上的提升。

可以使用一些工具验证你的代码,如 W3C HTML validator

HTML 的语义性

根据HTML各个元素的用途而去使用它们。

<!-- 不推荐 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>
<!-- 推荐 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分标签说明:

  • div 主要用于布局,分割页面的结构;
  • ul/ol 主要用于无序/有序列表;
  • dl/dt/dd 当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签;
  • span 没有特殊的意义,可以用作排版的辅助,然后在css中定义span;
  • h1-h6 标题, 根据重要性依次递减;
  • h1 最重要的标题;
  • label 使表单更有亲和力而且能辅助表单排版;

不推荐使用的标签:

  • font 文字的外观,大小和颜色;
  • u 文本下划线;
  • center 居中对齐;
  • s 删除线;
  • strike 删除线;
  • noframes 无视框时的内容;
  • iframe 定义嵌入视图;
  • isindex 不建议使用(可搜寻,使用input代替);
  • dir 目录式列举;
  • menu 菜单列表;
  • basefont 定义基本字体;
  • applet 定义java程序;
  • frame 定义个别视框;
  • frameset 视框格式总定义;

多媒体元素降级处理

给多媒体元素,比如canvas、videos、 images增加alt属性,提高可用性(特别是常用的img标签,尽可量得加上alt属性,提供图片的描述信息)。

<!-- 不推荐 -->
<img src="world.jpg">
<!-- 推荐 -->
<img src="world.jpg"
alt="our world images">

type属性

在样式表和脚本的标签中忽略type属性。

HTML5默认type为text/css和text/javascript类型,所以没必要指定。即便是老浏览器也是支持的。

<!-- 不推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>
<!-- 推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代码格式规则

每个块元素、列表元素或表格元素都独占一行,每个子元素都相对于父元素进行缩进。按设计稿划分模块,尽量使页面模块化,模块与模块之前要有清晰的注释。

如上面页面框架,推荐写法:

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML与SEO

页面良好层次

保证整个页面在未加载样式表时仍有较好的层次清晰的页面结构。

<!-- 不推荐 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>
<!-- 推荐 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

权重标签使用

H标签使用

  • h1 权重高,体现当前网页中相对比较重要的信息,但不宜过多,建议一个页面只放一个;
  • h2 可以做副标题;
  • h3 可以做新闻列表;
  • h4-h6 可做相关新闻的列表标签属性完整;

strong、b使用

将需要加粗的文字使用b标签来显示。

将需要强调的文字(主要指包含关键词的信息)使用strong标签来强调主要内容。

注:b是粗体标签,属于实体标签,它所包围的字符将被设为bold(粗体);strong 是加重语气标签,属于逻辑标签,它的作用是加强字符语气。

标签属性使用

在很多情况下,a都要使用title来说明该链接的相关说明或目的意义。

例如:当使用overflow隐藏掉a中的溢出文字时,该a中的title是必不可少的,它可以告诉用户被隐藏掉的文字内容是什么;又或者当一个图片型链接出现时,该a中的title同样是必不可少的,它可以告诉用户这个图片链接是做什么用的。

注:仅在img里添加alt标签在火狐提示文字是出不来的,alt是图片加载失败或未加载完全时显示出来的提示文字,要想鼠标移上去显示提示信息应该用title,严谨的写法是img里加入alt和title这两个标签。

精简代码

代码保持精简,最优化,这样搜索引擎才更喜欢。

html网页中显示html代码

方法1

<textarea> 这里是代码<!DOCTYPE HTML><html lang="zh-CN"> <meta charset="UTF-8"> </textarea>

<textarea> 这里是代码<!DOCTYPE HTML><html lang="zh-CN"> <meta charset="UTF-8"> </textarea>


效果

TML 代码约定

很多 Web 开发人员对 HTML 的代码规范知之甚少。

在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML。

使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。

而针对于 HTML5 ,我们应该形成比较好的代码规范,以下提供了几种规范的建议。

使用正确的文档类型

文档类型声明位于HTML文档的第一行:

<!DOCTYPE html>

如果你想跟其他标签一样使用小写,可以使用以下代码:

<!doctype html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

推荐使用小写字母:

  • 混合了大小写的风格是非常糟糕的。

  • 开发人员通常使用小写 (类似 XHTML)。

  • 小写风格看起来更加清爽。

  • 小写字母容易编写。

不推荐:

<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 元素也不一定要关闭:

我们可以这么写:

<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 编辑器,左右滚动代码是不方便的。

每行代码尽量少于 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)会发生错误。

省略 <head>?

在标准 HTML5 中, <head>标签是可以省略的。

默认情况下,浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。

实例

<!DOCTYPE html>

<html>

<title>页面标题</title>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

</body>

</html>

尝试一下 »

现在省略 head 标签还不推荐使用。

元数据

HTML5 中 <title> 元素是必须的,标题名描述了页面的主题:

<title>菜鸟教程</title>

标题和语言可以让搜索引擎很快了解你页面的主题:

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>菜鸟教程</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 代码规范。

使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格,我们建议统一使用小写的文件名。

文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css

JavaScript 文件后缀是 .js

.htm 和 .html 的区别

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。

区别在于:

.htm 应用在早期 DOS 系统,系统现在或者只能有三个字符。

在 Unix 系统中后缀没有特别限制,一般用 .html。

技术上区别

如果一个 URL 没有指定文件名 (如 http://www.runoob.com/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。

如果服务器只配置了 "index.html" 作为默认文件,你必须将文件命名为 "index.html", 而不是 "index.htm"。

但是,通常服务器可以设置多个默认文件,你可以根据需要设置默认文件吗。

不管怎样,HTML 完整的后缀是 ".html"。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!