HTML(超文本标记语言)是构建网页和Web应用的基础语言。它使用标签来定义文档的结构和内容。本文将详细介绍HTML的基本语法及其核心元素,帮助您掌握HTML的基础知识。

一、HTML文档结构

一个完整的HTML文档包含以下基本结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1. <!DOCTYPE html>

声明文档类型,告诉浏览器使用HTML5标准解析文档。

2. <html>

根元素,包含整个HTML文档。

3. <head>

包含文档的元数据,如编码、标题、样式等。

4. <meta>

定义文档的元数据。charset属性指定字符编码,viewport用于响应式设计。

5. <title>

定义文档的标题,显示在浏览器标签页上。

6. <body>

包含文档的内容。

二、常用HTML标签

1. 标题标签

HTML提供六级标题标签,<h1>到 <h6>,依次表示不同级别的标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

2. 段落标签

<p>标签用于定义段落。

<p>这是一个段落。</p>

3. 链接标签

<a>标签用于创建超链接。href属性指定链接目标。

<a href="https://www.example.com">访问示例网站</a>

4. 图像标签

<img>标签用于嵌入图像。src属性指定图像路径,alt属性提供替代文本。

<img src="image.jpg" alt="示例图像">

5. 列表标签

有序列表使用 <ol>,无序列表使用 <ul>,列表项使用 <li>。

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

6. 表格标签

表格使用 <table>,表格行使用 <tr>,表头使用 <th>,表格数据使用 <td>。

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>30</td>
    </tr>
</table>

7. 表单标签

表单使用 <form>,输入字段使用 <input>,提交按钮使用 <button>。

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <button type="submit">提交</button>
</form>

三、HTML全局属性

全局属性适用于所有HTML元素,包括但不限于以下几个常用属性:

1. class

定义元素的类名,供CSS或JavaScript使用。

<p class="intro">这是一个带有类名的段落。</p>

2. id

定义元素的唯一标识符,供CSS或JavaScript使用。

<p id="unique">这是一个带有ID的段落。</p>

3. style

定义元素的内联样式。

<p style="color: red;">这是一个红色段落。</p>

4. title

提供元素的附加信息,鼠标悬停时显示。

<p title="这是提示文本">鼠标悬停显示提示。</p>

四、HTML实体

HTML实体用于显示保留字符,如 <、>等。

<p>小于号:<</p>
<p>大于号:></p>
<p>和号:&</p>

五、思维导图

graph TB
A[HTML语法] --> B[文档结构]
A --> C[常用标签]
A --> D[全局属性]
A --> E[HTML实体]
B --> F[<!DOCTYPE html>]
B --> G[<html>]
B --> H[<head>]
B --> I[<meta>]
B --> J[<title>]
B --> K[<body>]
C --> L[标题标签]
C --> M[段落标签]
C --> N[链接标签]
C --> O[图像标签]
C --> P[列表标签]
C --> Q[表格标签]
C --> R[表单标签]
D --> S[class]
D --> T[id]
D --> U[style]
D --> V[title]

六、总结

HTML是Web开发的基础,理解其语法和常用标签是构建网页的第一步。通过掌握文档结构、常用标签和全局属性等知识,可以编写出结构清晰、语义明确的HTML文档。希望本文的内容能帮助您更好地理解和应用HTML。