前端开发

 首页 > 前端开发 > css教程 > 语义化HTML - html/css语言栏目:html.css - 自学php

语义化HTML - html/css语言栏目:html.css - 自学php

分享到:
【字体:
导读:
          一 怎样语义化html结构语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。正确语义化----结构(html)才是重点,样式(css)是用来修饰结构的。所以要先确定html,确定标签,再来...

一.怎样语义化html结构
 
语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。
 
正确语义化----结构(html)才是重点,样式(css)是用来修饰结构的。所以要先确定html,确定标签,再来选用合适的css。
 
一般来说,所有的标签都会有一个默认的样式,所以一个简单的判断网页标签语义是否良好的方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。
 
正确语义化最实用的几条:
 
1.头部的页面声明,如定义meta, 页面title
 
2.提高关键词密度,如图片替换alt,链接说明title
 
3.正确使用内容容器,如段落p,列表ul, ol, li, dl, dt, dd
 
4.慎用内容突出,如标题h,强调em,重点strong 
 
注意:h标签的语意是标题,搜索引擎对这个标签比较敏感,特别是h1,和h2。一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网 页,h标签可以组织起一个网页的大纲。
 
5.尽可能少的使用无语义的标签div和span;
 
6.在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
 
7.不要使用纯样式标签,如:b、font、u等,改用css设置。
 
8.需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
 
9.使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
 
10.表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
 
11.每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
 
 
 
二.语义化的HTML结构的优点
 
1.去掉或样式丢失的时候能让页面呈现清晰的结构:HTML本身是没有表现的,我们看到例如

是粗体,字体大小2em,加粗;是加粗的, 不要误会这是HTML的表现,这些其实是HTML默认的CSS样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

 
2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
 
如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。
 
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(因为这些设备对CSS的支持较弱)。
 
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。
 
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
 
搜索引擎的爬虫也是网站的“访客”,现在它们是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。
 
5.便于团队开发和维护
 
在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。
分享到:
CSS3魔法堂:禁止用户改变textarea大小 -...
一、前言                               在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体布局。       二、原因                          ...
从事前端开发必须要了解的CSS原理 - html...
从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢?   一、浏览器的发展与CSS   网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页, HTTP 容许网页浏览器送交资料到网页服务器并...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……