AI智谷X

HTML元素

2017/09/11 HTML 共 2987 字，约 9 分钟
AI智谷X

HTML元素

HTML文档由嵌套的HTML元素构成。它们用HTML标签表示，包含于尖括号中，如 <p>

在一般情况下，一个元素由一对标签表示：“开始标签” <p> 与“结束标签” </p> 。元素如果含有文本内容，就被放置在这些标签之间。

在开始与结束标签之间也可以封装另外的标签，包括标签与文本的混合。这些嵌套元素是父元素的子元素。

开始标签也可包含标签属性。这些属性有诸如标识文档区块、将样式信息绑定到文档演示和为一些如 <img> 等的标签嵌入图像、引用图像来源等作用。

一些元素如换行符 <br> ，不允许嵌入任何内容，无论是文字或其他标签。这些元素只需一个单一的空标签（类似于一个开始标签），无需结束标签。

许多标签是可选的，尤其是那些很常用的段落元素 <p> 的闭合端标签。HTML浏览器或其他介质可以从上下文识别出元素的闭合端以及由HTML标准所定义的结构规则。这些规则非常复杂，不是大多数HTML编码人员可以完全理解的。

因此，一个HTML元素的一般形式为： <tag attribute1="value1" attribute2="value2">''content''</tag> 。一些HTML元素被定义为空元素，其形式为 <tag attribute1="value1" attribute2="value2"> 。空元素不能封装任何内容。例如 <br> 标签或内联标签 <img> 。一个HTML元素的名称即为标签使用的名称。注意，结束标签的名称前面有一个斜杠 “/” ，空元素不需要也不允许结束标签。如果元素属性未标明，则使用其默认值。

例子：

HTML文档的页眉：<head>...</head> 。标题被包含在头部，例如：

`<head>
  <title>The Title</title>
</head>`

标题：HTML标题由 <h1> 到 <h6> 六个标签构成，字体由大到小递减：

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

段落：

<p>第一段</p> <p>第二段</p>

换行：<br> 。<br> 与 <p> 之间的差异是 br 换行但不改变页面的语义结构，而p部分的页面成段。

<p>這是<br>一個<br>使用換行<br>段落</p>

链接：使用 <a> 标签来创建链接。href 属性包含链接的URL地址。

<a href="https://zh.wikipedia.org/">中文維基百科的連結！</a>

注释：

<!-- This is a comment -->

注释有助于理解标记，但它不会在网页上显示。

HTML中存在以下几种类型的标记元素：

用于文本的结构式标记

例如，<h2> 羽毛球 </h2> 将“羽毛球”定义为二级标题。结构式标记不指示任何特定的渲染，但大多数网页浏览器都会采用元素格式的默认样式。要在内容上实现进一步的风格可以使用层叠样式表（CSS）。

用于文本外观的表现式标记，不论其目的

例如，’'’粗体’'’表示视觉输出设备应将文本“粗体”加粗，但如果设备无法做到这一点（如朗读文本的听觉设备），就不会发生什么现象。在这种情况下，’'’粗体’'’与’‘斜体’‘也可能有相同的视觉效果，但在本质上它们更加语义化。如同’'’加强文字’'’与’‘强调文字’‘的区别。为支持CSS的使用，大多数表现式标记在HTML 4.0规范中不再被推荐使用。

超文本标记使文档的一部分链接到其他文档

锚元素在文档中创建超链接，其 href 属性设置链接的目标URL。例如：HTML标记 <a href="https://zh.wikipedia.org/">中文维基百科</a> 会将文字”中文维基百科（页面存档备份，存于互联网档案馆）”渲染为超链接。要将图片渲染为超链接，img 元素要作为内容插入到 a 元素中：<a href="https://example.org"><img src="image.gif" alt="说明文字" width="50" height="50" border="0"></a>。

属性

大多数元素的属性以“名称-值”的形式成对出现，由“=”分离并写在开始标签元素名之后。值一般由单引号或双引号包围，有些值的内容包含特定字符，在HTML中可以去掉引号（XHTML不行）。不加引号的属性值被认为是不安全的[61]。有些属性无需成对出现，仅存在于开始标签中即可影响元素，如 img 元素的 ismap 属性。

许多元素存在一些共通的属性：

id 属性为元素提供了在全文档内的唯一标识。它用于识别元素，以便样式表可以改变其表现属性，脚本可以改变、显示或删除其内容或格式化。对于蒂姆加到页面的URL，它为元素提供了一个全局唯一标识，通常为页面的子章节。例如，ID “属性”对于https://zh.wikipedia.org/wiki/HTML#属性

class 属性提供一种将类似元素分类的方式。常被用于语义化或格式化。例如，一个HTML文档可指定类 <class="标记"> 来表明所有具有这一类值的元素都从属于文档的主文本。格式化后，这样的元素可能会聚集在一起，并作为页面脚注而不会出现在HTML代码中。类属性也被用于微格式的语义化。类值也可进行多声明。如 <class="标记 重要"> 将元素同时放入標記与重要两类中。

style 属性可以将表现性质赋予一个特定元素。比起使用 id 或 class 属性从样式表中选择元素，“style” 被认为是一个更好的做法，尽管有时这对一个简单、专用或特别的样式显得太繁琐。

title 属性用于给元素一个附加的说明。 大多数浏览器中这一属性显示为工具提示。

lang 属性用于识别元素内容的语言，它可能与文档的主要语言不同。例如，在中文文档中：

<p>法语<span lang="fr">c'est la vie</span>在法国的应用很普遍，意为“这就是生活” 。<p>

缩写元素abbr可用于说明一些属性：

<abbr id="ID" class="术语" style="color:purple;" title="超文本标记语言">HTML</abbr>

这个例子显示为HTML； 在大多数浏览器中，光标指向缩写时会显示标题文字“超文本标记语言”。

大多数元素采用与语言相关的属性 dir 来指定文字方向，如 “rtl” 采用从右到左的文本。

文档信息

Search

    Table of Contents