《HTML5与CSS3网页设计》_《HTML5与CSS3网页设计》_HTML5 与CSS5 网页设计（第二版）第三章.pptVIP

图3-25招商银行主页返回图3-27页面效果返回图3-28代码对应的页面效果返回第3章HTML5的基本结构3.1HTML标记3.2HTML文档的基本成分3.3页面标题3.4分级标题3.5HTML5页面的构成3.6添加注释3.7综合实例返回3.1HTML标记3.1.1元素HTML元素指的是从开始标记(starttag)到结束标记(endtag)刻之间的所有代码。1.非空元素(双标记)在HTML元素中，大多数元素都像超链接一样具有元素内容，这种类型的元素称为非空元素，它们都有开始和结束两个标记，因此也称为双标记。2.空元素(单标记)还有一些元素不具有元素内容，它们被称为空元素。这些元素的开始标记和结束标记结合为一体，在开始标记中结束，书写时只写一个标记，因此也称为单标记。下一页返回3.1HTML标记除了图像标记以外，常用的单标记还有(1)换行标记br/;(2)链接标记link/;(3)水平线标记hr/。3.1.2属性和值大多数HTML元素都拥有属性，一个元素可以有一个或多个属性，每个属性都有各自的值，不同的属性之间需用空格隔开，但它们之间无先后次序之分。图3-1展示了上一节讲到的图像标记img的属性和值，其中src,width,height和alt都是img元素的属性，它们之间不区分前后顺序，并且用空格隔开。上一页下一页返回3.1HTML标记3.1.3书写规范(1)所有元素、属性和值全部使用小写字母。(2)所有元素都要有一个相应的结束标记。(3)所有属性值必须用引号””括起来。(4)所有标记都必须合理嵌套。当元素中包含其他元素时，每个元素都必须正确地嵌套，也就是子元素必须完全地被包含在父元素中。如果先开始P，再开始em，就必须先结束em，再结束P，如图3-3所示。上一页返回3.2HTML文档的基本成分使用Dreamweave:新建一个HTML5文档，可以发现，每个HTML文档都包含以下基本成分，如图3-4所示。3.2.1DOCTYPE声明DOCTYPE声明是HTML文件中必不可少的，它位于文件的第一行，就像一本书的序言。在HTML4和XHTML1.0时代，有好几种可供选择的DOCTYPE，每一种都会指明HTML的版本，以及其使用的是过渡型还是严格型模式，既难理解又难记。在HTML5中，刻意不使用版本声明，一份文档将会适用于所有版本的HTML。HTML5中的DOCTYPE声明方法如下:!DOCTYPEhtml下一页返回3.2HTML文档的基本成分3.2.2head和bodyHTML页面分为两个部分:head和body。head元素构成HTML文档的开头部分，通常指明页面标题(title/title)，提供为搜索引擎(如google、百度)准备的关于页面本身的信息(meta/，加载样式表(style/style),加载Javascript(script/script)等。这些信息不会直接显示在浏览器的框内，而是通过另外的方式起作用。body元素是HTML文档的主体部分，在body/body之间放置的是页面中的所有内容，包括文本、图像、表单、音频、视频以及其他交互式内容，即在浏览器窗口中内能看见的东西。上一页返回3.3页面标题title元素是页面的标题，每个HTML页面都必须有一个title元素。每个页面的标题都应该是简短的、描述性的，并且是唯一的，如图3-5所示。在大多数浏览器中，页面标题出现在窗口的标题栏，如图3-6所示。如果支持标签浏览，页面标题也会出现在标签上页面标题还会出现在浏览历史列表和书签中，如图3-7所示。不同搜索引擎确定网页排名和内容索引规则的算法是不一样的，不过，title通常都扮演着重要的角色。作为一种最佳实践，应选择能简要概括文档内容的文字作为title文字。返回3.4分级标题HTML提供了6级标题用于创建页面信息的层级关系。可使用hl~h6元素对标题进行标记，其中hl是最高级别的标题，h2是hl的子标题，h3是h2的子标题，以此类推。标题是页面中最重要的HTML元素。所有的标题都默认以粗体显示，hl的字号最大，h6的字号最小，中间逐层递减，如图3-8所示。h1~h6标题对页面大纲的定义有重要的影响。返回3.5HTML5页面的构成如图3-9所示的网页随处可见，抛开内容不谈，可以看到该页面有四个主要部分:带导航的页头、显示在主体内容区域的文章、显示次要信息的侧栏以及页脚，如图3-