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中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
ReactNative中使用Redux架构总结
2017/12/15 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
如何转换一个字符串到enum值
2014/04/12 面试题
护士思想汇报
2014/01/12 职场文书
单位领导证婚词
2014/01/14 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
付款委托书范本
2014/04/04 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
会议室管理制度范本
2015/08/06 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python