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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 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计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
jquery操作select方法汇总
2015/02/05 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
js实现分页功能
2017/05/24 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
React中的refs的使用教程
2018/02/13 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python使用Scrapy爬取妹子图
2015/05/28 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python3.7 的新特性详解
2019/07/25 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
Python如何实现线程间通信
2020/07/30 Python
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
员工晚婚的请假条
2014/02/08 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
詹天佑教学反思
2014/04/30 职场文书
集中采购方案
2014/06/10 职场文书
体育口号大全
2014/06/18 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python