如何理解语义化

 

1、语义化的背景

       以前的HTML的结构，基本上就是DIV+CSS。然而，DIV它并没有什么任何的意义，全靠CSS显示页面的样式。那么近几年呢，开发者提出了HTML结构的语义化，所以W3C就制定出了语义化标签。

 2、什么是语义化

       语义化就是构成HTML结构的标签要有意义，比如有这样的标签：head表示页面头部，main表示页面主题，footer表示页面底部。那么这些标签构成的HTML结构就是有意义的，也是语义化的。如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。

3、怎么确定页面结构是否语义化了

       去掉CSS，看HTML代码的结构，是否清晰，再看页面内容呈现，是否可以正常显示。

4、为什么要语义化

       a、对于编写代码的人来说，有语义化标签的HTM的结构，更加清晰，方便编写代码；对于团队来说，方便团队的开发与维护。

       b、对于爬虫，有利于SEO。

       c、对于浏览器更加方便解析。

       d、最重要的是对于用户，一是假如因为网速的原因导致没有加载CSS，页面也能呈现出良好的结构。二是某些标签属性如alt，title能带来良好的用户体验，还有用好label标签更利于用户交互；三是在特殊终端如视障阅读器中语义化的 HTML 可以呈现良好的结构。

5、怎么做才能写出语义化的HTML呢？

      a、 少使用或者不适用div和span标签；用p标签代替div标签。

      b、不适用样式标签，如：b标签、font标签。

      c、强调文本放在strong或者em标签中，不要用b和i标签。

      d、使用表格 table 时，标题要用 caption，表头要用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。

      e、表头用 th，单元格用 td。表单域用 filedset 包裹，用 lengend 标签说明表单的用途。

      f、input 标签通过 id 属性或 for 属性与 label 标签关联。

       html 语义化，css 类名也要语义化等等~

6、Html5 有哪些新特性、移除了哪些元素？

• 新增元素：

  • 绘画canvas

  • 用于媒介回放的video 和 audio 元素

  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

  • sessionStorage 的数据在浏览器关闭后自动删除

  • 语义化更好的内容元素，比如 article 、footer、header、nav、section

  • 表单控件 ，calendar 、 date 、 time 、 email 、 url 、 search

  • 新的技术 webworker 、 websocket 、 Geolocation

• 移除的元素：

  • 纯表现的元素：basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u

  • 对可用性产生负面影响的元素：frame 、 frameset 、 noframes

• 支持 HTML5 新标签：

  • IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签

  • 可以利用这一特性让这些浏览器支持 HTML5 新标签

  • 浏览器支持新标签后，还需要添加标签默认的样式

 

ps：学习成长过程的简单记录，如有不恰当之处，欢迎交流！