脚本语言：不需要编译，直接就可以被浏览器解析执行

Wed 概念概述

JavaWed：

  • 使用java语言开发基于互联网的项目

软件架构：

1、 C/S ： Client / Server 客户端 / 服务器端

 *    在用户本地有一个客户端程序，在远程有一个服务器端程序*    如：QQ、迅雷...*    优点：用户体验好*    缺点：开发、安装、部署、维护 麻烦

2、 B/S : Browser / Server 浏览器 / 服务器端

  • 只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序

  • 优点： 开发、安装、部署、维护 简单

  • 缺点：1、如果应用过大，用户的体验可能会受到影响

    ​ 2、对硬件的要求过高

B/S架构详解

资源分类：

  1. 1. 静态资源使用静态网页开发技术发布的资源。特点： 所有用户访问，得到/看到的结果是一样的如：文本、图片、音频、视频、HTML、CSS、JavaScript如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器内置了静态资源的解析引擎，可以展示静态资源HTML：用于搭建基础网页，展示页面的内容CSS   ：用于美化页面，布局页面JavaScript  ： 控制页面的元素，让页面有一些动态的效果2. 动态资源使用动态网页技术发布的资源。特点：所有用户访问，得到/看到的结果可能不一样如：JSP  /   servlet  、PHP  、asp...如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器 （浏览器只能去解析静态资源）

​

HTML

  1. 概念 ：最基础的网页开发语言

​ ♥ Hyper Text Markup Language 超文本标记语言

 超文本：是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本标记语言：由标签构成的语言。<标签名称>  如 html  ，xml

​ 标签语言不是编程语言

  1. 快速入门：

    语法：

    ♥ html 文档后缀名 ： .html 或者 .htm

    ♥ 标签分为：

    1. 围堵标签 ：有开始标签和结束标签。如<html> </html>
    2. 自闭和标签 ：开始标签和结束标签在一起。如<br/> 换行标签

​ ♥ 标签可以嵌套：
​ 需要正确嵌套，不能你中有我，我中有你
​ 正确：<a><b></b></a>
​ ♥ 在开始标签中可以定义属性。属性由键值对构成，值需要用引号（单双都可）引起来

最基础的html代码：

<html><head><title></title></head><body><font color="blue"> Hello World </font><br/></body>
</html>

Emmet语法

html标签快捷键

VSCode 保存自动格式化代码

标签

文件标签

构成html 最基本的标签

​ <html> 标签告知浏览器这是一个 HTML 文档 , 是 HTML 文档中最外层的元素。
​ <body> 标签定义文档的主体 , 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）
​ <title> 标签定义文档的标题 ,一个 HTML 文档中不能有一个以上的 <title> 元素。
​ <head> 头标签 ，用于指定html 文档的一些属性 ，引入外部资源。

文本标签

和文本有关的标签

​ <h1> <h6> 标题标签

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

​ <p></p> 段落标签

<p>这是一个段落。</p>

​ <br/> 换行标签

<p>
使用 br 元素<br>在文本中<br>换行。
</p>

​ <hr> 显示为一条水平线。标签定义 HTML 页面中的主题变化（比如话题的转移）
​ <hr> 的属性 color ：颜色 width ：宽度 size ：高度
​ align ：对齐方式 ——> center 居中 、 left 左对齐 right 右对齐
​

<hr color= "red" width="200" size="10" align="left"/>

​ <b> 字体加粗

<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>

​ <i> 字体斜体

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

​ <font> 字体标签

<font face="verdana" color="green">这是一些文本!</font>

​ <!-- --> 注释

<!--这是一个注释，注释在浏览器中不会显示-->

图片标签

​ <img> 图片标签
​ 相对路径的表示方法：
​ 以 .开头的路径 * ./: 代表当前目录 * ../: 代表上一级目录

列表标签

​ <ol> 定义一个有序列表

<ol><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>

​ <ul> 定义一个无序列表

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

链接标签

​ <a></a> 链接标签
​ href ：指定访问资源的URL（统一资源定位符）
​ target ：指定打开资源的方式
​ _self :默认值，在当前页面打开
​ _ blank : 在空白页面打开

 <a href="https://www.runoob.com">这是一个链接</a>            <!--在当前页面打开--><a href="https://www.runoob.com" target="_blank">这是一个链接</a>   <!--在空白页面打开--><a href="./本地标签.html"> 本地标签</a>       <!--打开本地标签-->

div 和 span

<div> 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。块级标签
每一个div占满一整行。块级标签
<span> 用于对文档中的行内元素进行组合。行内标签 ，内联标签
文本信息在一行展示

语义化标签

html5 中为了提高程序的可读性，提供了一些标签。

<header> 标签定义文档或者文档的一部分区域的页眉。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

<footer> 标签定义文档或者文档的一部分区域的页脚。

表格标签

<table> 定义表格
<tr> 定义行
<td> 定义单元格
colspan : 合并列
rowspan : 合并行

<th> 定义表头单元格

表单标签

<form> 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

​ 属性： 1、action : 指定提交数据的URL
​ 2、methon：指定提交方式
​ 分类：一共7种，2种比较常用
​ get ： 请求参数会在地址栏中显示，会封装到请求行中
​ 请求参数大小/长度是有限制的
​ 不太安全

​ post : 请求参数不会在地址栏中显示，会封装在请求体中
​ 请求参数的大小/长度没用限制
​ 较为安全

​ 表单项中的数据要想被提交：必须指定其name属性

* 表单项标签：* input：可以通过type属性值，改变元素展示的样式* type属性：* text：文本输入框，默认值* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息  * password：密码输入框* radio:单选框* 注意：1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值3. checked属性，可以指定默认值* checkbox：复选框* 注意：1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值2. checked属性，可以指定默认值* file：文件选择框* hidden：隐藏域，用于提交一些信息。* 按钮：* submit：提交按钮。可以提交表单* button：普通按钮* image：图片提交按钮* src属性指定图片的路径   * label：指定输入项的文字描述信息* 注意：* label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。* select: 下拉列表* 子元素：option，指定列表项* textarea：文本域* cols：指定列数，每一行有多少个字符* rows：默认多少行。

<form action="#" method="get">用户名：<input type="text" name="username"><br>密码：<input type="password" name="password"><br><input type="submit" `value="提交"/>
</form>

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><form action="案例.html" method="get"> <!--表单--><label for="username">用户名</label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br><label for="password">密码：<input type="password" name="password" placeholder="请输入密码" id="password"><br>性别：<input type="radio" name="gender"  value="male"> 男<input type="radio" name="gender"  value="female"> 女<br> <!-- radio单选框 、-->爱好：<input type="checkbox" name="hobby" value="game" > 打游戏<input type="checkbox" name="hobby" value="plane" > 唱歌<input type="checkbox" name="hobby" value="code" > 打代码<br><!-- checkbox复选框-->图片：<input type="file" name="file" value="图片" />  <br>  隐藏域：<input type="hidden" name="id" value="aaa" /><!-- file 可以选择文件提交--><br>拾色器：<input type="color" name="color" value="" />  <br>生日：<input type="time" name="birthday" ><br>      生日：<input type="datetime-local" name="birthday" ><br>  邮箱：<input type="email" name="email" ><br>年龄：<input type="number" name="age" ><br>省份：<select name="province"><option value="">--请选择--</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><!--<option value="3" selected="">广州</option>--><!--selected 表示默认选中--></select><br><!--文本域-->自我描述：<textarea rows="5" cols="20" name="自我描述"></textarea><br><input type="button" value="按钮" ><input type="submit" `value="提交"></form>
</body>
</html>

案例：
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>注册页面</title>
</head>
<body><form action="#" method="post"><table border="1" align="center" width="500"><tr><td><label for="username">用户名</label></td> <td><input type="text" name="username" id="username" value="" /></td> </tr><tr><td><label for="password">密码</label></td> <td><input type="password" name="password" id="password" value="" /></td> </tr><tr><td><label for="eamil">Email</label></td> <td><input type="eamil" name="eamil" id="eamil" value="" /></td> </tr><tr><td><label for="name">姓名</label></td> <td><input type="text" name="name" id="name" value="" /></td> </tr><tr><td><label for="tel">手机号</label></td> <td><input type="number" name="tel" id="password"></td> </tr><tr><td><label for="tel">年龄</label></td> <td><input type="number" name="age" ></td></tr><tr><td><label >性别</label></td> <td><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女</td> </tr><tr><td><label >出生日期</label></td> <td><input type="date" name="birthday" id="birthday" ></td> </tr><tr><td><label for="checkcode" >验证码</label></td> <td><input type="text" name="checkcode" id="checkcode" ></td> </tr><tr><td colspan="2" align="center"><input type="submit" value="注册" ></td> </tr></table></form>
</body>
</html>

CSS

参考网站

概念

Cascading Style Sheets 层叠样式表

  • 层叠：多个样式可以作用在同一个html的元素上，同时生效

好处

  1. 功能强大
  2. 将内容展示和样式控制分离

    • 降低耦合度。解耦

    • 让分工协作更容易

    • 提高开发效率

三、CSS的使用：CSS与html结合方式

内联样式

内联样式* 在标签内使用style属性指定css代码* 如：<div style="color:red;">hello css</div>

内部样式

内部样式* 在head标签内，定义style标签，style标签的标签体内容就是css代码* 如：<style>div{color:blue;}</style><div>hello css</div>

外部样式

外部样式1. 定义css资源文件。2. 在head标签内，定义link标签，引入外部的资源文件* 如：* a.css文件：div{color:green;}<link rel="stylesheet" href="css/a.css"><div>hello css</div><div>hello css</div>

注意：

 * 1,2,3种方式 css作用范围越来越大* 1方式不常用，后期常用2,3* 第3种格式可以写为：

 <style>@import "css/a.css";</style>

css语法

​ 格式：
​ 选择器 {
​ 属性名1:属性值1;
​ 属性名2:属性值2;
​ …
​ }
​ 选择器:筛选具有相似特征的元素
​ 注意：
​ 每一对属性需要使用；隔开，最后一对属性可以不加；**

选择器

基础选择器

五、选择器：筛选具有相似特征的元素* 分类：1. 基础选择器1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一* 语法：#id属性值{}<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>#div     <!-- 这是id-->{text-align:center;color:red;} </style> </head><body><p id="div">Hello World!</p><p>这个段落不受该样式的影响。</p></body></html>

元素选择器

 2. 元素选择器：选择具有相同标签名称的元素* 语法： 标签名称{}* 注意：id选择器优先级高于元素选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。<html><head><meta charset="utf-8"><title>随便</title><style>div{    color:red;   }</style>  </head><body>   <div>传智播客</div><div1>黑马程序员</div1></body></html>

类选择器

  3. 类选择器：选择具有相同的class属性值的元素。* 语法：.class属性值{}* 注意：类选择器选择器优先级高于元素选择器class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：<html><head><meta charset="utf-8"><title>随便</title><style>#div{     color:red;     }div{    color: green;    }.cls{    color: blue;    }  </style></head><body><div id="div">传智播客</div><div1>黑马程序员</div1><p class="cls">传智学院</p></body>
</html>

扩展选择器

扩展选择器：1. 选择所有元素：语法： *{}<html><head><style>* {  background-color: pink;  } </style></head><body><div class="intro"><p>My name is Donald.</p><p>I live in Duckburg.</p></div><p>My best friend is Mickey.</p></body>
</html>

并集选择器

2. 并集选择器：选择所有<div>元素和<p>元素  (div,p)语法 :选择器1,选择器2{}<html><head><style>div,p {  background-color: pink;  }<!-- 选择所有<p>元素和h1>元素: --></style></head><body><div><p>My name is Donald.</p><p>I live in Duckburg.</p></div>       My best friend is Mickey.</body></html>

子选择器

3. 子选择器：选择<div>元素内的所有<p>元素  (div p)语法：  选择器1 选择器2{}
<html><head><style>div p {  background-color: pink;   }</style></head><body><div><p>My name is Donald.</p>I live in Duckburg.</div>My best friend is Mickey.</body>
</html>

父选择器

4. 父选择器：选择所有<p>元素的父级<div>元素  (div>p)语法：  选择器1 > 选择器2{}<html><head><style>div>p {  background-color: pink;  }</style></head><body><div><p>My name is Donald.</p>I live in Duckburg.</div>      My best friend is Mickey.</body></html>

属性选择器

5. 属性选择器：选择元素名称，属性名=属性值的元素语法：  元素名称[属性名="属性值"]{}
<html><head><style>input[type='text']{  border:3px solid   }       </style></head><body><div>  <p>My name is Donald.</p>  </div>My best friend is Mickey. <br><input type="password"> <br><input type="text"></body>
</html>

伪类选择器

6. 伪类选择器：选择一些元素具有的状态* 语法： 元素:状态{}* 如： <a>* 状态：* link：初始化的状态* visited：被访问过的状态* hover：鼠标悬浮状态* active：正在访问状态      <html><head><style>a:link{  /* 初始化的状态 */color:skyblue;}a:visited{  /* 鼠标悬浮状态 */color:green;}a:hover{  /* 被访问过的状态 */color:yellow;}a:active{  /* 正在访问状态 */color:blue;}</style></head><body>      <a href="#">相亲吗少年</a> </body>
</html>

focus 伪类选择器

：focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus{background-color:yellow;
}

属性

1. 字体、文本* font-size：字体大小* color：文本颜色* text-align：对其方式* line-height：行高
2. 背景* background：
3. 边框* border：设置边框，符合属性
4. 尺寸* width：宽度* height：高度<html><head><style>p{ color: #fe9cfd;            /*文本颜色*/font-size: 30px;       /*字体大小*/text-align: center;     /*对其方式*/ line-height: 200px;        /*行高*/border: 1px solid red;     /*边框*/}</style></head><body><p>我喜欢你</p></body></html>

盒子模型

5. 盒子模型：控制布局* margin：外边距* padding：内边距 * 默认情况下内边距会影响整个盒子的大小* box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小* float：浮动* left* right

<html><head><style>div{border: 1px solid red;width:100px}.div1{width: 100px;height: 100px;}.div2{width: 200px;height: 200;padding: 50px;box-sizing: border-box;   /*设置盒子的属性决定最终大小*/}.div3{ float: left;    }.div4{  float: left;   }.div5{  float: right;  }</style></head><body><div class="div2"><div class="div1"></div>可恶啊</div><div class="div3">aaaa</div><div class="div4">bbbb</div><div class="div5">cccc</div></body>
</html>

字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体、微软雅黑）

CSS使用font-family属性定义文本的字体系列

<head>
<style>h2{font-family:'华文彩云';}p{font-family: '微软雅黑'; }</style>
</head>
<body><h2>ping老师</h2><p>我喜欢你i</p>
</body>
  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

CSS的元素显示模式

块元素

常见的块元素有

~

、

、

、

  • 、

    1. 、
    2. 等，

其中

标签是最典型的块元素。
块级元素的特点：
①比较霸道，自己独占一行。

②高度，宽度、外边距以及内边距都可以控制。

③宽度默认是容器（父级宽度）的100%。

④是一个容器及盒子，里面可以放行内或者块级元素。

  • 文字类的元素内不能使用块级元素
  • <p> 标签主要用于存放文字，因此<p>里面不能放块级元素，特别不能放 <div>
  • 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有、、、、、、、、、等，其中
<span>标签是最典型的行内元素。有的地方也将行内元素称为==内联元素==。

行内元素的特点：

①相邻行内元素在一行上，一行可以显示多个。

②高、宽直接设置是无效的。

③默认宽度就是它本身内容的宽度。

④行内元素只能容纳文本或其他行内元素。

注意：

  • 链接里面不能再放链接
  • 特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签—、、，它们同时具有块元素和行内元素的特点。

有些资料称它们为行内块元素。

行内块元素的特点：

①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

②默认完度就是它本身内容的宽度（行内元素特点）。

③高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示转换

转换为块元素：display:block转换为行内元素：display:inline；转换为行内块：display:inline-block；

CSS背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color属性定义了元素的背景颜色。

background-color：颜色值；

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景

图片，优点是非常便于控制位置（精灵图也是一种运用场景）

background-image:none | url (url)
参数值 作用
none 无背景图（默认的）
url 使用绝对或相对地址指定背景图像

背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat:repeat | no-repeat | repeat-x | repeat-y平铺      不平铺        沿x轴平铺    沿y轴平铺
参数值 作用
repeat 背景图像在纵向和横向上平铺（默认的）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺

背景图片位置

利用background-position属性可以改变图片在背景中的位置。

background-position:x y；

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位

参数值 说明
length 百分数 |由浮点数字和单位标识符组成的长度值
position top | center | bottom I left | center | right 方位名词

1.参数是方位名词

  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致

  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2.参数是精确单位

  • 如果参数值是精确坐标，那第一个肯定是x坐标，第二个一定是y坐标

  • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

3.参数是混合单位

  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视差滚动的效果。

background-attachment:scroll | fixed
参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量当使用简

写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

background:transparent url（image.jpg）repeat-y fixed top；

背景颜色半透明

CSS3为我们提供了背景颜色半透明的效果。

background:rgba（0，0，0，0.3）;
  • 最后一个参数是alpha透明度，取值范围在0~1之间
  • 我们习惯把0.3的0省略掉，写为background:rgba（0，0，0，.3）；
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

CSS权重

选择器 选择器权重
继承 或者 * 0，0，0，0
元素选择器 0，0，0，1
类选择器，伪类选择器 0，0，1，0
ID选择器 0，1，0，0
行内样式 style="" 1，0，0，0
!important 重要的 无穷大

id选择器 > 类选择器 > 元素选择器 > 继承

盒子模型

边框

border可以设置元素的边框。

边框有二部分组成：边框宽度（粗细）边框样式 边框颜色

语法：

border:border-width || border-style ||  border-color
属性 作用
border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色

参数：

none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边

border：1px solid red；没有顺序

边框分开写法：
border-top：1px solid red；/*只设定上边框，其余同理*/

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse:collapse;
  • collapse单词是合并的意思
  • border-collapse:collapse；表示相邻边框合并在一起
<style>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid pink;/* 合并相邻的边框 */border-collapse: collapse;font-size: 14px;text-align: center;}</style>

内边距

padding属性用于设置内边距，即边框与内容之间的距离。

属性 作用
padding left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

padding属性（简写属性）可以有一到四个值。

值的个数 表达意思
padding：5px； 1个值，代表上下左右都有5像素内边距；
padding：5px 10px； 2个值，代表上下内边距是5像素 左右内边距是10像素；
padding：5px 10px20px； 3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素；
padding：5px 10px20px30px； 4个值，上是5像素 右10像素 下20像素 左是30像素 顺时针

当我们给盒子指定padding值之后，发生了2件事情：

1.内容和边框有了距离，添加了内边距。

2.padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

如何盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

外边距水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

①盒子必须指定了宽度（width）

②盒子左右的外边距都设置为auto

.header{  width：960px；margin：0 auto;  }

常见的写法，以下三种都可以：

  • margin-left:auto； margin-right auto；
  • margin: auto；
  • margin: 0 auto；

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

塌陷问题

嵌套块元素垂直外边距的塌陷

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元

素的内外边距。

*{padding　: 0;  /*清除内边距*/margin :　0;   /*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元

素就可以了

浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动特性

设置了浮动（float）的元素最重要特性：

1.脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）

2.浮动的盒子不再保留原先的位置

3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

4.浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
  • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  • 行内元素同理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>zhao</title><style>.l {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;}.o {width: 300px;height: 300px;background-color: skyblue;float: left;}.v {width: 300px;height: 300px;background-color: purple;/* float: left; */float: right;}</style>
</head><body><div class="l"></div><div class="o"></div><div class="v"></div>
</body></html>

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：

网页布局第一准则

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置、符合网页布局第一准则

网页布局第二准则：先设置盒子大小，之后设置盒子的位置

浮动布局

注意点

1.浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流.

清除浮动

清除浮动本质

  • 清除浮动的本质是清除浮动元素造成的影响· 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器{clear：属性值;}
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear:both；

清除浮动的策略是：闭合浮动

清除浮动的方法

1、额外标签法（隔墙法）

2、父级添加 overflow 属性

3、父级添加after伪元素

4、父级添加双伪元素

额外标签法（隔墙法）

额外标签法会在浮动元素未尾添加一个空的标签。

例如

，或者其他标签（如 <br/>等）。

  • 优点：通俗易懂，书写方便

  • 缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

父级添加 overflow 属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

  • 优点：代码简洁

  • 缺点：无法显示溢出的部分

    在父级里添加overflow

父级添加after伪元素
        .clearfix:after {content: "";display: block;height: 0;clear: both;/* 清除 */visibility: hidden;}.clearfix {/* IE6、7专有 */*zoom: 1;}

  • 优点：没有增加标签，结构更简单

  • 缺点：照顾低版本浏览器

  • 代表网站：百度、淘宝网、网易等

父级添加双伪元素
     .clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {/* IE6、7专有 */*zoom: 1;}
  • 优点：代码更简洁
  • 缺点：照顾低版本浏览器
  • 代表网站：小米、腾讯等

总结

精灵图

精灵技术目的：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

Bootstrap

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

Bootstrap本地载入

<!DOCTYPE html>
<html>
<head><title>个人简历</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/bootstrap.css"><script src="js/jquery-3.2.1.min.js"></script>     <script src="js/bootstrap.js"></script>
</head><body>
</body>
</html>//<link rel="styleheet" href="">
//<script src=""></script>

Bootstrap3模版

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></head><body><h1>你好，世界！</h1></body>
</html>

Bootstrap4模版

<!doctype html>
<html lang="en"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script><title>Hello, world!</title></head><body><h1>Hello, world!</h1></body>
</html>

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

  • .container 类用于固定宽度并支持响应式布局的容器。两边留白
  • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。每一种设备都是100%宽度

<div class="container"><h1>我的第一个 Bootstrap 页面</h1><p>这是一些文本。</p>
</div>
-----------------------------------------------------------------------------------------------------
<div class="container-fluid"><h1>我的第一个 Bootstrap 页面</h1><p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>
</div>

navbar

.navbar——设置nav元素为导航条组件；

.navbar-default——指定导航条组件为默认主题；

.navbar-inverse——指定导航条组件为黑色主题；

.navbar-fixed-top——设置导航条组件固定在顶部；

.navbar-fixed-bottom——设置导航条组件固定在底部；

.container-fluid——设置宽度充满父元素，即为100%；

.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

.navbar-toggle——设置button元素为导航条组件的切换钮；

.collapsed——设置button元素为在视口小于768px时才显示；

.navbar-brand——设置导航条组件内的品牌图标；

navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.

<html>
<head><link rel="stylesheet" href="css/bootstrap.css"><script src="js/bootstrap.js"></script><style>.navbar-brand>img {display: inline;}</style>
</head>
<body><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><div class="navbar-header"><a href="" class="navbar-brand" style="width:250px;"><img src="img/icon_1.jpg" style="height:30px;">&nbsp;STEM教育</a></div></div></nav>
</body>
</html>

https://www.cnblogs.com/jipinglong/p/9032640.html

栅格系统

响应式布局

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

  • 同一套页面可以兼容不同分辨率的设备。

  • 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

  • 步骤

    1. 定义行。通过 行（row）在水平方向创建一组 列（column）
    2. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
      • 设备代号：

        1. xs：超小屏幕 手机 (<768px)：col-xs-12
        2. sm：小屏幕 平板 (≥768px)
        3. md：中等屏幕 桌面显示器 (≥992px)
        4. lg：大屏幕 大桌面显示器 (≥1200px)
    • 注意：

      1. 一行中如果格子数目超过12，则超出部分自动换行。
      2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
      3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
<div class="container">   <!-- 两边留白--><h1>Hello World!</h1><p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col"  div，会显示四个等宽的列。</p><div class="row"><div class="col" style="background-color:lavender;">JavaScript</div><div class="col" style="background-color:orange;">CSS</div><div class="col" style="background-color:lavender;">HTML</div></div></div>


<div class="container-fluid"> <!-- 每一种设备都是100%宽度-->

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row"><div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div><div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row"><div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

按钮

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

按钮类可用于<a>, <button>, 或 <input>元素上:

<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">

按钮设置边框

<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>

不同大小的按钮

<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>

块级按钮

通过添加 .btn-block 类可以设置块级按钮：

<button type="button" class="btn btn-primary btn-block">按钮 1</button>

激活和禁用的按钮

按钮可设置为激活或者禁止点击的状态。

.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>

颜色

<div class="container"><h2>代表指定意义的文本颜色</h2><p class="text-muted">柔和的文本。</p><p class="text-primary">重要的文本。</p><p class="text-success">执行成功的文本。</p><p class="text-info">代表一些提示信息的文本。</p><p class="text-warning">警告文本。</p><p class="text-danger">危险操作文本。</p><p class="text-secondary">副标题。</p><p class="text-dark">深灰色文字。</p><p class="text-light">浅灰色文本（白色背景上看不清楚）。</p><p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>

在链接中使用

<div class="container"><h2>文本颜色</h2><p>鼠标移动到链接。</p><a href="#" class="text-muted">柔和的链接。</a><a href="#" class="text-primary">主要链接。</a><a href="#" class="text-success">成功链接。</a><a href="#" class="text-info">信息文本链接。</a><a href="#" class="text-warning">警告链接。</a><a href="#" class="text-danger">危险链接。</a><a href="#" class="text-secondary">副标题链接。</a><a href="#" class="text-dark">深灰色链接。</a><a href="#" class="text-light">浅灰色链接。</a>
</div>

背景颜色

<div class="container"><h2>背景颜色</h2><p class="bg-primary text-white">重要的背景颜色。</p><p class="bg-success text-white">执行成功背景颜色。</p><p class="bg-info text-white">信息提示背景颜色。</p><p class="bg-warning text-white">警告背景颜色</p><p class="bg-danger text-white">危险背景颜色。</p><p class="bg-secondary text-white">副标题背景颜色。</p><p class="bg-dark text-white">深灰背景颜色。</p><p class="bg-light text-dark">浅灰背景颜色。</p>
</div>

图像

圆角图片

.rounded 类可以让图片显示圆角效果：

<div class="container"><h2>圆角图片</h2><p>.rounded 类可以让图片显示圆角效果：</p>            <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
</div>

椭圆图片

.rounded-circle 类可以设置椭圆形图片:

<div class="container"><h2>椭圆图片</h2><p>.rounded-circle 类可以设置椭圆形图片:</p>            <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="604" height="436">
</div>

缩略图

.img-thumbnail 类用于设置图片缩略图(图片有边框):

<div class="container"><h2>缩略图</h2><p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>            <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="404" height="336" >
</div>

图片对齐方式

使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

<div class="container"><h2>图片对齐方式</h2><p>使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:</p><img src="https://static.runoob.com/images/mix/paris.jpg" class="float-left" width="304" height="236"> <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="float-right" width="304" height="236">
</div>

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 **** 标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

<div class="container"><h2>响应式图片</h2><p>.img-fluid 类可以设置响应式图片，重置浏览器大小查看效果:</p><img src="https://static.runoob.com/images/mix/paris.jpg" class="img-fluid">
</div>

JavaScript

JAVA的起源故事

JAVA的起源故事

网景公司

5大主流浏览器

有自己研发的内核

JS引擎是单线程

概念

  • JavaScript 是 Web 的编程语言。是一门客户端脚本语言
  • 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
  • 脚本语言：不需要编译，直接就可以被浏览器解析执行

功能：

  • 可以来增强用户和HTML页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

  • JavaScript = ECMAScript + JavaScript 自己特有的东西（BOM+DOM）

JavaScript web 开发人员必须学习的 3 门语言中的一门：1、HTML 定义了网页的内容2、CSS 描述了网页的布局3、JavaScript 对网页行为进行编程

ECMAScript ：客户端脚本语言的标准

基本语法

​ 与html结合方式：

​ （1）内部JS：定义

​ （2）外部JS：定义

​ 注意：1、

​ 2、

使用、输出

标签之间。

<script>document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

**注释：**旧的 JavaScript 例子也许会使用 type 属性：

**注释：**type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

JavaScript 能够以不同方式“显示”数据：

 使用 window.alert() 写入警告框使用 document.write() 写入 HTML 输出使用 innerHTML 写入 HTML 元素使用 console.log() 写入浏览器控制台

innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 5 + 6;
</script></body>
</html>

document.write()

出于测试目的，使用 document.write() 比较方便：

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><script>document.write(5 + 6);
</script></body>
</html>

在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><button onclick="document.write(5 + 6)">试一试</button></body>
</html>

document.write() 方法仅用于测试。

window.alert()

您能够使用警告框来显示数据：

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><script>window.alert(5 + 6);
</script></body>
</html>

console.log()

在浏览器中，您可使用 console.log() 方法来显示数据。

请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><script>console.log(5 + 6);
</script></body>
</html>

数据类型

原始数据类型（基本数据类型）

​ 1️⃣：number ：数字。整数/小数/NaN（not a number 一个不是数字的数字）

​ 2️⃣：string ：字符串。“abc” “a”

​ 3️⃣：boolean：true 和 false

​ 4️⃣：null ：一个对象为空的占位符

​ 5️⃣：undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

Number

JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

字符串

字符串是以==单引号’或双引号"==括起来的任意文本，比如'abc'，"xyz"等等。请注意，''或""本身只是一种表示方式，不是字符串的一部分，因此，字符串'abc'只有a，b，c这3个字符。

JavaScript的字符串就是用''或""括起来的字符表示。

如果'本身也是一个字符，那就可以用""括起来，比如"I'm OK"包含的字符是I，'，m，空格，O，K这6个字符。

如果字符串内部既包含'又包含"怎么办？可以用转义字符\来标识，比如：

'I\'m \"OK\"!';

表示的字符串内容是：I'm "OK"!

转义字符\可以转义很多字符，比如\n表示换行，\t表示制表符，字符\本身也要转义，所以\\表示的字符就是\。

ASCII字符可以以\x##形式的十六进制表示，例如：

'\x41'; // 完全等同于 'A'

还可以用\u####表示一个Unicode字符：

'\u4e2d\u6587'; // 完全等同于 '中文'

多行字符串

由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 \* ... \* 表示：

`这是一个
多行
字符串`;

┌─────┐ ┌─────┬─────┬─────┬─────┐
│ ESC │ │ F1  │ F2  │ F3  │ F4  │
│     │ │     │     │     │     │
└─────┘ └─────┴─────┴─────┴─────┘
┌─────┬─────┬─────┬─────┬─────┐
│  ~  │  !  │  @  │  #  │  $  │
│  `  │  1  │  2  │  3  │  4  │
├─────┴──┬──┴──┬──┴──┬──┴──┬──┘
│        │     │     │     │
│  tab   │  Q  │  W  │  E  │
├────────┴──┬──┴──┬──┴──┬──┘
│           │     │     │
│ caps lock │  A  │  S  │
└───────────┴─────┴─────┘

模板字符串

要把多个字符串连接起来，可以用+号连接：

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

操作字符串

字符串常见的操作如下：

var s = 'Hello, world!';
s.length; // 13

要获取字符串某个指定位置的字符，使用类似Array的下标操作，索引号从0开始：

var s = 'Hello, world!';s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：

var s = 'Test';
s[0] = 'X';
alert(s); // s仍然为'Test'

JavaScript为字符串提供了一些常用方法，注意，调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串

toUpperCase

toUpperCase()把一个字符串全部变为大写：

var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'

toLowerCase

toLowerCase()把一个字符串全部变为小写：

var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower
lower; // 'hello'

indexOf

indexOf()会搜索指定字符串出现的位置：

var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 没有找到指定的子串，返回-1

substring

substring()返回指定索引区间的子串：

var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
s.substring(7); // 从索引7开始到结束，返回'world'

布尔值

布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：

true; // 这是一个true值
false; // 这是一个false值
2 > 1; // 这是一个true值
2 >= 3; // 这是一个false值

&&运算是 与运算，只有所有都为true，&&运算结果才是true：

true && true; // 这个&&语句计算结果为true
true && false; // 这个&&语句计算结果为false
false && true && false; // 这个&&语句计算结果为false

||运算是 或运算，只要其中有一个为true，||运算结果就是true：

false || false; // 这个||语句计算结果为false
true || false; // 这个||语句计算结果为true
false || true || false; // 这个||语句计算结果为true

!运算是 非运算，它是一个单目运算符，把true变成false，false变成true：

! true; // 结果为false
! false; // 结果为true
! (2 > 5); // 结果为true

布尔值经常用在条件判断中，比如：

var age = 15;
if (age >= 18) {alert('adult');
} else {alert('teenager');
}

比较运算符

当我们对Number做比较时，可以通过比较运算符得到一个布尔值：

2 > 5;   // false
5 >= 2;  // true
7 == 7;  // true

实际上，JavaScript允许对任意数据类型做比较：

false == 0;    // true
false === 0;   // false

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

NaN === NaN; // false

唯一能判断NaN的方法是通过isNaN()函数：

isNaN(NaN); // true

最后要注意浮点数的相等比较：

1 / 3 === (1 - 2 / 3); // false

null和undefined

null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。

在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示==“未定义”==。

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。

undefined仅仅在判断函数参数是否传递的情况下有用。

数组

数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例如：

[1, 2, 3.14, 'Hello', null, true];

上述数组包含6个元素。数组用[]表示，元素之间用,分隔。

另一种创建数组的方法是通过Array()函数实现：

new Array(1, 2, 3); // 创建了数组[1, 2, 3]

然而，出于代码的可读性考虑，强烈建议直接使用[]。

数组的元素可以通过索引来访问。请注意，索引的起始值为0：

var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引为0的元素，即1
arr[5]; // 返回索引为5的元素，即true
arr[6]; // 索引超出了范围，返回undefined

对象

JavaScript的对象是一组由键-值组成的无序集合，例如：

var person = {name: 'Bob',age: 20,tags: ['js', 'web', 'mobile'],city: 'Beijing',hasCar: true,zipcode: null
};

JavaScript对象的键都是字符串类型，值可以是任意数据类型。上述person对象一共定义了6个键值对，其中每个键又称为对象的属性，例如，person的name属性为'Bob'，zipcode属性为null。

要获取一个对象的属性，我们用对象变量.属性名的方式：

<script>var person = {name: 'Bob',age: 20,tags: ['js', 'web', 'mobile'],city: 'Beijing',hasCar: true,zipcode: null
};
document.write(person.name); // 'Bob'
document.write('<br>'); // 'Bob'
document.write(person.zipcode); // null
</script>

变量

变量在JavaScript中就是用一个变量名表示，变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如if、while等。申明一个变量用var语句，比如：

var a; // 申明了变量a，此时a的值为undefined
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null

变量名也可以用中文，但是，请不要给自己找麻烦。

在JavaScript中，使用等号=对变量进行赋值。可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次，

例如：

var a = 123; // a的值是整数123
a = 'ABC'; // a变为字符串

这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。

例如Java是静态语言，赋值语句如下：

int a = 123; // a是整数类型变量，类型用int申明
a = "ABC"; // 错误：不能把字符串赋给整型变量

和静态语言相比，动态语言更灵活，就是这个原因。

请不要把赋值语句的等号等同于数学的等号。

2、引用数据类型：对象

3、变量

​ 概念：一小块存储数据的内存空间

         ==语法：var  变量名  =  初始化值;==

​ typeof 运算符 ：获取变量的类型

注：null 运算后得到的是object

4、运算符

1.一元运算符：只有一个运算数的运算符                       * ++(--) 在前，先自增(自减)，再运算* ++(--) 在后，先运算，再自增(自减)* +(-)：正负号* 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换* 其他类型转number：* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）* boolean转number：true转为1，false转为02. 算数运算符+ - * / % ...3. 赋值运算符= += -+....4. 比较运算符> < >= <= == ===(全等于)* 比较方式1. 类型相同：直接比较* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。2. 类型不同：先进行类型转换，再比较* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false5. 逻辑运算符&& || !* 其他类型转boolean：1. number：0或NaN为假，其他为真2. string：除了空字符串("")，其他都是true3. null&undefined:都是false4. 对象：所有对象都为true6. 三元运算符? : 表达式var a = 3;var b = 4;var c = a > b ? 1:0;* 语法：* 表达式? 值1:值2;* 判断表达式的值，如果是true则取值1，如果是false则取值

5、流程控制语句

1. if...else...2. switch:* 在java中，switch语句可以接受的数据类型： byte int short char,枚举(1.5) ,String(1.7)* switch(变量):case 值:* 在JS中,switch语句可以接受任意的原始数据类型3. while4. do...while5. for

6、JS特殊语法：

1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用* 用： 定义的变量是局部变量* 不用：定义的变量是全局变量(不建议)

7、99乘法表

 <script>for (var i = 1; i <=9; i++) {for (var j = 1; j <=i; j++) {document.write(i + "×" +j + "=" + (i*j) + "&nbsp;&nbsp;&nbsp");}document.write('<br>');}</script>

基本对象

Function

函数(方法)对象

​ 1、创建：

1、 var fun = new Function(形式参数列表,方法体);  //不建议使用2、 function 方法名称(形式参数列表){方法体}3、 var 方法名 = function(形式参数列表){方法体}

​ 2、属性：
​ length:代表形参的个数

​ 3、特点：

  • 方法定义是，形参的类型不用写,返回值类型也不写。

  • 方法是一个对象，如果定义名称相同的方法，会覆盖

  • 在JS中，方法的调用只与方法的名称有关，和参数列表无关

  • 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

​ 4、调用：
​ 方法名称(实际参数列表);

标准对象

Date

在JavaScript中，Date对象用来表示日期和时间。

创建 Date 对象的语法：

var date=new Date()

**注释：**Date 对象会自动把当前日期和时间保存为其初始值。

要获取系统当前时间，用：

var date = new Date();
date;   // 返回当日的日期和时间。
date.getFullYear();     // 从 date 对象以四位数字返回年份。
date.getMonth();    // 从 date 对象返回月份 (0 ~ 11)。
date.getDate();     // 从 date 对象返回一个月中的某一天 (1 ~ 31)。
date.getDay();      // 从 date 对象返回一周中的某一天 (0 ~ 6)。
date.getHours();    // 返回 date 对象的小时 (0 ~ 23)。
date.getMinutes();  // 返回 date 对象的分钟 (0 ~ 59)。
date.getSeconds();  // 返回 date 对象的秒数 (0 ~ 59)。
date.getMilliseconds();  // 返回 date 对象的毫秒(0 ~ 999)。
date.getTime();     // 返回 1970 年 1 月 1 日至今的毫秒数。
date.toLocaleString()   //根据本地时间格式，把 date 对象转换为字符串。

其他Date对象的方法

注意：JavaScript的月份范围用整数表示是0~11，0表示一月，1表示二月……，所以要表示6月，我们传入的是5！

JavaScript的Date对象月份值从0开始，牢记0=1月，1=2月，2=3月，……，11=12月。

RegExp

1、正则表达式：定义字符串的组成规则

1、单个字符：[ ]如：[a]、[ab]、[a-zA-Z0-9_]特殊符号代表特殊含义的单个字符：\d : 单个数字字符 [0-9]\w : 单个单词字符 [a-zA-Z0-9_]2、量词符号?  ：表示出现０次或１次*  ：表示出现０次或多次+  ：表示出现１次或多次{m,n}：表示m<= 数量　<= nｍ如果缺省：｛，n｝：最多ｎ次ｎ如果缺省：｛m，｝：最少ｍ次3、开始结束符号^  : 开始$  : 结束

2、正则对象

1、创建* var reg = new RegExp("正则表达式");* var reg = /正则表达式/;
2、方法* test(参数)：验证指定的字符串是否符合正则定义的规范

​

预编译

预编译

JS解释器如何找到我们定义的函数和变量？

*通过 **变量对象（Variable Object, VO)*来获取。VO是一个抽象概念的“对象”，它用于存储执行上下文中的：

1. 变量；2. 声明；3. 函数参数。

函数的VO分为两个阶段——变量初始化和代码执行。在变量初始化阶段，VO按照如下顺序填充：

1. 函数参数（若未传入，初始化该参数值为undefined）

2. 函数声明（若发生命名冲突，会覆盖）

3. 变量声明（初始化变量值为undefined，若发生命名冲突，则忽略）

注意：函数表达式与变量初始化无关。

在变量初始化阶段，需要先对arguments变量进行初始化（激活对象，AO），再把函数体内的变量声明与函数声

明存储在AO内，VO(functionContext) === AO。

在函数执行的前一刻，他创造了一个空间，然后看了一眼函数，把我们马上要用到的 aa 放到了这个空间里面，这个过程就称为预编译

在函数执行之前将函数中的变量、方法收集起来，存放到一个空间中，以便函数在稍后执行时能从这个空间中

拿到函数中需要的变量和方法。而这个空间被称为执行期上下文，也叫活动对象（Activation Object），在后面都

称为 AO，他是一个对象。

总结：

预编译的的过程不是从上到下顺序执行的，并且，函数声明存放进 AO 的顺序在变量声明之后。

预编译发生在函数执行的前一刻！

预编译的过程（预编译四部曲）：1、创建 AO 对象（Activation Object）（执行期上下文）2、找形参和变量声明，将变量和形参名作为 AO 属性名，值为 undefined3、将实参值和形参统一4、找函数声明，函数名作为 AO 属性名，值为函数体

例题1：

写出所有打印结果。

第一步创建 AO 对象

第二步找形参，变量声明，值为 undefined

第三步实参和形参统一

a是形参

第四步找函数声明，值为函数体

然后就是正常执行函数了，最后结果为

注意：var b = function(){} 他不是一个函数声明，是一个变量声明 + 赋值语句

例题2：

<script>function test(a) {console.log(a);var a = 123;  console.log(a);function a() {}console.log(a);console.log(b);var b = function () {}console.log(b);function d() {}}test(1);</script>

  1、创建AO对象AO {}2、 找形参和变量声明, 将变量和形参名作为AO属性名, 值为undefinedAO {a : undefined  //形参b : undefined  //变量声明}3、将实参值和形参统一AO {a : 1b : undefined } 4、 在函数体里面找函数声明, 值赋予函数体.AO {a : function a(){}b : function () {}d : function d() {}}

全局上下文

GO global object

1、找变量

2、找函数声明

3、执行

var  a = 1;
function a(){console.log(2);
}
console.log(a);输出:1

1、创建GO变量AO {}
2、找变量AO {a:undefined;}
3、找函数声明AO {a:undefined  ---> function a(){} ;}
4、赋值实参AO {a:undefined  ---> function a(){} ---> 1;}

GO === window

<script>function test(){console.log(b);if(a){var b =2;}c=3;console.log(c);}var a;test();a=1;console.log(a);</script>
输出：undefined31

 GO={a : undefined,--->1test : function test() {}c:3}AO={b : undefined}
if语句在预编译前是不执行的，所以b是在AO的
c=3; 没有var声明，所以在GO

Global

特点：全局变量，这个Global中封装的方法不需要对象就可以直接调用。

方法名（）；
1、方法

encodeURI() : url编码decodeURI()  : url解码encodeURIComponent() ：url编码decodeURIComponent() ：url解码parseInt();   //将字符串转为数字
//逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为numberisNaN();  //判断一个值是否是NaNeval();   //将JavaScrict 字符串，并把它作为脚本代码来执行。

encodeURI() 、decodeURI()

encodeURI() 、decodeURI() 案例

URL编码
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
<script>var str = "传智播客";var encode = encodeURI(str);    //url编码document.write(encode+"<br/>");var decode =decodeURI(str);     //url解码document.write(decode);
</script>结果：
%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
传智播客

parseInt()

parseInt() 将字符串转为数字

 var str2 = "234abc";document.write(parseInt(str2));
结果:234若数字前面不是数字，即变成NaNvar str2 = "a234abc";document.write(parseInt(str2));
结果：NaN

parseInt(str2,radix)表示进制转换

var str2 = '10';
console.log(parseInt(str2,16));//将10转换为16进制的数
输出:16

parseFloat

<script>var str2 = parseFloat('3.1415926');console.log(str2);
</script>
输出:3.1415926

toFixed：保留小数点后几位（四舍五入）

<script>var str2 = parseFloat('3.1415926');console.log(str2.toFixed(3));
</script>
输出:3.142

isNaN()

isNaN(); //判断一个值是否是NaN

转换为 Number(值) --> 再判断是否为NaN --> 再输出boolean值

<script>var a = "NaN";document.write(a==NaN);document.write("<br/>");document.write(isNaN(a));
</script>结果：
false
trueconsole.log(isNaN('a'));
console.log(isNaN(null));
console.log(isNaN(undefined));
输出：true，false，true

eval()

eval(); //将JavaScrict 字符串，并把它作为脚本代码来执行。

<script>var jscode = "alert(123)";eval(jscode);
</script>结果：弹出123窗口

DOM

概念

* 概念： Document Object Model 文档对象模型* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作* W3C DOM 标准被分为 3 个不同的部分：* 核心 DOM - 针对任何结构化文档的标准模型* Document：文档对象* Element：元素对象* Attribute：属性对象* Text：文本对象* Comment:注释对象* Node：节点对象，其他5个的父对象* XML DOM - 针对 XML 文档的标准模型* HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型

* 核心DOM模型：* Document：文档对象1. 创建(获取)：在html dom模型中可以使用window对象来获取1. window.document2. document2. 方法：1. 获取Element对象：1. getElementById()   ： 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组2. 创建其他DOM对象：createAttribute(name)createComment()createElement()createTextNode()3. 属性* Element：元素对象1. 获取/创建：通过document来获取和创建2. 方法：1. removeAttribute()：删除属性2. setAttribute()：设置属性* Node：节点对象，其他5个的父对象* 特点：所有dom对象都可以被认为是一个节点* 方法：* CRUD dom树：* appendChild()：向节点的子节点列表的结尾添加新的子节点。* removeChild()  ：删除（并返回）当前节点的指定子节点。* replaceChild()：用新节点替换一个子节点。* 属性：* parentNode 返回节点的父节点。

Element:元素对象案例

Element:元素对象案例
方法案例：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
<body><a>点我试一试</a><input type="button" id="btn_set" value="设置属性"><input type="button" id="btn_remove" value="删除属性"><script>//获取btnvar btn_set = document.getElementById("btn_set");btn_set.onclick = function(){//获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");}var btn_remove = document.getElementById("btn_remove");btn_remove.onclick = function(){//删除a标签var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}</script>
</body>

Node节点对象实例

* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {border: 1px solid red;}#div1 {width: 200px;height: 200px;}#div2 {width: 100px;height: 100px;}#div3 {width: 100px;height: 100px;}</style>
</head><body><div id="div1"><div id="div2">div2</div>div1</div><a href="javascript:void(0);" id="del">删除子节点</a><a href="javascript:void(0);" id="add">增加子节点</a><script>//1、获取超链接var element = document.getElementById("del");//2、绑定单击事件element.onclick = function () {var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}//1、获取超链接var element_add = document.getElementById("add");//2、绑定单击事件element_add.onclick = function () {var div1 = document.getElementById("div1");//给div1添加子节点//创建div结点var div3 = document.createElement("div");div3.setAttribute("id", "div3");div1.appendChild(div3);}</script>
</body>
</html>

javascript:void(0);

href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端，当连续快速点击此链接时会导致浏览器巨慢甚至崩溃。而javascript:void(0) 仅仅表示一个死链接，没有任何信息。所以调用脚本的时候最好用void(0)href="#"与javascript：void（0）的区别1、href="#"方法其实也是空连接的意思，但是点击之后会自动跳转到页面的最上面，因为用了这个方法就相当于点击了一个锚记，但是这个锚记又没写ID，所以就默认跳转到页面顶部。2、#可以跳转到设置了id的目的地
3、javascript:void(0)则停留在原地，一动不动，我们称之为“死链接”

当点击超级链接时，什么都不发生

<!-- 1.当用户链接时，void(0)计算为0,用户点击不会发生任何效果 --><a href="javascript:void(0);">单击此处什么都不会发生</a><br>

执行void操作符当中的代码

<!-- 2.执行 void() 操作符中的代码 --><a href="javascript:void(alert('还真点啊你，真听话！！！哈哈哈！！！'))">点我弹出警告框!!!</a><br><a href="javascript:void(console.log('还真点啊你，真听话！！！哈哈哈！！！'))">点我输出到控制台!!!</a><br>

计算void操作符当中的算术

<button type="button">点我</button>
<script type="text/javascript">document.querySelector('button').addEventListener('click', function () {var a, b, c, d;a = void(b = 2, c = 3);console.log('a => ' + a);console.log('b => ' + b);console.log('c => ' + c);console.log('d => ' + d);});</script>

HTML DOM

* HTML DOM1. 标签体的设置和获取：innerHTML2. 使用html元素对象的属性3. 控制元素样式1. 使用元素的style属性来设置如：//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

事件监听机制

https://www.w3school.com.cn/jsref/dom_obj_event.asp

* 概念：某些组件被执行了某些操作后，触发某些代码的执行。  * 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了* 事件源：组件。如： 按钮 文本输入框...* 监听器：代码。* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件：

点击事件

     1. onclick：单击事件2. ondblclick：双击事件

焦点事件

 1. onblur：失去焦点        -----一般用于表单验证2. onfocus:元素获得焦点。

加载事件

 onload：一张页面或一幅图像完成加载。

鼠标事件

    1. onmousedown   鼠标按钮被按下。*定义方法时，定义一个形参，接受event对象*event对象的button属性可以获取鼠标按钮键被点击了2. onmouseup 鼠标按键被松开。3. onmousemove  鼠标被移动。4. onmouseover    鼠标移到某元素之上。5. onmouseout 鼠标从某元素移开。

键盘事件

    1. onkeydown 某个键盘按键被按下。  2. onkeyup      某个键盘按键被松开。3. onkeypress 某个键盘按键被按下并松开。

选择和改变

    1. onchange  域的内容被改变。2. onselect 文本被选中。

表单事件

1. onsubmit  确认按钮被点击。* 可以阻止表单的提交* 方法返回false则表单被阻止提交
2. onreset  重置按钮被点击。

Event对象

Event对象代表事件的状态，比如事件在其中发送的元素，键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

满足案例要求

  • 功能：控制html文档的内容

  • 获取页面标签(元素)对象：Element

  • document.getElementById(“id值”):通过元素的id获取元素对象

  • 操作Element对象：

    1. 修改属性值：

    2. 明确获取的对象是哪一个？

    3. 查看API文档，找其中有哪些属性可以设置

    4. 修改标签体内容：

      属性：innerHTML

    5. 获取元素对象

    6. 使用innerHTML属性修改标签体内容

事件简单学习

  • 功能：某些组件被执行了某些操作后，触发某些代码的执行。

  • 如何绑定事件

    1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码

      1. 事件：onclick ---- 单击事件

    2. 通过js获取元素对象，指定事件属性，设置一个函数

<body><img id="light" src="img/off.gif"  onclick="fun();"><img id="light2" src="img/off.gif"><script>function fun(){alert('我被点了');alert('我又被点了');}function fun2(){alert('咋老点我？');}//1.获取light2对象var light2 = document.getElementById("light2");//2.绑定事件light2.onclick = fun2;</script>
</body>

BOM

概念

​ Browser Object Model 浏览器对象模型

  • 将浏览器的各个组成部分封装成对象。

组成

  • Window：窗口对象
  • Navigator：浏览器对象
  • Screen：显示器屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

Window：窗口对象

方法

1. 与弹出框有关的方法：alert()  显示带有一段消息和一个确认按钮的警告框。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。* 如果用户点击确定按钮，则方法返回true* 如果用户点击取消按钮，则方法返回falseprompt()  显示可提示用户输入的对话框。* 返回值：获取用户输入的值

<script>var flag = confirm("您确定要退出吗？");if(flag){alert("欢迎再次光临！");}else{alert("手别抖");}
</script>

<script>var result = prompt("请输入用户名：");alert(result);
</script>

与打开关闭有关的方法

    close()  关闭浏览器窗口。* 谁调用我 ，我关谁open()    打开一个新的浏览器窗口* 返回新的Window对象

<body><input id="openBtn" type="button" value="打开一个新窗口"/><input id="closeBtn" type="button" value="关闭窗口"/><script>var openBtn = document.getElementById('openBtn');var newWindow;openBtn.onclick = function() {newWindow = open("https://www.baidu.com");}var closeBtn = document.getElementById('closeBtn');closeBtn.onclick = function() {newWindow.close();}</script>
</body>

与定时器有关的方式

     setTimeout()    在指定的毫秒数后调用函数或计算表达式。* 参数：1. js代码或者方法对象2. 毫秒值* 返回值：唯一标识，用于取消定时器clearTimeout()    取消由 setTimeout() 方法设置的 timeout。setInterval()    按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval()  取消由 setInterval() 设置的 timeout。

循环定时器

<script>function fun(){alert('Boom');}setInterval(fun,2000);
</script>

轮播图

<body><img src="img/banner_1.jpg" id="img" width="100%"><script>var number = 1;function fun() {number++;if (number > 3) {number = 1;}var img = document.getElementById("img");img.src = "img/banner_" + number + ".jpg";}setInterval(fun, 3000);</script>
</body>

属性

    1. 获取其他BOM对象：historylocationNavigatorScreen:2. 获取DOM对象document

特点

   * Window对象不需要创建可以直接使用 window使用。 window.方法名();* window引用可以省略。  方法名();

Location

地址栏对象

1. 创建(获取)：1. window.location2. location2. 方法：* reload()    重新加载当前文档。刷新3. 属性* href  设置或返回完整的 URL。

reload() 例子：

<body><button id="btn" type="button" value="刷新">刷新</button><script>var btn = document.getElementById('btn');btn.onclick = function () {location.reload();}</script>
</body>

href 例子：

<body><button id="goItcast" type="button" value="菜鸟教程">菜鸟教程</button><script>         var btn1 = document.getElementById('goItcast');btn1.onclick = function () {location.href ="https://www.runoob.com/";}</script>
</body>

自动跳转页面

     <style>p{text-align: center;}span{color:red;}</style>
<body><p><span id="time">5</span>秒后，页面自动跳转</p><script>var second = 5;var time = document.getElementById("time");function showtime() {second --;//判断时间如果<=0，则跳转页面if (second<=0) {location.href ="https://www.runoob.com/";}time.innerHTML = second +"";}//设置循环定时器，一秒执行一次该方法setInterval(showtime,1000);</script>
</body>

HTML DOM

https://www.w3school.com.cn/htmldom/dom_intro.asp //W3教程

1、标签体的设置和获取：innerHTML

2、使用html元素对象的属性

3、控制元素样式

​ 控制样式1：使用元素的style属性来设置

<body><div id="div1">div</div><script>var div1  = document.getElementById('div1');div1.onclick = function(){//修改样式1div1.style.border = '1px solid red';    div1.style.fontSize = '50px';    div1.style.width = '200px';    }</script>
</body>

​ 控制样式2：提前定义好选择器的样式，通过元素的className属性来设置其class属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d2{border: 1px solid blue;width:100px;}</style>
</head>
<body><div id="div2">div2</div><script>var div2 = document.getElementById('div2');div2.onclick = function(){div2.className="d2";}</script>
</body>
</html>

事件委托（事件代理）

概念

事件代理（Event Delegation）又称之为事件委托。是Javascript中常用绑定事件的常用技巧。

“事件代理” 既是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。

事件代理的原理是DOM元素的事件冒泡。

通俗例子：
比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个宿舍同学；在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

事件委托在Javascript中

比如要给一个dom节点添加一个点击事件，但是现在事件不加在该dom节点本身，而是加在它的父节点身上，利用它父节点触发事件，给该dom节点实现事件效果

实现原理

事件委托是利用事件的冒泡原理来实现的

事件冒泡

事件从最深的节点开始，然后逐步向上传播事件

一个事件触发后，会在子元素和父元素之间传播（propagation）

事件传播分成三个阶段：

  • 捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；

  • 目标阶段：在目标节点上触发，称为“目标阶段”

  • 冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

冒泡例子：
页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，让里面的ul，li，a实现事件效果，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

利用事件委托的作用

  • 节省资源，提高效率，在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间 如果使用事件委托,则只会与dom节点进行一次交互,有效的减少了和dom交互次数
  • 对于新创建的dom节点，也可以拥有事件
  • 可以大量节省内存占用，减少事件注册
  • 可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

使用场景

  • 重复的给dom节点添加事件
  • 给dom树中尚未创建的元素(动态创建)添加事件

使用js添加事件委托

例子1：
<body>
<ul id="ul"><li>周一去游玩</li><li>周二去上班</li><li>周三去休息</li><li>周四去吃饭</li>
</ul><!--利用事件委托给每一个li标签添加点击事件-->
<script>var ul = document.querySelector("#ul");ul.onclick = function(){console.log("快醒醒,每天都要上班的!")}
</script>　　
</body>

例子1中利用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发。

例子2：事件代码不一样
<body>
<ul id="ul"><li>周一去游玩</li><li class="work-day">周二去上班</li><li>周三去休息</li><li>周四去吃饭</li></ul><script>var ul = document.querySelector("#ul");ul.onclick = function(e) {var e = event || window.event;var target = e.srcElement || e.target;if(target.className == "work-day"){console.log("good boy")}else{console.log("快醒醒,每天都要上班的!")}}
</script>
</body>

例子2中就会针对class属性等于"work-day"的li元素做出不同的事件，其他事件则为默认事件

jQuery的事件委托

$(function () {$('#ul').on('click', 'li', function () {if ($(this).hasClass('work-day')) {alert("good boy");} else {alert("快醒醒,每天都要上班的!");}})});

事件委托总结

  • 使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。
  • 事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。
  • 如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。
  • 合理使用事件委托可以帮助我们节省资源，提高效率
  • 也可以给dom中尚未创建的节点添加事件
  • 适合用事件委托的事件：
    • click
    • mousedown
    • mouseup
    • keydown
    • keyup
    • keypress
  • 不适合用事件委托的事件：
    • mousemove(每次都要计算它的位置，非常不好把控)
    • focus，blur等(本身就没用冒泡的特性，自然就不能用事件委托了)

XML

概念

Extenside Markup Language 可扩展标记语言

  • 可扩展：标签都是自定义的
  • 功能：存储数据
    1、配置文件
    2、在网络中传输
  • xml与html的区别
    1、xml标签都是自定义的，html标签是预定义的
    2、xml的语法严格，html语法松散
    3、xml是存储数据的，html是展示数据的
  • w3c ：万维网联盟

语法

  • 基本语法

    1、xml文档后的后缀名 ： .xml

    2、xml第一行必须定义为文档声明

    3、xml文档中有且仅有一个跟标签

    4、属性值必须使用引号（单双都可）引起来

    5、标签必须正确关闭

    6、xml标签名称区分大小写

快速入门

<?xml version='1.0' ?><users><user id ='1'><name>zhangsan</name><age>23</age></user>    <user id ='2'><name>lisa</name><age>25</age></user>
</users>

JQuery

概念

一个JavaScript框架。简化JS开发

  • jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。

  • JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

  • jquery-xxx.js 与 jquery-xxx.min.js区别：

    1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
    2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

JQ 和 JS 转换

JQuery对象和JS对象区别与转换

  1. JQuery对象在操作时，更加方便。

  2. JQuery对象和js对象方法不通用的.

  3. 两者相互转换

    * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)

  4. 例子

    <body><div id="div1">div1...</div><div id="div2">div2...</div><script>//通过jsvar divs=document.getElementsByTagName("div");alert(divs.length);for (var i=0; i<divs.length; i++){$(divs[i]).html("ccc"); //jq --> js}//通过jqvar $divs = $("div");alert($divs.length);$divs[0].innerHTML ="ddd";  //js --> jq$divs.get(1).innerHTML ="eee";</script>
</body>

ECMAScript

关键字

ECMAScript关键字

ECMA-262 定义了 ECMAScript 支持的一套关键字（keyword）。

这些关键字标识了 ECMAScript 语句的开头和/或结尾。根据规定，关键字是保留的，不能用作变量名或函数名。

下面是 ECMAScript 关键字的完整列表：

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

**注意：**如果把关键字用作变量名或函数名，可能得到诸如 “Identifier Expected”（应该有标识符、期望标识符）这样的错误消息。

  • ECMAScript 变量
  • ECMAScript 保留字

基本语法

NaN （not a number）->数字类型infinity （无穷大） -> 数字类型  （1/0）->无穷小
-infinity （无穷小） -> 数字类型（-1/0）->无穷小

undefined 、NaN 、null 、“ ”、0、false 是假，其余为真

object对象

属性名/键名: 属性值/键值

// object 对象var person = {name: '小赵',age: 18,height: 160,weight: 40,job: 'student'}person.name = '小黄';console.log(person);输出：{name: "小黄", age: 18, height: 160, weight: 40, job: "student"}

typeof

console.log(typeof (num));
输出：undefinedconsole.log(typeof (typeof (num)));
输出：string

总结：typeof 后再有一个typeof 那么它的类型一定是 String。

arguments

JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：

function foo(x) {console.log('x = ' + x); // 10for (var i=0; i<arguments.length; i++) {console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30}
}
foo(10, 20, 30);

利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：

function abs() {if (arguments.length === 0) {return 0;}var x = arguments[0];return x >= 0 ? x : -x;
}abs(); // 0
abs(10); // 10
abs(-9); // 9

隐式类型转换

<script> var a = '123';  //Number(a)a++;console.log(a);
</script>
输出：:124

<script>var str2 = 'a' + 1;   //String(1)console.log(str2);</script>
输出：a1

<script>var str2 = '7' * 2;   // * / - %  -->  String --> Numberconsole.log(str2);
</script>
输出：14

<script>var a = undefined == null;console.log(a);
</script>
输出：true
undefined 和 null 既不大于0 也不小于0 也不等于0
但是他俩==为true
NaN 不等于 NaN

实参求和

<script>function sum() {var a = 0;for (var i = 0; i < arguments.length; i++) {a += arguments[i];}console.log(a);}sum(1, 2, 3, 4, 5); //实参
</script>输出:15

<script>function test(a, b) {b = 3;console.log(arguments[1]);}test(1);
</script>
输出：undefined

在实参里传了值的，我们可以在函数内部去修改参数值，

但是在实参里并没有传入值，而你给形参赋值了，是没有用的

作用域

对象 —>有些属性是我们无法访问的，JS引擎内部固有的隐式属性

[[scope]]

1、函数创建时，生成的一个JS内部的隐式属性2、函数存储作用域链的容器，作用域链

AO/GO

AO：函数的执行期上下文

GO：全局的执行期上下文

函数执行完成以后，AO是要销毁的

AO是一个即时的存储容器

只要函数被定义时，就生成作用域和相应的作用域链 GO只要函数被执行那一刻，就生成AO

function a(){function b(){function c(){}c();}b();
}
a();

闭包

闭包就是能够读取其他函数内部变量的函数

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成**“定义在一个函数内部的函数”**。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

当内部函数被返回到外部并保存时，一定会产生闭包，闭包会产生原来的作用域链不释放，过渡的闭包可能会导致内存泄漏或加载过慢

结论：闭包找到的是同一地址中父级函数中对应变量最终的值

学习闭包

​ test1被执行的时候，test2被定义，所以test2的作用域以及作用域链和test1执行时的作用域以及作用域链是一致的

当执行return test2；时

（test2被抛到外面去，变成了全局。test2里有test1的AO，所以test1的AO不能被销毁，反而被保留。）

所以 var test3 = test1()；的test1()是test2。

(test1()函数被return test2；的test2赋值，test1();存的就是test2)

当执行test3();时

当test3执行结束时

闭包例子

闭包例子：
var i = 0;                             function outerFn(){
function outerFn(){                         var i = 0; function innnerFn(){                        function innnerFn(){i++;                                       i++;console.log(i);                           console.log(i);}                                            }return innnerFn;                           return innnerFn;
}                                           }
var inner1 = outerFn();                      var inner1 = outerFn();
var inner2 = outerFn();                      var inner2 = outerFn();
inner1();                                 inner1();
inner2();                                 inner2();
inner1();                                 inner1();
inner2();                                 inner2();输出：1 2 3 4                              输出：1 1 2 2

立即执行函数

立即执行函数 - 初始化函数

（IIFE - immediately-invoked function expression）

一定是表达式才能被执行符号执行

1、
(function(){}()); //w3c建议
----------------------
2、
(function test (){})();
======================
function test(){}
test();
3、
var test = function(){console.log();
}();

函数声明变成表达式的方法 + - ！ || &&

1 && function test(){console.log(1);
}();

例子：点击1 ~ 5然后返回 0~4

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var oli = document.querySelectorAll('li');for (var i = 0; i < oli.length; i++) {oli[i].onclick = function () {console.log(i); // 5}}</script>
</body>
输出：点击的都是5
//形成了闭包
--------------------------------------------------------------------------------
//用立即执行函数解决
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var oli = document.querySelectorAll('li');for (var i = 0; i < oli.length; i++) {(function (j) {  //立即执行函数oli[j].onclick = function () {console.log(j);}})(i);}</script>
</body>
输出：点击1 ~ 5然后返回 0~4

对象

对象字面量，对象直接量

例子：

删除对象可以用delete +键值.对象；

删除函数要用delete + 键值.函数名；（不用加括号）

<script>var teacher = {name: '张三',age: 18,sex: 'male',height: 176,teach: function () {console.log('I am teaching JavaScript');},eat: function () {console.log('I am having dinner');}}//对象的增加teacher.address = "云浮";teacher.drink = function () {console.log('I am drinking beer');}//删除对象delete teacher.address;//删除函数表达式delete teacher.drink;//改正teacher.name = "小赵";//查找console.log(teacher.name);console.log(teacher);
</script>

构造函数

系统自带的构造函数Object

<script>var obj = new Object();obj.name = '小赵';obj.sex = 'female';console.log(obj);
</script>

自定义构造函数

1、

<script>function Teacher() {this.name = "小赵";this.sex = "male";this.smoke = function () {console.log("smoking");}}//只有在对象实例化之后，这个this才存在//对象实例化var teacher = new Teacher();
</script>

2、

<script>function Teacher(name,sex) {this.name = name;this.sex = sex;this.smoke = function () {console.log("smoking");}}var teacher1 = new Teacher('小赵','女');var teacher2 = new Teacher('小黄','男');console.log(teacher1);console.log(teacher1);
</script>

3、常用

<script>function Teacher(opt) {this.name = opt.name;this.sex = opt.sex;this.smoke = function () {console.log("smoking");}}var teacher1 = new Teacher({name:'小赵',sex:'female'});var teacher2 = new Teacher({name:'小黄',sex:'male'});console.log(teacher1);console.log(teacher1);
</script>

包装类

原始值没有自己的方法和属性

var a =123; //原始值
a.len = 3;
//new Number(123).len =3;
console.log(a.len);输出：undefined
原因：没有地方保存，然后被删除了
--------------------------------------------------------------------------------var a = new Number(123); //原始值
a.len = 3;
console.log(a.len);输出：3
原因：因为a已经是对象了

var str ='abc';
console.log(str.length);
===
console.log(new String(str).length);

数组截断法

var arr = [1,2,3,4,5];
arr.length = 3;
console.log(arr);输出：[1,2,3]

原型

JavaScript原型

原型和原型链

yuanxing

prototype

原型的英文应该叫做 prototype，任何一个对象都有原型，我们可以通过非标准属性 __proto__ 来访问一个对象的原型：原型是属于实例化对象的，而不是构造函数的

// 纯对象的原型默认是个空对象
console.log({}.__proto__); // => {}function Student(name, grade) {this.name = name;this.grade = grade;
}const stu = new Student('xiaoMing', 6);
// Student 类型实例的原型，默认也是 一个空对象
console.log(stu.__proto__); // => Student {}

在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。

function Person(age) {this.age = age
}
Person.prototype.name = 'kavin'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //kavin
console.log(person2.name)  //kavin

上述例子中，函数的prototype指向了一个对象，而这个对象正是调用构造函数时创建的实例的原型，

也就是person1和person2的原型。

原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我

们所说的原型，每一个对象都会从原型中“继承”属性：意思是所有被该构造函数构造出的对象都可以继承原型上的属性和方法。

  • 一般情况下需要把参数写死的，就首选prototype，调用的时候就继承即可
//这个prototype是定义构造函数构造出的每个对象的公共祖先
function Handphone(color, brand) {this.color = color;this.brand = brand;this.screen = '18:9';this.system = 'Android';}Handphone.prototype.rom = '64G';Handphone.prototype.ram = '6G';Handphone.prototype.screen = '16:9';var hp1 = new Handphone('red', '小米');var hp2 = new Handphone('black', 'HUAWEI');console.log(hp1.rom);console.log(hp2.ram);console.log(hp1.screen);
输出:64G6G18:9   // 因为构造函数中已经有了screen='18:9'，所以并不会使用原型的screen。// 自己this有的属性，就不会去原型上去找

所以一般情况下是这样写的

HTML+CSS+Bootstrap+ECMAScript+DOM相关推荐

  1. 城市能源管理系统、实时监测、运行监测、负荷效应、预警管理、设备管理、设备入库、设备安装、设备检修、设备报废、设备查询、控制策略、系统集成、HTML/CSS/Bootstrap/jQuery/JS

    源码类别: 后台模板 文件大小: 3074 KB 城市能源管理系统响应式HTML模板 前端技术: HTML/CSS/Bootstrap/jQuery/JS 适用范围:PC端,前端页面展示 文件类型: ...

  2. GET /static/css/bootstrap.min.js.map HTTP/1.1“ 404GET /static/css/bootstrap.min.css.map HTTP/1.1“404

    目录 1.看大伙的办法大部分偶数让我进行以下操作 2.我的最后的解决办法 2.1 bootstrap.min.js.map 2.2 bootstrap.min.css.map 最后: GET /sta ...

  3. DevTools 无法加载源映射： 无法加载http://localhost:8080/css/bootstrap.css.map 的内容:HTTP 错误: 状态代码 404，net::ERR_HTT

    DevTools 无法加载源映射: 无法加载http://localhost:8080/css/bootstrap.css.map 的内容:HTTP 错误: 状态代码 404,net::ERR_HTT ...

  4. vue报错/ style-loader: Adds some css to the DOM by adding a style tag

    1.1.1.   vue-cli搭建的项目引入.styl/css文件报错 http://blog.csdn.net/z852064121/article/details/72660327 / styl ...

  5. 初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap

    自己也刚刚开始接触框架,在学习了bootstrap框架过后,练习写了一个简单的主界面,主界面的图如下: 这个页面主要用的bootstrap的栅格系统进行整体布局,网页效果简约大方,最重要的是比较简单吧 ...

  6. 个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)

    HTML期末大作业课程设计游戏主题html5网页~响应式游戏网站(HTML+CSS+Bootstrap) ~个人设计web前端大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...

  7. css – Bootstrap 4中的class =“mb-0”是什么意思？

    <p class="mb-0">Lorem ipsum</p> 问:什么是mb-0? 最佳答案: Bootstrap具有广泛的响应边距和填充实用程序类.它们 ...

  8. html/css/Bootstrap/Font Awesome

    目录 基础概念 属性:每个标签有诸多属性,可以直接写在标签内部,用于指定内容样式/功能 样式属性 响应式设计Bootstrap 图标库Font Awesome 基础概念 标签:使用标签指定功能,标签下 ...

  9. DevTools 无法加载源映射： 无法加载http://localhost:8081/statics/css/bootstrap.min.css.map 的内容:HTTP 错误: 状态代码 404，

    DevTools 无法加载源映射: 无法加载http://localhost:8081/statics/css/bootstrap.min.css.map 的内容:HTTP 错误: 状态代码 404, ...

  10. django运行后浏览器警告：DevTools 无法加载 SourceMap： 无法加载 http://127.0.0.1:800/skins/css/bootstrap.min.css.map:

    使用uwsgi启动Django项目后,出现了报错:DevTools 无法加载 SourceMap: 无法加载 http://127.0.0.1:800/skins/css/bootstrap.min. ...

最新文章

  1. DOM相关内容(课程来源:B站 后盾人)
  2. pe卸载win10更新补丁_Win10更新翻车！CPU使用率飙升，直接损坏SSD，勿升级
  3. Top-1 Error Top-5 Error
  4. python交互式shell_交互式 shell 玩转 Python
  5. CMDB服务器管理系统【s5day90】：创建资产更新服务器硬盘信息
  6. Wtm携手LayUI -- .netcore 开源生态我们是认真的！
  7. java中junit用法,JUnit基本用法
  8. 一个简单混合协议通讯列子，物联网和互联网通讯。
  9. BZOJ2217 [Poi2011]Lollipop 【贪心】
  10. java settings文件夹_JAVA工具例大全--Setting文件读取配置参数
  11. python能处理图片吗_python的Image和skimage处理图片
  12. 悦动圈跑步 随意提交步数 重大BUG漏洞 希望官方早些修复
  13. Matlab R2017b 自动驾驶工具箱学习笔记（3）_Tutorials_Forward Collision Warning Using Sensor Fusion
  14. UML学习_1_模型
  15. layui时间范围控件限制时间
  16. 程序员一般通过什么平台接单
  17. Ext JS框架入门
  18. Flutter淘宝App之首页聚划算倒计时的实现
  19. 【数据分析师_02_SQL+MySQL】022_MySQL的全文检索（MyISAM，MATCH AGAINST）
  20. 积水在线监测设备解决车辆误入水淹隧道问题

热门文章

  1. 汉字字符集编码查询_刨根究底字符编码之十——Unicode字符集的字符编码方式...
  2. 嵌入式培训经验分享——初识
  3. 免费的在线版photoshop网站推荐
  4. andriod自带模拟器使用代理
  5. springboot+shrio简易登录登出和用户权限认证。
  6. SpringSecurity实战(一)-认证鉴权流程
  7. Oracle初学者入门指南-什么是DSI?
  8. 埃默里大学计算机值得读吗,埃默里大学计算机科学-生物统计学硕士研究生怎么样？好不好...
  9. 南京毕业生租房补贴发票开具地点一览表
  10. Asio源码分析（2）：Asio用到的C++技巧和优化