像

HTML文档中使用的图像的目的有：第一，使页面具有视觉效果；第二个：显示有用信息。此外，图像也可以用作链接。

虽然使用图像有很多好处，但是包含太多图像的页面通常看起来过于杂乱，并且可能需要花费太长的时间来加载。

图像 - <img src=“url”>

要显示图像，需要使用src属性来指定图像的路径，如下所示有几个方法来实现：

• src="picture.jpg" - 当图片与html文件在同一个目录下时，直接指定图片名
• src="images/picture.jpg" - 当图片位于其它目录时，使用相对路径来指定
• src="http://www.htmlbasic.com/images/photo.jpg" - 当指定网络图片时

替代文字 - <img alt="?">

img标记的alt属性定义当图像无法加载时显示的文本来代替该图像。对一个考虑周到的html来说这是一个必需属性，简要地描述图像是什么。

图像大小 - <img width="?" height="?">

图像通常显示为它实际的大小，但通过使用width和height属性，可以更改它显示的大小。以像素或百分比形式指定图像的大小。技巧提示：使用图像的实际大小（以像素为单位）来指定其显示大小，以强制浏览器在图像加载之前为其分配空间，以确保无论图像是否显示，页面布局都保持不变。

图像边框 - <img border="?">

img标记的border属性通过指定以像素为单位的厚度来添加边框。您还可以设置border=“0”以删除将图像用作链接时添加的边框。

图像对齐 - <img align="?">

默认情况下，图像显示在html代码中指定的位置（与任何其他标记一样）。但是，可以通过设置align=“left | right | top | bottom | middle”中的任意一个值来将图像与周围的文本或段落对齐。

图像空白 - <img ... vspace="?" hspace="?">

调整图像周围的空白，以像素为单位。使用vspace调整上下垂直间距，或左右两侧使用hspace。

例子

下面是以上标记的示例：

浏览器显示内容如下所示：

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

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

什么是语义标记？

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

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

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

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

启用语义标记的两种做法

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

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

正确使用 HTML 元素

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

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

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

分离内容和演示

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

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

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

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

定义语义标记

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

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

为什么语义标记很重要？

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

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

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

我们如何编写语义标记？

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

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

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

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

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

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

文件结构

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

• header：用于网页标题的容器，通常包含网站徽标、标题元素和网站导航。
• footer：用于网页页脚的容器，除了导航链接和返回网页顶部的链接外，通常还包含作者身份、联系方式和版权信息。
• main：一个高级元素，用于包含单个网页独有的所有内容，并且不会在多个网页中重复。
• nav：包含站点导航链接块的元素。该元素通常放置在页面header和footer中，也可以在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被赋予了额外的重要性，并且通常以粗体显示。
• mark：mark标签用于突出在特定上下文中具有特定重要性的文本。例如，它可用于突出显示搜索结果页面中搜索词的每次出现。
• cite：该cite元素用于标识部分内容源自的原始作品。
• blockquoteand q: blockquoteand q(quote) 元素用于识别从另一个来源直接引用的文本。
• time：该time元素可用于告诉浏览器、网络爬虫和其他智能设备，特定的内容位代表 24 小时制的时间或特定的日历日期。

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

媒体类型

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

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

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

相关标签

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

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

结束的想法

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

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

TML(超文本标记语言)的历史可以追溯到互联网的早期。以下是HTML的主要历史事件和版本：

·HTML2.0于1993年发布，引入了一些新元素和属性如表格表单和图像。

·HTML3.0于1995年发布，增加了更多的标记和样式选项，以支持更复杂的页面布局和样式。

·HTML4.0于1997年发布，引入了框架样式表和脚本等新特性，使得网页设计更加灵活和丰富。在HTML 4.0之后HTML标准进一步发展为XHTML(可扩展超文本标记语言)1.0。XHTML1.0更加严格，强调语法和文档结构的一致性，使其更适合XML应用。

·HTML5于2010年正式发布标志着HTML的重大转变。HTML5引入了许多新的元素和API，如<video><audio><canvas><local storage>等，使网页开发更加丰富和交互。此外HTML5还引入了语义元素，如：NY NEOL以提高文档结构的语义化。

自HTML5发布以来，HTML已经成为一个不断发展的标准，被维护为"HTML Living Standard"，这意味着HTML不再按照传统的版本号发布，而是持续演进新特性和改进不断加入。

HTML的历史反映了互联网的不断发展和网页技术的演进，从最初的简单文本链接到，现代的富媒体和互动性网页一直是构建网页的基础，为全球互联网的发展做出了重要贡献。