关于html5页面设计
来源:互联网 发布:惠普m176n扫描软件 编辑:程序博客网 时间:2024/04/28 10:11
您将创建一个简单的 Web 页面。在这个过程中,我将讨论 HTML5 中引入的几个新标记。要创建一个有效的、高效的 Web 页面,必须对页面进行规划,考虑到需要创建的所有的组件。
创建的页面将采用如图下图所示。页面设计包含一个 Header 区、一个 Nav、一个 Article 区、一个 Aside 区和一个 Footer 区。这种结构的目的是清楚地展示新的 HTML5 标记的用法,展示如何使用它们创建构造良好的代码和优雅的页面设计。
在创建页面的过程中,我使用了 CSS3,需要用 CSS3 正确地呈现 HTML5 页面。CSS3 是实现 HTML5 页面样式、导航和整体感官的重要工具。
然而,在开始构建页面前,您需要了解一些有关新的 HTML5 标记的知识。
1,header
例如:
<header>
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>
</header>
这里的hgroup是用来对网页或区段(section)的标题进行组合。
说到hgroup就不得不说figcaption,那么figcaption又是什么意思了。
figcaption:标签定义 figure 元素的标题(caption)。
figure:标签规定独立的流内容(图像、图表、照片、代码等等)。
figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
例如:
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
2,nav
nav就不用多说了专门为导航功能定义了一个区域,但是这里要多注意的是<nav>标记应当用于主站点的导航,而不是用于包含页面其他区域的链接
例如:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
3,article
字面意思为“文章”。在web页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式。这其中包括两方面,一为整个页面的主旨内容,另外就是一些辅助内容。article可以嵌套,即article里面还可以包含article,此时内article应该跟外article有一定的关联性,如同情景二,其中主内容的评论。
例如:
<!doctype html>
<title>html5站案例</title>
<body>
<article>
<h1></h1>
<p>主内容</p>
</article>
<aside>
侧边内容
</aside>
</body>
4,section 字面上理解为“块”,“部分”。在html5网页中表现的意思跟字面理解差不多,即部分,块,模块,主要作用为对页面的内容进行分块或者对文章的内容进行分段。
这里要注意的是section内部必须有标题,标题也代表了section的意义所在。
例如:
<!doctype html>
<article>
<h1>Web编程语言比较</h1>
<p>web编程语言常用的有asp,asp.net,php,jsp...</p>
<section>
<h2>asp</h2>
<p>asp全称Active Server Page</p>
</section>
<section>
<h2>asp.net</h2>
<p>asp的颠覆版本</p>
</section>
<section>
<h2>php</h2>
<p>草根动态语言,免费,强大</p>
</section>
</article>
5,footer
字面意思为“页脚”,“结尾”,在html5中跟字面意思类似,是页脚和结尾的意思。它与header是相对的一对。footer也是用于区块,即section,可以包含该区块相关的作者信息、相关文档的链接、版权信息、导航、附录,索引,长的版本记录,冗长的许可协议和其他的诸于此类的内容等。
例如:
<footer>
<section>
<h1>友情链接</h1>
</section>
版权所有,文章可自由转载,但请注明来源于html5zhan.com
</footer>
这里说道footer,header就不得不说一个address
address:
address字面理解为“地址”,在html5中,它用于文档或者文章作者或拥有者的联系信息。注意,这里放的不是字面上理解的“地址”,而是指“联系信息”,可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。
address一般放在footer中,有时也放在header中,视情况而定。
例如:
<!doctype html>
<title>html5 address 示例 html5zhan.com</title>
<header>
<h1>html5 address 示例 html5zhan.com</h1>
</header>
<p>这里是主体...</p>
<footer>
作者:前端巧友汇
<address>
<ul>
<li>网址:http://www.html5zhan.com</li>
<li>QQ:10000</li>
<li>邮件:web@daojia100.com</li>
</ul>
</address>
</footer>
- 关于html5页面设计
- html5报名页面设计
- 微信HTML5页面设计建议
- 关于html5页面嵌入GA的问题
- 关于div用于页面设计
- 基于 HTML5 的校园网站移动平台 web 页面设计
- 关于选择页面的设计模式
- 《关于我们-合作》页面设计问题
- 关于页面密码强度的设计
- 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
- 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
- 关于html5
- 关于html5
- 关于html5
- 关于HTML5
- 关于HTML5
- 关于HTML5
- 关于Html5
- Quartz的cron表达式
- Android-Handler, Thread, Runnable的简单应用
- java 得到某个时间的年、月、日、时、分、秒
- 由KMP算法谈到BM算法
- 《游戏编程入门》学习笔记8——添加第二个小人
- 关于html5页面设计
- 黑马程序员——java编程那些事儿____jdk1.5新特性 javaBean与内省
- A10+Android4.0 音频驱动
- MyEclipse代码自动提示
- KMP算法之总结篇
- Entity Framework技术系列之6:数据绑定
- 简单与复杂
- 各种疑问句
- IPV4 与IPV6 头部结构与其区别