投稿
  1. DevOps 技术大全首页
  2. 前端开发

前端开发都有哪些标签

jihu002 • • 前端开发

前端开发都有哪些标签

前端开发常用的标签包括HTML、CSS、JavaScript等，其中HTML用来定义页面的结构和内容，CSS用于页面样式的设计，JavaScript则用于实现页面的动态效果和交互功能。HTML标签是前端开发的基础，定义了网页的基本元素，如标题、段落、图片、链接等。CSS标签则通过选择器、属性和值来控制网页的视觉效果，包括颜色、字体、布局等。JavaScript标签可以嵌入HTML文档中，通过事件处理、DOM操作等方式实现网页的动态功能。接下来，让我们深入探讨这些标签的具体使用和功能。

一、HTML标签

HTML标签是构成网页的基本元素，它们用来定义网页内容的结构和类型。以下是一些常见的HTML标签：

  1. <!DOCTYPE>：声明文档类型，告诉浏览器用什么版本的HTML解析页面。
  2. ：定义整个HTML文档。
  3. ：包含文档的元数据，如标题、字符集、样式表等。
  4. </strong>：定义文档的标题，显示在浏览器标签栏中。</li> <li><strong><meta></strong>：提供文档的元信息，如字符集、作者、描述等。</li> <li><strong><link></strong>：链接外部资源，如CSS文件。</li> <li><strong><script></strong>：嵌入或引用JavaScript代码。</li> <li><strong><br /> <style></strong>：嵌入CSS样式。</li> </p> <li><strong><body></strong>：定义文档的主体内容。</li> <li><strong><br /> <header></strong>、<strong></p> <nav></strong>、<strong></p> <section></strong>、<strong></p> <article></strong>、<strong></p> <aside></strong>、<strong></p> <footer></strong>：HTML5新增的语义化标签，用于定义不同的页面结构部分。</li> </p> <li><strong><br /> <h1></strong>到<strong></p> <h6></strong>：定义标题，<strong></p> <h1></strong>为最高级别标题，<strong></p> <h6></strong>为最低级别。</li> </p> <li><strong> <p></strong>：定义段落。</li></p> <li><strong><a></strong>：定义超链接。</li> <li><strong><img></strong>：定义图像。</li> <li><strong> <ul></strong>、<strong></p> <ol></strong>、<strong></p> <li></strong>：定义无序列表、有序列表和列表项。</li> <li><strong><br /> <table></strong>、<strong></p> <tr></strong>、<strong></p> <td></strong>、<strong></p> <th></strong>：定义表格、表格行、单元格和表头。</li> </p> <li><strong><br /> <form></strong>、<strong><input></strong>、<strong><label></strong>、<strong><button></strong>：定义表单及其控件。</li> </p> </ol> <p><p>每个HTML标签都有其特定的用途和属性，可以通过属性进一步控制其行为和外观。例如，<strong><img></strong>标签的<strong>src</strong>属性用来指定图像的路径，<strong>alt</strong>属性用来提供图像的替代文本。<strong><a></strong>标签的<strong>href</strong>属性用来指定链接的目标地址。</p> </p> <p><h2><span class="ez-toc-section" id="25E425BA258C25E325802581CSS25E625A0258725E725AD25BE"></span>二、CSS标签<span class="ez-toc-section-end"></span></h2></p> <p><p><strong>CSS标签</strong>，也称为CSS规则，用于控制网页的样式和布局。CSS规则由选择器、属性和值组成。以下是一些常见的CSS规则和属性：</p> </p> <ol> <li> <p><strong>选择器</strong>：用于选择需要应用样式的HTML元素。常见的选择器包括：</p> </p> <ul> <li><strong>元素选择器</strong>：选择所有指定的HTML元素，例如<strong>p</strong>选择所有段落。</li> <li><strong>类选择器</strong>：选择所有具有指定类的元素，使用<strong>.classname</strong>语法。</li> <li><strong>ID选择器</strong>：选择具有指定ID的元素，使用<strong>#idname</strong>语法。</li> <li><strong>属性选择器</strong>：选择具有指定属性的元素，使用<strong>[attribute]</strong>语法。</li> <li><strong>伪类选择器</strong>：选择特定状态的元素，如<strong>:hover</strong>选择鼠标悬停的元素。</li> <li><strong>组合选择器</strong>：组合多个选择器，如<strong>div p</strong>选择所有位于<strong> <div></strong>内的段落。</li> </p> </ul> </li> <li> <p><strong>属性和值</strong>：定义样式的具体内容。以下是一些常见的CSS属性：</p> </p> <ul> <li><strong>color</strong>：设置文本颜色。</li> <li><strong>background-color</strong>：设置背景颜色。</li> <li><strong>font-size</strong>：设置字体大小。</li> <li><strong>font-family</strong>：设置字体系列。</li> <li><strong>margin</strong>：设置外边距。</li> <li><strong>padding</strong>：设置内边距。</li> <li><strong>border</strong>：设置边框。</li> <li><strong>width</strong>和<strong>height</strong>：设置元素的宽度和高度。</li> <li><strong>display</strong>：设置元素的显示类型，如<strong>block</strong>、<strong>inline</strong>、<strong>none</strong>等。</li> <li><strong>position</strong>：设置元素的定位类型，如<strong>static</strong>、<strong>relative</strong>、<strong>absolute</strong>、<strong>fixed</strong>等。</li> <li><strong>float</strong>：设置元素的浮动方式。</li> <li><strong>flex</strong>：设置弹性盒布局模型。</li> </ul> </li> </ol> <p><p>CSS还支持使用媒体查询（<strong>@media</strong>）来为不同的设备和屏幕尺寸定义不同的样式。媒体查询可以根据屏幕的宽度、高度、分辨率等条件应用不同的CSS规则，从而实现响应式设计。</p> </p> <p><h2><span class="ez-toc-section" id="25E425B8258925E325802581JavaScript25E625A0258725E725AD25BE"></span>三、JavaScript标签<span class="ez-toc-section-end"></span></h2></p> <p><p><strong>JavaScript标签</strong>用于在网页中嵌入和执行JavaScript代码。JavaScript是一种脚本语言，用于创建动态和交互式的网页。以下是一些常见的JavaScript功能和用法：</p> </p> <ol> <li> <p><strong>事件处理</strong>：JavaScript可以响应用户的操作，如点击、悬停、输入等事件。常见的事件处理方法包括：</p> </p> <ul> <li><strong>onclick</strong>：当元素被点击时执行。</li> <li><strong>onmouseover</strong>：当鼠标悬停在元素上时执行。</li> <li><strong>onchange</strong>：当表单控件的值发生变化时执行。</li> <li><strong>onsubmit</strong>：当表单提交时执行。</li> </ul> </li> <li> <p><strong>DOM操作</strong>：JavaScript可以访问和修改网页的文档对象模型（DOM），从而动态地改变网页内容和结构。常见的DOM操作方法包括：</p> </p> <ul> <li><strong>document.getElementById()</strong>：通过ID获取元素。</li> <li><strong>document.querySelector()</strong>：通过选择器获取元素。</li> <li><strong>element.innerHTML</strong>：获取或设置元素的HTML内容。</li> <li><strong>element.style</strong>：获取或设置元素的样式。</li> <li><strong>element.classList</strong>：操作元素的类列表，如<strong>add</strong>、<strong>remove</strong>、<strong>toggle</strong>等方法。</li> </ul> </li> <li> <p><strong>表单验证</strong>：JavaScript可以在客户端进行表单输入的验证，减少服务器负担，提高用户体验。例如，检查输入是否为空、格式是否正确等。</p> </p> </li> <li> <p><strong>异步请求</strong>：JavaScript可以使用<strong>XMLHttpRequest</strong>对象或<strong>fetch</strong> API发送异步请求，从服务器获取数据，而无需刷新页面。这在实现单页应用（SPA）时尤为重要。</p> </p> </li> <li> <p><strong>库和框架</strong>：为了简化JavaScript的开发过程，许多库和框架应运而生，如<strong>jQuery</strong>、<strong>React</strong>、<strong>Vue</strong>、<strong>Angular</strong>等。这些工具提供了丰富的功能和组件，使开发更加高效。</p> </p> </li> </ol> <p><p>JavaScript代码通常放置在<strong><script></strong>标签中，可以嵌入在HTML文档的<strong><head></strong>或<strong><body></strong>部分，或者通过<strong>src</strong>属性引用外部JavaScript文件。</p> </p> <p><h2><span class="ez-toc-section" id="25E5259B259B25E325802581HTML525E6259625B025E525A2259E25E625A0258725E725AD25BE"></span>四、HTML5新增标签<span class="ez-toc-section-end"></span></h2></p> <p><p><strong>HTML5新增标签</strong>带来了更多的语义化元素，使网页结构更加清晰和易于理解。以下是一些常见的HTML5新增标签：</p> </p> <ol> <li><strong><br /> <header></strong>：定义文档或节的头部，通常包含标题、导航链接等。</li> </p> <li><strong><br /> <nav></strong>：定义导航链接的部分。</li> </p> <li><strong><br /> <section></strong>：定义文档中的节，用于将内容分组。</li> </p> <li><strong><br /> <article></strong>：定义独立的内容块，如博客文章、新闻报道等。</li> </p> <li><strong><br /> <aside></strong>：定义与内容相关的侧边栏。</li> </p> <li><strong><br /> <footer></strong>：定义文档或节的底部，通常包含版权信息、联系信息等。</li> </p> <li><strong><br /> <figure></strong>和<strong><figcaption></strong>：定义图像或图表及其说明文字。</li> </p> <li><strong><main></strong>：定义文档的主要内容部分。</li> <li><strong><mark></strong>：定义重要的文本，通常以高亮显示。</li> <li><strong><time></strong>：定义时间或日期。</li> </ol> <p><p>这些标签不仅提高了文档的可读性和可维护性，还增强了搜索引擎优化（SEO），因为搜索引擎可以更好地理解网页的结构和内容。</p> </p> <p><h2><span class="ez-toc-section" id="25E425BA259425E325802581CSS325E6259625B025E525A2259E25E7258925B925E6258025A7"></span>五、CSS3新增特性<span class="ez-toc-section-end"></span></h2></p> <p><p><strong>CSS3新增特性</strong>带来了许多强大的功能，使网页设计更加灵活和丰富。以下是一些常见的CSS3新增特性：</p> </p> <ol> <li><strong>选择器扩展</strong>：CSS3新增了许多选择器，如<strong>:nth-child()</strong>、<strong>:not()</strong>、<strong>:first-of-type</strong>等，使选择元素更加灵活。</li> <li><strong>媒体查询</strong>：允许根据设备特性应用不同的样式，实现响应式设计。</li> <li><strong>变换</strong>：使用<strong>transform</strong>属性实现元素的旋转、缩放、平移和倾斜。</li> <li><strong>过渡</strong>：使用<strong>transition</strong>属性实现元素样式的平滑变化。</li> <li><strong>动画</strong>：使用<strong>@keyframes</strong>和<strong>animation</strong>属性创建复杂的动画效果。</li> <li><strong>弹性盒模型</strong>：使用<strong>flexbox</strong>布局实现复杂的页面布局。</li> <li><strong>网格布局</strong>：使用<strong>grid</strong>布局创建二维的网格布局。</li> <li><strong>阴影</strong>：使用<strong>box-shadow</strong>和<strong>text-shadow</strong>属性添加元素的阴影效果。</li> <li><strong>边框图像</strong>：使用<strong>border-image</strong>属性为元素添加图像边框。</li> <li><strong>多背景</strong>：使用<strong>background</strong>属性为元素添加多个背景图像。</li> </ol> <p><p>这些新特性不仅简化了CSS代码，还提高了网页的视觉效果和用户体验。</p> </p> <p><h2><span class="ez-toc-section" id="25E5258525AD25E325802581JavaScript_ES625E6259625B025E525A2259E25E7258925B925E6258025A7"></span>六、JavaScript ES6新增特性<span class="ez-toc-section-end"></span></h2></p> <p><p><strong>JavaScript ES6新增特性</strong>使JavaScript语言更加现代化和强大，以下是一些常见的ES6新增特性：</p> </p> <ol> <li><strong>let和const</strong>：引入了块级作用域的变量声明方式，替代传统的var声明。</li> <li><strong>箭头函数</strong>：使用更简洁的语法定义函数，并且不绑定this。</li> <li><strong>模板字符串</strong>：使用反引号定义字符串，支持多行字符串和插值表达式。</li> <li><strong>解构赋值</strong>：从数组或对象中提取值，并赋值给变量。</li> <li><strong>默认参数</strong>：为函数参数设置默认值。</li> <li><strong>展开运算符</strong>：使用<strong>...</strong>展开数组或对象。</li> <li><strong>类</strong>：使用class关键字定义类，支持继承和方法定义。</li> <li><strong>模块化</strong>：使用<strong>import</strong>和<strong>export</strong>关键字实现模块的导入和导出。</li> <li><strong>Promise</strong>：用于处理异步操作，提供更清晰的链式调用。</li> <li><strong>Symbol</strong>：引入了一种新的原始数据类型，用于创建独一无二的标识符。</li> </ol> <p><p>这些新特性不仅提高了代码的可读性和可维护性，还增强了JavaScript语言的表达能力。</p> </p> <p><h2><span class="ez-toc-section" id="25E425B8258325E32580258125E52589258D25E725AB25AF25E525BC258025E5258F259125E525B725A525E5258525B725E52592258C25E625A1258625E6259E25B6"></span>七、前端开发工具和框架<span class="ez-toc-section-end"></span></h2></p> <p><p><strong>前端开发工具和框架</strong>可以极大地提高开发效率和代码质量。以下是一些常见的前端开发工具和框架：</p> </p> <ol> <li><strong>文本编辑器和IDE</strong>：如Visual Studio Code、Sublime Text、Atom、WebStorm等。</li> <li><strong>版本控制系统</strong>：如Git，用于代码的版本管理和协作开发。</li> <li><strong>包管理器</strong>：如npm、Yarn，用于管理项目依赖。</li> <li><strong>构建工具</strong>：如Webpack、Gulp、Grunt，用于打包、压缩、编译代码。</li> <li><strong>CSS框架</strong>：如Bootstrap、Foundation，用于快速搭建响应式网页。</li> <li><strong>JavaScript库和框架</strong>：如jQuery、React、Vue、Angular，用于创建复杂的前端应用。</li> <li><strong>测试工具</strong>：如Jest、Mocha、Chai、Cypress，用于前端代码的单元测试和集成测试。</li> <li><strong>代码质量工具</strong>：如ESLint、Prettier，用于代码的静态分析和格式化。</li> <li><strong>浏览器开发者工具</strong>：如Chrome DevTools、Firefox Developer Tools，用于调试和分析网页。</li> </ol> <p><p>使用这些工具和框架可以大大简化开发过程，提高代码的质量和可维护性。</p> </p> <p><h2><span class="ez-toc-section" id="25E5258525AB25E32580258125E52589258D25E725AB25AF25E525BC258025E5258F259125E6259C258025E425BD25B325E525AE259E25E825B725B5"></span>八、前端开发最佳实践<span class="ez-toc-section-end"></span></h2></p> <p><p><strong>前端开发最佳实践</strong>可以帮助开发者编写高质量、可维护的代码。以下是一些常见的前端开发最佳实践：</p> </p> <ol> <li><strong>语义化HTML</strong>：使用适当的HTML标签，增强文档的可读性和SEO。</li> <li><strong>模块化CSS</strong>：将CSS代码按功能模块划分，避免全局样式冲突。</li> <li><strong>使用CSS预处理器</strong>：如Sass、Less，提高CSS代码的可维护性和复用性。</li> <li><strong>响应式设计</strong>：使用媒体查询、弹性盒模型、网格布局等技术适配不同设备和屏幕尺寸。</li> <li><strong>性能优化</strong>：如压缩代码、使用CDN、懒加载、减少HTTP请求次数等，提高网页加载速度。</li> <li><strong>无障碍设计</strong>：考虑残障用户的需求，如使用ARIA标签、提供键盘导航等。</li> <li><strong>代码规范</strong>：遵循一致的代码风格和命名约定，提高代码的可读性和团队协作效率。</li> <li><strong>版本控制</strong>：使用Git等版本控制系统管理代码，记录变更历史，方便协作开发。</li> <li><strong>自动化测试</strong>：编写单元测试、集成测试，保证代码的正确性和稳定性。</li> <li><strong>持续集成和部署</strong>：使用CI/CD工具，如Jenkins、Travis CI，实现代码的自动化构建和部署。</li> </ol> <p><p>这些最佳实践可以帮助开发者编写高质量、可维护的前端代码，提高开发效率和用户体验。</p> </p> <p><h2><span class="ez-toc-section" id="25E425B9259D25E32580258125E52589258D25E725AB25AF25E525BC258025E5258F259125E825B6258B25E5258A25BF"></span>九、前端开发趋势<span class="ez-toc-section-end"></span></h2></p> <p><p><strong>前端开发趋势</strong>不断演变，以下是一些当前和未来的前端开发趋势：</p> </p> <ol> <li><strong>单页应用（SPA）</strong>：使用React、Vue、Angular等框架构建高性能、用户体验良好的单页应用。</li> <li><strong>渐进式Web应用（PWA）</strong>：结合Web和原生应用的优点，提高网页的性能和用户体验。</li> <li><strong>静态站点生成器</strong>：如Gatsby、Hugo，用于生成静态网页，提高网页的性能和SEO。</li> <li><strong>无服务器架构</strong>：使用Serverless框架，减少运维工作，专注于业务逻辑开发。</li> <li><strong>微前端</strong>：将前端应用拆分为多个独立的微应用，提高应用的可维护性和扩展性。</li> <li><strong>Web组件</strong>：使用原生Web组件技术，如Custom Elements、Shadow DOM，实现组件化开发。</li> <li><strong>图像优化</strong>：使用WebP、AVIF等新格式，提高图像的压缩率和加载速度。</li> <li><strong>深度学习和AI</strong>：将深度学习和AI技术应用于前端开发，如图像识别、自然语言处理等。</li> <li><strong>WebAssembly</strong>：使用WebAssembly技术，提高Web应用的性能，支持更多编程语言。</li> <li><strong>边缘计算</strong>：将计算任务分布到边缘节点，提高Web应用的响应速度和可靠性。</li> </ol> <p><p>这些趋势反映了前端开发领域的最新动向和技术进步，开发者应保持学习和探索，紧跟潮流，提高自身的技术水平。</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>在前端开发中，标签是构建网页和用户界面的基础。HTML（超文本标记语言）是前端开发中的核心语言，它通过各种标签来定义网页的结构和内容。以下是一些常见的前端开发标签，帮助你更好地理解它们的用途和功能。</p> <h3><span class="ez-toc-section" id="1_25E425BB258025E425B9258825E6259825AFHTML25E625A0258725E725AD25BE25EF25BC259F"></span><strong>1. 什么是HTML标签？</strong><span class="ez-toc-section-end"></span></h3> <p>HTML标签是构成网页的基本元素，它们通常以尖括号包围的形式出现。标签分为两种类型：块级标签和行内标签。块级标签通常用于定义页面的结构，而行内标签则用于格式化文本或嵌入其他元素。</p> <p><strong>块级标签</strong>包括：</p> <ul> <li><code><div></code>：用于创建一个块级容器，常用于布局。</li> <li><code><header></code>：定义网页的头部区域，通常包含导航和标题。</li> <li><code><footer></code>：定义网页的底部区域，通常包含版权信息和联系信息。</li> <li><code><article></code>：表示独立的内容块，例如一篇文章或博客帖子。</li> <li><code><section></code>：定义文档中的一个部分，常用于结构化内容。</li> </ul> <p><strong>行内标签</strong>包括：</p> <ul> <li><code><span></code>：用于在文本中定义一个行内元素，常用于样式应用。</li> <li><code><a></code>：定义超链接，用于链接到其他网页或资源。</li> <li><code><strong></code>：表示重要的文本，通常以加粗形式显示。</li> <li><code><em></code>：表示强调的文本，通常以斜体形式显示。</li> </ul> <h3><span class="ez-toc-section" id="2_25E525B825B825E825A7258125E7259A258425E825A125A825E5258D259525E625A0258725E725AD25BE25E6259C258925E5259325AA25E425BA259B25EF25BC259F"></span><strong>2. 常见的表单标签有哪些？</strong><span class="ez-toc-section-end"></span></h3> <p>表单标签在前端开发中至关重要，因为它们使用户能够与网页进行交互。以下是一些常见的表单标签及其用途：</p> <ul> <li><code><form></code>：创建一个表单，包含所有交互元素。</li> <li><code><input></code>：定义输入字段，可以是文本框、复选框、单选按钮等。</li> <li><code><label></code>：为表单控件定义标签，增强可访问性。</li> <li><code><textarea></code>：创建多行文本输入区域，适用于长文本输入。</li> <li><code><select></code>：创建下拉菜单，允许用户从多个选项中进行选择。</li> <li><code><button></code>：定义一个可点击的按钮，用于提交表单或执行其他操作。</li> </ul> <p>使用表单标签时，需确保适当使用<code>name</code>属性，以便在表单提交时正确识别各个字段。还可以通过JavaScript增强表单的功能，如验证用户输入、动态添加字段等。</p> <h3><span class="ez-toc-section" id="3_25E525A6258225E425BD259525E425BD25BF25E7259425A825E525A4259A25E525AA259225E425BD259325E625A0258725E725AD25BE25EF25BC259F"></span><strong>3. 如何使用多媒体标签？</strong><span class="ez-toc-section-end"></span></h3> <p>多媒体标签在现代网页设计中变得越来越重要，它们使得网页更具吸引力和互动性。以下是一些常用的多媒体标签：</p> <ul> <li><code><img></code>：用于在网页中插入图像。通过<code>src</code>属性指定图像的路径，<code>alt</code>属性提供图像的替代文本，以提高可访问性。</li> <li><code><audio></code>：用于嵌入音频文件，支持多种音频格式。可以使用<code>controls</code>属性显示播放控件。</li> <li><code><video></code>：用于嵌入视频文件，支持多种视频格式，同样可以使用<code>controls</code>属性提供播放控件。</li> <li><code><iframe></code>：用于嵌入其他网页或内容，例如地图、视频等。</li> </ul> <p>这些多媒体标签可以通过CSS进行样式调整，以确保它们在各种设备上的显示效果良好。此外，使用JavaScript可以实现更复杂的功能，例如音频播放控制、视频全屏播放等。</p> <h3><span class="ez-toc-section" id="4_25E525A6258225E425BD259525E425BD25BF25E7259425A825E825AF25AD25E425B9258925E5258C259625E625A0258725E725AD25BE25E6258F259025E5258D2587SEO25E62595258825E6259E259C25EF25BC259F"></span><strong>4. 如何使用语义化标签提升SEO效果？</strong><span class="ez-toc-section-end"></span></h3> <p>语义化标签不仅有助于提高网页的可读性，还有助于搜索引擎优化（SEO）。语义化标签为搜索引擎提供了更多关于内容的信息，从而提高网页在搜索结果中的排名。以下是一些常见的语义化标签：</p> <ul> <li><code><header></code>、<code><footer></code>、<code><nav></code>、<code><article></code>、<code><section></code>等，这些标签能明确内容的结构和功能。</li> <li><code><aside></code>：表示与主要内容相关的附加信息，通常用于侧边栏。</li> <li><code><time></code>：表示时间或日期，帮助搜索引擎更好地理解内容的时间关联性。</li> </ul> <p>通过合理使用语义化标签，不仅使网页代码更易于维护，也提升了用户体验。此外，良好的语义结构可以帮助搜索引擎更好地抓取和索引网页内容。</p> <h3><span class="ez-toc-section" id="5_25E525A6258225E425BD259525E92580258925E6258B25A925E52590258825E92580258225E7259A258425E625A0258725E725AD25BE25E425BB25A525E525A2259E25E525BC25BA25E5258F25AF25E825AE25BF25E9259725AE25E6258025A725EF25BC259F"></span><strong>5. 如何选择合适的标签以增强可访问性？</strong><span class="ez-toc-section-end"></span></h3> <p>在前端开发中，增强可访问性是重要的考量。选择合适的标签可以帮助所有用户，包括使用辅助技术的用户，顺利访问网页。以下是一些建议：</p> <ul> <li>使用<code><label></code>标签为表单控件提供描述，确保屏幕阅读器可以正确读取。</li> <li>使用<code><alt></code>属性为图像提供替代文本，以帮助视觉障碍者理解图像内容。</li> <li>使用ARIA（可访问性丰富互联网应用）属性，增强动态内容的可访问性。</li> </ul> <p>确保网页在不同设备和浏览器中均能良好展示，避免使用过时或不推荐的标签。合理选择和使用标签，不仅能提升用户体验，也能提高网页的可访问性。</p> <h3><span class="ez-toc-section" id="6_25E525A6258225E425BD259525E5258825A925E7259425A8CSS25E52592258CJavaScript25E425B8258E25E625A0258725E725AD25BE25E725BB259325E52590258825E6258F259025E5258D258725E7259425A825E6258825B725E425BD259325E925AA258C25EF25BC259F"></span><strong>6. 如何利用CSS和JavaScript与标签结合提升用户体验？</strong><span class="ez-toc-section-end"></span></h3> <p>CSS和JavaScript是前端开发中不可或缺的工具，它们可以与HTML标签结合使用，以创建更加动态和响应式的用户体验。</p> <p><strong>使用CSS</strong>：</p> <ul> <li>可以通过CSS选择器针对特定标签进行样式应用，提升网页的视觉效果。</li> <li>媒体查询可以帮助实现响应式设计，使网页在不同设备上自适应。</li> </ul> <p><strong>使用JavaScript</strong>：</p> <ul> <li>可以通过JavaScript为标签添加事件监听器，以实现用户交互效果，如按钮点击、表单提交等。</li> <li>AJAX技术可以动态加载内容，而无需刷新整个页面，提高用户体验。</li> </ul> <p>结合这两种技术，可以创建更为复杂的功能，如模态窗口、滑动菜单等，提升用户的互动感和参与度。</p> <h3><span class="ez-toc-section" id="25E6258025BB25E725BB2593"></span><strong>总结</strong><span class="ez-toc-section-end"></span></h3> <p>前端开发中的标签种类繁多，各种标签在网页构建中扮演着不同的角色。了解这些标签的特点及其用途，有助于提升网页的结构性、可访问性和用户体验。在实际开发中，根据需求合理选择和组合标签，并结合CSS和JavaScript进行优化，可以创造出更具吸引力的网页和应用。</p> <div class="entry-copyright"><p>原创文章，作者：jihu002，如若转载，请注明出处：https://devops.gitlab.cn/archives/188710</p></div> </div> <div class="entry-tag"></div> <div class="entry-action"> <div class="btn-zan" data-id="188710"><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="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 class="author-name">jihu002</span> </a> </div> <div class="entry-bar-info"> <div class="info-item meta"> <a class="meta-item j-heart" href="javascript:;" data-id="188710"><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="188710" data-qrcode="https://devops.gitlab.cn/archives/188710"><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/08/2ddb1846-b455-4a85-b0f2-6bc15fb1bfa0-480x300.webp"> <a href="https://devops.gitlab.cn/archives/188707" 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">7小时前</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/08/1807b06e-8551-4310-a598-a246d4e6efdd-480x300.webp"> <a href="https://devops.gitlab.cn/archives/188712" 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">7小时前</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/188949" title="前端开发哪些企业用" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/d6ce1280-74ae-4e90-ba16-bb640e2b225e-480x300.webp" width="480" height="300" alt="前端开发哪些企业用"> </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/188949" target="_blank" rel="bookmark"> 前端开发哪些企业用 </a> </h3> <div class="item-excerpt"> <p>前端开发在许多企业中被广泛应用，包括科技公司、电子商务平台、金融机构、媒体和娱乐公司、教育机构、政府部门等。在科技公司中，前端开发是核心技能之一，像Google、Facebook和…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188949#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/188947" title="前端开发有哪些分类" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/4adc28c0-2669-4936-8151-63372f962d90-480x300.webp" width="480" height="300" alt="前端开发有哪些分类"> </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/188947" target="_blank" rel="bookmark"> 前端开发有哪些分类 </a> </h3> <div class="item-excerpt"> <p>前端开发主要分为用户界面开发、用户体验设计、前端架构设计、前端性能优化、前端安全。用户界面开发侧重于页面的布局、样式和交互效果，常使用HTML、CSS和JavaScript等技术。…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188947#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/188944" title="开发前端有哪些技术" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/be2e2e53-90bb-4f71-b7c7-86ba9d71432e-480x300.webp" width="480" height="300" alt="开发前端有哪些技术"> </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/188944" target="_blank" rel="bookmark"> 开发前端有哪些技术 </a> </h3> <div class="item-excerpt"> <p>开发前端技术包括HTML、CSS、JavaScript、前端框架（如React、Vue、Angular）、构建工具（如Webpack、Gulp）、预处理器（如Sass、Less）、…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188944#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/188943" title="前端开发认证有哪些" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/6cdbdb22-3c57-41af-ab06-55c3217b8d46-480x300.webp" width="480" height="300" alt="前端开发认证有哪些"> </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/188943" target="_blank" rel="bookmark"> 前端开发认证有哪些 </a> </h3> <div class="item-excerpt"> <p>前端开发认证有：Certified Web Developer（CWD）、Microsoft Certified: Azure Developer Associate、Google…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188943#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/188940" title="前端开发避免哪些问题" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/a440e126-ada2-4a40-9fc6-a7fe8779018d-480x300.webp" width="480" height="300" alt="前端开发避免哪些问题"> </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/188940" 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="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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188940#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/188939" title="前端开发都有哪些部分" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/446d903f-18ae-46e4-bbbf-367907aa6c7f-480x300.webp" width="480" height="300" alt="前端开发都有哪些部分"> </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/188939" target="_blank" rel="bookmark"> 前端开发都有哪些部分 </a> </h3> <div class="item-excerpt"> <p>前端开发主要包括用户界面设计、用户体验设计、HTML/CSS/JavaScript开发、响应式设计、跨浏览器兼容性、性能优化、版本控制和调试工具等方面。用户界面设计涉及创建视觉元素…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188939#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/188936" title="前端开发对象有哪些" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/d173ed79-22c3-4e72-80c0-12ebf6585bcd-480x300.webp" width="480" height="300" alt="前端开发对象有哪些"> </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/188936" target="_blank" rel="bookmark"> 前端开发对象有哪些 </a> </h3> <div class="item-excerpt"> <p>前端开发对象包括：HTML、CSS、JavaScript、框架和库、API、工具和开发环境。这些都是前端开发过程中不可或缺的部分。HTML是构建网页的基础语言，它定义了网页的结构和…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188936#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/188935" title="前端开发哪些是重点" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/dfc1a49f-2bb8-483e-8b82-c90dd2aa20b8-480x300.webp" width="480" height="300" alt="前端开发哪些是重点"> </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/188935" target="_blank" rel="bookmark"> 前端开发哪些是重点 </a> </h3> <div class="item-excerpt"> <p>前端开发的重点包括：HTML、CSS、JavaScript、响应式设计、性能优化、跨浏览器兼容性、开发工具、框架和库、可访问性、SEO。其中，JavaScript是前端开发中非常重…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188935#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/188933" title="前端开发需要哪些内容" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/b1c85f47-cc71-4d61-ba2a-7a19382a87cd-480x300.webp" width="480" height="300" alt="前端开发需要哪些内容"> </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/188933" target="_blank" rel="bookmark"> 前端开发需要哪些内容 </a> </h3> <div class="item-excerpt"> <p>前端开发需要掌握HTML、CSS、JavaScript、版本控制、前端框架、响应式设计、性能优化、浏览器兼容性、开发工具和调试技能、用户体验和可访问性。 首先，HTML是前端开发的…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188933#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/188930" title="前端开发考哪些证" target="_blank" rel="bookmark"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/0b552080-dcdd-4067-8951-fdb988ccab39-480x300.webp" width="480" height="300" alt="前端开发考哪些证"> </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/188930" target="_blank" rel="bookmark"> 前端开发考哪些证 </a> </h3> <div class="item-excerpt"> <p>前端开发考哪些证？前端开发人员可以考取的证书主要有HTML5应用开发工程师认证、W3C认证、Adobe认证、AWS认证、Google认证、Microsoft认证、PMP认证等。其中…</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">7小时前</span> <div class="item-meta-right"> <a class="item-meta-li comments" href="https://devops.gitlab.cn/archives/188930#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/188710#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='188710' 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="#25E425B8258025E325802581HTML25E625A0258725E725AD25BE" title="一、HTML标签">一、HTML标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#25E425BA258C25E325802581CSS25E625A0258725E725AD25BE" title="二、CSS标签">二、CSS标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#25E425B8258925E325802581JavaScript25E625A0258725E725AD25BE" title="三、JavaScript标签">三、JavaScript标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#25E5259B259B25E325802581HTML525E6259625B025E525A2259E25E625A0258725E725AD25BE" title="四、HTML5新增标签">四、HTML5新增标签</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-5" href="#25E425BA259425E325802581CSS325E6259625B025E525A2259E25E7258925B925E6258025A7" title="五、CSS3新增特性">五、CSS3新增特性</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-6" href="#25E5258525AD25E325802581JavaScript_ES625E6259625B025E525A2259E25E7258925B925E6258025A7" title="六、JavaScript ES6新增特性">六、JavaScript ES6新增特性</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-7" href="#25E425B8258325E32580258125E52589258D25E725AB25AF25E525BC258025E5258F259125E525B725A525E5258525B725E52592258C25E625A1258625E6259E25B6" title="七、前端开发工具和框架">七、前端开发工具和框架</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-8" href="#25E5258525AB25E32580258125E52589258D25E725AB25AF25E525BC258025E5258F259125E6259C258025E425BD25B325E525AE259E25E825B725B5" title="八、前端开发最佳实践">八、前端开发最佳实践</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-9" href="#25E425B9259D25E32580258125E52589258D25E725AB25AF25E525BC258025E5258F259125E825B6258B25E5258A25BF" title="九、前端开发趋势">九、前端开发趋势</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-10" 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-11" href="#1_25E425BB258025E425B9258825E6259825AFHTML25E625A0258725E725AD25BE25EF25BC259F" title="1. 什么是HTML标签？">1. 什么是HTML标签？</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-12" href="#2_25E525B825B825E825A7258125E7259A258425E825A125A825E5258D259525E625A0258725E725AD25BE25E6259C258925E5259325AA25E425BA259B25EF25BC259F" title="2. 常见的表单标签有哪些？">2. 常见的表单标签有哪些？</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-13" href="#3_25E525A6258225E425BD259525E425BD25BF25E7259425A825E525A4259A25E525AA259225E425BD259325E625A0258725E725AD25BE25EF25BC259F" title="3. 如何使用多媒体标签？">3. 如何使用多媒体标签？</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-14" href="#4_25E525A6258225E425BD259525E425BD25BF25E7259425A825E825AF25AD25E425B9258925E5258C259625E625A0258725E725AD25BE25E6258F259025E5258D2587SEO25E62595258825E6259E259C25EF25BC259F" title="4. 如何使用语义化标签提升SEO效果？">4. 如何使用语义化标签提升SEO效果？</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-15" href="#5_25E525A6258225E425BD259525E92580258925E6258B25A925E52590258825E92580258225E7259A258425E625A0258725E725AD25BE25E425BB25A525E525A2259E25E525BC25BA25E5258F25AF25E825AE25BF25E9259725AE25E6258025A725EF25BC259F" title="5. 如何选择合适的标签以增强可访问性？">5. 如何选择合适的标签以增强可访问性？</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-16" href="#6_25E525A6258225E425BD259525E5258825A925E7259425A8CSS25E52592258CJavaScript25E425B8258E25E625A0258725E725AD25BE25E725BB259325E52590258825E6258F259025E5258D258725E7259425A825E6258825B725E425BD259325E925AA258C25EF25BC259F" title="6. 如何利用CSS和JavaScript与标签结合提升用户体验？">6. 如何利用CSS和JavaScript与标签结合提升用户体验？</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-17" href="#25E6258025BB25E725BB2593" 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/188949"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/d6ce1280-74ae-4e90-ba16-bb640e2b225e-480x300.webp" width="480" height="300" alt="前端开发哪些企业用"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188949" 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/188947"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/4adc28c0-2669-4936-8151-63372f962d90-480x300.webp" width="480" height="300" alt="前端开发有哪些分类"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188947" 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/188944"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/be2e2e53-90bb-4f71-b7c7-86ba9d71432e-480x300.webp" width="480" height="300" alt="开发前端有哪些技术"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188944" 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/188943"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/6cdbdb22-3c57-41af-ab06-55c3217b8d46-480x300.webp" width="480" height="300" alt="前端开发认证有哪些"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188943" 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/188940"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/a440e126-ada2-4a40-9fc6-a7fe8779018d-480x300.webp" width="480" height="300" alt="前端开发避免哪些问题"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188940" 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/188939"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/446d903f-18ae-46e4-bbbf-367907aa6c7f-480x300.webp" width="480" height="300" alt="前端开发都有哪些部分"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188939" 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/188936"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/d173ed79-22c3-4e72-80c0-12ebf6585bcd-480x300.webp" width="480" height="300" alt="前端开发对象有哪些"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188936" 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/188935"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/dfc1a49f-2bb8-483e-8b82-c90dd2aa20b8-480x300.webp" width="480" height="300" alt="前端开发哪些是重点"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188935" 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/188933"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/b1c85f47-cc71-4d61-ba2a-7a19382a87cd-480x300.webp" width="480" height="300" alt="前端开发需要哪些内容"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188933" 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/188930"> <img src="https://cos.gitlab.cn/wp-content/uploads/2024/08/0b552080-dcdd-4067-8951-fdb988ccab39-480x300.webp" width="480" height="300" alt="前端开发考哪些证"> </a> <h4 class="title"> <a href="https://devops.gitlab.cn/archives/188930" 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":"188710","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":"188710","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":"0","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":"188710","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/188710", "url": "https://devops.gitlab.cn/archives/188710", "headline": "前端开发都有哪些标签", "image": "https://cos.gitlab.cn/wp-content/uploads/2024/08/ff6d2c1f-458c-458d-8a2a-b16b8936c327.webp", "description": "前端开发常用的标签包括HTML、CSS、JavaScript等，其中HTML用来定义页面的结构和内容，CSS用于页面样式的设计，JavaScript则用于实现页面的动态效果和交互功…", "datePublished": "2024-08-24T17:36:25+08:00", "dateModified": "2024-08-24T17:36:26+08:00", "author": {"@type":"Person","name":"jihu002","url":"https://devops.gitlab.cn/archives/author/jihu002","image":"//g.izt6.com/avatar/30a11b25722c773805ac34c5f8e746ff?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-08-25 01:02:52 by W3 Total Cache -->