0. HTML5中最看重的理念“语义化”相比HTML有什么区别?
在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容,这里搜集整理了一些语义化标签方面的问题和解答,以供大家参考。
语义化这个概念应该说是伴着HTML5应运而生,那么什么是HTML5中所谓的语义化?
简单来说就是:描述内容的含义(meaning)
比如说
标签就是段落的意思,在HTML5中所有的标签都有它书面上的语义。而没有语义的标签在HTML中有,在HTML5中就没有了,比如标签。而HTML5又为了补充HTML现在的不足而加上了一些新的标签,如、、等等。而这些标签的分类叫法也从"块级元素"与"行内元素"变成了“外围内容”与“短语内容”。
在HTML5中最基本的理念就是"语义"与"显示"分离,HTML5代码中出现的标签都是让开发人员或浏览器一看就知道是干什么用的东西,至于显示效果那是CSS3(Cascading Style Sheet)需要干的事情,所以在HTML5中这个两个好基友终于距离产生了美。
那么语义化以后对HTML文档有什么好处么?
可以提升可访问性与互操作性(兼容性会更好);
改进搜索引擎的优化;
一般来说可以让HTML文件更小;
让代码更好唯护,与CSS3的关系更和谐。
1. HTML5中的、、、 、这些标签的理解与用处?
第一,对这个几个标签的理解:
HTML5的设计者们可以说是用心良苦呀,他们认真分析HTML4.0中出来的问题,也就是当下最流行的写页面的方式就是"DIV+CSS",我们也不难发现只要用到这个就可以把页面写即简单又漂亮。没有繁琐的标签在里面,需要什么功能就去加
而
回到正题,经过上面的介绍大家也许已经知道为什么在HTML5引用上面的标签了吧,就是为了解决开发规范不统一的问题同时也为了增强语义,有人也许会问为什么HTML5为什么那么在意语义?用了上面的标签可以说带来什么好处呢?这个答案用一个非常简单的话来说的那就是:为了统一规范与新功能的出现。
他们这些标签功能就是代替
第二,这几个标签的语义与用法:
:标记导航(对应网页中重要的链接群就需要用这个标签)包含在中间的通常是
- 无序列表。当然如果是面包屑链接就需用到
- 有序列表,只要记住这个语义自己灵活发挥就是可以了。
特别提示:
HTML5规范不推荐对有辅助性的页脚链接用;
HTML5中不允许将嵌套在
标签中。:文章标记标签(表示的是一个文档、页面、应用或是网站中的一个独立的容器,原则上来讲就是聚合)。
特别提示:
这个标签可以嵌套使用,但是他们必须是部分与整体的关系;
同样不能用在
标签中;他与标签容易混淆所以需要注意;
:区块定义标签(表示的是文档或是应用的一个一般的块),他一般是有一组相似的主题的内容,一般会包含一个标题。可以用这个标签来写:文章的章节,标签式对话框中的各种标签页等等类似的功能。这里你会发现他与这个标签很像对不对?那么怎么的开发中正确的应用他们呢?
其实也很简单,你就这样想:如果你的页面中需要一个单独的模块来实现一个单独的功能,也就是高聚合的情况,就用,其他的时候都用。
:定义侧栏标签(表示一部分内容与页面的主体并不是有很大的关系,但是可以独立存在),用他可以实现:升式引用、侧栏、相关文章的链接框、广告、友情链接等等。
特别提示:
如果使用多个,标签应该在主要内容的后面,这样有利于SEO的搜索与提升可访问性;
如果是与文章的主要内容有关系的图像需要用
:页脚标签(与标签对应的标签),用他可以实现的功能有:附录、索引、版权页、许可协议等。
特别提示:
页脚并不一定是要位于所在元素的末尾,不过通常是这样的;
他不可以放在标签中,也不可以相互嵌套,或是在
元素中。2. HTML5通用的容器
如果你觉得用HTML5中的新的标签比用
如果效果需要的话可以在HTML5新标签的外面加一个
3. 元素title属性对语义的重要性是什么?
title属性这个刚一看会不会想到
标签?但是不要弄到错了,他们是完全不同的东西。平时在我们开发的时候很少会用到这个属性,首先说一下它是干什么的吧,其实他就是一个具有提示作用的属性,对于屏幕阅读器来说可以为用户朗读文本,所以正确的使用可以提升页面的访问性。4. HTML5中的新标签对于写文本启到一些重要影响的标签有哪些?
在写这个问题的答案之前先说说关于这些标签的理解与用法:
明确html5的核心思想就是语义,所以不管是什么标签就看表达的意思,而不是看展现的效果;
关于文本的相关标签可以适当的想象成是语文中的标点符号这样可以方便记意与运用;
明白上面的两点我们在来说这些新的标签的语义与用法吧:
、