HTML基础结构入门

news2024/10/6 16:16:53

HTML（超文本标记语言）是构建网页的基础语言。它用于描述网页的结构和内容。让我们从最基本的HTML文档开始。

HTML基础结构

一个基本的HTML文档结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我的第一个HTML页面。</p>
</body>
</html>

让我们逐行解释这个代码：

<!DOCTYPE html>：声明文档类型，告知浏览器这是一个HTML5文档。
<html lang="zh-CN">：定义文档的根元素，并设置文档的语言为中文。
<head>：包含所有不在网页正文显示的内容，比如文档标题、字符集声明等。
<meta charset="UTF-8">：定义文档的字符集为UTF-8，这样可以正确显示中文字符。
<title>我的第一个网页</title>：定义网页的标题，会显示在浏览器标签上。
<body>：包含网页的主要内容，浏览器将显示这一部分的内容。
<h1>你好，世界！</h1>：这是一个一级标题，通常用于页面的主标题。
<p>这是我的第一个HTML页面。</p>：这是一个段落，用于包含文本内容。

基本HTML标签

标题标签

HTML提供了六种标题标签，从<h1>到<h6>，<h1>是最大的标题，<h6>是最小的标题。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

段落标签

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

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

链接标签

链接标签<a>用于创建一个超链接。

<a href="https://www.example.com">这是一个链接</a>

图像标签

图像标签<img>用于在网页中嵌入图像。src属性指定图像的URL，alt属性提供图像的替代文本。

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

小练习

创建一个HTML文件，命名为index.html。

在文件中写入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我的第一个HTML页面。</p>
    <a href="https://www.example.com">访问Example网站</a>
    <img src="image.jpg" alt="描述图像的文字">
</body>
</html>

保存文件并在浏览器中打开它，查看效果。

整合代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我的第一个HTML页面。</p>
    <h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<a href="https://www.example.com">这是一个链接</a> 
<br>
<img src="https://p5.img.cctvpic.com/photoworkspace/contentimg/2023/03/30/2023033011303020756.jpg" alt="描述图像的文字">

</body>
</html>