构建移动网站与APP：HTML 5移动开发入门与实战最新章节_常新峰,王金柱,夏毓彦著

1.1　认识HTML

本节我们先简单回顾一下HTML技术的内容，为读者学习HTML 5技术做好铺垫。

1.1.1　HTML的构成

HTML（HyperText Mark-up Language，超文本标记语言，或称为超文本链接标示语言）是构成网页文档的主要语言。(X)HTML指扩展超文本标签语言（EXtensible HyperText Markup Language），是更严格更纯净的HTML版本。(X)HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

提示

XHTML 1.0在2000年1月26日成为W3C的推荐标准。

【代码1-1】是一个符合(X)HTML的文件。

【代码1-1】

     01  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     02  <html xmlns="http://www.w3.org/1999/xhtml">
     03  <head>
     04  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     05  <title>网页标题</title>
     06  <link href="css/home.css" rel="stylesheet" type="text/css" />
     07  </head>
     08  <body>
     09  <div id="doc">
     10      <div id="hd">/*..modules..*/</div>
     11      <div id="bd">/*..modules..*/</div>
     12      <div id="ft">/*..modules..*/</div>
     13  </div>
     14  </body>
     15  <script type="text/javascript" src="js/home.js"></script>
     16  </html>

其中，DOCTYPE和xmlns都是必需的。经常使用的编码格式有UTF-8和GBK两种，UTF-8是针对英文网页设计的编码格式，GBK是针对中文网页设计的编码格式，在没有特殊需求的情况下统一使用UTF-8编码，因为UTF-8是国际编码，通用性好，另外后端页面（如PHP、ASP等）一般都使用UTF-8编码，所以使用UTF-8与其通信时可以防止出现乱码和不必要的麻烦。

CSS一般位于(X)HTML文件的头部，JavaScript一般位于(X)HTML文件的末尾，防止JavaScript文件在加载时出现加载时间过长而导致页面出现空白等糟糕的用户体验。

提示

(X)HTML标签全部小写。

1.1.2　CSS的构成

级联样式表（Cascading Style Sheet，CSS）通常又称为“层叠样式表（Style Sheet）”，是用来进行网页风格设计的。比如，网页上蓝色的字、红色的按钮，这些都是风格。通过设立样式表，可以统一控制(X)HTML中各标签的显示属性。CSS样式表可以使人更有效地控制网页外观。【代码1-2】是一个CSS文件。

【代码1-2】

     01    /*css reset*/
     02    html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6/*...*/
     03    /*全局公共样式*/
     04    textarea{resize:none;} /*hack for chrome, disable chrome resizes textarea*/
     05    a{color:#049;outline-style:none;}
     06    a:hover{color:#f00;}
     07    .cf{zoom:1;}
     08  .cf:after{content:'.';display:block;visibility:hidden;clear:both;height:0px;}
     09    /*moduleABC ABC模块的样式*/
     10    #moduleABC h2{font-size:14px;font-weight:bold;}
     11    #moduleABC p{font-size:12px;line-height:1.5;}

如代码所示，CSS文件共分3部分：第一部分为CSS重置，第二部分为公共样式，第三部分为模块样式（非公共）。所有的公共样式一般写在第二部分，位于模块样式之上，方便查找。

在模块CSS部分，尽量写出样式的详细路径，比如：

     01    #mty_bbs_myblock .searchbar .addblock ul li a{margin:.2em 0;padding-
  bottom:.2em}

尽量不要简写成：

     01  #mty_bbs_myblock .searchbar a{margin:.2em 0;padding-bottom:.2em}

提示

CSS代码建议全部小写。

1.1.3　JavaScript的构成

JavaScript就是一个被埋没很久的编程语言，早在1995年被布兰登·艾奇（Brendan Eich）设计出来。

最初网景（Netscape）公司将其脚本语言命名为LiveScript，在与Sun合作之后将其改名为JavaScript，随着Netscape Navigator 2.0（见图1.1）公布于世，虽然想要师出名门的效果，但是网景公司却把它作为给非程序人员的编程语言来推广和宣传，非程序开发者并不对其买账，JavaScript由此被埋没长达十年之久。不过JavaScript的确具备了很多优秀的特点，近几年的发展势头越来越好，预示着JavaScript春天般的前景。

图1.1　浏览器Netscape Navigator 2.0

用JavaScript编写的代码需要放在.html文档中才能被浏览器执行，有两种方式可以做到这一点。

1．直接内嵌JavaScript代码

第一种方式是将JavaScript代码放到文档<head>标签的<script>标签中，见【代码1-3】。

【代码1-3】（第一个JavaScript程序hello world）

     <!DOCTYPE html>
     <html>
       <head>
         <title>hello world</title>
         <script>
                alert('hello world!');
         </script>
       </head>
       <body>
       </body>
     </html>

将上面的代码保存到HTML文件中（在记事本中写作，然后另存为扩展名是html的文件），用任意浏览器打开，就可以看到一个弹出对话框。

2．引用JavaScript文件

第二种方式是把JavaScript代码存为一个扩展名为js的独立文件中。以前的做法是在文档<head>里用<script>标签的src属性来指向该文件，见【代码1-4】。

【代码1-4】

     <!DOCTYPE html>
     <html>
       <head>
         <title>hello world</title>
         <script src="helloworld.js"></script>
       </head>
       <body>
       </body>
     </html>

随着最近几年的发展，目前业界推荐的做法是把【代码1-4】中的<script>放到HTML文档最后，即</body>标签之前。这样做的目的是使浏览器更快地加载页面并展示给用户，从而提高用户体验效果。

1.1 认识HTML

1.1.1 HTML的构成