您现在的位置是:首页 > 技术栈 > HTML/CSSHTML/CSS

html5语义学习

2020-02-05【HTML/CSS】人已围观

简介HTML不是一种编程语言,而是一种标记语言(Hyper Text Markup Language)。HTML5标记标签是由尖括号括起来的关键词,比如。

HTML5的标签通常是成对出现的,如其中第一个标签是开始标签,第二个标签是结束标签

介绍 HTML 语义前,先回顾下 HTML 知识吧!
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>

</body>
</html>

DOCTYPE 是文档类型(document type)的简写,告知浏览器使用什么文档标准(这里是使用 HTML 文档标准)解析该文档。 浏览器会根据 DOCTYPE 定义的 DTD(文档类型定义)解释页面代码并显示。所以要建立符合标准的网页,DOCTYPE 的声明是必不可少的关键组成部分。若 DOCTYPE 不存在或格式不正确,文档将以兼容模式呈现,即页面以宽松向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。而使用标准模式,其排版和 JS 运作模式以该浏览器支持的最高标准运行。
 
 

注释


以<!--为前缀,以-->为后缀

提问:CSS、JS 的注释又是怎样的?我们常见的注释有/ /、/* */这两种,CSS 只支持第一种,JS 两者均支持。
 
 

全局属性

怎么理解全局?

一是对所有元素都适用,包括无效的元素。比如下面的 my 元素是一个无效元素,但 hidden 属性仍对其适用生效。

 
<my hidden>我</my>


二是全局属性可能对一些元素不起作用。比如下面的 class 属性不能对 head 元素起任何作用。

 
<head class="red"></head>


常见全局属性有哪些呢?

  • xml:lang

    从 XHTML 规范继承,为了兼容而被保留。

  • id

    定义唯一标识符。

  • class

    一个以空格分隔的元素的类名列表。

  • style

    应用于元素的 CSS 样式声明。

  • dir

    一个指示元素中文本方向的枚举属性。取值有 ltr、rtl、auto。ltr 表示文字从左到右书写,rtl 表示文字从右到左书写,auto 表示由用户代理决定文字方向。

  • title

    表示与其所属元素相关信息的文本。

  • lang

    定义元素的语言。它的优先级比 xml:lang 小。

  • accessKey

    提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。浏览器应该使用在计算机键盘布局上存在的第一个。

  • tabindex

    整数属性,表示元素是否可以可聚焦,是否应该参与顺序键盘导航,如果是,则表示哪个位置。它可能需要几个值:

    负值表示该元素是可聚焦的,但不应通过顺序键盘导航到达;

    0 表示元素可以通过顺序键盘导航进行聚焦和访问,但其相对顺序由平台约定定义;

    正值表示元素可以通过顺序键盘导航进行聚焦和访问。元素聚焦的顺序是 tabindex 的增加值,如果多个元素共享相同的 tabindex,则它们的相对顺序遵循它们在文档中的相对位置。

HTML5 出现后,我们常用到的全局属性有如下,

  • contenteditable

    表示元素是否可被用户编辑。

  • data-*

    自定义数据属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,在 JS 脚本中可以通过 HTMLElement.dataset 访问。

  • hidden

    表示是否隐藏元素,等同于 display:none。

  • draggable

    表示是否可以使用拖拽 API 去拖动元素。
     


主流元素分类

  • 根元素

    html

  • 元数据元素

    head、base、meta、title、link、style

  • 分区元素

    body、header、footer、aside、main、nav、section、article、h1~h6、hgroup、address

  • 块文本元素

    div、p、ol、ul、li、dd、dl、dt、hr、blockquote、figcaption、figure

  • 内联文本元素

    a、span、br、abbr、cite、code、small、time、bdi、bdo、data、dfn、kbd、mark、q、rb、rp、rt、rtc、ruby、samp、u、var、wbr

  • 媒体元素

    audio、img、video、map、track、area

  • 内嵌元素

    embed、iframe、object、param、picture、source

  • 脚本元素

    canvas、script、noscript

  • 编辑标识元素

    del、ins

  • 表格元素

    table、caption、thead、tbody、tfoot、tr、th、td、colgroup、col

  • 表单元素

    form、label、input、button、select、datalist、optgroup、option、textarea、fieldset、legend、meter、output、progress

  • 交互元素

    details、dialog、menu、summary

  • Web 组件

    template、slot

 

语义划

HTML是面向文档的,非面向文档中的数据,所以文档中的数据是无法被搜索引擎直接访问。而网页标注,恰好能让搜索引擎抓取到数据,利于SEO,让用户更容易准确搜索到想要的信息。以上便是语义化的由来和作用。

语义化技术较知名的有RDFa(资源描述框架属性)、微格式(Microformats)和微数据(Microdata)。

简单认识下三个技术。

阮一峰老师博文上提到,根据RDF的定义,资源本身是主语,属性名称是谓语,属性值是宾语。对网络资源的描述就采用主-谓-宾的形式。比如,

 
<rdf:Description dc:title="这是我的标题" />

rdf:Description是主语,表示资源,属性dc:title是谓语,属性值表示宾语


微格式是通过类名进行语义化的,若某个元素带有以h-为前缀的类名,说明创建了一个微格式对象,其子元素有以p-、u-、dt-或e-为前缀的类名,则该对象有哪些属性。这里摘抄MDN的一个示例,
 
<div class="h-card">
  <a class="p-name u-url"
  href="http://blog.lizardwrangler.com/" 
  >Mitchell Baker</a> 
  (<a class="p-org h-card" 
    href="http://mozilla.org/"
  >Mozilla Foundation</a>)
</div>

语义解析出来的JSON内容如下,
{
  "items": [{ 
  "type": ["h-card"],
  "properties": {
    "name": ["Mitchell Baker"],
    "url": ["http://blog.lizardwrangler.com/"],
    "org": [{
    "value": "Mozilla Foundation",
    "type": ["h-card"],
    "properties": {
      "name": ["Mozilla Foundation"],
      "url": ["http://mozilla.org/"]
    }
    }]
  }
  }]
}

可以发现,使用微格式,所有浏览器都是支持的,但是容易与我们定义的CSS类名起冲突。


微数据使用支持的词汇表描述项目和键值对,以便为其属性赋值。与使用RDFa和微格式相比,微数据试图提供一种机器可读标签去注释HTML元素的简单方法。微数据借助了HTML5.2新定义的几个全局属性,分别如下,
 
  • itemid

    项的唯一全局标识符

  • itemscope

    指定块中包含的关于特定项目的HTML

  • itemtype

    指定将用于在数据结构中定义itemprop的词汇表的URL

  • itemprop

    项的属性

示例如下,

<div itemscope itemtype="http://schema.org/SoftwareApplication">

  <span itemprop="name">Angry Birds</span> -REQUIRES <span itemprop="operatingSystem">ANDROID</span>
  <br>

  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

语义解析结果:
Angry Birds - REQUIRES ANDROID
RATING: 4.6 ( 8864 ratings )
Price: $1.00

最后,介绍了这几个语义化技术,意在说明HTML5在语义方面上是下了功夫的,即提供了许多语义化标签,这些标签是对搜索引擎检索出来的结果进行统计而定制出来的的常用词。 语义话标签作用不止于语义化,在用户可访问性、代码可读性和可维护性方面也提供了一定的帮助。
 

参考

Tags:HTML   前端开发

很赞哦! ()

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

站点信息

  • 建站时间:2018-06-26
  • 网站程序:帝国CMS7.5
  • 文章统计34篇文章
  • 标签管理标签云
  • 统计数据友盟数据
  • 网站地图XML网站地图
  • 微信公众号:扫描二维码,关注我们