使用工具：

Chrome
VScode以及相关插件

一.初识HTML

（一）VScode相关快捷键

因为使用了Open in Browser插件，可以通过Alt+B直接预览网页。 HTML网页框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
//编码、标题相关信息
</head>
<body>
    //网页内容部分
</body>
</html>

（二）简介

HTML=“超文本标记语言”，是一套标记标签，成对出现，由尖括号包围。 <!DOCTYPE html> 声明，防止不同浏览器出现不同效果。 <head></head> 不是给用户看的。 <body></body>内部是给用户看的。 <title></title>是标题。 <meta>是单标签，编码格式声明。

body部分

标题

<h1></h1>一级标题，最高到h6。快捷输入可以输入h<span data-formula="*1。要根据逻辑使用标题标签。标签中可以添加属性，比如<h1 align = "left">表示位置，默认为左边，还有center、right。

段落

<p></p>内容放入段落中，一般并不将文本直接放到html中，放到段落中更容易管理。在段落中使用<br> or <br />进行换行。水平线标签<hr />，可以在当前位置显示一条水平线，它有着color颜色、width长度、size宽度、align对齐方式四个属性。

图片

<img src="" alt=""> src内填写图片路径，alt属性内填写图片代表的文本，当图片没有时，会显示该文本。width宽度属性，height高度属性，title属性鼠标悬停提示。 " aria-hidden="true">*1。要根据逻辑使用标题标签。标签中可以添加属性，比如<h1 align = "left">表示位置，默认为左边，还有center、right。

段落

图片

<img src="" alt=""> src内填写图片路径，alt属性内填写图片代表的文本，当图片没有时，会显示该文本。width宽度属性，height高度属性，title属性鼠标悬停提示。

<img src="12.jpg" alt="测试图片" width="600px" title="动漫女">

src路径：

绝对路径：图片所在的盘符的绝对路径
相对路径：与网页同一路径，直接写名字
- ./同级（其实就是取同层文件夹，也可以省略./）
- ../父级关系，原理同上
- /子级关系

超文本链接

<a href = ""> 内容 <a> ，内容可以为图片。没有点过的为蓝色，点过的为紫色，点击时为红色。

文本

em斜体，i单纯斜体，b加粗，strong加粗，del划线删除字。可以嵌套进p使用。

列表

有序列表
1. ol标签，每项用li标签，默认数字排序
2. ol有type属性，1数字排序，a小写字母排序，A大写字母排序，i小写罗马数字排序，I大写罗马字母排序
3. 有序列表可以嵌套
无序列表
1. 用粗圆点标记，用ul作为标签
2. type属性关键字，disc实心圆，circle空心圆，square小方块，none空的
3. 也可以嵌套

无序列表可以用来当做导航，后期可以通过CSS修改横向。快速生成ul表项目数量，ul>li*5，快速生成5个元素的无序表。

表格

由行列单元格组成。

<table>
    <tr>//行标签
        <td>列标签</td>
        <td>列标签</td>
    </tr>
</table>

快速写法，table>tr*4>td*2{ddd}，生成4行两列的表格。内容为ddd。 border = ""边框属性，内容为宽度。 width = "" 宽度属性，height = ""高度属性。这些属性用处不大，CSS都会替换掉。

合并单元格最为td的属性，同时要删除合并的另一个：

水平合并：colspan = ""（保留左边，删除右边）
垂直合并：rowspan = ""（保留上边，删除下边）

form表单

让网页具有交互性，所有输入的地方都由表单实现。应该包含输入框和按钮之类的控件。

<form action ="url" method="get|post" name="myform"></form>

action是服务器的地址，name为表单名称。
get把提交的数据url可以看到，post看不到 get用于少量数据，post用于大量数据

表单元素：

文本框
用户名密码

块元素、内联元素

块级元素	内联元素
块元素会在页面中独占一行（自上而下垂直排列	行内元素不会独占页面一行，只占自身大小
可以设置width、height属性	行内元素设置width、height无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包括块级元素

常见块级元素
- div、form、h1~h6、hr、p、table、ul
常见内联元素（行内元素）
- a、b、em、i、span、strong
行内块级元素（也是横向拜访，但是能识别宽高）
- button、img、input

可见经过测试，块级元素占一行上下排列，行内元素只占了自身大小。

HTML5新增标签

div容器元素。比如将导航栏作为一个div，商品大图列表作为一个div，这样方便管理。通过id属性命名区分不同的div。

可以看到，HTML5中取消了原本div的分类方法，直接使用标签来区分不同的部分。

##二.CSS初识 CSS层叠样式表，唯一目的就是让网页变美的，简称样式表。

CSS基本语法：

选择器
一条或多条的样式

<style>
h1{
     color: red;
}
</style>

CSS加载方式

内联方式
1. 在标签里以属性方式添加样式（不利于维护）
内部样式
1. 在header里添加style块，统一添加样式（单个页面方便维护，多个不方便）
外部样式
1. header里用link标签引入css样式（推荐）

选择器

全局选择器：与任何元素匹配，优先级最低，一般作样式初始化。选择器为*，一般用来初始化用。

元素选择器：根据元素名称进行选择，比如h1、p等。会导致所有同样的标签都变化。所有标签都可以选择。

类选择器：用“.”+"类名"来定义，使用率最高的，就是标签选择应用的类，而不是样式应用到对应的标签。使用方法如上图。可以继承多个类。

ID选择器：以#号作为标记，只能用一次。ID是唯一的，不能用数字开头。

合并选择器：

p,h3{
...
}

共享相同样式。

选择器的优先级问题

字体属性

color 直接输入颜色或者使用16进制或者rgb(255,255,255)。rgba(255,2,2,透明度)

font-size 最小为12px

font-weight加粗：bold->bolder->lighter更细->100~900(400为默认，700为bold)

font-style斜体italic/正常normal

font-family字体

背景属性

background-color背景颜色

background-image:url=""背景图片

background-repeat平铺方式

值	说明
repeat	默认
repeat-x	只水平平铺
repeat-y	只上下平铺
none-repeat	不平铺

background-size：宽，高设置图像大小，可以是像素值，百分比，cover保证图片不压缩但是充满整个容器（会切割），contain展示整个图片不切割

background-position设置图片起始位置，默认为0 0

文本属性

缩进之类。对齐方式：text-align值left、center、right

文本修饰：text-decoration值underline下划线、overline上划线、line-through删除线

大小写控制：text-transform值captialize每个单词首字母强制大写，uppercase全部大写，lowercase全部小写

首行缩进：text-indent值像素，可以为负就是向左缩进 ##表格属性边框：border：边框大小实线样式：颜色

折叠边框：上述边框会双边框，border-collapse

宽度高度：width height

文字对齐：text-align像是文本属性一样，垂直对齐vertical-align

表格填充：padding文本与边框之间的空白距离

颜色：表格背景、单元格字体都可以设置颜色

关系选择器

后代
1. 选择所有被E包含的F元素，中间用空格隔开
```
ul li{
    color:red;
    }
```
只要是后代，不论在哪里的块都生效。
子代
1. 只针对子代，孙子辈不使用，用>隔开
相邻兄弟
1. 选择紧跟E之后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
通用兄弟 1.选用E元素之后的所有兄弟兄弟元素F，哪怕隔一个块也会生效，只能向下选择

##CSS盒子模型BOX-MODEL 包含margin外边距，border边框，padding内边距，实际内容content 案例网页 padding还可以分成四个方向分开写padding-left之类， margin也是如此。

弹性盒子模型CSS3的新特性

通过display的属性值flex将其设置为弹性盒子模型，针对大容器中的小盒子的摆放问题。比如手机端里页面宽度不够怎么办。弹性盒子案例默认弹性盒子里是水平排列。

父元素属性（外层大盒子）

flex-direction的属性值：

justify-content属性（垂直上中下）：

align-items属性（水平左中右）： ###子元素属性（内部小盒子） flex-grow/flex: 根据权重分配空间，宽度高度属性无效了，根据比例分配空间。

文档流

__文档流__指的是文中可显示对象在排列时所占用的位置/空间。例如：
块元素自上而下摆放，内联元素从左到右摆放————标准流。问题：

高矮不齐，底边对齐
空白折叠现象
- 无论多少空格、换行、tab，都会折叠成一个空格
- 如果想让img标签之间没有空隙，必须紧密连接

解决方法：

脱离标准流
- 浮动
- 绝对定位
- 固定定位

浮动

float浮层，根据值left向左或者right向右浮动。没有上下浮动。增加float后，相当于加了一个图层。案例可以看到案例中，容器内的第一个box影响了第二个，导致了一些问题。所以非必要不使用浮动，如果宽度不够时，会自动换行摆放。

清除浮动

浮动会产生一些问题：

浮动元素会导致父元素高度塌陷（可能会突然消失）
后续元素会受影响

清除浮动的方法：

给父元素设置高度
给受影响的元素设置clear属性（clear:both）
在父级标签里添加overflow：hidden以及clear：both属性（最广泛的方法）

伪对象方法：

.container{
 }
 .container::after{
     content:"";
     diplay:block;
     clear:both;
 }

定位

用position定位：relative相对定位，absolute绝对定位，fixed固定定位。绝对定位和固定定位会脱离标准流。

定位使用案例。固定定位与绝对定位的区别：固定定位会跟页面滚动！

设置定位之后，相对定位绝对定位是相对于具有定位的父级元素的位置进行位置调整，如果不存在父类元素，则继续向上查找，直到顶层文档。如果父级没有定位属性，就查找上层

z-index设置元素堆叠顺序，高堆叠值会在低堆叠值之前显示。

##CSS3新特性

border-radius属性：赋予各种元素圆角效果。可以单独对四个角进行设置曲度。

案例

2.box-shadow属性：向框添加阴影效果，有四个属性如下： PS:auto属性意思为左右空间平均分配。opacity属性为透明度。

动画：以前用JS实现动画，现在CSS更高效。使元素从一个效果变为另一个效果。使用@keyframes创建动画，用from和to或者百分比0% 100%之类创建动画。执行：可以给类添加hover属性控制动画的暂停。
```
.boxAnime:hover{
         animation-play-state: paused;
     }
```

媒体查询

媒体查询是用来针对不同屏幕显示比例（终端）来选择不同CSS的功能。方法：设置meta标签，用途是使用设备的宽度作为视图宽度禁止初始的缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用@media screen搭配宽度来选择不同的显示效果：

雪碧图

CSS Sprite也叫CSS精灵图，允许将一个页面涉及到的所有图片包含到大图中去。好处是减少了图片的字节，减少了http请求提高了性能。

原理通过background-image引入背景图片，然后通过background-position移动图片到指定位置。display:block意味着将一个行内元素变为块状元素。案例在这。

字体图标

字体图标是用来代替图标的，防止图片过多造成效率低。优点：

轻量：加载快、减少http请求
灵活：利用CSS设置大小颜色
兼容：支持所有浏览器图标引入后特别小，加入font-size属性，发现未生效，观察浏览器代码：发现font-size属性被原本icon里的font-size覆盖了。**解决方法：给span新加一个类覆盖原本的icon的font-size。 #JAVASCRIPT 轻量级脚本语言，不具备开发系统的能力，只能用来控制其他大型应用的脚本。能力：

操控浏览器
广泛的使用领域
易学性

Javascript与ECMAScript的关系：前者是后者的规格，后者是前者的实现。（一样的）

语句与标识符

JS程序的单位是行。 var代表变量，字符整数等不分开。使用方法：在body里用script标签。打印方法：console.log(变量) 其中独立文件为.js后缀。案例

JS的输出方式

alert("内容")：弹出对话框 document.write("内容")：输出到页面 console.log():控制台输出

6种数据类型（ES）

原始数据类型：数值，字符串，布尔值

合成数据类型：对象

var user={
  name:"ni",
  age:20,
  learn:true
  }

undefined和none：都代表空的

typeof判断数据类型

var num=10;
console.log(typeof num);

运算

+-*/略。赋值运算符略。比较运算符：

比常规语言多出严格相等运算符=和严格不相等运算符!=
区别：==不在乎数据类型，比如整型10和字符串"10"是相等的，===时是不相等的。

其他

条件判断、循环跟java一致。

字符串

不能双引号里嵌套双引号，不能单引号里嵌套双引号。 charAt()跟java一致，concat()。

方法

substring(x,y):截取字符串里的内容，x起始位置，y为终止位置。会改变原始字符串。 substr(x,y):与上一条一样，不同的是y指的是长度，且不改变原始字符串。 indexOf('x'):确定x字符串在原始字符串中第一次出现的位置。也可以加个参数代表从该位置向后匹配。 trim():用于去除字符串两边的空格，换行符制表符回车符都会被去除，不改变原本字符串。ES6:新增trimEnd()和trimStart()，表示只去掉末尾或者开头的空格。 split('x'):根据x分割字符串，返回分开的字符串数组。

数组

JS中的数组可以存放任何数据，不是同一类型也可以。数组里也能放数组。 length属性：长度。

静态方法： Arrays.isArray()判定数据类型是否为数组，typeof是做不到的。

数组方法： push():在数组末端添加一个元素，并返回新数组长度。可以添加多个元素。 pop():从末端删除一个元素。 shift():在数组开头添加。 unshift()：在数组开头删除。

join('x'):根据给出的x作为分隔符链接数组成为一个字符串，如果不提供默认逗号分割。如果数组成员为空，数组会被转成空字符串。

concat(内容)：多个数组合并，将x添加到原数组后部。其他类型元素也可以被添加。像是朋友圈一样。

reverse():颠倒排列数组，改变原数组。

indexOf('x'):查找x在数组中第一次出现的位置。第二个参数表示开始查找的位置。

函数

声明：function关键字：

function test(s){
console.log(s);
}

函数可以被上拉，可以先被调用后创建。

对象

是一种无序的复合数据集合。

var user={
name:"nihao",
age:13
get:function(){
console.log(1);
}
}

可以看到很像java里的类，写法不一样而已。

Math对象

原生对象，提供一系列运算。 Math.abs()绝对值。

Math.max()/Math.min()取最大，最小

Math.floor(1.1)向下取整=1 Math.ceil(1.1)向上取整=2

Math.random()返回大于等于0小于1的随机数。

Date对象

.now()距离当天0点之间的毫秒

DOM概述

是JS与网页之间的接口，全称为“文档对象类型”，将网页转换为JS对象。节点：DOM的最小组成单位，文档是树形结构由各种不同的类型的节点组成。节点一共有7种类型：

Document：文档的顶层节点
DocumentType：doctype标签
Element：网页的各种html标签
Attribute：网页的元素属性（比如class = "box"）
Text：标签之间的文本或者标签包含的文本
Comment：注释
DocumentFragment：文档的片段

本文章使用limfx的vscode插件快速发布

前端学习