一、什么是语义化的HTML?

语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

二、为什么要做到语义化?

1.有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。

2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性。

3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。

4.支持多终端设备的浏览器渲染。

三、语义化HTML改怎么做呢?

在做前端开发的时候要记住:HTML 告诉我们一块内容是什么(或其意义),而不是它长的什么样子,它的样子应该由CSS来决定。

写语义化的 HTML 结构其实很简单,首先掌握 HTML 中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。

<h1>~<h6> ,作为标题使用,并且依据重要性递减,<h1> 是最高的等级。

<p>段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。

<ul>、<ol>、<li>,<ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表也挺常用。在 web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。

<dl>、<dt>、<dd>,<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

<em>、<strong>,<em> 是用作强调,<strong> 是用作重点强调。

<table>、<td>、<th>、<caption>, (X)HTML中的表格不再是用来布局。

最新文章

  1. Solr高级查询Facet
  2. 安装rabbitMQ delayed-messaged
  3. MVC5+EF6 入门完整教程八
  4. C#基础02
  5. HTML1
  6. jsoup解析HTML
  7. 栈的链式存储 - API实现
  8. Swift中元组(Tuples),结构体(Struct),枚举(Enums)之间的区别
  9. HDU 2227 Find the nondecreasing subsequences (线段树)
  10. acdream 1431 Sum vs Product
  11. 【Win32API】SendInput ERROR_BUSY 错误原因
  12. python 、mmap 实现内存数据共享
  13. adb命令介绍与使用
  14. C语言指针作业
  15. javaIO流实现文件拷贝
  16. 对JS 的classList 简单记录
  17. My Team——面向对象与软件工程实验三
  18. Laravel 系列入门教程(二)【最适合中国人的 Laravel 教程】
  19. Java基础(四)线程快速了解
  20. vue 学习一些好的文档网址推荐

热门文章

  1. Day4_装饰器
  2. es6(二):解构赋值
  3. java集合的contains(obj)方法的实现
  4. 在Java中谈尾递归--尾递归和垃圾回收的比较(转载)
  5. leetCode刷题(找到两个数组拼接后的中间数)
  6. cxf webservice生成客户端代码及调用服务端遇到的问题
  7. Windows10 Ubuntu bash 配置 LAMP+JDK+Tomcat
  8. invalid bound statement (not found)
  9. TensorFlow-谷歌深度学习库 图片处理模块
  10. Struts标签库详解【2】