打开一个你喜欢的编辑器,这里的话,我用的是VScode,那么接下来我们就要开始写我们的第一个前端demo了。
首先,我们在桌面上新建一个文件夹,我就简单的取名为叫HTML了,就像下面这个样子。
然后,我们就要打开项目了,一种方法是打开编辑器,点击左上角将文件夹选中打开,进入到文件夹里面,还有一种就是直接将桌面上的文件夹选中,拖着进入VScode图标,编辑器就会自动打开了,我的话,第二种居多,懒人做法。
进去之后,文件夹由于我们还没创建文件,所以自然是空的状态,将鼠标点击到下面这幅图的,也就是HTML旁边的第一个图标,新建文件即可。
那么,有很多刚入门的小伙伴可能就直接写名字了,比如就叫demo,然后就回车了,此时,我们的VScode编辑器是无法识别你建的文件到底是什么类型的,举个例子,你保存一张图片,点开属性,后面往往都是xxxxx.jpg的形式,这样才能一眼告诉别人,我是jpg格式的文件,我们这里也是一样的,我们要写的是html网页,所以,我们就要在取的名字的后面加上一个.html,然后再回车,格式就像我下面写的这样。这里的话,我还要强调的一点,就是取名字最好是英文的,写中文是极其不规范的,我这么写是因为是我要写文章所以来区分的,真正做项目的时候要全英文,不会就百度翻译,英文水平瞬间就提升了。
新建好文件,我们会看到右边编辑器里展示出来的是一片空白,不要慌,直接输入一个感叹号"!",就像下面这样。
此时,我们会看到第一个右边提示的像不像就是我们html的标准格式,不要怀疑,直接回车,我们就会看到下面这样的界面。和我们刚刚右边看到的提示是一模一样的。
那么到这里,我们最基本的html结构就大体建完了,非常的简单。接着,我们就要开始试验一个这个刚建完的html页面了,此时你运行,肯定是啥都没有的,一片空白,所以要看出效果,我们就必须加入一些文字,请看下面的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
今天的你超棒的!!!
</body>
</html>
紧接着,我们就要运行这个网页了,值得一说的就是VScode这个运行网页就非常的不方便,你需要安装一个插件,叫view in browser,意思就是在浏览器中查看,然后我们右键点一下文件,会看到view in browser,点击就会打开我们的默认浏览器,之后就会运行我们编写的代码了。
浏览器运行完代码的样子如下
可以看出,我们刚刚加上的这几个字被编译出来了。
当然了,对于初学者来说,代码缩进还是很重要的。什么是代码缩进?举个例子,我们上学时候写的作文,是不是规定每个段落的开头要空两格。那么,在前端的代码里,我们怎么进行缩进呢?每当一个标签或者内容出现在了另外一个标签的内部,也就是出现嵌套结构的时候就需要缩进了,我们来看下面的代码,就是比较典型的缩进,这些缩进不是用空格敲出来的,而是用tab键进行缩进的,可以自己试试来感受一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
今天的你超棒的!!!
</body>
</html>
刚开始写代码的小伙伴很多都是写成下面这样子的,就很笔直,俗称瀑布式写法,一泻千里。但是我想该不会真的有人会觉得这样写很有美感吧,不会吧不会吧。如果有人坚持这样写很好看,我建议不要放弃治疗,总有审美康复的一天。再强调一遍代码里没有缩进是不对的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
今天的你超棒的!!!
</body>
</html>
最后,我们来认识一下网页的基本结构,首先呢,一个标准的网页,要写上<!DOCTYPE html>,这句是声明,就是告诉浏览器,请使用HTML5的标准来解析这个网页,是目前所有网页固定的写法,必须写在开头。
然后就是网页的正文内容了,大致上是分为两个部分,第一部分是网页的头部,也就是head标签,这里面的信息都是对网页的整体说明,包括网页的标题和使用的字符集等等。什么是字符集,我们这里的字符集是UTF-8,UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码,简单的了解一下就好了。
第二部分就是body部分,body表示网页的身体,网页的主要内容都写在这里,网页展示的效果和内容都在这里。
到这里为止,我们的第一个网页就算简单的制作完成了,赶紧行动起来练习一下吧。
Wasting time is robbing oneself. 浪费时间就是掠夺自己。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。