一.使用 HTML5 的 声明
在 HTML 4.01 和 XHTML 中那段长长的 DTD 类型声明应该是所有标签中最难记住的标签了，但在 HTML5 中， DTD 声明非常简单：
1
<!DOCTYPE html>
就是这么简洁，要使用 HTML5 ，第一步肯定是先使用 HTML5 的 <!DOCTYPE>声明。
二.加入 html5.js
可以在主题的 head 元素内加入一段 js 来让 IE8 及以下的 IE 完全支持 HTML5 的标签。
下载由 html5shiv 提供的这个 html5.js 文件。
1
2
3
<!--[if lte IE 9]>
<script type="text/javascript" src="./js/html5.js"></script>
<![endif]-->
代码中使用了条件注释针对低版本的 IE（IE8 及以下版本）浏览器来调用这个 js 文件，其他浏览器会忽略掉这段代码，不会造成浪费的 HTTP 请求。
三.CSS Reset
CSS Reset 是为了把浏览器提供的默认样式去掉的一段 CSS ，详细的介绍可以参见 Kayo 之前所写的一篇文章 《关于 CSS Reset 》，本文中的 CSS Reset 是根据前文的 CSS Reset 改造的，主要是加入了对 HTML5 中新加入的标签的重置。下面是 Kayo 针对 HTML5 的 CSS Reset ，供大家参考，也可以参照前文定制更适合个人情况的 CSS Reset 。
/*** 加入 HTML5 新标签的样式重置 ***/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0padding: 0border: 0outline: 0font-size: 100%vertical-align: baselinebackground: transparent}
body{line-height: 1text-align: left}
:focus {outline: 0}
/*** 将一些可以代替 div 标签的 HTML5 标签定义为块状元素 ***/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content:''content:none}
ins {text-decoration: none}
mark {background-color: #ff9color: #000font-style: italicfont-weight: bold}
del {text-decoration: line-through}
table {border-collapse: collapseborder-spacing: 0}
input, select {vertical-align: middle}
现在，可以放心的在 WordPress 主题中使用 HTML5 标签了。
四.修改主题中的标签为语义化的 HTML5 标签
在网页重构中，舍弃了没有任何语义的 table 布局，取而代之的是新的标记，最常见的莫过于 div 这个标签，不过在设计复杂的页面时，新的问题出来了—— div 的滥用导致页面变得臃肿并且难于理解。值得兴奋的是， HTML5 为开发者引入了新的语义化标记，下面给大家介绍一些适合在 WordPress 主题中使用的 HTML5 标签。
<header>用于定义文档的页眉，可以代替原本包裹页眉的 <div>。
<footer>用于定义文档的页脚，可以代替原本包裹页脚的 <div>。
<nav>用于定义导航链接的部分，即代替包裹菜单的 <div>。
<article>用于定义独立的内容，很适合代替包裹文章的 <div>，如 WordPress 首页、归档页或文章页的文章列表中可使用该标签包裹文章。
<aside>该标签用于定义其所处内容之外的内容，并且 aside 的内容应该与附近的内容相关，因此很适合用来包裹 WordPress 的侧边栏。
另外 <time>, <small>, <section>等 HTML5 标签也适合用来改造升级 WordPress 主题，这些标签的具体意义可以参见 W3school 。
五.为主题加入 HTML5 微数据
关于 HTML5 微数据的介绍和使用方法可以参见 Kayo 之前所写的文章 《HTML5 之微数据》，这里主要介绍一些适合 WordPress 使用的微数据规范，因此建议读者先阅读前文再阅读下文。
这里使用的是 schema.org 的微数据规范，加入微数据是为了让机械（如搜索引擎）识别网页内容的意义，可以说是华丽丽的 SEO 。
下面列举一些适合的微数据规范：
http://schema.org/WPHeader 这是定义网页版头的微数据，需要注意的是 WPHeader 的 “WP” 不是指 WordPress ，而是 Web Page 的缩写，不过用在 WordPress 上也是非常合适的。
http://schema.org/WPFooter 定义网页页脚。
http://schema.org/BlogPosting 定义一篇博客文章。
http://schema.org/Review 定义一条评论。
纵观能刷爆朋友圈的H5场景制作，无非有两种类型，一是技术炫酷、引人注目的二是主题新颖、能唤起用户情感共鸣的。做技术对很多企业和个人来说都很难，但是我们可以利用维本微传单等H5制作工具，设计出传播率极高的十大H5场景制作主题。 1.情感 包括亲情、爱情和友情，它们都是能很容易引起用户情感共鸣的主题，如果我们能真实贴切地把这些感情表达出来，传播率自然就高了，比如《首草先生的情书》。 2.节日 在节日的氛围影响下，与节日相关的H5场景主题往往人气也高，它的表现形式一般是贺卡、语音祝福等，比如央视春晚的《家和万事兴》等等。 3.公益 公益是一件充满正能量的事，以公益为主题的H5场景更能引起人们的关注。另外，这种H5场景的互动性一般都很强，令每个用户都参与其中，所以传播量很大。 4.怀旧 情怀也是一种容易引起内心共鸣的情感，因为人们都比较容易陷入对过去的怀念和回顾，而这种主题的H5场景正是抓住了人们的这种心理，使其迅速传播。 5.家乡母校 这种主题的H5场景利用的是人们热爱家乡、热爱母校的特点，只要用心制作，就很容易刷爆朋友圈。不过，它的范围还是会有所限制的。 6.游戏 也就是H5游戏，因其简单有趣的游戏形式而受到广大用户的喜爱，比如《神经猫》等。它不需要什么多复杂的技术和特效，但是逻辑要清晰明了，主要的制作工具有维本互动等。 7.测试 测试类H5场景比较容易激发人们的好奇心，对文案的要求很高，通常其风格都是幽默风趣型的，这样能引起用户的兴趣。 8.接力 顾名思义，接力就是要分享给好友，让好友帮助你获得优惠或奖品。所以，它要有一定的利益诱惑，促使用户分享。 9.心灵鸡汤 现在，人们都比较反感那些传统的那种心灵鸡汤，因为其繁杂无趣。但是，如果以页面简单、设计独特的H5场景来呈现，或许能取得不错的效果。 10.热点 热点永远是人们关注和娱乐的主题，利用热点制造与自身品牌相关的话题或创意，并且做好推广工作，那么其传播率必然是非常可观的。 维本是一家强大的HTML5制作公司，专注于 企业H5 网站建设。同时提供人才招聘、企业宣传、产品推广、会议活动、电商营销等各类H5创作。维本为企业提供精致美观的H5动态展示、强大精准的企业数据监测分析及企业整合营销方案帮助企业轻松实现社交平台(微信、微博、QQ等)数字化营销。 湖南维本网络科技有限公司为中国数字技术型营销领跑者、中国较早的微信应用开发，HTML5开发公司之一是该行业的风向标，始终保持着一份与时俱进的奋斗激情，及在行业的领跑者地位。公司总部坐落于长沙，服务全国各地的企业，公司倡导数字技术型营销理念，致力于为企业提供全方位的数字营销解决方案，提供多种功能，实现内容传播，提高转化率。 http://www.wei-ben.com/欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）