Html

HTML¶

1. HTML（HyperText Markup Language）¶

1.1 HTML的定义与作用¶

HTML是用于构建网页结构的标记语言。它通过一系列的标签（Tags）定义网页的内容和结构，告诉浏览器如何显示页面内容。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</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

1.2 HTML文档结构¶

<!DOCTYPE html>：
声明文档类型，告诉浏览器这是一个HTML5文档。
<html>：
根元素，包含整个HTML文档的内容。
lang属性指定文档的语言（如en表示英语）。
<head>：
包含文档的元数据（Metadata），这些内容不会直接显示在页面上。
常见的元数据包括：
- <meta charset="UTF-8">：指定字符编码为UTF-8。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：优化移动设备的显示效果。
- <title>：定义文档的标题，显示在浏览器的标题栏或标签页上。
- <link>：用于引入外部资源，如CSS文件。
- <script>：用于引入外部JavaScript文件或定义内联脚本。
<body>：
包含用户可见的内容，如文本、图像、按钮等。

1.3 常用HTML标签¶

HTML标签分为块级标签（Block-level）和行内标签（Inline-level）。

1.3.1 文本标签¶

标题标签：<h1>到<h6>，定义不同级别的标题。

<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>

段落标签：<p>，定义段落。
1
<p>This is a paragraph of text.</p>
文本修饰：
<strong>：加粗文本。
<em>：斜体文本。
<u>：下划线文本。

<s>：删除线文本。

<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>

1.3.2 列表标签¶

无序列表：<ul>，列表项用<li>表示。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

有序列表：<ol>，列表项用<li>表示。

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

1.3.3 图像与链接¶

图像：<img>，通过src属性指定图像路径，alt属性提供图像的描述。
1
<img src="image.jpg" alt="Description of Image">
超链接：<a>，通过href属性指定链接目标。
1
<a href="https://example.com">Visit Example</a>

1.3.4 表格¶

表格：<table>，通过<tr>定义行，<td>定义单元格。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

1.3.5 表单¶

表单：<form>，用于收集用户输入。

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Submit">
</form>

1.3.6 容器标签¶

<div>：块级容器，用于布局。

<span>：行内容器，用于文本包装。

<div class="container">
    <h1>Welcome</h1>
    <p>This is a paragraph inside a div.</p>
</div>

1.4 HTML属性¶

HTML标签可以有属性，用于提供附加信息。属性以“名称-值”对的形式出现，放在开始标签中。常见的属性包括： - class：为元素定义类名，方便CSS样式化。 - id：为元素定义唯一标识符，常用于JavaScript操作。 - style：直接在标签中定义样式。 - src：用于链接外部资源（如图片、脚本）。 - href：用于指定超链接的目标URL。

1.5 HTML语义化¶

HTML5引入了许多语义化标签，用于更清晰地定义页面结构，提高可读性和搜索引擎优化（SEO）。常见的语义化标签包括： - <header>：定义页眉。 - <footer>：定义页脚。 - <nav>：定义导航链接。 - <article>：定义独立的文章内容。 - <section>：定义文档中的一个区域。 - <aside>：定义与页面内容相关的辅助信息。