前端HTML（带动图，便于理解）

本文主要是介绍前端HTML（带动图，便于理解），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：

在开始学习之前，先给大家了解到：学习完这个专栏后可以干些什么

所以我用动图给大家演示一下：

我们可以运用HTML和CSS制作如下图所示的特效：

1.按钮

2.卡片

能做的东西太多了，就不继续列举了。

通过上面动图的演示，相信大家对前端产生了一定的兴趣，那么我们来一起学习吧。

☀️个人主页：个人主页

❄️系列专栏：【扬帆起航】HTML CSS

1.学习需要准备的工具

1.VS Code

2.浏览器

🐟属于自己的第一个网页

2.HTML标签学习

🌳排版系列标签

1.标题标签

2.段落标签

3.水平线标签

4.换行标签

🍀文本格式化标签

💫媒体标签

1.图片标签

2.路径

3.音频标签

4.视频标签

5.链接标签

1.学习需要准备的工具

1.VS Code

Download Visual Studio Code - Mac, Linux, Windows

2.浏览器

IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）都可以

🐟属于自己的第一个网页

如图所示：新建一个以HTML结尾的文档，然后打出！然后回车，于是便可以写出HTML的模板。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
嗨，欢迎一起学习前端    </body>
</html>

2.HTML标签学习

🌳排版系列标签

1.标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

代码：<h1>嗨，欢迎一起学习前端</h1>
<body><h1>嗨，欢迎一起学习前端</h1><h2>嗨，欢迎一起学习前端</h2><h3>嗨，欢迎一起学习前端</h3><h4>嗨，欢迎一起学习前端</h4><h5>嗨，欢迎一起学习前端</h5><h6>嗨，欢迎一起学习前端</h6>
</body>
效果：
语义：1~6级标题，重要程度依次递减

特点：

• 文字都有加粗

• 文字都有变大，并且从h1 → h6文字逐渐减小

• 独占一行

注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

标题标签一共有几个？分别表示什么含义？

• h1标签：一级标题

• h2标签：二级标题

• h3标签：三级标题

• h4标签：四级标题

• h5标签：五级标题

• h6标签：六级标题

标题标签有哪些特点？

• 文字都有加粗

• 文字都有变大，但是从h1 → h6文字逐渐减小

• 独占一行

2.段落标签

场景：在新闻和文章的页面中，用于分段显示
代码： <p>嗨，欢迎一起学习前端</p>
<body>嗨，欢迎一起学习前端嗨，欢迎一起学习前端<p>嗨，欢迎一起学习前端</p>
</body>
效果:
语义：段落

特点：

• 段落之间存在间隙

• 独占一行

3.水平线标签

场景：分割不同主题内容的水平线

代码： <hr>
<body>嗨，欢迎一起学习前端<br>嗨，欢迎一起学习前端<p>嗨，欢迎一起学习前端</p><hr></body>
语义：主题的分割转换

特点：

• 单标签

• 在页面中显示一条水平线

4.换行标签

场景：让文字强制换行显示
代码： <br>
<body>嗨，欢迎一起学习前端<br>嗨，欢迎一起学习前端<p>嗨，欢迎一起学习前端</p><br>
</body>
效果：
语义：换行

特点：

• 单标签

• 让文字强制换行