【每日一练】120—零基础的人也能写出第一个网页

web前端开发

共 4628字,需浏览 10分钟

 ·

2022-12-30 18:23


写在前面的话

今天这个【每日一练】是给零基础想学前端网页设计的小伙伴准备的,也是非常基础的内容,如果你有基础或者已经入门的话,可以直接忽略跳过即可。

正文开始

了解前端三剑客

在前端开发的世界里,最基础最核心的技术就是,HTML、CSS、JavaScript。

我们都知道,HTML的全称是超文本标记语言(Hyper Text Markup  Language),用于控制网页的结构;CSS是层叠样式表(Cascading Style Sheets),用于控制网页的外观;而JavaScript是一种可以直接嵌入到HTML网页中的脚本语言,用于控制网页的行为。

这么说,可能对于完全没有接触过编程的人来讲,可能有点抽象了,如果我们把这三项技术比喻一个人的话,HTML就好比没有穿衣服的人,是裸体结构;CSS就是穿了好看衣服的人,西装革履或时尚大方,是装饰结构;而JavaScript就好比这个人的行为,是行为结构;不管这个人穿衣与否,它都可以有自己的行为动作,优雅或不文明行为。

前端开发工具

也许有人会问,那我们该如何使用这三项技术呢?

其实,这个也很简单,首先,我们需要准备一个开发编辑器,关于前端的开发编辑器有很多,在这里,我推荐两个我个人使用了觉得比较友好的工具,也是使用比较广泛的开发编辑器,Vscode、Sublime Text。

它们的下载地址如下:

Vscode下载地址:https://code.visualstudio.com/

Sublime Text下载地址:https://www.sublimetext.com/

以上两个工具,大家都可以根据自己的电脑系统进行下载相应的程序即可,下载好后,直接安装就可以,这个步骤比较简单,就跟我们手机下载相应的APP程序一样,不同的手机系统下载不同的APP程序。

所以这里,我就不再细说下载安装步骤了。

另外,需要说明一下,这个两个工具,安装其中一个就可以了,看自己喜欢那个就安装那个,如果不知道喜欢那个,就看那个好看顺眼就安装那个即可。

当然,如果你想两个工具都安装,那也没有关系。

我自己目前使用的是Vscode,之前使用的Sublime Text,当然,很早之前也用过其他的一些工具,这里就不推荐了。

写出你的第一个HTML页面

我们安装好了工具后,就需要开始写网页代码了。

在写页面代码的过程中,我们一边写页面一边了解代码。

而写网页最基本的结构就是写HTML页面,这是任何一个网页都需要的内容。

因此,我们今天先写一个最基本的HTML网页结构,也可以称为裸体结构,所以在今天的练习中,我们不会使用到CSS与JavaScript的相关知识,只是一个最基本的HTML网页结构,具体代码可以看下面的截图:

为了在阅读文章时,能够更好的阅读代码,我也把代码放在文章中了,具体HTML代码如下:

<!DOCTYPE html><html>   <head>      <!--网页编码 -->     <meta charset="utf-8" />     <!--网页关键字 -->     <meta  name="keywords" content="web前端开发技术,HTML,CSS,JS,JQ,HTML5,CSS3" />     <!--网页描述 -->     <meta  name="description" content="【web前端开发】公众号平台是一个专业而懂你的前端开发技术研究学习平台,每天与你分享【web前端开发】相关的技术文章与案例,互联网资讯,编程图书与课程,前端开发工具等学习资源,坚持每天学习一点点,每天进步一点点,关注我们,一起学习成长进步。" />     <!--网页作者 -->     <meta  name="author" content="web前端开发-杨小爱" />      <!--网页版权信息 -->     <meta  name="copyright" content="web前端开发公号平台版权所有" />     <!--网页浏览器标题 -->     <title>【每日一练】120——零基础的人也能写出第一个网页</title>      <!--favicon浏览器图标引入 -->     <link rel="icon" type="image/x-icon" href="images/favicon.ico">     <!--引入外部CSS文件 -->     <link rel="stylesheet"  type="text/css" href="style.css" />     <!--引入外部JS文件 -->     <script src="js.js" type="text/javascript"></script>  </head>   <!--网页内容开始 -->   <body>        <h1>保持持续学习的行动力</h1>        <p>拥有持续学习的行动力,</p>        <p>同【每日一练】慢慢积累与沉淀,</p>        <p>我们终将走到自己想要的目的。</p>        <p>从最开始的想法,到第一个【每日一练】的出现,再到完成第一个100练,        <p> 我们一起走过了一段路,未来的路,我们将持续的走下去,愿大家都能持续学习。</p>   </body>  <!--网页内容结束 --></html>
代码标签介绍
看完了html的代码,现在,我们把每行代码都简单介绍一下,后面练习中,我们就不再赘述html页面的结构了。
<!DOCTYPE html>,这个是一个文档声明,是告诉浏览器,这是一个HTML页面。
<html></html>,这是HTML标签,需要成对出现,这个是告诉浏览器,这个页面是从<html>开始,到</html>结束。
<head></head>,这个是页面的头部内容,主要放一些不想被用户看到的内容,只是给浏览器看的内容,例如,网页编码,网页关键字,网页描述,网页作者信息,网页版权信息等内容。
     <!--网页编码 -->     <meta charset="utf-8" />     <!--网页关键字 -->     <meta  name="keywords" content="web前端开发技术,HTML,CSS,JS,JQ,HTML5,CSS3" />     <!--网页描述 -->     <meta  name="description" content="【web前端开发】公众号平台是一个专业而懂你的前端开发技术研究学习平台,每天与你分享【web前端开发】相关的技术文章与案例,互联网资讯,编程图书与课程,前端开发工具等学习资源,坚持每天学习一点点,每天进步一点点,关注我们,一起学习成长进步。" />     <!--网页作者 -->     <meta  name="author" content="web前端开发-杨小爱" />      <!--网页版权信息 -->     <meta  name="copyright" content="web前端开发公号平台版权所有" />
大家可能已经注意到了,就是<meta>标签,这个标签,我们用得最多的几个属性就是上面HTML代码里提到的。
当然,在练习中,你可以不用写那么全,但是我们需要知道有这些标签。
除此之外,在网页的头部内容里,我们还会将外部文件的信息也会放在这里,例如CSS,JS的外部文件信息,里面有两个外部文件信息代码,具体如下:
  <!--引入外部CSS文件 -->     <link rel="stylesheet"  type="text/css" href="style.css" />  <!--引入外部JS文件 -->     <script src="js.js" type="text/javascript"></script>
<!--网页编码 -->,这个是html的网页注释,我们写注释的目的,主要是为了自己便于查找一些核心代码,特别是在代码量很大的时候,便于自己查找与理解。
在团队开发的时候,一定要写代码注释,不然,你的同事会抓狂的,特别是代码量大的时候,不写注释,同事看你代码,就会想揍你,如果你不信的话,你可以自己亲自试一下。
<body></body>,这个是页面的主体内容,想给用户看到的内容,均放在这个<body></body>标签里。
<h1></h1>,这个是标题标签,这个标签,大家应该比较熟悉,我们在Word软件里也会经常见到它,没错,它就是跟word里的那个标题是一样的。
但是,在HTML里,它只有六个级别的标签,分别是h1、h2、h3、h4、h5、h6。其中,h1标签的重要性最高,h6标签重要性最低,在一个HTML页面里,一般只会有一个h1标签,但是可以有多个其他标题标签。
<p></p>,这个是段落标签,主要用来显示一段文字,如果我们想要实现丰富的样式效果,我们需要接着CSS的知识来实现,这个我们会在后面的练习中慢慢来了解。
HTML页面预览效果
写完代码后,我们需要通过浏览器来预览我们写的效果,因此,今天这个效果如下:

我们看完了代码和页面显示效果,现在,我们再来看一下代码与页面显示的对应关系,具体如下:

到这里,我们写的第一个HTML页面结构就完成了,后面,我们就会在这个结构下面进行更多其他相关知识的练习。

写在最后

今天这个练习,就是写一个基础的html页面结构,希望这个练习能够对没有基础又想入门前端的小伙伴有所帮助。如果你觉得有用的话,请点赞我,关注我,并将它分享给你身边想学编程学网页开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总



学习更多技能

请点击下方公众号

浏览 41
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报