《使用HTML5实现响应式布局》第二章-页面结构-理论学习资料_第1页
《使用HTML5实现响应式布局》第二章-页面结构-理论学习资料_第2页
《使用HTML5实现响应式布局》第二章-页面结构-理论学习资料_第3页
《使用HTML5实现响应式布局》第二章-页面结构-理论学习资料_第4页
《使用HTML5实现响应式布局》第二章-页面结构-理论学习资料_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

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

文档简介

第二章页面结构理论内容结构标签概述常见的结构标签1.结构标签概述网站的整体结构可以分为页眉、内容区块和页脚三大部分页眉内容区块页脚2.常见的结构标签为实现清晰的文档结构，HTML5提供了相关的结构标签：页眉标签是header页脚标签是footer导航栏标签是nav内容区块标签是section文章标签是article侧边栏标签是aside常见的结构标签常见的HTML5结构标签构成页面结构的示意图如下header标签header标签可用于页面内任何特定独立部分的前言或导航助手<body>

<header> <h1>Web开发工作室</h1>

</header></body>footer标签footer标签表示当前区域内容的页脚，页脚通常包含版权信息、相关链接列表、作者信息或当前内容块结尾处的内容<body><header></header><footer><!--省略--></footer></body>nav标签nav标签是一个可以用作页面导航的链接组，用于管理多个超链接<body><header>

<nav>

<!--省略-->

</nav></header><footer></footer></body>section标签section标签的作用是对页面上的内容执行分块，或对文章分段<section><header><!--省略--></header><footer><!--省略--></footer></section>article标签article标签是一个特殊的section标签，它比section标签具有更明确的语义，它代表一个独立的、完整的相关内容块<section><header><!--省略--></header>

<article><header><!--省略--></header><footer><!--省略--></footer>

</article></section>aside标签aside标签用于表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用链接、侧边栏、广告、导航条以及类似的有别于主要内容的部分<aside><section><!--省略--></section><section><!--省略--></section></aside>div标签除了使用HTML5的结构标签，还可以使用div制作页面的结构。div标签的名称来源于英文单词division，通常称其为HTML5的层或容器，常结合CSS实现网页布局技术。div通常使用id属性设置标签的标识，用于区分不同的内容结构区域。id是HTML5标签的标识，页面中的每个标签的id不能相同。div标签div标签表达结构化布局页面排版的方法<body>

<divid="header">--页眉--</div>

<divid="section">--内容区块--</div>

<divid="footer">--页脚--</div>

</body>HTML5的结构标签本质是div标签，如<header>与<divid=”header”>表达的是相同的意思。只是<header>在语义上更为直观。div默认没有外观，由CSS3设置div标签在HTML5中，与div标签相似的还有span标签，其写法是：<span>内容</span>。div与span的区别是div占用一行宽度，而span占用宽度随内容宽度变换。在DreamweaverCC的设计视图中，可以看出其占位宽度及显示区别。div独占一行的块状结构特点span随内容的宽度变化，在一行显示内容总结在大型网站中，

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

温馨提示

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

最新文档

评论

0/150

提交评论