html5 和css3是目前web前端炒得很热的2个概念,做为web前端开发者,虽然在目前的大环境下,还无法在实际项目中全面的去运用。但我们还是有必要去学习和研究。而本教程,我们则用html5和css3去构建一个博客页面,本教程旨在演示当浏览器支持新规则时如何建设网站。本教程一共分为2部分,第一部分主要介绍html5相关方面的内容,第二部分链接为:用html5和css3 开发博客实例(2)

1、Html 5

HTML5 是HTML的下一个主要版本。它引入了一些新元素,将使我们的网页合乎语义化标准。使众多搜索引擎和屏幕阅读器能轻易浏览网页,并改善大家的网络体验。此 外,HTML5还包括用于屏幕绘图的fancy API、离线存储数据、拖放等功能。好了,让我们开始设计博客页面吧!

2、基本结构

开始制作网页前,我们应该规划一个总体结构线框图:

HTML5中有特定的标记表现页眉、导航、侧边栏和页脚。先看代码,随后我再解释:

<!doctype html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<header>
		<h1>Page title</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>
		<!-- Main content area -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>

</body>
</html>

看起来和原来的HTML标记差不多,但也有一些事要特别注意:

  • 在HTML5中,只有一个doctype声明。就在代码最顶端有<!doctype html>声明的标记。泳衣告知浏览器,它处理的是HTML文档。
  • 新标签header主要放在介绍性元素两侧,如网页标题或标识。也可以包含内容或搜索表单。每个header标记里通常包括<h1> 到<h6>等标题标记。header标记一般用于引入全页,但此处用它做简介部分。
  • nav 标记用作导航,如网站的主导航或上一页/下一页那种专门导航。
  • section 标记用于定义章节。可以包含各种标记,多个段落可以互相嵌套。
  • aside 用于侧边栏。
  • footer 标记主要包括作者、版权信息、相关链接等内容用于页脚。

这样就避免不论是页面何处都用div控制的问题。而且,这些标记更符合语义化标准。使众多搜索引擎及屏幕阅读器更容易搞清楚某个页面的内容。

3、编写导航

同HTML4或XHTML中所用的导航代码一样,这里也用无序列表。

<nav>
	<ul>
		<li><a href="#">Blog</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Contact</a></li>
		<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
	</ul>
</nav>

4、编写导言

用section标记在文章中定义章节。当 前,我们只要一点点内容。

<section id="intro">
	<header>
		<h2>Do you love flowers as much as we do?</h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>

给section标签一个id以便样式被修改时能找到它。用header标记包含h2元素。除了描述整个文章,header标记还应当用来描述个别段落。

5、编写主要内容区

我们的主要内容区分为三个部分:博客帖子、评论及评论表单。用HTML5中新结构标记的知识,应该很容易制作。

编写博客文章

介绍过标签后,就可以编写博客文章区域块的代码了。

<section>
	<article class="blogPost">
		<header>
			<h2>This is the title of a blog post</h2>
			<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh,
sodales ultricies elementum vel, fermentum id tellus. Proin metus odio,
ultricies eu pharetra dictum, laoreet id odio...</p>
	</article>
</section>

此段代码中,用article标记制作整个博客帖子。article标记在博客网站,讨论网站,百科全书网 站中表示独立条目的,用在这里是个不错的主意。由于我们要查看目前唯一文章的唯一帖子的详细资料,因此在博客的头版用article标记制作整个博客文章。

对博客帖子而言header标记作用于header和元数据。告诉用户帖子作者、谁写的及帖子有多少评论等。注意添加时间戳标记。该标记也是HTML5新加的,用于对特定时间进行标记。日期时间属性应遵照此格式:

  1. year后跟着一个破折号
  2. month后跟着一个破折号
  3. 日期
  4. 字母T指本地时间
  5. 本地时间格式为hh:mm:ss
  6. GMT表示时区。假如我在丹麦,这里比格林尼治时间快1个小时,那就应写成 +01。假如你在科罗拉多州,你会比格林尼治时间慢7个小时,因此要写为-07。

评论代码

评论代码极为简单。没用到新标记或属性。

<section id="comments">
	<header>
		<h3>Comments</h3>
	</header>
	<article>
		<header>
			<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
	<article>
		<header>
			<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
</section>

制作评论表单

在HTML5中增强表单功能。你不用再编必填字段,电子邮件等客户端验证程序。浏览器会替你关注这方面。

<form action="#" method="post">
	<h3>Post a comment</h3>
	<p>
		<label for="name">Name</label>
		<input name="name" id="name" type="text" required />
	</p>
	<p>
		<label for="email">E-mail</label>
		<input name="email" id="email" type="email" required />
	</p>
	<p>
		<label for="website">Website</label>
		<input name="website" id="website" type="url" />
	</p>
	<p>
		<label for="comment">Comment</label>
		<textarea name="comment" id="comment" required></textarea>
	</p>
	<p><input type="submit" value="Post comment" /></p>
</form>

新增表单有两个新输入类型,emailurl。Email要求用户必须输入合法的E-mail地址,url要求用户必须输入合法网址。如果你设置了required属性,用户就不能提交空字段。“Required”是个布尔属性,HTML5的新属性。

编写侧栏和页脚

编写侧栏和页脚的代码简单极了。无非是在aside- 和 footer- 标记里加几个章节及一些内容。

最后,你可以在这里查看没有添加样式表的源码。现在给它添加样式表。

One thought on “用html5和css3 开发博客实例(1)

  1. Pingback: 【译】用html5和css3 开发博客实例(2) | Hugo Web前端开发

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required