HTML+CSS网页设计实践教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3 HTML 5与HTML 4的区别

HTML 5以HTML 4以及之前的版本为基础，对HTML 4进行大量的修改，这些修改内容包含语法的改变、元素的废除和增加、属性的废除和增加，以及全局属性等。

1.3.1 语法的改变

HTML的语法是在SGML的基础上建立起来的。SGML的语法非常复杂，要开发能够解析SGML语法的程序也很不容易，因此，很多浏览器都不包含SGML的分析器，这也导致之前的HTML的执行在各个浏览器之间并没有一个统一的标准。

HTML 5所要解决的问题之一就是提高Web浏览器之间的兼容性，为了确保兼容性，就需要有一个统一的标准。因此，HTML 5围绕着Web标准重新定义了一套在现有的HTML的基础上修改而来的语法，使它运行在各个浏览器时都能够符合这个通用标准。

HTML 5在HTML 4的语法上进行了很大的改变，如下代码演示为一个基本的HTML 5页面的框架。

    <!DOCTYPE html>
        <html lang="zh-cn">
        <meta charset="utf-8" />
        <title>运行第一个网页</title>
        <head>
                <title>无标题文档</title>
        </head>
        <body>
                这是HTML 5页面。
        </body>
    </html>

从上述代码中可以看到，HTML 5的页面与之前的版本相比要简单得多，它在语法上有了很大的改变。

1．DOCTYPE声明

DOCTYPE声明是HTML文档中的第一个内容，它位于<html>标记之前，告知浏览器文档所使用的HTML规范。

虽然HTML 4与HTML 5中都包含DOCTYPE的声明，但是它们之间也存在着差异。前者有三个不同的文档类型，由于它基于SGML，因此，它需要引用一个DTD。而HTML 5不再基于SGML，因此不需要引用DTD，直接声明文档类型让浏览器按照它们应该的方式运行。HTML 5中的声明代码如下：

    <!DOCTYPE html>

当使用工具时可以在DOCTYPE声明方式中加入SYSTEM识别符。代码如下：

    <!DOCTYPE html SYSTEM "about:legacy-compat">

2．命名空间声明

HTML 5不需要再像HTML 4中那样为html元素添加命名空间。例如，在HTML 4中声明html元素时的代码如下：

    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">

HTML 4中的xmlns属性在XHTML中是必需的，它没有任何实际效果，但是由于验证原因，在把HTML转换为XHTML的过程中是很有帮助的。HTML 5中没有理由这么做，但是仍然可以定义此属性的值，并且此属性的值只有一个。HTML 5中可以直接通过以下代码声明文档：

    <html lang="zh-cn">

另外，HTML 5中新增加了一个名称是manifest的属性，此属性的值指向一个URL地址，表示脱机使用时定义的缓存信息。

3．元信息标记指定字符编码

<meta>表示元信息标记，它可以提供有关页面的元信息，例如，针对搜索引擎和更新频度的描述和关键词等。

<meta>标记位于文档的头部时，不包含任何内容，并且此标记中的属性定义了与文档相关联的名称/值对。HTML 4中使用以下代码定义元信息：

    <meta http-equiv="content-type" content="text/html; charset="UTF-8">

在HTML 5中可以直接指定charset属性，代码如下：

    <meta charset="UTF-8">

<meta>标记中可以添加多个属性，同时HTML 4中废除了scheme属性，同时又添加了charset属性，如表1-1所示为HTML 4和HTML 5对此标记属性的支持情况。在该表中，“√”表示此版本支持某属性，而“×”则表示不支持某属性。

表1-1 HTML 4和HTML 5对<meta>标记属性的支持

【练习1】

例如，本次练习分别通过为<meta>标记的属性指定不同的属性实现不同的内容设置，设置步骤如下所示。

（1）将name属性的值指定为keywords，可以定义针对搜索引擎的关键词。代码如下：

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

（2）将name属性的值指定为description，可以定义对页面的描述。代码如下：

    <meta name="description" content="免费的Web技术教程。" />

（3）将name属性的值指定为revised，可以定义页面的最新版本。代码如下：

    <meta name="revised" content="David, 2008/8/8/" />

（4）设置http-equiv属性的值为refresh，指定每5s刷新一次页面。代码如下：

    <meta http-equiv="refresh" content="5" />

4．省略引号

在HTML 4以及之前的版本中，指定属性值时，属性值不仅可以使用双引号，也可以使用引号，甚至是省略引号。HTML 5在此基础上进行了改进，如果属性值不包含空字符串、“<”、“>”、“=”、单引号以及双引号等字符时，属性两边的引号可以省略。示例代码如下：

    <input type=text checked=checked/>

5．省略标记语法

HTML 5继承了HTML 4中标记可以省略的特点，使页面结构更加灵活。它将省略标记语法的情况分为三类，说明如下。

1）省略开始和结束标记

简单来说，就是省略了一个元素的开始标记和结束标记，这时，这些元素是隐式存在的。这类元素包括html、head、body、colgroup和tbody等。例如，在HTML文档页面中，body元素可以省略不写，但是它仍然会存在于文档结构中，可以使用document.body进行访问。

2）省略结束标记

这类元素可以省略标记，HTML 5会自动为其添加相应的结束标记。这些元素包括li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

3）不允许写结束标记

这类元素只能通过“<元素名称/>”的形式进行使用，它们包括area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

6．省略逻辑属性

HTML 5中的许多属性都是逻辑值，例如checked和disabled等。这些属性的默认值都是false，如果不指定属性，则表示不使用属性。而如果将一个逻辑属性的值指定为true，则有三种方式，说明如下。

（1）直接指定属性，不赋任何属性值。

（2）将属性名称作为该属性的值。

（3）使用空字符串作为该属性的值。

【练习2】

例如，下面的代码演示了将逻辑属性值设置为true时的示例。

    <input type="checkbox" checked />                             <!--直接指定属性-->
    <input type="checkbox" checked="checked" />   <!--指定属性值=属性名-->
    <input type="checkbox" checked=" " />                 <!--属性值为空字符串-->

注意

虽然HTML 5的语法进行了很大的改变，但是它的文档扩展符与内容类型是保持不变的，仍然以.html或.htm为后缀名，而内容类型仍然是text/html。

1.3.2 新增元素和废除元素

HTML 5不仅对HTML 4之前的语法进行了改进，同时也对元素和属性等方面进行了改进。对于元素来说，HTML 5增加了许多新的元素，例如，与页面有关的主体元素、非主体元素、结构元素，以及新增的与表单有关的元素等。同时也废除了一些原来的元素。

1．新增的结构元素

HTML 5中新增加了一些结构元素，通过使用这些结构元素可以代替传统的使用div元素表示头部、底部或者导航的内容，新增的结构元素如表1-2所示。

表1-2 HTML 5新增的结构元素

结构元素的使用与其他元素一样，但是，它比之前的代码更加简单。例如，如果要定义某个网站的头部内容，HTML 4中定义的代码如下：

    <div id="header">…</div>

定义上述内容完成后需要在CSS样式表中定义名称是header的ID选择器。但是，HTML 5中不再那样麻烦，直接在页面定义header元素，然后在样式表中直接将header作为标签选择器。

2．新增的块级语义元素

HTML 5中还提供了一些常用的块级元素，最常用的是aside和figure，除了这两种元素外，还有一种dialog元素，如表1-3所示。

表1-3 HTML 5新增的块级语义元素

如表1-3所示的块级语义元素的使用与其他元素一样，如下代码演示为figure元素的使用方法。

    <figure>
        <p>北京天安门方位图</p>
        <img src="beijing_location_allpic.jpg" width="500" height="350" />
    </figure>

3．新增的行内语义元素

行内（inline）语义元素也叫内联元素，它们一般都是基于语义级的基本元素，行内语义元素只能容纳文本或者其他行内元素，常见的内联元素是a。HTML 5中新增加了一些行内语义元素，如表1-4所示。

表1-4 HTML 5新增的行内语义元素

例如，下面的代码演示了meter元素的简单使用。

    <p>本次考试李少海同学所得的分数是：<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>分（满分100分）</p>

4．新增的交互元素

HTML 5中所提供的交互元素进一步发展了交互能力，它们就是为了提高页面的交互体验而生的，如表1-5所示为新增的交互元素。

表1-5 HTML 5新增的交互元素

5．新增的绘图和多媒体元素

在整个HTML 5的知识中，绘图元素和多媒体元素是相当重要的一部分内容，通过使用这些元素可以实现绚丽图形的绘制，也可以显示音频和视频文件。HTML 5中新增加的canvas元素用来绘图，而audio元素和video元素则分别用来显示音频文件和视频文件。

例如，下面的代码通过audio元素指定显示当前名称是mysong的MP3格式的文件。

    <audio controls autoplay="autoplay" loop src="mysong.mp3">
    </audio>

6．新增的表单元素和样式

HTML 5还对表单进行了大的改进，例如，增加了一些与表单有关的元素，具体说明如表1-6所示。

表1-6 HTML 5新增的表单元素

例如，下面的代码演示了datalist元素的简单使用。

    <input id="myCar" list="cars" />
    <datalist id="cars">
        <option value="BMW">
        <option value="Ford">
        <option value="Volvo">
    </datalist>

除了新增与表单有关的元素外，HTML 5还对表单中input元素的类型提供了多个支持，类型说明如表1-7所示。

表1-7 HTML 5对input元素新增的类型

Data Pickers通常被称为数据检出器，它有6种显示样式，即HTML 5提供了6个可供选取日期和时间的新的输入类型，如下所示。

（1）date：可选取日、月、年的文本框。

（2）month：可选取月份和年份的文本框。

（3）week：可选择星期和年份的文本框。

（4）time：可选择时间（小时和分钟）的文本框。

（5）datetime：可选择时间、日、月、年（UTC时间）的文本框。

（6）datetime-local：可选择时间、日、月、年（本地时间）的文本框。

提示

HTML 5中包含成百个元素，新增加的元素远远不止上面所列举的这些（如abbr和del），感兴趣的读者可以通过其他途径（如在网络上查找）了解所有的新增元素。

由于各种原因，HTML 5中还废除了HTML 4原先存在的一些元素，这些废除元素的说明如下。

1．能使用CSS替代的元素

对于basefont、big、center、font、s、strike、tt以及u这些元素来说，它们的功能都是为画面展示服务的。在HTML 5中提倡将画面展示性功能放在CSS样式表中统一编辑，因此将这些元素废除了，并使用编辑CSS、添加CSS样式表的方式进行替代。例如，s元素和strike元素可以由del元素替代。

2．不再使用frame框架的元素

HTML 5中废除了frame元素，这是因为frame框架对页面存在着负面影响，同时还废除了frameset、frame与noframes三个元素。HTML 5只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式。

3．只有部分浏览器支持的元素

HTML 5还废除了只有部分浏览器支持的元素，如applet、bgsound、blink和marquee等元素。废除这些元素后，又增加了新的元素来代替，如applet元素由embed元素替代；marquee元素由JavaScript脚本编程的方式来替代。

4．其他被废除的元素

除了上面三种类型的元素被废除外，还有其他的元素也被废除了，这些元素在HTML 5中也被新的元素替代了，如下所示。

（1）废除rb元素，使用ruby元素替代。

（2）废除acronym元素，使用abbr元素替代。

（3）废除dir元素，使用ul元素替代。

（4）废除isindex元素，使用form元素与input元素相结合的方式替代。

（5）废除listing元素，使用pre元素替代。

（6）废除xmp元素，使用code元素替代。

（7）废除nextid元素，使用GUIDS元素替代。

（8）废除plaintext元素，使用“text/plain”MIME类型替代。

1.3.3 新增属性和废除属性

HTML 5在新增属性的同时，也废除了HTML 4中的许多属性，下面将进行说明。

1．事件属性的新增与废除

HTML 5中的元素可以拥有事件属性，这些属性在浏览器中触发行为。例如，当用户单击一个HTML 5元素时调用一段JavaScript脚本代码执行程序。HTML 5中保留了HTML 4版本中的许多事件属性，如onblur、onchange、onclick、ondbclick、onselect、onsubmit以及一系列与按键有关的事件属性等。

但是，HTML 5中新增加了多个事件属性，同时也废除了一些事件属性，如表1-8所示。在表1-8中，“√”表示在HTML 4或HTML 5所支持的事件属性，而“×”表示HTML 4或HTML 5不支持的属性。

表1-8 事件属性的新增与废除

2．标准属性的新增与废除

HTML中的标记都有属性，可以在每个标记的参考页中找到相应的特殊属性，标准属性是指每个标记都有的通用属性。如表1-9所示为HTML 5中新增的标准属性，这里列出的标准属性主要是指核心属性和语言属性（个别例外）。

表1-9 HTML 5中新增的标准属性

对于每个标记的标准属性来说，HTML 5中废除了accesskey属性，该属性设置访问一个元素的键盘快捷键。

3．新增的特殊属性

上面只是列举了一些新增的标准属性，对于部分标记来说，它们都有自己特有的属性，HTML 5为某个标记增加了特殊属性，也会废除一些属性，例如，废除在<meta>标记中的scheme属性，新增了charset属性。

1）与表单有关的新增属性

HTML 5中新增加了一些与表单有关的属性，这些属性的具体说明如下。

（1）autocomplete属性：规定form或input元素应该拥有自动完成的功能。

（2）autofocus属性：规定在页面加载时，文本域是否自动获取焦点，适用于所有input元素的类型。

（3）form属性：此属性规定输入域所属的一个或多个表单，适用于所有input元素类型。

（4）表单重写属性：表单重写属性允许重写form表单中的某些属性设定。表单重写属性适用于input元素类型的submit和image，相关属性的说明如下。

① formaction属性：重写表单的action属性。

② formenctype属性：重写表单的enctype属性。

③ formmethod属性：重写表单的method属性。

④ formnovalidate属性：重写表单的novalidate属性。

⑤ formnotarget属性：重写表单的target属性。

2）与表单输入域有关的新增属性

HTML 5新增了许多与表单输入域有关的属性，这些属性如表1-10所示。

表1-10 HTML 5中新增的与输入域有关的属性

3）与链接有关的特殊属性

HTML 5中新增了5个与链接有关的属性，其说明如表1-11所示。

表1-11 HTML 5中与链接有关的属性

1.3.4 全局属性

HTML 5新增加了“全局属性”的概念，全局属性是指可以对任何标记使用的属性，可以理解为前面所介绍的标准属性。

1．hidden属性

hidden属性告诉浏览器元素的内容要以何种方式进行显示，此属性的值是一个布尔类型。默认情况下此属性的值为false，如果将此属性的值设置为true，那么元素的内容将会被隐藏，不会在页面中进行显示。

【练习3】

本次练习演示如何通过hidden属性控制显示文本框的内容，当用户单击按钮时会触发Click事件调用脚本函数，在脚本函数中进行判断，具体步骤如下所示。

（1）通过Dreamweaver工具创建新的网页，在页面中添加一个文本框和一个按钮。代码如下：

    <input type="text" hidden="true" id="inputName" value="我要隐藏了！" />
    <input type="button" onClick="HidTxt()"  value="Click Me"/>

（2）添加名称是HidTxt的脚本函数，在此函数中首先获取文本框元素，然后判断该元素的hidden属性的值，如果为true则重新设置为false，如果为false则重新设置为true。代码如下：

    <script language="javascript">
    function HidTxt()
    {
        var input = document.getElementById("inputName");
        if(input.hidden)
                input.hidden = false;
        else
                input.hidden=true;
    }
    </script>

（3）运行网页单击页面中的按钮进行测试，具体效果不再显示。

2．contentEditable属性

contentEditable属性的主要功能是允许用户编辑元素中的内容，所以要求拥有此属性的元素必须是可以获得鼠标焦点的，而且在单击鼠标后要向用户提供一个插入符号，提示用户此元素中的内容允许编辑。

contentEditable属性的值也是一个布尔类型，属性值为true时指定允许编辑，为false时指定为不允许编辑。另外，此属性还存在一个隐藏的inherit（继承）状态，如果没有指定属性值时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素是可编辑的。

例如，下面通过一个简单的练习演示如何使用contentEditable属性。

【练习4】

在本次练习中，为要更改内容的页面添加contentEditable属性，并且属性值设置为true。部分代码如下：

    <div class="detail_text" contentEditable="true">&nbsp;&nbsp;&nbsp;&nbsp;我不喜欢一个苦孩子求学的故事。家庭十分困难，父亲逝去，弟妹嗷嗷待哺，可他大学毕业后，还要坚持读研究生，母亲只有去卖血……我以为那是一个自私的学子。求学的路很漫长，一生一世的事业，何必太在意几年蹉跎?况且这时间的分分秒秒都苦涩无比，需用母亲的鲜血灌溉!一个连母亲都无法挚爱的人，还能指望他会爱谁?把自己的利益放在至高无上位置的人，怎能成为人类的大师?孝心无价，我也不喜欢父母重病在床，断然离去的游子，无论你有多少理由。地球离了谁都照样转动，不必将个人的力量夸大到不可思议的程度。在一位老人行将就木的时候，将他对人世间最期冀的希望斩断，以绝望之心在寂寞中远行，那是对生命的大不敬。<br/><br/>
    </div>

运行页面查看效果，在添加contentEditable属性处直接单击修改，此时的效果如图1-1所示。在如图1-1所示的当前光标处添加或者删除内容，执行完成后直接单击页面空白处即可。

图1-1 编辑文本内容

3．spellcheck属性

spellcheck属性规定是否对元素内容进行拼写检查，其属性值也是一个布尔类型。如果属性值为true时表示检测输入框的值，反之则不检测。如果没有此属性，默认的状态表示元素根据默认行为来操作，可能是根据父元素的spellcheck状态。

使用spellcheck属性可以对文本内容进行拼写检查，例如，检查textarea元素中的值；类型为text的input元素中的值（非密码）；以及可编辑元素中的值。

【练习5】

本次练习演示spellcheck属性的简单使用，首先添加并且设计页面，然后将表示作者个人信息介绍的<textarea>标记的spellcheck属性的值设置为true。相关代码如下：

    <textarea min="1" id="intro_id" max="100" class="txt1" name="intro" spellcheck="true"></textarea>

在浏览器中运行页面，然后输入内容进行测试，如图1-2所示。

图1-2 spellcheck属性检查效果

注意

虽然目前许多主流的浏览器提供了对spellcheck属性的支持，但是，各个浏览器支持的元素还是有差异的。例如，Chrome浏览器中支持<textarea>输入框元素，而不支持<input>元素中的文本框；Firefox或其他浏览器还需要手动配置。

上一章目录下一章