序

浏览器中渲染的网页由很多东西组成——logo、信息文本、图片、超链接、导航结构等等。

HTML5为网页提供了一系列标签，允许您创建结构化布局。这些元素通常被称为语义标签，因为它们可以向开发人员和浏览器清楚地传达它们的含义和目的。本文将讨论一些对网页布局有帮助的重要HTML5标签。

HTML5的新元素及其特点

HTML5的语义标签和属性使得开发者实现清晰的网页布局非常方便。有了CSS3的效果渲染，快速构建丰富灵活的网页非常简单。

本研究中HTML5的新标签元素有：

页眉定义页面或节的页眉；

页脚定义页面或部分的尾部；

Nav定义页面或部分的导航区域；

节页的逻辑区域或内容组合；

文章定义了正文或完整的内容；

旁注定义补充或相关内容；

当然，学习这些标签的更好方法是尝试使用它们。网页布局虽然有很多现成的模板，但是对于初学者来说，自己实现简单的页面布局是必要的。

这里用一个简单的页面布局的例子来说明如何使用上面的标签。

例子：模仿博客主页的布局

实现如图2-1所示的网页结构，这是一个非常典型的博客页面：头、尾、水平导航条、侧边栏导航和内容。

图2-1

正如您在图2-1中看到的，由相应的标签实现的区域用一个名称来标记，比如Header头

写页面之前，要说页面元素是用HTML5实现的，元素的显示效果是用CSS3渲染的。CSS3的代码可以和HTML5的代码放在同一个文件中，也可以是单独的文件，只要在HTML5文件中引用即可。建议为独立文档，有以下优点：

1)本着单一责任原则：HTML5页面负责管理元素，而CSS3文件只负责渲染对应HTML5文件的显示效果，相互独立，不相交。

2)降低页面复杂度，易于维护：想象一下，当页面上的元素数量增加到很多的时候，同时在一个页面中管理元素及其显示属性，可读性有多差，后期的维护会很痛苦。

3)加快浏览器的加载速度：第二点的另一个优点是简单页面自然加载更快。

当然，如果你习惯了把HTML5 CSS3放在一个文件里，也可以，这只是一个建议。

图2-1将在下面详细实现。

分为两部分：1)HTML5文件；2)CSS3文件

一、HTML5部分

1.1的文档声明。HTML5

要创建新的index.html文件，如果使用的网页创作工具已经支持HTML5文件类型，则应生成以下HTML5模板：

1!DOCTYPEhtml

2htmllang='en-US '

3个头

4 meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '

5播放视频测试/标题

6/头

7车身

8/车身

9/html

web编写工具暂时不支持HTML5也没关系，自己写这几行代码也很容易。

描述：行是：DOCTYPEhtml是HTML5对文档类型的简化，使得复杂度变得简单；(文档类型的作用：验证者根据它决定用哪些规则来验证代码；强制浏览器以标准模式呈现页面)

2.头

标题标签实现

headerid='page_header '

h1标题/h1

/header

注：1)表头不能喝H1、H2、H3。标题可以包含从公司标志到搜索框的所有内容。该示例仅包含标题。

2)同一页面可以包含多个标题元素。每个独立的块或文章都可以包含自己的标题。因此，在示例中头部增加了id属性，便于在CSS3中灵活渲染。可以看到CSS文档中id标记的作用。

3.尾巴

页脚标签实现

footerid='page_footer '

h2页脚/h2

/页脚

注意：位置是页面或块的结尾。它的用法和header基本一样，也包含其他元素。此处还指定了id。

4.航行

导航标签实现

航行

保险商实验所

liahref='#'Home/a/li

liahref=' # '一个/a/li

liahref=' # '两个/a/li

三个/a/li

/ul

/nav

说明：导航的重要性对于一个网页至关重要，快速方便的导航是留住访客所必须的。

1)可以被包含在页眉或页脚或者其他区块中，一个页面可以有多个导航。

2)导航一般需要半铸钢钢性铸铁(铸造半钢)来渲染，随后将会看到半铸钢钢性铸铁(铸造半钢)的渲染。

5.区块和文章

部分和文章标签实现

sectionid=' posts '

/*可以包含多个文章*/

articleclass='post '

/*文章的内容*/

/article

articleclass='post '

/*文章的内容*/

/article

/section

部分元素将页面的内容合理归类，合理布局。

下面是文章的一般内容

articleclass='post '

页眉

氘文章标题/h2

/header

你不在吗？我会毫无目的地离开。

/p

页脚

氘文章页脚/h2

/页脚

/article

可以看到它可以包含很多元素。

6.旁白和侧边栏

在旁边标签实现旁白，侧边栏则由部分实现。

在旁边是为主内容添的附加信息，入引言，图片等

在旁边

psth.inaside

/p

/一旁

在旁边一般加在文章中使用

articleclass='post '

页眉

氘文章标题/h2

/header

在旁边

psth.inaside

/p

/一旁

你不在吗？我会毫无目的地离开。

/p

页脚

氘文章页脚/h2

/页脚

/article

侧边栏，不是旁白！看做是右面的一个区域，包含链接，用部分和航行实现即可。

sectionid='侧栏'

航行

保险商实验所

李年四月/a/li

lia href=' 2012/03 ' 2012年3月/a/li

李年2月/a/li

李年一月/a/li

/ul

/nav

/section

到这里，每种标签的使用就是这样了，下面是HTML5的完整代码index.html文件

！DOCTYPEhtml

htmllang='en-US '

头

meta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '

linkrel='样式表href='style.css'type='text/css '

标题布局测试/标题

/head

身体

氘车身/h2

headerid='page_header '

氕标题/h1

航行

保险商实验所

liahref='#'Home/a/li

liahref=' # '一个/a/li

liahref=' # '两个/a/li

三个/a/li

/ul

/nav

/header

sectionid=' posts '

氘截面/h2

articleclass='post '

氘文章/h2

页眉

氘文章标题/h2

/header

在旁边

氘文章备用/h2

/一旁

你不在吗？我会毫无目的地离开。

/p

页脚

氘文章页脚/h2

/页脚

/article

articleclass='post '

氘文章/h2

页眉

氘文章标题/h2

/header

在旁边

氘文章备用/h2

/一旁

你不在吗？我会毫无目的地离开/p .

页脚

氘文章页脚/h2

/页脚

/article

/section

sectionid='侧栏'

氘截面/h2

页眉

氘侧栏标题/h2

/header

航行

h3/h3

保险商实验所

李年四月/a/li

lia href=' 2012/03 ' 2012年3月/a/li

李年2月/a/li

李年一月/a/li

/ul

/nav

/section

footerid='page_footer '

氘页脚/h2

/页脚

/body

/html

二。CSS3部分

对于半铸钢钢性铸铁(铸造半钢)文件，更好能够根据超文本标记语言文件的树结构，对应到相应的元素，有组织有层次的进行元素属性的渲染。这样既能够不遗漏元素，又便于查找修改。当然根据个人的习惯来定就好。

CSS3的属性定义更加丰富，这里不再赘述，网上有CSS3参考手册，用的时候查一查就好。更或者，连查都懒得查，还有专门的CSS3控件代码生成工具和网站，例如http://css-tricks.com/examples/,丰富的控件效果示例可以下载。还可以搜一些类似的。

这里直接贴出CSS3代码style.css文件

@ charset ' utf-8 '；

/*CSSDocument*/

正文{/*整个页面的属性设定*/

背景色： # CCCCCC；/*背景色*/

font-family:Geneva，sans-serif；/*可用字体*/

margin 336010 photo/*页边空白*/

更大宽度宽度：800像素

border:solid/*边缘立体*/

边框颜色： # FFFFFF/*边缘颜色*/

}

h2{/*设定整个身体内的氘的共同属性*/

文本对齐：中心；/*文本居中*/

}

标题{/*整个身体页面的页眉适用*/

背景色： # F47d 31

color: # FFFFFF

文本对齐：中心；

}

文章{/*整个身体页面的文章适用*/

背景色： # eee

}

p{/*整个身体页面的p适用*/

颜色： # F36

}

旁边的文章导航{/*共同属性*/

margin:10px

padding:10px

显示：块

}

页眉# page _ header nav {/*页眉# page _ header nav的属性*/

列表样式：无；

边距n:0

padding:0

}

header # page _ headernavulli {/* header # page _ headernavulli属性*/

padding:0

边距n:020px00

display:inline

}

第#篇文章{/* #篇文章的部分属性*/

显示：块

float:left

宽度：70%;

高度：自动

背景色： # F69

}

section # postsarticlefooter {/* section # postsarticlefooter属性*/

背景色： # 039;

clear:both

高度：50像素

显示：块

color: # FFFFFF

文本对齐：中心；

padding:15px

}

截面#后侧{/*截面#后侧属性*/

背景色： # 069;

显示：块

右侧浮动：

宽度：35%;

左边距：5%;

font-size :20 px

行高：40 px

}

第#侧边栏{/*节#侧边栏属性*/

背景色： # eee

显示：块

右侧浮动：

宽度：25%;

高度：自动

背景色： # 699;

右边距：15像素；

}

页脚# page _ footer {/* footer # page _ footer属性*/

显示：块

clear:both

宽度：;

margin-top :15 px；

显示：块

color: # FFFFFF

文本对齐：中心；

背景色： # 06C

}

相信无需多解释，一看就能明白。

想要让页面的显示更精美绚丽，CSS3好好看看吧。

目前来看，HTML5的简单但强大，CSS3的丰富，二者结合能做出怎样的惊人的效果真的很令人期待。

本文转载自中文网