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这两个标签。

精简代码

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

方案讲述如何将图文声像或其他类型的素材合成一个可以独立运行的EXE文件，并制作成可自动运行的多媒体光盘或优盘。

临近毕业，师生们在一起学习生活了多年，有许多值得留恋的东西。大家希望将以往积攒的图文声像素材合成一份个性化的多媒体作品，并制作成能够自动演示的光盘或优盘，分发留念。这个任务如果用PPT完成，对某些特殊类型媒体素材的支持实现起来比较麻烦，往往需要使用插件或VBA编程实现。而如果用改Flash制作，又需要一定的技能。

其实，有更简单但比较专业的方法可以不编程、不装插件，就能轻松实现制作效果比较专业的多媒体纪念册。完成后的作品是一张插入光驱就能自动演示的多媒体光盘，不依赖于任何工具软件环境便可独立运行。

本案例我们要制作的纪念册光盘主要内容包括“老师寄语”“生活影集”“班级频道”“活动录影”“班长作品”“历史珍藏”等多个部分，每个部分所展示的媒体类型都各不相同。

前期材料准备工作

首先安装多媒体设计工具Multimedia Builder（简称MMB）。接下来准备好建立多媒体演示作品所需要的原始素材。包括文字、图片、录音、视频、Flash作品、EXE可执行文件作品等。

1. 图像文件。需要BMP、JPG、PCX、PNG、TIFF等常用格式。如果手头上的图像文件不是这些格式，要用图像转换工具（如SnagIt、ACDSee、XnView Shell Extension等）转换。

2. 视频文件。可用的视频文件包括AVI、QT、MOV、MPG、MPEG、M1V、ASF、WMV等常用格式。如果现有视频文件不是这些格式，用视频格式转换工具（如格式工厂）转换为以上格式即可。

3. 网页文件。现成的HTML网页格式文件以及已有的远程网络地址均可。

4. Flash文件。对于已有的Flash作品，请准备好SWF格式的Flash文件。

5. 可执行文件。若有EXE可执行作品文件，或想把某个系统小工具集成到多媒体作品中，准备好这些EXE文件即可。

建立媒体工程文件

启动MMB软件，系统默认载入一个扩展名为MBD的多媒体工程文件，文件名为Media1.mbd，为便于辨认和保存，最好给工程起一个合适的文件名，例如“毕业纪念册.mbd”，并将文件存盘。

设定工程样板参数

点击MMB系统菜单命令“方案→方案设置”，弹出“方案设置”窗口，定义好窗口尺寸，考虑到目标用户的屏幕可能有大有小，为了顾及到大多数用户，这里可以设置一个比较适中窗口尺寸，比如1024×768。此外，还可根据需要设置好窗口的其他特性（图1）。

作品主菜单布局规划

设计的第一步是布局多媒体作品的主控菜单。

在设计窗口的最底部出现的页面栏中，默认出现的只有“页面1”一个页面文件，我们需要用“页面→添加页面”命令，添加足够多的页面文件。

点击“页面1”，然后用左侧工具箱中的“文本按钮”工具给该页面添加功能按钮，并将按钮调整到适当的位置，双击按钮，给按钮命名（比如：“老师寄语”）。以此类推，给主菜单中要出现的所有模块添加功能按钮，例如“生活影集”“班级频道”“活动录影”“班长作品”“历史珍藏”等，作为装饰还可添加一个封面图片。这样，主控菜单项目就设计好了。

各级功能模块的设计

主控菜单设计好之后，接下来就是设计各级功能模块。

1. 老师寄语致辞

老师寄语是以文字方式保留的资料，因此这里我们要设计一个展示文字的页面。点击“页面2”，从左侧工具面板中选择“创建文本框”按钮，接着选择“创建段落文字框”命令，在页面中加入段落文字框（图2），然后将老师寄语文字复制到该文字框中。拖动边框设置好文本框在页面中的位置。

接着建立菜单按钮动作链接。返回到主控菜单“页面1”，双击“老师寄语”按钮，在弹出的窗口中点选“动作”组下的第一个按钮，接下来在弹出的动作窗口中设置触发操作为“鼠标点击时→跳至某页（标签）”，页面选择为“页面2”（图3）。这样就为主控菜单的第一个按钮建立了点击后转到相应页的链接。

2. 生活学习影集

生活影集主要是展示老师和同学的一些优秀摄影作品，素材是各类图片，因此这里我们要设计图片展示页面。

首先在页面2之后添加足够多能容纳照片的页面并用位图工具按钮给每个页添加一幅照片。

接下来用上面介绍的类似方法为主控“生活影集”按钮与第一张照片建立链接，同时建立各张照片的点击动作为跳转到下一页。完成生活影集部分的制作。

3. 校办特色频道

为了将同学们自己制作的校办特色网站频道植入多媒体作品中作为留念，我们需要将HTML网页文件及其涉及到的所有相关文件集成到多媒体作品之中。

首先添加一个页面，作为频道页面。点击“网页”工具按钮，在添加的空白页中画出网页出现的位置，双击对象设置好网页文件名或网页地址（图4）。

接下来为“班级频道”主控按钮与频道页面建立链接。方法同上。

4. 活动录像视频

在校期间的许多活动都是视频文件，如何将这些视频文件集成到多媒体工程文件之中呢？

首先添加视频系列缩略图页面，然后插入要展示的视频缩略图片，再添加一些空白页面作为每个视频的放置页面，并用“视频”工具按钮给每个视频页面添加一个相应的视频文件（图5）。

最后建立“活动录影”主控按钮与视频缩略图页面的链接。方法同上。

5. 班长获奖作品

班长曾经在全国Flash游戏大赛中获奖，为班级争得了荣誉，把他的Flash作品集成到多媒体作品中也很有意义。那么如何实现呢？

对于Flash作品的导入，MMB软件专门提供了Flash导入接口，我们只需先设定好Flash放置页面，然后用Flash工具按钮置入已有Flash文件即可（图6）。

6. 珍藏EXE文件

还有一些有意义的文件是以前班里部分同学的软件作品，这些作品都是以EXE可执行文件的方式存在的。那么如何将这些文件也集成到多媒体作品中呢？

对于EXE类文件的导入，我们需要用捆绑对象的方法来解决。首先点击“捆绑对象”按钮，在屏幕上画出对象所在区域，双击区域设置捆绑对象EXE文件（图7）。

以上两步也需建立主控按钮与本页面的链接，方法同上。此外还需建立各页面的跳转，方法也雷同。

将作品编译并刻盘

每个模块设计之后，通过“方案→调试”命令反复调试并修改设计，满意之后，就可以将作品编译成可以独立运行的EXE文件了。

点击“文件→检查并发布”命令，弹出编译发布窗口，在窗口中输入编译文件的输出路径，选择编译的质量为“最佳质量”，确定之后稍等片刻便可获得可以独立运行的多媒体文件。

编译的同时会产生一个Autorun.inf文件，如果我们把这个文件连同编译所得的EXE文件一并刻录到光盘上或拷贝到优盘的根目录中，那么这张光盘或这个优盘就变成了一个可以自动运行的电子纪念册。

对路径-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。

绝对路径-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
其实绝对路径与相对路径的不同之处，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。　

　　以下为建立路径所使用的几个特殊符号，及其所代表的意义。

　　“.”–代表目前所在的目录。

　　“..”–代表上一层目录。

　　“/”–代表根目录。

例：假设读者所建立的Web站点拥有如下图所示目录路径。假若要在Ref.htm文件中引用BeRef.gif文件时，其相对路径如下：
　　./SubDir2/BeRef.gif
上面的引用路径中，”.”代表目前的目录(Dir1)，所以”./SubDir2”代表目前目录下的SubDir2。其实，也可以省略”./”直接用这个式引用。

　　SubDir2/BeRef.gif

　　若使用绝对路径以根目录为参考点引用该文件时，引用路径如下：

　　/Dir1/SubDir2/BeRef.gif

　　如果Web站点的目录之结构如下图示:

　　引用BeRef.gif文件的相对路径又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件时其相对路径如下：
　　../SubDir2/BeRef.gif
　　上面的引用路径中，”..”代表上一层目录，所以，/Dir2”代表上一层目录下的Dir2子目录。若使用绝对路径引用时，则引用路径如下：　　
/Dir2/BeRer.gif
　　我们再举一个比较复杂的例子，来比较一下相对路径与绝对路径的使用。假设在读者所建立的Web站点中，拥有如下图的目录路径。

　　我们用以一个表格来说明在上图的情况下，某文件引用另一文件时，所应使用的相对路径与绝对路径。　　　　

　　上表中比较需要说明的是”../../”所代表的意义。

　　“..”代表上一层目录，而”../../”所代表的是上一层目录的上一层目录。所以，从上表中可以看出，如果引用的文件存在于目前目录的子目录中，或者存在于上一层目录的另一个子目录中，运用相对路径是比较方便的。如果不是时，则利用绝对路径。从上表中，亦可以看出，当被引用的是同一个文件时，引用文件所使用的绝对路径是一样的。

在线咨询

上一篇：奉上六个经典的HTML5面试问题，太有用啦
下一篇：JQuery基础笔记及面试题+JavaScript笔记及面试题（含答案）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商