H5如何布局？入门篇…

首页 > 资源分享 > 网建技术 > 正文

作者：静月山人

 2016年6月30日 10:32 星期四

浏览：4894 次

字号：小中大

评论：0 条

字数：2647 个

显示：1200px 1360px 1600px

关灯 编辑

H5布局如何下手？

所谓H5布局，说简单点，就是用H5特有的新标签（语义化）来替代传统布局方式。几点注意如下：

1）css写法不变，比如你定义标签，那css里就要这样写header{}。另外，H5标签也是可以加class或id的，css写法没啥区别，比如，.样式名{} #样式名{}；

2）移动端网站H5标签（包括css3）是支持的，放心大胆去弄，不要去考虑狗屁的兼容。如果是单纯PC网站，建议传统div方式布局比较合适；

3）响应式网站，技术强迫症，必须要用H5来做，那html5shiv.js或modernizr.js是不错的IE兼容解决方案。（比如李勇的小拼sem博客）。注意：ie8以下是没办法的，可以页面顶部弹出提醒升级你的IE，算友好体验的一部分吧。

4）关于bootstrap，感兴趣的同学快上手吧，老外的东西，不得不承认，真TM是NB轰轰的。标准、标准、太标准了。

H5布局标签如何选择？

个人理解，傻瓜式解释。要是看不懂，说好的一筐豆腐呢？

全局：

<section></section>：相当于<div></div>，以前习惯的div改为section，当然你继续用div也一样

<aside></aside>：相当于<div class="sidebar"></div>，比如常见的侧边栏

导航或者分页：

文章、帖子或者其它独立的页面：

<time></time>：日期时间什么的放里面就好了，相当于<div class="time">2016-05-21 15:43:21</div>，支持pubdate属性，表示为发布日期

<summary></summary>：标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。<details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

其它新标签：

<audio></audio>：标签定义声音，比如音乐或其他音频流。HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

<video></video>：标签定义视频，比如电影片段或其他视频流。<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

<source>：标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>

<datalist></datalist>：标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。<figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>（是不是类似dl dt dd）

<mark></mark>：主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。传统如<span></span>

<hgroup></hgroup>：标签用于对网页或区段（section）的标题进行组合。

H5还有很多新标签，一般你也用不着，感兴趣去度娘啊。上面这些常用的你能搞通了，基本做个标准H5页面是问题不大的。

H5布局传统标签还能用吗？

答案是肯定的，比如em、i、span、ul、li、p、pre这些常用的传统标签，一样可以在H5页面中正常使用。不要钻牛角尖，H5布局只是引入了新的语义化标签，并不意味着它就是全部。