TA的每日心情 | 开心
2021-3-12 23:18 |
|---|
签到天数: 2 天 [LV.1]初来乍到
|
|
昨天，我们了解了有关渐进增强与平稳退化的概念，末了还见到了实战页面的设计图；今天我们来看看针对这个设计图的HTML5 代码基本框架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.Googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<script src="/js/IE8.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="/css/ie6.css"/>
<![endif]-->
</head>
<body id="index" class="home">
</body>
</html>
关于这段代码有几点说明： * 我们可以看到3个针对IE的条件判断语句。第一条针对所有版本的IE从Google Code中加载html5 shiv脚本；第二个条件判断语句针对IE7及之后的浏览器进行向后兼容；最后一个用于修复IE6中的bug。大家可以看到IE有多么的作天作地.
* body标签的id="index"和class="home"纯属作者习惯，并没有特殊的必要。
* 简化的字符集声明可以更好的兼容低级浏览器。
* 该文件使用标准的XHTML 1.0标签的写法。 这个最基本的代码框架可以用来作为任何HTML5页面的起点；接下来，我们开始按照之前的页面设计来为不同的布局区块编写代码；一个简化的页面轮廓图如下：  接下来看看头部的代码。根据W3C的定义规范：
[blockquote]
header元素用来呈现一组具有介绍或导航性质的元素。
[/blockquote] 根据设计图，在我们的实战页面中，头部包括站点名称，站点描述以及全局导航；所以使用<header>标签完全符合逻辑。另外，我们要 在<header>中使用<nav>来 做全局导航；根据W3C的定义规范：
[blockquote]
nav元素是一个可以用来作为页面导航的链接组
；其中的导航元素链接到其他页面或当前页面的其他部分。
[/blockquote] 接下来我们结合着局部设计图，来看看<header>部分的详细代码： 
范例代码如下： <header id="banner" class="body">
<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
<nav>
<ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
|
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2014-11-7 23:55:59