前端开发基本标签有哪些类型 极小狐 • 2024 年 9 月 5 日 下午10:12 • 前端开发 前端开发基本标签有多种类型，如结构化标签、文本格式化标签、表单标签、媒体标签等。结构化标签包括HTML文档的基本结构，例如、、，它们帮助定义网页的整体框架。文本格式化标签，如 、 至 、、等，用于设置文本的样式和层次。表单标签包括、 、等，用于创建交互式的表单。媒体标签，如、、等，用于嵌入图片、音频和视频文件。 例如，结构化标签中的是HTML文档的根元素，所有其他元素都是其子元素，包含文档的元数据和链接到外部资源，如CSS和JavaScript文件，而包含实际显示在网页上的内容。 一、结构化标签 结构化标签主要用于定义HTML文档的基本结构和框架。最常见的结构化标签包括： ：这是HTML文档的根元素，所有其他元素都是其子元素。它通常是文档的第一行，表示文档是一个HTML文件。 ：这个标签包含了文档的元数据和链接到外部资源，如CSS和JavaScript文件。它通常包含、<meta>、<link>、<script>等子标签。</p> </p> <p><p><strong><body></strong>：这个标签包含了实际显示在网页上的内容。所有可视元素，如文本、图像、视频等，都位于<body>标签内。</p> </p> <p><p><strong></p> <div></strong>：这是一个通用的容器标签，用于分组和布局网页内容。它没有特定的语义意义，但可以通过CSS进行样式化。</p> </p> <p><p><strong></p> <section></strong>：这个标签表示文档中的一个独立部分，通常包含一个主题或内容块。</p> </p> <p><p><strong></p> <article></strong>：这个标签表示一篇独立的内容，如博客文章、新闻报道等。</p> </p> <p><p><strong></p> <header></strong>：这个标签表示文档或文档部分的头部，通常包含标题、导航链接等。</p> </p> <p><p><strong></p> <footer></strong>：这个标签表示文档或文档部分的底部，通常包含版权信息、联系信息等。</p> </p> <p><p><strong></p> <nav></strong>：这个标签表示导航链接的集合，用于定义文档中的导航部分。</p> </p> <p><p>这些结构化标签有助于定义网页的整体布局和结构，使其更易于理解和维护。</p> </p> <p><h2><span class="ez-toc-section" id="25E425BA258C25E32580258125E62596258725E6259C25AC25E625A025BC25E525BC258F25E5258C259625E625A0258725E725AD25BE"></span><strong>二、文本格式化标签</strong><span class="ez-toc-section-end"></span></h2></p> <p><p>文本格式化标签用于设置网页中文本的样式和层次。这些标签包括：</p> </p> <p><p><strong></p> <p></strong>：这是段落标签，用于定义文本的段落。每个段落通常会有一些默认的边距，以便文本更易于阅读。</p> </p> <p><p><strong></p> <h1>至</p> <h6></strong>：这些是标题标签，用于定义文档中的标题。</p> <h1>是最高级别的标题，</p> <h6>是最低级别的标题。</p> </p> <p><p><strong><b></strong>：这是粗体标签，用于将文本设置为粗体。</p> </p> <p><p><strong><i></strong>：这是斜体标签，用于将文本设置为斜体。</p> </p> <p><p><strong><u></strong>：这是下划线标签，用于在文本下方添加下划线。</p> </p> <p><p><strong><strong></strong>：这是强调标签，用于表示重要的文本，通常会被显示为粗体。</p> </p> <p><p><strong><em></strong>：这是强调标签，用于表示被强调的文本，通常会被显示为斜体。</p> </p> <p><p><strong><mark></strong>：这是标记标签，用于高亮显示文本，通常会有一个背景颜色。</p> </p> <p><p><strong><small></strong>：这是小号文本标签，用于将文本设置为小号字体。</p> </p> <p><p>这些文本格式化标签有助于定义文本的层次和样式，使网页内容更加清晰和易读。</p> </p> <p><h2><span class="ez-toc-section" id="25E425B8258925E32580258125E825A125A825E5258D259525E625A0258725E725AD25BE"></span><strong>三、表单标签</strong><span class="ez-toc-section-end"></span></h2></p> <p><p>表单标签用于创建交互式的表单，允许用户输入和提交数据。这些标签包括：</p> </p> <p><p><strong></p> <form></strong>：这是表单标签，用于定义一个表单。它通常包含action和method属性，分别用于指定表单提交的目标URL和HTTP方法。</p> </p> <p><p><strong><input></strong>：这是输入标签，用于定义各种类型的输入字段，如文本框、单选按钮、复选框等。它有多种type属性，如text、radio、checkbox、password等。</p> </p> <p><p><strong><label></strong>：这是标签标签，用于为输入字段定义标签。它通常与<input>标签一起使用，以提高表单的可访问性。</p> </p> <p><p><strong><textarea></strong>：这是多行文本输入标签，用于定义一个多行文本输入区域。</p> </p> <p><p><strong><select></strong>：这是下拉列表标签，用于定义一个下拉列表。它通常包含<option>子标签，用于定义列表项。</p> </p> <p><p><strong><button></strong>：这是按钮标签，用于定义一个按钮。它可以用来提交表单或执行其他操作。</p> </p> <p><p><strong></p> <fieldset></strong>：这是字段集标签，用于将表单中的相关元素分组。它通常包含</p> <legend>子标签，用于定义组的标题。</p> </p> <p><p>这些表单标签有助于创建功能丰富的交互式表单，使用户能够输入和提交数据。</p> </p> <p><h2><span class="ez-toc-section" id="25E5259B259B25E32580258125E525AA259225E425BD259325E625A0258725E725AD25BE"></span><strong>四、媒体标签</strong><span class="ez-toc-section-end"></span></h2></p> <p><p>媒体标签用于嵌入和显示各种类型的媒体文件，如图像、音频和视频。这些标签包括：</p> </p> <p><p><strong><img></strong>：这是图像标签，用于嵌入图像文件。它通常包含src属性，用于指定图像文件的URL，以及alt属性，用于提供图像的替代文本。</p> </p> <p><p><strong><audio></strong>：这是音频标签，用于嵌入音频文件。它通常包含src属性，用于指定音频文件的URL，以及controls属性，用于显示播放控件。</p> </p> <p><p><strong><video></strong>：这是视频标签，用于嵌入视频文件。它通常包含src属性，用于指定视频文件的URL，以及controls属性，用于显示播放控件。</p> </p> <p><p><strong><source></strong>：这是源标签，用于在<audio>或<video>标签内定义多个媒体文件源。它通常包含src和type属性，用于指定媒体文件的URL和类型。</p> </p> <p><p><strong><track></strong>：这是轨道标签，用于在<video>标签内定义字幕或其他文本轨道。它通常包含kind、src、srclang和label属性，用于指定轨道的类型、URL、语言和标签。</p> </p> <p><p>这些媒体标签有助于在网页中嵌入和显示各种类型的媒体文件，使网页内容更加丰富和多样化。</p> </p> <p><h2><span class="ez-toc-section" id="25E425BA259425E32580258125E9259325BE25E6258E25A525E52592258C25E525AF25BC25E8258825AA25E625A0258725E725AD25BE"></span><strong>五、链接和导航标签</strong><span class="ez-toc-section-end"></span></h2></p> <p><p>链接和导航标签用于创建超链接和导航元素，使用户能够在不同的网页和资源之间导航。这些标签包括：</p> </p> <p><p><strong><a></strong>：这是锚标签，用于定义超链接。它通常包含href属性，用于指定链接目标的URL。它还可以包含target属性，用于指定链接打开的方式，如在新窗口或新标签页中打开。</p> </p> <p><p><strong></p> <nav></strong>：这是导航标签，用于定义文档中的导航部分。它通常包含一组<a>标签，用于创建导航链接。</p> </p> <p><p><strong><link></strong>：这是链接标签，用于在<head>标签内链接到外部资源，如CSS文件。它通常包含rel、href和type属性，用于指定资源的关系、URL和类型。</p> </p> <p><p><strong></p> <ul></strong>：这是无序列表标签，用于定义一个无序列表。它通常包含</p> <li>子标签，用于定义列表项。</p> <p><p><strong></p> <ol></strong>：这是有序列表标签，用于定义一个有序列表。它通常包含</p> <li>子标签，用于定义列表项。</p> <p><p><strong></p> <li></strong>：这是列表项标签，用于定义无序或有序列表中的列表项。</p> <p><p>这些链接和导航标签有助于创建有效的导航结构，使用户能够轻松地在不同的网页和资源之间导航。</p> </p> <p><h2><span class="ez-toc-section" id="25E5258525AD25E32580258125E825A125A825E625A025BC25E625A0258725E725AD25BE"></span><strong>六、表格标签</strong><span class="ez-toc-section-end"></span></h2></p> <p><p>表格标签用于创建和格式化表格数据，使数据在网页上以结构化的方式显示。这些标签包括：</p> </p> <p><p><strong></p> <table></strong>：这是表格标签，用于定义一个表格。它通常包含</p> <tr>、</p> <th>和</p> <td>子标签，用于定义表格的行和单元格。</p> </p> <p><p><strong></p> <tr></strong>：这是表格行标签，用于定义表格中的一行。它通常包含</p> <th>或</p> <td>子标签，用于定义行内的单元格。</p> </p> <p><p><strong></p> <th></strong>：这是表头单元格标签，用于定义表格中的表头单元格。它通常用于表格的第一行或第一列，以提供列或行的标题。</p> </p> <p><p><strong></p> <td></strong>：这是表格数据单元格标签，用于定义表格中的数据单元格。它通常包含实际显示在表格中的数据。</p> </p> <p><p><strong></p> <caption></strong>：这是表格标题标签，用于为表格提供一个标题。它通常显示在表格的上方。</p> </p> <p><p><strong></p> <colgroup></strong>：这是列组标签，用于对表格中的列进行分组。它通常包含</p> <col>子标签，用于定义列的属性。</p> </p> <p><p><strong></p> <col></strong>：这是列标签，用于定义表格中的一列。它通常包含span和style属性，用于指定列的跨度和样式。</p> </p> <p><p>这些表格标签有助于创建和格式化表格数据，使数据在网页上以结构化和易读的方式显示。</p> </p> <p><h2><span class="ez-toc-section" id="25E425B8258325E32580258125E52585258325E6259525B025E6258D25AE25E625A0258725E725AD25BE"></span><strong>七、元数据标签</strong><span class="ez-toc-section-end"></span></h2></p> <p><p>元数据标签用于在HTML文档中包含元数据和链接到外部资源。这些标签包括：</p> </p> <p><p><strong><meta></strong>：这是元数据标签，用于在<head>标签内定义文档的元数据。它通常包含charset、name、content等属性，用于指定字符集、文档描述、关键词等。</p> </p> <p><p><strong><title></strong>：这是标题标签，用于在<head>标签内定义文档的标题。这个标题通常显示在浏览器的标题栏或标签页上。</p> </p> <p><p><strong><base></strong>：这是基准URL标签，用于在<head>标签内定义文档中所有相对URL的基准URL。它通常包含href属性，用于指定基准URL。</p> </p> <p><p><strong></p> <style></strong>：这是样式标签，用于在<head>标签内定义内联CSS样式。它通常包含CSS规则，用于指定文档的样式。</p> </p> <p><p><strong><link></strong>：这是链接标签，用于在<head>标签内链接到外部资源，如CSS文件。它通常包含rel、href和type属性，用于指定资源的关系、URL和类型。</p> </p> <p><p>这些元数据标签有助于在HTML文档中包含元数据和链接到外部资源，使文档更易于理解和处理。</p> </p> <p><h2><span class="ez-toc-section" id="25E5258525AB25E32580258125E82584259A25E6259C25AC25E52592258C25E6259525B025E6258D25AE25E625A0258725E725AD25BE"></span><strong>八、脚本和数据标签</strong><span class="ez-toc-section-end"></span></h2></p> <p><p>脚本和数据标签用于在HTML文档中包含脚本和数据。这些标签包括：</p> </p> <p><p><strong><script></strong>：这是脚本标签，用于在HTML文档中包含JavaScript代码。它通常包含src属性，用于链接到外部JavaScript文件，或直接包含内联JavaScript代码。</p> </p> <p><p><strong><noscript></strong>：这是无脚本标签，用于在浏览器不支持或禁用JavaScript时显示的替代内容。它通常包含一些基本的HTML内容。</p> </p> <p><p><strong><template></strong>：这是模板标签，用于定义可以重复使用的HTML模板。它通常包含一些HTML结构，用于动态生成内容。</p> </p> <p><p><strong><canvas></strong>：这是画布标签，用于在网页上绘制图形。它通常与JavaScript一起使用，以创建动态和交互式图形。</p> </p> <p><p><strong><svg></strong>：这是可缩放矢量图形标签，用于在网页上嵌入矢量图形。它通常包含一些子标签，如<path>、<circle>、<rect>等，用于定义图形的形状和属性。</p> </p> <p><p>这些脚本和数据标签有助于在HTML文档中包含脚本和数据，使文档更加动态和交互。</p> </p> <p><p>通过理解和使用这些基本标签，前端开发人员可以创建结构化、可读、交互性强的网页。这些标签不仅定义了网页的内容和布局，还提供了与用户交互的功能，使网页更加丰富和多样化。无论是创建基本的网页结构，还是实现复杂的交互效果，这些基本标签都是前端开发的核心工具。</p> </p> <h2><span class="ez-toc-section" id="25E7259B25B825E5258525B325E9259725AE25E725AD2594FAQs25EF25BC259A"></span><strong>相关问答FAQs：</strong><span class="ez-toc-section-end"></span></h2> <p><strong>前端开发基本标签有哪些类型？</strong></p> <p>前端开发是网页设计和开发的基础，而HTML（超文本标记语言）是构建网页的核心语言。HTML由多种标签构成，这些标签可以分为不同的类型和功能。以下是一些基本标签的详细分类和介绍。</p> <h3><span class="ez-toc-section" id="1_25E62596258725E625A125A325E725BB259325E6259E258425E625A0258725E725AD25BE"></span>1. 文档结构标签<span class="ez-toc-section-end"></span></h3> <p>文档结构标签用于定义HTML文档的基本结构。它们为网页的内容提供了框架。</p> <ul> <li><strong><code><!DOCTYPE html></code></strong>: 声明文档类型，告知浏览器所使用的HTML版本。</li> <li><strong><code><html></code></strong>: 根元素，所有其他元素都应包含在此标签内。</li> <li><strong><code><head></code></strong>: 包含文档的元数据，如标题、字符集、样式表链接等。</li> <li><strong><code><title></code></strong>: 定义网页的标题，显示在浏览器标签上。</li> <li><strong><code><body></code></strong>: 网页的主体，包含所有可见内容。</li> </ul> <h3><span class="ez-toc-section" id="2_25E62596258725E525AD259725E52592258C25E625AE25B525E8259025BD25E625A0258725E725AD25BE"></span>2. 文字和段落标签<span class="ez-toc-section-end"></span></h3> <p>这类标签用于文本内容的格式化和排版，帮助提升网页的可读性。</p> <ul> <li><strong><code><h1></code>至<code><h6></code></strong>: 六个不同级别的标题标签，<code><h1></code>表示最高级别的标题，<code><h6></code>表示最低级别。</li> <li><strong><code><p></code></strong>: 段落标签，用于定义文本段落。</li> <li><strong><code><br></code></strong>: 换行标签，用于在文本中插入换行符。</li> <li><strong><code><hr></code></strong>: 水平线标签，通常用于分隔内容。</li> <li><strong><code><strong></code></strong>: 表示重要的文本，通常以加粗的形式显示。</li> <li><strong><code><em></code></strong>: 表示强调的文本，通常以斜体的形式显示。</li> </ul> <h3><span class="ez-toc-section" id="3_25E9259325BE25E6258E25A525E52592258C25E5259B25BE25E52583258F25E625A0258725E725AD25BE"></span>3. 链接和图像标签<span class="ez-toc-section-end"></span></h3> <p>这类标签用于插入超链接和图像，使用户能够导航和查看视觉内容。</p> <ul> <li><strong><code><a></code></strong>: 超链接标签，可以链接到其他网页或资源，使用<code>href</code>属性指定目标URL。</li> <li><strong><code><img></code></strong>: 图像标签，使用<code>src</code>属性指定图像的路径，<code>alt</code>属性用于描述图像内容。</li> <li><strong><code><map></code></strong>: 图像地图标签，允许为图像的不同区域定义超链接。</li> </ul> <h3><span class="ez-toc-section" id="4_25E52588259725E825A125A825E625A0258725E725AD25BE"></span>4. 列表标签<span class="ez-toc-section-end"></span></h3> <p>列表标签用于创建有序或无序的列表，帮助组织信息。</p> <ul> <li><strong><code><ul></code></strong>: 无序列表标签，用于创建没有特定顺序的项目列表。</li> <li><strong><code><ol></code></strong>: 有序列表标签，用于创建有特定顺序的项目列表。</li> <li><strong><code><li></code></strong>: 列表项标签，必须在<code><ul></code>或<code><ol></code>标签内使用。</li> </ul> <h3><span class="ez-toc-section" id="5_25E825A125A825E625A025BC25E625A0258725E725AD25BE"></span>5. 表格标签<span class="ez-toc-section-end"></span></h3> <p>表格标签用于创建和组织数据表格，便于展示信息。</p> <ul> <li><strong><code><table></code></strong>: 表格标签，定义一个表格的开始。</li> <li><strong><code><tr></code></strong>: 表格行标签，用于定义表格中的每一行。</li> <li><strong><code><td></code></strong>: 表格数据单元标签，用于定义每一行中的单元格。</li> <li><strong><code><th></code></strong>: 表格头单元格标签，用于定义表格的标题单元格，通常以加粗和居中的形式显示。</li> </ul> <h3><span class="ez-toc-section" id="6_25E825A125A825E5258D259525E625A0258725E725AD25BE"></span>6. 表单标签<span class="ez-toc-section-end"></span></h3> <p>表单标签用于收集用户输入的数据，是与用户交互的重要组成部分。</p> <ul> <li><strong><code><form></code></strong>: 表单标签，定义一个表单的开始。</li> <li><strong><code><input></code></strong>: 输入标签，用于接受用户输入，可以有多种类型（文本、密码、复选框等）。</li> <li><strong><code><textarea></code></strong>: 文本区域标签，用于接受多行文本输入。</li> <li><strong><code><button></code></strong>: 按钮标签，用于创建可点击的按钮。</li> <li><strong><code><select></code></strong>: 下拉选择框标签，用于提供多个选项供用户选择。</li> </ul> <h3><span class="ez-toc-section" id="7_25E525B5258C25E525A5259725E52592258C25E825AF25AD25E425B9258925E5258C259625E625A0258725E725AD25BE"></span>7. 嵌套和语义化标签<span class="ez-toc-section-end"></span></h3> <p>嵌套标签和语义化标签帮助提升网页结构的清晰度和可读性。</p> <ul> <li><strong><code><div></code></strong>: 分区标签，用于分组内容，通常用于布局。</li> <li><strong><code><span></code></strong>: 行内标签，用于小范围的文本样式修改。</li> <li><strong><code><header></code></strong>: 页眉标签，通常包含网站标题和导航菜单。</li> <li><strong><code><footer></code></strong>: 页脚标签，通常包含版权信息和联系信息。</li> <li><strong><code><article></code></strong>: 文章标签，用于封装独立内容，如博客文章或新闻条目。</li> <li><strong><code><section></code></strong>: 段落标签，用于定义文档的区域或部分。</li> </ul> <h3><span class="ez-toc-section" id="8_25E525AA259225E425BD259325E625A0258725E725AD25BE"></span>8. 媒体标签<span class="ez-toc-section-end"></span></h3> <p>媒体标签用于插入音频和视频，丰富网页的多媒体表现。</p> <ul> <li><strong><code><audio></code></strong>: 音频标签，用于插入音频文件，支持多种格式。</li> <li><strong><code><video></code></strong>: 视频标签，用于插入视频文件，支持多种格式。</li> <li><strong><code><source></code></strong>: 媒体源标签，定义多种媒体格式，以便浏览器选择最佳支持的格式。</li> </ul> <h3><span class="ez-toc-section" id="9_25E52585258325E6259525B025E6258D25AE25E625A0258725E725AD25BE"></span>9. 元数据标签<span class="ez-toc-section-end"></span></h3> <p>元数据标签提供关于网页本身的信息，通常不直接显示在网页上。</p> <ul> <li><strong><code><meta></code></strong>: 元标签，提供关于文档的描述、关键词、作者等信息。</li> <li><strong><code><link></code></strong>: 链接标签，通常用于引入外部样式表。</li> <li><strong><code><style></code></strong>: 样式标签，允许在HTML文档中直接嵌入CSS样式。</li> </ul> <h3><span class="ez-toc-section" id="10_25E82584259A25E6259C25AC25E625A0258725E725AD25BE"></span>10. 脚本标签<span class="ez-toc-section-end"></span></h3> <p>脚本标签用于引入和编写JavaScript代码，使网页具有动态交互性。</p> <ul> <li><strong><code><script></code></strong>: 脚本标签，用于引入外部JavaScript文件或嵌入JavaScript代码。</li> </ul> <h3><span class="ez-toc-section" id="11_25E7258925B925E625AE258A25E525AD259725E725AC25A625E52592258C25E725AC25A625E5258F25B7"></span>11. 特殊字符和符号<span class="ez-toc-section-end"></span></h3> <p>在HTML中，有时需要使用特殊字符和符号，使用实体来表示。</p> <ul> <li><strong><code> </code></strong>: 不间断空格。</li> <li><strong><code><</code></strong>: 小于号（<）。</li> <li><strong><code>></code></strong>: 大于号（>）。</li> <li><strong><code>&</code></strong>: 和号（&）。</li> </ul> <h3><span class="ez-toc-section" id="12_25E425BD25BF25E7259425A8HTML525E7259A258425E6259625B025E625A0258725E725AD25BE"></span>12. 使用HTML5的新标签<span class="ez-toc-section-end"></span></h3> <p>HTML5引入了一些新标签，增加了语义化，提高了可访问性和SEO效果。</p> <ul> <li><strong><code><nav></code></strong>: 导航标签，定义导航链接的区域。</li> <li><strong><code><aside></code></strong>: 侧边栏标签，用于包含与主内容相关但不直接相关的信息。</li> <li><strong><code><time></code></strong>: 时间标签，表示时间和日期。</li> <li><strong><code><progress></code></strong>: 进度标签，表示任务的完成进度。</li> </ul> <h3><span class="ez-toc-section" id="25E525B0258F25E725BB2593"></span>小结<span class="ez-toc-section-end"></span></h3> <p>掌握这些基本标签是前端开发的基础。了解它们的功能和用法，能够帮助开发者更有效地构建和设计网页。随着技术的发展，新的标签和属性不断出现，前端开发者需保持更新，确保能够利用最新的技术和工具，以满足用户日益增长的需求。通过有效地使用这些标签，开发者不仅可以提升网页的功能性，还可以增强用户体验，优化搜索引擎排名。</p> <div class="entry-copyright"><p>原创文章，作者：极小狐，如若转载，请注明出处：https://devops.gitlab.cn/archives/197866</p></div> </div> <div class="entry-tag"></div> <div class="entry-action"> <div class="btn-zan" data-id="197866"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div> </div> <div class="entry-bar"> <div class="entry-bar-inner"> <div class="entry-bar-author"> <a data-user="6" target="_blank" href="https://devops.gitlab.cn/archives/author/jihu003" class="avatar j-user-card"> <img alt='极小狐' src='//g.izt6.com/avatar/c1ee834fe4d1152269faf20e02fbba54?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/c1ee834fe4d1152269faf20e02fbba54?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/><span class="author-name">极小狐</span> </a> </div> <div class="entry-bar-info"> <div class="info-item meta"> <a class="meta-item j-heart" href="javascript:;" data-id="197866"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i> <span class="data">0</span></a> <a class="meta-item" href="#comments"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i> <span class="data">0</span></a> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="197866" data-qrcode="https://devops.gitlab.cn/archives/197866"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报</a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a> </div> </div> </div> </div> </div> <div class="entry-page"> <div class="entry-page-prev j-lazy" style="background-image: url('https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/45924811-986c-45e4-a7e7-46bc4ad114a7-480x300.webp"> <a href="https://devops.gitlab.cn/archives/197863" title="前端开发实习需要具备哪些条件" rel="prev"> <span>前端开发实习需要具备哪些条件</span> </a> <div class="entry-page-info"> <span class="pull-left"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg></i> 上一篇</span> <span class="pull-right">2024 年 9 月 5 日</span> </div> </div> <div class="entry-page-next j-lazy" style="background-image: url('https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/c6ac8d4c-a69c-441d-af15-ce71e63a5a76-480x300.webp"> <a href="https://devops.gitlab.cn/archives/197871" title="前端开发需要的插件有哪些" rel="next"> <span>前端开发需要的插件有哪些</span> </a> <div class="entry-page-info"> <span class="pull-right">下一篇 <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg></i></span> <span class="pull-left">2024 年 9 月 5 日</span> </div> </div> </div> <div class="entry-related-posts"> <h3 class="entry-related-title">相关推荐</h3><ul class="entry-related cols-3 post-loop post-loop-default"><li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208725" title="如何挑选前端开发" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何挑选前端开发" decoding="async" fetchpriority="high" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/96d3aaf8-edaa-4ec2-9875-87625c8784e4-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208725" target="_blank" rel="bookmark"> 如何挑选前端开发 </a> </h3> <div class="item-excerpt"> <p>在挑选前端开发人员时，应考虑技术能力、解决问题的能力、沟通能力、学习能力、团队协作、项目经验和工作态度。技术能力是最基本也是最重要的一点，前端开发人员需要熟练掌握HTML、CSS、…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="3" target="_blank" href="https://devops.gitlab.cn/archives/author/xiaoxiao" class="avatar j-user-card"> <img alt='xiaoxiao' src='//g.izt6.com/avatar/95ffd0b35c412a1fbd8ac4c83346e795?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/95ffd0b35c412a1fbd8ac4c83346e795?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>xiaoxiao</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208725#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208722" title="MQTT前端如何开发" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="MQTT前端如何开发" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/895c10d4-2db2-443d-999d-5cf35e6cfe3e-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208722" target="_blank" rel="bookmark"> MQTT前端如何开发 </a> </h3> <div class="item-excerpt"> <p>MQTT前端开发需要选择合适的MQTT库、实现连接功能、发布和订阅消息、处理消息、确保安全性。其中选择合适的MQTT库尤为关键，因为它直接影响到开发效率和应用的性能。常见的MQTT…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="3" target="_blank" href="https://devops.gitlab.cn/archives/author/xiaoxiao" class="avatar j-user-card"> <img alt='xiaoxiao' src='//g.izt6.com/avatar/95ffd0b35c412a1fbd8ac4c83346e795?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/95ffd0b35c412a1fbd8ac4c83346e795?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>xiaoxiao</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208722#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208721" title="前端开发 如何转型" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发 如何转型" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/d5daf048-6dc2-45d8-bd42-0c1478374263-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208721" target="_blank" rel="bookmark"> 前端开发 如何转型 </a> </h3> <div class="item-excerpt"> <p>前端开发转型的关键在于：扩展技术栈、掌握后端技能、提升设计能力、关注用户体验、强化项目管理。其中，扩展技术栈尤为重要。随着技术的快速发展，前端开发不仅限于HTML、CSS和Java…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="2" target="_blank" href="https://devops.gitlab.cn/archives/author/devsecops" class="avatar j-user-card"> <img alt='DevSecOps' src='//g.izt6.com/avatar/784477b59c09d7731bd613f1c9a5555a?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/784477b59c09d7731bd613f1c9a5555a?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>DevSecOps</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208721#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208719" title="前端如何开发app" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端如何开发app" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/c52efeab-b2d1-4697-b4a2-64b02795d46a-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208719" target="_blank" rel="bookmark"> 前端如何开发app </a> </h3> <div class="item-excerpt"> <p>前端开发APP的方法主要有：使用Web技术开发混合APP、使用React Native、使用Flutter、使用PWA、使用Ionic。 其中，使用React Native是目前最…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="5" target="_blank" href="https://devops.gitlab.cn/archives/author/jihu002" class="avatar j-user-card"> <img alt='jihu002' src='//g.izt6.com/avatar/30a11b25722c773805ac34c5f8e746ff?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/30a11b25722c773805ac34c5f8e746ff?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>jihu002</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208719#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208717" title="前端开发如何吹水" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发如何吹水" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/c4531964-f8e4-424c-83bb-bae648eeadfa-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208717" target="_blank" rel="bookmark"> 前端开发如何吹水 </a> </h3> <div class="item-excerpt"> <p>前端开发如何吹水？前端开发吹水的核心在于炫技、术语、趋势、团队协作、用户体验、未来发展。详细描述其中的炫技，展示自己的技术能力和项目经验是关键。你可以通过展示自己在React、Vu…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="6" target="_blank" href="https://devops.gitlab.cn/archives/author/jihu003" class="avatar j-user-card"> <img alt='极小狐' src='//g.izt6.com/avatar/c1ee834fe4d1152269faf20e02fbba54?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/c1ee834fe4d1152269faf20e02fbba54?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>极小狐</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208717#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208715" title="如何开发前端sdk" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何开发前端sdk" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/8d4e4a0d-6d3d-468e-b390-54ecc5807189-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208715" target="_blank" rel="bookmark"> 如何开发前端sdk </a> </h3> <div class="item-excerpt"> <p>要开发前端SDK，你需要明确目标、选择合适的技术栈、设计API、实现功能、编写文档、进行测试。其中，明确目标是最重要的一步，因为它决定了整个SDK的方向和范围。明确目标不仅包括你希…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="4" target="_blank" href="https://devops.gitlab.cn/archives/author/jihu001" class="avatar j-user-card"> <img alt='小小狐' src='//g.izt6.com/avatar/965a47dbee9076e7ae2954da2a5798bd?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/965a47dbee9076e7ae2954da2a5798bd?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>小小狐</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208715#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208711" title="前端开发如何设计前端页面" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发如何设计前端页面" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/dddf3fe5-3f45-4d8b-973e-8ed037cf1ffb-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208711" target="_blank" rel="bookmark"> 前端开发如何设计前端页面 </a> </h3> <div class="item-excerpt"> <p>前端开发设计前端页面的方法包括：用户体验设计、响应式布局、组件化设计、优化性能、跨浏览器兼容性。用户体验设计是最重要的一点，因为它直接影响用户对网站的满意度和使用黏性。用户体验设计…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="4" target="_blank" href="https://devops.gitlab.cn/archives/author/jihu001" class="avatar j-user-card"> <img alt='小小狐' src='//g.izt6.com/avatar/965a47dbee9076e7ae2954da2a5798bd?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/965a47dbee9076e7ae2954da2a5798bd?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>小小狐</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208711#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208710" title="公司如何开发前端" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="公司如何开发前端" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/f1b0aea8-c044-433f-98c8-d3ca2428bf66-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208710" target="_blank" rel="bookmark"> 公司如何开发前端 </a> </h3> <div class="item-excerpt"> <p>公司可以通过组建一个专业团队、选择合适的技术栈、使用敏捷开发方法、进行持续测试和优化、重视用户体验、使用协作工具来开发高效的前端。组建一个专业团队是关键，团队成员应包括前端开发工程…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="6" target="_blank" href="https://devops.gitlab.cn/archives/author/jihu003" class="avatar j-user-card"> <img alt='极小狐' src='//g.izt6.com/avatar/c1ee834fe4d1152269faf20e02fbba54?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/c1ee834fe4d1152269faf20e02fbba54?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>极小狐</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208710#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208709" title="前端开发如何创新" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发如何创新" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/84b1ad9c-75db-42f1-b74c-86bc0d8187e4-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208709" target="_blank" rel="bookmark"> 前端开发如何创新 </a> </h3> <div class="item-excerpt"> <p>前端开发如何创新？前端开发的创新可以通过使用新技术、改进用户体验、优化性能、利用自动化工具、增强可访问性来实现。使用新技术是其中的一项重要策略。随着JavaScript框架和库的发…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="5" target="_blank" href="https://devops.gitlab.cn/archives/author/jihu002" class="avatar j-user-card"> <img alt='jihu002' src='//g.izt6.com/avatar/30a11b25722c773805ac34c5f8e746ff?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/30a11b25722c773805ac34c5f8e746ff?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>jihu002</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208709#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://devops.gitlab.cn/archives/208707" title="前端开发如何创作" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发如何创作" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/c9ae3f5a-b4e2-4381-aae6-d7ed721a016c-480x300.webp" /> </a> <a class="item-category" href="https://devops.gitlab.cn/archives/category/qdkf" target="_blank">前端开发</a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://devops.gitlab.cn/archives/208707" target="_blank" rel="bookmark"> 前端开发如何创作 </a> </h3> <div class="item-excerpt"> <p>前端开发创作的关键在于：了解用户需求、选择合适的技术栈、设计良好的用户界面、编写高效的代码、进行不断测试和优化。 其中，了解用户需求是最为重要的一点。用户需求决定了整个项目的方向和…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="4" target="_blank" href="https://devops.gitlab.cn/archives/author/jihu001" class="avatar j-user-card"> <img alt='小小狐' src='//g.izt6.com/avatar/965a47dbee9076e7ae2954da2a5798bd?s=60&d=wavatar&r=g' srcset="//g.izt6.com/avatar/965a47dbee9076e7ae2954da2a5798bd?s=120&d=wavatar&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/> <span>小小狐</span> </a> </div> <span class="item-meta-li date">15小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/208707#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a> </div> </div> </div> </li> </ul> </div> <div id="comments" class="entry-comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">发表回复 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/archives/197866#respond" style="display:none;"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-close"></use></svg></i></a></small></h3><form action="https://devops.gitlab.cn/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">您的电子邮箱地址不会被公开。</span> <span class="required-field-message">必填项已用 <span class="required">*</span> 标注</span></p><div class="comment-form-comment"><textarea id="comment" name="comment" class="required" rows="4" placeholder="写下你的评论…"></textarea><div class="comment-form-smile j-smilies" data-target="#comment"><i class="wpcom-icon wi smile-icon"><svg aria-hidden="true"><use xlink:href="#wi-emotion"></use></svg></i></div></div><div class="comment-form-author"><label for="author"><span class="required">*</span>昵称：</label><input id="author" name="author" type="text" value="" size="30" class="required"></div> <div class="comment-form-email"><label for="email"><span class="required">*</span>邮箱：</label><input id="email" name="email" type="text" value="" class="required"></div> <div class="comment-form-url"><label for="url">网址：</label><input id="url" name="url" type="text" value="" size="30"></div> <label class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> 记住昵称、邮箱和网址，下次评论免输入</label> <div class="form-submit"><button name="submit" type="submit" id="submit" class="btn btn-primary btn-xs submit">提交</button> <input type='hidden' name='comment_post_ID' value='197866' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </div></form> </div><!-- #respond --> </div><!-- .comments-area --> </article> </main> <aside class="sidebar"> <div class="widget ez-toc"><div id="ez-toc-widget-container" class="ez-toc-widget-container ez-toc-v2_0_68_1 ez-toc-widget counter-hierarchy ez-toc-widget-container ez-toc-affix ez-toc-widget-direction"> <h3 class="widget-title"><span> <span class="ez-toc-title-container"> <style> #ezw_tco-3 .ez-toc-title{ font-size: 120%; font-weight: 500; color: #000; } #ezw_tco-3 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } </style> <span class="ez-toc-title-toggle"> <span class="ez-toc-title " >文章目录</span><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Widget Easy TOC toggle icon"><span style="border: 0;padding: 0;margin: 0;position: absolute !important;height: 1px;width: 1px;overflow: hidden;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);white-space: nowrap;">Toggle Table of Content</span><span class=""><span class="eztoc-hide">Toggle</span><span class="ez-toc-icon-toggle-span"></span></span></a> </span> </span> </span></h3> <nav> <ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#25E425B8258025E32580258125E725BB259325E6259E258425E5258C259625E625A0258725E725AD25BE" title="一、结构化标签">一、结构化标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#25E425BA258C25E32580258125E62596258725E6259C25AC25E625A025BC25E525BC258F25E5258C259625E625A0258725E725AD25BE" title="二、文本格式化标签">二、文本格式化标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#25E425B8258925E32580258125E825A125A825E5258D259525E625A0258725E725AD25BE" title="三、表单标签">三、表单标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#25E5259B259B25E32580258125E525AA259225E425BD259325E625A0258725E725AD25BE" title="四、媒体标签">四、媒体标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-5" href="#25E425BA259425E32580258125E9259325BE25E6258E25A525E52592258C25E525AF25BC25E8258825AA25E625A0258725E725AD25BE" title="五、链接和导航标签">五、链接和导航标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-6" href="#25E5258525AD25E32580258125E825A125A825E625A025BC25E625A0258725E725AD25BE" title="六、表格标签">六、表格标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-7" href="#25E425B8258325E32580258125E52585258325E6259525B025E6258D25AE25E625A0258725E725AD25BE" title="七、元数据标签">七、元数据标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-8" href="#25E5258525AB25E32580258125E82584259A25E6259C25AC25E52592258C25E6259525B025E6258D25AE25E625A0258725E725AD25BE" title="八、脚本和数据标签">八、脚本和数据标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-9" href="#25E7259B25B825E5258525B325E9259725AE25E725AD2594FAQs25EF25BC259A" title="相关问答FAQs：">相关问答FAQs：</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-10" href="#1_25E62596258725E625A125A325E725BB259325E6259E258425E625A0258725E725AD25BE" title="1. 文档结构标签">1. 文档结构标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-11" href="#2_25E62596258725E525AD259725E52592258C25E625AE25B525E8259025BD25E625A0258725E725AD25BE" title="2. 文字和段落标签">2. 文字和段落标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-12" href="#3_25E9259325BE25E6258E25A525E52592258C25E5259B25BE25E52583258F25E625A0258725E725AD25BE" title="3. 链接和图像标签">3. 链接和图像标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-13" href="#4_25E52588259725E825A125A825E625A0258725E725AD25BE" title="4. 列表标签">4. 列表标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-14" href="#5_25E825A125A825E625A025BC25E625A0258725E725AD25BE" title="5. 表格标签">5. 表格标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-15" href="#6_25E825A125A825E5258D259525E625A0258725E725AD25BE" title="6. 表单标签">6. 表单标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-16" href="#7_25E525B5258C25E525A5259725E52592258C25E825AF25AD25E425B9258925E5258C259625E625A0258725E725AD25BE" title="7. 嵌套和语义化标签">7. 嵌套和语义化标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-17" href="#8_25E525AA259225E425BD259325E625A0258725E725AD25BE" title="8. 媒体标签">8. 媒体标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-18" href="#9_25E52585258325E6259525B025E6258D25AE25E625A0258725E725AD25BE" title="9. 元数据标签">9. 元数据标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-19" href="#10_25E82584259A25E6259C25AC25E625A0258725E725AD25BE" title="10. 脚本标签">10. 脚本标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-20" href="#11_25E7258925B925E625AE258A25E525AD259725E725AC25A625E52592258C25E725AC25A625E5258F25B7" title="11. 特殊字符和符号">11. 特殊字符和符号</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-21" href="#12_25E425BD25BF25E7259425A8HTML525E7259A258425E6259625B025E625A0258725E725AD25BE" title="12. 使用HTML5的新标签">12. 使用HTML5的新标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-22" href="#25E525B0258F25E725BB2593" title="小结">小结</a></li></ul></li></ul></nav> </div> </div><div class="widget widget_lastest_products"> <ul class="p-list"> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208725"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何挑选前端开发" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/96d3aaf8-edaa-4ec2-9875-87625c8784e4-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208725" title="如何挑选前端开发"> 如何挑选前端开发 </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208722"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="MQTT前端如何开发" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/895c10d4-2db2-443d-999d-5cf35e6cfe3e-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208722" title="MQTT前端如何开发"> MQTT前端如何开发 </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208721"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发 如何转型" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/d5daf048-6dc2-45d8-bd42-0c1478374263-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208721" title="前端开发 如何转型"> 前端开发 如何转型 </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208719"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端如何开发app" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/c52efeab-b2d1-4697-b4a2-64b02795d46a-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208719" title="前端如何开发app"> 前端如何开发app </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208717"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发如何吹水" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/c4531964-f8e4-424c-83bb-bae648eeadfa-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208717" title="前端开发如何吹水"> 前端开发如何吹水 </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208715"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何开发前端sdk" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/8d4e4a0d-6d3d-468e-b390-54ecc5807189-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208715" title="如何开发前端sdk"> 如何开发前端sdk </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208711"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发如何设计前端页面" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/dddf3fe5-3f45-4d8b-973e-8ed037cf1ffb-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208711" title="前端开发如何设计前端页面"> 前端开发如何设计前端页面 </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208710"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="公司如何开发前端" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/f1b0aea8-c044-433f-98c8-d3ca2428bf66-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208710" title="公司如何开发前端"> 公司如何开发前端 </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208709"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发如何创新" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/84b1ad9c-75db-42f1-b74c-86bc0d8187e4-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208709" title="前端开发如何创新"> 前端开发如何创新 </a> </h4> </div> </li> <li class="col-xs-24 col-md-12 p-item"> <div class="p-item-wrap"> <a class="thumb" href="https://devops.gitlab.cn/archives/208707"> <img width="480" height="300" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="前端开发如何创作" decoding="async" data-original="https://cos.gitlab.cn/wp-content/uploads/2024/09/c9ae3f5a-b4e2-4381-aae6-d7ed721a016c-480x300.webp" /> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/208707" title="前端开发如何创作"> 前端开发如何创作 </a> </h4> </div> </li> </ul> </div><div class="widget widget_qapress_list"> <ul> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78236.html" title="沈阳软件后端开发多少钱"> 沈阳软件后端开发多少钱 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78235.html" title="微信小程序如何开发后端"> 微信小程序如何开发后端 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78232.html" title="如何做线上商城后端开发"> 如何做线上商城后端开发 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78230.html" title="如何用spring进行后端开发"> 如何用spring进行后端开发 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78227.html" title="后端开发语言都有哪些类型的软件"> 后端开发语言都有哪些类型的软件 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78217.html" title="蚌埠后端开发招聘岗位有哪些"> 蚌埠后端开发招聘岗位有哪些 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78216.html" title="后端开发包含哪些语言要素"> 后端开发包含哪些语言要素 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78215.html" title="网站开发后端有哪些"> 网站开发后端有哪些 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78214.html" title="证券后端开发方向有哪些"> 证券后端开发方向有哪些 </a> </li> <li> <a target="_blank" href="https://devops.gitlab.cn/qapress/78211.html" title="web前端后端怎么开发"> web前端后端怎么开发 </a> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-col-wrap footer-with-logo-icon"> <div class="footer-col footer-col-logo"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/logo.webp" alt="DevOps 技术大全"> </div> <div class="footer-col footer-col-copy"> <div class="copyright"> <p>极狐GitLab：<a href="https://dl.gitlab.cn/b7pubqxh">一体化DevOps 平台</a> <a href="https://dl.gitlab.cn/l3qdwumk">敏捷项目管理</a> <a href="https://dl.gitlab.cn/ukd74mj8">源代码托管</a> <a href="https://dl.gitlab.cn/bxt0orb4">CI/CD</a> <a href="https://dl.gitlab.cn/3y7198kb">安全合规</a> <a href="https://dl.gitlab.cn/kcel9kel">AIGC</a></p> <p>ICP：<a class="mitt-text beian-icp" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="nofollow noopener">鄂ICP备2021008419号-1</a><span class="vertical-divider mitt-text"> <a class="beian-gov" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42018502006137" target="_blank" rel="nofollow noopener"><img src="https://coderider.gitlab.cn/images/beian.png" width="20" height="20" /><span class="mitt-text">鄂公网安备42018502006137号</span></a></span></p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-wechat sns-icon"></i> <span style="background-image:url('https://cos.gitlab.cn/wp-content/uploads/2024/06/qrcode_for_gh_c43cb98908fc_430-2.jpg');"></span> </a> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-comment sns-icon"></i> <span style="background-image:url('https://cos.gitlab.cn/wp-content/uploads/2024/06/qrcode_for_gh_c43cb98908fc_430-2.jpg');"></span> </a> <a href="https://space.bilibili.com/2099384996?spm_id_from=333.1007.0.0" aria-label="icon"> <i class="wpcom-icon fa fa-video-camera sns-icon"></i> </a> <a href="https://weibo.com/u/7877143796" aria-label="icon"> <i class="wpcom-icon fa fa-weibo sns-icon"></i> </a> </div> </div> </div> </div> </footer> <div class="action action-style-1 action-color-1 action-pos-1" style="bottom:20%;"> <a class="action-item" href="https://dl.gitlab.cn/56ck6sd6"> <i class="wpcom-icon fa fa-folder-open action-item-icon"></i> <span>GitLab下载安装</span> </a> <div class="action-item"> <i class="wpcom-icon fa fa-wechat action-item-icon"></i> <span>联系站长</span> <div class="action-item-inner action-item-type-1"> <img class="action-item-img" src="https://cos.gitlab.cn/wp-content/uploads/2024/08/xiaomage-3.webp" alt="联系站长"> </div> </div> <div class="action-item j-share"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> <span>分享本页</span> </div> <div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i> <span>返回顶部</span> </div> </div> <script type="text/javascript" id="main-js-extra"> /* <![CDATA[ */ var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/devops.gitlab.cn\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/devops.gitlab.cn\/wp-content\/themes\/justnews","slide_speed":"5000","is_admin":"0","lang":"zh_CN","js_lang":{"share_to":"\u5206\u4eab\u5230:","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"share":"1","share_items":{"wechat":{"title":"\u5fae\u4fe1","icon":"wechat"},"mail":{"title":"\u90ae\u4ef6","icon":"mail-fill"},"weibo":{"title":"\u5fae\u535a","icon":"weibo"},"qq":{"title":"QQ\u597d\u53cb","icon":"qq"},"linkedin":{"title":"LinkedIn","icon":"linkedin"}},"lightbox":"1","post_id":"197866","user_card_height":"308","poster":{"notice":"\u8bf7\u300c\u70b9\u51fb\u4e0b\u8f7d\u300d\u6216\u300c\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u300d\u540e\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"484","fixed_sidebar":"1","dark_style":"0","font_url":"\/\/cos.gitlab.cn\/wp-content\/uploads\/wpcom\/fonts.f5a8b036905c9579.css","user_card":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/themes/justnews/js/main.js?ver=6.18.1" id="main-js"></script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/js/icons-2.7.19.js?ver=6.18.1" id="wpcom-icons-js"></script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/themes/justnews/themer/assets/js/comment-reply.js?ver=6.18.1" id="comment-reply-js"></script> <script type="text/javascript" id="wwa-js-extra"> /* <![CDATA[ */ var _wwa_js = {"ajaxurl":"https:\/\/devops.gitlab.cn\/wp-admin\/admin-ajax.php","post_id":"197866","rewarded":""}; /* ]]> */ </script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/plugins/justweapp/js/script.js?ver=3.14.2" id="wwa-js"></script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script> <script type="text/javascript" id="ez-toc-js-js-extra"> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<i class=\"ez-toc-toggle-el\"><\/i>","chamomile_theme_is_on":""}; /* ]]> */ </script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.68.1-1723614673" id="ez-toc-js-js"></script> <script type="text/javascript" id="wpcom-member-js-extra"> /* <![CDATA[ */ var _wpmx_js = {"ajaxurl":"https:\/\/devops.gitlab.cn\/wp-admin\/admin-ajax.php","plugin_url":"https:\/\/devops.gitlab.cn\/wp-content\/plugins\/wpcom-member\/","post_id":"197866","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https:\/\/devops.gitlab.cn\/wp-login.php","register_url":"https:\/\/devops.gitlab.cn\/wp-login.php?action=register","captcha_label":"\u70b9\u51fb\u8fdb\u884c\u4eba\u673a\u9a8c\u8bc1","captcha_verified":"\u9a8c\u8bc1\u6210\u529f","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"}}; /* ]]> */ </script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/plugins/wpcom-member/js/index.js?ver=1.5.2.1" id="wpcom-member-js"></script> <script type="text/javascript" id="QAPress-js-js-extra"> /* <![CDATA[ */ var QAPress_js = {"ajaxurl":"https:\/\/devops.gitlab.cn\/wp-admin\/admin-ajax.php","ajaxloading":"https:\/\/devops.gitlab.cn\/wp-content\/plugins\/qapress\/images\/loading.gif","max_upload_size":"2097152","compress_img_size":"1920","lang":{"delete":"\u5220\u9664","nocomment":"\u6682\u65e0\u56de\u590d","nocomment2":"\u6682\u65e0\u8bc4\u8bba","addcomment":"\u6211\u6765\u56de\u590d","submit":"\u53d1\u5e03","loading":"\u6b63\u5728\u52a0\u8f7d...","error1":"\u53c2\u6570\u9519\u8bef\uff0c\u8bf7\u91cd\u8bd5","error2":"\u8bf7\u6c42\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","confirm":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u5e76\u5c06\u540c\u65f6\u5220\u9664\u5f53\u524d\u56de\u590d\u7684\u8bc4\u8bba\u4fe1\u606f\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","confirm2":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","confirm3":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u5e76\u5c06\u540c\u65f6\u5220\u9664\u5f53\u524d\u95ee\u9898\u7684\u56de\u590d\u8bc4\u8bba\u4fe1\u606f\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","deleting":"\u6b63\u5728\u5220\u9664...","success":"\u64cd\u4f5c\u6210\u529f\uff01","denied":"\u65e0\u64cd\u4f5c\u6743\u9650\uff01","error3":"\u64cd\u4f5c\u5f02\u5e38\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","empty":"\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a","submitting":"\u6b63\u5728\u63d0\u4ea4...","success2":"\u63d0\u4ea4\u6210\u529f\uff01","ncomment":"0\u6761\u8bc4\u8bba","login":"\u62b1\u6b49\uff0c\u60a8\u9700\u8981\u767b\u5f55\u624d\u80fd\u8fdb\u884c\u56de\u590d","error4":"\u63d0\u4ea4\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","need_title":"\u8bf7\u8f93\u5165\u6807\u9898","need_cat":"\u8bf7\u9009\u62e9\u5206\u7c7b","need_content":"\u8bf7\u8f93\u5165\u5185\u5bb9","success3":"\u66f4\u65b0\u6210\u529f\uff01","success4":"\u53d1\u5e03\u6210\u529f\uff01","need_all":"\u6807\u9898\u3001\u5206\u7c7b\u548c\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a","length":"\u5185\u5bb9\u957f\u5ea6\u4e0d\u80fd\u5c11\u4e8e10\u4e2a\u5b57\u7b26","load_done":"\u56de\u590d\u5df2\u7ecf\u5168\u90e8\u52a0\u8f7d","load_fail":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","load_more":"\u70b9\u51fb\u52a0\u8f7d\u66f4\u591a","approve":"\u786e\u5b9a\u8981\u5c06\u5f53\u524d\u95ee\u9898\u8bbe\u7f6e\u4e3a\u5ba1\u6838\u901a\u8fc7\u5417\uff1f","end":"\u5df2\u7ecf\u5230\u5e95\u4e86","upload_fail":"\u56fe\u7247\u4e0a\u4f20\u51fa\u9519\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","file_types":"\u4ec5\u652f\u6301\u4e0a\u4f20jpg\u3001png\u3001gif\u683c\u5f0f\u7684\u56fe\u7247\u6587\u4ef6","file_size":"\u56fe\u7247\u5927\u5c0f\u4e0d\u80fd\u8d85\u8fc72M","uploading":"\u6b63\u5728\u4e0a\u4f20...","upload":"\u63d2\u5165\u56fe\u7247"}}; /* ]]> */ </script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/plugins/qapress/js/qa.js?ver=4.9.5" id="QAPress-js-js"></script> <script type="text/javascript" src="https://cos.gitlab.cn/wp-content/themes/justnews/js/wp-embed.js?ver=6.18.1" id="wp-embed-js"></script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "@id": "https://devops.gitlab.cn/archives/197866", "url": "https://devops.gitlab.cn/archives/197866", "headline": "前端开发基本标签有哪些类型", "image": "https://cos.gitlab.cn/wp-content/uploads/2024/09/d8099d65-56a8-454d-bdb5-49ca9a147c00.webp", "description": "前端开发基本标签有多种类型，如结构化标签、文本格式化标签、表单标签、媒体标签等。结构化标签包括HTML文档的基本结构，例如、、，它们帮助定义网页的整体框架。文本格式化标签，如 、 …", "datePublished": "2024-09-05T22:12:59+08:00", "dateModified": "2024-09-05T22:13:00+08:00", "author": {"@type":"Person","name":"极小狐","url":"https://devops.gitlab.cn/archives/author/jihu003","image":"//g.izt6.com/avatar/c1ee834fe4d1152269faf20e02fbba54?s=96&d=wavatar&r=g"} } </script> </body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Page Caching using Disk: Enhanced Content Delivery Network via cos.gitlab.cn Served from: devops.gitlab.cn @ 2024-09-20 11:55:25 by W3 Total Cache -->
