前端小白入门

为了满足前端萌新粉丝的需求，这篇文章还是很接地气的，非常适合新手前端阅读~

不要对前端扎实的“老前端”玩家心灰意冷。小会议将持续为大家带来实用有效的深度前端干货！

谢谢大家的关注，打电话给~大家~

制作第一个HTML界面

我讲了html，css，js，JS之间的关系。

接下来，我们来看看html到底是什么样子的。

打开任意编辑器，然后在文件中单击新建html文件。您看到的大多数代码如下:

文件

那么在这堆代码中，我们可以明显感受到html的一个特点:标记。

页面上到处都是标签，从这一串代码的第一行到最后一行，都是标签。

第一行:这是文档语句。我们可以把里面的字全部拆开。

第一，感叹号，没什么好说的。后来DOCTYPE这个词可以拆分成两部分:DOC和TYPE。

是DOC文档的缩写，意思是文件。

这也和html本来的功能有关。

后来这个类型其实就是类型的意思，整个连接就是文档类型；

后跟一个html，所以整个标签指定这个文档的类型是html。

再往下，在代码的第二行有一个html标记:

里面的这个lang叫属性，可以写也可以不写。这里指定了语言，en代表英语。

那么这里可以这样写:这样，是不是有点像最后一行？

在代码的底部还有一个html标记:

但是这个标签和之前的有点不同，前面多了一个斜杠。事实上，它们是一个整体:

这个整体在html语言里叫做标签对，一个代表开始，一个代表结束。

既然有标签对，就有单身狗——单标签，这个我们后面再说。

写在由空单元格和标签名称分隔的标签中的代码称为属性。

比如html标签里有阿郎属性，然后第四行meta标签里有charset属性。至于这个属性的用法，后面再说。

看第三行，这里有一个head标签:这个时候，我们在想，是不是应该通过再往后看，找到head标签的结尾？

果然，我们在第六行找到了head标签的结尾:。

那么说明head也是标签对。在html语言中，我们一般使用的标签大部分都是标签对，所以写标签的时候一定不要忘记加上结尾！

这时我们可以看到head标签的开头和结尾中间有两个标签，分别是:在第四行和:document在第五行。

这样的包容关系称为嵌套关系，或者形象地说，可以称为亲子关系。

然后meta标签和title标签是并列的，所以这时候它们之间形成的关系叫做并列关系，也可以叫做兄弟姐妹关系。

用树形图描述这种关系:

在这张图片中，你可以清楚地看到每两个标签之间的关系链。

让我们看看此时的meta标记:

在这里，你可以看到页面中只有一个meta标签，也就是说meta是单个标签，带有一个属性:charset，字符集的意思；

那么字符，也就是我们的字符，然后字符集，就相当于一个语言包。例如，将其中的UTF-8替换为gbk表示中文字符集。

这里使用的UTF 8代表通用字符集，基本上包含了世界上所有的语言和字符；

这时候如果我在页面中输入任何文字，浏览器都能准确渲染，不会把中文渲染成乱码。

估计很多同学都很熟悉下面这张图:

所以utf-8的作用就在这里了。当然，meta标记中还有许多其他属性，但这超出了我们今天讨论的范围。

然后是标题标签，这个标签包含的内容会显示在浏览器的标签页中；

例如，如果我在title中键入“这是我输入的标题”，它将出现在浏览器的下图中。

然后低头一看，只剩下一个身体标签，虽然里面什么都没有；

但是我们要在页面上呈现的一切都必须写在正文中，比如举世闻名的“Hello world！”

在正文中写完这句话，我们就可以在浏览器中看到了。

就这样，我们的第一个html页面完成了。这不是很简单吗？

如何在页面中引用css样式

现在我们已经完成了我们的第一个HTML页面，但是这个HTML页面是不完整的；

或者只是一个页面，没有任何风格、装饰、功能。

那么如何给页面添加一些装饰性的东西呢？

就像HTML刚开始免费使用的时候，对页面装饰的需求越来越大。我们只能通过css改变HTML的外观，让我们的网页更漂亮，这样消费者才会买账。

那么在HTML页面中使用css有三种方式。第一种叫做行间风格。估计很多写后端的同学都会很熟悉。

就像这样:

在这行代码中，P是一个HTML页面中最常见的标签之一，其背后的样式就是标签的属性；

任何写在标记括号中的内容，后跟标记名，并以空大小写与标记分开，都是属性。有很多属性，包括ID属性，clsss属性等。稍后我们将详细讨论它们。

这一行代码中写在style属性后面，用“”包装的东西都叫属性值。这里是属性值，是css样式。

css样式有三种，width宽度，height高度，background背景。

正面的宽度和高度给个100px分别是；

像素，一个单位，和我们日常生活中的cm厘米，mm毫米是一样的。

只是屏幕上不能用cm或者mm作为单位。屏幕是由像素组成的，所以网页也是由像素组成的。

用眼睛仔细看我们的电脑屏幕，可以看到一些小的发光点，一个发光点，差不多一个像素。

屏幕上的像素数量取决于您的分辨率。比如我现在的分辨率是1920*1080。

那么说明我的屏幕从左到右是1920像素，从上到下是1080像素。

再往后，我在后台写了一个代码“#f00”。

这个f00其实是一个颜色的表征。在网页中，我们有四种方式来表示颜色，即:

1.英文关键词，比如“红”、“绿”、“蓝”等等，所以这里我可以把背景中的值写成ren:background:red；

二、十六进制代码，如:ff0000这是一个十六进制代码。这个代码代表红色。这串代码可以分为三组。FF，00，00分别代表红绿蓝三原色。

第一组代表红色，第二组代表绿色，第三组代表蓝色。十六进制数是从0到f。

也就是说，它们是:0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，f。

最小值为0，最大值为F..

回到这组数字:ff0000，其中红色最大，绿色和蓝色最小，所以这组数字代表红色；

当然，如果每组数字都是重复的，可以缩写，这个数字可以缩写为:f00，这是我在代码中使用的值。

第三，rgb法。其实从这几个字母可以看出，rgb代表三原色，三原色的组合可以代表任何颜色。

在rgb方法中，接收三个数字，它们的值范围从0到255。

和前面的十六进制一样，第一个数字代表红色，第二个数字代表绿色，第三个数字代表蓝色。

如果要用rgb方法表现红色？相信你心里已经有答案了:背景:rgb

第四，rgba法。这种方法是在rgb方法的基础上，在后面加了一个A来控制透明度。其取值范围为0~1。

如rgba；这意味着半透明的白色。

a值为1时颜色不透明，为0时完全透明。

有了这样一行代码，我们已经在页面上画出了一个宽100像素、高100像素、背景色为红色的方框。

这也是引用css的第一种方式——行间风格。

第二种叫做内嵌风格。它不再写在行间，而是写在页面的头部，也就是head标签里面。请看下面的代码:

无标题文档

首先，我在页面的body标签中写了一个P标签，以及一个值为“box”的id属性。

在这里，只要遵循命名规则，id属性的值可以随意编写:

1、信的开头

2.字母数字下划线组合

3、区分大小写

不过还是有一些不成文的规定，比如尽量语义化，我们后面会讨论。

在这段代码中，我在head标记中编写了css样式，并将其包装在style标记中。注意了！这里的风格是标签，不是属性！

首先在标签中写一个“#box{}”。这个#号和它后面的方框组成一个选择器，叫做id选择器。

这意味着选择一个id值为box的元素，并为其添加相应的样式。

因为我在body标签中给P的id的值是box，所以我们也要在这里写box，然后对应之后就可以给P添加对应的样式了。

第三种样式叫做外联样式表。顾名思义，这个样式表肯定不会再写在HTML页面中，而是单独创建一个新的css文件，如下所示:

这张图有两个文件，一个是HTML文件，一个是css文件，也就是HTML页面代码。

无标题文档

但是风格不在页面里。

相反，有一个额外的链接标签，它有两个属性，即href和rel。

href代表超文本参考，是超文本参考的缩写。在href中，编写了一个与外部css文件同名的style.css文件，因此style.css文件被引用到此页面。

后面的rel属性是relation的缩写，关系的意思。这里描述了一个引用文件的类型，从后面rel的值的样式表也可以看出来。

我们来看看style.css是什么样子的。

# box { width:100px；高度:100px背景:红色；}

这就是style.css文件中所写的内容:一个选择器和一堆样式。没什么好说的。

现在，所有使用css的方法都有了。尽快发挥你的想象力，打造一个漂亮的网站！