前端学习的记录(vlog)

系列文章目录

目录

系列文章目录

文章目录

前言

一、工具准备;

二、前端学习的概要;

1,HTML的基本标签;

2,HTML表单类的标签;

3,HTML表格类的标签

4,HTML的综合案例;

三,初识HTML;

1.创建第一个HTML标签;

2.创建

-

标签

3.创建一个p标签

4.创建 a 标签

5.创建 img 标签

6.创建 div 标签




前言

下面对前端作一概述,前端是每个程序员 ,必备的技能,

有这良好的前景,而且容易上手,和理解,在学习过程中建议多动手敲代码,

加深理解;

一、工具准备;

目前前端使用的最流行的工具是VScode,是一款轻量且开发效率高的软件,

配置起来也很方便,只需要下载几个插件即可,这个环境的安装我会专门出一期

博客,同时它还支持多种语言,关于他的配置,有兴趣的话,欢迎私信我,

我会帮助大家配置好相关语言IDE;

每个小的知识点背后会有示例代码,帮助大家理解;

还有就是不知道为什么后面写不了,下次我会早点更新的。

二、前端学习的概要;

前端学习分为大致的三个内容,

第一HTML(针对于网页内容方面),

第二CSS(针对余 背景颜色已经网页美化);

第三JavaScript的相关内容

下面对HTML大致内容作以了解

1,HTML的基本标签;

2,HTML表单类的标签;

3,HTML表格类的标签

4,HTML的综合案例;

以上就是HTML的大致框架;

三,初识HTML;

下面对HTML的一些基本标签做以了解;

1.创建第一个HTML标签;

<h1>welcome</h1>

上面这行代码它表示一个HTML元素

大多数 HTML 元素都是由开始标签结束标签组成的,通常成对出现 。

开始标签:用尖括号<>包裹关键词,像<h1>这样。 结束标签:用</>包裹和开始标签一样的关键词,像</h1>这样。

可以发现: 结束标签就比开始标签多了一个斜杠/

<!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的字体要

当然, h3h4h5h6也用来创建标题,它们的字体依次减小。

注意:创建标题只有 <h1> - <h6>,没有 h7h8

<!-- <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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

就那样啊啊啊啊啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值