HTML前端基础：常用标签详解

"01-前端HTML基础知识" 在HTML（超文本标记语言）中，前端开发的基础知识涵盖了各种标签的使用，这些标签用于构建网页结构和内容。HTML不区分大小写，但为了保持一致性，通常推荐使用小写字母。HTML的注释不能嵌套，每个标签都应有对应的闭合标签，除非是自闭和标签（如 `<img>`）。标签可以嵌套，但不能交叉嵌套，确保元素的层次清晰。 一、HTML常用标签 1. 标题标签：`<h1>` 到 `<h6>` 用于定义文档的六级标题，`<h1>` 是最重要的标题，`<h6>` 是最不重要的标题。 2. 段落标签：`<p>` 用于创建一个段落，是文本内容的基本组织单位。 3. 文本标签： - 加粗：`<b>` 和 `<strong>`，两者都能使文本加粗，但 `<strong>` 更强调语义上的重要性。 - 斜体：`<i>` 和 `<em>`，`<i>` 传统上用于表示样式，而 `<em>` 表示语义上的强调。 - 下划线：`<u>` 和 `<ins>`，`<u>` 用于下划线，`<ins>` 用于表示插入的内容。 - 删除线：`<s>` 和 `<del>`，`<s>` 用于划掉文本，`<del>` 表示文本已删除。 - 下标：`<sub>` 用于表示下标文本。 - 上标：`<sup>` 用于表示上标文本。 - 减小字体：`<small>` 用于缩小字体大小。 - 预格式标签：`<pre>` 保留文本的空格和换行，常用于显示代码。 - 代码标签：`<code>` 用于表示代码片段，通常与 `<pre>` 结合使用来展示代码块。 4. 图片标签：`<img>` 用于插入图片，`src` 属性指定图片的URL，`title` 提供鼠标悬停提示，`alt` 提供替代文本，当图片无法加载时显示。 5. 链接标签：`<a>` 创建超链接，`href` 设置链接地址，`target` 决定链接是在当前窗口打开 (`_self`) 还是新窗口 (`_blank`)。邮件链接通过 `href="mailto:邮件地址"` 实现。 6. 锚点：使用 `<a>` 标签和 `id` 属性创建内部链接，同一页面内的链接用 `#id`，不同页面间的链接需指定页面URL和锚点ID。 7. meta（元）标签：提供关于HTML文档的元信息，如字符编码、关键字和描述。例如，设置字符编码为UTF-8的代码是 `<meta charset="UTF-8">`，设置关键字和描述的代码分别是 `<meta name="keyword" content="关键词">` 和 `<meta name="description" content="描述信息">`。 8. 内联框架（IFrame）标签：`<iframe>` 用于在页面中嵌入另一个页面的内容，如视频、地图或其他网页。需要指定`src`属性为要嵌入的页面URL，并可以通过`width`和`height`调整其尺寸。 以上是HTML前端开发中的基础HTML标签及其用法，它们构成了网页的基本结构和内容展示。熟练掌握这些标签有助于创建功能完备、语义明确的网页。