新建index.html文件,如果用的网页编写工具已经支持HTML5文件类型,那么,应该生成如下的HTML5模板:
1 2 3 4 5Layout TEST 6 7 8 9
登录后复制
如果网页编写工具暂时不支持HTML5也没关系,自己写这几行代码也很简单。
说明:第一行:DOCTYPE html>是HTML5对文档类型的简化,化繁为简;(文档类型的作用:验证器依据它来判断该采用何种规则去验证代码;强制浏览器以标准模式渲染页面)
2. 头部
标签实现
Header
登录后复制
说明:1)header不能喝h1,h2,h3这些标题混为一谈。可以包含从公司logo到搜索框在内的各式各样的内容。例子中只含有标题。
2)同一个页面可以包含多个元素。每个独立的区块或文章都可以含有自己的.所以示例中为添加唯一标示id属性,便于CSS3中灵活的渲染。在CSS文件里会看到id标示的作用。
3. 尾部
标签实现
登录后复制
说明:位置是页面或者区块的尾部,用法和基本一样,也会包含其他元素,这里也指定了id.
4. 导航
标签实现
登录后复制
说明:导航的重要性对于一个网页至关重要,快速方便的导航是留住访客所必须的。
1)可以被包含在或或者其他区块中,一个页面可以有多个导航。
2)导航一般需要CSS来渲染,随后将会看到CSS的渲染。
5. 区块和文章
和标签实现
/*可以包含多个< article>*/ /*article的内容*/ /*article的内容*/
登录后复制
元素将页面的内容合理归类,合理布局。
下面是的一般内容
Article Header
Without you?I'd be a soul without a purpose.
登录后复制
可以看到它可以包含很多元素。
6. 旁白和侧边栏
标签实现旁白,侧边栏则由实现。
是为主内容添的附加信息,入引言,图片等
登录后复制
一般加在中使用
Article Header
Without you?I'd be a soul without a purpose.
登录后复制
侧边栏网页布局一般为,不是旁白!看做是右面的一个区域,包含链接,用和实现即可。
登录后复制
到这里,每种标签的使用就是这样了,下面是HTML5的完整代码index.html文件
Layout TEST body
Header
Section
article
Article Header
Without you?I'd be a soul without a purpose.
article
Article Header
Without you?I'd be a soul without a purpose.
登录后复制
二.CSS3部分
对于CSS文件,最好能够根据HTML文件的树结构,对应到相应的元素,有组织有层次的进行元素属性的渲染。这样既能够不遗漏元素,又便于查找修改。当然根据个人的习惯来定就好。
CSS3的属性定义更加丰富网页布局一般为,这里不再赘述,网上有CSS3参考手册,用的时候查一查就好。更或者,连查都懒得查,还有专门的CSS3控件代码生成工具和网站,例如,丰富的控件效果示例可以下载。还可以搜一些类似的。
这里直接贴出CSS3代码 style.css文件
@charset "utf-8"; /* CSS Document */ body { /*整个页面的属性设定*/ background-color: #CCCCCC; /*背景色*/ font-family: Geneva, sans-serif; /*可用字体*/ margin: 10px auto; /*页边空白*/ max-width: 800px; border: solid; /*边缘立体*/ border-color: #FFFFFF; /*边缘颜色*/ } h2 { /*设定整个body内的h2的共同属性*/ text-align: center; /*文本居中*/ } header { /*整个body页面的header适用*/ background-color: #F47D31; color: #FFFFFF; text-align: center; } article { /*整个body页面的article适用*/ background-color: #eee; } p { /*整个body页面的p适用*/ color: #F36; } nav,article,aside { /*共同属性*/ margin: 10px; padding: 10px; display: block; } header#page_header nav { /*header#page_header nav的属性*/ list-style: none; margin: 0; padding: 0; } header#page_header nav ul li { /*header#page_header nav ul li属性*/ padding: 0; margin: 0 20px 0 0; display: inline; } section#posts { /*#posts 的section属性*/ display: block; float: left; width: 70%; height: auto; background-color: #F69; } section#posts article footer { /*section#posts article footer属性*/ background-color: #039; clear: both; height: 50px; display: block; color: #FFFFFF; text-align: center; padding: 15px; } section#posts aside { /*section#posts aside属性*/ background-color: #069; display: block; float: right; width: 35%; margin-left: 5%; font-size: 20px; line-height: 40px; } section#sidebar { /*section#sidebar属性*/ background-color: #eee; display: block; float: right; width: 25%; height: auto; background-color: #699; margin-right: 15px; } footer#page_footer { /*footer#page_footer属性*/ display: block; clear: both; width: 100%; margin-top: 15px; display: block; color: #FFFFFF; text-align: center; background-color: #06C; }
登录后复制
相信无需多解释,一看就能明白。
想要让页面的显示更精美绚丽,CSS3好好看看吧。
目前来看,HTML5的简单但强大,CSS3的丰富,二者结合能做出怎样的惊人的效果真的很令人期待。
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论