语义化标签:你认为用什么标签最能描述这块内容,觉得这样表述更有意义,那么就可以使用这个标签。
现在的浏览器对CSS支持都挺完善的(不包括CSS3),讲究的是结构与表现相分离,结构与行为相分离,一个WEB页面,结构是最主要的,结构相当于一栋房子的墙,标签是一块块砖,砖摆得有序,摆得整治齐,墙才牢固,所以说标签语义化很重要,HTML每个标签都有自己的语义:
DIV:一个层,层里面可以嵌很多东西,例如:文本,图片,现在大部分页面的布局框架是用DIV布的,但是尽量少用,一个是为了语义化,一个是为了以后维护方便,别一打开页面源代码,全是DIV。
段落:P,段落内的文字会自动换行,不需要用<br />去换行了,段落与段落之间间距也很容易设。
标题:h1,h2,h3,h4,h5,h6 优化级是越来越低,对搜索引擎有加权重作用,有许多企业网站的LOGO外面就用h1标签的。
列表:ul,ol,li ul是无序(文字)列表,很多网站导航是用列表。
定义列表:dl,dt,dd,类似于字典中的那种效果。
删除:del,删除,也有属性来表明删除的原因cite和删除时间datetime。
数据:table,tr,td(虽然现在不常用,但是他们还是为数据而生的)。
abbr和acronym:abbr是简写形式,acronym是各个单词的缩写形式。
title和alt:
- alt是有字数限制,titile没有
- title是给元素添加额外的说明信息,不是必须的
- alt是替换文本,如果图片不存在或未下载下来,或那些不支持图片的设备来说,该文本会替换图片显示在页面中
以前布局都是table布局,多层嵌套,维护麻烦,添加和删除非常不方便,结构混乱,对搜索引擎非常不利,所以现在提倡语义化的结构:
- 去掉样式和样式不存在的时候能够展示出一个清晰的结构
- 屏幕阅读器会根据页面的标签来读页面内容,如果页面没有一个好的结构的话设备就会一个字一个字的读
- PAD,手机(对CSS支持比较弱)等设备会以某种有意义的方式来演染页面,观看设备的作用就是以符合自身的条件来渲染页面
- 搜索引擎的爬虫会根据标签来分析上下文和捕获关键字,将页面收录到搜索引擎中
- 团队的开发效率,大家都按照标准,会减少很多的冲突和差异性,后期的维护也很方便