HTML：超文本标记语言

陈一男学习网站[ ChenYinan.com ] - CCF - NOI - 菜鸟教程 - 编程题库 - C++语言 - API

一、HTML 简介

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过各种标签来定义网页的结构和内容，如标题、段落、图像、链接等。

二、HTML 基本结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        页面的主体内容在这里。
    </body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5。

<html>：整个 HTML 文档的根元素。

<head>：包含文档的元数据，如字符编码、页面标题等。

<meta charset="UTF-8">：设置字符编码为 UTF-8，以支持多种语言字符。

<title>页面标题</title>：定义页面在浏览器标题栏显示的标题。

<body>：包含页面的实际内容，如文本、图像、链接等。

三、常用 HTML 标签

1. 标题标签：<h1>到<h6>，用于定义不同级别的标题，<h1>是最大的标题，<h6>是最小的标题。

<h1>一级标题</h1>

<h2>二级标题</h2>

2. 段落标签：<p>，用于定义段落。

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

3. 链接标签：<a>，用于创建链接到其他网页或资源。

<a href="https://www.example.com">链接文本</a>

4. 图像标签：<img>，用于在网页中插入图像。

<img src="image.jpg" alt="图像描述">

src属性指定图像的路径，alt属性提供图像无法显示时的替代文本。

5. 列表标签：

无序列表<ul>和列表项<li>：

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
</ul>

有序列表<ol>和列表项<li>：

<ol>
    <li>列表项 1</li>
    <li>列表项 2</li>
</ol>

6. 表格标签：

<table>定义表格。

<tr>定义表格行。

<td>定义表格单元格。

<th>定义表头单元格。

<table>
    <tr>
        <th>表头 1</th>
        <th>表头 2</th>
    </tr>
    <tr>
        <td>数据 1</td>
        <td>数据 2</td>
    </tr>
</table>

四、HTML 属性

HTML 标签可以有属性，属性提供了关于标签的更多信息。例如：

<a href="链接地址">中，href是<a>标签的属性，指定链接的目标地址。

<img src="图像路径" alt="描述">中，src和alt是<img>标签的属性，分别指定图像的来源和替代文本。

五、表单

表单用于收集用户输入的数据。常见的表单元素有：

1. 表单标签：<form>，用于定义表单。

<form action="submit.php" method="post">

    <!-- 表单元素 -->

</form>

action属性指定表单数据提交的目标地址，method属性指定提交数据的方法（如post或get）。

2. 输入框：<input type="text">，用于接收用户输入的文本。

<input type="text" name="username">

type属性指定输入框的类型，name属性用于在提交表单时标识该输入框的数据。

3. 密码框：<input type="password">。

<input type="password" name="password">

4. 提交按钮：<input type="submit">，用于提交表单数据。

<input type="submit" value="提交">

value属性指定按钮上显示的文本。

5. 下拉列表：<select>和<option>。

<select name="choices">
    <option value="option1">选项 1</option>
    <option value="option2">选项 2</option>
</select>

六、HTML 样式

可以使用 CSS（层叠样式表）来为 HTML 元素添加样式，如颜色、字体、大小、布局等。

1. 内联样式：直接在 HTML 标签中使用style属性。

<p style="color: blue;">这是一个蓝色的段落。</p>

2. 内部样式表：在<head>标签中使用<style>标签定义样式。

<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>

3. 外部样式表：将样式定义在一个单独的 CSS 文件中，然后在 HTML 文档中通过<link>标签引入。

<head>

    <link rel="stylesheet" href="styles.css">

</head>

七、总结

HTML 是构建网页的基础，通过学习基本的标签、属性和结构，可以创建简单的网页。结合 CSS 和 JavaScript，可以进一步增强网页的外观和交互性。

PHP编程语言基础