加入收藏 | 设为首页 | 会员中心 | 我要投稿 焦作站长网 (https://www.0391zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长学院 > MySql教程 > 正文

HTML5的革新 结构之美

发布时间:2020-06-16 14:23:45 所属栏目:MySql教程 来源:互联网
导读:HTML 5如同一场革命,正在Web2.0后时代轰轰烈烈的进行着。


<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
</header>


<hgroup>标签
手册释义:用于对网页或区段(section)的标题进行组合。
使用指引:用于标题类的组合,比如文章的标题与副标题:

复制代码

代码如下:


<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>


<nav>标签
手册释义:定义导航链接的部分。
使用指引:用于定义页面的导航部分:

复制代码

代码如下:


<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>


<aside>标签
定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
使用指引:用于成节的内容,会在文档流中开始一个新的节,一般用于与文章内容相关的边栏:

复制代码

代码如下:


<aside>
<h1>作者简介</h1>
<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</aside>


<section>标签
手册释义:定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。
使用指引:用于成节的内容,会在文档流中开始一个新的节:

复制代码

代码如下:


<section>
<h1>section是什么?</h1>
<h2>一个新的章节</h2>
<article>
<h2>关于section</h1>
<p>section的介绍</p>
...
</article>
</section>


<footer>标签
手册释义:定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
使用指引:一般用来包裹整个页面通用底部,也可用于其他区域底部,比如article底部:

复制代码

代码如下:


<footer>
COPYRIGHT@Mr.Think
</footer>


<article>标签
手册释义:定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文
本。亦或是来自其他外部源内容。
使用指引:顾名思义,一般用于文章区块:

复制代码

代码如下:


<article>
<header>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章内容详情</p>
</article>


<figure>标签
手册释义:用于对元素进行组合。
使用指引:多用于图片与图片描述组合:

复制代码

代码如下:


<figure>
<img src="http://www.jb51.net/html5/img.gif" alt="figure标签" title="figure标签" />
<figcaption>这儿是图片的描述信息</figcaption>
</figure>


<menu>标签
手册释义:定义菜单列表。当希望列出表单控件时使用该标签。
使用指引:使用于菜单类区块,用来定义菜单列表或菜单选项:

复制代码

代码如下:


<menu>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</menu>


HTML 5的其他新标签,就不此一一解释了,请自行查询一下手册。
其实,这些东西,如同XHTML的div、h1、inpu等标签一样,只要平时多加实践,运用自如也是轻而易举的。
关于兼容性
如果你是一个喜欢研究关注前端的人,你应该知道淘宝的页面结构中已大量用到了HTML 5新标签。所以,我想说的是只要敢于尝试,兼容性不是问题,兼容的方法,网上有很多(本文是讲结构的,哈~)。

后话
任何一门新技术,都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员,那你就得不断的尝试并接受最新的前端技术。
孙文曾说,欲经文明之幸福,不得不经文明之痛苦。人类的革命如此,HTML 5的革命亦是如此。IE的日渐没落,让各大浏览器厂商以一次进入了战国时代,群雄逐鹿。而对于开发者,我们只奢求各大浏览器厂商尽可能的遵循同一个标准,而不是群雄逐鹿后的四分五裂。因为,高效完美的呈现给各类用户同样的应用才是我们的终极目标。

如此,本文从页面的doctype说起,到用HTML 5新标签搭建语义化更明确的页面的结构,再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知,如果你有兴趣,那就打开你的IDE,写上一段由HTML 5新标签搭建的代码,然后用CSS去描绘你的宏伟蓝图吧! (来源:Mr.Think)

(编辑:焦作站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读