HTML5_用语义化标记重新定义博客
HTML5文档的第一行便是文档类型声明，文档类型声明的作用有两个
一：验证器依据文档类型来判断采用何种验证规则去验证代码
二：文档类型声明能够强制IE6,IE7,IE8以“标准模式”渲染页面
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>HTML 5 Blog</title>
5: </head>
6: <body>
7:
8: </body>
9: </html>
定义博客头部
头部(header)可能包含从公司的Logo到搜索框在内的各种各样内容。而不仅仅是标题。
1: <header id="page_header">
2: <h1>把栏杆拍烂Blog</h1>
3: </header>
另外需要注意的是，一个页面中可以包含多个头部(header)。比如独立的区段或文章块都可以用户自己的头部
定义博客的尾部(footer)
同header一样，同一个页面也可以拥有多个footer。尾部footer的作用，一般用来包括版权日期和网站归属信息。
<footer id="page_footer">
<p>@ Copy 2013 把栏杆拍烂</p>
</footer>
定义导航nav
导航的重要作用，不言而喻，我要在文档的头部添加导航，即header标签中，添加nav，与header和footer一样，同一页面中，也可以包含多个导航nav
定义头部导航
<header id="page_header">
<h1>把栏杆拍烂Blog</h1>
<nav>
<ul>
<li> <a href="/">首页</a></li >
<li><a href="question">博问</a></li>
<li><a href="flash_memory">闪存</a></li>
<li><a href="jottings">新随便</a></li>
<li><a href="contact">联系</a></li>
<li><a href="subscription">订阅</a></li>
<li><a href="admin">管理</a></li>
</ul>
</nav>
</header>
定义尾部导航
<footer id="page_footer">
<p>@ Copy 2013 把栏杆拍烂</p>
<nav>
<ul>
<li><a href="http://www.cnblogs.com/tao-zi/">主页</a></li>
<li><a href="http://www.cnblogs.com/tao-zi/">关于</a></li>
<li><a href="http://www.cnblogs.com/tao-zi/">联系</a></li>
</ul>
</nav> </footer>
至此我们已经定义好了，头部header和尾部footer，让我们来看下，在浏览器中的效果
定义博文区段section
在这里，我将整个正文页面划分为两个大区段section，即正文中的文章区段和左边的侧边栏区段
<section id="page_posts"> </section> <section id="page_aside"> </section>
定义旁白
好了博文区段已定义完成，在浏览器中查看运行效果
完成的代码如下。
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Blog</title>
<meta charset="utf-8">
</head>
<body>
<header id="page_header">
<h1>把栏杆拍烂Blog</h1>
<nav>
<ul>
<li> <a href="/">首页</a></li >
<li><a href="question">博问</a></li>
<li><a href="flash_memory">闪存</a></li>
<li><a href="jottings">新随便</a></li>
<li><a href="contact">联系</a></li>
<li><a href="subscription">订阅</a></li>
<li><a href="admin">管理</a></li>
</ul>
</nav>
</header>
<section id="page_posts">
<article class="posts">
<header>
<h2>师说</h2>
<p>唐代 韩愈</p>
</header>
<aside>
<p>
《师说》作于唐贞元十八年（公元802年）韩愈任四门博士时，是说明教师的重要作用，从师学习的必要性以及择师的原则。抨击当时士大夫之族耻于从师的错误观念，倡导从师而学的风气，同时，也是对那些诽谤者的一个公开答复和严正的驳斥。作者表明任何人都可以作自己的老师，不应因地位贵贱或年龄差别，就不肯虚心学习。文末并以孔子言行作证，申明求师重道是自古已然的作法，时人实不应背弃古道
</p>
</aside>
<h2>原文</h2>
<p>
古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。吾师道也，夫庸知其年之先后生于吾乎？是故无贵无贱，无长无少，道之所存，师之所存也。
嗟（jiē）乎！师道之不传也久矣！欲人之无惑也难矣！古之圣人，其出人也远矣，犹且从师而问焉；今之众人，其下圣人也亦远矣，而耻学于师。是故圣益圣，愚益愚。圣人之所以为圣，愚人之所以为愚，其皆出于此乎！爱其子，择师而教之；于其身也，则耻师焉，惑矣。彼童子之师，授之书而习其句读（dòu）者，非吾所谓传其道解其惑者也。句读之不知，惑之不解，或师焉，或不（fǒu）焉，小学而大遗，吾未见其明也。巫医乐师百工之人，不耻相师。士大夫之族，曰师曰弟子云者，则群聚而笑之。问之，则曰：“彼与彼年相若也，道相似也。位卑则足羞，官盛则近谀。”呜呼！师道之不复可知矣。巫医乐师百工之人，君子不齿，今其智乃反不能及，其可怪也欤！
圣人无常师。孔子师郯（tán）子、苌（cháng)弘、师襄、老聃（dān）。郯子之徒，其贤不及孔子。孔子曰：三人行，则必有我师。是故弟子不必不如师，师不必贤于弟子，闻道有先后，术业有专攻，如是而已。
李氏子蟠，年十七，好古文，六艺经传(zhuàn)皆通习之，不拘于时，学于余。余嘉其能行古道，作师说以贻(yí)之。
</p>
<h2>译文</h2>
<p>
古代求学的人一定有老师。老师，是用来传授道理，讲授学业，解答疑难问题的。人不是一生下来就懂得知识和道理的，谁能没有疑惑？有疑惑却不向老师指教，那就会成为疑难的问题，终究不能解决。在我之前出生的人，他懂得知识和道理本来就比我早，所以我跟从他并以他为师；在我之后出生的人，（如果）他懂得知识和道理也比我早，我也跟从他学习并以他为师。我从师学习道理，哪管他的年龄比我大还是比我小呢？因此，无论地位显贵或是低下，无论年长年少，知识、道理所存在的地方，就是老师所存在的地方。
唉！从师学习的风尚已经失传很久了，想要人们没有疑惑很难呐！古代的圣人，他们超出一般人很远了，尚且跟从老师向老师请教学问道理；现在的一般人，他们跟圣人相比相差很远了，却以向老师学习为羞耻。所以圣人就更加圣明，愚蠢的人就更加愚昧。圣人能成为圣人的原因，愚蠢的人能成为愚蠢的人的原因，大概就是出于这个缘故！爱自己的孩子，选择老师来教他。（但是）对于他自己，却以跟从老师学习为可耻，糊涂啊！那些教他读书，学习句子的停顿的老师，不是我所说的传授道理、解答疑难问题的老师。不知道断句要问老师，有疑惑不能解决却不愿问老师，小的方面（句读）要学习，大的方面（解惑）却丢弃，我没见到他聪明在哪。巫医，乐师及各种工匠这类人，不以互相学习为耻。士大夫这类人中，说起老师、弟子的时候，这些人就聚集在一起嘲笑他。问那些嘲笑者（嘲笑他的原因），他们就说："他和他的年龄差不多，修养和学业也差不多，（怎么能称他为老师呢？）以地位低的人为师，足以感到羞愧，称官位高的人为师就近于谄媚。"啊！从师学习的风尚不再恢复，由此就可以知道了。巫医，奏乐之人，各类工匠，是士大夫们所看不起的，现在他们的见识反而比不上这些人了。真是令人奇怪啊!
圣人没有固定的老师，孔子曾经以郯子、苌弘、师襄、老聃为师。郯子这一类人，他们的道德才能（当然）不如孔子。孔子说："多人同行，其中就一定有我的老师。"因此学生不一定不如老师，老师也不一定比弟子有贤能，懂得道理有先有后，学问和技艺上各有各的研究，如此而已。
李氏的儿子李蟠，年纪十七岁，爱好古文，六艺的经文和传文都普遍学习了，不受时俗（指当时士大夫中耻于从师的不良风气）的限制，不以从师学习为耻，向我学习。我赞赏他能履行古人从师学习的风尚，写了这篇《师说》来送给他。[2]
</p>
<footer>
<p><a href="comments"><li> 1000 评论</li></a>...</p>
</footer>
</article> </section> <section id="page_aside"> </section> <footer id="page_footer">
<p>@ Copy 2013 把栏杆拍烂</p>
<nav>
<ul>
<li><a href="http://www.cnblogs.com/tao-zi/">主页</a></li>
<li><a href="http://www.cnblogs.com/tao-zi/">关于</a></li>
<li><a href="http://www.cnblogs.com/tao-zi/">联系</a></li>
</ul>
</nav> </footer> </body>
</html>
有些人喜欢用aside来创建侧边栏，但是根据aside的定义，只是为了展示与文章有关的内容，而我们这里要创建整个博客页面的侧边栏。所以在这里我们使用section创建侧边栏
<section id="page_aside">
<nav>
<h3>随便归档</h3>
<ul>
<li><a href="2013/01">2013年1月</a></li>
<li><a href="2013/02">2013年2月</a></li>
<li><a href="2013/03">2013年3月</a></li>
<li><a href="2013/04">2013年4月</a></li>
<li><a href="2013/05">2013年5月</a></li>
<li><a href="2013/06">2013年6月</a></li>
<li><a href="2013/07">2013年7月</a></li>
</ul>
</nav>
</section>
好啦，至此整个博客的页面的逻辑结构已创建完成，下面来给页面添加CSS样式，下面是未添加样式的页面
美化界面
body{
width: 960px;
margin: 15px auto;
font-family:arial,Helvetica,sans-serif;
}
更改头部的显示
header#page_header nav ul,#page_footer nav ul{
list-style: none;
margin: 0;
padding: 0;
}
header#page_header nav ul li,#page_footer nav ul li{
padding: 0;
margin: 0 30px 0 0;
display: inline;
}
section#page_posts{
float: left;
width: 70%;
}
section#page_posts aside{
float: right;
width: 40%;
margin-left: 5%;
font-size: 10px;
line-height: 40px;
}
section#page_aside{
float: left;
width: 25%;
}
footer#page_footer{
clear: both;
width: 100%;
display: block;
text-align: center;
}
HTML5_用语义化标记重新定义博客的更多相关文章
- 第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...
- iOS组件化思路－大神博客研读和思考
一.大神博客研读 随着应用需求逐步迭代,应用的代码体积将会越来越大,为了更好的管理应用工程,我们开始借助CocoaPods版本管理工具对原有应用工程进行拆分.但是仅仅完成代码拆分还不足以解决业务之间的 ...
- Java开源博客My-Blog之docker组件化修改
前言 5月13号上线了自己的个人博客,<Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦>,紧接着也在github上开源了博客的代码,到现在为 ...
- Java开源博客My-Blog之docker容器组件化修改
前言 5月13号上线了自己的个人博客,<Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦>,紧接着也在github上开源了博客的代码,到现在为 ...
- Docker学习总结（6）——通过 Docker 化一个博客网站来开启我们的 Docker 之旅
通过 Docker 化一个博客网站来开启我们的 Docker 之旅 这篇文章包含 Docker 的基本概念,以及如何通过创建一个定制的 Dockerfile 来 Docker 化Dockerize一个 ...
- GitHub上搭建Hexo化的博客
遇过的坑: 使用GitBash安装Hexo(npm的环境变量配置)注意 安装完成后添加Path环境变量,使npm命令生效.新版已经会自动配置Path 1 ;C:\Program Files\nodej ...
- Github 搭建 Hexo 纯静态化个人博客平台
以前一直想搭建一个属于自己的博客平台,有余种种原因一直未能实现,最近闲来无事,参照网上的教程,搭建了属于自己的博客.自己的博客网站,样式自由,不需要受限于各大平台. 本篇为从零开始的基础篇,本篇所包含 ...
- 制作 wordpress 博客静态化到本地
wget 克隆 wordpress 博客镜像 wget -e robots=off -w 1 -xq -np -nH -pk -m -t 1 -P "./wordpress.org" ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
随机推荐
- httpclient发起https请求以及获取https返回内容
工作中的需要,使用Apache httpclient发起获取通过https返回的内容,试了很多网上的解决办法都不行,查阅了Apache httpclient的官方文档,最后终于找出解决方法,分享给需要 ...
- 正则表达式_删除字符串中的任意空格（Regex）
直接用 -split,默认以空白分隔.-split $a 用正则表达式中的 \s,-replace -split中都可以直接使用正则表达式,select-string也可以 split 和 join ...
- CodeForces 173B Chamber of Secrets spfa
Chamber of Secrets 题目连接: http://codeforces.com/problemset/problem/173/B Description "The Chambe ...
- OpenGL 4.0 GLSL 实现 投影纹理映射（Projective Texture Mapping） (转)
http://blog.csdn.net/zhuyingqingfen/article/details/19331721 分类: GLSL 投影纹理映射 (projective texture ...
- [NOIP 2014复习]第三章：动态规划——NOIP历届真题回想
背包型动态规划 1.Wikioi 1047 邮票面值设计 题目描写叙述 Description 给定一个信封,最多仅仅同意粘贴N张邮票,计算在给定K(N+K≤40)种邮票的情况下(假定全部的邮票数量都 ...
- CSS定位规则之BFC 你居然一直不知道的东西！！！！！
相关文档: http://blog.sina.com.cn/s/blog_877284510101jo5d.html http://www.cnblogs.com/dojo-lzz/p/3999013 ...
- Android Client and Jsp Server
1. Interestfriend Server https://github.com/eltld/Interestfriend_server https://github.com/774663576 ...
- XCODE4.6从零开始添加视图
转自:http://www.cnblogs.com/luoxs/archive/2012/09/23/2698995.html 对于很多初学者来说,肯定希望自己尝试不用傻瓜的“Single View ...
- 使用NIO提升性能
NIO是New I/O的简称,与旧式的基于流的I/O方法相对,从名字看,它表示新的一套Java I/O标准. 具有以下特性: 传统Java IO,它是阻塞的,低效的.那么Java NIO和传统Java ...
- 基于html5实现的愤怒的小鸟网页游戏
之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...