整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

到底什么HTML是语义标记?做前端开发为什么要学写它

到底什么HTML是语义标记?做前端开发为什么要学写它

您了解 HTML 和 Web 时,您可能会发现反复遇到一个通常未定义的特定单词。那个词是语义的。

你可能会读到诸如“我们去寻找语义元素”或“我们尽量做到语义化”之类的陈述,但永远无法清楚地了解语义这个词的含义。在本文中,我们将探索语义标记的世界,提出术语的有效定义,并将该概念应用于我们编写 HTML 标记的方式。

什么是语义标记?

根据 Dictionary.com 的说法,语义是指对单词或句子含义的正确解释。

从语义上使用一个词就是以一种与该词的含义正确对齐的方式使用它。当我们误用一个词时,我们并不是在语义上使用它。

许多 HTML 标签具有语义含义。也就是说,元素本身传达了一些关于包含在开始标签和结束标签之间的内容类型的信息。

例如,当浏览器遇到一个h1标题时,它会将该标记解释为表示该元素的内容h1构成了包含该元素的部分的最重要的标题。标签的语义含义h1是它用于标识特定网页或部分的最重要的标题。

启用语义标记的两种做法

如果我们要编写语义标记,必须采用两种不同的做法。

  1. 语义标记要求根据其预期目的使用 HTML 元素。
  2. 语义标记需要内容和表示的分离。

正确使用 HTML 元素

在编写语义标记时,我们使用 HTML 标签来告诉浏览器元素的内容。在语义标记中,标签不再只是让内容以人类可读的格式显示在网页上的一种方式。

标签本身成为一种告诉机器(无论是浏览器、计算机、智能手机还是其他智能设备)有关内容含义的方式。

要编写语义标记,我们必须正确使用 HTML 标签,以便我们的标记既是人类可读的,也是机器可读的。

分离内容和演示

过去,通常使用标记来定义样式和控制网页布局。

标题级别的选择不是基于层次结构,而是基于 Web 浏览器应用的样式,表格用于网页布局而不是组织表格数据,一些 HTML 标记(例如frameset)是为了明确定义网页而创建的布局等等。

当我们编写语义标记时,我们不能再根据视觉呈现来选择 HTML 元素。相反,我们根据语义含义选择 HTML 元素,然后使用CSS定义我们内容的视觉呈现。

在编写语义标记时,网页元素的表示与内容本身的标记完全分离和不同。

定义语义标记

考虑到这两种做法,我们可以这样定义语义标记:

语义标记是使用诸如 HTML 之类的标记语言通过正确选择标记元素来传达有关文档中每个元素的含义的信息,并保持标记和文档中包含的元素的视觉呈现之间的完全分离.

为什么语义标记很重要?

好的 CSS 可以使普通网站访问者看不到不好的标记。然而,再多的样式也不会让糟糕的标记对计算机化的访问者更有意义,例如搜索引擎网络爬虫、浏览器翻译工具或屏幕阅读器等辅助技术。

根据 Bruce Lawson的说法,HTML 元素的语义使用“增强了可访问性、可搜索性、国际化和互操作性”。换句话说,如果您希望所有访问者都可以访问您的网站、实现较高的搜索引擎排名、可供来自世界各地的访问者使用以及与其他 Web 服务有效交互,则必须编写语义标记。

编写语义标记是关于创建人类和计算机可读的 Web 内容。当人类和计算机都可以很好地阅读网络时,它就变得更易于访问,因为计算机能够更好地分析其内容、索引、交付它,并且开发人员能够更好地将不同的信息源结合到新的网络服务中.

我们如何编写语义标记?

我们通过正确选择和使用 HTML 标记以及通过选择传达有关标记所标记信息的某些标记来编写语义标记。

HTML 中有语义元素和非语义元素。非语义元素的示例是divspan。这些标签不会告诉计算机有关元素内容含义的任何信息。

虽然有用,并且在某些情况下可以很好地使用,但如果语义标签可用并且适合特定用途,请在使用非语义标签之前使用它。

许多语义标签来自谷歌和Opera等公司完成的网页标记分析。这些公司发现,许多网站使用idclass属性来暗示非语义元素内容的含义。

例如,他们发现了很多看起来像这样的 div:<div id="nav"><div id="header"><div id="footer">。此类发现有助于 W3C 识别和定位新的语义标签以包含在 HTML5 中,例如:nav和。我们可以将最常见和最重要的语义元素分为四类:header``footer``article``aside

  • 文档结构标签
  • 文本含义标签
  • 媒体类型标签
  • 相关标签

文件结构

过去,div元素是识别和分组网站部分的主要方式。然而,随着 HTML5 的发布,除了标签提供的分组属性之外,我们还有几个新标签可供使用,这些标签提供语义含义div

  • header用于网页标题的容器,通常包含网站徽标、标题元素和网站导航。
  • footer:用于网页页脚的容器,除了导航链接和返回网页顶部的链接外,通常还包含作者身份、联系方式和版权信息。
  • main:一个高级元素,用于包含单个网页独有的所有内容,并且不会在多个网页中重复。
  • nav:包含站点导航链接块的元素。该元素通常放置在页面headerfooter中,也可以在aside(侧边栏)元素中使用。
  • section:该section元素用于标记文档的各个部分,例如长篇文章的章节或主要部分。
  • aside:用于标识与页面上的主要内容相关但不属于文档主要流程的内容。例如,该什么是语义标记?

文本含义

在网络的早期,通常会看到这样的标记:

<style>
 .italics {     font-style: italic; }
</style> 
<p>Some paragraph content including one
   <span class="italics">italicized</span> word.
</p> 

今天我们(希望)不会梦想做这样的事情,因为span元素告诉浏览器和其他计算机访问者完全没有关于嵌套在开始和结束标记之间的文本的含义或目的。我们不会使用非语义标签,而是在应该以斜体显示的单词周围span添加标签。em通过使用em标签,使用屏幕阅读器或访问内容的其他计算机的访问者将了解应用标签以增加对已标记内容的强调。该em元素只是 HTML 标记如何为文本内容添加语义含义的一个示例。其他示例包括:

  • h1, h2, h3, h4, h5, 和h6: 标题元素标签用于标识应该作为标题出现的文本。最高级别或最重要的标题是按照重要性降序排列的标题h1级别。h2``h6
  • strong:带有标签的文本strong被赋予了额外的重要性,并且通常以粗体显示。
  • markmark标签用于突出在特定上下文中具有特定重要性的文本。例如,它可用于突出显示搜索结果页面中搜索词的每次出现。
  • cite:该cite元素用于标识部分内容源自的原始作品。
  • blockquoteand q: blockquoteand q(quote) 元素用于识别从另一个来源直接引用的文本。
  • time:该time元素可用于告诉浏览器、网络爬虫和其他智能设备,特定的内容位代表 24 小时制的时间或特定的日历日期。

我们的字体和 Web 排版教程提供了大量关于正确使用这些标签来为文本内容分配语义含义的详细信息。

媒体类型

HTML5 还包括三个标签,用于标识标签之间提供的媒体类型。这些标签有双重用途。首先,它们向浏览器发出信号,需要对特定技术资源(例如视频播放引擎)进行排队。其次,他们为内容赋予语义意义。

  • audio:用于向文档添加一个或多个音频内容源,并允许浏览器根据访问者的设备和浏览器选择最佳选项。
  • video:类似于audio元素,但用于将视频内容添加到标记文档。
  • picture:图片元素用于允许网络浏览器根据媒体查询的结果从可用选项中选择最佳图像。

您可以在我们的HTML5 媒体教程中了解有关嵌入audiovideo元素的更多信息。此外,我们关于在网络上使用图像的文章提供了有关何时使用该元素以及何时坚持使用该元素的更多信息。picture``img

相关标签

几个 HTML 元素用于表示多个元素之间的相关性。例如,使用有序列表 ( ol) 告诉浏览器列表中的项目彼此相关,需要以特定的顺序出现。用于表示多个元素之间相关性的其他元素包括:

  • ul: 无序列表用于表示列表中项目之间的关系,并表明它们不需要按特定顺序来理解。
  • figure:该figure元素用于将一段内容(例如图像、图表、图形或文本)和由figcaption标签标记的标题组合在一起。通过在标签之间嵌套标题和内容,figure可以识别嵌套元素之间的关系。我们的图片页面包含有关实施此有用标签的更多信息。
  • address:该属性用于将联系人信息与包含该address元素的父元素相关联。例如,当添加到 时article,该address元素提供文章作者的联系信息,当添加到网页时footeraddress标识网页所有者的联系信息。

结束的想法

如果您是 HTML 新手,请花时间学习如何在语义上使用所有这些不同的 HTML 标记。如果您不确定您使用的标签是否正确,请花几分钟时间进行一些研究。正如我们所见,使用正确的标签很重要。如果您已经使用 HTML 一段时间了,请花点时间了解新的 HTML5 元素以及如何正确使用它们。在过去的几年里,HTML 变得越来越复杂,继续使用div带有classid属性,但语义 HTML5 标记的可访问性和互操作性承诺足以接受这些新的语义元素。

那么你已经了解清楚语义标记了吗?

学习一门编程语言之前,了解它的特性,带着对特性的好奇和疑问去学习是最快最好的学习方法。就像你知道某个地方有很多宝藏,带着藏宝图去寻找宝藏,你一定会大有收获的。

编程语言就是人与计算机进行沟通的语言,在现实生活中,见什么人说什么话我们都很清楚,那在与计算机沟通的世界中,做什么事用什么编程语言沟通也是同样的道理,前提就是我们要了解这些编程语言,在你需要选择的时候做出正确的判断,这也正是我写此篇文章的意义。


什么是 HTML?


HTML的英文全称是 Hyper Text Marked Language,中文意思为超文本标记语言。

什么是超文本标记语言?我们先对超文本标记这五个字进行一一的拆分,然后去更好的理解它的意思。在理解超文本时,我们先来理解一下文本在我们的日常生活中代指的是什么东西?

文本包含了比如说你新建的一个Word文档,一个txt文件,甚至一个Html文件。这三个文件有相同的地方, 也有不同的地方。

相同的地方在于不论是Word文档,还是txt文件或者是Html文件,我们都能编写文本的内容。Word文档的不同在于我们可以在Word文档中设置一些超链接,放一些图片等操作。

txt文件就有一定的局限性,比如你放一张图片或者设置超链接等这些行为都是不行。在Html文件中,可以存放文本、图片、音频、视频等,甚至在网页中见到的一些很炫酷的小游戏,都可以在Html文件中去编写。

那接下来解释下超文本。我们在Html文件中编写代码,其实编写的是超文本。所谓超文本,大家应该能联想到超,即超出文本,超文本比文本更高一级,它包含了我们常见的音频、视频以及超链接等。

这些被我们称为超文本,在Html文件里面既能存放这些内容,也能存放文本内容,甚至是文章里的一级标题、二级标题、列表、选项等,都可以通过HTML代码去编写,这些内容我们就称为超文本。

那么这些内容到底用哪些来去展现或展示呢?标记。

什么是标记呢?


用百度官网来分析一下“标记”,在网页页面上存放很多的内容,有超链接、图片、输入框等。我们先看看右上角的新闻字样,这是一个超链接,我们看下源码,打开后的样子是这样的:

我们把蓝色的新闻部分,也就是我用红框标记的部分复制一下,其他代码删除:


“新闻”被左边和右边的“a”包裹起来了,这就构成了超链接,这就像我们常见的书名号。如果我们单是输出红楼梦字样,就是一个文本,但如果用《》书名号包裹起来,《红楼梦》,大家都能知道这是一本书。

把包裹在“新闻”两边的a标签对应包裹在红楼梦两边的书名号来看很类似。用书名号这个标记把红楼梦给包裹起来,就叫做书名,同理,用带尖括号的a这个标记把新闻这个文本内容给包裹起来,在网页中称为超链接,这对带尖括号的a就叫做标记。

标记是用HTML自己的语法规则把文本内容给包裹起来,这就叫做标记。这种标记的书写也非常简单,包裹在文本左边的叫开始标记,包裹在文本右边的叫结束标记。我们看到的网页中显示的一级标题、二级标题、超链接、图片、音频等内容其实学习它们所对应的标记就可以了。


HTML的历史发展过程



接着我们来看下HTML从最原始到现在至今整个HTML语言的历史发展过程。

  • HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布,由此超文本标记语言第一版诞生。
  • HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。
  • HTML 3.2:1997年1月14日,HTML3.2版本诞生,成为W3C的推荐标准。
  • HTML 4.0:1997年12月18日,HTML4.0版本诞生,由此成为了W3C的推荐标准。
  • HTML 4.01(微小改进):1999年12月24日,HTML4.01版本诞生,成为W3C的推荐标准。
  • HTML 5:2014年10月28日,HTML5版本诞生,H5成为W3C推荐的标准。

HTML5的诞生,标记着互联网时代的发展。比如在HTML5里面诞生的音频、视频、图像、动画等都做了新的标准,它对于浏览器的兼容也是得到了一定的处理,由此可见,HTML的整个历史发展目前为止我们所使用的版本主要是99年诞生的HTML 4.01以及2014年诞生的HTML5。



HTML的应用


时代在进步,科技在发展,这个超文本标记语言从HTML1.0版本发展到如今的HTML5版本,已经有了极大的改善。

在以前的HTML版本中,常用的是对文本的编辑、超链接、图片等,其用途很广泛,许多公司用来创建和发布消息,比如布告、技术手册、各种信函等,都能用它来描述。

HTML是一门严谨的编程语言,有组织性、模块化、规范化的。不过对于开发者而言,不同浏览器HTML的兼容性是考虑的问题。随着HTML5的诞生,我们迎来了一个新的网络世纪,各种动画、音频、视频、图像等炫酷的东西都可以做。还有各种小程序、小游戏以及App的开发应用数不胜数,其兼容性也得到了很大的改善,这意味着对前端的需求以及重视程度都有了极大的改变。

HTML是前端很重要的一环,我们学好它才能在前端大军中齐头并进,在各种应用小程序的使用中游刃有余,未来的美好生活就掌握在你的手中。

【END】

于所有Web开发人员来说,无论你选择的是哪种框架或后端语言,都需要大量使用HTML(超文本标记语言)。

HTML标题标记

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
    </head>
    
    <body>
        <h1>1级标题</h1>
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <h4>4级标题</h4>
  <h5>5级标题</h5>
  <h6>6级标题</h6>
    </body>
</html>12345678910111213141516复制代码类型:[html]

图示

h的级别越小文字大小越小。

当然了,这些文字标题都是左对齐的。

其实在标题标记中还有重要的属性!详情见文章------

我们可以给<h1>,<h2>......等标记加属性值让其变得更加多样化!

代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
    </head>
    
    <body>
        <h1 align="center">1级标题</h1>
        <h2 align="left">2级标题</h2>
        <h3 align="right">3级标题</h3>
        <h4 align="justify">4级标题</h4>
        <h5 align="right">5级标题</h5>
        <h6 align="center">6级标题</h6>
    </body>
</html>12345678910111213141516复制代码类型:[html]

图示

align标记在----文章已经有些许叙述,我们再来讲讲吧。

<h1 align="center"></h1> <!--居中-->
<h2 align="left"</h2> <!--左对齐-->
<h3 align="right"></h3> <!--右对齐-->
<h4 align="justify"></h4><!--段落两端对齐-->1234复制代码类型:[html]

所以图示才是如此显示的。

开课吧广场-人才学习交流平台