编辑“︁HTML基础”︁

= HTML基础 =

'''HTML'''（HyperText Markup Language，超文本标记语言）是构建网页的基础技术之一，用于定义网页的结构和内容。它通过标签（tags）描述页面的各个部分，如标题、段落、列表、链接等。HTML是前端开发的基石，与CSS（样式表）和JavaScript（脚本语言）共同构成现代网页开发的三大核心技术。

== 基本结构 ==
一个标准的HTML文档由以下基本结构组成：
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
</syntaxhighlight>

* '''<!DOCTYPE html>'''：声明文档类型为HTML5。
* '''<html>'''：根元素，包含整个HTML文档。
* '''<head>'''：包含元数据（如字符集、标题等），不直接显示在页面上。
* '''<body>'''：包含所有可见的页面内容。

== 常用HTML标签 ==
以下是HTML中常用的标签及其用途：

=== 文本标签 ===
* '''<h1>到<h6>'''：标题标签，<h1>为最高级标题。
* '''<p>'''：段落标签。
* '''<strong>'''或'''<b>'''：加粗文本。
* '''<em>'''或'''<i>'''：斜体文本。

<syntaxhighlight lang="html">
<h1>主标题</h1>
<h2>副标题</h2>
<p>这是一个<strong>加粗</strong>的文本，以及一个<em>斜体</em>的文本。</p>
</syntaxhighlight>

=== 列表标签 ===
* '''<ul>'''：无序列表。
* '''<ol>'''：有序列表。
* '''<li>'''：列表项。

<syntaxhighlight lang="html">
<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>
<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>
</syntaxhighlight>

=== 链接与图片 ===
* '''<a>'''：超链接。
* '''<img>'''：图片。

<syntaxhighlight lang="html">
<a href="https://example.com">点击访问示例网站</a>
<img src="image.jpg" alt="示例图片">
</syntaxhighlight>

=== 表格 ===
* '''<table>'''：表格。
* '''<tr>'''：表格行。
* '''<td>'''：表格单元格。
* '''<th>'''：表头单元格。

<syntaxhighlight lang="html">
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>
</syntaxhighlight>

== HTML表单 ==
表单用于收集用户输入，常见的表单元素包括：
* '''<form>'''：表单容器。
* '''<input>'''：输入字段（文本、密码、单选按钮等）。
* '''<textarea>'''：多行文本输入。
* '''<select>'''和'''<option>'''：下拉选择框。
* '''<button>'''：按钮。

<syntaxhighlight lang="html">
<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br>
    <button type="submit">提交</button>
</form>
</syntaxhighlight>

== HTML5新特性 ==
HTML5引入了许多新特性，包括：
* '''语义化标签'''：如<code><header></code>、<code><footer></code>、<code><article></code>等，使文档结构更清晰。
* '''多媒体支持'''：<code><audio></code>和<code><video></code>标签。
* '''Canvas绘图'''：<code><canvas></code>标签用于动态绘制图形。

<syntaxhighlight lang="html">
<header>
    <h1>网站标题</h1>
</header>
<article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
</article>
<footer>
    <p>版权信息</p>
</footer>
</syntaxhighlight>

== 实际案例 ==
以下是一个简单的网页布局示例，结合了HTML的基本结构和常用标签：
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是一篇文章的内容。</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2023 我的网站</p>
    </footer>
</body>
</html>
</syntaxhighlight>

== 总结 ==
HTML是网页开发的基础，通过标签定义内容和结构。掌握HTML的基本标签和语义化布局是前端开发的第一步。随着HTML5的普及，开发者可以更高效地构建现代化的网页应用。

[[Category:计算机科学]]
[[Category:面试技巧]]
[[Category:前端基础]]