四天带你快速前端入门

Day1

什么是前端，前端技术的应用

前端就是数据的呈现

了解代码的编写软件vs code。

vs code包含Emmet，所以可以快捷的完成很多操作

！ 快速生成html基础结构

lorem+数字 快速生成指定值的随机单词

前端的三驾马车——HTML,CSS,JS

HTML——超文本标记语言 ，负责网页的结构

CSS——层叠样式表，负责网页的格式

JS ——负责网页的效果，JavaScript

CTRL+/——快速注释

指令*数量——快速执行多个重复命令

HTML包含哪些元素

开始标记、结束标记、元素内容、属性

什么是空元素？

空元素就是没有元素内容和结束标记的元素

元素嵌套的用法和规则

父元素和子元素、祖先元素和后代元素

不同元素可以相互嵌套

标签了解

<img src="" alt="">   
//src指的是图片的路径，alt指的是图片的描述性文本
<a href="">超链接文本</a>
//href指的是跳转链接的地址路径，元素内容填写超链接的文本
href里还可以放置文件路径，此时a标签就由跳转标签变为下载标签了
<p>
    这是一段文本
</p>
//p元素内容就是网页的段落文本
<h1>
    这是一级标题
</h1>
//h1到h6，一共是6级标题，依次从大到小，代表了标题的权重

Day2

什么是ID？

每一个元素都有不同的属性，但ID是每一个元素都有的属性了，每一个ID是唯一的，不可重复。所有引用ID地址的前面都需要加上#

ID锚点实例

<a href="#one">跳转到第一章</a>
<a href="#two">跳转到第二章</a>
<a href="#three">跳转到第三章</a>
<h1 id="one">第一章</h1>
<p>文章内容</p>
<h1 id="two">第二章</h1>
<p>文章内容</p>
<h1 id="three">第三章</h1>
<p>文章内容</p>

语义化标签

div元素

负责给网页划分区域，没有任何的语义，仅仅表示一个容器，用于容纳其他元素

语义化结构元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PlClwy5f-1591239301545)(F:\前端学习\学习笔记\img\IMG_20200529_113154.jpg)]

CSS术语

CSS注释

书写格式：

/*注释内容*/

CSS规则

CSS代码由一个一个的规则组成

每个规则指定对哪些元素应用什么样式[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y3KE2MaH-1591239301551)(F:\前端学习\学习笔记\img\CSS规则.png)]

CSS选择器

• 元素/标签选择器（引用方法直接引用元素名）
• 类选择器（引用方法使用.＋类名）
• ID选择器（引用方法使用#+ID值）
• 通配符选择器，选择所有的元素（引用方法使用*）
• 后代选择器，选择某个元素的后代（引用方法使用.+类名+空格+元素名）

CSS实例

<style>
    h1{color:red;font-size:40px;}
    /*h1是元素选择器，大括号是规则，color规则指定选择器的颜色，font-size指定选择器的字体大小
</style>

class分类实例（样式的复用）

class可以给多个元素分类，同时可以应用多个样式。

CSS常用样式

字体属性：(font)

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

区块属性： (Block)

字间距 {letter-spacing: normal;} 数值

对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进 {text-indent: 数值px;}

垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

词间距word-spacing: normal; 数值

Day3

盒模型

盒子的分类

一个元素产生的盒子类型取决于它CSS的display属性

<style>
    p{
        display:inline; /*本来p是块盒，inline将其设置成行盒*/
    }
    a{
        display:block; /*本来a是行盒，block将其设置为块盒*/
    }
    h1{
        display:none; 
    }
</style>

• 行盒（共享一行）
• 块盒（独占一行）
• 不生成盒子（隐藏内容）

盒子的组成

1. 浏览器默认会给body一个margin值

2. 添加padding后，盒子会被撑大，如果要保持之前的大小，就要减去对应的宽高值

3. 背景颜色会延伸至padding区域

4. margin的重叠（塌陷）现象：在垂直方向，margin不会相加，取较大值

5. margin、padding、border 4个边是可以单独进行设置的

   left👈 top👆 right👉 bottom👇

6. 在单独设置某一边margin、padding、border的时候，用小属性去层叠大属性

7. 大属性实际上对应4个值，之前写的1个值实际上是缩写，对应的4个值是上右下左（顺时针）

   <style>
       div{
           magrgin:0,auto; /*盒子居中*/
       }
   </style>
   

弹性盒模型

弹性盒子第一步

将他们的父元素的display属性设置为flex

<style>
    div{display:flex;}
</style>

弹性盒能设置哪些属性

父元素能够设置的属性

属性名	描述
flex-direction	设置内部项目的排列方向
flex-wrap	设置一行放不下的话是否换行
flex-flow	上面两种属性的简写，推荐使用
justify	项目在主轴（X轴）上的对齐方式
align-items	项目在交叉轴（Y轴）上的对齐方式
align-content	有多根轴线时的对齐方式。如果项目只有一根轴线，那么该属性不起作用

子项目能够设置的属性

属性名	描述
order	项目的排列顺序，数字越小越靠前
flex-grow	项目放大的比例
flex-shrink	项目缩小的比例
flex-basis	项目占据的主轴空间
flex	flex-grow，flex-shrink和flex-basis的简写，推荐使用
align-self	设置个别项目在交叉轴（Y轴）上的对齐方式

容器属性

flex-direction属性

flex-direction属性用于设置内部项目的排列方向

属性值	描述
row	主轴为水平方向，起点为左端
row-reverse	主轴为水平方向，起点为右端
column	主轴为垂直方向，起点为上面
column-reverse	主轴为垂直方向，起点为下面

flex-wrap属性

属性值	描述
nowrap	不换行
wrap	换行，第一行在上面
wrap-reverse	换行，第一行在下面

flex-flow属性

flex-flow属性是flex-direction以及flex-wrap属性的简写形式，默认值为row nowrap

justify-content属性

属性值	描述
flex-start（默认值）	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	均匀排列每个元素，每个元素周围分配相等的空间
space-evenly	均匀排列每个元素，每个元素之间的间隔相等

align-items属性

属性值	描述
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度

align-content属性

属性值	描述
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）	轴线占满整个交叉轴

Day4

背景图片设置

<style>
    div{
        background:url("./img/timg1.png"no-repeat);
        /*url后跟图片路径，no-repeat不重复*/
        background-size: cover;
        /*cover拉伸图片*/
        background-position: x y;
        /*可以设置数值或者单词*/
    }
</style>

CSS Sprite

• 雪碧图
• 精灵图
• 图片整合技术
• 拼图技术

Span

<p>
    1231232<span>单独适用样式</span>123123
</p>

Span之间的文字可以使用单独的CSS样式

链接外部CSS

<link rel="stylesheet" href="CSS地址">