【初探HTML5之使用新标签布局】用html5布局我的博客页!-阿里云开发者社区

开发者社区> 开发与运维> 正文

【初探HTML5之使用新标签布局】用html5布局我的博客页!

简介:
导航 

【初探HTML5之使用新标签布局】用html5布局我的博客页!

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面

【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道?

【HTML5初探之本地存储】如果没有数据库。。。

【HTML5初探之离线应用】如何打造零请求、无流量的网站?

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

【HTML5初探之Web Workers】网页也能多线程

【HTML5初探之Geolocation API】让我们来回去地理信息

 

前言

一直觉得该学习HTML5,这是web前端大势所趋,若此时还不学习,必将被淹没于技术的洪流,何谈成为优秀的web前端技术人员?

于是乎,小的来了。昨天初略看了下大纲,HTML包括以下东西:

1 增加了一些新元素,以更好的支持web语义化操作,提供更友好的seo
2 解决现有浏览器几个标准问题,视频播放、音频播放
3 强化页面特效控制,增加原生拖放相关,增加表单验证相关
4 增加本地存储功能,让页面响应效果提高,增加移动端用户体验
5 增加地理位置相关接口,用于获取地理信息
6 增加web 通讯相关功能,可以将服务器信息推送至页面
7 增加web worker对象用于处理页面 影响效率脚步
8 增加画布功能,可在页面绘制复杂图形
9 增加了更多的元素选择器
 ......

千里之行始于足下,让我揭开HTML5新增的布局类标签吧!

HTML5的布局

就布局来说,大概就是以下几个,其实有些也不是布局相关的了:
标签

个人理解

article

相当于:<div class="article"></div>

出现动机不明,小的不明,据说是为了增加语义化,小的就在想在低版本浏览器下咋办,无解。

一般用于一个独立的环境,比如:帖子、文章或者其它独立的地方

section

小的感觉还是div了,据说该元素用于网站内容分块,小的亦不明白为神马我不老老实实的用div就算了,答案是语义化。

提示:

1、当使用该容器需要直接定义样式时建议使用div(不懂啊)

2、section元素内容可以单独存储到数据库或者输出到word中(这个听起来靠谱点,比如用户评论)

3、该元素一般具有标题

总结:在书上得到的结论是能不用就不用,这样对吗???

nav

相当于:<div class="nav"><ul></ul></div>

该元素个人认为较靠谱……,一般用于页面头部导航或者其它会使用到ul的地方,或者分页处。

aside

该元素一般就是我们所谓两列布局的话,左边出现菜单栏容器

time

html5中,使用时间标签被单独提了出来,这个还算可以理解,且用着试试

支持一pubdate属性,表示为发布日期

header

语义化标签,相当于<div class="header"></div>小的认为能用

其中有个hgroup可以用作副标题的存在

footer

语义化标签,相当于<div class="footer"></div>

address

相当于div了,小的认为没什么意义了,又要考虑 向下兼容,一般在footer中包含与联系人地址有关的东东

 新标签制作博客页

现在来一张我博客页的截图



 

其中大概包括以下几块:

1、header 头部

2、navigation 导航

3、aside 左栏信息

4、main 正文

5、评论

在做的过程中,我总把div和section等不太分的清楚,慢慢的就模糊了彼此之间的界限,最后得出一个结论:

一些新元素不是很有必要!这就是我的第一感受,但应该是不够宏观,到html5学到后面,估计会看到他们存在的意义。

完成的界面

昨晚做完,大概是以下模样,到后面确实晚了,就没做了,因为我要给我女朋友幸福。。。。



基本用到了以上每个元素,一些我理解了,但是一些我不能完全理解;

View Code
关于IE7、8

不必说低版本浏览器是不能识别该元素的!



传说中的解决方案:

1
2
3
4
5
6
<script type="text/javascript">
        document.createElement('header');
    </script>
    <style type="text/css">
        header { display: block;}
    </style>
  但老夫在冲忙中试了试,亦不行,具体相关问题,留待小弟第一次学完后,2次学习时在一并回顾。

结束语

因为是初学HTML5,肯定会有很多不足的地方,当我真正做起来的时候,感觉有所不同,最后居然给header等标签单独定义了class???

新东西还是需要很多思考的,这样和直接用div的界限更加不分明了,此问题留待以后解决,有必要学习看看比较成熟的HTML5网站。

昨晚学的东西比较实在,也没有什么难点,下次小的看看新增的form标签会不会有所不同呢?

 



本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/archive/2013/04/16/3023912.html,如需转载请自行联系原作者

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章