HTML入门

让我们开始学习HTML。

HTML是什么？

HTML（HyperText Markup Language）是一种标记语言，用于创建和呈现网页。HTML使用各种标记和标签来定义文档的结构、内容和链接。HTML文件通常以.html扩展名结尾。

HTML文档结构

一个标准的HTML文档包含以下几个主要部分：

  1. <!DOCTYPE>声明：指定文档的版本和类型。
  2. <html>元素：包裹整个HTML文档的根元素。
  3. <head>元素：包含元信息和链接到外部资源，不可见于页面。
  4. <title>元素：设置网页标题，显示在浏览器的标签页上。
  5. <meta>元素：包含关于文档的元信息，如字符编码、作者、描述等。
  6. <link>元素：用于引入外部资源，通常是样式表。
  7. <script>元素：用于嵌入JavaScript代码或引入外部JavaScript文件。
  8. <style>元素：包含内部样式表，用于定义页面的样式。
  9. <body>元素：包含可见于页面的内容，如文本、图片、链接等。

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的HTML文档示例。</p>
  </body>
</html>

在上面的示例中，我们有一个基本的HTML文档结构，包括<!DOCTYPE>声明、<html>、<head>、<body>等元素。

HTML标签和元素

HTML中使用标签来定义元素。标签通常成对出现，由开始标签和结束标签组成，中间包裹内容。开始标签通常以<开头，结束标签以</开头。示例：

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

在这个示例中，<p>是开始标签，</p>是结束标签，内容"这是一个段落"被包裹在两个标签之间。

HTML元素的常见类型

在HTML中，有许多不同类型的元素，包括：

  • 文本元素： 用于显示文本内容，如 <p>（段落）、<h1>（标题）、<a>（链接）等。
  • 媒体元素： 用于显示多媒体内容，如 <img>（图片）、<audio>（音频）、<video>（视频）等。
  • 表单元素： 用于创建输入表单，如 <form>（表单）、<input>（输入框）、<button>（按钮）等。
  • 列表元素： 用于创建有序或无序列表，如 <ul>（无序列表）、<ol>（有序列表）、<li>（列表项）等。
  • 表格元素： 用于创建表格，如 <table>（表格）、<tr>（行）、<th>（表头单元格）、<td>（数据单元格）等。

文本元素

标题标签 <h1> 到 <h6>

HTML提供了六个级别的标题标签，分别是 <h1> 到 <h6>，表示标题的重要性递减。示例：

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

段落标签 <p>

<p> 标签用于创建段落，通常用于包裹文本内容。示例：

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

链接标签 <a>

<a> 标签用于创建超链接，允许用户点击链接跳转到其他页面。示例：

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

列表标签 <ul>, <ol>, <li>

HTML提供了无序列表和有序列表的标签。无序列表使用 <ul> 标签，有序列表使用 <ol> 标签，列表项使用 <li> 标签。示例：

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

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

媒体元素

图片标签 <img>

<img> 标签用于显示图像。它有一个 src 属性，指定图像文件的路径。示例：

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

音频标签 <audio>

<audio> 标签用于嵌入音频文件，允许用户播放音频。示例：

<audio src="music.mp3" controls></audio>

视频标签 <video>

<video> 标签用于嵌入视频文件，允许用户观看视频。示例：

<video src="video.mp4" controls></video>

表单元素

HTML中的表单元素用于收集用户输入。以下是一些常见的表单元素：

  • <form>：创建表单。
  • <input>：用于文本输入、单选框、复选框等。
  • <button>：创建按钮。
  • <label>：为表单元素创建标签。
  • <select>：创建下拉列表。
  • <textarea>：创建多行文本输入。

示例：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">登录</button>
</form>

表格元素

HTML中的表格元素用于创建表格以显示数据。以下是一些表格元素和属性：

  • <table>：定义表格。
  • <tr>：定义表格行。
  • <th>：定义表格标题单元格。
  • <td>：定义表格数据单元格。
  • colspan：指定单元格横跨的列数。
  • rowspan：指定单元格横跨的行数。

示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>25</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>22</td>
  </tr>
</table>

嵌套元素

HTML允许元素嵌套，这意味着你可以将一个元素放在另一个元素内部。例如，你可以在段落中嵌套链接或在列表中嵌套其他元素。

示例：

<p>请点击 <a href="https://www.example.com">这里</a> 查看示例网站。</p>

HTML注释

你可以在HTML代码中添加注释，这些注释不会在浏览器中显示，但可以帮助你和其他开发者理解代码。HTML注释以 <!-- 开始，以 --> 结束。

示例：

<!-- 这是一个HTML注释，用于说明代码的作用 -->
<p>这段文字在浏览器中显示。</p>

HTML实体引用

HTML实体引用用于在HTML中显示特殊字符，如小于号 < 或版权符号 ©。以下是一些常用的实体引用：

  • &lt;：小于号 <
  • &gt;：大于号 >
  • &amp;：和符号 &
  • &copy;：版权符号 ©

示例：

<p> &copy; 版权所有</p>

表单元素

表单元素用于创建网页中的交互式表单，用户可以在表单中输入数据或进行选择。以下是一些常见的表单元素：

  • <form>：定义一个表单。
  • <input>：定义一个输入字段，如文本框、单选框、复选框等。
  • <textarea>：定义多行文本输入字段。
  • <label>：定义表单元素的标签。
  • <select>：定义下拉列表框。
  • <button>：定义按钮。

示例：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

链接和锚点

HTML中的链接元素 <a> 用于创建超链接，使用户能够点击链接以导航到其他页面。链接可以指向其他网页、文件或站点内的其他部分。

示例：

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

你还可以使用锚点来创建页面内部链接。在目标位置设置一个锚点，然后使用链接将用户导航到该锚点。

示例：

<a href="#section2">跳转到第二部分</a>
<!-- ... -->
<h2 id="section2">第二部分内容</h2>

图像

图像元素 <img> 用于在网页上显示图像。你需要指定图像的 src 属性来指定图像文件的路径。

示例：

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

HTML注释

HTML注释可以帮助你在代码中添加注释和说明，这对于维护和合作开发非常有用。HTML注释以 <!-- 开始，以 --> 结束。

示例：

<!-- 这是一个HTML注释，用于解释代码 -->
<p>这段文字将在浏览器中显示。</p>

HTML框架

HTML框架允许你将网页分割成若干部分，每个部分显示不同的内容。常见的框架元素包括 <frameset>、<frame> 和 <iframe>。

示例：

<frameset cols="25%,50%,25%">
  <frame src="left.html">
  <frame src="main.html">
  <frame src="right.html">
</frameset>

HTML元数据

元数据元素提供关于文档的信息，如文档的字符编码、作者、关键字等。常见的元数据元素包括 <head>、<title>、<meta>、<link> 等。

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>示例网页</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <p>这是一个示例网页。</p>
  </body>
</html>
技能
#HTML #网页 #前端
HTML入门
https://www.lihaibao.cn/2023/10/22/HTML入门/
Author
Seal Li
Posted on
October 22, 2023
Licensed under