关于HTML5语义标签的实践(blog页面)


Posted in HTML / CSS onJuly 12, 2016

仿照着用HTML5+CSS3做了一个blog页面。整体效果布局如如:

关于HTML5语义标签的实践(blog页面)

页面布局是基于html5元素的。所以在开始动手之前先熟悉一下HTML5元素,然后检查它的语义是否适合你的布局很重要。

The HTML5 Structure

关于HTML5语义标签的实践(blog页面)

有一点很重要,当编写HTML5代码的时候,不要简单地把<div>标签用html5中的<section>标签代替。有些时候<div>元素在语义

上仍然是一个很不错的选择。比如wrapper或者container div

其中一个新的可以用来替换传统的div元素的标签是<header>元素。在<header>元素中我们也可以放置用来包裹页面的主要导航菜单

的<nav>元素。包含了一个锚点的h1元素是我们blog的标题。

关于HTML5语义标签的实践(blog页面)

最开始的时候我使用<section>来包裹页面的内容,但是在阅读了一些文档之后,感觉这样在语义上并不是100%正确。还是选择了div元素,

在div元素内部,每一篇博客都包裹在它自己的article元素里面。

关于HTML5语义标签的实践(blog页面)

在一系列博客的下方,有一对分页链接。通常分页链接的重要性并不和<nav>(可以被用在多个地方,并不只是主导航)元素

对等。但是本次这个博客布局还是把分页链接作为一个主导航处理。

关于HTML5语义标签的实践(blog页面)

在<aside>元素被修订之前,语义上并没有一个专门的元素作为侧边栏。不过,现在可以放心地使用aside元素儿而不用担心语法上的问题。

本示例中aside元素中包含了若干个section元素。在侧边栏的底部有一个简单的搜索框。它可以让我们接触到HTML5表单的一些新特性。

其中的一个就是placeholder属性

关于HTML5语义标签的实践(blog页面)

布局最后以footer元素结束。本示例中footer元素需要放置在div容器的外部,这样可以使footer元素的宽度横跨整个页面。

关于HTML5语义标签的实践(blog页面)

完整的源代码和CSS3部分参见原文http://line25.com/tutorials/create-a-typography-based-blog-layout-in-html5

以上这篇关于HTML5语义标签的实践(blog页面)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/androidshouce/archive/2016/07.html

HTML / CSS 相关文章推荐
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 #HTML / CSS
HTML5之语义标签介绍
Jul 07 #HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 #HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 #HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 #HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 #HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 #HTML / CSS
You might like
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Js基础学习资料
2010/11/23 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
JavaScript多线程详解
2015/08/12 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
基于Python __dict__与dir()的区别详解
2017/10/30 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
SQL Server面试题
2016/10/17 面试题
应届本科生推荐信范文
2013/12/25 职场文书
环保建议书
2014/03/12 职场文书
大课间体育活动方案
2014/03/12 职场文书
求职简历自荐信
2014/06/18 职场文书
绿色小区申报材料
2014/08/22 职场文书
Golang的继承模拟实例
2021/06/30 Golang
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis