HTML 标签语义

栏目: Html · 发布时间: 5年前

内容简介:HTML全称是HyperText Markup Language,翻译过来就是由于

什么是HTML

HTML全称是HyperText Markup Language,翻译过来就是 超文本标记语言 。它定义了网页的内容和结构。

为什么要使用语义化标签

  • 可读性、可维护性

html 有很多标签,每个标签都有它的语义,比如 h1h6 表示不同重要程度的标题。虽然平时很多同学用无语义的标签 divspan 等也能实现相同的效果,但是可读性就差了很多。也许有同学觉得可读性没有变差啊,那是因为我们当中很多人平时就没有使用语义标签的习惯,全都是 div

由于 html 是标记语言,是声明式写法,不具有可编程性,逻辑表达能力不强。 html 标签就像其他可编程语言例如: JavaCJavascript 等的变量,如果一位 程序员 随意给变量命名,代码的可读性会非常差,后期维护成本也会非常高。

  • SEO

由于绝大多数网站的域名难以记住,很多人上网都是通过门户网站上网。但是,搜索引擎出来以后,使用搜索引擎上网越来越成为一种趋势。搜索引擎可以根据你输入的关键字,直接搜出相关网站和内容,免去人工一个一个去查找。

可是搜索引擎是如何知道网站是我们要找的内容呢,搜索引擎派出 爬虫 会时时刻刻的去访问网络上的各种网站,当它获取到一个个网站的 html 文档,会根据文档头部内容里面的 meta 数据判断出网站类型以及内容,并保存到数据库。(恶意诱导爬虫另当别论)

seo 重要吗?当然非常的重要。 seo 能给网站带来流量,流量就像网站的血液一般,没有访问量,网站就等于不存在。 seo 现在已经成为了互联网的一个垂直行业。做得好的,年入百万不是梦。但是, seo 运营并仅仅包含这些。

  • 可访问性

一个好的网站应该尽可能让更多的人无障碍浏览。例如盲人借助屏幕阅读器,也可以上网购物。如果网站的购物车按钮是用 div 写的,那么屏幕阅读器识别起来会非常的困难。我们为什么要让盲人也可以上网呢,这是一个非常有意思的问题。因为我们每天要花许多的时间用手机或其他设备浏览网页,万一以后眼瞎了,我们以后还可以冲浪啊。(不仅如此,这个世界上还有盲人游戏、盲人程序员)

常见HTML标签语义

关于 html 标签语义的讨论和文章,已经数不胜数,也有很多网站开发人员想竭尽全力去遵守,可是一旦到了开发的时候,就想不起该用什么标签了。于是,就开始挠头皮,时间久了,久秃了。

下面列举一些标签的用法:

article : 翻译过来就是文章的意思,其内容应当是一篇独立完整的文章。可以是杂志、报纸、技术或学术文章、论文或报告、博客或其他社交媒体文章。 article 可以嵌套,但是其内容必须是相关的。每个 article 都应该有一个标题( h1h6 )。

section : 段落。比如一篇文章( article )的片段。每个段落应该有一个标题( h1h6 ),当 section 作为 arcticle 的子元素时,标题字号不要大于文章的标题(否则看起来很怪异)。也不建议对 section 使用样式或者作为脚本切入点(大致意思,就是不要用js操作它),应该使用 div 来替代它干这些事。它和 p 标签有区别。我们平时写文章换行、起头空两个字,这个表示一个段落,可以用 p 表示。而 section 可以是一个或多个 p 段落。这几个段落表达的意思相近或者构成一个完整的意思。类似于中小学语文课,老师让学生分段一样。

nav : 导航块。比如包含跳转到其他页面或者本页面的链接。 nav 的内容可以是列表也可以不是。例如:

<nav>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</nav>

<nav>
    <h1></h1>
    <p>
        <a href="#">...</a>
    </p>
</nav>

不过,在网站的底部一般都有很多链接,例如地址、联系方式等。这个时候一般没必要用 nav

aside : 与当前位置段落相关的独立内容。例如相关文字、段落、广告、导航

h1h6 : 重要程度不一的标题。

headerfooter : bodyarticleasidenavsection 都可以有一个头部或者脚部。 header 通常用来包裹顶部的搜索框、目录、logo等,也可以包裹标题 h1h6 ,但不是必须的。

figurefigure-caption : 两个结合使用,可用于注释插图、图表、照片、代码列表等。例如:

<figure id="l4">
  <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
  <pre><code>interface PrimaryCore {
  boolean verifyDataLine();
  void sendData(in sequence<byte> data);
  void initSelfDestruct();
}</code></pre>
</figure>

div : 没有任何语义。可以用来包裹一系列相关的子节点,以及将相关内容定位布局。

oluldl : 前面两个使用更为平常,分别是有序列表和无序列表。 dl 有点像 二维 的无序列表。例如:

<dl>
  <dt>得分A</dt>
  <dd>赵xx</dd>
  <dd>钱xx</dd>
  <dd>孙xx</dd>
  <dd>李xx</dd>
  <dt>得分B</dt>
  <dd>周xx</dd>
  <dd>吴xx</dd>
  <dd>郑xx</dd>
  <dd>王xx</dd>
</dl>

blockquoteq : 都是引用的意思。一篇文章里面引用了另一篇的内容。如果需要展示引用的地址或者相关信息,可以配合使用 cite 标签。不同的地方是, blockquote 将包含 cite 标签在底部; q 引用内容更短小一些,像短语或者词语,且 cite 会作为其兄弟节点出现在它前面。虽然 q 的表现与双引号一样。但是,却有不同的使用场景。例如:说过的话,可以用引号包裹强调,可能不适合 q

sdel : 两者默认外观差不多,都有中贯线。但是, s 表示没那么重要了,而 del 意味着已经废除。

strongem : 两者都有加强的意思。 strong 着重强调相关内容,而 em 强调的是语气,像英语口语中的重音。

未完......


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Complete Web Monitoring

Complete Web Monitoring

Alistair Croll、Sean Power / O'Reilly Media / June 29, 2009 / GBP 39.99

Do you know the true value of your website to your organization? i??Complete Web Monitoringi?? shows you how to integrate several different views of your online business - including analytics, back-en......一起来看看 《Complete Web Monitoring》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具