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-88a210bf></span><div class="article-tag-list" data-v-88a210bf><!--[--><a href="/tag/353" class="" data-v-88a210bf><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-88a210bf><!--v-if--><span class=""><!--[-->html<!--]--></span></button></a><!--]--></div><div class="article-pre-next" data-v-88a210bf><div data-v-88a210bf><a href="/article/1725714456584916994" class="" data-v-88a210bf><span data-v-88a210bf>上一篇:</span><span class="article-pre-next-item-title" data-v-88a210bf>qiankun源码分析-7.css沙箱</span></a></div><div data-v-88a210bf><a href="/article/1725714504479674370" class="" data-v-88a210bf><span data-v-88a210bf>下一篇:</span><span class="article-pre-next-item-title" data-v-88a210bf>深度优化数据库性能: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-88a210bf></ins><!----><div class="article-recommend-card" data-v-88a210bf><span class="article-recommend-card-title" data-v-88a210bf>相关推荐</span><div class="el-divider el-divider--horizontal" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><div class="article-recommend-list" data-v-88a210bf><!--[--><a href="/article/1942134340170854402" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>ac.char</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>11 分钟前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>Golang读取ZIP压缩包并显示Gin静态html网站</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>golang</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>html</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>gin</span><!--]--><!--]--></div></a><a href="/article/1942131348193456130" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>每天开心</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>23 分钟前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>深入理解 CSS 选择器:从基础到高级</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>html</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>ai编程</span><!--]--><!--]--></div></a><a href="/article/1942120893563580417" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>撰卢</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>如何提高网站加载速度速度</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>html</span><!--]--><!--]--></div></a><a href="/article/1942116148308389890" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>sophister</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>1 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>Flex 布局中容易踩的那些坑,你踩过几个?</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>html</span><!--]--><!--]--></div></a><a href="/article/1942064718415441921" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>呆呆的心</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>5 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>html</span><!--]--><!--]--></div></a><a href="/article/1942061627725099010" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>WildBlue</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>5 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>html</span><!--]--><!--]--></div></a><a href="/article/1942056834050863105" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>wuxuanok</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>5 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>Web前端开发-HTML、CSS</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>html</span><!--]--><!--]--></div></a><a href="/article/1942050371920244737" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>namehu</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>6 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>html</span><!--]--><!--]--></div></a><a href="/article/1942049377874391041" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>shawn_yang</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>6 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>使用 vite 开发原生 html 网页</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>html</span><!--]--><!--]--></div></a><a href="/article/1942013364951101442" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>棉花糖超人</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-88a210bf><!--v-if--></div><span data-v-88a210bf>8 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>【从0-1的CSS】第3篇:盒子模型与弹性布局</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>css</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>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-88a210bf></ins><!----></div><div class="right" data-v-88a210bf><div class="right-body" data-v-88a210bf><div class="hot-article-rank hot-article-rank-wrapper" data-v-88a210bf data-v-08dc960f><span class="title" data-v-08dc960f>热门推荐</span><div class="el-divider el-divider--horizontal" style="--el-border-style:solid;" role="separator" data-v-08dc960f><!--v-if--></div><div class="article-list" data-v-08dc960f><!--[--><a href="/article/1941800070998962178" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>01</span><span class="article-title" data-v-08dc960f>集群聊天服务器---MySQL数据库的建立</span></a><a href="/article/1875033231301021697" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>02</span><span class="article-title" data-v-08dc960f>GPU 进阶笔记(二):华为昇腾 910B GPU</span></a><a href="/article/1776928682707783681" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>03</span><span class="article-title" data-v-08dc960f>Coze扣子平台完整体验和实践(附国内和国际版对比)</span></a><a href="/article/1941799747353882626" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>04</span><span class="article-title" data-v-08dc960f>使用Ruby接入实时行情API教程</span></a><a href="/article/1769137876592758785" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>05</span><span class="article-title" data-v-08dc960f>Word粘贴时出现“运行时错误53,文件未找到:MathPage.WLL“的解决方案</span></a><a href="/article/1910888184269045761" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>06</span><span class="article-title" data-v-08dc960f>扣子(coze)实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解</span></a><a href="/article/1941831684076384257" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>07</span><span class="article-title" data-v-08dc960f>Java学习第十五部分——MyBatis</span></a><a href="/article/1913906014938251265" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>08</span><span class="article-title" data-v-08dc960f>扣子空间的使用教程与大模型技术思考</span></a><a href="/article/1887349524280643585" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>09</span><span class="article-title" data-v-08dc960f>DeepSeek各版本说明与优缺点分析</span></a><a href="/article/1941831843472519169" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>10</span><span class="article-title" data-v-08dc960f>基于odoo17的设计模式详解---装饰模式</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":337,"once":340,"_errors":341,"serverRendered":344,"path":345},["ShallowReactive",3],{"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":4,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":6,"PAjRY75aBgVnDKjWXqzRrfrkUgCGfPiXeKPCTBSM0ME":178,"pwF05uiDsD37-6cryNmWZWOQkrL7CXKJ0ctl_bWDjY4":315},{"adMap":5},["Map"],[7,27,41,58,75,92,105,125,137,163],{"id":8,"title":9,"description":10,"imgUrl":11,"views":12,"ownerId":13,"ownerName":14,"ownerHeadUrl":15,"tagList":16,"time":26},"1941800070998962178","集群聊天服务器---MySQL数据库的建立","user表friend表AllGroup表GroupUser表OfflineMessage表","https://i-blog.csdnimg.cn/direct/49f4143a7838473885dc644221ca5c8f.jpeg",40,"1923247076624945153","power 雀儿","https://profile-avatar.csdnimg.cn/a31b9bc100db408a88cd3b91d0fff3c9_2301_80140457.jpg",[17,20,23],{"id":18,"name":19},11,"服务器",{"id":21,"name":22},25,"数据库",{"id":24,"name":25},92,"mysql",1751796188000,{"id":28,"title":29,"description":30,"imgUrl":31,"views":32,"ownerId":33,"ownerName":34,"ownerHeadUrl":35,"tagList":36,"time":40},"1875033231301021697","GPU 进阶笔记(二):华为昇腾 910B GPU","大家读完觉得有意义记得关注和点赞!!!大部分人目前还是对 NVIDIA GPU 更熟悉,所以先做一个大致对照,方便快速了解华为 GPU 产品和生态:","https://i-blog.csdnimg.cn/img_convert/c8e4ebabadff517d6bc236d25e6d8c1d.png",215,"1740354010960891905","hao_wujing","https://file.jishuzhan.net/user/1740354010960891905/head.webp",[37],{"id":38,"name":39},1659,"gpu算力",1735877733000,{"id":42,"title":43,"description":44,"imgUrl":45,"views":46,"ownerId":47,"ownerName":48,"ownerHeadUrl":49,"tagList":50,"time":57},"1776928682707783681","Coze扣子平台完整体验和实践(附国内和国际版对比)","扣子是新一代一站式 AI Bot 开发平台。无论你是否有编程基础,都可以在扣子平台上快速搭建基于 AI 模型的各类问答 Bot,从解决简单的问答到处理复杂逻辑的对话。而且你可以将搭建的 Bot 发布到各类社交平台和通讯软件上,让更多的用户与你搭建的 Bot 聊天。","https://file.jishuzhan.net/article/1776928682707783681/30eaed1a757ea50fa9b12bed3b8baf5b.webp",6395,"1776928725728759809","霖溦","https://file.jishuzhan.net/user/1776928725728759809/head.webp",[51,54],{"id":52,"name":53},435,"aigc",{"id":55,"name":56},34576,"coze",1712487786000,{"id":59,"title":60,"description":61,"imgUrl":62,"views":63,"ownerId":64,"ownerName":65,"ownerHeadUrl":66,"tagList":67,"time":74},"1941799747353882626","使用Ruby接入实时行情API教程","本教程将指导您如何使用Ruby接入实时行情API,以便从WebSocket获取实时金融交易数据。我们将一步步地讲解如何使用Ruby连接到Infoway API,接收实时数据,并定期发送心跳包保持连接稳定。","",39,"1941799749530726402","Rockson","https://p6-passport.byteacctimg.com/img/mosaic-legacy/3795/3033762272~300x300.image",[68,71],{"id":69,"name":70},15,"javascript",{"id":72,"name":73},58,"python",1751796111000,{"id":76,"title":77,"description":78,"imgUrl":79,"views":80,"ownerId":81,"ownerName":82,"ownerHeadUrl":83,"tagList":84,"time":91},"1769137876592758785","Word粘贴时出现“运行时错误53,文件未找到:MathPage.WLL“的解决方案","在安装完MathType后,打开word复制粘贴时报错“运行时错误53,文件未找到:MathPage.WLL”","https://file.jishuzhan.net/article/1769137876592758785/c47f97174b41bba84d279da0f5917197.webp",126,"1731565219823489026","雪落山庄","https://file.jishuzhan.net/user/1731565219823489026/head.webp",[85,88],{"id":86,"name":87},442,"word",{"id":89,"name":90},12799,"visio",1710630313000,{"id":93,"title":94,"description":95,"imgUrl":96,"views":97,"ownerId":98,"ownerName":99,"ownerHeadUrl":100,"tagList":101,"time":104},"1910888184269045761","扣子(coze)实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解","大家好,我是吾鳴。扣子平台是一个无技术背景的人也能用来搭建AI 智能体或者是AI 应用的平台,之前吾鳴有对它做过简单介绍——《不懂编程也能玩转AI智能体》。今天吾鳴要分享的是关于它的实战,吾鳴已经使用扣子跑通了一个AI应用,下面会对这个AI应用功能,以及实操过程做一个分享,感兴趣的朋友可以按照我的步骤搭建,你也可以拥有一个属于你的大模型AI 应用。","https://oss.xyyzone.com/jishuzhan/article/1910888184269045761/75e0b7a6e6a1500c90aa49aaf5ba6306.webp",544,"1910888232218329089","吾鳴","https://p3-passport.byteacctimg.com/img/user-avatar/d190d3ac84355d00e63c20ae3523c7cf~300x300.image",[102],{"id":63,"name":103},"人工智能",1744426220000,{"id":106,"title":107,"description":108,"imgUrl":109,"views":110,"ownerId":111,"ownerName":112,"ownerHeadUrl":113,"tagList":114,"time":124},"1941831684076384257","Java学习第十五部分——MyBatis","目录一.概述二.特点三.组件四.Mapper五.配置文件六.使用步骤七.高级功能八.优点缺点九.项目实战","https://i-blog.csdnimg.cn/direct/644f01d988744a12adec2a8a35324468.png",36,"1941831687796731906","慕y274","https://profile-avatar.csdnimg.cn/default.jpg",[115,118,121],{"id":116,"name":117},3,"java",{"id":119,"name":120},84,"学习",{"id":122,"name":123},577,"mybatis",1751803725000,{"id":126,"title":127,"description":128,"imgUrl":129,"views":130,"ownerId":131,"ownerName":132,"ownerHeadUrl":133,"tagList":134,"time":136},"1913906014938251265","扣子空间的使用教程与大模型技术思考","在当今数字化时代,电商行业竞争激烈,为用户提供精准的商品推荐服务成为提高用户购买转化率和满意度的关键。扣子空间作为字节跳动推出的AI应用开发平台,为电商公司开展商品推荐项目提供了强大的支持。本文将以某电商公司在扣子空间开展商品推荐项目为例,详细阐述扣子空间的各项功能在项目中的应用,并融入对智能体、MCP与RAG等大模型技术的集体性思考。","https://oss.xyyzone.com/jishuzhan/article/1913906014938251265/b64448847efe4709edb46bb631a5bb7d.webp",337,"1913906018461466626","快乐小杜","https://p6-passport.byteacctimg.com/img/user-avatar/d900228b93c26c0bbb582aa657aa07c5~300x300.image",[135],{"id":63,"name":103},1745145727000,{"id":138,"title":139,"description":140,"imgUrl":141,"views":142,"ownerId":143,"ownerName":144,"ownerHeadUrl":145,"tagList":146,"time":162},"1887349524280643585","DeepSeek各版本说明与优缺点分析","DeepSeek是最近人工智能领域备受瞩目的一个语言模型系列,其在不同版本的发布过程中,逐步加强了对多种任务的处理能力。本文将详细介绍DeepSeek的各版本,从版本的发布时间、特点、优势以及不足之处,为广大AI技术爱好者和开发者提供一份参考指南。","https://i-blog.csdnimg.cn/direct/9670769f8a0a420f802c392e5040c0da.png",9104,"1879131884462542849","万事可爱^","https://profile-avatar.csdnimg.cn/4e8fa39d82dd4be4b556fabee43c301b_yyds_54.jpg",[147,150,153,156,159],{"id":148,"name":149},72,"深度学习",{"id":151,"name":152},202,"语言模型",{"id":154,"name":155},341,"nlp",{"id":157,"name":158},67787,"deepseek",{"id":160,"name":161},81240,"版本解释",1738814166000,{"id":164,"title":165,"description":166,"imgUrl":62,"views":167,"ownerId":168,"ownerName":169,"ownerHeadUrl":170,"tagList":171,"time":177},"1941831843472519169","基于odoo17的设计模式详解---装饰模式","大家好,我是你的Odoo技术伙伴。在Odoo开发中,我们最常遇到的一个需求是:“我需要在不修改Odoo核心代码的前提下,为某个模型(比如‘联系人’)增加一个字段,并扩展它的某个方法。” 这个场景,正是装饰模式(Decorator Pattern) 大放异彩的地方。今天,我们将深入探讨这个强大而优雅的设计模式,并揭示Odoo是如何通过其独特的继承机制,将装饰模式的精髓发挥到极致,同时完全遵从Odoo 17最新的视图规范。",35,"1941761047492341762","花好月圆春祺夏安","https://profile-avatar.csdnimg.cn/5fc3c6c89d4f446fb3b2d7f21f3a3004_weixin_44247470.jpg",[172,173,174],{"id":21,"name":22},{"id":72,"name":73},{"id":175,"name":176},188,"设计模式",1751803763000,[179,198,214,229,242,254,268,281,292,302],{"id":180,"title":181,"description":182,"imgUrl":62,"views":183,"ownerId":184,"ownerName":185,"ownerHeadUrl":186,"tagList":187,"time":197},"1942134340170854402","Golang读取ZIP压缩包并显示Gin静态html网站","要实现从ZIP压缩包读取内容并作为Gin静态网站显示, 可以分以下几个步骤完成:Golang标准库中的archive/zip包提供了处理ZIP文件的功能。我们可以使用它来读取ZIP文件内容:",0,"1697550705939714049","ac.char","https://file.jishuzhan.net/user/1697550705939714049/head.png",[188,191,194],{"id":189,"name":190},239,"golang",{"id":192,"name":193},353,"html",{"id":195,"name":196},1798,"gin",1751875884000,{"id":199,"title":200,"description":201,"imgUrl":62,"views":183,"ownerId":202,"ownerName":203,"ownerHeadUrl":204,"tagList":205,"time":213},"1942131348193456130","深入理解 CSS 选择器:从基础到高级","CSS(层叠样式表)是网页设计中不可或缺的一部分,它通过选择器来定位 HTML 文档中的元素,并为这些元素定义样式。掌握 CSS 选择器是前端开发的核心技能之一。本文将从最基础的选择器讲起,逐步深入到高级、复杂的结构和伪类/伪元素选择器,帮助你全面掌握 CSS 选择器的使用。","1930448553951932417","每天开心","https://p3-passport.byteacctimg.com/img/user-avatar/492b72e1053e4c54a435632c22c4945c~300x300.image",[206,209,210],{"id":207,"name":208},16,"css",{"id":192,"name":193},{"id":211,"name":212},1235,"ai编程",1751875171000,{"id":215,"title":216,"description":217,"imgUrl":218,"views":183,"ownerId":219,"ownerName":220,"ownerHeadUrl":113,"tagList":221,"time":228},"1942120893563580417","如何提高网站加载速度速度","注意img标签的loading属性默认是eager将css 和js进行分模块划分,这样每个页面只用少量的css和js了","https://i-blog.csdnimg.cn/direct/e3458f50c8f248378b74900dc413cc4f.png","1921534224914567169","撰卢",[222,225,226,227],{"id":223,"name":224},14,"前端",{"id":69,"name":70},{"id":207,"name":208},{"id":192,"name":193},1751872678000,{"id":230,"title":231,"description":232,"imgUrl":62,"views":233,"ownerId":234,"ownerName":235,"ownerHeadUrl":236,"tagList":237,"time":241},"1942116148308389890","Flex 布局中容易踩的那些坑,你踩过几个?","在日常开发中,Flex 布局几乎是写页面绕不过去的一道坎。它强大、灵活,看起来也“简单易用”,但一旦涉及复杂嵌套和内容溢出,很多同学就懵了,明明写了 flex: 1,为什么内容却把整个布局撑爆了?又或者明明设置了 flex-basis: 0%,但布局偏偏不听话?",1,"1912326652450897922","sophister","https://p26-passport.byteacctimg.com/img/user-avatar/4ab7d65757727e36e94e0a57032d54fb~300x300.image",[238,239,240],{"id":223,"name":224},{"id":207,"name":208},{"id":192,"name":193},1751871547000,{"id":243,"title":244,"description":245,"imgUrl":62,"views":233,"ownerId":246,"ownerName":247,"ownerHeadUrl":248,"tagList":249,"time":253},"1942064718415441921","揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨","作为前端开发者,你是否经常遇到这样的场景:为了一个小小的箭头、一条特殊的下划线,不得不给 HTML 里塞一堆多余的标签?其实,CSS 伪元素早就为我们准备了更优雅的解决方案!今天就带大家全方位解锁伪元素的用法,看完直接省掉 30% 的冗余标签 🚀","1929072583198158850","呆呆的心","https://p3-passport.byteacctimg.com/img/user-avatar/444bed4f8cebe284679a76b7d884a12f~300x300.image",[250,251,252],{"id":223,"name":224},{"id":207,"name":208},{"id":192,"name":193},1751859285000,{"id":255,"title":256,"description":257,"imgUrl":258,"views":259,"ownerId":260,"ownerName":261,"ownerHeadUrl":262,"tagList":263,"time":267},"1942061627725099010","🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏","女朋友:\"你平时都干啥?\" 程序员:\"写Blob!\" 女朋友:\"什么?Blob是什么鬼?\" 程序员:\"...我需要解释_Blob_是什么吗?\"","https://oss.xyyzone.com/jishuzhan/article/1942061627725099010/d991d51bb102087e7307bcb7727b7f5b.webp",2,"1929823740862443521","WildBlue","https://p9-passport.byteacctimg.com/img/user-avatar/2c3dfe2c5b98b237a65027c86e784bc4~300x300.image",[264,265,266],{"id":223,"name":224},{"id":69,"name":70},{"id":192,"name":193},1751858548000,{"id":269,"title":270,"description":271,"imgUrl":272,"views":259,"ownerId":273,"ownerName":274,"ownerHeadUrl":275,"tagList":276,"time":280},"1942056834050863105","Web前端开发-HTML、CSS","Alt + B :在Vs Code 可以直接在浏览器打开当前页面","https://i-blog.csdnimg.cn/direct/1da9b934daf84be98e7807efbc944616.png","1934164668767055874","wuxuanok","https://i-avatar.csdnimg.cn/a9d2e54958bc420697db0efe0d2ea015_wuxuanok.jpg",[277,278,279],{"id":223,"name":224},{"id":207,"name":208},{"id":192,"name":193},1751857405000,{"id":282,"title":283,"description":284,"imgUrl":62,"views":259,"ownerId":285,"ownerName":286,"ownerHeadUrl":287,"tagList":288,"time":291},"1942050371920244737","“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南","作为一名资深的前端开发工程师,我深知线上项目稳定运行的重要性。然而,在前端领域,视频播放问题常常是让人头疼的“老大难”。最近,我就遇到了一个典型的案例,让我有机会深入剖析移动端,尤其是 iOS 设备上的视频播放兼容性问题。","1941011967673675778","namehu","https://p3-passport.byteacctimg.com/img/mosaic-legacy/3795/3047680722~300x300.image",[289,290],{"id":69,"name":70},{"id":192,"name":193},1751855864000,{"id":293,"title":294,"description":295,"imgUrl":62,"views":259,"ownerId":296,"ownerName":297,"ownerHeadUrl":298,"tagList":299,"time":301},"1942049377874391041","使用 vite 开发原生 html 网页","需要解决的问题","1942049380764266497","shawn_yang","https://p26-passport.byteacctimg.com/img/user-avatar/37aaf9ba20d5e746d06f4f4b80dcd03a~300x300.image",[300],{"id":192,"name":193},1751855627000,{"id":303,"title":304,"description":305,"imgUrl":306,"views":233,"ownerId":307,"ownerName":308,"ownerHeadUrl":309,"tagList":310,"time":314},"1942013364951101442","【从0-1的CSS】第3篇:盒子模型与弹性布局","盒子模型是网页设计中一种很重要的思维模型,即把网页中的每个元素都看做是一个盒子。这个盒子模型主要是由四个部分组成:内容区content、内边距padding、边框border、外边距margin。","https://i-blog.csdnimg.cn/img_convert/cbe6c813fbabcfbac0ce8f9111595f35.png","1929800113509150722","棉花糖超人","https://profile-avatar.csdnimg.cn/d5b1b0cd57914c27a0655d47e27be8e7_justilake.jpg",[311,312,313],{"id":223,"name":224},{"id":207,"name":208},{"id":192,"name":193},1751847041000,{"id":316,"title":317,"description":318,"content":319,"imgUrl":62,"views":183,"ownerId":320,"ownerName":321,"ownerHeadUrl":322,"tagList":323,"time":325,"articleSourceUrl":326,"preArticle":327,"nextArticle":332},"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",[324],{"id":192,"name":193},1700277370000,"https://juejin.cn/post/7302260568642600979",{"id":328,"title":329,"description":330,"imgUrl":62,"views":331},"1725714456584916994","qiankun源码分析-7.css沙箱","css沙箱隔离的是css样式,主要是为了防止样式污染,关于样式污染又有一下四种情况:qiankun的css沙箱对于每种不同的场景都有不同的处理方式,下面我们来看一下qiankun是如何处理的。",4,{"id":333,"title":334,"description":335,"imgUrl":336,"views":259},"1725714504479674370","深度优化数据库性能:Linux 内核参数调整解析","点击上方蓝字关注我数据库服务器性能的优化是每个IT团队关注的焦点之一。除了数据库引擎的优化之外,合理调整操作系统的内核参数也是提高数据库性能的关键。本文将解析一些常见的 Linux 内核参数,以及它们在数据库服务器优化中的作用和建议的值。","https://file.jishuzhan.net/article/1725714504479674370/c3409bab7c22b21515cfa803ad703335.webp",["Reactive",338],{"$sisPC2":339},false,["Set"],["ShallowReactive",342],{"PAjRY75aBgVnDKjWXqzRrfrkUgCGfPiXeKPCTBSM0ME":343,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":343,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":343,"pwF05uiDsD37-6cryNmWZWOQkrL7CXKJ0ctl_bWDjY4":343,"xYAQnk_tz34o3ZHnsHLoP0QYHlzGBbB1IfKrrS0SC1A":343},null,true,"/article/1725714485928267778"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{env:"prod",apiRootUrl:"https://jishuzhan.net/api"},app:{baseURL:"/",buildId:"48e4596c-8d0d-4882-a865-3b0a536dc4b3",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>