HTML基础详解(上)

下面我将为您详细讲解 “HTML基础详解(上)” 的完整攻略。

一、HTML介绍

HTML是一种用于创建网页的标记语言。它可以用来描述网页结构、文字、图像、超链接等内容，并且可以在不同平台上进行发布和交互。

二、HTML基础语法

2.1 HTML基础结构

一个HTML文档的基础结构如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <!-- 网页主体内容 -->
  </body>
</html>

其中：

<!DOCTYPE html> 表示当前文档使用的是HTML5标准；
<html> 元素是整个HTML文档的根标签；
<head> 元素中包含了网页的头部信息，如网页标题、关键词、样式表等；
<body> 元素中包含了网页的主体内容。

2.2 HTML元素和标签

HTML元素是由开始标签、结束标签和元素内容组成的，其中开始标签和结束标签通常是成双出现的。

示例：

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

上面代码中，<p> 是开始标签，</p> 是结束标签，这是一个段落。 是元素内容。

2.3 HTML属性

HTML属性是用于给HTML元素提供附加信息的，通常放置在开始标签中。

示例：

<a href="https://www.baidu.com">百度</a>

上面代码中，href 是HTML属性，https://www.baidu.com 是属性值。

三、HTML常用元素

3.1 文字相关元素

<h1>~<h6>：定义标题，h1是最高级别标题，h6是最低级别标题；
<p>：定义段落；
<span>：定义行内元素，通常用来标记文本范围；
<em>：定义强调文本；
<strong>：定义重要文本。

示例：

<h1>这是一个一级标题</h1>
<p>这是一个段落。</p>
<span style="color: red;">这是行内元素。</span>
<em>这是强调文本。</em>
<strong>这是重要文本。</strong>

3.2 图像相关元素

<img>：插入图像；
<figure> 和 <figcaption>：定义图像和图像标题。

示例：

<img src="https://www.example.com/image.jpg" alt="图片描述">
<figure>
  <img src="https://www.example.com/image.jpg" alt="图片描述">
  <figcaption>图片标题</figcaption>
</figure>

3.3 超链接相关元素

<a>：创建超链接；
<nav>：定义导航菜单。

示例：

<a href="https://www.baidu.com">百度</a>
<nav>
  <a href="https://www.example.com/home">首页</a>
  <a href="https://www.example.com/about">关于我们</a>
  <a href="https://www.example.com/contact">联系我们</a>
</nav>