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

适余
369 阅读18分钟

✊不积跬步，无以至千里；不积小流，无以成江海

之前写过的笔记链接：

[关于起源 常用标签1](📝 HTML入门笔记1 (yuque.com))

[关于常用标签2 如table](📝 HTML入门笔记2 - 常用标签 (yuque.com))

面试时的复习点

HTML的头，和meta标签，script，link，以及script里面的link defer。

常见头

关于常见的HTML头，下面有解释。

meta标签

meta标签是 HTML 中用于提供关于网页的元数据的重要标签，它通常放置在<head>标签内。这些元数据对于网页的正确显示、搜索引擎优化以及与其他系统的交互都起着关键作用。具体如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是一个关于科技新闻的网页，提供最新的科技动态和资讯。">
    <meta name="keywords" content="科技新闻,科技动态,科技资讯">
    <meta name="author" content="张三">
    <title>科技新闻网</title>
</head>

<body>
    <h1>欢迎来到科技新闻网</h1>
    <p>这里有最新的科技动态和资讯。</p>
</body>

</html>

这些元数据不会显示在页面上，但对于机器（如搜索引擎爬虫）是可读的，并且可以用于定义页面的某些行为。

script标签

<script>标签用于嵌入或引用JavaScript代码。以下是<script>标签中可用的所有属性：

  1. async：表示脚本会异步地加载并在允许的情况下立即执行，不会阻塞页面的解析。只对外部脚本文件有效。
  2. charset：指定外部脚本文件的字符编码。这个属性很少使用，因为大多数浏览器会忽略它，而且通常页面会指定一个全局的字符集。
  3. crossorigin：配置相关请求的CORS（跨域资源共享）设置。它可以是anonymous或use-credentials，用于处理跨域脚本的请求。
  4. defer：表示脚本会被延迟到文档完全被解析和显示后再执行。只对外部脚本文件有效。
  5. integrity：允许比对接收到的资源和指定的加密签名以验证子资源完整性，用于确保内容分发网络不会提供恶意内容。
  6. src：指定外部JavaScript文件的URL，用于引入外部脚本。
  7. type：表示脚本语言的内容类型。在HTML5中，该属性通常可以省略，因为默认值是"text/javascript"。当 type 属性被设置为 "module" 时，浏览器会将以该标签加载的脚本视为 ES6 模块，而不是普通的脚本。这意味着你可以在这些脚本中使用 ES6 模块的特性，如 import 和 export 语句。

正常情况下，渲染引擎在解析HTML时，若遇到script标签引用文件，则会暂停解析过程，同时通知网络线程加载文件，文件加载之后会切换js引擎执行相应代码，之后切换到渲染引擎继续渲染页面。

link标签

用于link外部资源到HTML文档中。

主要用途和属性如下：

  1. 引入外部样式表：

    ● 最常见的用途是用来链接 CSS 样式表文件，以控制网页的外观和布局。

    ● 例如：<link rel="stylesheet" href="styles.css">，其中rel属性表示关系，这里表明是样式表（stylesheet），href属性指定了 CSS 文件的路径。

  2. 设置图标（favicon）：

    ● 可以为网页设置一个图标，显示在浏览器标签页和书签中。

    ● 例如：<link rel="icon" href="favicon.ico">。

  3. 预加载资源：

    ● 通过设置rel为preload，可以预加载一些关键资源，以提高网页加载速度。

    ● 例如：<link rel="preload" as="script" href="main.js">表示预加载一个名为main.js的脚本文件，as属性指定了资源的类型。

此外， 标签还可以用于其他目的，如定义网站的RSS订阅源（rel="alternate" type="application/rss+xml"）、指定预获取的资源（rel="prefetch"）、定义Web应用的清单文件（rel="manifest"）等。每个 rel 值都有其特定的用途和相关的属性集。

  • dns-prefetch

    • <link rel="dns-prefetch" href=""> 浏览器会对该域名预先进行DNS解析并缓存

  • preconnect

    • 让浏览器在一个HTTP请求正式发送给服务器预先执行一些操作，包括DNS解析，TLS协商，TCP握手，通过消除往返延迟来为用户节省时间

  • prefetch/preload

    • 两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch可能在浏览器很忙的时候被忽略，而preload则一定是被预先下载的 。

a标签和href

a标签的最重要功能是实现超链接和锚点。

常见标签、块与行、常见属性、HTML5标签、表单

HTML 中常见的标签

下面是一些 HTML 中常见的标签及其简要说明：

  1. <html> ：HTML 文档的根元素，包含整个 HTML 文档的内容。
  2. <head> ：HTML 文档的头部元素，用于包含文档的元数据，如标题、样式表和脚本等。
  3. <title> ：定义 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 命名法通过将类名分为块、元素和修饰符，提供了更清晰和可扩展的命名结构。它有助于减少样式冲突、提高代码可读性，并支持模块化和可重用性。

avatar
文章
阅读
粉丝