关于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 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
CSS基础详解
Oct 16 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
小学学校评估方案
2014/06/08 职场文书
爱护公共设施标语
2014/06/24 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
放牛班的春天观后感
2015/06/01 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python