博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5语义化标签的应用
阅读量:4542 次
发布时间:2019-06-08

本文共 2264 字,大约阅读时间需要 7 分钟。

前言

最近在读HTML5秘籍(the missing manual),书中对HTML5的定义和理解是:HTML5实际上是一组独立标准的集合。有些标准已经得到了支持,而另外一些标准几年内(甚至永远)不会得到支持,即HTML5在某些浏览器的某些版本中能够运行。HTML5作为新一代web的开发标准,相信有不少开发者已经垂涎它各种具有革命性的新功能,诸如:语义化的标签和元素、新增表单控件、化繁为简的富媒体支持、神奇的本地数据存储技术、强大的绘图技术(canvas)以及离线、地理定位等。本文讨论的只是如何利用html5的各种明确的语义化标签来构建我们的页面。

 

关于DOCTYPE

 在HTML5来临之前,一个标准的XHTML头部代码应该是这样的:

    
......

这么复杂的一大推代码相信很少人会去手写,也没有必要去记住。(小弟不才,在HTML5没来到之前都是直接打开 DW,现在是用sublime text2自动生成的,O(∩_∩)O~)

而一个标准的HTML5头部是这样的:

    
Document.......

哪个更简单些就不用我来说了,笨拙的我都能轻易记住了,这HTML5呀,果然是好东西啊。但是好使的东西总是需要付出点代价的(╯﹏╰),显然是浏览器的兼容性问题,主要是微软的 IE6、IE7、IE8 ,还有可能就是一些非主流浏览器和一些基于IE内核的浏览器。综合考虑多方面因素,我们还是选择HTML5,因为这个能省去100多字节(对于PV是百万级以上的站点,能省下不少的流量呢)的头部已经可以完美兼容了。大家都可能知道,在页面没有定义DOCTYPE的情况下或者因为一些字符使得DOCTYPE失效的情况下,会触发各种怪异现象诸如盒模型不正确,js捕获数据怪异等,而只要定义了浏览器就可以在标准模式下解析页面,而不需要指定某个类型的DTD了。

 

丰富明确的语义化标签

语义化编码是每个从事前端开发人员都需具备的技能,但随着web技术的发展和各种新技术、新思想的产生,原有的XHTML那具有语义化的标签已经有点力不从心了。而HTML5就为我们提供了一系列新的标签和属性,让我们在维护和修改页面时不需面对嵌套N层、令人烦心的div了,并且使用这些新元素能让任何人无障碍地访问网页,更利于搜索引擎,下面举个例子说明下:

我是文章标题

我是文章正文

我是文章导读

而运用HTML5可以这样写:

我是文章标题

按钮一
按钮二

我是文章正文

我是文章导读

另外语义化标签如:aside、figure、figcaption、hgroup、nav的运用,适用场合呢,我在这里就不一一列举了,有兴趣的童鞋可以 ,上面对于html各个标签的讲解还是蛮到位的。

 

HTML5标签的向前兼容

有很多人在运用 HTML5标签搭建新页面的时候发现一个问题, 就是这些用起来感觉很好很爽的标签在IE8以及以下版本的浏览器都不生效,加了样式也是徒劳无益的,全部整齐地属于inline行内元素,于是乎,有人就觉得,在IE8还没被淘汰之前,HTML5在web应用上只是一个空想(include me)。不过,事实告诉我们,成功有时候需要借助外力,呵呵,又开始文绉绉了~

想让HTML5向前兼容我们需要一段小小的JS函数来协助:

上面代码的作用就是创建一系列标签,使IE8及以下的浏览器都能识别。

然后就是给这些标签一个css来初始化,由于IE8及以下浏览器对这些新标签没有提供默认样式,所以他们都被解析为行内元素,因此我们需要在css初始化文件里添加以下代码来使其变成块级元素

article,aside,footer,header,nav,section,hgroup{
display:block;}details,dialog,output,time{
display:inline;}

这样的话我们在实际开发中就能运用HTML5了,不过在实际项目中我们一般会将js部分的那段初始化代码封装到一个js文件如resetHTML5_forIE.js,然后在header部分使用IE条件注释针对IE进行调用:

 

 

结语

 由于小弟才刚接触HTML5,很多东西都是一笔带过的,好像记流水账似的^_^,讲不清、说不准的还望各位前辈指正。哎呀,又到点吃饭了......(⊙o⊙),ps:貌似下午又没上课,逃课成指数递增了。

转载于:https://www.cnblogs.com/cyStyle/archive/2013/05/28/html5-tag.html

你可能感兴趣的文章
微信小程序的坑坑
查看>>
图片轮播(Jquery)
查看>>
hdu 1704 Rank(floyd传递闭包)
查看>>
Educational Codeforces Round 27 G. Shortest Path Problem?(Guass异或线性基)
查看>>
【BZOJ3622】已经没有什么好害怕的了(动态规划+广义容斥)
查看>>
HDOJ 1023 Train Problem II
查看>>
途牛订单的服务化演进
查看>>
软件工程之四则运算
查看>>
ABAP 根据权限显示或隐藏状态栏的按钮
查看>>
跑步计划
查看>>
mvc中使用uploadify批量上传的应用
查看>>
Kibana查询说明
查看>>
[AHOI 2009]chess 中国象棋
查看>>
UVA 11990 ”Dynamic“ Inversion(线段树+树状数组)
查看>>
Hibernate学习四----------Blob
查看>>
CTF-练习平台-Misc之 中国菜刀,不再web里?
查看>>
Mac系统配置JDK环境变量
查看>>
多项式累加
查看>>
剑指offer(18)二叉搜索树的后续遍历
查看>>
微信小程序一笔记账开发进度四
查看>>