HTML5语义元素的使用
2013-05-07 21:38
393 查看
传统页面的构造方法
因为使用了<div>元素,所以添加样式表很容易。下面,就是为页眉及其中的内容添加样式的规则。
1-1 为<div>添加样式,使页眉具有蓝色带边框
1-2 为页眉中的<h1>(这里是文章标题)添加样式
1-3 为页眉中的子标题添加样式
1-4 为页眉中的属名添加样式
其余的样式参见附件。上述代码实现的页面的整体样式如下:
上述页面编写规范,通过使用<div>,<span>元素把大部分的工作交给了样式表。而通过<span>元素可以为处在其它元素中的少量文本添加样式,通过<div>不仅可以为整个内容区块添加样式,还可以构建整个页面的结构。
使用HTML5改造页面
<div>是当今Web设计的必备元素,它是一个直观、多用途的容器,可以通过它为页面中的任何区块应用样式。但是<div>的问题在于:它本身不反映与页面相关的任何信息。你在页面中看到<div>元素时,你知道这是一个独立的区块,但是不知道这个区块的意图。
HTML5可以改进这种情况,可以把<div>换成具有描述性的语义元素,如<header>、<footer>。
1-5 使用HTML5具有描述性的语义元素
上面的代码中<header>和<footer>元素仍然使用了类名,这样做的目的是不用立即修改样式表。可不管怎么说,类名有点多余,所以最终就是把他们都删掉。
1-6 使用HTML5的语义元素
修改之后,为语义元素应用的样式表也应该做如下调整:
1-7 为<header>添加样式,使页眉具有蓝色带边框
1-8 为<header>中的<h1>添加样式
1-9 为<header>中的子标题添加样式
1-10 为<header>中的属名添加样式
这两种样式都会得到相同的结果。
附件:http://down.51cto.com/data/2362785
<div class="Header"> <h1>因为痛,所以叫青春</h1> <p class="Teaser">写给独自站在人生路口的你</p> <p class="Byline">[韩]金兰都</p> </div> <div class="Content"> <p><span class="LeadIn">青春</span>, 之所以艰难,是因为孤单。</p> ......完整内容见附件 </div> <div class="Footer"> <p class="Disclaimer">上述这些是译的观点</p> <p> <a href="AboutUs.html">关于我们</a> <a href="Disclaimer.html">申明</a> <a href="ContactUs.html">联系我们</a> </p> <p>Copyright © 2013</p> </div>
因为使用了<div>元素,所以添加样式表很容易。下面,就是为页眉及其中的内容添加样式的规则。
1-1 为<div>添加样式,使页眉具有蓝色带边框
.Header { background-color: #7695FE; border: thin #336699 solid; padding: 10px; margin: 10px; text-align: center; }
1-2 为页眉中的<h1>(这里是文章标题)添加样式
.Header h1 { margin: 0px; color: white; font-size: xx-large; }
1-3 为页眉中的子标题添加样式
.Header .Teaser { margin: 0px; font-weight: bold; }
1-4 为页眉中的属名添加样式
.Header .Byline { font-style: italic; font-size: small; margin: 0px; }
其余的样式参见附件。上述代码实现的页面的整体样式如下:
上述页面编写规范,通过使用<div>,<span>元素把大部分的工作交给了样式表。而通过<span>元素可以为处在其它元素中的少量文本添加样式,通过<div>不仅可以为整个内容区块添加样式,还可以构建整个页面的结构。
使用HTML5改造页面
<div>是当今Web设计的必备元素,它是一个直观、多用途的容器,可以通过它为页面中的任何区块应用样式。但是<div>的问题在于:它本身不反映与页面相关的任何信息。你在页面中看到<div>元素时,你知道这是一个独立的区块,但是不知道这个区块的意图。
HTML5可以改进这种情况,可以把<div>换成具有描述性的语义元素,如<header>、<footer>。
1-5 使用HTML5具有描述性的语义元素
<header class="Header"> <h1>因为痛,所以叫青春</h1> <p class="Teaser">写给独自站在人生路口的你</p> <p class="Byline">[韩]金兰都</p> </header> <div class="Content"> <p><span class="LeadIn">青春</span>, 之所以艰难,是因为孤单。</p> ......//完整代码见附件 </div> <footer class="Footer"> <p class="Disclaimer">上述这些是译的观点</p> <p> <a href="#">关于我们</a> <a href="#">申明</a> <a href="#">联系我们</a> </p> <p>Copyright © 2013</p> </footer>
上面的代码中<header>和<footer>元素仍然使用了类名,这样做的目的是不用立即修改样式表。可不管怎么说,类名有点多余,所以最终就是把他们都删掉。
1-6 使用HTML5的语义元素
<header> <h1>因为痛,所以叫青春</h1> <p class="Teaser">写给独自站在人生路口的你</p> <p class="Byline">[韩]金兰都</p> </header>
修改之后,为语义元素应用的样式表也应该做如下调整:
1-7 为<header>添加样式,使页眉具有蓝色带边框
header { ... //与代码1-1 的内容一样 }
1-8 为<header>中的<h1>添加样式
header h1 { ... //与代码 1-2 内容一样 }
1-9 为<header>中的子标题添加样式
header .Teaser { ...//与代码1-3内容一样 }
1-10 为<header>中的属名添加样式
header .Byline { ...//与代码1-4内容一样 }
这两种样式都会得到相同的结果。
附件:http://down.51cto.com/data/2362785
相关文章推荐
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5新增的语义元素、JS常用对象
- html5中section元素的使用方法
- HTML5提供定义网页不同部分的语义元素
- [HTML5]:所有表单元素的使用方式(附元素属性)
- HTML5的结构和语义(3):语义性的块级元素
- HTML5基础10----HTML5块元素标签的使用
- 如何使用Createjs来编写HTML5游戏(八) 通过继承扩展EaselJS中的基础元素
- HTML5基本元素的使用。
- 使用HTML5的语义标签
- HTML5-语义元素
- 如何在 IE 中使用 HTML5 元素
- 使用HTML5的JS选择器操作页面中的元素
- 使用jTopo给Html5 Canva中绘制的元素添加鼠标事件_html5教程技巧
- [HTML5]:HTML5新增多媒体元素和结构语义元素
- 使用jTopo给Html5 Canva中的元素添加鼠标事件
- HTML5 script元素async、defer异步加载使用介绍
- HTML5之HTML元素扩展(上)―新增加的元素及使用概述