前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程

第一天：

一、基础认知

1.网页由哪些部分组成：图片，音频，视频，超链接。

2.前端代码由“浏览器”转化成用户眼中的页面。（解析和渲染）

3.浏览器：是网页显示、运行的平台，前端开发必备利器

4.渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

5.web标准

二、基础html

1.<strong>...</strong>，是双标签语句，作用是加粗

ctrl+s保存

ctrl+/注释

shift+1-》！，输入！可以直接生成框架

HTMl骨架结构：

html标签：网页的整体

head标签：网页的头部

body标签：网页的身体

title标签：网页的标题

html之间由嵌套关系和并列关系

第二天：

1.排版标签

标题标签：Ctrl+d连选相同数字，然后一起修改

shift+alt+向下 添加标题

段落标签：若输入文字过多，导致要拖动很久的辐条，则查看-自动换行（alt+Z）勾选

最新版的vscode按！已经不会出html骨架了，现在要构建html框架输入的是html：5然后回车

2.文本格式化标签：

3.媒体标签

./当前的（相对路径）

mac的是根目录

相对路径（常用）

概念普及：

当前文件：当前的html网页

目标文件：要找到的图片

相对路径：从当前文件开始出发目标文件的 过程

相对路径分类：

同级目录

下级目录

文件夹名字/图片名字如

imges/f.gif

上级目录

../返回上级目录

如果在不同文件夹，却相邻，相对路径则先返回上级../再进入目标文件夹寻找

如../imges/f.jpg

音频标签

autoplay部分浏览器不支持

任何标签里的src都是指路径的意思

视频标签

谷歌浏览器可以让视频自动播放，但必须是静音状态muted

MP4只支持h264编码的，其他编码会没有画面

4.链接标签

href全称hyperlink reference 超链接引用

--跳转地址

（超链接是目前唯一自带颜色的标签）

当开发网站初期，我们还不知道跳转地址的时候，href的值书写#（空连接）

如果不写target，默认值是_self覆盖原网页

index网页首页

一、列表标签

目标：能够使用无需列表、有序列表、自定义列表标签，实现网页中列表结构的1搭建

1.列表的应用场景

2.无序列表

3.有序列表

4.自定义列表

二、表格标签

表格边框：border边框属性：solid实线显示

<table border="1px">

tab缩进

shift+tab退回

合并单元格-思路

场景：将水平或垂直多个单元格合并成一个单元格

1.跨行合并（垂直合并成一个）

2.跨列合并（水平合并成一个）

三、表单标签

目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

input是行内块元素所以不换行

action表单提交地址

button：若要有提示文本则额外添加属性value：提示文本

1. 向上复制单元格：Shift +Alt+UpArrow 2. 向下复制单元格：Shift +Alt+DownArrow

如果在行代码的末端直接回车都知道，如果光标在中间开头的就CTRL+回车

四、语义化标签

目标：能够认识开发中没有语义布局标签（div和span）和有语义的布局标签

场景：实际开发网页时会大量频繁的使用div和span这俩个没语义的布局标签

div标签：一行只现实一个（独占一行）

span标签：一行可以显示多个

五、实体标签

目标：能够通过字符实体在网页中显示特殊符号

css

pixel像素--px

二、基础选择器

目标：理解选择器的作用，能够使用基础选择器在HTML中选择元素

选择器的作用：

选择页面中对应标签（找她），方便后续设置样式（改她）

优先级 id选择器 > 类选择器 > 标签选择器

清除内外边距

三、字体样式和文本样式

就近原则，行内优先，页面其次，外嵌最后

作用域小优先级高

多个属性以空格隔开

复合属性：一个属性冒号后面书写多个值的写法

这个是块元素整体居中，text-align是块元素里面的元素基于父元素居中

p是段落文本，div是一整块地

div相当于文本框

一、选择器进阶

目标：能够理解复合选择器的规则，并使用复合选择器在HTML中选择元素

后代选择器选择所有的后代

选择器1和选择器2可以为标签，ID，类

div+p（同级）生成div和p标签

ul>li{111}*3

ul里面三个li，每个li为111

ul>li{$}*3

ul里面三个li，每个li数值递增

二、背景相关属性

正数：向右向下移动；负数：向左向右移动

注意：背景色和背景图只显示在盒子里面

背景图位置如果是英文单词可以颠倒顺序

数字就不可以

三、元素显示模式

四、css特性

目标：能够认识css的继承和层叠特性

选多行加内容删除alt+shift+鼠标左键单击

一、css三大特性

目标：能认识不同选择器的优先级公式，能够进行css权重叠加计算，分析并解决css冲突问题

！important不要给继承的添加，自己有样式无法继承父级样式

就近原则

三、盒子模型

目标：能够认识盒子模型的组成，能够掌握盒子模型边框、内边距、外边距的设置方法

border属性不分顺序，粗细+线条种类+线条颜色

也可padding-方位名词

某一边不想设内边距，设置0px即可

撑大盒子的都有啥？border+padding

要保持盒子尺寸不变则，新尺寸=原尺寸-2*（border大小+padding大小）

margin外边距用法和padding一样

margin：0 auto；auto外边距自动挤压

设计稿开头代码可以用下列