关于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和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP如何抛出异常处理错误
2011/03/02 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
react build 后打包发布总结
2018/08/24 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
python列表操作使用示例分享
2014/02/21 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
深入理解Python变量与常量
2016/06/02 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
python实现画图工具
2020/08/27 Python
python 如何设置守护进程
2020/10/29 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
园长自我鉴定
2013/10/06 职场文书
毕业生就业自荐信
2013/12/04 职场文书
给校长的一封建议书
2014/03/12 职场文书
初三班主任寄语大全
2014/04/04 职场文书
爱心活动计划书
2014/04/26 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书