前端学习的记录（vlog)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Hello</h1>
    <!-- ********* Begin ********* -->
    <h1>welcome to Educoder</h1>
        
    <!-- ********* End ********* -->
</body>
</html>

同时需要说明的是在VSCode中可以用“!”+enter 键来创建一个HTML框架；

注意此时的！是英文中的!;

2.创建 <h2>-<h6> 标签

上一次已经创建了h1标签，它是干什么的呢？它一般用来创建标题。

另外，<h2>也用来创建标题，它们有什么区别呢？ h1的字体比h2的字体要大。

当然， h3，h4，h5，h6也用来创建标题，它们的字体依次减小。

注意：创建标题只有 <h1> - <h6>，没有 h7，h8的

<!-- <h2>-<h6>标签的任务。 -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>创建不同字体大小的标题</h1>
    <!-- ********* Begin ********* -->
    <h2>创建不同字体大小的标题</h2>
    <h3>创建不同字体大小的标题</h3>
    <h4>创建不同字体大小的标题</h4>
    <h5>创建不同字体大小的标题</h5>
    <h6>创建不同字体大小的标题</h6>

    <!-- ********* End ********* -->
</body>
</html>

3.创建一个p标签

p元素通常用来表示一个段落。

你可以这样创建一个p标签，<p> p标签表示一个段落。</p>

<!-- 我是一个段落。 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <p>我是一个段落</p>

    <!-- ********* End ********* -->
</body>
</html>

4.创建 a 标签

a标签通常用来定义一个链接。href属性的值就是链接的地址。

你可以这样创建一个a标签，<a href="http://www.baidu.com">百度</a>。当你点击这个链接时，它就会跳转到百度首页。

<!-- 在 Begin-End 区域内进行代码补充，完成第一个a标签， 
跳转的地址是https://www.educoder.net，
文本内容是Educoder平台的创建任务。 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <a href="https://www.educoder.net">Educoder平台</a>

    <!-- ********* End ********* -->
</body>
</html>

5.创建 img 标签

下面我们要实现，一个图片的插入了，问题不难，需要的是耐心，加油哦

img标签通常用来表示一个图片。src属性的值就是图片的地址，alt属性的值是当图片没有展现出来时提示的文字。

你可以这样创建一个img标签， <img src="https://www.educoder.net/attachments/download/207791" alt="风景画"/>。

这样图片就显示出来了。效果如图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <!-- 图片的地址是https://www.educoder.net/attachments/download/207801，
    提示文字是小狗走路的创建任务。 -->
        <img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路">
    <!-- ********* End ********* -->

</body>
</html>

6.创建 div 标签

div标签可以把文档分割为独立的、不同的部分。它没有实际的意义，仅仅表示创建了一个块级元素。

你可以这样创建一个div标签，<div>创建div标签</div>。

可以发现：它和 <h1>-<h6>，<p>标签的创建是一样的，只不过它没有实际的意义。

<!-- 本内容是我是div标签的创建任务。 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>我是h2标签</h2>
    <p>我是p标签</p>
    <!-- ********* Begin ********* -->

    <div>我是div标签</div>

    <!-- ********* End ********* -->
</body>
</html>