3 HTML5新增的语义标签

3 HTML5新增的语义标签

HTML 5 新增加了一些新的元素和属性,反映典型的现代网站用法。

其中有些是技术上类似 <div> 和 <span> 标签,但有一定含义,例如 <nav>(网站导航块)和 <footer>,这种语义标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。

也提供了新的功能标签,如媒体播放器<audio> 和 <video> 标记。

还有一些过时的 HTML 4 标记将取消,像包括纯粹用作显示效果的标记,如 <font> 和 <center>,因为它们已经被 CSS 取代。

新增的结构元素

曾经,网页编写会频繁使用<table>这样的没有任何语义的布局,不过最终还是慢慢的接受了相对更语义化的<div>布局替代了,并且开始调用外部样式表。

但不幸的是,代码中大量使用<div>标记又太单一了,而复杂的网页设计需要大量不同的标签结构代码,我们把它叫做“<div>-soup” 综合症。

现在,HTML5和CSS3正跃跃欲试的等待大家,新增加了和布局相关的多种语义标记。

h1.png

尽管这有些勉强,但这个实例还是可以说明使用HTML4对一个复杂的页面设计进行,代码化后依然过于臃肿。

不过HTML5元素富有更细致的语义,可以代替那些毫无语义的<div>标签,并同时为CSS的调用提供了“自然”的CSS钩子。这种语义化的特性不仅提升了我们网页的质量和语义,并且大量减少了曾经代码中用于CSS必须调用的class和id属性。

事实上,后面课程中介绍的CSS3也是可以忽略掉所有class和id 的。 现在布局中结合了富有新的语义化标记的HTML5、CSS3为web设计师们的网页提供了神一般的力量。

让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript, Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。

h3.png

上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,584评论 1 19
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,203评论 2 19
  • 据三星和O2联合发布的“手机生活报告”,如今人们平均每天花在手机上的时间已经接近两小时(119分钟)。手机被誉为现...
    念之声阅读 415评论 0 0
  • 这是一个 明明自己是喵 却非以为自己是茁壮成长的花朵 的奇葩故事 喵星人的脑子里总是充满了各种奇怪的想法 喜欢东躲...
    加油猫先生阅读 197评论 0 0