zoukankan      html  css  js  c++  java
  • 浅谈web语义化

    关于web语义化的理解

    每次在投简历的时候都可以看到这句话:‘对web语义化有深刻的理解’。

    个人认为,web语义化是指根据内容的结构(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码,同时让浏览器的爬虫和机器更好的解析。

    在进行页面布局时,尽量使用语义化的标签,使页面结构清晰,易于网站seo和团队协作。

    示例:

    代码1:

    <h1>aaaa</h1>

    <p>bbbb</>

    这段代码能很直观的告诉团队其他同事和搜索引擎:这段代码由标题和段落组成。并且在进行seo时,能够被搜索引擎识别。

    代码2:

    <div>aaaa</div>

    <div>bbbb</div>

    通过样式控制div的表现,我们也可以使‘代码2’和‘代码1’的表现一样,但是不能让人一眼就看出来这段代码由标题和段落组成,搜索引擎也不能识别谁是标题,谁是段落(因为seo是通过网页的DOM结构来搜索的)。

    html5中header、nav、article、section、sidebar、footer等新标签在布局时就可以使用,使页面结构清楚。

    h1~h6这几个标签在搜索引擎中权值非常高,用它们写页面标题就是一个简单的SEO优化。

    <b>标签和<strong>标签都能使字体加粗,但是他们有着本质上的区别:

      <b>标签的定义和用法是规定粗体文本;

      <strong>是短语元素,把文本定义为语气更强的强调的内容。

    由此可见,如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可以认出哪些是页面重要内容,予以较高的权值。

    语义化的作用:

    1.在没有css的情况下,页面也能呈现出很好的内容结构;

    2.用户体验:例如alt是图片的替代文本,也可解释图片信息。

    3.有利于SEO:和搜索引擎建立良好沟通,有利于爬虫抓去更多的有效信息(爬虫依赖于标签来确定上下文和各个关键字的权重)。

    4.方便其他设备解析,以有意义的方式来渲染网页

    5.便于团队开发和维护,语义化更具有可读性。

    怎样写具有语义化的代码?

    1.尽可能少的使用无意义的标签div和span

    2.在语义不明显时,既可以使用div,也可以使用p,此时尽量用p

    3.不要使用纯样式的标签(如b),改用css样式设置

    4.需要强调的文本,可根据其强调的程度来使用strong或em标签。

    5.使用表格时,标题要用caption,表头用thead,主体部分用tbody。表头和一般单元格要区分开,表头用th,单元格用td

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

  • 相关阅读:
    Linux性能评测工具之一:gprof篇
    几个源码下载的网站
    linux svn代码回滚命令
    这就是阶层——你根本不知道世界有多残酷
    shell脚本中的数据传递方式
    XGBoost参数调优完全指南(附Python代码)
    机器学习(一) ---- 最优化理论基础
    Docker构建Java web应用服务
    使用Dockerfile创建支持SSH服务的镜像
    使用commit方式构建具有sshd服务的centos镜像
  • 原文地址:https://www.cnblogs.com/fanyx/p/6877380.html
Copyright © 2011-2022 走看看