Html

排版标签

标题标签

h

  • ＜h1＞1级标题＜/h1＞
  • ＜h2＞1级标题＜/h2＞
  • ＜h3＞1级标题＜/h3＞
  • ＜h4＞1级标题＜/h4＞
  • ＜h5＞1级标题＜/h5＞
  • ＜h6＞1级标题＜/h6＞
  • 特点：文字都加粗，且逐级减小，独占一行

段落标签

p

  • ＜p＞段落1＜/p＞
  • ＜p＞段落2＜/p＞
  • 特点：段落之间存在间隙，独占一行

换行标签

br

  • 特点：单标签，让文字强制换行

水平分割线标签

hr

文本格式化标签

  • 加粗

b或strong

  • 倾斜

i或em

  • 下划线

u或ins

  • 删除线

s或del

媒体标签

特点：单标签

图片标签

img

  • ＜＞
  • ＜img src=”图片路径” alt=” 替换文本” title=”提示文本“ width=”宽度” height=”高度”＞
    • 替换文本：当图片不显示的时候显示的文字
    • 提示文本：当鼠标悬停时显示的文本，title属性不仅仅可以用于图片标签，还可以用于其他标签
    • 宽度和高度只给一个值时，另一个值会等比例缩放
  • 注意：属性之间以空格隔开，标签上可以同时存在多个属性，属性之间没有顺序之分

音频标签

audio

  • ＜audio src=”音频路径” controls autoplay loop＞
    • controls：显示播放的控件
    • autoplay：自动播放（部分浏览器不支持）不建议使用
    • loop：循环播放，不建议使用
  • 注意：音频标签目前支持三个格式：mp3，wav，ogg

视频标签

video

  • ＜video src=”视频路径” controls autoplay loop＞
    • controls：显示播放的控件
    • autoplay：自动播放（部分浏览器不支持）不建议使用
    • loop：循环播放，不建议使用
  • 注意：视频标签目前支持三个格式：mp4，webm，ogg

链接标签

a

  • ＜a hred=”跳转地址” target=” _ blank “或 “_self”＞文本＜/a＞
    • _blank:跳转时保留原页面
    • _self:跳转时覆盖原页面
  • 特点：双标签，可以从一个页面跳转到另一个页面

列表标签

无序列表

ul和li

  • 使用：
1
2
3
4
5
<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>
  • 特点：列表的每一项前默认显示圆点标识
  • 注意：ul标签只能包含li标签，li标签可以包含任意内容

有序列表

ol和li

  • 使用：
1
2
3
4
5
<ol>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>
  • 特点：列表的每一项前默认显示序号标识
  • 注意：ol标签只能包含li标签，li标签可以包含任意内容

自定义列表

dl 和dt,dd

  • 使用：
    • dl：用于包裹dt和dd标签
    • dt：表示自定义列表的主题
    • dd：表示自定义列表的对应主题的每一项内容
1
2
3
4
5
6
<dl>
    <dt>主题1</dt>
    <dd>主题1的内容1</dd>
    <dd>主题1的内容2</dd>
    <dd>主题1的内容3</dd>
</dl>
  • 特点：dd前会默认显示缩进效果
  • 注意：dl标签只能包含dt和dd标签

表格标签

table、caption、tr、th和td

  • 使用：
    • table：表格整体，用于包裹tr
    • caption：表格标题，写在table标签里
    • tr：表格每行，用于包裹th和td
    • th：表格单元格，包裹每一列的小标题
    • td：表格单元格，包裹内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table border="边框宽度" width="表格宽度" height="表格高度">
    <caption>表格名称</caption>
    <thead>
        <tr>
        	<th>列标题1</th>
        	<th>列标题2</th>
        	<th>列标题3</th>
   		</tr>
    </thead>
    <tbody>
        <tr>
        	<td>内容1</td>
        	<td>内容2</td>
        	<td>内容3</td>
   		</tr>
        <tr>
        	<td>内容1</td>
       		<td>内容2</td>
        	<td>内容3</td>
    	</tr>
    </tbody>
    <tfoot>
        <tr>
        	<td>内容1</td>
       		<td>内容2</td>
        	<td>内容3</td>
    	</tr>
    </tfoot>
</table>
  • 注意点：样式效果推荐使用css设置
  • 可使用结构标签thead，tbody，tfoot让代码结构更明了
  • 合并行用rowspan，合并列用colspan

表单标签

input标签

input

  • 单标签

  • ＜input type=”属性值”＞

  • type属性值：

    • text：文本框
    1
    账号：<input type="text" placeholder="请输入手机号/邮箱"> //placeholder="后面跟提示文本"
    • password：密码框
    • radio：单选框
    1
    性别：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女 //name="单选框的组别名" checked(默认选中gai)
    • checkbox：多选框
    • file：上传文件
    1
    上传文件：<input type="file" multiple>//mutiple（多文件选择）
    • submit：提交按钮
    • reset：重置按钮

  • 注意：要想reset按钮生效，需要将想要重置的内容让＜form action=” “＞ …＜/form＞包裹住

    • button：普通按钮，默认无功能，之后配合js添加功能
    1
    <input type="button" value="登入"> value="按钮名"

button标签

button

  • 双标签

  • ＜button type=“属性值”＞按钮名＜button＞

  • type属性值：

    • submit：提交按钮
    • reset：重置按钮
    • button：普通按钮，默认无功能，之后配合js添加功能

select标签

select

  • 功能：下拉菜单

  • 使用：

    • selelct标签：下拉菜单整体
    • option标签：下拉菜单每一项
1
2
3
4
5
6
<select> 
        <option></option>
        <option>广东</option>
        <option selected>北京</option>//selected：默认选中
        <option>上海</option>
</select>

textarea标签

textarea

  • 功能：多行输入的文本域
  • ＜textarea cols=“可见列数” rows=”可见行数“＞＜/textarea＞
  • 注意：可拖拽大小，对于样式效果推荐使用css设置

lable标签

label

  • 功能：常用于绑定内容与表单内容的关系
  • ＜label＞内容与表单内容内容与表单内容 ＜/label＞

语义化标签

无语言化

div

  • ＜div＞…＜/div＞
  • 独占一行

span

  • ＜span＞…＜/span＞
  • 不会换行

有语义化

  • 独占一行
1
2
3
4
5
6
<head>网页头部</head>
<nav>网页导航</nav>
<article>文章</article>
<aside>侧边栏</aside>
<section>网页区块</section>
<footer>网页底部</footer>

其他

＆nbsp；：表示空格

Css

Css概述

  • css的引入方式
    • 内嵌式：css写在style标签中，style标签写在head标签内，title标签下。作用范围(当前页面)，使用场景(小案例中)
    • 外联式：css单独写在css文件中，在html文件中通过link标签引入l，ink标签写在head标签内，title标签下。作用范围(多个页面)，使用场景(项目中)
    • 行内饰：css写在标签的sytle属性中。作用范围(当前标签)，使用场景(配合js使用)

Css书写顺序

  1. 浮动 / display
  2. 盒子模型
  3. 文字样式

选择器

选择器的作用：查找标签

标签选择器

  • 结构：标签名{css属性名：属性值:}
  • 作用：通过标签名，找到页面中所有这类标签，设置样式

类选择器

  • 结构：.类名{css属性名：属性值:}
  • 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
  • 注意：
    • 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
    • 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
    • 一个标签可以同时有多个类名，类名之间以空格隔开

id选择器

  • 结构：#id属性值{css属性名：属性值:}
  • 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
  • 注意：
    • 所有标签上都有id属性
    • id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
    • 一个标签上只能有一个id属性值
    • 一个id选择器只能选中一个标签

通配符选择器

  • 结构：*{css属性名：属性值:}
  • 作用：找到页面中所有的标签，设置样式
  • 注意：
    • 开发中使用极少，只会在极特殊情况下才会用到
    • 可能会用于去除标签默认的margin和padding

后代选择器

  • 作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
  • 结构：选择器1 选择器2 {css}
  • 注意：
    • 后代包括:儿子、孙子、重孙子…….
    • 后代选择器中，选择器与选择器之前通过空格隔开

子代选择器

  • 作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
  • 结构：选择器1＞选择器2{css}
  • 注意：
    • 子代只包括:儿子
    • 子代选择器中，选择器与选择器之前通过**>**隔开

并集选择器

  • 作用：同时选择多组标签，设置相同的样式
  • 结构：选择器1，选择器2{css}
  • 注意：
    • 并集选择器中的每组选择器之间通过，分隔

交急选择器

  • 作用：选中页面中同时满足多个选择器的标签
  • 结构：选择器1选择器2 {css}
  • 注意：
    • 交集选择器中的选择器之间是紧挨着的，没有东西分隔
    • 交集选择器中如果有标签选择器，标签选择器必须写在最前面

hover伪类选择器

  • 作用：选中鼠标悬停在元素上的状态，设置样式
  • 结构：E：hover{css}
  • 注意：伪类选择器选中的元素的某种状态

结构伪类选择器

  • 作用：根据元素在HTML中的结构关系查找元素，减少对于HTML中类的依赖，有利于保持代码整洁常用于查找某父级选择器中的子元素
  • 选择器
    • E:first-child{}：匹配父元素中第一个子元素
    • E:last-child {}：匹配父元素中最后一个子元素
    • E:nth-child(n) {}：匹配父元素中第n个子元素
    • E: nth-last-chi1d(n){}：匹配父元素中倒数第n个子元素
    • 注意:()里面除了写n还可以写公式（如：2n、2n-1）

focus伪类选择器

  • 获得焦点
  • E：focus{css}

文字样式

字体样式

字体大小

  • 属性名：font-size
    • 取值：数字+px
    • 默认大小：16px

字体粗细:

  • 属性名：font-weight
    • 取值
      • 关键字法：normal(正常)，bold(加粗)
      • 纯数字法：100~900（正常是400，加粗是700）

字体样式(倾斜)

  • 属性名：font-style
    • 取值：normal(正常)，italic(倾斜)

字体类型

  • 属性名：font-family
    • 取值：黑体、宋体、楷体、微软雅黑(默认)….

字体复合属性

  • 属性名：font
    • 取值：font：style weight size/line-height family；
    • 注意：只能省略前两个，如果省略了相当于设置了默认值

文本样式

文本缩进

  • 属性名：text-indent
  • 取值：数字+px 或 数字+em(推荐：1em=当前标签的font-size的大小)

对齐方式

  • 属性名：text-align
  • 取值：left、center、right

文本修饰线

  • 属性名：text-decoration
  • 取值：underline(下划线)、line-through(删除线)、overline(上划线)、none(无修饰)

行高

  • 属性名：line-height
  • 取值：数字+px、倍数(当前标签font-size的倍数 )
  • 行高由上部分高度、文字高度、下部分高度组成

背景

背景颜色

  • background-color：颜色

背景图片

  • background-image：url(‘图片路径’)

背景图片大小

  • background-size：宽度 高度

  • 取值

    取值 场景
    数字+px 简单方便，常用
    百分比 相对于当前盒子自身的宽高百分比
    contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大
    cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

背景平铺

  • 属性名：background-repeat
  • 属性值：
    • repeat：默认值，水平和垂直方向都平铺
    • no-repeat：不平铺
    • repeat-x：沿着水平方向平铺
    • repeat-y：沿着垂直方向平铺

背景位置

  • 属性名：background-position
  • 属性值：background-position：水平方向位置 垂直方向位置
    • 取法一：方位名词
      • 水平：left、center、right
      • 垂直：top、center、bottom
    • 取法二：坐标法，数字+px（原点是左上角）
      • x轴：水平向右
      • y轴：垂直向下

背景复合连写

  • 属性名：background
  • 属性值：单个属性值的合写，取值之间以逗号隔开
  • 推荐书写顺序：background：color image repeat position

显示模式

块

  • 特点：
    • 独占一行
    • 宽度默认为父元素的宽度，高度默认由内容撑开
    • 可以设置宽高
  • 代表标签：div,p,h,ul,li,dl,dt,dd,form,header,nav,footer…

行内

  • 特点：
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高
  • 代表标签：a、span、b、u、i、s、strong、ins、em、del…

行内块

  • 特点：

    • 一行可以显示多个
    • 可以设置宽高

  • 代表标签：input、textarea、button、select、img

显示模式的转换

  • display：block（转换成块）
  • display：inline-block（转换成行内块）
  • display：inline（转换成行内）

嵌套规范

  • 块一般作为大容器，可以嵌套：文本，块，行内，行内块…
  • p标签不能嵌套div，p，h等块级标签
  • a标签不能嵌套a标签

css特性

继承性

  • 子元素有默认继承父元素的特点

  • 可以继承的常见属性（文字控制属性都可以继承）：color、font、text-indemt、text-align、line-height…

  • a标签的color和h标签的font-size会继承失效

层叠性

  • 给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
  • 给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效

优先级

  • 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
  • 优先级：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
  • 注意：
    • !important写在属性值的后面，分号的前面
    • !important不能提升继承的优先级，只要是继承优先级最低!
    • 实际开发中不建议使用!important
  • 权重叠加：行内样式个数，id选择器个数，类选择器个数，标签选择器个数

盒子模型

介绍

  • 页面中的每一个标签，都可看做是一个“盒子”
  • 浏览器在渲染（显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的.
    之为盒子
  • CSS 中规定每个盒子分别由∶内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域（margin)构成，这就是盒子模型

注意

  • 盒子的布局思路：从外到内：先宽高背景色—内容—内容位置

  • 盒子的实际宽度=height+盒子内边距的左右+边框左右边的粗细

  • 盒子的实际高度=wight+盒子内边距的上下+边框上下边的粗细

  • 在css3之后可以给盒子加上自动内减属性：box-sizing：border-box（这样盒子就不会被border和padding撑大了）

  • 版心居中：margin：0 auto；

  • 清楚标签内外间距默认样式：

    1
    2
    3
    4
    *{
        margin：0
        pading：0
    }

  • 行内标签的内外间距的垂直位置无法改变（解决方案：加行高 或 将行内改成块）

内容的宽高

  • 作用：利用width和 height属性默认设置是盒子内容区域的大小
  • 属性名：width / height
  • 取值：数字+px

边框

  • 属性名：border
  • 取值：边框粗细 边框类型 边框颜色
    • 边框类型：solid、dashed、dotted…
  • 快捷键：bd+tab（1px solid 黑色#000）
  • 单方向设置边框：border-方位名词（top、bottom、left、right）
  • border-collapse属性
    • collapse：边框会合并为一个单一的边框
    • separate：默认值。边框会被分开

内边距

  • 属性名：padding
  • 取值：数字+px（顺序为上右下左）

外边距

  • 属性名：margin
  • 取值：数字+px（顺序为上右下左）
  • 常见问题：

    • 合并：

      • 垂直垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值
      • 解决方案：

    • 塌陷：

      • 互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动
      • 解决方案：给父元素设置overflow：hidden、子元素换成行内块元素、设置浮动

盒子阴影

  • 属性名：box-shadow

  • 取值

    参数 效果
    h-shadow 必须，水平偏移量。允许负值
    v-shadow 必须，垂直偏移量。允许负值
    blur 可选,，模糊度
    spread 可选，阴影扩大
    color 可选，阴影颜色
    inset 可选，将阴影改为内部阴影

浮动

伪元素

  • 作用：通过css创建标签，装饰一些不重要的小图
  • 种类
    • E::before(在父元素内容的最前添加一个伪元素)
    • E::after(在父元素内容的最后添加一个伪元素)
  • 注意：必须设置content属性才能生效，伪元素默认是行内元素

标准流

  • 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则
  • 常见规则
    • 块级元素:从上往下，垂直布局，独占一行
    • 行内元素或行内块元素:从左往右，水平布局，空间不够自动折行

浮动

  • 属性名：float

  • 作用：图文环绕、网页布局

  • 特点：

    • 浮动元素会脱离标准流(简称:脱标)，在标准流中不占位置（相当于从地面飘到了空中）
    • 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
    • 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
    • 浮动后的标签具备行内块特点

清除浮动

  • 作用：清除浮动带来的影响

    • 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
    • 影响产生的原因：父子级标签，子级浮动,父级没有高度，后面的标准流盒子会受影响，显示到上面的位置

  • 清除方法：

  1. 设置父元素高度

  2. 额外标签法：在父元素内容的最后添加一个块级元素，给该块级元素设置clear：both

  3. 单伪元素清除法：原理和方法2一样

    1
    2
    3
    4
    5
    6
    7
    8
    E::after{
        conten='';
        display:block;
        clear:both;
        /*以下为补充代码：在网页中看不到该伪元素，可加可不加*/
        height:0;
        visibility:hidden;
    }

  4. 双伪元素去除法

  5. overflow法：给父元素添加overflow：hidden（最常用）

定位

  • 定位：可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况
  • 注意：如果left和right都有，以left为准; top和bottom都有以top
  • 子绝父相：父级相对定位，子级绝对定位

使用步骤

  1. 设置定位方式
    • 属性名：position
    • 常见属性值：static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)
  2. 设置偏移值
    • 属性名：left、right、top、bottom
    • 属性值：数字+px

相对定位

  • 相对定位：参照自己原来的位置来改变位置

  • 属性值：relative

  • 特点：

    • 占有原来的位置
    • 仍然具体标签原有的显示模式特点

  • 应用场景：

    • 用于小范围的移动

绝对定位

  • 绝对定位：
    • 先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位。
    • 有父级，但父级没有定位，以浏览器窗口为参照为进行定位
    • 绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位
  • 属性值：absolute
  • 特点：
    • 脱标,不占位
    • 改变标签的显示模式特点:具体行内块特点
  • 注意：绝对定位的盒子不能使用左右margin auto居中
    1. 先用 left: 50%，将整个盒子移动到浏览器中间偏右的位置，再用margin-left：盒子宽度一半的px，把盒子向左侧移动:自己宽度的一半（top同理）
    2. transform：translate(-50%,-50%)再加上left：50%和top：50%

固定定位

  • 属性值：fixed
  • 特点：
    • 脱标-不占位置
    • 改变位置参考浏览器窗口
    • 具备行内块特点

元素的层级

  • 不同布局方式元素的层级关系：
    • 标准流＜浮动＜定位
  • 不同定位之间的层级关系：
    • 相对、绝对、固定默认层级相同。
    • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
    • 默认情况下,定位的盒子后来者居上
    • z-index:整数;取值越大,显示顺序越靠上

装饰

垂直对齐方式

  • 问题：

    • 浏览器遇到行内和行内块标签当做文字处理,默认文字是按基线对象
    • 基线:浏览器文字类型元素排版中存在用于对齐的基线

  • 属性名：vertical-align

  • 属性值

    属性值 效果
    baseline 默认，基线对齐
    top 顶部对齐
    middle 中部对齐
    bottom 底部对齐

光标类型

  • 属性名：cursor

  • 属性值

    属性值 效果
    default 默认值，通常是箭头
    pointer 小手效果，提示用户可以点击
    text 工字型，提示用户可以选择文字
    move 十字光标，提示用户可以移动

圆角边框

  • 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
  • 属性名：border-radius
  • 属性值：数字+px、百分比
    • 正圆：border-radius：50%
    • 胶囊：border-radius：盒子高度的一半px
  • 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角!，一个值:表示4个角是相同的。

溢出显示

  • 溢出部分:指的是盒子内容部分所超出盒子范围的区域

  • 属性名：overflow

  • 属性值

    属性值 效果
    visble 默认值，溢出部分可见
    hidden 溢出部分隐藏
    scroll 无论是否溢出，都显示滚动条
    auto 根据是否溢出，自动显示或隐藏滚动条

显示隐藏

  • 场景：让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏
  • 常见属性
    • visibility: hidden （占位隐藏）
    • display: none （不占位隐藏）

透明

  • 场景:让某元素整体（包括内容)一起变透明
  • 属性名：opacity
  • 属性值：0-1之间的数字，1表示不透明，0表示完全透明
  • 注意：opacity会让元素整体透明，包括里面的内容，如:文字、子元素等…….

其他

标题图标

  • 习惯使用.ico格式的图标
  • 代码：＜link rel=”shortcut icon” herf=”ico图标路径” type=”image/x-icon”＞快捷打法：link：favicon

精灵图

  • 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
  • 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
  • 使用步骤：
    1. 创建一个盒子,设置盒子的尺寸和小图尺寸相同
    2. 将精灵图设置为盒子的背景图片
    3. 修改背景图位置 （background-position:x y）

过渡

  • 作用:让元素的样式慢慢的变化,常配合hover使用，增强网页交互体验
  • 属性名：transition
  • 常见取值
    • 过渡的属性：可以写具体的属性名，也可以直接写all
    • 过渡的时长：数字+s

SEO

  • SEO (Search Engine Optimization) :搜索引擎优化
  • 作用:让网站在搜索引擎上的排名靠前
  • seo三大标签：title、description、keywords

颜色

  • transparent属性：类似rgba(0,0,0,0)这样的透明色

弹性盒子

  • 语法：display:flex
  • 作用：和浮动一样都用于网页布局，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单
  • 组成：弹性容器+弹性盒子+主轴+侧轴
  • 效果
    • 盒子沿主轴方向排列（主轴方向可以改变，主轴在哪个方向盒子就沿哪个方向排列）
    • 盒子自动挤压（盒子自动缩小适应父元素大小让所有子元素在一行显示）
    • 盒子自动拉伸（若父元素没有设置高度，那么子元素会自动拉伸高度适应父元素）
  • 主轴对齐方式
    • 语法：justify-content：对齐方式
    • center：弹性盒子沿主轴居中排列
    • space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
    • space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
    • space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
    • flex-start：默认值，弹性盒子从起点开始依次排列
    • flex-end：弹性盒子从终点开始依次排列

JavaScript

JS基础

介绍

  • JavaScript是什么？

JavaScript是一种运行在客户端（浏览器)的编程语言

  • JavaScript的组成有哪些？

ECMAScript(基础语法)、web APIs ( DOM、BOM)

书写位置

内部

  • 写在html文件里，用script标签包住
  • 规范：script标签写在＜/body＞上面
    • 原因：我们将＜srcipt＞放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失效。因此，将JavaScript 代码放在HTML页面的底部附近通常是最好的策略。

外部

  • 代码写在以.js结尾的文件里
  • 语法：通过script标签（用src），引入到html页面中。
  • 注意：外部写法script标签中间不要写代码，否则会被忽略

内联

  • 代码写在标签内部

注释和修饰符

注释

  • 单行注释：//

快捷键：ctrl+/

  • 多行注释：/* */

快捷键：shift+ctrl+/

结束符

  • 作用:使用英文的;代表语句结束
  • 实际情况:实际开发中，可写可不写，浏览器(JavaScript 引擎)可以自动推断语句的结束位置

输入输出

alert()和prompt()它们会跳过页面渲染先被执行

输入

  • 语法：prompt(‘要输入的内容’)
  • 注意：prompt接收的内容默认为字符串型
  • 作用:显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

输出

语法1

  • document.write(‘要输出的内容’)
  • 作用:向body内输出内容
  • 注意:如果输出的内容写的是标签，也会被解析成网页元素

语法2

  • alert(‘要输出的内容’)
  • 作用:页面弹出警告对话框

语法3

  • conso.log(’控制台打印内容‘)
  • 作用:控制台输出语法，程序员调试使用

变量和常量

变量

  • 语法：let 变量名 = 值
  • 注意：旧版本中变量的声明用的并不是let，而是var

命名规范

  • 字母严格区分大小写
  • 不能用关键字
  • 只能用下划线、字母、数字、$组成，且数字不能开头
  • 起名要有意义，遵守小驼峰命名法

常量

  • 在开发中，变量的声明优先用const，尤其是数组和对象的声明
  • 语法：const 常量名 = 值
  • 注意：
    • 常量不允许重新赋值,且声明的时候必须赋值，常量名通常全大写

数据类型

typeof：可以检测数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

  • 值类型:简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
  • 引用类型:复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型

基本数据类型

number数字型

string字符串型

  • 单引号(‘ ‘)、双引号(“ “)、反引号(``)
  • 字符串拼接用+号
  • 模板字符串：外面用反引号，里面用￥{变量名}

boolean布尔型

  • 0、undefined、null、false、NaN转换为布尔值后都是false,其余则为true

undefined未定义型

null空类型

引用数据类型

Object对象

Array数组

Date

等通过new关键字创建的对象

类型转换

隐式转换

  • ＋号两边只要有一个是字符串，都会把另外一个转成字符串
  • 除了+以外的算术运算符比如– */等都会把数据转成数字类型
  • +号作为正号解析可以转换成数字型

显示转换

  • Number（数据）
  • +数据
  • parseInt（数据）：只保留整数
  • parseFloat（数据）：可以保留小数

运算符

比较运算符

  • ===：全等比较（值和类型都比，开发中判断是否相等一般都是用这个）
  • ！==：左右两边是否不全等
  • 注意：
    • NaN不等于任何东西，包括他自己
    • 尽量不要比较小数，因为小数有精度问题
    • 不同类型之间比较会发生隐式转换

分支语句

if语句

1
2
3
4
5
6
7
if(条件1){
    满足条件1执行的代码
}else if(条件2){
    满足条件2执行的代码
}else{
    不满足条件执行的代码
}

三元运算符

1
条件 ? 满足条件执行的代码 :不满足条件执行的代码

switch语句

1
2
3
4
5
6
7
8
9
10
switch(数据){
    case 值1:
        代码1
        break
    case 值2：
        代码2
        break
    default:
        代码n
}

循环语句

break：退出循环

continue：结束本次循环

for循环

1
2
3
for(变量起始值;终止条件;变量变化值){
    循环体
}

while循环

1
2
3
while(循环条件){
	循环体
}

数组

数组的声明

  • 语法1：let 数组名 = [数据1，数据2，数据3…]
  • 语法2：let 数组名 = new Array(数据1，数据2，数据3…)

数组的操作

增

  • arr.push(新增内容)：将一个或多个元素添加到数组的末尾，并返回该数组的新长度

  • arr.unshift(新增内容)：将一个或多个元素添加到数组的开头，并返回该数组的新长度

删

  • arr.pop()：删除最后一个元素，并返回
  • arr.shift()：删除第一个元素，并返回
  • arr.splice(起始操作的下标，删除的个数)

常用方法

  • sort：默认是升序

函数

函数的声明

1
2
function 函数名(形参){
}

匿名函数

1
2
function(形参){
}
  • 匿名函数的可以用 函数表达式的方式调用：let 变量名 = function(){}

立即执行函数

1
2
法一：(function(形参){})(实参);
法二；(function(形参){}(实参));
  • 使用立即执行函数一定要在结尾+；

常用函数

  • length()：返回长度
  • trim()：去除字符串两边空格
  • substring()：提取字符串中两个指定索引之间的字符
  • chatAt()：获取指定索引位置的字符
  • indexOf()：检索某个字符串的位置

对象

对象的声明

1
2
3
4
5
6
7
法一：let 对象名 = {
    属性名1:属性值1，
    属性名2:属性值2，
    方法名1:函数1，
    方法名2:函数2
}
法二：let 对象名 = new Object()
  • 每组属性或方法之间用逗号隔开

对象的使用

属性

  • 增：对象名.新属性值=新值
  • 删：delete 对象名.属性
  • 改：对象名.属性名=新值
  • 查：
    • 法一：对象名.属性名
    • 法二：对象名[‘属性名’]

方法

  • 对象名.方法名()

对象的遍历

1
2
3
for (let k in 对象名){
    console.log(对象名[k])
}
  • 注意：k得到的是字符串型的属性名

内置对象

Math

  • ceil：向上取整
  • floor：向下取整
  • round：四舍五入
  • max：取最大值
  • min：取最小值
  • abs：取绝对值
  • random：返回0-1之间的一个数（左闭右开）
    • 生成0-10之间的一个随机整数：Math.floor(Math.random()*11)
    • 生成N-M之间的一个随机整数：Math.floor(Math.random()*(M-N+1))+N

环境对象

  • 环境对象：this它代表着当前函数运行时所处的环境，是函数内部特殊的
  • this指向的是调用者

JSON

  • JavaScript Object Notation, JavaScript对象标记法。
  • 多用于作为数据载体，在网络中进行数据传输。
  • 格式：’{“key1”:value1,”key2”:value2} ‘
  • json字符串转为js对象：JSON .parse(json字符串)
  • js对象转为json字符串：JSON .stringify(js对象)
1
2
3
4
5
{
	"name":"jy",
	"age":22,
	"gender":"male"
}

APIs

介绍

  • 作用：就是使用JS去操作html和浏览器
  • 分类：DOM(文档对象模型)、BOM（浏览器对象模型)

DOM

DOM：操作网页内容，开发网页内容特效和实现用户交互

DOM对象：浏览器根据html标签生成的JS对象，DOM的核心就是把内容当对象来处理

获取DOM

  • 语法：document.querySelector(‘css选择器’)
    • 返回值：获取匹配的第一个元素对象
  • 语法：document.querySelectorAll(‘css选择器’)
    • 返回值：CSS选择器匹配的NodeList 对象集合，该集合是一个伪数组，有长度和索引号，但没有pop、push等方法

操作元素

内容

  • 语法：对象.innerText =’内容’
    • 不会解析标签
  • 语法：对象.innerHTML=’内容’
    • 会解析标签

属性

  • 语法：对象.属性=‘值’

样式

  • 语法：对象.style.样式属性=’值’
    • 对于有连接符-的样式属性，如background-color，不能直接写，可以采用小驼峰命名的方式写成backgroundColor
  • 语法：对象.className=’css的某个类名’
    • 如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
  • 语法：对象.classList.要执行的方法(‘css的某个类名’)
    • add方法：追加一个类
    • remove方法：删除一个类
    • toggle方法：切换一个类

表单属性

  • 语法：对象.属性=’值‘

自定义属性

  • 在标签上加data-xxx=”自定义属性值”
  • 获取方式：对象.dataset.xxx

间歇函数

  • setInterval(函数名，间隔时间)
    • 每隔一段时间调用这个函数，间隔时间的单位是毫秒，函数名不需要加括号，返回值是一个数字
    • 关闭：clearInterval（变量名）

事件监听

老版本

  • 语法：元素对象.on事件类型=(要执行的方法)

  • 都是冒泡阶段执行的

  • 事件解绑语法：元素对象.on事件类型=null

新版本

  • 语法：元素对象.addEventListener(‘事件类型’,要执行的函数)
  • 事件源：元素对象
  • 事件类型：如鼠标点击，键盘敲击等
    • 鼠标事件
      • click:鼠标点击
      • mouseenter:鼠标经过
      • mouseleave:鼠标离开
    • 键盘事件
      • keydown:键盘按下
      • keyup:键盘离开
    • 焦点事件
      • focus:获得焦点
      • blur:失去焦点
    • 文本事件
      • input:用户输入
    • 页面加载事件
      • load：监听整个页面资源(给window加)
      • DOMContentLoaded：无需等待样式表、图像等完全加载（给document加）
    • 页面滚动事件
      • scroll
      • 获取滚动距离的属性：scrollTop，scrollLeft(document.documentElement.属性)
  • 事件解绑：元素对象.removeEventListener(‘事件类型’,函数名)
  • 事件对象
    • 在事件绑定的执行函数中的第一个参数就是事件对象，通常用e，ev，event来表示

事件流

  • 事件流：指的是事件完整执行过程中的流动路径
  • 事件捕获：从DOM的根元素开始去执行对应的事件（从外到里)
  • 事件冒泡：当一个元素触发事件后，会依次向上调用所有父级元素的同名
  • 阻止事件流
    • 语法：事件对象.stopPropagation()
  • 事件委托
    • 事件委托委托给的是父元素
    • 减少注册次数，提高了程序性能
    • 如何找到真正触发的子元素：事件对象.target.tagName

其他

阻止元素默认行为

  • 语法：事件对象.preventDefault()

项目搭建

项目目录

  • xxx-pc-client（项目目录）
    • index.html （首页的html文件）
    • favicon.ico（ico图标）
    • images（固定使用的图片素材文件）
    • uploads（非固定使用的图片素材文件）
    • css（css文件）
      • base.css（基础公共样式）
      • common.css（多个网页相同模块的重复样式）
      • index.css（首页的css）