HTML 介绍

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准语言。它使用一系列的标签来定义网页的结构和内容。HTML 主要负责网页的骨架和结构，比如页面中的文本、图片、链接、表格、列表等。HTML 标签不包含逻辑或行为，它们仅用于标记和组织内容。对于网站功能和交互，通常需要与 CSS（样式表）和 JavaScript（脚本）配合使用。

HTML 的基本结构

一个标准的 HTML 页面结构如下：

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh">
<head>
    <meta charset="UTF-8"> <!-- 设置字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，响应式设计 -->
    <title>网页标题</title> <!-- 网页的标题，显示在浏览器标签上 -->
    <link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS文件 -->
</head>
<body>
    <!-- 页面主体内容 -->
    <h1>这是一个HTML页面</h1>
    <p>这段话是HTML标签中的段落。</p>
</body>
</html>

常见 HTML 标签总结

1. 文档结构标签

  • <!DOCTYPE html>: 声明文档类型，告诉浏览器文档的 HTML 版本。
  • <html>: HTML 文档的根元素，包裹整个页面。
  • <head>: 包含页面的元数据（例如字符集、标题、外部文件引用等）。
  • <meta>: 提供文档的元数据，例如字符集和视口设置。
  • <title>: 页面标题，显示在浏览器标签栏。
  • <body>: 页面主体内容，所有可见的页面元素都应该放在 <body> 标签内。

2. 文本相关标签

  • <h1> 至 <h6>: 标题标签，<h1> 为最大标题，<h6> 为最小标题。
  • <p>: 段落标签，用于包裹一段文本。
  • <strong>: 强调文本，通常加粗。
  • <em>: 强调文本，通常为斜体。
  • <br>: 换行标签，用于强制换行。
  • <blockquote>: 引用一段较长的文本，通常带有缩进。
  • <a>: 链接标签，用于创建超链接。

3. 列表标签

  • <ul>: 无序列表（bulleted list）。
  • <ol>: 有序列表（numbered list）。
  • <li>: 列表项，<ul> 或 <ol> 内部使用。
&lt;ul>
    &lt;li>苹果&lt;/li>
    &lt;li>香蕉&lt;/li>
    &lt;li>橙子&lt;/li>
&lt;/ul>

4. 表格标签

  • <table>: 表格标签。
  • <tr>: 表格行标签，用于定义行。
  • <th>: 表格头部标签，表示表格标题，默认加粗、居中。
  • <td>: 表格单元格标签，用于填充数据。
&lt;table>
    &lt;tr>
        &lt;th>姓名&lt;/th>
        &lt;th>年龄&lt;/th>
    &lt;/tr>
    &lt;tr>
        &lt;td>张三&lt;/td>
        &lt;td>25&lt;/td>
    &lt;/tr>
&lt;/table>

5. 表单标签

  • <form>: 表单标签，用于收集用户输入。
  • <input>: 表单输入框，可以是文本框、密码框、按钮等。
  • <textarea>: 多行文本框。
  • <button>: 按钮标签，用于提交表单或执行其他操作。
  • <label>: 标签，通常与 <input> 配合使用，定义表单控件的标签。
&lt;form>
    &lt;label for="name">姓名：&lt;/label>
    &lt;input type="text" id="name" name="name">
    &lt;button type="submit">提交&lt;/button>
&lt;/form>

6. 多媒体标签

  • <img>: 图片标签，用于显示图像。src 属性定义图片路径，alt 属性定义图片替代文本。
  • <audio>: 音频标签，用于嵌入音频内容。
  • <video>: 视频标签，用于嵌入视频内容。
&lt;img src="image.jpg" alt="图片描述">

7. 链接与引用标签

  • <a>: 超链接标签，href 属性定义链接目标。
  • <link>: 用于在 <head> 中引入外部资源，如 CSS 文件。
  • <meta>: 提供网页元数据（例如，描述、作者、关键字等）。
  • <iframe>: 内联框架，用于在页面中嵌入其他网页。
&lt;a href="https://www.example.com">访问示例网站&lt;/a>

8. HTML5 新标签

  • <article>: 定义文章，通常用于独立的内容区域。
  • <section>: 定义文档的章节，通常包含若干文章或相关内容。
  • <nav>: 定义导航区域，用于链接到其他页面。
  • <header>: 定义页面或文章的头部部分。
  • <footer>: 定义页面或文章的底部部分。
  • <aside>: 定义与页面内容不直接相关的内容，通常用于侧边栏。
&lt;article>
    &lt;h2>新闻标题&lt;/h2>
    &lt;p>新闻内容&lt;/p>
&lt;/article>

常用的 HTML 属性

  • id: 元素的唯一标识符，用于 JavaScript 操作和 CSS 样式定位。
  • class: 类名，用于 CSS 样式和 JavaScript 操作，可以指定多个类名。
  • style: 内联样式，用于直接给元素添加 CSS 样式。
  • href: 超链接的目标地址。
  • src: 媒体资源的路径，通常用于 <img>、<audio>、<video> 等标签。
  • alt: 图像的替代文本，当图像无法加载时显示。
  • type: 用于表单输入的类型，如 text、password、email 等。
  • placeholder: 用于表单输入框，显示在文本框中的提示文本。
&lt;input type="text" id="username" placeholder="请输入用户名">

HTML 常用技巧

  1. 嵌套标签：HTML 中标签可以嵌套使用，确保标签结构正确。
&lt;div>
    &lt;h1>标题&lt;/h1>
    &lt;p>这是一段文本。&lt;/p>
&lt;/div>
  1. 注释：HTML 中可以使用注释来标记代码的说明，注释不会在页面中显示。
&lt;!-- 这是一个注释 -->
  1. 字符实体：有些字符需要用字符实体表示，例如 < 表示为 &lt;，> 表示为 &gt;。
&lt;p>5 &lt; 10&lt;/p>  &lt;!-- 正常显示为 5 &lt; 10 -->
&lt;p>5 &amp;lt; 10&lt;/p> &lt;!-- 显示为 5 &lt; 10 -->
  1. 空格与换行：HTML 会忽略多余的空格和换行，除非使用特定标签（如 <pre>）或者 CSS 来控制布局。

总结

HTML 是网页结构的基础，理解和掌握 HTML 是前端开发的第一步。通过学习常用的 HTML 标签及其属性，你可以创建网页的基本结构，并与 CSS 和 JavaScript 结合，完成动态且富有表现力的网页设计。