北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端培训 现代web页面的语义化

时间: 来源:火星人

随着前端技术在国内的蓬勃发展,html5的推出,语义化这个词也更多的出现在我们的身边,那么什么是语义化,我们为什么要使用语义化呢?今天我就来为大家介绍web语义化的作用


首先来说一下什么是语义化


什么是语义化?简单来说就是通过使用语义化标签,来让我们自己,与我们一起开发的同事,网站后期的维护人员,以及搜索引擎能够理解我们究竟写出了什么,通过语义化标签的包裹,我们可以区分页面的各个区块,以及每个区块的作用。


那我们为什么要使用语义化呢?对于我们开发人员来说,语义化可以使我们的开发和后期维护更加轻松愉快。要知道你自己写的代码要是不加以修辞过上十天半个月你就你就会忘了它是做什么的了,更别提别人的代码。试想一下,你是愿意把时间浪费在不知所以然的代码上还是愿意快速完成工作然后去找前台妹子聊天呢?当然你的公司可能没有妹子……不不我是想说工作时间去聊天是不对的。最重要的是搜索引擎很大程度上是依靠语义化标签来爬取网页信息的,所以说网站的语义化直接的影响了网站的流量和权重!


既然大家对语义化有所了解了,就让我来简单介绍一下如何语义化吧


h1~h6这几个标签在搜索引擎中权值非常高,用它们作页面多级标题就是一个简单的SEO优化了,知道了这个你还使用DIV+CSS来写标题吗?


header、footer、sidebar、article等是html5的新标签,他们从本质上和div没什么区别,他们的诞生就是为了语义化!


尽量用有结构含义的,少用无语义的,如 <span>,<div> 无意义,看不出是什么东西,可是<address>一看就知道这里面的是地址,<em>标签一看就知道这个是强调的内容,区分于普通内容。


不要使用纯样式标签,如:b、font、u等,改用css设置


表单域要用fieldset标签包起来,并用legend标签说明表单的用途


每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。


header和foot就不用我说了吧,页头和页尾


nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。


time 标签定义公历的时间(24 小时制)或日期,我们还要给其加上行内标签date-time来更精确的表示时间


section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。


mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。


figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。


figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。



关键词:北京web前端培训,北京web前端,web前端,北京h5培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号