前端学习

前端学习笔记

用到的工具

1.vscode（下载地址：https://vscode.en.softonic.com/）推荐下载绿化版，以免以后卸载的时候删不干净，因为安装版是要占用注册表的。
2.HBuilder X（下载地址：https://www.dcloud.io/hbuilderx.html）
两个开发工具都可以，个人建议下载vscode，一些快捷键用起来比较方便，下面我讲的都是基于vscode来写的

常用的一些快捷键

1、创建一个html文件：html:5+回车 或者 ！+回车 （注意：要在英文状态下输入）
2、注释：Ctrl + ？
3、快速补齐：Tab键
4、div*3:生成3个div标签，其他标签同理
5、保存：Ctrl+s
6、开发工具设置自动保存的流程：点击左上角的“文件”，找到文件里的“自动保存”，打钩即可。

框架介绍

主要分为三个部分:
1、css层叠样式表代码：

2、html代码：
3、js代码：

标签的作用：对网页的某一部分进行标记，浏览器就知道这是网页的那个部分，标签都是成双成对出现的，比如网页头部：

，网页的尾部：

网页的标题，当你写一个网页的时候，创建好文件的下一步任务就是首先修改网页的标题，这样用户就知道我们这个网页是什么东西了 。
body表示网页的整个身体，也就是表示整个浏览器的大小，我们所有的网页的布局、排版都需要在body(网页的身体)里面使用标签进行标记。也就是我们所谓的“网页布局” 。

一些常用代码：

设置div容器的宽高

        div{
            /* px表示像素网页制作的常用单位 */
            width: 100px;
            height: 100px;
        }

括号里面是渐变的颜色，种类不限，数量不限。

  background-image: linear-gradient(red,green);

margin：设置元素左右居中，参数一表示上下间距，参数二表示左右间距，auto表示左右自动居中，这行代码在实际开发中使用频率极高。

margin: 200px auto;

文本居中：

 text-align: center;

文本大小：

font-size: 26px;

添加背景图片：（里面是图片的相对路径）

 background-image: url();

行高：文字与文字之间的高度

 /* 行高 */
 line-height: 10px;

今天就写这么多吧，下次在写。