以下是一个HTML的快速参考，包括常用的HTML标签、属性、结构、常见元素和语法规范。这些内容可以帮助你快速回顾和使用HTML。

1. HTML文档结构

<!DOCTYPE html>  <!-- 文档类型声明 -->
<html lang="en"> <!-- HTML文档开始 -->
<head>
    <meta charset="UTF-8"> <!-- 字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置 -->
    <title>Document Title</title> <!-- 网页标题 -->
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

2. 常用标签

基本结构标签

  • <html>：HTML文档的根元素。
  • <head>：包含文档的元数据（如字符集、标题、CSS、JS）。
  • <title>：网页的标题，显示在浏览器标签上。
  • <body>：网页的主体内容。

文本格式化标签

  • <h1> ... <h6>：定义标题（<h1> 为最大，<h6> 为最小）。
  • <p>：定义段落。
  • <b>：加粗文本（HTML5中推荐使用 <strong>）。
  • <i>：斜体文本（HTML5中推荐使用 <em>）。
  • <strong>：强调文本，通常显示为加粗。
  • <em>：强调文本，通常显示为斜体。
  • <br>：换行。
  • <hr>：水平线。

链接和图像

  • <a href="URL"> ... </a>：定义超链接。<a href="https://www.example.com">点击这里</a>
  • <img src="image.jpg" alt="图片描述">：定义图像。<img src="logo.png" alt="网站Logo" width="100" height="100">

列表

  • <ul>：无序列表。
    • <li>：列表项。
    <ul> <li>列表项1</li> <li>列表项2</li> </ul>
  • <ol>：有序列表。
    • <li>：列表项。
    <ol> <li>第一个项</li> <li>第二个项</li> </ol>

表格

  • <table>：定义表格。
  • <tr>：定义表格行。
  • <td>：定义表格单元格。
  • <th>：定义表头单元格。<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> </table>

表单

  • <form>：表单元素。
  • <input>：用户输入字段。
  • <textarea>：多行文本输入框。
  • <button>：按钮。
  • <label>：为表单元素定义标签。<form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <button type="submit">提交</button> </form>

嵌套元素和区块元素

  • <div>：定义一个区块元素，通常用于布局。
  • <span>：定义一个行内元素，通常用于内联文本样式。
  • <section>：定义文档中的一个区域或部分。
  • <article>：定义独立的内容块，如文章、博客等。

3. 常用属性

常见的HTML属性

  • id：为元素定义唯一标识符。
  • class：为元素定义类名，可以多个类名用空格分隔。
  • style：内联CSS样式。
  • src：定义图像、视频等的来源。
  • alt：为图像提供替代文本。
  • href：定义超链接的目标URL。
  • target：设置链接的打开方式，常用值 _blank（新窗口）和 _self（当前窗口）。
  • name：为表单元素定义名称。
  • value：定义表单元素的值。

4. 常用表单元素

文本输入框

<input type="text" name="username" placeholder="请输入用户名">

密码输入框

<input type="password" name="password" placeholder="请输入密码">

单选按钮

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

复选框

<input type="checkbox" name="subscribe" checked> 订阅

下拉菜单

<select name="country">
    <option value="cn">中国</option>
    <option value="us">美国</option>
</select>

5. 嵌入多媒体

视频

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持视频标签。
</video>

音频

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    您的浏览器不支持音频元素。
</audio>

6. CSS和JavaScript

内联CSS

<p style="color: red;">这是红色文本</p>

内联JavaScript

<button onclick="alert('Hello!')">点击我</button>

7. 常用HTML5元素

  • <header>：定义文档头部区域。
  • <footer>：定义文档底部区域。
  • <nav>：定义导航菜单区域。
  • <aside>：定义与主内容相关的侧边区域。
  • <figure>：定义图片及其说明。
  • <figcaption>：为<figure>元素提供说明。

8. HTML语义化

HTML5鼓励使用语义化标签来提高网页的可读性和SEO性能。常见的语义化标签包括：

  • <header>：文档的头部内容。
  • <footer>：文档的底部内容。
  • <article>：独立的内容区块。
  • <section>：文档的章节或区域。
  • <aside>：与主要内容相关但不直接相关的内容。
  • <main>：文档的主要内容区域。

9. Meta 标签

  • <meta charset="UTF-8">：设置字符编码为UTF-8。
  • <meta name="description" content="网页描述">：设置网页的描述。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：为响应式网页设计设置视口。

总结

这个HTML快速参考涵盖了HTML文档的常用结构、标签和属性。你可以根据需要使用这些元素来构建网页。如果有特定需求或问题，随时告诉我！