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/1944737971126710273" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>chao_789</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>9 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>frame 与新窗口切换操作【selenium 】</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>selenium</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>测试工具</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-88a210bf>·</span><span data-v-88a210bf>自动化</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/1944709765342474241" 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>11 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>工具分享--IP与域名提取工具</span><div class="article-recommend-list-item-tag-list" data-v-88a210bf><!--[--><!--[--><!----><span data-v-88a210bf>html</span><!--]--><!--]--></div></a><a href="/article/1944665468446486529" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>yk-ddm</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>14 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>JavaScript实现文件下载完整方案</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/1944584623467573249" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>SHIPKING393</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>20 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>【HTML】俄罗斯方块(精美版)</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>html</span><!--]--><!--]--></div></a><a href="/article/1944557394121502721" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>linksinke</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>21 小时前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>html案例:编写一个用于发布CSDN文章时,生成有关缩略图</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/1944418864028233729" 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>html</span><!--]--><!--]--></div></a><a href="/article/1944385347789565954" 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>HTML初学者第四天</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>html</span><!--]--><!--]--></div></a><a href="/article/1944270222470459394" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>rzl02</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>2 天前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>HTML/JOSN复习总结</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>html</span><!--]--><!--]--></div></a><a href="/article/1944039376387878914" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>Sapphire~</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>2 天前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>重学前端004 --- html 表单</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>html</span><!--]--><!--]--></div></a><a href="/article/1943991133578768385" class="article-recommend-list-item" data-v-88a210bf><div class="article-recommend-list-item-info" data-v-88a210bf><span data-v-88a210bf>gzzeason</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>2 天前</span></div><span class="article-recommend-list-item-title" data-v-88a210bf>在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><!--]--></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/1943908757423042562" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>01</span><span class="article-title" data-v-08dc960f>全球最强模型Grok4,国内已可免费使用!(附教程)</span></a><a href="/article/1895130586004066306" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>02</span><span class="article-title" data-v-08dc960f>KGG转MP3工具|非KGM文件|解密音频</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/1941831486268813313" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>04</span><span class="article-title" data-v-08dc960f>身弱武修法:玄之又玄,奇妙之门</span></a><a href="/article/1941800070998962178" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>05</span><span class="article-title" data-v-08dc960f>集群聊天服务器---MySQL数据库的建立</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/1941799747353882626" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>07</span><span class="article-title" data-v-08dc960f>使用Ruby接入实时行情API教程</span></a><a href="/article/1941829930819563521" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>08</span><span class="article-title" data-v-08dc960f>基于odoo17的设计模式详解---单例模式</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/1941795113562320897" class="article" data-v-08dc960f><span class="article-index" data-v-08dc960f>10</span><span class="article-title" data-v-08dc960f>LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力</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":344,"once":347,"_errors":348,"serverRendered":351,"path":352},["ShallowReactive",3],{"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":4,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":6,"pwF05uiDsD37-6cryNmWZWOQkrL7CXKJ0ctl_bWDjY4":181,"PAjRY75aBgVnDKjWXqzRrfrkUgCGfPiXeKPCTBSM0ME":207},{"adMap":5},["Map"],[7,24,50,67,80,100,112,128,144,170],{"id":8,"title":9,"description":10,"imgUrl":11,"views":12,"ownerId":13,"ownerName":14,"ownerHeadUrl":15,"tagList":16,"time":23},"1943908757423042562","全球最强模型Grok4,国内已可免费使用!(附教程)","马斯克的背水一战,大获全胜!2025年最值得期待的AI模型——Grok 4,终于来了!北京时间7月10日,马斯克旗下的人工智能公司xAI正式发布了Grok 4。","https://oss.xyyzone.com/jishuzhan/article/1943908757423042562/ba423de84c3160c87c9a366d15909b0f.webp",162,"1917120666256658433","康斯坦丁师傅","https://p3-passport.byteacctimg.com/img/user-avatar/1dbb89867dbf8665fd200fd5e8b70efb~300x300.image",[17,20],{"id":18,"name":19},39,"人工智能",{"id":21,"name":22},17224,"grok",1752298938000,{"id":25,"title":26,"description":27,"imgUrl":28,"views":29,"ownerId":30,"ownerName":31,"ownerHeadUrl":32,"tagList":33,"time":49},"1895130586004066306","KGG转MP3工具|非KGM文件|解密音频","本文章分为两部分老版本kgm转mp3项目新版本kgg转mp3项目先废话一下:在数字音乐时代,我们常常会遇到各种格式的音乐文件,其中酷狗音乐的KGM格式就是一种常见的专用格式。然而,这种格式在其他设备或播放器上可能无法直接播放,给用户带来了不便。为了解决这一问题,之前有个项目,推出了酷狗KGM转MP3或FLAC工具。它能够将酷狗音乐的KGM格式文件轻松转换为常见的MP3或FLAC格式,让你在任何设备上都能畅享音乐。","",2312,"1895130588738752513","FeiCat Henry","https://profile-avatar.csdnimg.cn/1db505df81b74eaba91034ff4b0b081a_mayiseeu.jpg",[34,37,40,43,46],{"id":35,"name":36},65,"科技",{"id":38,"name":39},97,"算法",{"id":41,"name":42},580,"音视频",{"id":44,"name":45},729,"软件工程",{"id":47,"name":48},2183,"视频编解码",1740669316000,{"id":51,"title":52,"description":53,"imgUrl":54,"views":55,"ownerId":56,"ownerName":57,"ownerHeadUrl":58,"tagList":59,"time":66},"1776928682707783681","Coze扣子平台完整体验和实践(附国内和国际版对比)","扣子是新一代一站式 AI Bot 开发平台。无论你是否有编程基础,都可以在扣子平台上快速搭建基于 AI 模型的各类问答 Bot,从解决简单的问答到处理复杂逻辑的对话。而且你可以将搭建的 Bot 发布到各类社交平台和通讯软件上,让更多的用户与你搭建的 Bot 聊天。","https://file.jishuzhan.net/article/1776928682707783681/30eaed1a757ea50fa9b12bed3b8baf5b.webp",6448,"1776928725728759809","霖溦","https://file.jishuzhan.net/user/1776928725728759809/head.webp",[60,63],{"id":61,"name":62},435,"aigc",{"id":64,"name":65},34576,"coze",1712487786000,{"id":68,"title":69,"description":70,"imgUrl":28,"views":71,"ownerId":72,"ownerName":73,"ownerHeadUrl":74,"tagList":75,"time":79},"1941831486268813313","身弱武修法:玄之又玄,奇妙之门","在生活的舞台上,身弱之人常常像是背着沉重枷锁的舞者,每一步都显得艰难而疲惫。他们可能只是简单地参与了一场日常的社交聚会,回家后却仿佛经历了一场大战,身心俱疲,需要花费大量时间才能恢复元气;又或者在工作中,仅仅处理一些常规事务,就感觉精力被迅速抽干,难以再集中精神应对后续的任务。情绪上,他们更是如同惊弓之鸟,别人一句不经意的话语、一个细微的表情变化,都可能在他们心中掀起惊涛骇浪,引发无尽的揣测与不安 。",196,"1685441638211522561","大鸡腿同学","https://file.jishuzhan.net/user/1685441638211522561/head.jpeg",[76],{"id":77,"name":78},55,"后端",1751803678000,{"id":81,"title":82,"description":83,"imgUrl":84,"views":85,"ownerId":86,"ownerName":87,"ownerHeadUrl":88,"tagList":89,"time":99},"1941800070998962178","集群聊天服务器---MySQL数据库的建立","user表friend表AllGroup表GroupUser表OfflineMessage表","https://i-blog.csdnimg.cn/direct/49f4143a7838473885dc644221ca5c8f.jpeg",233,"1923247076624945153","power 雀儿","https://profile-avatar.csdnimg.cn/a31b9bc100db408a88cd3b91d0fff3c9_2301_80140457.jpg",[90,93,96],{"id":91,"name":92},11,"服务器",{"id":94,"name":95},25,"数据库",{"id":97,"name":98},92,"mysql",1751796188000,{"id":101,"title":102,"description":103,"imgUrl":104,"views":105,"ownerId":106,"ownerName":107,"ownerHeadUrl":108,"tagList":109,"time":111},"1910888184269045761","扣子(coze)实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解","大家好,我是吾鳴。扣子平台是一个无技术背景的人也能用来搭建AI 智能体或者是AI 应用的平台,之前吾鳴有对它做过简单介绍——《不懂编程也能玩转AI智能体》。今天吾鳴要分享的是关于它的实战,吾鳴已经使用扣子跑通了一个AI应用,下面会对这个AI应用功能,以及实操过程做一个分享,感兴趣的朋友可以按照我的步骤搭建,你也可以拥有一个属于你的大模型AI 应用。","https://oss.xyyzone.com/jishuzhan/article/1910888184269045761/75e0b7a6e6a1500c90aa49aaf5ba6306.webp",563,"1910888232218329089","吾鳴","https://p3-passport.byteacctimg.com/img/user-avatar/d190d3ac84355d00e63c20ae3523c7cf~300x300.image",[110],{"id":18,"name":19},1744426220000,{"id":113,"title":114,"description":115,"imgUrl":28,"views":116,"ownerId":117,"ownerName":118,"ownerHeadUrl":119,"tagList":120,"time":127},"1941799747353882626","使用Ruby接入实时行情API教程","本教程将指导您如何使用Ruby接入实时行情API,以便从WebSocket获取实时金融交易数据。我们将一步步地讲解如何使用Ruby连接到Infoway API,接收实时数据,并定期发送心跳包保持连接稳定。",230,"1941799749530726402","Rockson","https://p6-passport.byteacctimg.com/img/mosaic-legacy/3795/3033762272~300x300.image",[121,124],{"id":122,"name":123},15,"javascript",{"id":125,"name":126},58,"python",1751796111000,{"id":129,"title":130,"description":131,"imgUrl":28,"views":132,"ownerId":133,"ownerName":134,"ownerHeadUrl":135,"tagList":136,"time":143},"1941829930819563521","基于odoo17的设计模式详解---单例模式","大家好,我是你的 Odoo 技术伙伴。在所有的设计模式中,单例模式(Singleton Pattern) 可能是最广为人知,也可能是被“滥用”最多的模式之一。它的概念极其简单:确保一个类只有一个实例,并提供一个全局访问点来获取这个实例。",217,"1941761047492341762","花好月圆春祺夏安","https://profile-avatar.csdnimg.cn/5fc3c6c89d4f446fb3b2d7f21f3a3004_weixin_44247470.jpg",[137,140],{"id":138,"name":139},187,"单例模式",{"id":141,"name":142},188,"设计模式",1751803307000,{"id":145,"title":146,"description":147,"imgUrl":148,"views":149,"ownerId":150,"ownerName":151,"ownerHeadUrl":152,"tagList":153,"time":169},"1887349524280643585","DeepSeek各版本说明与优缺点分析","DeepSeek是最近人工智能领域备受瞩目的一个语言模型系列,其在不同版本的发布过程中,逐步加强了对多种任务的处理能力。本文将详细介绍DeepSeek的各版本,从版本的发布时间、特点、优势以及不足之处,为广大AI技术爱好者和开发者提供一份参考指南。","https://i-blog.csdnimg.cn/direct/9670769f8a0a420f802c392e5040c0da.png",9158,"1879131884462542849","万事可爱^","https://profile-avatar.csdnimg.cn/4e8fa39d82dd4be4b556fabee43c301b_yyds_54.jpg",[154,157,160,163,166],{"id":155,"name":156},72,"深度学习",{"id":158,"name":159},202,"语言模型",{"id":161,"name":162},341,"nlp",{"id":164,"name":165},67787,"deepseek",{"id":167,"name":168},81240,"版本解释",1738814166000,{"id":171,"title":172,"description":173,"imgUrl":174,"views":175,"ownerId":176,"ownerName":177,"ownerHeadUrl":178,"tagList":179,"time":180},"1941795113562320897","LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力","近年来,大型语言模型在多个领域中展现出了卓越的泛化能力。然而,它们的推理能力仍有显著提升空间,尤其是在需要多步推理的场景中。尽管大型语言模型拥有广泛的知识,其推理过程往往未能有效地利用这些知识来建立连贯的思维范式。由于推理过程缺乏逻辑原则的约束,这些模型有时会产生幻觉。为了提升大型语言模型在零样本场景下的Chain-of-Thought推理能力,我们提出了LoT(Logical Thoughts),这是一种自我改进的提示框架,利用源自符号逻辑中的原则,尤其是归谬法(Reductio ad Absurdum","https://i-blog.csdnimg.cn/direct/6e22f2b587c142a398a4a3fe8207a5c3.png",207,"1789817304976986113","静心问道","https://file.jishuzhan.net/user/1789817304976986113/head.webp",[],1751795006000,{"id":182,"title":183,"description":184,"content":185,"imgUrl":28,"views":186,"ownerId":187,"ownerName":188,"ownerHeadUrl":189,"tagList":190,"time":194,"articleSourceUrl":195,"preArticle":196,"nextArticle":201},"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",0,"1718197064883507201","李文旺","https://file.jishuzhan.net/user/1718197064883507201/head.webp",[191],{"id":192,"name":193},353,"html",1700277370000,"https://juejin.cn/post/7302260568642600979",{"id":197,"title":198,"description":199,"imgUrl":28,"views":200},"1725714456584916994","qiankun源码分析-7.css沙箱","css沙箱隔离的是css样式,主要是为了防止样式污染,关于样式污染又有一下四种情况:qiankun的css沙箱对于每种不同的场景都有不同的处理方式,下面我们来看一下qiankun是如何处理的。",4,{"id":202,"title":203,"description":204,"imgUrl":205,"views":206},"1725714504479674370","深度优化数据库性能:Linux 内核参数调整解析","点击上方蓝字关注我数据库服务器性能的优化是每个IT团队关注的焦点之一。除了数据库引擎的优化之外,合理调整操作系统的内核参数也是提高数据库性能的关键。本文将解析一些常见的 Linux 内核参数,以及它们在数据库服务器优化中的作用和建议的值。","https://file.jishuzhan.net/article/1725714504479674370/c3409bab7c22b21515cfa803ad703335.webp",3,[208,235,246,258,271,284,296,308,320,331],{"id":209,"title":210,"description":211,"imgUrl":28,"views":212,"ownerId":213,"ownerName":214,"ownerHeadUrl":215,"tagList":216,"time":234},"1944737971126710273","frame 与新窗口切换操作【selenium 】","在浏览器自动化测试中,iframe 是一个特别的存在。它相当于在当前页面中嵌入了另一个独立的 HTML 页面。",2,"1914703499570511873","chao_789","https://profile-avatar.csdnimg.cn/d7873d01b90f4618888ba6be0305c325_chao_789.jpg",[217,220,221,224,227,230,233],{"id":218,"name":219},14,"前端",{"id":122,"name":123},{"id":222,"name":223},16,"css",{"id":225,"name":226},87,"selenium",{"id":228,"name":229},88,"测试工具",{"id":231,"name":232},336,"自动化",{"id":192,"name":193},1752496638000,{"id":236,"title":237,"description":238,"imgUrl":239,"views":212,"ownerId":240,"ownerName":241,"ownerHeadUrl":242,"tagList":243,"time":245},"1944709765342474241","工具分享--IP与域名提取工具","最近在干活的时候发现一个小工具,用于提取防火墙、态感等设备日志中的恶意域名和IP地址,并且带有自动去重、一键去重等功能,极大程度上提高了工作效率,豪用! 这是原文地址: https://mp.weixin.qq.com/s/irM4e7fcc-iiPRwfJ5lw_w 下面是我改良之后的版本,新增了两个功能点 1、处理模式分为两个: 唯一IP模式:完全移除重复IP,仅保留出现一次的IP,这个可以用来对照防火墙实际封禁IP与每日记录的封禁名单有什么差别。 传统去重模式:保留重复IP的一个实例。 2、重复IP","https://i-blog.csdnimg.cn/direct/658767e713634d55b88df68d29419b33.png","1944709768957964289","江湖伤心人","https://profile-avatar.csdnimg.cn/6fa1fc5b2de44f72b7c908bdcb5e7046_natai9.jpg",[244],{"id":192,"name":193},1752489913000,{"id":247,"title":248,"description":249,"imgUrl":28,"views":212,"ownerId":250,"ownerName":251,"ownerHeadUrl":252,"tagList":253,"time":257},"1944665468446486529","JavaScript实现文件下载完整方案","这个扩展版本增加了以下细节:","1688467844196470785","yk-ddm","https://file.jishuzhan.net/user/1688467844196470785/head.jpeg",[254,255,256],{"id":218,"name":219},{"id":122,"name":123},{"id":192,"name":193},1752479352000,{"id":259,"title":260,"description":261,"imgUrl":262,"views":263,"ownerId":264,"ownerName":265,"ownerHeadUrl":266,"tagList":267,"time":270},"1944584623467573249","【HTML】俄罗斯方块(精美版)","目录一、页面效果1.1 开始界面1.2 游戏界面1.3 游戏结束界面二、怎么运行三、执行代码四、游戏主要功能","https://i-blog.csdnimg.cn/direct/8fdb9a2d7d0f4328b25ab0c0ff1f8f62.png",1,"1911692970287497218","SHIPKING393","https://profile-avatar.csdnimg.cn/ed6b4a4dbe544fdfa2f7d4621448fe7c_qq_62223405.jpg",[268,269],{"id":218,"name":219},{"id":192,"name":193},1752460077000,{"id":272,"title":273,"description":274,"imgUrl":275,"views":206,"ownerId":276,"ownerName":277,"ownerHeadUrl":278,"tagList":279,"time":283},"1944557394121502721","html案例:编写一个用于发布CSDN文章时,生成有关缩略图","CSDN博客文章缩略图生成器起因:html制作界面 界面分上下两块区域,上面是参数配置,下面是效果预览图。","https://i-blog.csdnimg.cn/direct/69871ecd0d244e8fbaec74a5116e161f.jpeg","1727237793630916610","linksinke","https://file.jishuzhan.net/user/1727237793630916610/head.webp",[280,281,282],{"id":218,"name":219},{"id":122,"name":123},{"id":192,"name":193},1752453585000,{"id":285,"title":286,"description":287,"imgUrl":28,"views":263,"ownerId":288,"ownerName":289,"ownerHeadUrl":290,"tagList":291,"time":295},"1944418864028233729","防抖与节流:如何让频繁触发的函数 “慢下来”?","在前端开发中,有些事件会被 “高频触发”—— 比如输入框打字时每秒触发多次keyup,滚动页面时每秒触发几十次scroll,快速点击按钮时瞬间触发多次click。如果每次触发都执行复杂逻辑(如发送请求、计算布局),会严重拖慢页面,甚至导致卡顿。","1929058134059954177","然我","https://p9-passport.byteacctimg.com/img/user-avatar/d810236c6397044e1c4485b1a4ebea89~300x300.image",[292,293,294],{"id":218,"name":219},{"id":122,"name":123},{"id":192,"name":193},1752420557000,{"id":297,"title":298,"description":299,"imgUrl":28,"views":300,"ownerId":301,"ownerName":302,"ownerHeadUrl":303,"tagList":304,"time":307},"1944385347789565954","HTML初学者第四天","在HTML标签中,\u003Cimg>标签用于定义HTML页面中的图像。src是\u003Cimg>标签的必须属性,它用于指定图像文件的路径名好和文件名",6,"1941588141919481857","祝余呀","https://profile-avatar.csdnimg.cn/88c8f6540ac04d7987f6f089b440408e_2302_80368910.jpg",[305,306],{"id":218,"name":219},{"id":192,"name":193},1752412566000,{"id":309,"title":310,"description":311,"imgUrl":312,"views":212,"ownerId":313,"ownerName":314,"ownerHeadUrl":315,"tagList":316,"time":319},"1944270222470459394","HTML/JOSN复习总结","什么是 HTML? 1.HTML是一门语言,所有的网页都是用HTML这门语言编写出来的2.HTML(HyperText Markup Language):超文本标记语言。","https://i-blog.csdnimg.cn/direct/67cc10a78d1943d5bf753a61822062ce.jpeg","1887677312690819073","rzl02","https://profile-avatar.csdnimg.cn/default.jpg",[317,318],{"id":218,"name":219},{"id":192,"name":193},1752385118000,{"id":321,"title":322,"description":323,"imgUrl":28,"views":263,"ownerId":324,"ownerName":325,"ownerHeadUrl":326,"tagList":327,"time":330},"1944039376387878914","重学前端004 --- html 表单","method 属性指定了如何将表单数据发送到 action 属性中指定的 URL。 表单数据可以通过 GET 请求作为 URL 参数发送(method=“get”)或通过 POST 请求作为请求正文中的数据发送(method=“post”)。","1763840256169218050","Sapphire~","https://file.jishuzhan.net/user/1763840256169218050/head.webp",[328,329],{"id":218,"name":219},{"id":192,"name":193},1752330080000,{"id":332,"title":333,"description":334,"imgUrl":335,"views":263,"ownerId":336,"ownerName":337,"ownerHeadUrl":338,"tagList":339,"time":343},"1943991133578768385","在HTML中CSS三种使用方式","在标签\u003C>中输入style = \"属性:属性值;\"。(中等使用频率)不利于CSS样式的复用;违背了CSS内容和样式分离的设计理念,后期难以维护。","https://i-blog.csdnimg.cn/direct/46a9ebf3099c419cbd3d1155bef25174.png","1942831927047794690","gzzeason","https://i-avatar.csdnimg.cn/1f1bfa96b3004e5d8de19c574076ad16_qq_62914927.jpg",[340,341,342],{"id":218,"name":219},{"id":222,"name":223},{"id":192,"name":193},1752318578000,["Reactive",345],{"$sisPC2":346},false,["Set"],["ShallowReactive",349],{"PAjRY75aBgVnDKjWXqzRrfrkUgCGfPiXeKPCTBSM0ME":350,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":350,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":350,"pwF05uiDsD37-6cryNmWZWOQkrL7CXKJ0ctl_bWDjY4":350,"xYAQnk_tz34o3ZHnsHLoP0QYHlzGBbB1IfKrrS0SC1A":350},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>