HTML5 语义化结构化规范化


Posted in HTML / CSS onOctober 17, 2008

HTML结构更加清晰、规范,学习HTML5优化结构的思路。
HTML5添加了一些新元素,用来标识常用的结构,是html更具语义化,可是我们无法直接使用,即使可能用到还要等他个十年八年的。
那就像微格式一样,使用class代替,或者随意点,使用id和class名来代替,让自己的结构更加清晰化,可以推广为规范,让团队协作更加顺畅。
一些新增的结构标记
◎section:这可以是书中的一章或一节,实际上可以是在HTML4中有自己的标题的任何东西
◎header:页面上显示的页眉;与head元素不一样
◎footer:页脚;可以显示电子邮件中的签名
◎nav:指向其他页面的一组链接
◎article:blog、杂志、文章汇编等中的一篇文章
一些例子
HTML5的文档结构
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
XHTML的文档结构
<divid="header">header</div>
<divid="nav">nav</div>
<divclass="article">
<divclass="section">section</div>
</div>
<divid="aside">aside</div>
<divid="footer">footer</div>
HTML5的图片结构
<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</figure>
XHTML的图片结构
<divclass="figure">
<h4class="legend">Figure2.InstallMozillaXFormsdialog</h4>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</div>
HTML5的加上标记

m元素表示文本被“加上标志”,但是不一定要强调。可以把它想像成书中突出显示的一节。

Google的缓存页面就是典型的用例。如果链接到一个缓存的副本,搜索词就被加上标志。例如,如果搜索“Egret”,那么缓存的Google页面可能像下面这样:
TheGreat<m>Egret</m>(alsoknownastheAmerican<m>Egret</m>)isalargewhitewadingbirdfoundworldwide.TheGreat<m>Egret</m>flieswithslowwingbeats.ThescientificnameoftheGreat<m>Egret</m>isCasmerodiusalbus.XHTML的加上标记TheGreat<spanclass="m">Egret</span>(alsoknownastheAmerican<spanclass="m">Egret</span>)isalargewhitewadingbirdfoundworldwide.TheGreat<spanclass="m">Egret</span>flieswithslowwingbeats.ThescientificnameoftheGreat<spanclass="m">Egret</span>isCasmerodiusalbus.

HTML / CSS 相关文章推荐
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
HTML5 与 XHTML2
Oct 17 #HTML / CSS
X/HTML5 和 XHTML2
Oct 17 #HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 #HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 #HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 #HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 #HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 #HTML / CSS
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php重定向的三种方法分享
2012/02/22 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
php文件上传简单实现方法
2015/01/24 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python中内建函数的简单用法说明
2016/05/05 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
水务局局长岗位职责
2013/11/28 职场文书
中国好声音广告词
2014/03/18 职场文书
战略合作协议书范本
2014/04/18 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
《去年的树》教学反思
2016/02/18 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
解决Oracle数据库用户密码过期
2022/05/11 Oracle
python区块链持久化和命令行接口实现简版
2022/05/25 Python