HTML基础-HTML标签、块、行、属性、规范

✊不积跬步,无以至千里;不积小流,无以成江海

之前写过的笔记链接:

关于起源 常用标签1\]([📝 HTML入门笔记1 (yuque.com)](https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fliwenwang-kfcdf%2Fhqlasb%2Fqgfph2 "https://www.yuque.com/liwenwang-kfcdf/hqlasb/qgfph2")) \[关于常用标签2 如table\]([📝 HTML入门笔记2 - 常用标签 (yuque.com)](https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fliwenwang-kfcdf%2Fhqlasb%2Fgimk1v "https://www.yuque.com/liwenwang-kfcdf/hqlasb/gimk1v")) # 常见标签、块与行、常见属性、HTML5标签、表单 ## HTML 中常见的标签 下面是一些 HTML 中常见的标签及其简要说明: 1. **``** :HTML 文档的根元素,包含整个 HTML 文档的内容。 2. **``** :HTML 文档的头部元素,用于包含文档的元数据,如标题、样式表和脚本等。 3. **``** :定义 HTML 文档的标题,显示在浏览器的标题栏或标签页上。 4. **`<body>`** :HTML 文档的主体元素,包含了页面的可见内容。 5. **`<h1>` to `<h6>`** :用于定义标题的标签,`<h1>` 表示最高级别的标题,`<h6>` 表示最低级别的标题。 6. **`<p>`** :用于定义段落的标签,用来包裹一段文本。 7. **`<a>`** :定义链接的标签,用于创建超链接到其他页面、文件或位置。 8. **`<img>`** :用于插入图像的标签,通过指定图像的路径来显示图像。 9. **`<ul>`** 和 **`<ol>`** :分别用于创建无序列表和有序列表,列表项使用 \*\*`<li>` \*\*标签包裹。 10. **`<div>`** 和 **`<span>`** :用于分组和包装其他 HTML 元素,用于样式化或操作组合的元素。 11. **`<table>`** 、**`<tr>`** 、**`<th>`** 和 **`<td>`** :用于创建表格的标签,`<table>` 定义表格,`<tr>` 定义行,`<th>` 定义表头单元格,`<td>` 定义表格数据单元格。 12. **`<form>`** 、**`<input>`** 和 **`<button>`** :用于创建表单和接收用户输入的标签,`<form>` 定义表单,`<input>` 定义输入字段,`<button>` 定义按钮。 13. **`<label>`** 和 **`<textarea>`** :`<label>` 用于为表单元素定义标签,`<textarea>` 用于创建多行文本输入框。 14. **`<header>`** 、**`<nav>`** 和 **`<footer>`** :用于定义页面的头部、导航和页脚区域。 15. **`<section>`** 和 **`<article>`** :用于定义文档的节和文章区域,用于更好地组织页面内容。 ## 块与行 在 HTML 中,有两种主要的元素类型:块级元素和行内元素。它们在布局和渲染上有一些区别。 **块级元素**(Block-level elements): * 块级元素通常会在新行上开始,并占据其父元素的整个可用宽度,从左到右水平填充。 * 块级元素可以设置宽度、高度、内边距(padding)和外边距(margin)等样式属性。 * 块级元素可以容纳其他块级元素和行内元素。 常见的块级元素包括 `<div>`、`<p>`、`<h1>` 到 `<h6>`、`<ul>`、`<ol>`、`<li>`、`<table>`、`<form>` 等。它们的特点是可以独立成块,并占据一行或多行的空间。 **行内元素**(Inline elements): * 行内元素通常不会在新行上开始,它们会尽可能地在同一行上显示,直到一行的空间不足以容纳它们,然后自动换行到下一行。 * 行内元素的宽度和高度通常由其内容决定,无法直接设置。 * 行内元素通常无法设置顶部和底部的外边距(margin),但可以设置左右外边距和内边距(padding)。 常见的行内元素包括 `<span>`、`<a>`、`<strong>`、`<em>`、`<b>`、`<i>`、`<u>`、`<img>`、`<input>`、`<label>` 等。它们的特点是在文本流中显示,并与周围的文本在同一行上。 需要注意的是,HTML5 引入了一些新的元素和元素属性,例如 `<header>`、`<nav>`、`<article>`、`<section>` 等,它们的默认样式可能是块级或行内,但可以通过 CSS 来修改它们的显示属性。 通过结合块级元素和行内元素的使用,可以实现更复杂和灵活的布局和设计,以满足不同的网页需求。 ### 块级元素和行内元素的区别 1. **显示方式**:块级元素以块的形式显示,每个块级元素通常会另起一行,并占据其父元素的整个可用宽度。行内元素则以行的形式显示,尽可能在同一行上显示,直到一行的空间不足以容纳它们,然后自动换行到下一行。 2. **尺寸**:块级元素可以设置宽度、高度、内边距(padding)和外边距(margin)等样式属性,可以独立控制它们的尺寸。行内元素的宽度和高度通常由其内容决定,无法直接设置。尽管一些行内元素可以设置水平方向的内边距和外边距,但无法设置顶部和底部的外边距。 3. **元素之间的排列**:块级元素会在垂直方向上一个接一个地堆叠,每个块级元素占据独立的行空间。行内元素会在同一行上尽可能地显示,直到一行的空间不足以容纳它们,然后自动换行到下一行。 4. **容纳内容**:块级元素可以容纳其他块级元素和行内元素,可以形成更大的块级结构。行内元素通常不能容纳块级元素,但可以包含其他行内元素。 5. **默认样式** :块级元素的默认样式是 `display: block;`,行内元素的默认样式是 `display: inline;`。然而,HTML5 引入了一些新的元素和元素属性,它们的默认样式可能是块级或行内,但可以通过 CSS 来修改它们的显示属性。 6. **语义化**:块级元素通常用于表示页面结构的主要部分,如段落、标题、列表、导航、页脚等。行内元素通常用于标记文本的不同部分或添加行内的强调、链接等。 ## 常见属性 HTML 中的元素可以使用各种属性来提供附加的信息或控制元素的行为和样式。以下是一些常见的 HTML 属性: 1. **`id`**:为元素定义唯一的标识符,通常用于在 CSS 和 JavaScript 中选择和操作元素。 2. **`class`**:为元素定义一个或多个类名,用于选择和样式化一组元素。 3. **`style`**:内联样式属性,用于为元素指定特定的样式,如颜色、字体大小、边框等。 4. **`src`**:用于指定图像、音频、视频等媒体元素的源文件路径。 5. **`href`**:用于指定链接元素的目标 URL,通常用于创建超链接。 6. **`alt`**:用于为图像元素定义替代文本,当图像无法显示时,替代文本将被显示。 7. **`width`** 和 **`height`**:用于指定图像、表格单元格或其他元素的宽度和高度。 8. **`disabled`**:用于禁用表单元素或按钮,使其无法交互或点击。 9. **`placeholder`**:用于在表单输入字段中提供提示性的占位符文本。 10. **`required`**:用于指示表单输入字段是必填项,在提交表单时要求用户输入值。 11. **`readonly`**:用于将表单输入字段设置为只读,用户无法编辑其中的内容。 12. **`checked`**:用于选中复选框或单选按钮的默认选项。 13. **`value`**:用于指定表单元素的默认值或用户输入的值。 14. **`data-*`** :用于自定义数据属性,可以在元素中存储自定义数据,供 JavaScript 使用。 ## HTML5标签 HTML5 引入了一些新的语义化标签,这些标签提供了更好的结构和含义,使开发人员能够更清晰地描述文档内容。以下是一些常见的 HTML5 标签: 1. **`<header>`** :表示文档或节的页眉部分,通常包含标题、导航和其他相关信息。 2. **`<nav>`** :表示导航链接的容器,用于定义页面的主要导航。 3. **`<article>`** :表示独立的、完整的、可独立分发或可重复使用的内容块,如博客文章、新闻稿等。 4. **`<section>`** :表示文档中的一个独立节或主题区域,可用于组织相关的内容。 5. **`<aside>`** :表示页面的侧边栏或附属内容,通常包含与主要内容相关但不是核心的信息。 6. **`<main>`** :表示文档的主要内容,每个文档应该只有一个 `<main>` 元素。 7. **`<footer>`** :表示文档或节的页脚部分,通常包含版权信息、联系方式等。 8. **`<figure>`** 和 **`<figcaption>`** :`<figure>` 用于包含一组与主要文档流相关的图像、图表、照片等媒体,而 `<figcaption>` 用于为这些媒体提供标题或说明。 9. **`<time>`** :用于表示日期、时间或时间范围,具有机器可读和人类可读的属性。 10. **`<video>`** 和 **`<audio>`** :分别用于嵌入视频和音频内容,可以通过设置源文件路径和其他属性来控制媒体的播放。 11. **`<canvas>`** :用于通过 JavaScript 绘制图形、动画、图表等。 12. **`<progress>`** :表示任务的完成进度,例如文件上传进度、表单提交进度等。 13. **`<form>`** 和 **`<input>`** :`<form>` 用于创建表单,而 `<input>` 用于定义输入字段。 14. **`<datalist>`** 和 **`<option>`** :`<datalist>` 用于定义输入字段的选项列表,而 `<option>` 用于定义 `<datalist>` 中的选项。 ## 表单 HTML 表单是一种用于收集用户输入数据的机制,可以用来创建各种形式的交互,例如用户注册、搜索功能、提交评论等。以下是 HTML 表单的基本组成部分和相关元素: 1. **`<form>` 元素** :用于创建表单,它包含了表单中的所有其他元素。`<form>` 元素具有 `action` 和 `method` 属性,用于定义表单提交的目标 URL 和请求方法。 2. **`<input>` 元素** :用于创建各种类型的输入字段,如文本输入、密码输入、单选按钮、复选框等。`<input>` 元素具有多个不同的类型属性,例如 `type="text"`、`type="password"`、`type="radio"` 等。 3. **`<textarea>` 元素**:用于创建多行文本输入字段,通常用于用户输入大段文本,如评论或消息。 4. **`<select>` 元素** 和 **`<option>` 元素** :`<select>` 元素用于创建下拉选择框,而 `<option>` 元素用于定义下拉选项。用户可以从下拉列表中选择一个选项。 5. **`<button>` 元素**:用于创建按钮,可以用作提交表单、重置表单或执行其他自定义操作。 6. **`<label>` 元素** :用于为表单元素创建标签,提供可点击的文本描述。`<label>` 元素通常与相应的表单元素关联,通过 `for` 属性指定关联的表单元素的 `id` 值。 7. **`<fieldset>` 元素** 和 **`<legend>` 元素** :`<fieldset>` 元素用于将表单元素分组,并可使用 `<legend>` 元素为分组创建标题。 8. **`<input type="submit">`** 和 **`<input type="reset">`** :`<input>` 元素的 `type` 属性可以设置为 `"submit"` 和 `"reset"`,用于创建提交按钮和重置按钮。 9. **`<input type="checkbox">`** 和 **`<input type="radio">`** :`<input>` 元素的 `type` 属性可以设置为 `"checkbox"` 和 `"radio"`,用于创建复选框和单选按钮。 # HTML规范、命名经验、常规命名法和BEM命名法 ## HTML规范 HTML 规范是由万维网联盟(W3C)制定和维护的一套标准,用于定义 HTML 的语法和行为,以确保在不同的浏览器和设备上一致地解释和呈现网页内容。以下是关于 HTML 规范的一些重要方面: 1. **HTML5 规范**:HTML5 是最新的 HTML 规范版本,它引入了一些新的元素、属性和 API,提供更强大的语义化和功能。HTML5 规范于2014年推出,并持续更新和发展。 2. **文档类型声明(DOCTYPE)** :HTML 规范要求在 HTML 文档的开头使用 DOCTYPE 声明来指定所使用的 HTML 版本。例如,`<!DOCTYPE html>` 声明表示使用 HTML5。 3. **语法规则**:HTML 规范定义了 HTML 的语法规则,包括标签的嵌套关系、属性的使用方式、元素的闭合等。遵循正确的语法是确保网页正确解析和渲染的关键。 4. **语义化标签** :HTML 规范鼓励使用语义化标签来描述文档的结构和内容,例如 `<header>`、`<nav>`、`<article>` 等。这些标签提供了更准确的含义,有助于提高可访问性和搜索引擎优化。 5. **属性和元素**:HTML 规范定义了各种属性和元素,用于控制元素的行为、样式和交互。规范中详细说明了每个属性和元素的可用取值、默认行为和浏览器支持情况。 6. **表单和输入控件**:HTML 规范详细描述了如何创建表单和各种类型的输入控件,以便收集用户输入数据。 7. **媒体元素** :HTML 规范提供了 `<img>`、`<video>`、`<audio>` 等元素,用于嵌入图像、视频、音频等媒体内容。 8. **脚本和样式**:HTML 规范定义了如何在 HTML 文档中嵌入 JavaScript 和 CSS 代码,以实现动态交互和样式化。 9. **可访问性(Accessibility)** :HTML 规范关注可访问性,提供了一些属性和技术,用于使网页内容对残障用户更易访问。 10. **浏览器兼容性**:HTML 规范努力确保在不同的浏览器和设备上一致地解释和呈现网页内容。然而,不同浏览器对规范的支持程度可能存在差异,开发人员需要注意浏览器兼容性问题,并使用适当的技术进行兼容性处理。 ## 命名经验 在编写 HTML 代码时,使用良好的命名实践可以提高代码的可读性、可维护性和可扩展性。以下是一些HTML命名的经验: 1. **语义化命名**:使用具有明确语义的名称来描述元素的用途和内容。选择能够准确描述元素的类名、ID和标签名,这有助于他人理解代码结构和意图。 2. **简洁明了**:使用简短、清晰的名称,避免过长或复杂的命名。使用简洁的命名可以提高代码的可读性,使其更易于理解和维护。 3. **一致性**:保持命名风格的一致性,遵循统一的命名约定。选择一种命名风格(如驼峰式命名、短横线分隔命名等)并坚持使用,以确保代码的一致性。 4. **可读性**:选择易于阅读和理解的命名,使用有意义的单词或缩写。避免使用过于晦涩或难以理解的命名方式,以便其他开发人员能够轻松理解和维护代码。 5. **避免保留字**:避免使用 HTML 或相关编程语言中的保留字作为命名,以防止出现冲突或意外行为。 6. **可扩展性**:在命名中考虑到代码的可扩展性,选择能够适应未来变化和添加功能的命名。避免过于特定的命名,以便在需要扩展或修改代码时能够轻松进行调整。 7. **语言规范**:根据所使用的编程语言和框架的命名规范,遵循相关的命名约定。例如,对于 CSS 类名,可以使用 BEM(块、元素、修饰符)命名规范。 8. **可搜索性**:选择易于搜索和定位的命名,这有助于在代码库中进行查找和维护。使用一致的命名模式和约定,以便能够快速找到所需的元素或样式。 ## 常规命名法和BEM命名法 ### 常规命名法 常规命名法是一种简单直接的命名方式,通常使用单词或简短的缩写来描述元素的用途或内容。以下是常规命名法的一些特点: 1. **驼峰命名法** :使用首字母小写的单词,并将每个单词的首字母大写,形成一个单一的命名。例如,`headerSection`、`submitButton`。 2. **短横线分隔命名法** :使用小写字母和短横线来分隔单词,描述元素的用途或内容。例如,`header-section`、`submit-button`。 3. **下划线命名法** :使用小写字母和下划线来分隔单词,描述元素的用途或内容。例如,`header_section`、`submit_button`。 常规命名法简单易懂,容易理解和记忆。它适用于小型项目或个人项目,不需要过多的命名约定和规范。 ### BEM命名法 BEM(块、元素、修饰符)命名法是一种用于命名 CSS 类名的约定,它提供了一种更结构化和语义化的命名方式。以下是 BEM 命名法的一些特点: 1. **块(Block)** :块是一个独立的、可重复使用的组件或模块,它代表一个完整的功能单元。块的类名使用单个单词或短横线分隔的单词,例如 `header`、`menu`。 2. **元素(Element)** :元素是块的组成部分,它们只在特定块的上下文中有意义。元素的类名以块的类名作为前缀,使用双下划线连接,例如 `header__logo`、`menu__item`。 3. **修饰符(Modifier)** :修饰符用于描述块或元素的状态、外观或行为变化。修饰符的类名以块或元素的类名作为前缀,使用单个单词或短横线分隔的单词,例如 `header--dark`、`menu__item--active`。 BEM 命名法通过将类名分为块、元素和修饰符,提供了更清晰和可扩展的命名结构。它有助于减少样式冲突、提高代码可读性,并支持模块化和可重用性。 </p></div></div><!----><!--]--></div></div><span data-v-9d593865></span><div class="article-tag-list" data-v-9d593865><!--[--><a href="/tag/353" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->html<!--]--></span></button></a><!--]--></div><div class="article-pre-next" data-v-9d593865><div data-v-9d593865><a href="/article/1725714456584916994" class="" data-v-9d593865><span data-v-9d593865>上一篇:</span><span class="article-pre-next-item-title" data-v-9d593865>qiankun源码分析-7.css沙箱</span></a></div><div data-v-9d593865><a href="/article/1725714504479674370" class="" data-v-9d593865><span data-v-9d593865>下一篇:</span><span class="article-pre-next-item-title" data-v-9d593865>深度优化数据库性能:Linux 内核参数调整解析</span></a></div></div></div><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-4340231068438843" data-ad-slot="3187524902" data-ad-format="auto" data-full-width-responsive="true" data-v-9d593865></ins><!----><div class="article-recommend-card" data-v-9d593865><span class="article-recommend-card-title" data-v-9d593865>相关推荐</span><div class="el-divider el-divider--horizontal" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><div class="article-recommend-list" data-v-9d593865><!--[--><a href="/article/1967875702424387585" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>前端老鹰</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>8 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>HTML <output> 标签:原生表单结果展示容器,自动关联输入值</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--]--></div></a><a href="/article/1967829937811406850" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>芦苇Z</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>11 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--]--></div></a><a href="/article/1967772401489985538" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Alice-YUE</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>15 小时前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>【CSS学习笔记3】css特性</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>笔记</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--]--></div></a><a href="/article/1967609222596182017" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>破无差</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 天前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>《赛事报名系统小程序》</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>小程序</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>uniapp</span><!--]--><!--]--></div></a><a href="/article/1967553135528427521" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>从零开始学习人工智能</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 天前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>快速搭建B/S架构HTML演示页:从工具选择到实战落地</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>架构</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--]--></div></a><a href="/article/1967542100041973762" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>yddddddy</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>1 天前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>html基本知识</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--]--></div></a><a href="/article/1967425842202066946" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>小白6402</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>2 天前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--]--></div></a><a href="/article/1967397279293816834" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>蓝胖子的多啦A梦</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>2 天前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>elementui</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>前端页面适配</span><!--]--><!--]--></div></a><a href="/article/1967318892671975425" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>面向星辰</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>2 天前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>html各种常用标签</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--]--></div></a><a href="/article/1967033804939902978" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>李昊哲小课</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>3 天前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>HTML 完整教程与实践</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>html</span><!--]--><!--]--></div></a><!--]--></div></div><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-4340231068438843" data-ad-slot="3187524902" data-ad-format="auto" data-full-width-responsive="true" data-v-9d593865></ins><!----></div><div class="right" data-v-9d593865><div class="right-body" data-v-9d593865><div class="hot-article-rank hot-article-rank-wrapper" data-v-9d593865 data-v-9f329d47><span class="title" data-v-9f329d47>热门推荐</span><div class="el-divider el-divider--horizontal" style="--el-border-style:solid;" role="separator" data-v-9f329d47><!--v-if--></div><div class="article-list" data-v-9f329d47><!--[--><a href="/article/1965957555249266689" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>01</span><span class="article-title" data-v-9f329d47>GitHub 镜像站点</span></a><a href="/article/1963162390293954562" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>UV 工具安装与国内镜像源配置指南</span></a><a href="/article/1950564991094009857" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>UV安装并设置国内源</span></a><a href="/article/1965599772632989697" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>Claude Code 平替:OpenAI发布 Codex CLI ,GPT-5 国内直接使用</span></a><a href="/article/1963805922956460033" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>46个Nano-banana 精选提示词,持续更新中</span></a><a href="/article/1962324213798846466" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程</span></a><a href="/article/1964144273521688578" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>conda中设置镜像地址(附所有可换的地址)</span></a><a href="/article/1895130586004066306" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>KGG转MP3工具|非KGM文件|解密音频</span></a><a href="/article/1963778781145513986" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>保姆级教程:手把手教你用Dify实现完美多轮对话(附Chatflow和提示词)</span></a><a href="/article/1822835789134827521" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>突破百度网盘的下载限速,两种方法教会你【超详细】</span></a><!--]--></div></div><!----></div></div></div></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":342,"once":345,"_errors":346,"serverRendered":348,"path":349},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":172,"PAjRY75aBgVnDKjWXqzRrfrkUgCGfPiXeKPCTBSM0ME":174,"pwF05uiDsD37-6cryNmWZWOQkrL7CXKJ0ctl_bWDjY4":319},[5,19,32,49,63,77,90,103,128,145],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":18},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况,这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制,让你更顺畅地浏览仓库、下载资源甚至克隆代码。","",716,"1851173111697772545","BillKu","https://profile-avatar.csdnimg.cn/default.jpg",[15],{"id":16,"name":17},424,"github",1757555781000,{"id":20,"title":21,"description":22,"imgUrl":9,"views":23,"ownerId":24,"ownerName":25,"ownerHeadUrl":26,"tagList":27,"time":31},"1963162390293954562","UV 工具安装与国内镜像源配置指南","UV 是由 Astral 团队开发的高性能 Python 包管理器和解析器,旨在提供比传统工具更快的依赖解析和安装体验。本文档提供 UV 的安装指南及国内镜像源配置方法。",808,"1905462195645919233","凯哥1970","https://p26-passport.byteacctimg.com/img/mosaic-legacy/3793/3114521287~300x300.image",[28],{"id":29,"name":30},55,"后端",1756889362000,{"id":33,"title":34,"description":35,"imgUrl":36,"views":37,"ownerId":38,"ownerName":39,"ownerHeadUrl":40,"tagList":41,"time":48},"1950564991094009857","UV安装并设置国内源","国内网络问题无法下载解决方案 来到github下载自己对应系统的包: https://github.com/astral-sh/uv/releases","https://i-blog.csdnimg.cn/direct/f35ac3e06c9448d38fa3eb735254c454.png",10269,"1684403235311325185","落魄实习生","https://file.jishuzhan.net/user/1684403235311325185/head.png",[42,45],{"id":43,"name":44},58,"python",{"id":46,"name":47},4529,"uv",1753885908000,{"id":50,"title":51,"description":52,"imgUrl":53,"views":54,"ownerId":55,"ownerName":56,"ownerHeadUrl":57,"tagList":58,"time":62},"1965599772632989697","Claude Code 平替:OpenAI发布 Codex CLI ,GPT-5 国内直接使用","openai推出的命令行编程工具codex已经可以使用最新 GPT-5 模型,拥有可媲美 Claude Code 的 AI 编码能力。本文将指导你在 Windows 系统上部署原生的 Codex CLI 程序,并接入超低价中转 API,让你在国内直接用上超高性价比的 OpenAI Codex CLI 应用。","https://i-blog.csdnimg.cn/direct/0397a340a9b949da94bdb403f855a3ba.png",243,"1794706286374293505","golang学习记","https://file.jishuzhan.net/user/1794706286374293505/head.webp",[59],{"id":60,"name":61},70,"gpt",1757470479000,{"id":64,"title":65,"description":66,"imgUrl":67,"views":68,"ownerId":69,"ownerName":70,"ownerHeadUrl":71,"tagList":72,"time":76},"1963805922956460033","46个Nano-banana 精选提示词,持续更新中","这些案例主要来源于Twitter/ X 🐦、小红书📕等自媒体平台。喜欢就点 ⭐ Star 收藏起来吧!","https://oss.xyyzone.com/jishuzhan/article/1963805922956460033/477d305a33fb4ee5ab133086a5950209.webp",595,"1770301577052033026","非优秀程序员","https://file.jishuzhan.net/user/1770301577052033026/head.webp",[73],{"id":74,"name":75},14,"前端",1757042792000,{"id":78,"title":79,"description":80,"imgUrl":81,"views":82,"ownerId":83,"ownerName":84,"ownerHeadUrl":85,"tagList":86,"time":89},"1962324213798846466","A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程","大家好,我是花姐~👋 今天来给大家分享一个让我眼前一亮的开源项目:Kronos。 一句话总结:它是第一个真正意义上面向金融K线数据的 开源大模型!","https://oss.xyyzone.com/jishuzhan/article/1962324213798846466/1083f789ef1b58f2488fec427ef2db89.webp",973,"1688833694627794946","这里有鱼汤","https://file.jishuzhan.net/user/1688833694627794946/head.gif",[87,88],{"id":29,"name":30},{"id":43,"name":44},1756689525000,{"id":91,"title":92,"description":93,"imgUrl":9,"views":94,"ownerId":95,"ownerName":96,"ownerHeadUrl":97,"tagList":98,"time":102},"1964144273521688578","conda中设置镜像地址(附所有可换的地址)","在设置任一镜像前,请运行以下命令清除旧配置:这会彻底清除所有 channel 与相关设置,确保配置干净无残留。",756,"1755423461271932929","小树苗m","https://file.jishuzhan.net/user/1755423461271932929/head.webp",[99],{"id":100,"name":101},437,"conda",1757123461000,{"id":104,"title":105,"description":106,"imgUrl":9,"views":107,"ownerId":108,"ownerName":109,"ownerHeadUrl":110,"tagList":111,"time":127},"1895130586004066306","KGG转MP3工具|非KGM文件|解密音频","本文章分为两部分老版本kgm转mp3项目新版本kgg转mp3项目先废话一下:在数字音乐时代,我们常常会遇到各种格式的音乐文件,其中酷狗音乐的KGM格式就是一种常见的专用格式。然而,这种格式在其他设备或播放器上可能无法直接播放,给用户带来了不便。为了解决这一问题,之前有个项目,推出了酷狗KGM转MP3或FLAC工具。它能够将酷狗音乐的KGM格式文件轻松转换为常见的MP3或FLAC格式,让你在任何设备上都能畅享音乐。",10912,"1895130588738752513","FeiCat Henry","https://profile-avatar.csdnimg.cn/1db505df81b74eaba91034ff4b0b081a_mayiseeu.jpg",[112,115,118,121,124],{"id":113,"name":114},65,"科技",{"id":116,"name":117},97,"算法",{"id":119,"name":120},580,"音视频",{"id":122,"name":123},729,"软件工程",{"id":125,"name":126},2183,"视频编解码",1740669316000,{"id":129,"title":130,"description":131,"imgUrl":132,"views":133,"ownerId":134,"ownerName":135,"ownerHeadUrl":136,"tagList":137,"time":144},"1963778781145513986","保姆级教程:手把手教你用Dify实现完美多轮对话(附Chatflow和提示词)","在这篇文章里,我想和大家分享一下我是如何一步步建立一个问答助手Demo的经历。过程中遇到了一些挑战,但同时也找到了解决办法,希望能给正在尝试类似项目的朋友们带来一点帮助和启发。","https://oss.xyyzone.com/jishuzhan/article/1963778781145513986/51d71c82ab8ac333092b502bb4b46944.webp",532,"1909895503283814402","吏部侍郎","https://p26-passport.byteacctimg.com/img/mosaic-legacy/3791/5070639578~300x300.image",[138,141],{"id":139,"name":140},39,"人工智能",{"id":142,"name":143},1010,"产品经理",1757036321000,{"id":146,"title":147,"description":148,"imgUrl":149,"views":150,"ownerId":151,"ownerName":152,"ownerHeadUrl":153,"tagList":154,"time":171},"1822835789134827521","突破百度网盘的下载限速,两种方法教会你【超详细】","Hello,大家后,我是博主英杰,前几天,我在使用百度网盘过程中,下载速度极慢,自己作为一个白嫖党,开会员也是心疼那点钱,所以在网上找了几个有效解决百度网盘限速问题的教程,并且亲测之后,觉得有效果,于是写了篇文章","https://i-blog.csdnimg.cn/direct/0f5170520bbc4be586476a8c1bba9215.webp",5995,"1681453983056531457","Yan-英杰","https://file.jishuzhan.net/user/1681453983056531457/head.png",[155,158,159,162,165,168],{"id":156,"name":157},17,"网络",{"id":43,"name":44},{"id":160,"name":161},85,"tcp/ip",{"id":163,"name":164},151,"百度",{"id":166,"name":167},161,"阿里云",{"id":169,"name":170},344,"云计算",1723432893000,{"adMap":173},["Map"],[175,190,201,219,236,251,262,275,296,308],{"id":176,"title":177,"description":178,"imgUrl":179,"views":180,"ownerId":181,"ownerName":182,"ownerHeadUrl":183,"tagList":184,"time":189},"1967875702424387585","HTML \u003Coutput> 标签:原生表单结果展示容器,自动关联输入值","在前端表单开发中,“实时展示结果”是高频需求——无论是计算购物车商品总价、检测密码强度,还是显示文件上传进度,都需要将动态结果直观地呈现给用户。但传统实现方式往往依赖繁琐的JavaScript逻辑:手动监听输入框变化、反复获取并计算值、再更新DOM元素内容,不仅代码冗余,还容易出现“结果不实时”“重置残留”等问题。而HTML5原生的\u003Coutput>标签,正是为解决这些痛点而生的“表单结果专属容器”。它能自动关联表单元素、支持表单重置同步、提升语义化与无障碍体验,让表单结果展示变得简洁高效。今天,我们就来彻","https://oss.xyyzone.com/jishuzhan/article/1967875702424387585/5f18f19d29b6895268473020700a5c74.webp",1,"1946444403110883330","前端老鹰","https://p6-passport.byteacctimg.com/img/user-avatar/89a33dbc6965fb6559626077f55f948a~300x300.image",[185,186],{"id":74,"name":75},{"id":187,"name":188},353,"html",1758013103000,{"id":191,"title":192,"description":193,"imgUrl":9,"views":180,"ownerId":194,"ownerName":195,"ownerHeadUrl":196,"tagList":197,"time":200},"1967829937811406850","HTML \u003Ca> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践","嗨,我是芦苇Z。 本文聊聊每个前端都踩过、却常被一笔带过的坑:\u003Ca> 标签的 rel 属性。 看完你马上能告诉自己: “以后凡是 target=\"_blank\",我都先写 noopener,再按需补其他。”","1949025958408794113","芦苇Z","https://p3-passport.byteacctimg.com/img/user-avatar/b8f43610e84da0d95b44d90bf1fda0c2~300x300.image",[198,199],{"id":74,"name":75},{"id":187,"name":188},1758002192000,{"id":202,"title":203,"description":204,"imgUrl":205,"views":180,"ownerId":206,"ownerName":207,"ownerHeadUrl":208,"tagList":209,"time":218},"1967772401489985538","【CSS学习笔记3】css特性","1.1层叠性:就近原则,最新定义的样式1.2继承性:子标签集成父标签的样式,如文本和字号行高的继承:不加单位指的是当前文字大小的倍数","https://i-blog.csdnimg.cn/img_convert/b49939dd0d0551e3bcd19e08b09e0417.png","1873251708692336642","Alice-YUE","https://profile-avatar.csdnimg.cn/46eb81ae005e486f97e9400fc4c26d1f_m0_62111862.jpg",[210,211,214,217],{"id":74,"name":75},{"id":212,"name":213},16,"css",{"id":215,"name":216},50,"笔记",{"id":187,"name":188},1757988474000,{"id":220,"title":221,"description":222,"imgUrl":223,"views":180,"ownerId":224,"ownerName":225,"ownerHeadUrl":226,"tagList":227,"time":235},"1967609222596182017","《赛事报名系统小程序》","这是主包夏季课程的作业,主包第一次写小程序,花了10天时间看网课,然后2天时间独立写出的项目。本来是小组作业,但是两周时间室友一直在打瓦罗兰特,白天打瓦晚上打呼,眼看答辩期限临近,主包只能自己完成了。","https://i-blog.csdnimg.cn/direct/24fb77cdee874823b9eb34b70789aa46.png","1788597186951385090","破无差","https://file.jishuzhan.net/user/1788597186951385090/head.webp",[228,231,232],{"id":229,"name":230},231,"小程序",{"id":187,"name":188},{"id":233,"name":234},826,"uniapp",1757949569000,{"id":237,"title":238,"description":239,"imgUrl":9,"views":240,"ownerId":241,"ownerName":242,"ownerHeadUrl":243,"tagList":244,"time":250},"1967553135528427521","快速搭建B/S架构HTML演示页:从工具选择到实战落地","在B/S(Browser/Server,浏览器/服务器)架构的需求沟通、原型演示或技术验证场景中,一个直观的HTML演示页能极大提升效率——它无需部署完整后端,却能清晰呈现页面布局、交互逻辑和核心功能。但对非专业前端开发者而言,从零编写HTML/CSS/JS门槛较高。本文将以「低代码工具」为核心,详细讲解如何快速制作B/S架构HTML演示页,覆盖工具选型、实操步骤、实战案例及问题解决,新手也能轻松上手。",3,"1754130298049662977","从零开始学习人工智能","https://file.jishuzhan.net/user/1754130298049662977/head.webp",[245,246,249],{"id":74,"name":75},{"id":247,"name":248},238,"架构",{"id":187,"name":188},1757936197000,{"id":252,"title":253,"description":254,"imgUrl":255,"views":180,"ownerId":256,"ownerName":257,"ownerHeadUrl":13,"tagList":258,"time":261},"1967542100041973762","html基本知识","每个 HTML 文档都遵循相同的基本结构:表单用于收集用户输入:HTML5 引入了语义化标签,使代码更具可读性和结构性:","https://i-blog.csdnimg.cn/direct/b2eb957247254450bf040c9163af8ef5.png","1965617970895962114","yddddddy",[259,260],{"id":74,"name":75},{"id":187,"name":188},1757933566000,{"id":263,"title":264,"description":265,"imgUrl":9,"views":266,"ownerId":267,"ownerName":268,"ownerHeadUrl":269,"tagList":270,"time":274},"1967425842202066946","前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)","其实很多人都不知道怎么去梳理自己得知识体系,而且不太记得住,想要记住,好像是多刷题目,通过做题得这种方式,让自己进行记忆,所以我会总体得看一遍书,然后去刷一些问题,通过问题得方式形成记忆,抓住重点,看看自己是否记得住。同时,这也是常问得面试问题吧。本来之前就想整理得,只是入职新公司,要时间去适应公司。害,分几篇分享。",2,"1724956935448432641","小白6402","https://file.jishuzhan.net/user/1724956935448432641/head.webp",[271,272,273],{"id":74,"name":75},{"id":212,"name":213},{"id":187,"name":188},1757905848000,{"id":276,"title":277,"description":278,"imgUrl":9,"views":279,"ownerId":280,"ownerName":281,"ownerHeadUrl":282,"tagList":283,"time":295},"1967397279293816834","【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案","有一个页面,需要自适应,适配所有屏幕,横屏,竖屏,大屏、PDA等,你可以帮我出个适配方案吗?因为项目中使用到了Element UI,所以还需要补充的优化点:",0,"1686371272264519682","蓝胖子的多啦A梦","https://file.jishuzhan.net/user/1686371272264519682/head.png",[284,285,288,291,292],{"id":74,"name":75},{"id":286,"name":287},15,"javascript",{"id":289,"name":290},225,"elementui",{"id":187,"name":188},{"id":293,"name":294},101684,"前端页面适配",1757899038000,{"id":297,"title":298,"description":299,"imgUrl":9,"views":180,"ownerId":300,"ownerName":301,"ownerHeadUrl":302,"tagList":303,"time":307},"1967318892671975425","html各种常用标签","1.水平线水平线既可以存在于标题中,也可能存在于body中水平线的格式和属性:超链接的锚点标签就像是网页里的 \"快速跳转器\",能让你一点就跳到同一页面的某个指定位置,不用手动滚动查找。","1966477576522219522","面向星辰","https://profile-avatar.csdnimg.cn/012918aa5b774855957bf8a2b6dba27f_mzh202209421.jpg",[304,305,306],{"id":74,"name":75},{"id":286,"name":287},{"id":187,"name":188},1757880349000,{"id":309,"title":310,"description":311,"imgUrl":9,"views":180,"ownerId":312,"ownerName":313,"ownerHeadUrl":314,"tagList":315,"time":318},"1967033804939902978","HTML 完整教程与实践","HTML作为Web的基础技术,从最初的简单文本标记发展到如今功能丰富的HTML5标准,经历了巨大的变革。通过本教程,我们学习了HTML的基础知识、各种元素和标签的使用方法,以及如何创建语义化、可访问性高且性能优良的网页。","1684195345568894977","李昊哲小课","https://file.jishuzhan.net/user/1684195345568894977/head.png",[316,317],{"id":74,"name":75},{"id":187,"name":188},1757812379000,{"id":320,"title":321,"description":322,"content":323,"imgUrl":9,"views":279,"ownerId":324,"ownerName":325,"ownerHeadUrl":326,"tagList":327,"time":329,"articleSourceUrl":330,"preArticle":331,"nextArticle":336},"1725714485928267778","HTML基础-HTML标签、块、行、属性、规范","✊不积跬步,无以至千里;不积小流,无以成江海之前写过的笔记链接:[关于起源 常用标签1](📝 HTML入门笔记1 (yuque.com))","> ✊不积跬步,无以至千里;不积小流,无以成江海\n\n之前写过的笔记链接:\n\n\\[关于起源 常用标签1\\]([📝 HTML入门笔记1 (yuque.com)](https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fliwenwang-kfcdf%2Fhqlasb%2Fqgfph2 \"https://www.yuque.com/liwenwang-kfcdf/hqlasb/qgfph2\"))\n\n\\[关于常用标签2 如table\\]([📝 HTML入门笔记2 - 常用标签 (yuque.com)](https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fliwenwang-kfcdf%2Fhqlasb%2Fgimk1v \"https://www.yuque.com/liwenwang-kfcdf/hqlasb/gimk1v\"))\n\n# 常见标签、块与行、常见属性、HTML5标签、表单\n\n## HTML 中常见的标签\n\n下面是一些 HTML 中常见的标签及其简要说明:\n\n1. **`\u003Chtml>`** :HTML 文档的根元素,包含整个 HTML 文档的内容。\n2. **`\u003Chead>`** :HTML 文档的头部元素,用于包含文档的元数据,如标题、样式表和脚本等。\n3. **`\u003Ctitle>`** :定义 HTML 文档的标题,显示在浏览器的标题栏或标签页上。\n4. **`\u003Cbody>`** :HTML 文档的主体元素,包含了页面的可见内容。\n5. **`\u003Ch1>` to `\u003Ch6>`** :用于定义标题的标签,`\u003Ch1>` 表示最高级别的标题,`\u003Ch6>` 表示最低级别的标题。\n6. **`\u003Cp>`** :用于定义段落的标签,用来包裹一段文本。\n7. **`\u003Ca>`** :定义链接的标签,用于创建超链接到其他页面、文件或位置。\n8. **`\u003Cimg>`** :用于插入图像的标签,通过指定图像的路径来显示图像。\n9. **`\u003Cul>`** 和 **`\u003Col>`** :分别用于创建无序列表和有序列表,列表项使用 \\*\\*`\u003Cli>` \\*\\*标签包裹。\n10. **`\u003Cdiv>`** 和 **`\u003Cspan>`** :用于分组和包装其他 HTML 元素,用于样式化或操作组合的元素。\n11. **`\u003Ctable>`** 、**`\u003Ctr>`** 、**`\u003Cth>`** 和 **`\u003Ctd>`** :用于创建表格的标签,`\u003Ctable>` 定义表格,`\u003Ctr>` 定义行,`\u003Cth>` 定义表头单元格,`\u003Ctd>` 定义表格数据单元格。\n12. **`\u003Cform>`** 、**`\u003Cinput>`** 和 **`\u003Cbutton>`** :用于创建表单和接收用户输入的标签,`\u003Cform>` 定义表单,`\u003Cinput>` 定义输入字段,`\u003Cbutton>` 定义按钮。\n13. **`\u003Clabel>`** 和 **`\u003Ctextarea>`** :`\u003Clabel>` 用于为表单元素定义标签,`\u003Ctextarea>` 用于创建多行文本输入框。\n14. **`\u003Cheader>`** 、**`\u003Cnav>`** 和 **`\u003Cfooter>`** :用于定义页面的头部、导航和页脚区域。\n15. **`\u003Csection>`** 和 **`\u003Carticle>`** :用于定义文档的节和文章区域,用于更好地组织页面内容。\n\n## 块与行\n\n在 HTML 中,有两种主要的元素类型:块级元素和行内元素。它们在布局和渲染上有一些区别。\n\n**块级元素**(Block-level elements):\n\n* 块级元素通常会在新行上开始,并占据其父元素的整个可用宽度,从左到右水平填充。\n* 块级元素可以设置宽度、高度、内边距(padding)和外边距(margin)等样式属性。\n* 块级元素可以容纳其他块级元素和行内元素。\n\n常见的块级元素包括 `\u003Cdiv>`、`\u003Cp>`、`\u003Ch1>` 到 `\u003Ch6>`、`\u003Cul>`、`\u003Col>`、`\u003Cli>`、`\u003Ctable>`、`\u003Cform>` 等。它们的特点是可以独立成块,并占据一行或多行的空间。\n\n**行内元素**(Inline elements):\n\n* 行内元素通常不会在新行上开始,它们会尽可能地在同一行上显示,直到一行的空间不足以容纳它们,然后自动换行到下一行。\n* 行内元素的宽度和高度通常由其内容决定,无法直接设置。\n* 行内元素通常无法设置顶部和底部的外边距(margin),但可以设置左右外边距和内边距(padding)。\n\n常见的行内元素包括 `\u003Cspan>`、`\u003Ca>`、`\u003Cstrong>`、`\u003Cem>`、`\u003Cb>`、`\u003Ci>`、`\u003Cu>`、`\u003Cimg>`、`\u003Cinput>`、`\u003Clabel>` 等。它们的特点是在文本流中显示,并与周围的文本在同一行上。\n\n需要注意的是,HTML5 引入了一些新的元素和元素属性,例如 `\u003Cheader>`、`\u003Cnav>`、`\u003Carticle>`、`\u003Csection>` 等,它们的默认样式可能是块级或行内,但可以通过 CSS 来修改它们的显示属性。\n\n通过结合块级元素和行内元素的使用,可以实现更复杂和灵活的布局和设计,以满足不同的网页需求。\n\n### 块级元素和行内元素的区别\n\n1. **显示方式**:块级元素以块的形式显示,每个块级元素通常会另起一行,并占据其父元素的整个可用宽度。行内元素则以行的形式显示,尽可能在同一行上显示,直到一行的空间不足以容纳它们,然后自动换行到下一行。\n2. **尺寸**:块级元素可以设置宽度、高度、内边距(padding)和外边距(margin)等样式属性,可以独立控制它们的尺寸。行内元素的宽度和高度通常由其内容决定,无法直接设置。尽管一些行内元素可以设置水平方向的内边距和外边距,但无法设置顶部和底部的外边距。\n3. **元素之间的排列**:块级元素会在垂直方向上一个接一个地堆叠,每个块级元素占据独立的行空间。行内元素会在同一行上尽可能地显示,直到一行的空间不足以容纳它们,然后自动换行到下一行。\n4. **容纳内容**:块级元素可以容纳其他块级元素和行内元素,可以形成更大的块级结构。行内元素通常不能容纳块级元素,但可以包含其他行内元素。\n5. **默认样式** :块级元素的默认样式是 `display: block;`,行内元素的默认样式是 `display: inline;`。然而,HTML5 引入了一些新的元素和元素属性,它们的默认样式可能是块级或行内,但可以通过 CSS 来修改它们的显示属性。\n6. **语义化**:块级元素通常用于表示页面结构的主要部分,如段落、标题、列表、导航、页脚等。行内元素通常用于标记文本的不同部分或添加行内的强调、链接等。\n\n## 常见属性\n\nHTML 中的元素可以使用各种属性来提供附加的信息或控制元素的行为和样式。以下是一些常见的 HTML 属性:\n\n1. **`id`**:为元素定义唯一的标识符,通常用于在 CSS 和 JavaScript 中选择和操作元素。\n2. **`class`**:为元素定义一个或多个类名,用于选择和样式化一组元素。\n3. **`style`**:内联样式属性,用于为元素指定特定的样式,如颜色、字体大小、边框等。\n4. **`src`**:用于指定图像、音频、视频等媒体元素的源文件路径。\n5. **`href`**:用于指定链接元素的目标 URL,通常用于创建超链接。\n6. **`alt`**:用于为图像元素定义替代文本,当图像无法显示时,替代文本将被显示。\n7. **`width`** 和 **`height`**:用于指定图像、表格单元格或其他元素的宽度和高度。\n8. **`disabled`**:用于禁用表单元素或按钮,使其无法交互或点击。\n9. **`placeholder`**:用于在表单输入字段中提供提示性的占位符文本。\n10. **`required`**:用于指示表单输入字段是必填项,在提交表单时要求用户输入值。\n11. **`readonly`**:用于将表单输入字段设置为只读,用户无法编辑其中的内容。\n12. **`checked`**:用于选中复选框或单选按钮的默认选项。\n13. **`value`**:用于指定表单元素的默认值或用户输入的值。\n14. **`data-*`** :用于自定义数据属性,可以在元素中存储自定义数据,供 JavaScript 使用。\n\n## HTML5标签\n\nHTML5 引入了一些新的语义化标签,这些标签提供了更好的结构和含义,使开发人员能够更清晰地描述文档内容。以下是一些常见的 HTML5 标签:\n\n1. **`\u003Cheader>`** :表示文档或节的页眉部分,通常包含标题、导航和其他相关信息。\n2. **`\u003Cnav>`** :表示导航链接的容器,用于定义页面的主要导航。\n3. **`\u003Carticle>`** :表示独立的、完整的、可独立分发或可重复使用的内容块,如博客文章、新闻稿等。\n4. **`\u003Csection>`** :表示文档中的一个独立节或主题区域,可用于组织相关的内容。\n5. **`\u003Caside>`** :表示页面的侧边栏或附属内容,通常包含与主要内容相关但不是核心的信息。\n6. **`\u003Cmain>`** :表示文档的主要内容,每个文档应该只有一个 `\u003Cmain>` 元素。\n7. **`\u003Cfooter>`** :表示文档或节的页脚部分,通常包含版权信息、联系方式等。\n8. **`\u003Cfigure>`** 和 **`\u003Cfigcaption>`** :`\u003Cfigure>` 用于包含一组与主要文档流相关的图像、图表、照片等媒体,而 `\u003Cfigcaption>` 用于为这些媒体提供标题或说明。\n9. **`\u003Ctime>`** :用于表示日期、时间或时间范围,具有机器可读和人类可读的属性。\n10. **`\u003Cvideo>`** 和 **`\u003Caudio>`** :分别用于嵌入视频和音频内容,可以通过设置源文件路径和其他属性来控制媒体的播放。\n11. **`\u003Ccanvas>`** :用于通过 JavaScript 绘制图形、动画、图表等。\n12. **`\u003Cprogress>`** :表示任务的完成进度,例如文件上传进度、表单提交进度等。\n13. **`\u003Cform>`** 和 **`\u003Cinput>`** :`\u003Cform>` 用于创建表单,而 `\u003Cinput>` 用于定义输入字段。\n14. **`\u003Cdatalist>`** 和 **`\u003Coption>`** :`\u003Cdatalist>` 用于定义输入字段的选项列表,而 `\u003Coption>` 用于定义 `\u003Cdatalist>` 中的选项。\n\n## 表单\n\nHTML 表单是一种用于收集用户输入数据的机制,可以用来创建各种形式的交互,例如用户注册、搜索功能、提交评论等。以下是 HTML 表单的基本组成部分和相关元素:\n\n1. **`\u003Cform>` 元素** :用于创建表单,它包含了表单中的所有其他元素。`\u003Cform>` 元素具有 `action` 和 `method` 属性,用于定义表单提交的目标 URL 和请求方法。\n2. **`\u003Cinput>` 元素** :用于创建各种类型的输入字段,如文本输入、密码输入、单选按钮、复选框等。`\u003Cinput>` 元素具有多个不同的类型属性,例如 `type=\"text\"`、`type=\"password\"`、`type=\"radio\"` 等。\n3. **`\u003Ctextarea>` 元素**:用于创建多行文本输入字段,通常用于用户输入大段文本,如评论或消息。\n4. **`\u003Cselect>` 元素** 和 **`\u003Coption>` 元素** :`\u003Cselect>` 元素用于创建下拉选择框,而 `\u003Coption>` 元素用于定义下拉选项。用户可以从下拉列表中选择一个选项。\n5. **`\u003Cbutton>` 元素**:用于创建按钮,可以用作提交表单、重置表单或执行其他自定义操作。\n6. **`\u003Clabel>` 元素** :用于为表单元素创建标签,提供可点击的文本描述。`\u003Clabel>` 元素通常与相应的表单元素关联,通过 `for` 属性指定关联的表单元素的 `id` 值。\n7. **`\u003Cfieldset>` 元素** 和 **`\u003Clegend>` 元素** :`\u003Cfieldset>` 元素用于将表单元素分组,并可使用 `\u003Clegend>` 元素为分组创建标题。\n8. **`\u003Cinput type=\"submit\">`** 和 **`\u003Cinput type=\"reset\">`** :`\u003Cinput>` 元素的 `type` 属性可以设置为 `\"submit\"` 和 `\"reset\"`,用于创建提交按钮和重置按钮。\n9. **`\u003Cinput type=\"checkbox\">`** 和 **`\u003Cinput type=\"radio\">`** :`\u003Cinput>` 元素的 `type` 属性可以设置为 `\"checkbox\"` 和 `\"radio\"`,用于创建复选框和单选按钮。\n\n# HTML规范、命名经验、常规命名法和BEM命名法\n\n## HTML规范\n\nHTML 规范是由万维网联盟(W3C)制定和维护的一套标准,用于定义 HTML 的语法和行为,以确保在不同的浏览器和设备上一致地解释和呈现网页内容。以下是关于 HTML 规范的一些重要方面:\n\n1. **HTML5 规范**:HTML5 是最新的 HTML 规范版本,它引入了一些新的元素、属性和 API,提供更强大的语义化和功能。HTML5 规范于2014年推出,并持续更新和发展。\n2. **文档类型声明(DOCTYPE)** :HTML 规范要求在 HTML 文档的开头使用 DOCTYPE 声明来指定所使用的 HTML 版本。例如,`\u003C!DOCTYPE html>` 声明表示使用 HTML5。\n3. **语法规则**:HTML 规范定义了 HTML 的语法规则,包括标签的嵌套关系、属性的使用方式、元素的闭合等。遵循正确的语法是确保网页正确解析和渲染的关键。\n4. **语义化标签** :HTML 规范鼓励使用语义化标签来描述文档的结构和内容,例如 `\u003Cheader>`、`\u003Cnav>`、`\u003Carticle>` 等。这些标签提供了更准确的含义,有助于提高可访问性和搜索引擎优化。\n5. **属性和元素**:HTML 规范定义了各种属性和元素,用于控制元素的行为、样式和交互。规范中详细说明了每个属性和元素的可用取值、默认行为和浏览器支持情况。\n6. **表单和输入控件**:HTML 规范详细描述了如何创建表单和各种类型的输入控件,以便收集用户输入数据。\n7. **媒体元素** :HTML 规范提供了 `\u003Cimg>`、`\u003Cvideo>`、`\u003Caudio>` 等元素,用于嵌入图像、视频、音频等媒体内容。\n8. **脚本和样式**:HTML 规范定义了如何在 HTML 文档中嵌入 JavaScript 和 CSS 代码,以实现动态交互和样式化。\n9. **可访问性(Accessibility)** :HTML 规范关注可访问性,提供了一些属性和技术,用于使网页内容对残障用户更易访问。\n10. **浏览器兼容性**:HTML 规范努力确保在不同的浏览器和设备上一致地解释和呈现网页内容。然而,不同浏览器对规范的支持程度可能存在差异,开发人员需要注意浏览器兼容性问题,并使用适当的技术进行兼容性处理。\n\n## 命名经验\n\n在编写 HTML 代码时,使用良好的命名实践可以提高代码的可读性、可维护性和可扩展性。以下是一些HTML命名的经验:\n\n1. **语义化命名**:使用具有明确语义的名称来描述元素的用途和内容。选择能够准确描述元素的类名、ID和标签名,这有助于他人理解代码结构和意图。\n2. **简洁明了**:使用简短、清晰的名称,避免过长或复杂的命名。使用简洁的命名可以提高代码的可读性,使其更易于理解和维护。\n3. **一致性**:保持命名风格的一致性,遵循统一的命名约定。选择一种命名风格(如驼峰式命名、短横线分隔命名等)并坚持使用,以确保代码的一致性。\n4. **可读性**:选择易于阅读和理解的命名,使用有意义的单词或缩写。避免使用过于晦涩或难以理解的命名方式,以便其他开发人员能够轻松理解和维护代码。\n5. **避免保留字**:避免使用 HTML 或相关编程语言中的保留字作为命名,以防止出现冲突或意外行为。\n6. **可扩展性**:在命名中考虑到代码的可扩展性,选择能够适应未来变化和添加功能的命名。避免过于特定的命名,以便在需要扩展或修改代码时能够轻松进行调整。\n7. **语言规范**:根据所使用的编程语言和框架的命名规范,遵循相关的命名约定。例如,对于 CSS 类名,可以使用 BEM(块、元素、修饰符)命名规范。\n8. **可搜索性**:选择易于搜索和定位的命名,这有助于在代码库中进行查找和维护。使用一致的命名模式和约定,以便能够快速找到所需的元素或样式。\n\n## 常规命名法和BEM命名法\n\n### 常规命名法\n\n常规命名法是一种简单直接的命名方式,通常使用单词或简短的缩写来描述元素的用途或内容。以下是常规命名法的一些特点:\n\n1. **驼峰命名法** :使用首字母小写的单词,并将每个单词的首字母大写,形成一个单一的命名。例如,`headerSection`、`submitButton`。\n2. **短横线分隔命名法** :使用小写字母和短横线来分隔单词,描述元素的用途或内容。例如,`header-section`、`submit-button`。\n3. **下划线命名法** :使用小写字母和下划线来分隔单词,描述元素的用途或内容。例如,`header_section`、`submit_button`。\n\n常规命名法简单易懂,容易理解和记忆。它适用于小型项目或个人项目,不需要过多的命名约定和规范。\n\n### BEM命名法\n\nBEM(块、元素、修饰符)命名法是一种用于命名 CSS 类名的约定,它提供了一种更结构化和语义化的命名方式。以下是 BEM 命名法的一些特点:\n\n1. **块(Block)** :块是一个独立的、可重复使用的组件或模块,它代表一个完整的功能单元。块的类名使用单个单词或短横线分隔的单词,例如 `header`、`menu`。\n2. **元素(Element)** :元素是块的组成部分,它们只在特定块的上下文中有意义。元素的类名以块的类名作为前缀,使用双下划线连接,例如 `header__logo`、`menu__item`。\n3. **修饰符(Modifier)** :修饰符用于描述块或元素的状态、外观或行为变化。修饰符的类名以块或元素的类名作为前缀,使用单个单词或短横线分隔的单词,例如 `header--dark`、`menu__item--active`。\n\nBEM 命名法通过将类名分为块、元素和修饰符,提供了更清晰和可扩展的命名结构。它有助于减少样式冲突、提高代码可读性,并支持模块化和可重用性。\n","1718197064883507201","李文旺","https://file.jishuzhan.net/user/1718197064883507201/head.webp",[328],{"id":187,"name":188},1700277370000,"https://juejin.cn/post/7302260568642600979",{"id":332,"title":333,"description":334,"imgUrl":9,"views":335},"1725714456584916994","qiankun源码分析-7.css沙箱","css沙箱隔离的是css样式,主要是为了防止样式污染,关于样式污染又有一下四种情况:qiankun的css沙箱对于每种不同的场景都有不同的处理方式,下面我们来看一下qiankun是如何处理的。",11,{"id":337,"title":338,"description":339,"imgUrl":340,"views":341},"1725714504479674370","深度优化数据库性能:Linux 内核参数调整解析","点击上方蓝字关注我数据库服务器性能的优化是每个IT团队关注的焦点之一。除了数据库引擎的优化之外,合理调整操作系统的内核参数也是提高数据库性能的关键。本文将解析一些常见的 Linux 内核参数,以及它们在数据库服务器优化中的作用和建议的值。","https://file.jishuzhan.net/article/1725714504479674370/c3409bab7c22b21515cfa803ad703335.webp",4,["Reactive",343],{"$sisPC2":344},false,["Set"],["ShallowReactive",347],{"PAjRY75aBgVnDKjWXqzRrfrkUgCGfPiXeKPCTBSM0ME":-1,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":-1,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":-1,"pwF05uiDsD37-6cryNmWZWOQkrL7CXKJ0ctl_bWDjY4":-1,"XB2qELBTLB4fxuZ7UCdnLvUj1QBwq2b_mE3_XzZ7nUw":-1},true,"/article/1725714485928267778"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{env:"prod",apiRootUrl:"https://jishuzhan.net/api"},app:{baseURL:"/",buildId:"ab5c42e1-054a-430d-b75b-67d3003b8fad",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>