《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第三章_第1页
《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第三章_第2页
《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第三章_第3页
《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第三章_第4页
《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第三章_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第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-10所示。3.5.1页眉headerheade:元素是一种具有引导和导航作用的结构元素，如果页面中有包含一组介绍性或导航性内容的区域，就应该用header元素对其进行标记。一个页面可以有任意数量的heade:元素，它们的含义根据上下文而有所不同。例如处于页面顶端或接近这个位置的heade:可能代表整个页面的页眉(或者成为页头)，如图3-11所示。下一页返回3.5HTML5页面的构成注意:只在必要时使用header，如果只有hl一h6或hgroup，而没有其他需要与之组合在一起的伴生内容，就没有必要用header将它包起来。另外，heade:不一定要包含一个nav元素，不过在大多数情况下，如果heade:包含导航性链接，就可以用nav。3.5.2导航navnav元素是一个可以用作页面导航的链接组，nav中的链接可以指向页面中的内容，也可指向其他页面或资源。并不是所有的链接组都要使用nav，应该只对重要的链接组使用nav。具体来说，nav元素可以用于以下场合:(1)传统导航条。(2)侧边栏导航条。上一页下一页返回3.5HTML5页面的构成(3)页内导航。(4)翻页操作。3.5.3文章articlearticle元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。根据其名称，读者大概会猜想article用于包含像报纸文章一样的内容。但是，article并不局限于此，它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客文章、一个交互式的小部件或者小工具以及任何其他独立的内容项，如图3-16所示的页面。一个页面可以没有article元素，也可以有多个article元素。例如，博客的主页通常包括几篇最新的文章，其中每一篇都是一个article，如图3-17所示。上一页下一页返回3.5HTML5页面的构成除了可以在article中嵌套heade:和foote:以外，比较常见的还有在article中嵌套article，如图3-18所示。一篇博文下方若还有评论，那么每条评论也作为一个article嵌套在整个博文的article中。3.5.4区块sectionsection元素代表网页或者应用程序页面的一个一般的区块。一个section通常由内容及标题组成，可以用来描述章节、标签式对话框中的各种标签页、论文中带编号的区块。注意:section和article极其相似，非常容易混淆，什么时候用article，什么时候用section主要看这段内容是否可以脱离上下文，作为一个完整独立的内容存在。上一页下一页返回3.5HTML5页面的构成3.5.5侧栏asideaside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条以及其他类似的有别于主要内容的部分。aside元素主要有以下两种使用方法(1)以侧边栏的形式存在，其中的内容可以是友情链接、页面的其他栏目、博客中的其他文章列表、广告单元、商品种类列表等。(2)作为article元素中主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。上一页下一页返回3.5HTML5页面的构成3.5.6页脚footer提到footer元素的时候，读者大概想到的是页面底部的页脚，但它并不仅限于此。footer和header一样，可以嵌套在article,section,aside,na、等元素中，作为它们的注脚，只有当离它最近的父级元素是body时，它才是整个页面的页脚。例如前面图3一17中的footer就是一个article的注脚，而图3-24中的footer是整个页面的页脚。3.5.7通用容器div有时需要在一段内容外围包一个容器，从而可以为其应用CSS样式或Javascript效果，而这段内容从语义上来看使用article,section,aside或者nav都不合适，这时便需要一个通用容器、一个完全没有语上一页下一页返回3.5HTML5页面的构成义含义的容器。这个容器就是，div元素。有了div，就可以为其添加样式。如图3-25所示的招商银行主页是非常常见的网页结构，上方有页首，下方有页脚，中间的部分是左右两栏布局。要实现这样的结构与样式，可以将希望出现在同一栏的内容包在一个div里，然后对这个div添加相应的样式。上一页返回3.6添加注释在HTML文档中，一共有三种类型的注释，分别适用于不同的对象。(1)HTML的注释，表现形式为<!--注释内容-->;(2)CSS的注释，表现形式为/*注释内容*/;(3)Javascript的注释，表现形式为//注释内容。返回3.7综合实例根据本章介绍的HTML知识，按照语义明确、结构清晰的要求，书写如图3-27所示页面的HTML代码。这段代码显示的结果如图3-28所示。返回图3-1img元素的属性和值返回图3-3标记的嵌套返回图3-4HTML基础页面返回图3-5title页面标题返回图3-6浏监器中显示的页面标题返回

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论