HTML 流行标签

您可能不需要编写代码，但熟悉最常见和最流行的 HTML 标签将有助于您了解开发人员如何使您的设计栩栩如生以及他们可能面临的限制。

段落标签 <p>

<p> 是用于引入段落的容器元素。内容在开始标签和结束标签之间，浏览器显示不同的段落，它们之间有换行符。

<p>在开始新想法或引入新观点时最好使用标签。“好吧，但为什么我不能为此使用换行符呢？” 因为<p>标签使您可以更好地控制内容，因为您可以为元素添加属性并单独设置每个段落的样式。另一个原因是屏幕阅读器等辅助技术可以识别段落，允许用户浏览或在方便时浏览它们。

粗体文本标签 <b>

有多种方法可以在 HTML 中设置文本样式，其中一种基本方法是添加格式标记。成对的<b>标签使文本变得粗体，没有任何额外的重要性——它通常用于强调。

不要使用<b> 标签来标记标题——相反，使用特殊的标题标签来制作标题，<h1>因为<h6>它们也构成了内容的结构。

斜体文本标签 <i>

配对<i>标签是一个格式化标签，它使里面的文本变成斜体。它主要用于特定作品的标题和名称，以使它们从网络周围的句子中脱颖而出。你也可以用它来强调，虽然粗体是一个更受欢迎的选择。标题标签 <h1> 到 <h6>

标题标签 <h1> 到 <h6>

标题标签的主要功能是创建页面的视觉和逻辑层次结构。<h1>从到有 6 个标题元素<h6>，<h1>分别是最重要和<h6>最不重要的。

从视觉上看，标题从正文中脱颖而出，字体更突出、更粗，前后分段。从逻辑上讲，搜索引擎使用标题来索引网页的结构和内容。这种结构有助于视力正常的和辅助技术用户快速浏览页面并找到他们需要的信息。

不要跳过标题级别。使用<h1>标题作为页面的主标题，然后是<h2>标题，然后是不太重要的<h3>，依此类推。

链接标签 <a>

该<a>标签定义了一个超链接。它有一个href 定义链接目的地的必需属性——没有它；该链接不会简单地工作。

链接文本位于开始标签和结束标签之间——这就是链接名称向用户显示的方式。您还可以使用其他元素作为链接——例如，图像或按钮（我们将在有关链接的课程中详细讨论）。

target 属性指定打开链接文档的位置。默认情况下，所有链接都在同一个窗口中打开，但指定属性将在新窗口或选项卡中打开它。 target="_blank"

项目标签 <li>

有几种方法可以用 HTML 组织列表。最常见的是编号或项目符号列表。作为组件的列表由两个主要元素组成：标识列表类型的标签和定义其包含的项目的标签。这些元素之间的关系称为嵌套。父标签包含子标签，类似于一盒什锦巧克力包含不同的巧克力块。在这种情况下，我们使用 item 标记来标记巧克力<li>，它嵌套在列表类型标记<ol>或<ul>中。

有序列表标签 <ol>

列表标签的类型定义了列表的类型，呵呵。编号和项目符号是最常见的。

编号（或有序）列表与标签一起引入<ol>。<li> 它与嵌套在其中的列表项标记一起使用。您放入<li>元素中的每个项目都将显示一个数字，具体取决于其在代码中的位置。正如您可能猜到的那样，有序列表适用于项目顺序很重要的情况——例如，烹饪食谱或行车路线。

无序列表标签 <ul>

无序列表标签<ul>引入了一个标有项目符号的列表。与其他类型的列表标签一样，它不能单独工作，而是与<li>嵌套在其中的项目标签一起工作。无序列表标签<ul>在这里就像一个抽屉，而项目标签<li>与其中的袜子数组没有什么不同。当物品的顺序不重要时使用无序列表——最常见的场景是购物清单。

部分标签 <div>

将空间分成更小的容器可以让您更好地控制每个区域，这就是标签在网页上的作用。它就像一个容器，将网页分成多个部分，最常见的是页眉、导航、内容、侧边栏和页脚。 <div> 通过添加其他标签，您可以为每个部分设置不同的样式，而无需更改其他部分的外观。请记住，它是一个块级标记，这意味着它用换行符将其部分与页面的其余部分分开。

容器标签 <span>

元素与元素相似——两者都用于分隔要应用不同样式的文本的一部分。该元素没有必需的属性，但是、和是常见的。该元素与该元素的唯一区别在于它是一个内联元素——它不会强制换行，并且只占用必要的宽度。 <span><div><span>styleclassid <div>

位图图像标签 <img>

该<img>标签用于在 HTML 文档中插入图像——最常见的是 BMP、GIF、PNG 或 JPG 文件。<img>是一个空元素，仅包含属性。必需的属性是src，表示链接图像的位置。但是，最佳实践是添加alt 带有有意义的图像描述的alt 文本属性width ，height 以便更好地加载。

大多数现代浏览器都支持使用<img>标签嵌入 SVG 矢量图像。如果您需要支持旧版浏览器，您可以检查兼容性

基于矢量的图形标签 <svg>

该<svg>元素允许您在网页中插入 SVG 矢量图像。熟悉设计的人都知道，位图图像由像素组成，而矢量图更像是告诉软件如何实时渲染图像的数学公式。

因此，浏览器处理位图和矢量图的方式不同。该<svg>标签允许您将矢量图形直接嵌入到您的页面中。

内嵌框架标签 <iframe>

该<iframe>元素允许在您的页面中嵌入另一个网页。最常见的用途是嵌入 Youtube 视频、广告或第三方小部件，例如社交网络的“赞”和“分享”按钮。

该元素最重要的属性是src定义嵌入网页的路径。width使用和height属性确定大小也是一个好主意。

表格标签 <table>

在按行和列排列数据时，该<table>元素会派上用场。表格元素通常包含多个嵌套标签。最常见的是<tr>用于创建行的<td> 元素，以及用于在行内创建列的元素。您还可以使用元素将单元格定义为一组表格单元格的标题<th>。

正确的表格标记对于辅助技术用户来说尤其重要——屏幕阅读器有一种特殊的表格内容模式，允许辅助技术用户轻松浏览信息。始终将<table>元素用于表格数据。

以上内容为转载