HTML 入门指南：从基础到实战，轻松掌握网页构建-CSDN博客

一、HTML 是什么？

HTML，即超文本标记语言（HyperText Markup Language），是构建网页的基石。简单来说，它就像网页的 “骨架”，决定了网页上会显示哪些内容，以及这些内容的基本结构。

我们平时浏览的各种网页，无论是新闻资讯、电商平台还是社交网站，其背后都离不开 HTML 的支撑。通过一系列特定的标签，HTML 能将文字、图片、视频、链接等元素有序地组织起来，呈现给用户。

二、常用标签，搭建网页基本框架

1. 文档结构标签

<html>：整个 HTML 文档的根标签，所有其他标签都包裹在它里面。

<head>：用于存放文档的元数据，比如标题、字符编码等，这些内容不会直接显示在网页上。

<title>：定义网页的标题，会显示在浏览器的标题栏或标签页上。

<body>：包含网页中所有可见的内容，如文字、图片、链接等。

示例：

<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
这里是网页的可见内容，比如一段文字：欢迎来到我的网页！
</body>
</html>

2. 文本标签

<h1>到<h6>：标题标签，<h1>是最大的标题，<h6>是最小的标题，用于表示不同层级的标题内容。例如：

<h1>这是一级标题，通常用于页面主标题</h1>

<h2>这是二级标题，可用于章节标题</h2>

<h3>这是三级标题，用于小节标题</h3>

<p>：段落标签，用于定义一段文本。比如：


<p>这是第一个段落内容，会自动换行且与其他段落有一定间距。</p>

<p>这是第二个段落内容，展示了段落之间的间距效果。</p>

<br>：换行标签，用于在文本中强制换行。例如：


第一行文字，这里是一些内容<br>第二行文字，通过br标签实现了换行

3. 链接标签

<a>标签用于创建链接，让用户可以从一个页面跳转到另一个页面。其基本格式为：


<a href="目标网址">链接文字或内容</a>

比如，链接到百度的代码是：


<a href="https://www.baidu.com">访问百度首页</a>

也可以链接到本地的 HTML 文件：


<a href="about.html">查看关于我们页面</a>

4. 图片标签

<img>标签用于在网页中插入图片，它有几个重要的属性：

src：指定图片的路径（可以是本地路径或网络路径）。

alt：当图片无法显示时，显示的替代文本。

width和height：设置图片的宽度和高度。

示例：


<!-- 插入网络图片 -->

<img src="https://images.unsplash.com/photo-1505236858219-6b728073332d" alt="风景图片" width="300" height="200">

<!-- 插入本地图片 -->

<img src="images/flower.jpg" alt="花朵图片" width="200" height="150">

三、设置字体格式

在 HTML 中，可以通过一些标签来设置字体的基本格式，也可以结合 CSS（层叠样式表）进行更丰富的设置。

1. 基本字体标签

<b>：将文字加粗，例如 <p>这是<b>加粗的文字</b>，这是普通文字</p>。

<i>：将文字倾斜，例如 <p>这是<i>倾斜的文字</i>，这是普通文字</p>。

<u>：给文字添加下划线，例如 <p>这是<u>有下划线的文字</u>，这是普通文字</p>。

2. 使用 CSS 设置

通过<style>标签可以在 HTML 中嵌入 CSS 样式，对字体进行更详细的设置，如颜色、大小、字体类型等。

示例：

<style>
    .titleFont {
        color: #0066cc; /* 字体颜色为蓝色 */
        font-size: 24px; /* 字体大小为24像素 */
        font-family: "黑体", sans-serif; /* 字体为黑体 */
        font-weight: bold; /* 字体加粗 */
    }
    .contentFont {
        color: #333333;
        font-size: 16px;
        line-height: 1.8; /* 行高 */
    }
</style>
<h2 class="titleFont">这是应用了标题样式的文字</h2>
<p class="contentFont">这是应用了内容样式的文字，展示了行高和字体大小的效果。</p>

四、添加多媒体

在网页中添加图片、音频和视频等多媒体元素，可以让网页更加生动有趣。

1. 插入音频

使用<audio>标签可以在网页中插入音频，常用属性有src（音频文件路径）、controls（显示播放控制按钮）、autoplay（自动播放，部分浏览器可能不支持）、loop（循环播放）。

示例：


<!-- 插入本地音频 -->

<audio src="audios/music.mp3" controls loop>您的浏览器不支持音频播放</audio>

<!-- 插入网络音频 -->

<audio src="https://example.com/audio/podcast.mp3" controls>您的浏览器不支持音频播放</audio>

2. 插入视频

使用<video>标签插入视频，常用属性有src（视频文件路径）、controls（显示控制按钮）、width和height（视频宽度和高度）、autoplay（自动播放）、loop（循环播放）。

示例：


<!-- 插入本地视频 -->

<video src="videos/movie.mp4" controls width="500" height="300">您的浏览器不支持视频播放</video>

<!-- 插入网络视频 -->

<video src="https://example.com/videos/clip.mp4" controls width="400" height="250">您的浏览器不支持视频播放</video>

五、获取网页资源

制作网页时，我们常常需要用到图片、音频、视频等资源，以下是一些获取免费资源的途径及使用示例：

1. 图片资源

Unsplash（Beautiful Free Images & Pictures | Unsplash）：提供大量高质量的免费图片，可用于商业用途。

使用示例：


<img src="https://images.unsplash.com/photo-1498354136128-58f790194fa7" alt="城市夜景" width="400">

Pexels（https://www.pexels.com/）：同样有丰富的免费图片，支持多种尺寸下载。

使用示例：


<img src="https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg" alt="森林" width="300">

2. 音频资源

Free Music Archive（Royalty free music and 'free to download' music - Free Music Archive）：免费的音乐资源库，有各种风格的音乐。

使用示例：


<audio src="https://freemusicarchive.org/music/download/2e8a83c-2d2a-4d5a-8e4d-3d7e0d5e7e0a" controls></audio>

3. 视频资源

Pixabay（https://pixabay.com/）：不仅有图片，还有免费的视频资源。

使用示例：


<video src="https://player.vimeo.com/external/367314079.sd.mp4?s=...（视频地址）" controls width="500"></audio>

引用资源时，要注意遵守资源的版权规定，避免侵权。

六、创建容器

在 HTML 中，<div>和<span>标签是常用的容器标签，用于对网页元素进行分组和布局。

1. <div>标签

<div>是块级元素，会独占一行，常用于划分网页的大区域，如头部、主体、底部等。

示例：

<div style="background-color: #f0f0f0; padding: 20px; margin-bottom: 20px;">
    <h2>网页头部</h2>
    <p>这里是网页的头部区域，可包含logo、导航等</p>
</div>
<div style="background-color: #e0e0e0; padding: 20px;">
    <h2>网页主体</h2>
    <p>这里是网页的主体内容区域</p>
</div>

2. <span>标签

<span>是行内元素，不会独占一行，常用于对段落中的部分文字进行样式设置。

示例：


<p>这段文字中，<span style="color: blue; font-weight: bold;">这部分是蓝色加粗的</span>，这部分是普通的。</p>

<p>价格：<span style="color: red; font-size: 18px;">¥99</span> 原价：<span style="text-decoration: line-through;">¥199</span></p>

七、实战：制作一个简单的个人介绍网页

下面我们通过一个实战案例，来综合运用前面所学的知识，制作一个简单的个人介绍网页。

<html>
<head>
    <title>我的个人介绍</title>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: "宋体", serif;
        }
        .container {
            width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
        }
        .title {
            color: #333;
            text-align: center;
        }
        .info {
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">个人介绍</h1>
        <img src="https://images.pexels.com/photos/1074777/pexels-photo-1074777.jpeg" alt="我的照片" width="200" height="250">
        <p class="info"><b>姓名：</b>张三</p>
        <p class="info"><b>年龄：</b>25岁</p>
        <p class="info"><b>爱好：</b><i>读书、旅游、编程</i></p>
        <p class="info"><b>个人简介：</b>我是一名热爱学习的程序员，喜欢探索新技术，希望能和大家一起交流学习。</p>
        <p>我的个人博客：<a href="https://blog.example.com">https://blog.example.com</a></p>
        <h3>我的作品展示</h3>
        <video src="videos/mywork.mp4" controls width="500" height="300">您的浏览器不支持视频播放</video>
    </div>
</body>
</html>

这个简单的个人介绍网页包含了标题、图片、文字介绍、链接和视频等元素，通过 CSS 样式进行了美化，大家可以根据自己的需求进行修改和完善。