跳到主要内容

HTML基础

什么是HTML？​

HTML（超文本标记语言，HyperText Markup Language）是构建网页的基础语言。它通过使用标签（tags）来定义网页的结构和内容。HTML文件本质上是一个纯文本文件，浏览器会解析这些标签并将其渲染为用户可见的网页。

备注

HTML不是编程语言，而是一种标记语言。它用于描述网页的结构，而不是执行逻辑操作。

HTML的基本结构​

一个典型的HTML文档由以下几个部分组成：

  1. 文档类型声明：告诉浏览器这是一个HTML文档。
  2. <html>标签：包裹整个HTML文档。
  3. <head>标签：包含元数据（如标题、字符编码等）。
  4. <body>标签：包含网页的实际内容。

以下是一个简单的HTML文档示例：

html
<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个段落。</p>
  </body>
</html>

解释：​

  • <!DOCTYPE html>：声明文档类型为HTML5。
  • <html>：根元素，包裹整个HTML文档。
  • <head>：包含元数据，如标题（<title>）。
  • <body>：包含网页的实际内容，如标题（<h1>）和段落（<p>）。

HTML标签​

HTML标签是网页的基本构建块。每个标签都有特定的用途，以下是一些常见的标签：

1. 标题标签​

HTML提供了6个级别的标题标签，从<h1>到<h6>，<h1>是最高级别，<h6>是最低级别。

html
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>

2. 段落标签​

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

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

3. 链接标签​

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

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

4. 图像标签​

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

html
<img src="image.jpg" alt="描述图像内容" />
提示

<img>是一个自闭合标签，不需要闭合标签。

5. 列表标签​

HTML支持有序列表（<ol>）和无序列表（<ul>），列表项使用<li>标签。

html
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

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

HTML属性​

HTML标签可以包含属性，属性提供了关于标签的额外信息。属性通常以键值对的形式出现，例如name="value"。

例如，<a>标签的href属性指定链接的目标地址：

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

属性值应该始终用引号（单引号或双引号）包裹。

HTML注释​

HTML注释用于在代码中添加说明，浏览器会忽略注释内容。注释以<!--开头，以-->结束。

html
<!-- 这是一个注释，不会显示在网页中 -->
<p>这是一个段落。</p>

实际案例：创建一个简单的网页​

让我们通过一个实际案例来巩固所学的知识。以下是一个简单的个人简介网页：

html
<!DOCTYPE html>
<html>
  <head>
    <title>个人简介</title>
  </head>
  <body>
    <h1>我的个人简介</h1>
    <p>你好，我叫小明，是一名前端开发者。</p>
    <h2>我的技能</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <h2>联系我</h2>
    <p>你可以通过<a href="mailto:xiaoming@example.com">电子邮件</a>联系我。</p>
  </body>
</html>

输出效果：​

  • 网页标题为“个人简介”。
  • 显示一个主标题“我的个人简介”和一个段落。
  • 列出技能列表。
  • 提供一个电子邮件链接。

总结​

HTML是构建网页的基础语言，通过使用标签和属性，我们可以定义网页的结构和内容。本文介绍了HTML的基本结构、常见标签、属性以及如何创建一个简单的网页。

注意

虽然HTML是网页开发的基础，但现代网页通常还需要CSS和JavaScript来实现样式和交互功能。

附加资源与练习​

资源：​

练习：​

  1. 创建一个包含标题、段落和图像的HTML页面。
  2. 尝试使用<a>标签创建一个链接到外部网站的页面。
  3. 使用<ul>和<ol>标签分别创建一个无序列表和有序列表。

通过实践，你将更好地掌握HTML的基础知识！