HTML5 语义化结构化规范化

 HTML结构更加清晰、规范,学习HTML5优化结构的思路。

HTML 5 添加了一些新元素,用来标识常用的结构,是html更具语义化,可是我们无法直接使用,即使可能用到还要等他个十年八年的。

那就像微格式一样,使用class代替,或者随意点,使用id和class名来代替,让自己的结构更加清晰化,可以推广为规范,让团队协作更加顺畅。

一些新增的结构标记

◎ section:这可以是书中的一章或一节,实际上可以是在 HTML 4 中有自己的标题的任何东西
◎ header:页面上显示的页眉;与 head 元素不一样
◎ footer:页脚;可以显示电子邮件中的签名
◎ nav:指向其他页面的一组链接
◎ article:blog、杂志、文章汇编等中的一篇文章

一些例子

HTML5的文档结构

<header>...</header>
 <nav>...</nav>
 <article>
 <section> ... </section>
 </article>
 <aside>...</aside>

 <footer>...</footer>

XHTML的文档结构

<div id="header">header</div>
<div id="nav">nav</div>
<div class="article">
  <div class="section">section</div>
</div>
<div id="aside">aside</div>
<div id="footer">footer</div>

HTML5的图片结构

<figure id="fig2">
  <legend>Figure 2. Install Mozilla XForms dialog</legend>
  <img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
</figure>

XHTML的图片结构

<div class="figure">
  <h4 class="legend">Figure 2. Install Mozilla XForms dialog</h4>
  <img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
</div>
 
HTML5的加上标记
  
m 元素表示文本被 “加上标志”,但是不一定要强调。可以把它想像成书中突出显示的一节。
Google 的缓存页面就是典型的用例。如果链接到一个缓存的副本,搜索词就被加上标志。例如,如果搜索 “Egret”,那么缓存的 Google 页面可能像下面这样:

The Great <m>Egret</m> (also known as the American <m>Egret</m>)  is a large white wading bird found worldwide.The Great <m>Egret</m> flies with slow wing beats. The scientific name of the Great <m>Egret</m> isCasmerodius albus.XHTML的加上标记The Great <span class="m">Egret</span> (also known as the American <span class="m">Egret</span>)  is a large white wading bird found worldwide.The Great <span class="m">Egret</span> flies with slow wing beats. The scientific name of the Great <span class="m">Egret</span> isCasmerodius albus.

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Js正则表达式过滤特殊字符、表情的实例代码: let ret = "12312ffds#¥@¥#%^***(()))*)).`@%@¥@¥", val = this.customDeviceName;//特殊字符过滤let pattern = new RegExp("[`~!@#$^*()=|{}':;',\\[\\]./?~!@#¥……*()——|{}【】‘;:”“'。,、?]
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用
HTML5 火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。 1、使用Canvas绘制直线: !doctype html ht
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这
近日,微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号,项目名称为 ChakraCore,遵循MIT许可协议。 ...,HTML5中国,中国最大的HTML5中文门户。
这篇文章报道的不是“新闻”,因为W3C早已开始着手CSS变量方面的工作。至于Google,则要追溯到11月初,当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...,HTML5中国,中国最大的HTML5中文门户。