一、解决的问题 & 评价标准

web语义化能解决如下问题：

1. 页面样式丢失

2. 有颜色或其他障碍的访客也能读懂页面

3. 移动设备访问页面

4. 程序（如爬虫）理解页面（换句话说SEO优化）

二、评价标准

web语义化主要是为了让页面结构更清晰，更关注内容之间的层次关系及意义。比如一个div内部标题用h1 ~ h6 ，内容是artical 或section来包裹。

web语义化在我眼中是将一个web页面去除css  js ，人依然能够明白页面含义，再进一步是机器能够识别页面逻辑及含义。比如去掉页面样式依然能够明白h1~h6是标题，div 或 artical 或section 是内容。

三、怎么实现

web语义化如何实现呢，步骤如下：

1. 根据内容选择合适html标签，如header、footer、aside、nav、article、section、ul、li（记得区分div、section、article哦）

2. class id 命名与内容、意义相结合(方便CSS JS开发人员)

四、目前存在的难点

1. 语义化没有一个很完善的规范，研究也不清晰，有了H5才真正开始有实在的意义

五、参考资料

1. 语义化web的关键技术及其应用研究

http://wenku.baidu.com/link?url=d0tFIifH0SMy6Wsl_A1LTEmIdLMlsLzFmWuWd1aACdhdgBsHn77Hu399_NP6PcNduDLFhBgiF4blcQftTbG4QKKuCd56CXlvJfj04aH1qD3

【HTML】web语义化的更多相关文章

  1. 浅谈web语义化

    在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...

  2. Web语义化

    在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...

  3. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  4. 为什么要web语义化

    为什么要web语义化 其实wiki的定义里面说得非常清晰了.语义化的好处有三点 有利于搜索 容易兼容不同设备 结构清晰,利于团队的开发.维护

  5. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  6. web语义化之SEO和ARIA

    在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...

  7. 前端基础：web语义化

    web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...

  8. AmazonOrder xml web语义化

    XML Processing Modules — Python 3.7.1 documentation https://docs.python.org/3.7/library/xml.html#xml ...

  9. web语义化，从松散到实战

    GitHub:http://liu12fei08fei.github.io/html/4semantic.html web语义化,从松散到实战 在这篇文章之前,我放弃了很多次,写关于语义化方面的文章: ...

随机推荐

  1. Mybatis学习（二） - CRUD操作(增删改查操作)

    直接上例子: 1.项目结构: 2.具体代码及配置 User.java package com.mybatis.bean; public class User { private int id; pri ...

  2. Spring学习（3）---Spring设值注入和构造注入

    (一)设值注入就是指要被注入的类中定义有一个setter()方法,并在参数中定义需要注入的对象.简单的看个例子. 建一个User类: package com.ioc; public class Use ...

  3. oracle 11g 完全卸载方法

    网上好多卸载教程都前篇一律,但很多卸完重装都有问题,卸了几次装了几次,就特地总结整理一下 另外说一句:在完全删除(或者叫卸载)oracle时,没有必要特别意oracle提示问题,只要把oracle痕迹 ...

  4. Bash环境配置文件

    一.环境配置文件读取优先级 其中~/.bash_profile,~/.bash_login,~/.profile三个文件只有一个有效,查找优先级从左至右降低.bash会一直检查是否有~/.bashrc ...

  5. js删除 object中的空值

    var data = { a: 'a', b: '' } 删除 b和''的配对, /** * Delete all null (or undefined) properties from an obj ...

  6. head first python helloword

    如何使用python 打出hello word 在python shell 键入print 'hello word'( python 2) or  print ("hello word&qu ...

  7. 推荐几款.NET客户端开源报表图

    如果你正在开发客户端报表图相关的应用,除了.NET自带的控件,你还可以考虑使用以下几个控件库. [OxyPlot] OxyPlot是一个支持.NET的跨平台绘图库.你可以在很多平台上使用它,如WPF, ...

  8. sizzle选择器的使用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 8.vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  10. android studio gradle 两种更新方法更新

    android studio gradle 两种更新方法更新 第一种.Android studio更新 第一步:在你所在项目文件夹下:你项目根目录gradlewrappergradle-wrapper ...