有关HTML5词义标识的实践活动(blog网页页面)

2021-02-24 04:58 jianzhan
模仿着用HTML5+CSS3做了1个blog网页页面。总体实际效果合理布局如如:

  网页页面合理布局是根据html5元素的。因此在刚开始动手能力以前先熟习1下HTML5元素,随后查验它的词义是不是合适你的合理布局很关键。

  The HTML5 Structure

有1点很关键,当撰写HTML5编码的情况下,不必简易地把<div>标识用html5中的<section>标识替代。一些情况下<div>元素在词义

上依然是1个很非常好的挑选。例如wrapper或container div

在其中1个新的能够用来更换传统式的div元素的标识是<header>元素。在<header>元素中大家还可以置放用来包裹网页页面的关键导航栏菜单

的<nav>元素。包括了1个锚点的h1元素是大家blog的题目。

最初的情况下我应用<section>来包裹网页页面的內容,可是在阅读文章了1些文本文档以后,觉得这样在词义上其实不是100%正确。還是挑选了div元素,

在div元素內部,每篇blog都包裹在它自身的article元素里边。

在1系列blog的正下方,有1对分页查询连接。一般分页查询连接的关键性其实不和<nav>(能够被用在好几个地区,其实不只是主导航栏)元素

对等。可是本次这个blog合理布局還是把分页查询连接做为1个主导航栏解决。

在<aside>元素被修定以前,词义上并沒有1个专业的元素做为侧面栏。但是,如今能够安心地应用aside元素儿而无需担忧英语的语法上的难题。

本示例中aside元素中包括了若干个section元素。在侧面栏的底部有1个简易的检索框。它可让大家触碰到HTML5表单的1些新特点。

在其中的1个便是placeholder特性

合理布局最终以footer元素完毕。本示例中footer元素必须置放在div器皿的外界,这样可使footer元素的宽度横跨全部网页页面。

详细的源码和CSS3一部分参照原文http://line25.com/tutorials/create-a-typography-based-blog-layout-in-html5

以上这篇有关HTML5词义标识的实践活动(blog网页页面)便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

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