web前端开发（0基础）自用笔记

P2-第一个前端程序

注：使用英文字符

答案为：

BC

P3前端工作选择与安装

推荐使用谷歌浏览器

右键检查-调试工具

开发者工具及其浏览器选择

答案：B

P4开发者工具快捷键

推荐名称都写英文

一秒完成生成浏览器文件.html：！＋回车

VSCode常用快捷键列表：

P5 HTML5简介与基础骨架

HTML5介绍：超文本标记语言，，，

HTML5的DOCTYPE声明：位于文档最前面，避免浏览器的怪异模式

HTML5基本骨架：

html,head,body,title,meta标签

P6标题标签

标题介绍与应用：h1-h6，从小到大

快捷键：h$*6

快速打开浏览器的VSCode插件：

正确使用标题：

确保标题标签只用于标题

h1最重要h2其次，以此类推

标题标签位置摆放：

align="left/center/right"

P7标签之段落.换行.水平线

段落标签<p></p>

换行标签<br/>

水平线标签<hr/>

P8标签之图片

图片标签：<img/>

属性：src（路径），alt（图像替代文本），width（图像宽度），height（图像高度），title（鼠标悬停显示的字）

P9图片路径

绝对路径：电脑盘符存储与访问具体地址

相对路径：子/，父../，同级./(可以省略）关系

网络路径：具体网络地址

P10标签之超文本链接

超链接使用标签<a>来设置超文本链接

超链接属性herf：来描述链接地址

超链接表现：鼠标放上去变成小手

P11标签之文本

常用文本标签：em（着重文字），i（倾斜），b（加粗），strong（加重语气，比em更重），span（无特殊含义），del（删除字）

可嵌套使用：

P12列表标签之有序列表

有序列表始于ol标签，每个列表项始于li标签

ol标签的type属性：

1,a，A，i，I

有序列表嵌套（列表可以嵌套）：

P13列表标签之无序列表

无序列表使用粗体原点进行标记

无序列表始于ul标签，每个列表项始于li标签

ul标签的type属性：

disc(默认，实心圆），circle（空心圆），square（小方块），none（无）

无序列表嵌套：

快速生成ul+li布局：ul>li*3(数字按自己需要的li调整）ol也可以这样子用：eg.ol>li*3

P14标签之表格

表格标签:表格<table>，行<tr>,列<td>

快速生成表格结构：table>tr*2>td{内容}

eg.table>tr*2>td{是这样子的}

P15表格单元格合并

水平合并：colspan

eg.合并6和7单元格，在6中写colspan，删掉第7

垂直合并：rowspan

eg.合并8和12单元格，在8中写rowspan，删掉第12

水平合并：保留左删除右

垂直合并：保留上删除下

要合并5，6，9，10怎么办：在5写colspan="2",rowspan="2",删除6,9,10

P16Form表单

表单在web网页中用来给用户填写信息，使网页具有交互功能。

表单由容器和控件组成，输入框、按钮叫做控件,表单就是容器，表单能够容纳各种各样的控件。

表单属性：

action：服务器地址

name：表单名称

method：数据提交方式（get（可以看见url，用来提交少量数据），post（不能看见url，大量数据））

表单元素：表单标签，表单域，表单按钮

P17Form表单元素

文本框：当用户要在表单中输入内容时，就会用到文本域，文本域通过<input type="text">标签来设定

密码框：通过<input type="password">标签来设定

提交按钮：<input type="submit" value="登录">

P18块、行内元素（内联元素）

块级元素：独占一行，可以换行，可以设置width，height属性，可包含行内元素和其他块级元素

常见块级元素：div、form、h1-h6、hr、p、table、ul

行内块级元素（不换行，能识别宽高）：button、img、input

内联元素：只占自身大小，左右/横向排列，不可设置width，height属性，包含行内元素不包含块级元素

常见内联元素：a、em、i、b、strong、span

P19HTML5新增标签

为了让文档结构更加清晰，且利于SEO，HTML5新增了很多标签：

div容器元素

H5新标签：

    <header></header>头部

    <nav></nav>导航

    <article></article>独立完整的相关内容块，例如一篇完整的论坛帖子

    <section></section>定义文档中的节，比如章节、页眉、页脚

    <aside></aside>侧边栏

    <footer></footer>脚部

P20css简介

使用css为的让界面美观

语法：

由两部分构成：选择器以及一条或多条声明（样式）

每条声明由：一个属性和一个值组成

属性是你希望设置的样式属性，属性和值被冒号隔开，每条属性之间用分号隔开。

P21css的引入方式

内联样式（行内样式）：

需要再相关标签内使用样式（style）属性。（不利于维护，维护成本高）

内部样式:可以使用<style>标签在文档头部定义内部样式表（在多个页面之间容易混乱）

外部样式（推荐）：通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表，link标签在文档头部

P22选择器一

css语法主要部分-选择器（以及一条或者多条声明）

全局选择器：可以与任何元素匹配，一般做样式初始化

元素选择器：

    HTML文档中元素，比如p、span等等。

    标签选择器，选的是页面上所有这个类型的标签

类选择器：

规定用原点.来定义，针对你想要的所有标签使用

类选择器可以被多种标签使用；同一个标签可以使用多个类选择器，用空格隔开。

注：类名不能以数字开头

P23选择器二

ID选择器：只能使用一次，针对某一个特定的标签来使用。css中的id选择器用#定义

注：ID不能以数字开头；ID是唯一的

合并选择器：提取共同样式，减少代码重复

方法一:

方法二：

选择器的优先级：

css中优先级从高到低：

行内样式（内联）1000>ID选择器100>类选择器10>元素选择器1

P24字体属性

设置文本颜色color：四种形式

设置文本大小font-size

设置文本粗细：font-weight（bold粗体，bolder更粗，lighter更细，100-900从细到粗）

设置文本字体样式：font-style:（normal，italic（斜体））

指定一个元素的字体（宋体什么的）：font-family（"微软雅黑"/ "microsoft YaHei";）

P24背景属性

background-color属性：设置背景颜色

background-image属性：设置背景图eg.background-image: url("./img/西西弗搜.webp"); 

background-repeat属性：设置背景平铺

background-size属性：设置背景图像的大小（最常见使用background-size: cover;）

background-position属性：设置背景图像的起始位置

P25文本属性

text-align：指定元素文本的水平对齐方式（left,right,center)

text-decoration: 属性规定添加到文本的修饰，如下划线，删除线，上划线等

 text-transform：属性控制文本的大小写

text-indent：属性规定文本块中的首行缩进

P26表格属性

表格边框：border属性

折叠边框：属性设置表格的边框折叠成单一边框

表格宽度和高度：width，height

表格文字对齐：

     水平text-align垂直 vertical-align

表格填充：表内容中控制空格之间边框

padding

表格颜色：边框颜色，文本和背景颜色

P27关系选择器

后代选择器：选择所有被E包含的F的元素，中间用空格隔开

子代选择器：选择所有作为E元素的直接子元素，用>表示

相邻兄弟选择器：选择紧跟E元素后的F元素，用+表示，选择相邻的第一个兄弟元素

通用兄弟选择器：选择E元素之后的所有兄弟元素

P28盒子模型

css盒模型本质上是一个盒子，它包括外边距（margin，是透明的），边框（border），内边距（padding），实际内容（content）

P29弹性盒子

弹性盒子由弹性容器和弹性子元素组成

弹性容器通过设置display属性为flex将其定义为弹性容器。

弹性盒子里的内容默认横向摆放

父元素上的属性：

    display-flex：开启弹性盒子，默认水平排列

    fiex-direction：记得column是垂直摆放

    justify-content：垂直方向上（上中下摆放），justify-content: flex-start，center，flex-end;

    align-items：水平方向上（左中右摆放），align-items: flex-start，center，flex-end;

子元素上的属性：

flex/flex-grow：弹性盒子子元素所占权重，eg.flex:2

P30文档流

文档流是文档中可显示对象在排列时所占用的位置/空间

块元素上下摆放，内联元素从左到右摆放。标准流限制很多，导致页面效果无法实现

默认元素摆放产生的问题：

  高矮不齐，底边对齐。

  空格折叠，无论多少空格页面也只有一个空格

  元素无间隙，这么写不对，应该换行

办法是脱离文档流：浮动，绝对定位，固定定位

P31浮动

浮动float原理：浮动后元素脱离文档流，只有左右浮动，没有上下浮动

脱离文档流元素相当于在页面上增加一个浮层来放置内容，可以理解为有两层页面

让图片没有空隙（想让元素摆放产生问题消失）-----脱离文档流（浮动）

元素可向左浮动，向右浮动（left，right）

浮动导航水平摆放用float

P32清除浮动

浮动元素会造成父元素塌陷且后续元素会受影响，所以我们要清除浮动（不要乱用浮动）。

清除浮动解决方案：

 父元素设置高度

 受影响元素加clear属性

 overflow清除浮动(最常用）：父级元素下面加overflow: hidden;clear: both;

注意：这种情况下父布局不能设置高度

哪里有问题，就在哪个子元素下加clear: both;

伪对象方式：

P33定位

position决定了元素定位类型（相对，绝对定位，固定）

设置定位后可以使用四个方向值进行调整（left，right，top，bottom）

相对定位在标准流中，绝对定位脱离了文档流（且每设置一个绝对定位都是一层）

绝对定位会随着页面滚动而滚动，固定定位不会。

小盒子的移动相当于父级容器的移动（前提：父级容器有定位position: relative;），父级容器无定位就相当于文档进行移动

z-index:z-index的值决定了谁覆盖谁，谁的值越大谁就在上面

P34css3新特性

圆角：border-radius属性，有四个规则（四个值，三个值，两个值，一个值），圆边的大小可以调整 

阴影：box-shadow添加一个或多个阴影

阴影分为水平阴影位置，垂直阴影位置，模糊距离，阴影颜色

P35动画

动画是元素从一种样式变成另一种样式的效果

用百分比来规定发生的时间或用关键词from to

@keyframes创建动画

animation执行动画

①

②

切换背景颜色和动画呼吸效果

P36媒体查询

媒体查询定义：

meta标签目的：

媒体查询语法：手机，平板，电脑

P37雪碧图

CSS Sprite介绍：

雪碧图优点：

雪碧图原理：

实操：

P38字体图标

字体图标方式代替图标，解决失真问题也解决图片占用资源问题

字体图标库iconfont-阿里巴巴矢量图标库

字体图标优点：

使用字体图标：

P39JavaScript简介

JavaScript介绍：

JavaScript与ECMAScript的关系:

P40JavaScript语句，标识符、

js语句：

标识符：

JavaScript保留关键字：

P41变量

变量的重新赋值：

打印： console.log(num);控制台中方便观察这个数据

变量的提升：

P42js引入到文件

嵌入到HTML文件中：

引入本地独立js文件：

引入网络来源文件：

按network，显示有js文件说明引入成功

P43JavaScript注释与常见输出方式

js注释：单行，多行，嵌入在html文件中

js输出方式：控制台，弹出框，页面输出

P44数据类型

数据类型分类：共六类，分别：（ES6又新增两种，后续讲）

数据类型分类：

   原始/基础类型：数值，布尔值，字符串

   合成类型：对象

P45typeof运算符

用来判断数据类型：布尔值，数值，字符串，对象

P46算数运算符

加减乘除取余运算符

自增自减运算符：分两种情况，前自增++num和后自增num++

     

        ①一元运算符的意思是只需要一个操作数的运算符，比如说自增和自减运算符，还有正负号运算符，正号运算符是+，负号运算符是-，正号运算符表示正数，负号运算符表示负数；

        ②一元运算符只需要一个运算子，二元运算符需要两个运算子， 比如说加法运算符+，减法运算符-，乘法运算符*，除法运算符/，取余数运算符%；

        ③运算子是指参与运算的数，比如说在加法运算中，两个数就是运算子；

        ④运算符是指进行运算的符号，比如说在加法运算中，+就是运算符；

P47赋值运算符

P48比较运算符

P49布尔运算符

取反！，且&&，或||运算符：

P50条件语句之if语句

   P51条件语句之if...else

if else 基本结构：

多个if...else连接：if，else if，else if........

if...else嵌套：

P52条件语句switch

需要注意的点（关于break）:

P53三元运算符

三元运算符基本形式：

三元运算符可以作为ifelse简写模式：

P54for循环语句

for循环的省略（使用极少）：

P55for循环语句实操

循环输出1-100之间数字的和：

循环输出1000以内的奇数：

打印99乘法表：

P56while循环语句

while语句基本形式：

while例子（所有for循环都可以用while替换）：

P57continue和break语句

break语句hecontinue语句差别：

P58字符串

字符串定义：

字符串的嵌套：

相同字符串使用要注意的点：

 字符串的换行：

返回字符串长度length属性：

P59字符串方法charAt

P60字符串方法concat

多个参数：

参数不是字符串的情况：

使用+连接字符串：

P61字符串方法substring 

P62字符串方法substr

P63字符串方法indexOf

P64字符串方法trim

P65字符串方法split

P66数组

P67数组的遍历

P68数组静态方法Array.isArray

p69数组方法push，pop

P70数组方法shift，unshift

P71数组方法join

P72数组方法concat

P73数组方法reverse

P74数组方法indexOf

P75函数

P76对象概述

P77Math对象

P78Date对象

P79DOM概述

P80document对象---方法/获取元素

P81document对象--方法/创建元素

P82Element对象——属性