关于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轻松实现圆角效果
Nov 09 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
python 整数越界问题详解
2019/06/27 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python入门之井字棋小游戏
2020/03/05 Python
如何利用python 读取配置文件
2021/01/06 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
高中自我鉴定
2013/12/20 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
走群众路线剖析材料
2014/10/09 职场文书
企业整改报告范文
2014/11/08 职场文书