跳到主要内容

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的基础知识!