Web前端 ---入门教学

一、前言

（1）什么是前端？

网站、小程序、web-app

（2）开发语言？

html：网页显示的内容

css：网页显示内容的属性

JavaScript：网页显示内容的逻辑

（3）编译器

vscode：百度搜索vscode、直接download、眼睛闭起来next

（4）简单插件的安装：侧边栏的第五个：扩展商店

chinese：中文

open in browser：在浏览器中打开网页

生效：重启编译器

（5）创建第一个网站=多个网页=多个html文件

a、新建一个空白的文件夹，拖拽入vscode之中

b、点击【新建文件】，输入文件名，后缀是【.html】，点击回车

（6）快捷键

ctrl+c 、 ctrl+v ：复制粘贴

ctrl+s ：保存

ctrl+r ：刷新

英文感叹号! ：快速生成一个标准网页格式

二、常用html标签

HTML：超文本标记（标签）语言

格式：所有html标签都是一个矩阵

            <标签 属性1=值1 属性2=值2....>内容</标签>

（1）div：容器标签

A、作为容器分割整个网页（分割思想：开发一个网页的时候，原则是尽可能的将网页切割成我们能够解决的最小单元）

B、宽度占据网页的一整行，高度会由内容自动撑大

如果我们手动指定了div的高度，那么默认就会失效，高度为固定高度

C、写文字

（2）a：跳转标签

A、href：跳转链接

（3）img：图片标签

A、src：图片路径

三、css的编写

会写word，就会写html

A、给上标签添加属性【class选择器】，设置一个值x ，x帮我们选中了这个标签

B、找到head标签，添加style标签，在style里面书写css 【如果已经有style，不需要重复创建】

C、格式：

                选择器名{
                     属性1:值1；
             属性2:值2；
             .......
                }

D、html与css的连接：class选择器使用【点语法】

（2）常用的css属性

color：文字颜色

font-size：文字尺寸

px：像素

text-decoration：文字装饰 ：下划线underline、横线line-through、无none

&nbsp； 网页的空格

height：标签高度