admin管理员组

文章数量:1022649

web前端阶段笔记

Java wed

wed概念概述：

  1. Javawed：
  • 使用Java语言开发基于互联网的项目

  1. 软件的架构：

    1. C/S：客户端/服务器端
    2. B/S：浏览器/服务器端

  2. B/S架构详解

    • 资源分类

      1. 静态资源

        • 使用静态网页开发技术发布的资源。

        • 特点：

          1. 所有用户访问，得到的效果是相同的

          ​ 如：文本，图片，HTML，CSS，JavaScript

          1. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

      2. 动态资源

        • 使用动态网页开发技术发布的资源

        • 特点：

          1. 所有用户访问，得到的效果可能不同

            如：jsp/servlet，php，asp…

          2. 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

HTML

一.语法规范

①.基本语法

  1. HTML标签是由尖括号包围的关键词，例如
  2. HTML标签通常是成对存在的，例如，和，称为双标签，第一个称为开始标签，第二个称为结束标签。
  3. 有些特殊的标签必须是单个标签，例如
    称为单标签。

②.标签关系

双标签关系可以分为两类：包含关系和并列关系

栗子：

包含关系

<head><title></title>
</head>

并列关系

<head></head>
<body></body>

二.HTML基本结构标签

​ 每个网页都会有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

  1. 第一个HTML

    标签名定义说明
    HTML标签页面中最大的标签，称为 根标签
    文档的头部注意在head标签中我们必须要设置的标签是title
    文档的标题设置网页的标题
    文档的主体元素包含文档的所有内容，页面内容基本都是放到body中

    栗子：

    <html>
<head>
<title>第一个网页</title>
</head>
<body>Holly word</body>
</html>

三.开发工具

Visual Studio Code

推荐插件

插件作用
Chinese (Simplified) Language
Pack for VS Code		中文简体语言包
Open in Browser右击选择浏览器打开HTML文件
JS-CSS-HTML Formatter每次保存，都会自动格式化js css 和 html 代码
Auto Rename Tag自动重命名配对的HTML/XML标签
CSS Peek追踪至样式

IDEA

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html>

1.<!DOCTYPE> 
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>的意思是：当前页面采取的是HTML5版本来显示网页。
注意：
1.1<!DOCTYPE> 声明位于文档中的最前面的位置，位于<html>之前。
1.2<!DOCTYPE> 不是一个HTML标签，它就是文档类型声明标签2.lang语言种类
用来定义当前文档显示的语言
2.1 en定义语言为英语      
2.2 zh-CN定义语言为中文3.字符集
字符集是多个字符的集合。以便计算机能够识别存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset=" UTF-8" />
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符.

四.HTML常用标签

①.标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

②.常用标签
Ⅰ.标题标签：<h1>-<h6>(重要)
<h1>我是一级标题</h2>
单词head的缩写，译为头部，标题
标签语义：作为标题使用，并且依据重要性递减
特点：加了标题的文字会加粗，字号也会依次变小，一个标题独占一行
Ⅱ.段落和换行标签(重要)
在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点： 文本在一个段落中会根据浏览器窗口的大小自动换行，段落和段落之间保有空隙

<br />
单词break的缩写,意为打断换行。
标签语义：强制换行
特点：<br/>是个单标签，<br/>标签只是简单的开始新的一行，跟段落不同，段落之间会插入一些的垂直的间距。

案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<h1>水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0</h1>
<h5>数据统计：水花兄弟合砍61分</h5>
<p>库里22投11中，三分14投4中，罚求1 1罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次。超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>
<p>汤普森22投8中，三分8投4中得到24分3篮板2助攻德拉蒙德 格林得到16分10篮板7助攻5盖帽，凯文 鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
<h5>兄弟对决升级：小库里给哥哥造成压力</h5>
<p>车里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
<p>但在西决第2场中，小库里攻防两端都打出杰出的表现。全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
<p>作者：pink老师<br />2019-8-8</p>
</body>
</html>
Ⅲ.文本格式化标签
在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
语义标签
加粗或者
倾斜或者
删除线或者
下划线或者
<!--推荐使用-->
<strong>加粗</strong>
<em>倾斜</em>
<dei>删除线</dei>
<ins>下划线</ins>
Ⅳ.盒子<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容
<div>这是盒子</div>
<span>这是盒子</span>
div是division的缩写，表示分割、分区。span 意为跨度、跨距。
特点：1.<div>标签用来布局，但是现在一行只能放一个<div>.大盒子2.<span>标签用来布局，一行上可以多个<span>.小盒子
Ⅴ.图像标签和路径
  1. 图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像
<img src="图像URL" />
单词 image 的缩写意为图像
src是<img>标签的必须属性，用于指定图像文件的路径
属性属性值说明
srcURL图像的路径
alt文本图像无法显示时的替换文本
title文本提示文本，鼠标悬停时显示
width像素设置图像宽度
height像素设置图像高度
border像素设置图像的边框粗细

注意：

​ ①.图像标签可以拥有多个属性值，必须写在标签名的后面

​ ②.属性之间不分先后

​ ③.属性采取键值对的格式，即key="value"的格式,属性=“属性值”

  1. 路径：

    1. 绝对路径

      • 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

        例如，“D:web\img\logo.gif"或完整的网络地址".gif”。

    2. 相对路径

      • 以引用文件所在位置为参考基础，而建立出的路径，简单来说，图片相对于HTML页面中的位置
Ⅵ.超链接标签

  1. 链接的语法格式

    <a href="跳跃目标" target="目标窗口的弹出方式">文本或图像</a>
单词 anchor 的缩写意为：锚
href ： 用于指定连接目标的url地址，(必须属性)当为标签应用href属性时，他就具有了超链接功能。
target ：用于指定链接页面的打开方式，其中_self为默认值,_blank为在新窗口中打开方式

  2. 链接分类

    • 外部链接：外部网站的链接

      <a href="">百度</a>

    • 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可

      <a href="index.html">首页</a>

    • 空链接：如果当时没有链接目标时，使用

      <a href="#">空链接</a>

    • 下载链接：如果href里面地址是一个文件或者压缩包，也会下载文件

      <a href="文件.zip">文件</a>

    • 网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。

      <a href=""><img src="img.jpg"></a>

    • 锚点链接：可以快速定位到页面中的某个位置

      在链接文本的href属性中，设置属性值为#名字的形式
<a href="#tow">第二季</a>
找到目标位置标签，里面添加一个id属性=刚才名字
<h3 id="tow">第二季介绍</h3>
Ⅶ.注释和特殊字符

  1. 注释

    HTML中的注释

    <!-- 注释语句 -->    快捷键：Ctrl+/

  2. 特殊字符

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jqNvtJ9e-1603158857817)(C:\Users\谜语菌\Documents\img\HTML.png)]

Ⅷ.表格标签

  1. 表格的主要作用：用来显示，展示数据

  2. 基本语法

    <table><tr><td>单元格文字</td></tr>
</table>
1.<table></table>用于定义表格的标签。
2.<tr></tr>用于定义表格中的行
3.<td></td>用于定义表格中的单元格
4.字母td指表格中的数据(table data)，即数据单元格的内容

  3. 表头单元格标签

    表头单元格里面的文本内容加粗居中显示

    标签表示HTML表格的表头部分
Ⅸ.列表标签

表格是用来显示数据的，那么列表就是用来布局的

列表的特点：整齐，整洁，有序，作为布局自由方便

列表的分类：无序列表，有序列表，自定义列表

  1. 无序列表

    <ul>标签表示HTML中的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义

    语法：
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ul>
注意：
1.无序列表的哥哥列表项之间没有顺序之分，是并列的
2.<ul></ul>中只能嵌套<li></li>
3.<li></li>相当于一个容器，可以容纳所有元素
4.无序列表会带有自己的样式属性，但在实际使用时，会使用css来设置

    知识点：去掉 li 前面的项目符号

    list-style: none;

  2. 有序列表

    其各个列表项会按照一定的顺序排列定义

    <ol>用于定义有序列表，列表排序以数字显示，并且使用<li>定义列表项

    语法：
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ol>
注意：
1.<ol></ol>只能嵌套<li></li>
2.<li></li>相当一个容器，可以容纳所有元素
3.有序列表带有自己的样式属性，实际开发中，使用css设置

  3. 自定义列表

    常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

    <dl>用于定义自定义列表

    <dt>定义项目名词

    <dd>描述项目名词

    语法：
<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词2解释2</dd>
</dl>
注意：
1.<dl></dl>里面只能包含<dt></dt>和<dd></dd>
2.<dt></dt>和<dd></dd>的个数没有限制，经常是一个<dt>对应多个<dd>

  4. 总结

    标签名定义说明
      		无序列表只能包含
      • 没有顺序 使用较多。
      • 里面可以包含任何标签
        		有序列表只能包含
        • 有顺序 使用相对较少。
        • 里面可以包含任何标签
        		自定义列表只能包含
        。
        可以包含任何标签
      Ⅹ.表单标签

      1. 为什么需要表单：为了收集用户信息

      2. 表单的组成：表单域，表单控件，提示信息

        • 表单域

          表单域是一个包含表单元素的区域
<form>标签定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器.
语法：
<form action="url地址" method="提交方式" name="表单域名称">各种表单控件
</form>
          属性属性值作用
          actionurl地址用于指定处理数据的程序
          methodget/post用于设置表单数据的提交方式
          name名称指定表单名称，以区分同个页面多个表单

        • 表单控件 input，select，textarea

          1. 表单元素

            input是输入的意思，而在表单元素中用于收集用户信息，在标签中包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(文本，字段，复选框，按钮等)

            语法：
<input type="属性值" />
<input />为单标签
type属性设置不同用来指定不同的控件类型
            属性属性值描述
            type…设置不同用来指定不同的控件类型
            name由用户自定义定义input元素的名称
            value由用户自定义规定input元素的值
            placeholder提示信息显示提示信息
            checkedchecked默认选中的按钮或复选框
            maxlength正整数最大字段长度

        1.name 和value是每个表单元素都有的属性值主要给后台人员使用.
        2.name 表单元素的名字，要求单选按钮和复选框要有相同的name值

         - type属性值| 属性值   | 描述                                                 || -------- | ---------------------------------------------------- || button   | 定义可点击按钮(多数情况下，通过JS启动脚本)           || checkbox | 定义复选框   name属性相同                            || file     | 文件域,文件上传使用                                  || hidden   | 定义隐藏的输入字段                                   || image    | 定义图像形式的提交按钮                               || password | 定义密码字段                                         || radio    | 定义单选按钮   name属性相同才能实现多选1             || reset    | 定义重置按钮，会清除表单所有数据                     || submit   | 定义提交按钮，会把表单数据发送到服务器               || text     | 定义单行输入字段，用户在其中输入文本，默认长度20字符 |

         - <label>标签：为input元素，定义标注(标签)用于绑定一个表单元素，当点击<label>标签内文本时,浏览器就会自动将光标，转移到对应的表单元素上，增加用户体验```html语法：<label for="sex">男</label><input type="radio" name="sex" id="sex" />
核心：<label></label>标签的for元素应当与<input>标签id属性相同。

        2. select下拉表单元素在页面中，有多个选项让用户选择，并且需要节约空间时，可以使用<select>标签定义下拉列表```html语法：<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select>1.<select>中至少包含-对<option>。
2.在<option>中定义selected =”selected"时，当前项即为默认选中项。

      3. textarea文本域元素

        当用户输入内容较多的情况下使用

        <textarea>标签用于定义多行文本输入的控件

        语法：
<textarea cols="每行中的字符数" rows="显示的行数">文本内容
</textarea>

      CSS

      一.CSS含义

      1. HTML的局限性:不美观

      2. CSS是层叠样式表（Cascading Style Sheets）的简称.
        有时我们也会称之为CSS样式表或级联样式表。
        CSS是也是一种标记语言

        CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式边距等）以及版面的布局和外观显示样式。
        CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

      3. 1.HTML 主要做结构，显示元素内容.
        2.CSS 美化HTML，布局网页.
        3.CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS 1相分离。

      二.CSS简介

      1. css语法规范

        css规则由两个主要部分构成：选择器以及一条或多条声明
选择器 { 样式 }
h1 {color:red;font-size:25px;
}
·选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
·属性和属性值以“键值对”的形式出现
·属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
·属性和属性值之间用英文":"分开

      2. css代码风格

        以下代码书写风格不是强制规范，而是符合实际开发书写方式.

        • 样式格式书写

          • 紧凑格式

            h3 { color:deeppink;font-size: 20px; }

          • 展开格式（推荐）

            h3 {color:pink;font-size: 20px;
}

        • 空格规范

          h3 {color: pink;
}
属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

      3. css属性书写顺序：

        • 布局定位属性:display / position / float / clear / visibility /
        • 自身属性:width / height /margin / padding / border / background
        • 文本属性:color / font / text-decoration / text-align / vertcal-align /white-space / break-word
        • 其他属性(CSS3):content / cursor / border-radius/ box-shadow / text-shadow/ background:linear-gradien…

      三.CSS基础选择器

      1. 选择器的作用：

        选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

        h1 {	/*选择器*/color: red;	 /*属性  值*/声明font-size: 25px;	/*属性  值*/声明
}
以上CSS做了两件事：
1.找到所有的h1标签。选择器（选对人）。
2.设置这些标签的样式，比如颜色为红色（做对事）。

      2. 选择器的分类

        • 基础选择器：由单个选择器组成

          • 标签选择器

            1. 定义：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，频面中某一类标签指定统-的CSS 样式。

            2. 语法

              标签名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
缺点：不能设计差异化样式，只能选择全部当前标签

          • 类选择器

      3. 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

      4. 语法：

          .类名 {属性1: 属性值1;...}结构需要用class属性来调用class类的样式.red {color: red;}<div class=“red”>变红色</div>①类选择器使用”.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。②可以理解为给这个标签起了一个名字，来表示。③长名称或词组可以使用中横线来为选择器命名。④不要使用纯数字、中文等命名，尽量使用英文字母来表示。⑤命名要有意义，尽量使别人-眼就知道这个类名的目的。⑥命名规范：见附件（Web前端开发规范手册.doc）

        3. 多类名

        语法：

          <div class="类名1 类名2"></div>
（1）在标签class属性中写多个类名（2）多个类名中间必须用空格分开（3）这个标签就可以分别具有这些类名的样式

         开发场景：

        （1）可以把一些标签元素相同的样式（共同的部分）放到一个类里面.
        （2）这些标签都可以调用这个公共的类然后再调用自己独有的类.
        （3）从而节省CSS代码，统一修改也非常方便

        • id选择器

        id选择器可以为标有特定id的HTML元素指定特定的样式。
        HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义

        1. 语法：

          #id名 {属性1: 属性值1;...}例如：将id为nav元素中的内容设置为红色#nav {color: red;}

        2. id选择器和类选择器的区别3. 类选择器可以多个标签调用，id选择器只能调用一次2. id选择器和类选择器最大区别在于使用次数4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一 性的元素上，经常和JavaScript 搭配使用。
        • 通配符选择器

        在css中，通配符选择器使用"*"定义，表示选取页面中的所有元素

        1. 语法：

            * {属性1: 属性值1;...}●通配符选择器不需要调用，自动就给所有的元素使用样式●特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距后期讲）* {margin: 0;padding: 0;}
        • 基础选择器总结：
        基础选择器特点作用使用情况用法
        标签选择器不能差异化选择可以选择相同标签，比如p较多P {color: red;}
        类选择器可以根据需求选择可以选择一个或多个标签非常多.nav {color: red;}
        id选择器ID属性只能在每个HTML出现一次一次只能选择一个标签一般与JS搭配#nav {color: red;}
        通配符选择器选择的太多，有部分不需要选择所有标签特殊情况使用* {color: red;}

      四.CSS字体属性

      CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(粗体，斜体等)

      1. 字体系列

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

        p {font-family:"微软雅黑";
}
div {font-family: Arial,"Microsoft yahei","微软雅黑";
}
●各种字体之间必须使用英文状态下的逗号隔开
●-般情况下，如果有空格隔开的多个单词组成的字体加引号.
●尽量使用系统默认自带字体保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body{font-family：'Microsoft YaHei'，tahoma，arial，'Hiragino Sans GB'；}

      2. 字体大小

        CSS 使用 font-size 属性定义字体大小

        p {font-size: 20px;
}
●px（像素）大小是我们网页的最常用的单位
●谷歌浏览器默认的文字大小为16px
●不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
●可以给body指定整个页面文字的大小

      3. 字体的粗细

        CSS使用font-weight属性设置文本字体的粗细

        p {font-weight bold;
}
        属性值描述
        normal默认值(不加粗)
        bold定义粗体(加粗)
        100~900400等同于normal,700等同于bold

      4. 文字样式

        CSS使用 font-style 属性设置文本的风格

        p {font-style: normal;
}
        属性值作用
        normal默认值，浏览器会显示标准的字体样式font-style：normal；
        italic浏览器会显示斜体的字体样式。

        注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

      5. 字体的复合属性

        字体属性可以把以上文字样式综合来写，这样可以更节约代码：

        body{font: font-style font-weight font-size/line-height font-family;
}
●使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
●不需要设置的属性可以省略（取默认值），但必须保留font-size和font.family属性，否则font属性将不起作用

      6. 字体属性总结

        属性表示注意
        font-size字号单位px 像素
        font-family字体按照团队约定字体
        font-weight字体粗细加粗700，常规400，不跟单位
        font-style字体样式倾斜 italic 常规normal
        font字体连写字体连写注意顺序，字号和字体必须存在

      五.CSS文本属性

      CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

      1. 文本颜色
        color属性用于定义文本颜色

        div {color: red;
}
        表示属性值
        预定义颜色值red,green,blue,pink
        十六进制#FF0000,#FFFFFF
        RGB代码rgb(255,0,0),rgb(100%,0%,0%

      2. 对齐文本

        text-align属性用于设置元素内文本内容的水平对齐方式

        div {text-align: center;
}
属性值
left  左对齐(默认)   right 右对齐   center 居中对齐

      3. 装饰文本

        text-decoration属性规定添加到文本的修饰.可以给文本添加下划线，删除线，上划线等

        div {text-decoration: underline;
}
        属性值描述
        none默认。没有装饰线
        underline下划线，自带下划线
        overline上划线
        line-through删除线

      4. 文本缩进

        text-indent属性用来指定文本第一行的缩进，通常将段落的首行缩进di

        div {text-indent: 10px;
}
div {text-indent: 2em;
}
em是一个相对单位，就是当前元素(font-size)一个文字大小

      5. 行高

        line-height属性用于设置行间距(行高).可以控制文字行与行之间的距离

        p {line-height: 26px;
}
文字大小不改变改变的是上间距和下间距

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N4epMkdt-1603158857823)(C:\Users\谜语菌\Documents\img\39.jpg)]

        小技巧：单行文字垂直居中的代码

        CSS没有给我们提供文字垂直居中的代码.这里我们可以使用一个小技巧来实现.

        解决方案：让文字的行间距(行高)等于盒子的高度 就可以让文字在当前盒子内垂直居中

      6. 文本属性总结

        属性表示注意
        color文本颜色最常用 十六进制属性值
        text-align文本对其可以设置文字水平对齐方式
        text-indent文本缩进通常我们用于段落首行缩进两个字符
        text-decoration文本装饰重点 下划线 添加underline 取消none
        line-height行高控制行与行之间的距离

      六.CSS引入方式

      1. css的三种样式表
        按照CSS样式书写的位置，CSS样式表可以分为三类：

        1. 行内样式表(行内式)
        2. 内部样式表(嵌入式)
        3. 外部样式表(链接式)

      2. 内部样式表
        内部样式表（内嵌样式表）是写到html页面内部.是将所有的CSS代码抽取出来，单独放到-个

      样式表优点缺点使用情况控制范围
      行内样式表书写方便结构样式混写较少控制一个标签
      内部样式表部分结构与样式相分离没有彻底分离较多控制一个页面
      外部样式完全实现结构与样式相分离需要引入最多控制多个页面
      1. 使用调试工具
        ①Ctrl+滚轮 可以放大开发者工具代码大小。
        ②左边是HTML元素结构，右边是CSS样式。
        ③右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色。
        ④Ctrl + 0复原浏览器大小。
        ⑤如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
        ⑥如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

      七.Emmet语法

      1. 定义即作用

        Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的 编写速度，Vscode内部已经集成该语法.

        • 快速生成HTML结构语法
          1. 生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成
          2. 如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div
          3. 如果有父子级关系的标签，可以用>比如ul> li就可以了
          4. 如果有兄弟关系的标签，用+就可以了比如div+p如果生成带有类名或者id名字的，直接写.demo 或者#two tab 键就可以了
          5. 如果生成的div类名是有顺序的，可以用自增符号$
        • 快速生成CSS样式语法
          CSS基本采取简写形式即可.
          1. 比如w200按tab可以生成width：200px；
          2. 比如Ih26按tab 可以生成line-height：26px；

      八.复合选择器

      1. 定义

        在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

        • 复合选择器可以更准确、更高效的选择目标元素
        • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成
        • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

      2. 后代选择器

      后代选择器又称为包含选择器，可以选择父元素里的子元素
      语法：

      元素1 元素2 {样式；
}
上述语法表示选择元素1里面的所有元素2（后代元素）。
例如：
ul li {样式；
}
元素1 与 元素2之间用空格隔开
元素1 是父级 元素2 是子级， 样式最终选择的是元素2
元素2 可以是儿子，也可以是孙子，只要是元素1的后代即可
元素1 和 元素2 可以是任意基础选择器

      1. 子选择器

        子选择器只能选择作为某元素的最近一级子元素。
        语法：

        元素1 > 元素2 {样式声明}
表示选择元素1的最近一级的元素2
例如：
div > p { 样式； }/* 选择div里面所有最近一级的p标签元素 */
●元素1和元素2中间用大于号隔开
●元素1是父级，元素2是子级，最终选择的是元素2
●元素2 必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他儿子选择器

      2. 并集选择器

        并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
        语法：

        元素1,元素2 {样式;}
表示选择元素1 和 元素2
例如：
ul,div { 样式; } /* 选择ul 和 div元素标签 */
●元素1 和元素2中间用逗号隔开
●逗号可以理解为和的意思
●并集选择器通常用于集体声明

      3. 伪类选择器

      伪类选择器用于像某些选择器添加特殊效果
      伪类选择器用冒号(:)表示，如：:hover

      1. 链接伪类选择器

      a:link	    /*选择所有未被访问的链接*/
a:visited   /*选择所有已被访问的链接*/
a:hover	 	/*选择鼠标指针位于其上的链接*/
a:active	/*选择活动链接(鼠标正在按下未弹起的链接)*/

      注意事项：

      1. 为了确保生效，请按照LVHA的循顺序声明：link-：visited-：hover-：active。
2. 记忆法love hate或者Iv包包hao
3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。开发中写法：

      /* a 是标签选择器 所有的链接 */
a {color: gray;
}
/* :hober 是链接伪类选择器 鼠标经过 */
a:hover {color:red;  /* 鼠标经过变成红色 */
}

      2. :focus 伪类选择器

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

      input:focus {background-color: yellow;
}

      1. 复合选择器总结

        选择器作用特征使用情况符号及用法
        后代选择器用来选择后代元素可以是子孙后代较多符号是空格.nav a
        子代选择器选择最近一级元素只选择亲儿子较少符号是大于.nav>p
        并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号.nav,.header
        链接伪类选择器选择不同状态的链接跟相关较多重点a{}和a:hover实际开发写法
        :focus选择器选择获得光标的表单跟表单有关较少input:focus 记住这个写法

      九 .CSS的元素显示模式

      1. 什么是元素显示模式

        作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
        HTML元素一般分为块元素和行内元素

      2. 块元素

        常见的块元素有

        ~

        ,

        ,

        ，
        • 、
          1. 、
          2. 等，其中 是最典型的块元素。 

          1. 块元素的特点：1. 自己独占一行2. 高度，宽度，外边距以及内边距都可以控制3. 宽度默认是容器（父级宽度）的100%。4. 是一个容器及盒子，里面可以放行内或者块级元素2. 注意：- 文字类的元素内不能使用块级元素

      3. 行内元素

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

      1. 行内元素的特点：2. 相邻行内元素在一行上，一行可以显示多个3. 高、宽直接设置是无效的4. 默认宽度就是它本身内容的宽度5. 行内元素只能容纳文本或其他行内元素6. 注意：
      • <a>里面不能放<a>
      • 特殊情况链接<a>里面可以放块级元素，但是给转换一下块级模式最安全

      1. 行内块元素

        在行内元素中有几个特殊的标签一、、，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

        1. 行内块元素的特点
          1. 和相邻行内元素(行内块)在一行上，但是它们之间会有空白缝隙。一行可以显示多个(行内元素特点)
          2. 默认宽度就是它本身内容的宽度（行内元素特点）。
          3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

      2. 元素显示模式总结

        元素模式元素排列设置样式默认宽度包含
        块级元素一行只能放一个块级元素可以设置宽高父级容器的100%容器级可以包含任何标签
        行内元素一行可以放多个行内元素不可以直接设置宽高它本身内容的宽度容纳文本或其他行内元素
        行内块元素一行可以放多个行内块元素可以设置宽高它本身内容的宽度

      3. 元素显示模式转换

        特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性比如想要增加链接的触发范围。

        • 转换为块元素 display:block;
        • 转换为行内元素 display:inline;
        • 转换为行内块元素 display:inline-block;

      十.CSS的背景

      1. 背景颜色

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

        background-color:颜色值；
一般情况下元素背景颜色默认值是 transparent(透明)

      2. 背景图片

        background-image : none | urlnone  无背景图(默认)
url   使用绝对或相对地址指定背景图片

      3. 背景平铺

        background-repeat 属性设置背景图像的平铺

        background-repeat: repeat | no-repeat | repeat-x | repeat-y
        参数值作用
        repeat背景图像平铺(默认)
        no-repeat背景图像不平铺
        repeat-x背景图像在横向上平铺
        repeat-y背景图像在纵向上平铺

        页面元素既可以添加背景颜色也可以添加背景图片只不过背景图片会压住背景颜色

      4. 背景图片位置

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

        background—position: x y;
参数含义：x坐标和y坐标。可以使用方位名词和精确单位
        参数值说明
        length百分数|由浮点数字和单位标识符组成的长度值
        positiontop|center|bottom|left|center|right 方位名词

        1. 参数是方位名词

          • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left 效果一致
          • 如果只指定了一个方位名词，另-个值省略，则第二个值默认居中对齐

        2. 参数是精确单位

          • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
          • 如果只指定一个值，那该数值一定是x坐标，y坐标默认居中

        3. 参数是混合单位

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

      5. 背景图像固定(背景附着)

        background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
        background-attachment 后期可以制作视差滚动效果

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

      6. 背景复合写法

        为了简化背景属性的代码，我们可以将这些属性合并简写在同一一个属性background中。从而节约代码量
        当使用简写属性时，没有特定的书写顺序，-般习惯约定顺序为：background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

        background: transparent url (image. jpg) repeat--y fixed top ;

      7. 背景颜色半透明

        CSS3 提供了背景颜色半透明的效果

        background: rgba(0,0,0,0.3);
        • 最后一个值是 alpha 透明度，取值范围 0~1之间
        • 背景半透明指盒子半透明，盒子内容不受影响

      8. 背景总结

        属性作用值
        background-color背景颜色预定义的颜色值/十六进制/RGB代码
        background-image背景图片url
        background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
        background-position背景位置分别是x坐标，y坐标
        background-attachment背景附着scroll(背景滚动)fixed(背景固定)
        简写书写简单书写顺序:背景颜色，背景图片，地址，背景平铺，背景滚动，背景位置
        背景色半透明背景颜色半透明background：rgba（0，0，0，0.3）；后面必须是 4个值

      十一.CSS的三大特性

      层叠性 继承性 优先级

      1. 层叠性

      相同的选择器设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要是解决样式冲突问题。
      层叠性原则：

      • 新写的样式会覆盖前面重复的样式
      • 样式不冲突，不会层叠

      1. 继承性

        CSS中的继承:子标签会继承父标签的某些样式，如:文本颜色和字号。

        1. 特点：

          • 恰当的使用继承可以简化代码，降低css样式的复杂性
          • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，及color属性)

        2. 行高的继承

        body {font: 12px/1.5 Microsoft yahei;
}
        • 行高可以跟单位也可以不跟单位
        • 如果子元素没有设置行高，则会继承父元素的行高为1.5
        • 此时子元素的行高是：当前子元素的文字大小的1.5倍
        • body行高 1.5 这样写的优势，子元素可以根据自己的文字大小自动调整行高。

        1. 优先级

          当同一个元素指定多个选择器，就会有优先级产生

          • 选择器相同，则执行层叠性
          • 选择器不同，则根据选择器权重执行
          选择器选择器权重
          继承or *0，0，0，0
          元素选择器0，0，0，1
          类选择器，伪类选择器0，0，1，0
          ID选择器0，1，0，0
          行内样式 style=""1，0，0，0
          ！important 重要的无限大
          • 优先级注意点：
          1. 权重是由4组数字组成，但是不会有进位
          2. 可以理解为类选择器永远大于元素选择器id选择器永远大于标签选择器，以此类推.
          3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
          4. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
            权重叠加：
            如果是复合选择器，则会有权重叠加，需要计算权重。(权重相加)
          • div ul li —> 0,0,0,3
          • .nav ul li —> 0,0,1,2
          • a:hover —>0,0,1,1
          • .nav a —> 0,0,1,1

      十二.CSS盒子模型

      ①.看透网页布局的本质

      网页布局的过程
      ①. 先准备好相关的网页元素，网页元素基本都是盒子，Box
      ②. 利用CSS设置好盒子样式，然后摆放到相应位置
      ③. 在盒子里装内容

      页面布局的整体思路

      1. 必须确定页面的版心（可视区），我们测量可得知。
      2. 分析页面中的行模块，以及每个行模块中的列模块。其页面布局第一准则.
      3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置.页面布局第二准则
      4. 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要
      5. 所以，先理清楚布局结构，再写代码尤为重要这需要我们多写多积累

      ② .盒子模型组成

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8lYa6Q2-1603158857826)(C:\Users\谜语菌\Documents\img\box.jpg)]

      盒子模型：就是把HTML页面中的布局元素看成一个矩形的盒子，也就是一个装内容的容器。
      CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框，外边距，内边距，和实际内容。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9KR0P90-1603158857830)(C:\Users\谜语菌\Documents\img\boxxj.jpg)]

      ③.边框(border)

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNYDqD0J-1603158857834)(C:\Users\谜语菌\Documents\img\border.jpg)]
      border可以设置元素的边框。边框由三部分组成：边框宽度，边框样式，边框颜色

      • 语法：
      border : border-width||border-style||border-color
      属性作用值
      border-width定义边框粗细一般使用px
      border-style边框样式solid实线 dashed虚线 dotted点线
      border-color边框颜色颜色值
      1. 边框的复合写法：
      border: 1px solid red;  /*没有顺序*/

      1. 四个边框可以分开写：

        border-方位:top bottom right left

      2. 边框会额外增加盒子的实际大小，因此有两种方式解决：

        1. 测量盒子大小的时候，不量边框
        2. 如果测试的时候包含了边框，则需要width/height减去边框宽度

      3. 表格的边框设置
        border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
        语法：

      border-collapse:collapse;

      • collapse 单词是合并的意思

      • border-collapse:collapse; 表示相邻边框合并在一起

      ④.内边距(padding)

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

      padding-方位: top bottom left right
      1. 内边距的复合写法
      值的个数作用
      padding: 5px;1个值，代表上下左右都有5px
      padding: 5px 10px;2个值，代表上下是5px，左右是10px
      padding: 5px 10px 20px;三个值，代表上5px 左右10px 下20px
      padding: 5px 10px 20px 30px;四个值，代表上5px 右10px 下20px 左30px 顺时针
      1. 注意：当我们给盒子指定padding值后发生了两件事
        1. 内容和边框有了距离，添加了内边距
        2. padding影响了盒子实际大小。
      2. 解决方案：
        • 如果保证盒子大小保持一致，则让width/height 减去多出来的内边距大小即可
        • 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

      ⑤.外边距(margin)

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

      margin-方位: top bottom left right
      1. 外边距的复合写法(与padding写法一致)
      值的个数作用
      margin: 5px;1个值，代表上下左右都有5px
      margin: 5px 10px;2个值，代表上下是5px，左右是10px
      margin: 5px 10px 20px;三个值，代表上5px 左右10px 下20px
      margin: 5px 10px 20px 30px;四个值，代表上5px 右10px 下20px 左30px 顺时针
      1. 外边距的典型运用

        margin可以让块级盒子水平居中，但是要满足两个条件

        1. 盒子必须指定了宽度

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

        .header {width: 900px;margin: 0 auto;
}
常见写法
● margin-left: auto; margin-rigth: auto;
● margin: auto;
● margin: 0 auto;

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

        2. 外边距合并：
          使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
嵌套块元素垂直外边距塌陷：对于两个嵌套关系（好关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
浮动不存在外边距合并

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w52fkrd2-1603158857837)(C:\Users\谜语菌\Documents\img\hebing.jpg)]

      1. 解决方案：
        1. 可以为父元素定义上边框
        2. 可以为父元素定义上内边距
        3. 可以为父元素添加overflow:hidden。
      2. 清除内外边距

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

        * {padding: 0;margin: 0;
}

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

      ⑥.总结：

      1. 布局为啥用不同盒子，我只想用div？
        标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大文字段落就用p
      2. 为啥用辣么多类名？
        类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。
      3. 到底用margin还是padding？
        大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
      4. 自己做没有思路？
        布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。

      ⑦.圆角边框

      在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

      border-radius 属性用于设置元素的外边框圆角

      语法：

      border-radius: length;

      radius 半径(圆的半径)原理：圆与边框的交集形成圆角效果

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19PdAerz-1603158857841)(C:\Users\谜语菌\Documents\img\yuan.jpg)]

      • 参数值可以为数值或百分比形式
      • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
      • 如果是个矩形，设置为高度的一半就可以做
      • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
      • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-b8ttom-left-radius

      ⑧.盒子阴影

      CSS3 中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

      box-shadow: h-shadow v-shadow blur spread color inset;
      值描述
      h-shadow必须。水平阴影的位置，允许负值
      v-shadow必须。垂直阴影的位置，允许负值
      blur可选。模糊距离
      spread可选。阴影的尺寸
      color可选。阴影的颜色
      inset可选。将外部阴影(outset)改为内部阴影

      注意：

      1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
      2. 盒子阴影不占空间，不会影响其他盒子排列

      :hover ：鼠标经过(那个元素都可以使用)

      ⑨.文字阴影：

      CSS3 中新增了盒子阴影，我们可以使用text-shadow属性为文本添加阴影

      语法：

      text-shadow: h-shadow v-shadow blur color;
      值描述
      h-shadow必须。水平阴影的位置，允许负值
      v-shadow必须。垂直阴影的位置，允许负值
      blur可选。模糊距离
      color可选。阴影的颜色

      十三.浮动(folat)

      ①.传统网页布局的三种方式

      网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应的位置。

      CSS提供了三种传统布局方式(简单说，就是盒子该如合进行排列顺序)

      • 普通流(标准流)

      • 浮动

      • 定位

      • 标准流(普通流/文档流)
        所谓的标准流：就是标签按照规定好的默认方式排列。

        1. 块级元素会独占一行，从上到下顺序排列
        • 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
        1. 行内元素会按照顺序，从左到右顺序排序，碰到父元素边缘会自动换行
        • 常用元素:span、a、i、em等
        • 注意：实际开发中，一个页面基本都包含 了这三种布局方式（后面移动端学习新的布局方式）。

      • 常见的网页布局

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIpZgwLE-1603158857844)(C:\Users\谜语菌\Documents\img\bianzhun.jpg)]

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5IxPiCJs-1603158857846)(C:\Users\谜语菌\Documents\img\biaozhun2.jpg)]

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3NJt56P-1603158857848)(C:\Users\谜语菌\Documents\img\bianzhun3.jpg)]

      ②.为什么需要浮动？

      有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。浮动最典型的应用：可以让多个块级元素一行内排列显示。

      • 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

      ③.什么是浮动？

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

      • 语法：

        选择器{ float: 属性值; }
        属性值描述
        none元素不浮动(默认值)
        left元素向左浮动
        right元素向右浮动

      ④.浮动特性(重点)

      1. 浮动元素会脱离标准(脱标)

        • 设置浮动的元素最重要的特性：

          1. 脱离标准普通流的控制(浮)移动到指定位置(动),(脱标)

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

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1s1zrVm-1603158857850)(C:\Users\谜语菌\Documents\img\sss.jpg)]

      2. 浮动的元素会一行内显示并且元素顶部对齐

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

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A0KM42KX-1603158857853)(C:\Users\谜语菌\Documents\img\fu.jpg)]

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

      3. 浮动元素会具有行内块元素的特性

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

        • 如果块级盒子没有设置宽度，默认宽度和父级-样宽，但是添加浮动后，它的大小根据内容来决定
        • 浮动的盒子中间没有缝隙，是紧挨在一起的
        • 行内元素同理

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

      为了约束浮动元素位置我们网页布局一般采取的策略是：
      先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mPtEGeN0-1603158857855)(C:\Users\谜语菌\Documents\img\fu1.jpg)]

      ⑥.浮动布局的注意点

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

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

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

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

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

      ⑦.清除浮动

      1. 为什么需要清除浮动？

        由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7DlEkjTn-1603158857857)(C:\Users\谜语菌\Documents\img\cdas.jpg)]

        由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

      2. 清除浮动本质

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

      3. 清除浮动

        • 语法

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

          实际开发中，几乎只用 clear:both； 清除浮动的策略是闭合浮动。

        • 清除浮动的方法

          1. 额外标签法也称为隔墙法，是W3C的推荐做法

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

            例如：

            • 优点：通俗易懂，书写方便
            • 缺点：添加许多无意义的标签，结构化较差
            • 注意：要求这个新的空标签必须是块级元素。

          2. 父级添加 overflow 属性

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

            • 优点：代码简洁
            • 缺点：无法显示溢出的部分

          3. 父级添加 after 伪元素

            :after 方式是额外标签法的升级版，给父元素添加

            .clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {	  /* IE6、7专有 */*zoom: 1;
}
            • 优点：没有增加标签，结构简单
            • 缺点：照顾低版本浏览器

          4. 父级添加双伪元素

            也是给父元素添加

            .clearfix:before,.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}
            • 优点：代码更简洁
            • 缺点：照顾低版本浏览器

      4. 清除浮动总结

        1. 为什么清除浮动？

          • 父级没高度
          • 子盒子浮动了
          • 影响下面布局了，我们就应该清除浮动

        2. 清除浮动方式

          清除浮动方式优点缺点
          额外标签法通俗易懂，书写方便添加许多无意义标签，结构化较差
          父级overflow:hidden;书写简单溢出隐藏
          父级after伪元素结构语义化正确由于IE6-7不支持：after，兼容性问题
          父级双伪元素结构语义化正确由于IE6-7不支持：after，兼容性问题

      ⑧.网页制作注意事项

      1. 确定版心

        每个版心都要水平居中对挤，可以定义版心为公共类：

        .w {width: XXXpx;margin: auto;
}

      2. header

        logo(商标)

        nav(导航栏)

        • 实际开发中，我们不会直接用链接a而是用li包含链接（li+ a）的做法。
          • lita语义更清晰，一看这就是有条理的列表型内容。
          • 如果直接用a，搜索引|擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索弓擎有降权的风险），从而影响网站排名
        • 注意：
          • 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示.
          • 这个nav导航栏可以不给宽度将来可以继续添加其余文字
          • 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

      十四.定位

      ①.为什么需要定位

      以下情况使用标准流或者浮动能实现吗？

      1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WL1wkAwR-1603158857858)(C:\Users\谜语菌\Documents\img\ding.jpg)]

      2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afjvazhg-1603158857861)(C:\Users\谜语菌\Documents\img\ding1.jpg)]

      使用场景

      1. 浮动可以让多个块级盒子一 行没有缝隙排列显示，经常用于横向排列盒子。
      2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

      ②.定位的组成

      定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

      定位 = 定位模式 + 边偏移

      定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

      1. 定位模式

        定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

        值语义
        static静态定位
        relative相对定位
        absolute绝对定位
        fixed固定定位

      2. 边偏移

        边偏移就是定位的盒子移动到最终位置。有top、bottom.left 和right 4个属性。

        边偏移属性示例描述
        toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离
        bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线距离
        leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离
        rightright:80px右侧偏移量，定义元素相对于其父元素右边线的距离

      3. 静态定位

        静态定位是元素的默认定位方式，无定位的意思。

        语法：

        选择器 {position: static;
}
        • 静态定位按照标准流特性摆放位置，它没有边偏移
        • 静态定位在布局中很少使用

      4. 相对定位

        相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

        语法：

        选择器 {position: relative;
}
        • 相对定位的特点：
          • 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
          • 原来在标准流的位置继续占有，后面的盒子依然以标准流的方式对待它。(不脱标，继续保留原来的位置)
          • 因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

      5. 绝对定位

        绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

        语法：

        选择器 {position: absolute;
}
        • 绝对定位特点：
          • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
          • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
          • 绝对定位不再占有原先的位置。（脱标）
        • 子绝父相：子级是绝对定位的话，父级要用相对路径
          • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
          • 父盒子需要加定位限制子盒子在父盒子内显示。
          • 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
          • 总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

      6. 固定定位

        固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

        语法：

        选择器 {position: fixed;
}

        • 相对定位特点：

          1. 以浏览器的可视窗口为参照点移动元素
          • 跟父元素没有任何关联
          • 不随滚动条滚动
          1. 固定定位不再占有原先位置
          • 固定定位也是脱标的

        • 固定定位小技巧：固定在版心右侧位置

          小算法：

          • 让固定定位的盒子left：50%.走到浏览器可视区（也可以看做版心）的一半位置。
          • 让固定定位的盒子margin-left：版心宽度的一半距离。多走 版心宽度的一半位置

      7. 粘性定位

        粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的

        语法：

        选择器 {position: sticky;
}
        • 粘性定位的特点
          • 以浏览器的可视窗口为参照点移动元素(固定定位特点)
          • 粘性定位占有原先的位置（相对定位特点）
          • 必须添加top、left、right.bottom其中一个才有效

      8. 定位总结：

        定位模式是否脱标移动位置是否常用
        static 静态定位否不能使用边偏移很少
        relative 相对定位否(占有位置)相对于自身偏移常用
        absolute 绝对定位是(不占有位置)带有定位的父级常用
        fixed 固定定位是(不占有位置)浏览器可视区常用
        sticky 粘性定位否(占有位置)浏览器可视区目前很少

      ③.定位的叠放次序

      在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序

      语法：

      选择器 {z-index: 1;
}

      • 数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上

      • 如果属性值相同，则按照书写顺序，后来居上

      • 数字后面不能加单位

      • 只有定位的盒子才有z-index属性

      ④.定位的拓展

      1. 绝对定位的盒子居中

        加了绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。

        • left：50%；：让盒子的左侧移动到父级元素的水平中心位置。
        • margin-left：-100px；：让盒子向左移动自身宽度的一半。

      2. 定位的特殊特性

        绝对定位和固定定位和浮动类似。

        • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

      3. 脱标的盒子不会触发外边距塌陷

        • 浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

      4. 绝对定位(固定定位)会完全压住盒子

        浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

        但是绝对定位（固定定位）会压住下面标准流所有的内容。

        浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qLNXB8h-1603158857864)(C:\Users\谜语菌\Documents\img\dja.jpg)]

      十五.网页布局总结

      通过盒子模型，清楚知道大部分html标签是一个盒子。
      通过CSS浮动、定位可以让每个盒子排列成为网页。

      一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

      1. 标准流

        可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

      2. 浮动

        可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

      3. 定位

        定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

      十六.元素的显示和隐藏

      类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现

      本质：让一个元素在页面中隐藏或者显示出来。

      1. display(显示隐藏)

        • display属性用于设置一个元素应如何显示。

          • display: none; 隐藏对象
          • display: block; 除了转换为块级元素之外，同时还有显示元素的意思

        • display 隐藏元素后室不再占有原来的位置。

          后面应用及其广泛，搭配JS可以做很多的网页特效。

      2. visibility(显示隐藏)

        • visibility属性用于指定一个元素应可见还是隐藏。

          • visibility：visible；元素可视
          • visibility：hidden；元素隐藏

        • visibility隐藏元素后，继续占有原来的位置。

          如果隐藏元素想要原来位置，就用visibility：hidden

          如果隐藏元素不想要原来位置，就用display：none（用处更多重点）

      3. overflow(溢出显示隐藏)

        • overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
          • overflow：visible；不隐藏内容，也不加滚动条
          • overflow：hidden；不显示超过对象尺寸的内容，超出的部分隐藏掉
          • overflow：scroll；不管超出内容否，总是显示滚动条
          • overflow：auto；超出自动显示滚动条，不超出不显示滚动条
        • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
          但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

      十七.CSS高级技巧

      ①.精灵图

      1. 为什么需要精灵图

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KoAlK7va-1603158857866)(C:\Users\谜语菌\Documents\img\fdsf.jpg)]

        一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

        因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

        核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

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

      2. 使用精灵图技术

        • 使用精灵图核心：
          • 精灵图主要针对于小的背景图片使用。
          • 主要借助于背景位置来实现–background-position。
          • 一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理。）
        • 精灵图具体使用：
          • 设置同一张精灵图背景
          • 使用background-position调整位置，显示图标

      ②.字体图标

      • 字体图标使用场景：主要用于显示网页中通用，常用的一些小图标

      • 精灵图有诸多优点，但是缺点也很明显

        • 图片文件较大
        • 图片本身放大缩小会失真
        • 一旦图片制作完毕想要更换非常复杂

        此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
        字体图标可以为前端工程师提供-种方便高效的图标使用方式，展示的是图标，本质属于字体。

        1. 字体图标的优点
          • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
          • 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
          • 兼容性：几乎支持所有的浏览器，请放心使用
          • 注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

        总结：

        • 如果遇到一-些结构和样式比较简单的小图标，就用字体图标。

        • 如果遇到一些结构和样式复杂点的小图片，就用精灵图。

        1. 字体图标的下载网站

          /

        2. 字体图标的引入

          下载完毕之后，注意原先的文件不要删，后面会用。

          • 把下载包里面的fonts文件夹放入页面根目录下

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O70W9veO-1603158857867)(C:\Users\谜语菌\Documents\img\ziti.jpg)]

          • 在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。
            一定注意字体文件路径的问题。

            @font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?7kkyc2');src: url (' fonts/icomoon.eot?7kkyc2#iefix') format(' embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon. woff?7kkyc2") format ('woff') ,url ('fonts/icomoon. svg?7kkyc2#icomoon') format('svg') ;font-weight: normal;font-style: normal;
}

          • html标签内添加小图标

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sA8O3DDD-1603158857868)(C:\Users\谜语菌\Documents\img\tu.jpg)]

        3. 字体图标的追加

          如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
          把压缩包里面的selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lnuNe8lO-1603158857870)(C:\Users\谜语菌\Documents\img\zititu.jpg)]

      ③.CSS三角的做法

      网页中常见–些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。
      一张图，你就知道CSS三角是怎么来的了，做法如下：

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvg0Legy-1603158857873)(C:\Users\谜语菌\Documents\img\sanjiao.jpg)]

      div{width：0；height：0；line-height：0；font-size：0；border：50px solid transparent；border-left-color：pink；
}

      ④.用户界面样式

      1. 鼠标样式 cursor

        li {cursor: pointer;}

        设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

        属性值描述
        default默认
        pointer小手
        move移动
        text文本
        not-allowed禁止

      2. 表单轮廓线 outline

        给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的蓝色边框。

        input {outline: none;
}

      3. 防止拖拽文本域 resize

        实际开发中，我们文本域右下角是不可以拖拽的。

        textarea{resize: none;
}

      ⑤.vertical-align 属性应用

      CSS的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

      官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

      语法：

      vertical-align: baseline | top | middle | bottom
      值描述
      baseline默认。元素放置在父元素的基线上
      top把元素的顶端与行中最高元素的顶端对齐
      middle把此元素放置在父元表的中部。
      bottom把元素的顶端与行中最低的元素的顶端对齐。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bekyIca-1603158857875)(C:\Users\谜语菌\Documents\img\xian.jpg)]

      图片、表单都属于行内块元素，默认的vertical-align是基线对齐。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0j9Tkpx-1603158857877)(C:\Users\谜语菌\Documents\img\jixian.jpg)]

      此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

      • 解决图片底部默认空白缝隙问题

        bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
        主要解决方法有两种：

        1. 给图片添加vertical-align: middle | topl bottom等。（提倡使用的）
        2. 把图片转换为块级元素display：block；

      ⑥.文本溢出显示省略号

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tB8pchSk-1603158857878)(C:\Users\谜语菌\Documents\img\wenziyichu.jpg)]

      1. 单行文本溢出显示省略号的三个条件

        /*1.先强制一行内显示文本*/
white-space: nowrap;（默认normal自动换行）
/*2.超出部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出部分*/
text-overflow: ellipsis;

      2. 多行文本溢出显示省略号

        多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

        overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

      ⑦.常见的布局技巧

      1. margin负值的运用

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i84AaP8Y-1603158857880)(C:\Users\谜语菌\Documents\img\margin.jpg)]

        • 让每个盒子margin往左侧移动-1px正好压住相邻盒子边框
        • 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

      2. 文字环绕浮动元素

        巧妙运用浮动元素不会压住文字的特性

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeMuKyQl-1603158857882)(C:\Users\谜语菌\Documents\img\fuddd.jpg)]

      3. CSS三角强化

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wbGG0N8N-1603158857883)(C:\Users\谜语菌\Documents\img\sanjiaoqianghua.jpg)]

        width: 0; 
height: 0;
border-color: transparent red transparent transparent; 
border -style: solid; 
border-width: 22px 8px 0 0;

      ⑧.CSS初始化

      不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

      简单理解：CSS初始化是指重设浏览器的样式。（也称为CSS reset）

      每个网页都必须首先进行CSS初始化。这里我们以京东css初始化代码为例。

      Unicode编码字体：

      把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

      比如：

      黑体\9ED1\4F53

      宋体\5B8B\4F53

      微软雅黑\5FAE\8F6F\96C5\9ED1

      JavaScript

      一.JavaScript基础

      1. 概念：一门客户端脚本语言

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

      2. 功能：

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

      3. 组成

        JavaScript = ECMAScript + JavaScript特有的(BOM+DOM)

      二.ECMAScript:客户端脚本语言的标准

      Ⅰ.基本语法

      ①.与HTML结合方式

      1. 内部JS：

        • 定义

      ②.注释
       1. 单行注释：//注释内容2. 多行注释：/\*注释内容\*/
      ③.数据类型
      1. 原始数据类型(基本数据类型)：
        • number : 数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
        • String : 字符串。“abc” ‘abc’
        • boolean : true 和 false
        • null : 一个对象为空的占位符
        • undefined : 未定义。如果一个变量没有给初始化值，则会默认为undefined
      2. 引用数据类型:对象
      ④.变量

      • 定义：一小块存储数据的内存空间

      • Java是强类型语言，而JavaScript是弱类型语言

        • 强类型：在开辟变量存储空间时，定义了空间将来存储数据的类型，只能存储固定类型的数据
        • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意数据类型的数据

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

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

        <script>var num = 10;var num2 = 10.02;var num3 = NaN;document.write(num + "---" + typeof(num) + "<br>");document.write(num2 + "---" + typeof(num2) + "<br>");document.write(num3 + "---" + typeof(num3) + "<br>");var str = "abc";var obj = null;var obj2 = undefined;document.write(str + "---" + typeof(str) + "<br>");document.write(obj + "---" + typeof(obj) + "<br>");document.write(obj2 + "---" + typeof(obj2) + "<br>");var falo = false;document.write(falo + "---" + typeof(falo) + "<br>");
</script>
10---number
10.02---number
NaN---number
abc---string
null---object
undefined---undefined
false---boolean
        • 注：null运算后得到的时object
      ⑤.运算符

      1. 一元运算符：只有一个运算数的运算符

        ++ , – ,+(正号),-(负号)

        • ++（–）在前，先自增（自减），再运算
        • ++（–）在后，先运算，再自增（自诚）
        • +(-):正负号
          • 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
          • 其他类型转number
            • string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
            • boolean转number：true转为1，false转为0

      2. 算数运算符

        + - * / % …

      3. 赋值运算符

        = += -= …

      4. 比较运算符

        > < >= <= == ===(全等于)

        • 比较方式

          1. 类型相同：直接比较
          • 字符串：按照字典顺序比较。按位逐–比较，直到得出大小为止。
          1. 类型不同：先进行类型转换，再比较
          • ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

      5. 逻辑运算符

        && ：与

        ||：或

        ！：非

        • 其他类型转boolean:

          !!num;
          • number：0或NaN为假，其他为真
          • string：除了空字符串（""），其他都是true
          • null&undefined:都是false
          • 对象：所有对象都是true

      6. 三元运算符

        ？：表达式

        语法：

        表达式？ 值1:值2;
判断表达式的值，如果是true则取值1，如果是false则取值2；
var a = 3;
var b = 4;
var c = a > b ? 1:0;

      7. 流程控制语句

        1. if… .else. . .
        2. switch
        • 在java中，switch语句可以接受的数据类型：byte int shor char，枚举（1.5），String（1.7）
          • switch（变量）：
            case值：
        • 在JS中，switch语句可以接受任意的原始数据类型
        1. while
        2. do… .while
        3. for

        案例：九九乘法表

            document.write("<table align='center'>");for (var i = 1; i <= 9; i++) {document.write("<tr>");for (var j = 1; j <= i; j++) {document.write("<td>");document.write(j + "*" + i + "=" + i * j);document.write("</td>");}document.write("</tr>");document.write("<br>");}document.write("</table>");

      Ⅱ.基本对象

      ①.Function: 函数(方法)对象

      1. 创建：

        var fun = new Function(形参列表,方法体);
function fun(形参列表){方法体；
}
var fun = function(形参列表){方法体;
}

      2. 方法：

      3. 属性：

        length: 代表形参的个数

      4. 特点：

        • 方法定义时，形参的类型不用写,返回值类型也不用写
        • 方法是一个对象，如果定义名称相同的方法，会覆盖前面的方法
        • 在JS中，方法的调用只与方法的名称有关，和参数列表无关
        • 在方法声明中有一个内置数组，arguments，封装所有的实际参数

      5. 调用：

        方法名称(实参列表);

      ②.Array: 数组对象

      1. 创建：

        var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];

      2. 方法：

        join() : 将数组中的元素按照分隔符拼接为字符串

        push() : 像数组的末尾添加一个或多个元素，并返回新的长度

      3. 属性：

        length：数组长度

      4. 特点：

        • JS中，数组元素类型是可变的
        • JS中，数组长度可变的
      ③.Boolean: 布尔对象
      ④.Deta: 日期对象

      1. 创建：

        var date = new Date();

      2. 方法：

        tolocaleString(): 返回当前date对象对应的本地时间

        getTime(): 获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

      ⑤.Math: 数学对象

      1. 创建

        特点：Math对象不用创建，直接使用。Math.方法名();

      2. 方法：

        random(): 返回0 ~ 1之间的随机数。含零不含1

        ceil(x) : 对数进行上舍入。(向上取整)
        floor(x): 对数进行下舍入。(向下取整)
        round(x): 把数四舍五入为最接近的整数。

      3. 属性：

        PI = Π

      ⑥.Number:
      ⑦.String: 字符串对象
      ⑧.RegExp: 正则表达式对象

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

        1. 单个字符：[]

          如：[a] [ab] [a-zA-Z0-9_]

          • 特殊符号代表特殊含义的单个字符

            \d:单个字符[0-9]

            \w:单个单词字符[a-zA-Z0-9_]

        2. 量词符号

          ? : 表示出现0次或1次

          * : 表示出现0次或多次

          + : 表示出现1次或多次

          {m,n} : 表示 m<= 数量 <=n （m,n之间）

          • m如果缺省：{,n}: 最多n次
          • n如果缺省：{m,}: 最少m次

      2. 正则对象

        1. 创建：

          var reg = new RegExp("正则表达式");
var rge = /正则表达式/;
开始符号：^ $

        2. 方法：

          text(参数): 验证指定的字符串是否符合正则定义的规范

      ⑨.Global:

      1. 特点：全局对象，全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();

      2. 方法：

        encodeURI()：url编码
        decodeURI()：url解码

        encodeURIComponent()：url编码，编码字符更多
        decodeURIComponent()：url解码

        parseInt(): 将字符串转换为数字

        • 逐一判断每个字符是否是数字，直到不是数字为止，将前边数字部分转为number

        isNaN(): 判断一个值是否为NaN

        • NaN参与的==比较全部为false

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

      3. URL编码

        %分割的16进制数字

        前端开发—%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91

      三.JavaScript对象

      Ⅰ.BOM

      ①.DOM简单学习：为了满足案例需求

      1. 功能：控制html文档的内容

      2. 代码：获取页面标签（元素）对象Element

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

      3. 操作Element对象

        • 修改属性值：
          • 明确获取对象是哪一个
          • 查看API文档，找其中有哪些属性可以设置
        • 修改标签体内容：
          • 属性：innerHTML 设置标签体的内容
        <h1 id="title">时代在召唤</h1>
<img id="light" src="../img/bj.jpg" /><script>var title = document.getElementById("title");alert("更改");title.innerHTML = "梦想在号召";var light = document.getElementById("light");alert("改图");light.src = "../img/c.jpg";
</script>
      ②.事件的简单学习

      1. 概念：某些组件被执行了某些操作后，触发某些代码的执行。

        • 事件：onclick—单击事件

          <h1 id="title" onclick="fun()">时代在召唤</h1>
<script>function fun() {alert("点我？");alert("变身！~古娜拉黑暗之神！");var title = document.getElementById("title");title.innerHTML = "命运在招手";
}
</script>

        • 通过js获取元素对象，指定事件属性，设置一个函数（推荐使用）

          <h1 id="title">时代在召唤</h1>
<script>var title = document.getElementById("title");title.onclick = fun;function fun() {alert("变身！");alert("古娜拉黑暗之神！");alert("小魔仙全身变~");title.innerHTML = "命运在招手";}
</script>
      ③.BOM概述
      1. 概念：Browser object Model浏览器对象模型
        • 将浏览器的各个组成部分封装成对象。
      2. 组成：
        • window：窗口对象
        • Navigator：浏览器对象
        • Screen：显示器屏幕对象
        • History：历史记录对象
        • Location：地址栏对象

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DK1oTi5W-1603158857886)(C:\Users\谜语菌\Documents\img\DOM.jpg)]

      ④.Window: 窗口对象

      1. 创建：

      2. 方法

        • 与弹出框有关的方法

          • alert() : 显示带有一段消息和确认按钮的警告框

            alert("警告");

          • confim() : 显示带有一段消息以及确认按钮和取消按钮的对话框

            var con = confim("您确定退出吗？");
如果用户点击确认按钮，则方法返回true
如果用户点击取消按钮，则方法返回false

          • prompt() : 显示可提示用户输入的对话框

            var user = prompt("请输入用户名");
返回值：用户输入的内容

        • 与打开关闭有关的方法

          • close() : 关闭浏览器窗口

            close();
谁调用关谁

          • open() : 打开一个新的浏览器窗口

            var newWindow = open("www.baidu");
返回一个新的window对象

        • 与定时器有关的方法

          • setTimeout() : 在指定的毫秒数后调用函数或计算表达式

            var id = setTimeout(fun,2000);
参数：1，JS代码或者方法对象  2，毫秒值
返回值：唯一标识，用于取消定时器

          • clearTimeout() : 取消由 setTimeout()方法设置的timeout

          • setInterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式

          • clearInterval() : 取消由 setInterval() 设置的timeout

        • 入口函数

          window.onload() = function(){}

      3. 属性

        • 获取其他BOM对象

          • history
          • location
          • Navigator
          • Screen
          语法：
var h1 = window.history;
var h2 = history;

        • 获取DOM对象

          • document
          语法：
window.document.getElementById("");
document.getElementById("");

      4. 特点

        • window对象不需要创建可以直接使用 window使用。window.方法名();
        • window引用可以省略。 方法名();
      ⑤. Location : 地址栏对象

      1. 创建

        window.location
location

      2. 方法

        • reload() : 重新加载当前文档

          Lication.reload();

      3. 属性

        • href 设置或返回完整的URL
      ⑥.history : 历史记录对象

      1. 创建

        window.history
history

      2. 方法

        • back() : 加载history 列表中前一个URL

        • forward() : 加载history 列表中下一个URL

        • go() : 加载history 列表中某一个具体页面

          URL 参数使用的是要访问的 URL，或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。

      3. 属性

        • length() : 返回历史列表的网页数

      Ⅱ.DOM

      ①.DOM概述：

      1. 概念：Document object Model文档对象模型

        将标记语言文档的各个部分，封装为对象。可以用这些对象，对标记语言文档进行CRUD的动态操作

      2. W3C DOM标准被分为3个不同的部分

        • 核心 DOM — 针对任何结构化文档的标准模型

          • Document : 文档对象

          • Element : 元素对象

          • Attribute : 属性对象

          • Text : 文本对象

          • Comment : 注释对象

            Node是他们的父对象

          • Node：节点对象

        • XML DOM — 针对 XML 文档的标准模型

        • HTML DOM — 针对 HTML 文档的标准模型

      ②.核心 DOM 模型
      1.Document ：文档对象

      • 创建：在html dom模型中可以使用wi ndow对象来获取

        window.document
document

      • 方法

        1. 获取Element对象：
          • getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
          • getElementsByTagName() : 根据元素名称获取元素对象们。返回值是一个数组
          • getElementsByClassName() : 根据class属性值获取元素对象们。返回值是一个数组
          • getElementsByName() : 根据name属性值获取元素对象们。
          • querySelector():根据指定选择器获取第一个元素对象，考虑兼容
          • querySelectorAll():根据指定选择器获取所有元素对象，考虑兼容
        2. 创建其他DOM对象：
          • createAttribute(name)
          • createComment ( )
          • createElement ( )
          • createTextNode( )
      2.Element : 元素对象

      • 获取/创建：通过document来进行获取和创建

      • 方法：

        • setAttribute() 添加新属性

          参数：1. 属性名 2. 属性值
栗子：a.setAttribute("href", "");

        • removeAttribute() 删除指定的属性

          参数：属性名
栗子：a.removeAttribute("href");

        • disabled=true 禁用按钮

      3.Node对象

      • 特点：所有的DOM对象都可以认为是一个节点

      • 方法：

        • CRUD(增删改查) dom树:

          • appendChild() : 向节点的子节点列表的结尾添加新的子节点
          • removeChild() : 删除并返回当前节点指定的子节点
          • replaceChild() : 用新节点替换一个子节点
          <head><style>#box {width: 200px;height: 200px;border: 1px solid red;}#div {width: 100px;height: 100px;border: 1px solid red;}#div2 {width: 60px;height: 50px;border: 1px solid red;}</style>
</head><body><div id="box">box<div id="div">div</div></div><a id="delete" href="JavaScript:void(0);">删除子节点</a><a id="add" href="JavaScript:void(0);">添加子节点</a><a id="updet" href="JavaScript:void(0);">修改子节点</a><script>// 获取超链接var dele = document.getElementById("delete");dele.onclick = function() {// 获取盒子对象var box = document.getElementById("box");var div = document.getElementById("div");//删除子节点box.removeChild(div);}// 获取超链接var add = document.getElementById("add");add.onclick = function() {// 获取盒子对象var box = document.getElementById("box");//创建盒子对象var div = document.createElement("div");//添加属性div.setAttribute("id", "div2");//添加子节点box.appendChild(div);}// 获取超链接var updet = document.getElementById("updet");updet.onclick = function() {// 获取盒子对象var box = document.getElementById("box");var div = document.getElementById("div")//创建盒子对象var div2 = document.createElement("div");//添加属性div2.setAttribute("id", "div2");//修改子节点box.replaceChild(div2, div);}</script>
</body>

      练习：

      <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态表格</title><style>* {margin: 0;padding: 0;}.box {width: 480px;height: 30px;margin: 30px auto;}.box input {width: 100px;height: 30px;color: rgb(155, 146, 146);}.box #but {color: black;}table {width: 400px;margin: 20px auto;border: 1px solid #000;}th,td {height: 30px;text-align: center;border: 1px solid #000;}</style>
</head><body><div class="box"><input id="ID" type="text" value="请输入ID" /><input id="name" type="text" value="请输入姓名" /><input id="sex" type="text" value="请输入性别" /><input id="but" type="button" value="提交" /></div><table><thead><tr><th>ID</th><th>name</th><th>sex</th><th>操作</th></tr></thead><tbody id="add"><tr><td>1001</td><td>张三丰</td><td>男</td><td><a href="JavaScript:void(0);" οnclick="dele(this)">删除</a></td></tr><tr><td>1002</td><td>张三丰</td><td>男</td><td><a href="JavaScript:void(0);" οnclick="dele(this)">删除</a></td></tr><tr><td>1003</td><td>张三丰</td><td>男</td><td><a href="JavaScript:void(0);" οnclick="dele(this)">删除</a></td></tr></tbody></table><script>//添加表格//单击事件but.onclick = function() {//获取用户输入的值var ID = document.getElementById("ID").value;var name = document.getElementById("name").value;var sex = document.getElementById("sex").value;//转换文本节点var text_ID = document.createTextNode(ID);var text_name = document.createTextNode(name);var text_sex = document.createTextNode(sex);//获取按钮对象var but = document.getElementById("but");//创建avar a = document.createElement("a");var text_a = document.createTextNode("删除");a.appendChild(text_a);//给a添加属性a.setAttribute("href", "JavaScript:void(0);");a.setAttribute("onclick", "dele(this)");//创建tdvar td_ID = document.createElement("td");var td_name = document.createElement("td");var td_sex = document.createElement("td");var td_a = document.createElement("td");//添加数据到tdtd_ID.appendChild(text_ID);td_name.appendChild(text_name);td_sex.appendChild(text_sex);td_a.appendChild(a);//创建trvar tr = document.createElement("tr");//添加td到trtr.appendChild(td_ID);tr.appendChild(td_name);tr.appendChild(td_sex);tr.appendChild(td_a);//添加tr到tbodyvar add = document.getElementById("add");add.appendChild(tr);}//删除表格function dele(obj) {var tr = obj.parentNode.parentNode;var tbody = document.getElementById("add");tbody.removeChild(tr);}</script>
      ③.HTML DOM 模型

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

        document.getElementById("div").innerText = "替换的文本";document.getElementById("div").innerHTML = "替换的数据";
document.getElementById("div").innerHTML += "t追加的数据";
区别
a.innerHTML可以识别HTML标签，innerText不识别HTML标签

      2. 修改HTML元素对象的属性

        Element.属性名 = "修改的值";

      3. 控制样式

        Element.style.样式名 = ""; // 添加元素标签的行内样式，样式少时使用
Element.className = "类名"; //覆盖原本的css类名

        <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div {border: 1px solid blue;}</style>
</head><body><div id="div1">div1</div><div id="div2">div2</div><script>//第一种方式；使用元素的style属性来设置样式var div1 = document.getElementById("div1");div1.onclick = function() {div1.style.border = "1px solid red";}//第二种方式:通过元素的className属性设置样式var div2 = document.getElementById("div2");div2.onclick = function() {div2.className = "div";}</script>
</body>
      ④.操作元素总结

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCTvm1mR-1603158857888)(C:\Users\谜语菌\Documents\img\DOM.png)]

      Ⅲ.事件

      ①.概述

      1. 概念：某些组件被执行了某些操作后，触发某些代码的执行

      2. 组成：

        • 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了…
        • 事件源：组件。如：按钮，文本输入框…（HTML标签）
        • 监听器：代码。
        • 注册监听：将事件，事件源，监听器结合在-起。当事件源上发生了某个事件，则触发执行某个监听器代码。
      ②.常见的事件

      • 点击事件：

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

      • 焦点事件

        1. onblur：失去焦点(一般用于表单校验)
        2. onfocus：元素获得焦点。

      • 加载事件：

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

          window.onload

      • 鼠标事件：

        1. onmousedown 鼠标按钮被按下。

          定义方法时：定义一个形参，接受event对象
event对象的button属性可以获取鼠标按钮哪个键点击
左键 0 中键 1 右键 2 
<input type="button" value="按钮" id="but" />
<script>document.getElementById("but").onmousedown = 		function(even) {alert(even.button);}
</script>

        2. onmouseup 鼠标按键被松开。

        3. onmousemove 鼠标被移动。

        4. onmouseover 鼠标移到某元素之上。

        5. onmouseout 鼠标从某元素移开。

      • 键盘事件：

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

      • 选择和改变

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

      • 表单事件

        1. onsubmit 确认按钮被点击

          可以阻止表单的提交 方法返回false则表单被阻止提交

        2. onreset 重置按钮被点击

      案例：

      <head><meta charset="UTF-8"><title>表格全选</title><style>.center {width: 500px;margin: 0 auto;}table {width: 500px;margin: 15px auto;border: 1px solid #000;}th,td {border: 1px solid #000000;text-align: center;}.over {background-color: pink;}.out {background-color: white;}</style>
</head>
<body>
<form><table><thead><tr><th> <input id="boss" name="xuan" type="checkbox"/> </th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th></tr></thead><tbody id="tbody"><tr><td><input name="xuan" type="checkbox"/></td> <td>1</td> <td>张大仙</td><td>男</td> <td><a href="#">删除</a></td></tr><tr><td><input name="xuan" type="checkbox"/></td> <td>2</td> <td>张三丰</td><td>男</td> <td><a href="#">删除</a></td></tr><tr><td><input name="xuan" type="checkbox"/></td> <td>3</td> <td>张无忌</td><td>男</td> <td><a href="#">删除</a></td></tr></tbody></table><div class="center"><input id="quanxuan" type="button" value="全选"><input id="buxuan" type="button" value="全不选"><input id="fan" type="button" value="反选"></div>
</form>
<script>//设置全选//获取全部的需要选择的表单对象var xuan = document.getElementsByName("xuan");//获取全选按钮对象var quanxuan = document.getElementById("quanxuan");//设置点击事件quanxuan.onclick = function () {//遍历数组for(i in xuan){xuan[i].checked = true;}}//设置全不选var buxuan = document.getElementById("buxuan");buxuan.onclick = function () {//遍历数组for(i in xuan){xuan[i].checked = false;}}//设置反选var fan = document.getElementById("fan");//遍历数组fan.onclick = function () {for(i in xuan){xuan[i].checked = !xuan[i].checked;}}//设置第一个选择框全选var boss = document.getElementById("boss");boss.onclick = function () {for (i in xuan){xuan[i].checked = boss.checked;}}//设置鼠标悬停的背景色//获取全部tr对象var tr = document.getElementsByTagName("tr");for(i in tr){tr[i].onmouseover = function () {this.className = "over";}tr[i].onmouseout = function () {this.className = "out";}}
</script>
</body>

      四.Bootstrap

      ①.概述：

      1. 概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JavaScript 的，它简洁灵活，使Web开发更加快捷。
      2. 好处：
        • 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
        • 响应式布局。同一套页面可以兼容不同分辨率的设备。

      ②.快速入门

      1. 下载Bootstrap

      2. 在项目中将这三个文件夹复制

      3. 创建HTML页面，引入必要资源

        <!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><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="@3.7.3/dist/html5shiv.min.js"></script><script src=".js@1.4.2/dest/respond.min.js"></script><![endif]--><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

        ③.响应式布局

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

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

        • 步骤：

          1. 定义容器。(相当于table)

            • 容器分类
              1. container:固定宽度(有留白)
              2. container-fluid:每一种设备都是100%宽度

          2. 定义行。(相当于tr) 样式：row

          3. 定义元素。指定该元素在不同设备上，所占的格子数目。

            • 样式：col-设备代号-各自数目
            • 设备代号：
              1. xs：超小屏幕 手机(<768px)
              2. sm：小屏幕 平板 (≥768px)
              3. md：中等屏幕 桌面显示器 (≥992px)
              4. lg： 大屏幕 大桌面显示器 (≥1200px)

          4. 注意：

            • 一行中如果格子数目超过12，则超出部分自动换行
            • 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
            • 栅格类属性向下不兼容，如果设置属性设备代号大于实际设备，会一个元素占满一整行
          5. <div class="container-fluid"><div class="row"><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div></div>
</div>

      ④.css样式和js插件

      1. 全局CSS样式
        • 按钮：class=“btn btn-default”
        • 图片：
          • class=“img-responsive”：图片在任意尺寸都占100%
          • 图片形状：
            • <img src="…“alt=”…"class=“img-rounded”>：方形
            • <img src="…“alt=”…class=“img-circle”>：圆形
            • <img src="…“alt=”…"class=“img-thumbnail”>：相框
        • 表格
          • table
          • table-bordered
          • table-hover
        • 表单
          • 给表单项添加：class=“form-control”
      2. 组件
        • 导航条(复制粘贴)
        • 分页条(复制粘贴)
      3. 插件
        • 轮播图(复制粘贴)

      五. JQuery

      简介：是一个JavaScript框架，简化JS开发
      JavaScript框架本质：JS文件，封装了，JS的原生代码

      ####　①.快速入门

      • 步骤：

        1. 下载JQuery文件

          • Jquery-xxx.js: 开发版本，阅读源码
          • Jquery-xxx.min.js: 生产版本，程序开发

        2. 导入JS文件

        3. 使用

          <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><script src="JS/jquery-3.3.1.min.js"></script>
</head><body><div id="div1">div1...</div><div id="div2">div2...</div>
</body>
<script>//$("选择器");var div1 = $("#div1");alert(div1.html());var div2 = $("#div2");alert(div2.html());
</script>

      ②. JQuery对象和JS对象的区别和转换

      1. JQuery对象在操作时，更加方便
      2. JQuery对象和JS对象方法不通用
      3. 两者之间可以互相转换
        • Jquery --》JS:Jquery对象[索引] 或者 Jquery对象.get(索引)
        • JS --》Jquery:$(JS对象)
      <body><div id="div1">div1...</div><div id="div2">div2...</div>
</body>
<script>var divs = document.getElementsByTagName("div");for (var i = 0; i < divs.length; i++) {$(divs[i]).html("aaa");}var $divs = $("div");$divs[0].innerHTML = "bbb";$divs.get(1).innerHTML = "bbb";
</script>

      ③. Jquery的基本语法

      事件绑定

      $(selector).click(function)

      入口函数

      $(function() {});
window.onload = function(){}
两者的区别：
1.window.onload 只能定义一次，如果多次定义，后者函数对象会覆盖前者的函数对象
2.$(function) 可以多次定义

      样式控制

      $("选择器").css("属性名", "属性值");

      ④. 选择器

      选择器实例选取
      基础选择器
      *$("*")所有元素
      #id$("#lastname")id=“lastname” 的元素
      .class$(".intro")所有 class=“intro” 的元素
      element$(“p”)所有

      元素

      .class.class$(".intro.demo")所有 class=“intro” 且 class=“demo” 的元素
      选择器,选择器$(“p,#div”)获取并集选择器
      层级选择器
      选择器 选择器$(div span)获取div中所有的span
      选择器 > 选择器$(div > span)获取div中所有的子span
      过滤选择器
      :first$(“p:first”)第一个

      元素

      :last$(“p:last”)最后一个

      元素

      :even$(“tr:even”)所有偶数
      :odd$(“tr:odd”)所有奇数
      :eq(index)$(“ul li:eq(3)”)列表中的第四个元素（index 从 0 开始）
      :gt(no)$(“ul li:gt(3)”)列出 index 大于 3 的元素
      :lt(no)$(“ul li:lt(3)”)列出 index 小于 3 的元素
      :not(selector)$(“input:not(:empty)”)所有不为空的 input 元素
      :header$(":header")所有标题元素

      -

      :animated所有动画元素
      :contains(text)$(":contains(‘W3School’)")包含指定字符串的所有元素
      :empty$(":empty")无子（元素）节点的所有元素
      :hidden$(“p:hidden”)所有隐藏的

      元素

      :visible$(“table:visible”)所有可见的表格
      s1,s2,s3$(“th,td,.intro”)所有带有匹配选择的元素
      属性选择器
      elenment[属性]$(“a[href]”)所有带有 href 属性的元素
      elenment[属性=“属性值”]$(“a[href=’#’]”)所有 href 属性的值等于 “#” 的元素
      elenment[属性=“属性值”][…]$(“a[href=’#’]/[title=’#‘]”)所有 href 属性和title的值等于 “#” 的元素
      elenment[属性!=“属性值”]$(“a[href!=’#’]”)所有 href 属性的值不等于 “#” 的元素
      elenment[属性^=“属性值”]$(“a[href^=’#’]”)所有 href 属性的值包含以 “#” 开始的元素
      elenment[属性$=“属性值”]$(“a[href​$=’.jpg’]”)所有 href 属性的值包含以 “.jpg” 结尾的元素
      elenment[属性*=“属性值”]$(“a[href*=’.jpg’]”)所有 href 属性的值包含以 “.jpg” 的元素
      表单选择器
      :input$(":input")所有 元素
      :text$(":text")所有 type=“text” 的 元素
      :password$(":password")所有 type=“password” 的 元素
      :radio$(":radio")所有 type=“radio” 的 元素
      :checkbox$(":checkbox")所有 type=“checkbox” 的 元素
      :submit$(":submit")所有 type=“submit” 的 元素
      :reset$(":reset")所有 type=“reset” 的 元素
      :button$(":button")所有 type=“button” 的 元素
      :image$(":image")所有 type=“image” 的 元素
      :file$(":file")所有 type=“file” 的 元素
      表单过滤选择器
      :enabled$(":enabled")所有可用的 input 元素
      :disabled$(":disabled")所有不可用的 input 元素
      :selected$(":selected")所有下拉框选中的 input 元素
      :checked$(":checked")所有单选/复选框选中的 input 元素
      元素 元素

      ⑤. DOM操作

      内容操作

      1. html()

        html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数，则返回被选元素的当前内容。
$(selector).html(HTML内容)

      2. text()

        text() 方法方法设置或返回被选元素的文本内容。
当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
$(selector).text(文本内容)

      3. val()

        val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值。
$(selector).val(value值)

      属性操作

      1. 通用属性操作

        • attr()

           attr() 设置或返回元素的属性值。
操作元素的自定义属性建议使用语法：$(selector).attr(attribute)$(selector).attr(attribute,value)

        • removeAttr()

          removeAttr() 从元素中移除属性。
语法:
$(selector).removeAttr(attribute)

        • prop()

          prop() 设置或返回元素的属性值。
操作元素固有属性建议使用
$(selector).prop(attribute)
$(selector).prop(attribute,value)

        • removeProp()

          removeProp() 从元素中移除属性。
$(selector).removeprop(attribute)

      2. 对class属性操作

        • addClass()

          addClass() 添加class属性值
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
$(selector).addClass(class)
class 	必需。规定一个或多个 class 名称。

        • removeClass()

          removeClass() 删除class属性值
$(selector).addClass(class)

        • toggleClass()

          toggleClass() 切换class属性值
$(selector).toggleClass(class,switch)
class 	必需。规定添加或移除 class 的指定元素。如需规定若干 class，请使用空格来分隔类名。
switch 	可选。布尔值。规定是否添加或移除 class。

      CRUD操作

      1. append():父元素将子元素追加到末尾

        对象1.append(对象2):将对象2添加到对象1的内部，并且在末尾

      2. prepend():父元素将子元素追加到开头

        对象1.prepend(对象2):将对象2添加到对象1的内部，并且在开头

      3. appendTo():子元素追加到父元素的末尾

        对象1.appendTo(对象2):将对象1添加到对象2的内部，并且在末尾

      4. prependTo():子元素追加到父元素的末尾

        对象1.prepend(对象2):将对象1添加到对象2的内部，并且在开头

      5. after():添加元素到元素后面

        对象1.after(对象2):将对象2添加到对象1的后面。两者是兄弟关系

      6. before():添加元素到元素前面

        对象1.before(对象2):将对象2添加到对象1的前面。两者是兄弟关系

      7. remove():移除元素

        对象.remove():将对象删除

      8. empty():清空元素的所有后代元素

        对象.empty():将对象的后代元素全部清空，但是保留当前对象以及属性节点

      ⑥. 案例

      ⑦. Jquery高级

      动画

      1. 显示隐藏

        • hide():隐藏HTML元素

          $(selector).hide(speed,[easing],[fun]);
参数：
speed:动画的速度，三个预定义的值("slow","normal","fast"),或使用毫秒值表示
easing:用来指定切换效果，默认是 swing 可用参数 linear- swing: 动画执行的效果是先慢，中间快，最后慢- linear:动画执行时速度时匀速的
fun:在动画完成后执行的函数

        • show():显示HTML元素

          $(selector).show(speed,[easing],[fun]);

        • toggle():显示/隐藏HTML元素

          $(selector).toggle(speed,[easing],[fun]);

      2. 滑动显示和隐藏方式

        • slideDown()

          $(selector).slideDown(speed,[easing],[fun]);
参数：
speed:动画的速度，三个预定义的值("slow","normal","fast"),或使用毫秒值表示
easing:用来指定切换效果，默认是 swing 可用参数 linear- swing: 动画执行的效果是先慢，中间快，最后慢- linear:动画执行时速度时匀速的
fun:在动画完成后执行的函数

        • slideUp()

          $(selector).slideUp(speed,[easing],[fun]);

        • slideToggle()

          $(selector).slideToggle(speed,[easing],[fun]);

      3. 淡入淡出显示和隐藏方式

        • fadeIn()

          $(selector).fadeIn(speed,[easing],[fun]);
参数：
speed:动画的速度，三个预定义的值("slow","normal","fast"),或使用毫秒值表示
easing:用来指定切换效果，默认是 swing 可用参数 linear- swing: 动画执行的效果是先慢，中间快，最后慢- linear:动画执行时速度时匀速的
fun:在动画完成后执行的函数

        • fadeOut()

          $(selector).fadeOut(speed,[easing],[fun]);

        • fadeToggle()

          $(selector).fadeToggle(speed,[easing],[fun]);

      遍历

      1. JS的遍历方式

        for(初始化值;循环结束条件;步长){}

      2. Jquery的遍历方式

        • Jquery对象.each(callback)
        <script>$(function() {var li = $("ul li");$("#but").click(function() {// for (var i = 0; i < li.length; i++) {//     if ("山东" == li[i].innerHTML) {//         break;//         continue;//     }//     alert(li[i].innerHTML);// }li.each(function(index, elenment) {//1. 使用this获取// alert(this.innerHTML);//2. 使用索引// alert(index + " = " + elenment.innerHTML);if ("山东" == li[index].innerHTML) {// return false;  相当于break// return true;   相当于continue}alert(index + " = " + $(elenment).html());});});});
</script><body><input type="button" id="but" value="按钮" /><ul><li>你好</li><li>我好</li><li>他好</li><li>背景</li><li>山东</li><li>北京</li><li>上海</li><li>广东</li><li>M78</li><li>澳大利亚</li></ul>
</body>
        • $.each(Object,[callback])
        $.each(li, function() {if ("山东" == this.innerHTML) {// return false;  相当于break// return true;   相当于continue
}alert($(this).html());
});
        • for…of:
        for(存储对象变量 of 需要遍历的数组){}

        事件绑定

        1. Jquery标准的绑定方式

          $(selector).事件方法(函数);

        2. on绑定事件/off接触绑定

          $(selector).on("事件名称",函数);
$(selector).off("事件名称");
如果不传递参数，会解除组件所有事件

        3. 事件切换

          $(selector).toggle(函数1,函数2...);
注意：1.5以后取消,需要插件

      六.AJAX

      概念

      ASynchronous JavaScript and XML 异步的JavaScript和xml

      AJAX 是一种用于创建快速动态网页的技术。

      通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

      异步和同步：客户端和服务器端相互通信的基础上

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4jTpoBQc-1603158857890)(C:\Users\谜语菌\Documents\img\同步异步.png)]

      同步：客户端必须等待服务器端的响应。在等待期间客户端不可以进行其他操作

      异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他操作

      实现方式

      1. 原生的JS实现方式(了解)

        <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>// 创建方法function fun() {// 发送异步请求//1. 创建核心对象var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//2. 建立连接/*open() 参数1. 请求方式 ： GET POST* GET方式： 请求参数要在URL后面拼接。send()为空参* POST方式：请求参数在send()中定义2. 请求的URL3. 同步或异步请求：true(异步) or false(同步)*/xmlhttp.open("GET","ajaxServlet?username=tom",true);//3. 发送请求xmlhttp.send();//4. 处理响应//获取方式   xmlhttp.responseText;//什么时候获取服务器的响应//存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。xmlhttp.onreadystatechange=function(){//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("title").innerHTML=xmlhttp.responseText;}}}</script>
</head>
<body>
<input type="button" onclick="fun()" id="but" value="按钮" />
<h1 id="title"></h1>
</body>
</html>

        @WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 获取请求参数String username = request.getParameter("username");//2. 打印usernameSystem.out.println(username);//3. 响应response.getWriter().write("Hello"+username);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

      2. Jquery的实现方式(重点)

        • $.ajax()

           语法：
$.ajax({键值对<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="JS/jquery-3.3.1.min.js"></script><script>// 创建方法function fun() {$.ajax({url:"ajaxServlet",//请求的URLtype:"POST",// 请求的方式data:{"username":"jack","age":23},success:function (data) {alert(data);},error:function () {//如果请求出错时执行的回调函数alert("错误")},//设置接收到的响应数据格式datatype:"text"});}</script>
</head>
<body>
<input type="button" onclick="fun()" id="but" value="按钮" />
<h1 id="title"></h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="JS/jquery-3.3.1.min.js"></script><script>// 创建方法function fun() {$.ajax({url:"ajaxServlet",//请求的URLtype:"POST",// 请求的方式data:{"username":"jack","age":23},success:function (data) {alert(data);},error:function () {//如果请求出错时执行的回调函数alert("错误")},//设置接收到的响应数据格式datatype:"text"});}</script>
</head>
<body>
<input type="button" onclick="fun()" id="but" value="按钮" />
<h1 id="title"></h1>
</body>
</html>

        • $.get():发送get请求

          语法：$.(url,data,callback,type)
参数：- url:请求路径- data：请求参数- callback:回调函数- type:响应结果的类型<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="JS/jquery-3.3.1.min.js"></script><script>// 创建方法function fun() {$.get("ajaxServlet",{"username":"bulak"},function (data) {$("#title").html(data);},"text");}</script>
</head>
<body>
<input type="button" onclick="fun()" id="but" value="按钮" />
<h1 id="title"></h1>
</body>
</html>

        • $.post():发送post请求

          同上

      七.JSON

      概念：JavaScript Object Notation JavaScript对象表示法

      java中封装对象

      person p = new person();p.setName("张三");p.setAge(12);

      JavaScript中封装对象

      var p = {"name":"张三","age":23};
      • Json现在多用于存储和交换文本信息的语法
      • 进行数据的传输
      • json比XML更小、更快、更易解析

      语法

      1. 基本规则

        • 数据在键值对中名称:值
          • 键用引号引起来，也可以不使用引号
          • 值的类型
            1. 数字(整数或浮点数)
            2. 字符串(在双引号中)
            3. 逻辑值(true or false)
            4. 数组(在方括号中){“persons”:[{},{},{}]}
            5. 对象(在花括号中){“address”:{“province”:“陕西”…}}
        • 每组数据由逗号分隔
        • 花括号保存对象,使用{}定义json格
        • 方括号保存数组：[]

      2. 获取数据

        • json对象.键名
        • json对象[“键名”]
        • 数组对象
        var josn = {"name":"刘成大傻逼",age:32,'gender':true};
var josns = {"persons":{person1:{name:"张三",age:21,gender:true},person2:{name:"李四",age:22,gender:true},person3:{name:"王五",age:23,gender:false}}};
var josns2 = {person:[{name:"张三",age:21,gender:true},{name:"李四",age:22,gender:true},{name:"王五",age:23,gender:false}]};//获取所有的json对象
//使用for in 循环
for(var key in josn){alert(key+josn[key]);
}
var person = josns2.person;
for(var i =0;i<person.length;i++){var person2 = person[i];for(var key in person2){alert(key+":"+person2[key])}
}

      JSon数据和Java对象的相互转换

      • JSON常见解析器

        Jsonlib,Gson,fastjson,jackson

      1. JSON转为Java对象

        public class jack_java {public static void main(String[] args) throws JsonProcessingException {String json = "{\"name\":\"张三\",\"age\":23,\"gender\":\"男\"}";ObjectMapper mapper = new ObjectMapper();Student student = mapper.readValue(json, Student.class);System.out.println(student);}
}

      2. Java对象转为JSON

        1. 导入jackson的相关jar包
2. 创建Jackson核心对象 objectMapper

      3. 调用ObjectMapper的相关方法进行转换

        • 转换方法
          writeValue(参数1,obj)
          参数：
          File:将obj对象转换为JSON字符串，并保存到指定文件中
          Weiter：将obj对象转换为JSON字符串，并将JOSN数据填充到字节输出流中
          OutputStream:将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

          writeValueAsString(obj):将对象转为JSON字符串

        public class jack {
        public static void main(String[] args) throws Exception {
        Student s = new Student();
        s.setName(“张三”);
        s.setAge(23);
        s.setGender(“男”);
        //创建jackson核心对象
        ObjectMapper mapper = new ObjectMapper();
        //使用writeValueAsString()
        String s1 = mapper.writeValueAsString(s);
        System.out.println(s1);
        //打印 {“name”:“张三”,“age”:23,“gender”:“男”}
        //使用writeValue()
        mapper.writeValue(new File(“D:\a.txt”),s);
        mapper.writeValue(new FileWriter(“D:\b.txt”),s);
        mapper.writeValue(new FileOutputStream(“D:\c.txt”),s);
        }
        }

        ​```java
//集合转JSON
public class jackson_list_map {public static void main(String[] args) throws Exception {Student s1 = new Student("张三",23,"男");Student s2 = new Student("李四",24,"男");Student s3 = new Student("小红",27,"女");List<Student> list = new ArrayList<>();list.add(s1);list.add(s2);list.add(s3);//创建ObjectMapper对象ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(list);System.out.println(json);//[{"name":"张三","age":23,"gender":"男"},{"name":"李四","age":24,"gender":"男"},{"name":"小红","age":27,"gender":"女"}]Map<String,Student> map = new HashMap<>();map.put("张三",s1);map.put("李四",s2);map.put("小红",s3);String json1 = mapper.writeValueAsString(map);System.out.println(json1);//{"李四":{"name":"李四","age":24,"gender":"男"},"张三":{"name":"张三","age":23,"gender":"男"},"小红":{"name":"小红","age":27,"gender":"女"}}Map<String,String> map1 = new HashMap<>();map1.put("name","张三");map1.put("age","23");map1.put("genber","男");String json2 = mapper.writeValueAsString(map1);System.out.println(json2);//{"name":"张三","genber":"男","age":"23"}}
}

      注解

      1. @JsonIgnore：排除属性

      2. @JsonFormat：属性值的格式化

            //@JsonIgnore //忽略该属性//@JsonFormat(pattern = "yyyy-MM-dd")//格式化方法private Date birthday;public class jackson {public static void main(String[] args) throws Exception {Student s = new Student();s.setName("张三");s.setAge(23);s.setGender("男");s.setBirthday(new Date());//创建jackson核心对象ObjectMapper mapper = new ObjectMapper();String s1 = mapper.writeValueAsString(s);System.out.println(s1);}
}

      案例 — 校验用户名是否存在

      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="JS/jquery-3.3.1.min.js"></script><script>//1. 页面加载完毕执行JavaScript代码$(function () {//2. 获取username表单，绑定失去焦点事件$("#username").blur(function () {//1. 获取用户名var username = $(this).val();//2. 将用户名传递给服务器端$.get("finServlet",{username:username},function (data) {//获取响应数据var i = data.Err;if(i==1){//用户名存在$("#s_username").css("color","red").html(data.msg);}else {//用户名不存在$("#s_username").css("color","green").html(data.msg);}},"json");});});</script>
</head>
<body><form><input type="text" placeholder="请输入用户名" name="usename" id="username" /> <span id="s_username"></span> <br/><input type="password" placeholder="请输入密码" name="password" id="password" /> <br /><input type="submit" value="注册" /></form>
</body>
</html>

      @WebServlet("/finServlet")
public class FinServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");String username = request.getParameter("username");Map<String,Object> map = new HashMap<>();ObjectMapper mapper = new ObjectMapper();if("tom".equals(username)){//用户名存在map.put("Err",1);map.put("msg","用户名存在");mapper.writeValue(response.getWriter(),map);}else {//用户名不存在map.put("Err",0);map.put("msg","用户名可用");mapper.writeValue(response.getWriter(),map);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

      web前端阶段笔记

      Java wed

      wed概念概述：

      1. Javawed：
      • 使用Java语言开发基于互联网的项目

      1. 软件的架构：

        1. C/S：客户端/服务器端
        2. B/S：浏览器/服务器端

      2. B/S架构详解

        • 资源分类

          1. 静态资源

            • 使用静态网页开发技术发布的资源。

            • 特点：

              1. 所有用户访问，得到的效果是相同的

              ​ 如：文本，图片，HTML，CSS，JavaScript

              1. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

          2. 动态资源

            • 使用动态网页开发技术发布的资源

            • 特点：

              1. 所有用户访问，得到的效果可能不同

                如：jsp/servlet，php，asp…

              2. 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

      HTML

      一.语法规范

      ①.基本语法

      1. HTML标签是由尖括号包围的关键词，例如
      2. HTML标签通常是成对存在的，例如，和，称为双标签，第一个称为开始标签，第二个称为结束标签。
      3. 有些特殊的标签必须是单个标签，例如
        称为单标签。

      ②.标签关系

      双标签关系可以分为两类：包含关系和并列关系

      栗子：

      包含关系

      <head><title></title>
</head>

      并列关系

      <head></head>
<body></body>

      二.HTML基本结构标签

      ​ 每个网页都会有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

      1. 第一个HTML

        标签名定义说明
        HTML标签页面中最大的标签，称为 根标签
        文档的头部注意在head标签中我们必须要设置的标签是title
        文档的标题设置网页的标题
        文档的主体元素包含文档的所有内容，页面内容基本都是放到body中

        栗子：

        <html>
<head>
<title>第一个网页</title>
</head>
<body>Holly word</body>
</html>

      三.开发工具

      Visual Studio Code

      推荐插件

      插件作用
      Chinese (Simplified) Language
      Pack for VS Code      		中文简体语言包
      Open in Browser右击选择浏览器打开HTML文件
      JS-CSS-HTML Formatter每次保存，都会自动格式化js css 和 html 代码
      Auto Rename Tag自动重命名配对的HTML/XML标签
      CSS Peek追踪至样式

      IDEA

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html>

      1.<!DOCTYPE> 
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>的意思是：当前页面采取的是HTML5版本来显示网页。
注意：
1.1<!DOCTYPE> 声明位于文档中的最前面的位置，位于<html>之前。
1.2<!DOCTYPE> 不是一个HTML标签，它就是文档类型声明标签2.lang语言种类
用来定义当前文档显示的语言
2.1 en定义语言为英语      
2.2 zh-CN定义语言为中文3.字符集
字符集是多个字符的集合。以便计算机能够识别存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset=" UTF-8" />
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符.

      四.HTML常用标签

      ①.标签语义

      学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。

      根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

      ②.常用标签
      Ⅰ.标题标签：<h1>-<h6>(重要)
      <h1>我是一级标题</h2>
单词head的缩写，译为头部，标题
标签语义：作为标题使用，并且依据重要性递减
特点：加了标题的文字会加粗，字号也会依次变小，一个标题独占一行
      Ⅱ.段落和换行标签(重要)
      在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点： 文本在一个段落中会根据浏览器窗口的大小自动换行，段落和段落之间保有空隙

      <br />
单词break的缩写,意为打断换行。
标签语义：强制换行
特点：<br/>是个单标签，<br/>标签只是简单的开始新的一行，跟段落不同，段落之间会插入一些的垂直的间距。

      案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<h1>水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0</h1>
<h5>数据统计：水花兄弟合砍61分</h5>
<p>库里22投11中，三分14投4中，罚求1 1罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次。超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>
<p>汤普森22投8中，三分8投4中得到24分3篮板2助攻德拉蒙德 格林得到16分10篮板7助攻5盖帽，凯文 鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
<h5>兄弟对决升级：小库里给哥哥造成压力</h5>
<p>车里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
<p>但在西决第2场中，小库里攻防两端都打出杰出的表现。全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
<p>作者：pink老师<br />2019-8-8</p>
</body>
</html>
      Ⅲ.文本格式化标签
      在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
      语义标签
      加粗或者
      倾斜或者
      删除线或者
      下划线或者
      <!--推荐使用-->
<strong>加粗</strong>
<em>倾斜</em>
<dei>删除线</dei>
<ins>下划线</ins>
      Ⅳ.盒子<div>和<span>标签
      <div>和<span>是没有语义的，它们就是一个盒子，用来装内容
<div>这是盒子</div>
<span>这是盒子</span>
div是division的缩写，表示分割、分区。span 意为跨度、跨距。
特点：1.<div>标签用来布局，但是现在一行只能放一个<div>.大盒子2.<span>标签用来布局，一行上可以多个<span>.小盒子
      Ⅴ.图像标签和路径
      1. 图像标签
      在HTML标签中，<img>标签用于定义HTML页面中的图像
<img src="图像URL" />
单词 image 的缩写意为图像
src是<img>标签的必须属性，用于指定图像文件的路径
      属性属性值说明
      srcURL图像的路径
      alt文本图像无法显示时的替换文本
      title文本提示文本，鼠标悬停时显示
      width像素设置图像宽度
      height像素设置图像高度
      border像素设置图像的边框粗细

      注意：

      ​ ①.图像标签可以拥有多个属性值，必须写在标签名的后面

      ​ ②.属性之间不分先后

      ​ ③.属性采取键值对的格式，即key="value"的格式,属性=“属性值”

      1. 路径：

        1. 绝对路径

          • 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

            例如，“D:web\img\logo.gif"或完整的网络地址".gif”。

        2. 相对路径

          • 以引用文件所在位置为参考基础，而建立出的路径，简单来说，图片相对于HTML页面中的位置
      Ⅵ.超链接标签

      1. 链接的语法格式

        <a href="跳跃目标" target="目标窗口的弹出方式">文本或图像</a>
单词 anchor 的缩写意为：锚
href ： 用于指定连接目标的url地址，(必须属性)当为标签应用href属性时，他就具有了超链接功能。
target ：用于指定链接页面的打开方式，其中_self为默认值,_blank为在新窗口中打开方式

      2. 链接分类

        • 外部链接：外部网站的链接

          <a href="">百度</a>

        • 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可

          <a href="index.html">首页</a>

        • 空链接：如果当时没有链接目标时，使用

          <a href="#">空链接</a>

        • 下载链接：如果href里面地址是一个文件或者压缩包，也会下载文件

          <a href="文件.zip">文件</a>

        • 网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。

          <a href=""><img src="img.jpg"></a>

        • 锚点链接：可以快速定位到页面中的某个位置

          在链接文本的href属性中，设置属性值为#名字的形式
<a href="#tow">第二季</a>
找到目标位置标签，里面添加一个id属性=刚才名字
<h3 id="tow">第二季介绍</h3>
      Ⅶ.注释和特殊字符

      1. 注释

        HTML中的注释

        <!-- 注释语句 -->    快捷键：Ctrl+/

      2. 特殊字符

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jqNvtJ9e-1603158857817)(C:\Users\谜语菌\Documents\img\HTML.png)]

      Ⅷ.表格标签

      1. 表格的主要作用：用来显示，展示数据

      2. 基本语法

        <table><tr><td>单元格文字</td></tr>
</table>
1.<table></table>用于定义表格的标签。
2.<tr></tr>用于定义表格中的行
3.<td></td>用于定义表格中的单元格
4.字母td指表格中的数据(table data)，即数据单元格的内容

      3. 表头单元格标签

        表头单元格里面的文本内容加粗居中显示

        标签表示HTML表格的表头部分
      Ⅸ.列表标签

      表格是用来显示数据的，那么列表就是用来布局的

      列表的特点：整齐，整洁，有序，作为布局自由方便

      列表的分类：无序列表，有序列表，自定义列表

      1. 无序列表

        <ul>标签表示HTML中的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义

        语法：
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ul>
注意：
1.无序列表的哥哥列表项之间没有顺序之分，是并列的
2.<ul></ul>中只能嵌套<li></li>
3.<li></li>相当于一个容器，可以容纳所有元素
4.无序列表会带有自己的样式属性，但在实际使用时，会使用css来设置

        知识点：去掉 li 前面的项目符号

        list-style: none;

      2. 有序列表

        其各个列表项会按照一定的顺序排列定义

        <ol>用于定义有序列表，列表排序以数字显示，并且使用<li>定义列表项

        语法：
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ol>
注意：
1.<ol></ol>只能嵌套<li></li>
2.<li></li>相当一个容器，可以容纳所有元素
3.有序列表带有自己的样式属性，实际开发中，使用css设置

      3. 自定义列表

        常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

        <dl>用于定义自定义列表

        <dt>定义项目名词

        <dd>描述项目名词

        语法：
<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词2解释2</dd>
</dl>
注意：
1.<dl></dl>里面只能包含<dt></dt>和<dd></dd>
2.<dt></dt>和<dd></dd>的个数没有限制，经常是一个<dt>对应多个<dd>

      4. 总结

        标签名定义说明
          		无序列表只能包含
          • 没有顺序 使用较多。
          • 里面可以包含任何标签
            		有序列表只能包含
            • 有顺序 使用相对较少。
            • 里面可以包含任何标签
            		自定义列表只能包含
            。
            可以包含任何标签
          Ⅹ.表单标签

          1. 为什么需要表单：为了收集用户信息

          2. 表单的组成：表单域，表单控件，提示信息

            • 表单域

              表单域是一个包含表单元素的区域
<form>标签定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器.
语法：
<form action="url地址" method="提交方式" name="表单域名称">各种表单控件
</form>
              属性属性值作用
              actionurl地址用于指定处理数据的程序
              methodget/post用于设置表单数据的提交方式
              name名称指定表单名称，以区分同个页面多个表单

            • 表单控件 input，select，textarea

              1. 表单元素

                input是输入的意思，而在表单元素中用于收集用户信息，在标签中包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(文本，字段，复选框，按钮等)

                语法：
<input type="属性值" />
<input />为单标签
type属性设置不同用来指定不同的控件类型
                属性属性值描述
                type…设置不同用来指定不同的控件类型
                name由用户自定义定义input元素的名称
                value由用户自定义规定input元素的值
                placeholder提示信息显示提示信息
                checkedchecked默认选中的按钮或复选框
                maxlength正整数最大字段长度

            1.name 和value是每个表单元素都有的属性值主要给后台人员使用.
            2.name 表单元素的名字，要求单选按钮和复选框要有相同的name值

             - type属性值| 属性值   | 描述                                                 || -------- | ---------------------------------------------------- || button   | 定义可点击按钮(多数情况下，通过JS启动脚本)           || checkbox | 定义复选框   name属性相同                            || file     | 文件域,文件上传使用                                  || hidden   | 定义隐藏的输入字段                                   || image    | 定义图像形式的提交按钮                               || password | 定义密码字段                                         || radio    | 定义单选按钮   name属性相同才能实现多选1             || reset    | 定义重置按钮，会清除表单所有数据                     || submit   | 定义提交按钮，会把表单数据发送到服务器               || text     | 定义单行输入字段，用户在其中输入文本，默认长度20字符 |

             - <label>标签：为input元素，定义标注(标签)用于绑定一个表单元素，当点击<label>标签内文本时,浏览器就会自动将光标，转移到对应的表单元素上，增加用户体验```html语法：<label for="sex">男</label><input type="radio" name="sex" id="sex" />
核心：<label></label>标签的for元素应当与<input>标签id属性相同。

            2. select下拉表单元素在页面中，有多个选项让用户选择，并且需要节约空间时，可以使用<select>标签定义下拉列表```html语法：<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select>1.<select>中至少包含-对<option>。
2.在<option>中定义selected =”selected"时，当前项即为默认选中项。

          3. textarea文本域元素

            当用户输入内容较多的情况下使用

            <textarea>标签用于定义多行文本输入的控件

            语法：
<textarea cols="每行中的字符数" rows="显示的行数">文本内容
</textarea>

          CSS

          一.CSS含义

          1. HTML的局限性:不美观

          2. CSS是层叠样式表（Cascading Style Sheets）的简称.
            有时我们也会称之为CSS样式表或级联样式表。
            CSS是也是一种标记语言

            CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式边距等）以及版面的布局和外观显示样式。
            CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

          3. 1.HTML 主要做结构，显示元素内容.
            2.CSS 美化HTML，布局网页.
            3.CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS 1相分离。

          二.CSS简介

          1. css语法规范

            css规则由两个主要部分构成：选择器以及一条或多条声明
选择器 { 样式 }
h1 {color:red;font-size:25px;
}
·选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
·属性和属性值以“键值对”的形式出现
·属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
·属性和属性值之间用英文":"分开

          2. css代码风格

            以下代码书写风格不是强制规范，而是符合实际开发书写方式.

            • 样式格式书写

              • 紧凑格式

                h3 { color:deeppink;font-size: 20px; }

              • 展开格式（推荐）

                h3 {color:pink;font-size: 20px;
}

            • 空格规范

              h3 {color: pink;
}
属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

          3. css属性书写顺序：

            • 布局定位属性:display / position / float / clear / visibility /
            • 自身属性:width / height /margin / padding / border / background
            • 文本属性:color / font / text-decoration / text-align / vertcal-align /white-space / break-word
            • 其他属性(CSS3):content / cursor / border-radius/ box-shadow / text-shadow/ background:linear-gradien…

          三.CSS基础选择器

          1. 选择器的作用：

            选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

            h1 {	/*选择器*/color: red;	 /*属性  值*/声明font-size: 25px;	/*属性  值*/声明
}
以上CSS做了两件事：
1.找到所有的h1标签。选择器（选对人）。
2.设置这些标签的样式，比如颜色为红色（做对事）。

          2. 选择器的分类

            • 基础选择器：由单个选择器组成

              • 标签选择器

                1. 定义：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，频面中某一类标签指定统-的CSS 样式。

                2. 语法

                  标签名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;
}
缺点：不能设计差异化样式，只能选择全部当前标签

              • 类选择器

          3. 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

          4. 语法：

              .类名 {属性1: 属性值1;...}结构需要用class属性来调用class类的样式.red {color: red;}<div class=“red”>变红色</div>①类选择器使用”.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。②可以理解为给这个标签起了一个名字，来表示。③长名称或词组可以使用中横线来为选择器命名。④不要使用纯数字、中文等命名，尽量使用英文字母来表示。⑤命名要有意义，尽量使别人-眼就知道这个类名的目的。⑥命名规范：见附件（Web前端开发规范手册.doc）

            3. 多类名

            语法：

              <div class="类名1 类名2"></div>
（1）在标签class属性中写多个类名（2）多个类名中间必须用空格分开（3）这个标签就可以分别具有这些类名的样式

             开发场景：

            （1）可以把一些标签元素相同的样式（共同的部分）放到一个类里面.
            （2）这些标签都可以调用这个公共的类然后再调用自己独有的类.
            （3）从而节省CSS代码，统一修改也非常方便

            • id选择器

            id选择器可以为标有特定id的HTML元素指定特定的样式。
            HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义

            1. 语法：

              #id名 {属性1: 属性值1;...}例如：将id为nav元素中的内容设置为红色#nav {color: red;}

            2. id选择器和类选择器的区别3. 类选择器可以多个标签调用，id选择器只能调用一次2. id选择器和类选择器最大区别在于使用次数4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一 性的元素上，经常和JavaScript 搭配使用。
            • 通配符选择器

            在css中，通配符选择器使用"*"定义，表示选取页面中的所有元素

            1. 语法：

                * {属性1: 属性值1;...}●通配符选择器不需要调用，自动就给所有的元素使用样式●特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距后期讲）* {margin: 0;padding: 0;}
            • 基础选择器总结：
            基础选择器特点作用使用情况用法
            标签选择器不能差异化选择可以选择相同标签，比如p较多P {color: red;}
            类选择器可以根据需求选择可以选择一个或多个标签非常多.nav {color: red;}
            id选择器ID属性只能在每个HTML出现一次一次只能选择一个标签一般与JS搭配#nav {color: red;}
            通配符选择器选择的太多，有部分不需要选择所有标签特殊情况使用* {color: red;}

          四.CSS字体属性

          CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(粗体，斜体等)

          1. 字体系列

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

            p {font-family:"微软雅黑";
}
div {font-family: Arial,"Microsoft yahei","微软雅黑";
}
●各种字体之间必须使用英文状态下的逗号隔开
●-般情况下，如果有空格隔开的多个单词组成的字体加引号.
●尽量使用系统默认自带字体保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body{font-family：'Microsoft YaHei'，tahoma，arial，'Hiragino Sans GB'；}

          2. 字体大小

            CSS 使用 font-size 属性定义字体大小

            p {font-size: 20px;
}
●px（像素）大小是我们网页的最常用的单位
●谷歌浏览器默认的文字大小为16px
●不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
●可以给body指定整个页面文字的大小

          3. 字体的粗细

            CSS使用font-weight属性设置文本字体的粗细

            p {font-weight bold;
}
            属性值描述
            normal默认值(不加粗)
            bold定义粗体(加粗)
            100~900400等同于normal,700等同于bold

          4. 文字样式

            CSS使用 font-style 属性设置文本的风格

            p {font-style: normal;
}
            属性值作用
            normal默认值，浏览器会显示标准的字体样式font-style：normal；
            italic浏览器会显示斜体的字体样式。

            注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

          5. 字体的复合属性

            字体属性可以把以上文字样式综合来写，这样可以更节约代码：

            body{font: font-style font-weight font-size/line-height font-family;
}
●使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
●不需要设置的属性可以省略（取默认值），但必须保留font-size和font.family属性，否则font属性将不起作用

          6. 字体属性总结

            属性表示注意
            font-size字号单位px 像素
            font-family字体按照团队约定字体
            font-weight字体粗细加粗700，常规400，不跟单位
            font-style字体样式倾斜 italic 常规normal
            font字体连写字体连写注意顺序，字号和字体必须存在

          五.CSS文本属性

          CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

          1. 文本颜色
            color属性用于定义文本颜色

            div {color: red;
}
            表示属性值
            预定义颜色值red,green,blue,pink
            十六进制#FF0000,#FFFFFF
            RGB代码rgb(255,0,0),rgb(100%,0%,0%

          2. 对齐文本

            text-align属性用于设置元素内文本内容的水平对齐方式

            div {text-align: center;
}
属性值
left  左对齐(默认)   right 右对齐   center 居中对齐

          3. 装饰文本

            text-decoration属性规定添加到文本的修饰.可以给文本添加下划线，删除线，上划线等

            div {text-decoration: underline;
}
            属性值描述
            none默认。没有装饰线
            underline下划线，自带下划线
            overline上划线
            line-through删除线

          4. 文本缩进

            text-indent属性用来指定文本第一行的缩进，通常将段落的首行缩进di

            div {text-indent: 10px;
}
div {text-indent: 2em;
}
em是一个相对单位，就是当前元素(font-size)一个文字大小

          5. 行高

            line-height属性用于设置行间距(行高).可以控制文字行与行之间的距离

            p {line-height: 26px;
}
文字大小不改变改变的是上间距和下间距

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N4epMkdt-1603158857823)(C:\Users\谜语菌\Documents\img\39.jpg)]

            小技巧：单行文字垂直居中的代码

            CSS没有给我们提供文字垂直居中的代码.这里我们可以使用一个小技巧来实现.

            解决方案：让文字的行间距(行高)等于盒子的高度 就可以让文字在当前盒子内垂直居中

          6. 文本属性总结

            属性表示注意
            color文本颜色最常用 十六进制属性值
            text-align文本对其可以设置文字水平对齐方式
            text-indent文本缩进通常我们用于段落首行缩进两个字符
            text-decoration文本装饰重点 下划线 添加underline 取消none
            line-height行高控制行与行之间的距离

          六.CSS引入方式

          1. css的三种样式表
            按照CSS样式书写的位置，CSS样式表可以分为三类：

            1. 行内样式表(行内式)
            2. 内部样式表(嵌入式)
            3. 外部样式表(链接式)

          2. 内部样式表
            内部样式表（内嵌样式表）是写到html页面内部.是将所有的CSS代码抽取出来，单独放到-个

          样式表优点缺点使用情况控制范围
          行内样式表书写方便结构样式混写较少控制一个标签
          内部样式表部分结构与样式相分离没有彻底分离较多控制一个页面
          外部样式完全实现结构与样式相分离需要引入最多控制多个页面
          1. 使用调试工具
            ①Ctrl+滚轮 可以放大开发者工具代码大小。
            ②左边是HTML元素结构，右边是CSS样式。
            ③右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色。
            ④Ctrl + 0复原浏览器大小。
            ⑤如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
            ⑥如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

          七.Emmet语法

          1. 定义即作用

            Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的 编写速度，Vscode内部已经集成该语法.

            • 快速生成HTML结构语法
              1. 生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成
              2. 如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div
              3. 如果有父子级关系的标签，可以用>比如ul> li就可以了
              4. 如果有兄弟关系的标签，用+就可以了比如div+p如果生成带有类名或者id名字的，直接写.demo 或者#two tab 键就可以了
              5. 如果生成的div类名是有顺序的，可以用自增符号$
            • 快速生成CSS样式语法
              CSS基本采取简写形式即可.
              1. 比如w200按tab可以生成width：200px；
              2. 比如Ih26按tab 可以生成line-height：26px；

          八.复合选择器

          1. 定义

            在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

            • 复合选择器可以更准确、更高效的选择目标元素
            • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成
            • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

          2. 后代选择器

          后代选择器又称为包含选择器，可以选择父元素里的子元素
          语法：

          元素1 元素2 {样式；
}
上述语法表示选择元素1里面的所有元素2（后代元素）。
例如：
ul li {样式；
}
元素1 与 元素2之间用空格隔开
元素1 是父级 元素2 是子级， 样式最终选择的是元素2
元素2 可以是儿子，也可以是孙子，只要是元素1的后代即可
元素1 和 元素2 可以是任意基础选择器

          1. 子选择器

            子选择器只能选择作为某元素的最近一级子元素。
            语法：

            元素1 > 元素2 {样式声明}
表示选择元素1的最近一级的元素2
例如：
div > p { 样式； }/* 选择div里面所有最近一级的p标签元素 */
●元素1和元素2中间用大于号隔开
●元素1是父级，元素2是子级，最终选择的是元素2
●元素2 必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他儿子选择器

          2. 并集选择器

            并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
            语法：

            元素1,元素2 {样式;}
表示选择元素1 和 元素2
例如：
ul,div { 样式; } /* 选择ul 和 div元素标签 */
●元素1 和元素2中间用逗号隔开
●逗号可以理解为和的意思
●并集选择器通常用于集体声明

          3. 伪类选择器

          伪类选择器用于像某些选择器添加特殊效果
          伪类选择器用冒号(:)表示，如：:hover

          1. 链接伪类选择器

          a:link	    /*选择所有未被访问的链接*/
a:visited   /*选择所有已被访问的链接*/
a:hover	 	/*选择鼠标指针位于其上的链接*/
a:active	/*选择活动链接(鼠标正在按下未弹起的链接)*/

          注意事项：

          1. 为了确保生效，请按照LVHA的循顺序声明：link-：visited-：hover-：active。
2. 记忆法love hate或者Iv包包hao
3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。开发中写法：

          /* a 是标签选择器 所有的链接 */
a {color: gray;
}
/* :hober 是链接伪类选择器 鼠标经过 */
a:hover {color:red;  /* 鼠标经过变成红色 */
}

          2. :focus 伪类选择器

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

          input:focus {background-color: yellow;
}

          1. 复合选择器总结

            选择器作用特征使用情况符号及用法
            后代选择器用来选择后代元素可以是子孙后代较多符号是空格.nav a
            子代选择器选择最近一级元素只选择亲儿子较少符号是大于.nav>p
            并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号.nav,.header
            链接伪类选择器选择不同状态的链接跟相关较多重点a{}和a:hover实际开发写法
            :focus选择器选择获得光标的表单跟表单有关较少input:focus 记住这个写法

          九 .CSS的元素显示模式

          1. 什么是元素显示模式

            作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
            HTML元素一般分为块元素和行内元素

          2. 块元素

            常见的块元素有

            ~

            ,

            ,

            ，
            • 、
              1. 、
              2. 等，其中 是最典型的块元素。 

              1. 块元素的特点：1. 自己独占一行2. 高度，宽度，外边距以及内边距都可以控制3. 宽度默认是容器（父级宽度）的100%。4. 是一个容器及盒子，里面可以放行内或者块级元素2. 注意：- 文字类的元素内不能使用块级元素

          3. 行内元素

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

          1. 行内元素的特点：2. 相邻行内元素在一行上，一行可以显示多个3. 高、宽直接设置是无效的4. 默认宽度就是它本身内容的宽度5. 行内元素只能容纳文本或其他行内元素6. 注意：
          • <a>里面不能放<a>
          • 特殊情况链接<a>里面可以放块级元素，但是给转换一下块级模式最安全

          1. 行内块元素

            在行内元素中有几个特殊的标签一、、，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

            1. 行内块元素的特点
              1. 和相邻行内元素(行内块)在一行上，但是它们之间会有空白缝隙。一行可以显示多个(行内元素特点)
              2. 默认宽度就是它本身内容的宽度（行内元素特点）。
              3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

          2. 元素显示模式总结

            元素模式元素排列设置样式默认宽度包含
            块级元素一行只能放一个块级元素可以设置宽高父级容器的100%容器级可以包含任何标签
            行内元素一行可以放多个行内元素不可以直接设置宽高它本身内容的宽度容纳文本或其他行内元素
            行内块元素一行可以放多个行内块元素可以设置宽高它本身内容的宽度

          3. 元素显示模式转换

            特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性比如想要增加链接的触发范围。

            • 转换为块元素 display:block;
            • 转换为行内元素 display:inline;
            • 转换为行内块元素 display:inline-block;

          十.CSS的背景

          1. 背景颜色

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

            background-color:颜色值；
一般情况下元素背景颜色默认值是 transparent(透明)

          2. 背景图片

            background-image : none | urlnone  无背景图(默认)
url   使用绝对或相对地址指定背景图片

          3. 背景平铺

            background-repeat 属性设置背景图像的平铺

            background-repeat: repeat | no-repeat | repeat-x | repeat-y
            参数值作用
            repeat背景图像平铺(默认)
            no-repeat背景图像不平铺
            repeat-x背景图像在横向上平铺
            repeat-y背景图像在纵向上平铺

            页面元素既可以添加背景颜色也可以添加背景图片只不过背景图片会压住背景颜色

          4. 背景图片位置

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

            background—position: x y;
参数含义：x坐标和y坐标。可以使用方位名词和精确单位
            参数值说明
            length百分数|由浮点数字和单位标识符组成的长度值
            positiontop|center|bottom|left|center|right 方位名词

            1. 参数是方位名词

              • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left 效果一致
              • 如果只指定了一个方位名词，另-个值省略，则第二个值默认居中对齐

            2. 参数是精确单位

              • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
              • 如果只指定一个值，那该数值一定是x坐标，y坐标默认居中

            3. 参数是混合单位

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

          5. 背景图像固定(背景附着)

            background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
            background-attachment 后期可以制作视差滚动效果

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

          6. 背景复合写法

            为了简化背景属性的代码，我们可以将这些属性合并简写在同一一个属性background中。从而节约代码量
            当使用简写属性时，没有特定的书写顺序，-般习惯约定顺序为：background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

            background: transparent url (image. jpg) repeat--y fixed top ;

          7. 背景颜色半透明

            CSS3 提供了背景颜色半透明的效果

            background: rgba(0,0,0,0.3);
            • 最后一个值是 alpha 透明度，取值范围 0~1之间
            • 背景半透明指盒子半透明，盒子内容不受影响

          8. 背景总结

            属性作用值
            background-color背景颜色预定义的颜色值/十六进制/RGB代码
            background-image背景图片url
            background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
            background-position背景位置分别是x坐标，y坐标
            background-attachment背景附着scroll(背景滚动)fixed(背景固定)
            简写书写简单书写顺序:背景颜色，背景图片，地址，背景平铺，背景滚动，背景位置
            背景色半透明背景颜色半透明background：rgba（0，0，0，0.3）；后面必须是 4个值

          十一.CSS的三大特性

          层叠性 继承性 优先级

          1. 层叠性

          相同的选择器设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要是解决样式冲突问题。
          层叠性原则：

          • 新写的样式会覆盖前面重复的样式
          • 样式不冲突，不会层叠

          1. 继承性

            CSS中的继承:子标签会继承父标签的某些样式，如:文本颜色和字号。

            1. 特点：

              • 恰当的使用继承可以简化代码，降低css样式的复杂性
              • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，及color属性)

            2. 行高的继承

            body {font: 12px/1.5 Microsoft yahei;
}
            • 行高可以跟单位也可以不跟单位
            • 如果子元素没有设置行高，则会继承父元素的行高为1.5
            • 此时子元素的行高是：当前子元素的文字大小的1.5倍
            • body行高 1.5 这样写的优势，子元素可以根据自己的文字大小自动调整行高。

            1. 优先级

              当同一个元素指定多个选择器，就会有优先级产生

              • 选择器相同，则执行层叠性
              • 选择器不同，则根据选择器权重执行
              选择器选择器权重
              继承or *0，0，0，0
              元素选择器0，0，0，1
              类选择器，伪类选择器0，0，1，0
              ID选择器0，1，0，0
              行内样式 style=""1，0，0，0
              ！important 重要的无限大
              • 优先级注意点：
              1. 权重是由4组数字组成，但是不会有进位
              2. 可以理解为类选择器永远大于元素选择器id选择器永远大于标签选择器，以此类推.
              3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
              4. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
                权重叠加：
                如果是复合选择器，则会有权重叠加，需要计算权重。(权重相加)
              • div ul li —> 0,0,0,3
              • .nav ul li —> 0,0,1,2
              • a:hover —>0,0,1,1
              • .nav a —> 0,0,1,1

          十二.CSS盒子模型

          ①.看透网页布局的本质

          网页布局的过程
          ①. 先准备好相关的网页元素，网页元素基本都是盒子，Box
          ②. 利用CSS设置好盒子样式，然后摆放到相应位置
          ③. 在盒子里装内容

          页面布局的整体思路

          1. 必须确定页面的版心（可视区），我们测量可得知。
          2. 分析页面中的行模块，以及每个行模块中的列模块。其页面布局第一准则.
          3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置.页面布局第二准则
          4. 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要
          5. 所以，先理清楚布局结构，再写代码尤为重要这需要我们多写多积累

          ② .盒子模型组成

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8lYa6Q2-1603158857826)(C:\Users\谜语菌\Documents\img\box.jpg)]

          盒子模型：就是把HTML页面中的布局元素看成一个矩形的盒子，也就是一个装内容的容器。
          CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框，外边距，内边距，和实际内容。

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9KR0P90-1603158857830)(C:\Users\谜语菌\Documents\img\boxxj.jpg)]

          ③.边框(border)

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNYDqD0J-1603158857834)(C:\Users\谜语菌\Documents\img\border.jpg)]
          border可以设置元素的边框。边框由三部分组成：边框宽度，边框样式，边框颜色

          • 语法：
          border : border-width||border-style||border-color
          属性作用值
          border-width定义边框粗细一般使用px
          border-style边框样式solid实线 dashed虚线 dotted点线
          border-color边框颜色颜色值
          1. 边框的复合写法：
          border: 1px solid red;  /*没有顺序*/

          1. 四个边框可以分开写：

            border-方位:top bottom right left

          2. 边框会额外增加盒子的实际大小，因此有两种方式解决：

            1. 测量盒子大小的时候，不量边框
            2. 如果测试的时候包含了边框，则需要width/height减去边框宽度

          3. 表格的边框设置
            border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
            语法：

          border-collapse:collapse;

          • collapse 单词是合并的意思

          • border-collapse:collapse; 表示相邻边框合并在一起

          ④.内边距(padding)

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

          padding-方位: top bottom left right
          1. 内边距的复合写法
          值的个数作用
          padding: 5px;1个值，代表上下左右都有5px
          padding: 5px 10px;2个值，代表上下是5px，左右是10px
          padding: 5px 10px 20px;三个值，代表上5px 左右10px 下20px
          padding: 5px 10px 20px 30px;四个值，代表上5px 右10px 下20px 左30px 顺时针
          1. 注意：当我们给盒子指定padding值后发生了两件事
            1. 内容和边框有了距离，添加了内边距
            2. padding影响了盒子实际大小。
          2. 解决方案：
            • 如果保证盒子大小保持一致，则让width/height 减去多出来的内边距大小即可
            • 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

          ⑤.外边距(margin)

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

          margin-方位: top bottom left right
          1. 外边距的复合写法(与padding写法一致)
          值的个数作用
          margin: 5px;1个值，代表上下左右都有5px
          margin: 5px 10px;2个值，代表上下是5px，左右是10px
          margin: 5px 10px 20px;三个值，代表上5px 左右10px 下20px
          margin: 5px 10px 20px 30px;四个值，代表上5px 右10px 下20px 左30px 顺时针
          1. 外边距的典型运用

            margin可以让块级盒子水平居中，但是要满足两个条件

            1. 盒子必须指定了宽度

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

            .header {width: 900px;margin: 0 auto;
}
常见写法
● margin-left: auto; margin-rigth: auto;
● margin: auto;
● margin: 0 auto;

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

            2. 外边距合并：
              使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
嵌套块元素垂直外边距塌陷：对于两个嵌套关系（好关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
浮动不存在外边距合并

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w52fkrd2-1603158857837)(C:\Users\谜语菌\Documents\img\hebing.jpg)]

          1. 解决方案：
            1. 可以为父元素定义上边框
            2. 可以为父元素定义上内边距
            3. 可以为父元素添加overflow:hidden。
          2. 清除内外边距

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

            * {padding: 0;margin: 0;
}

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

          ⑥.总结：

          1. 布局为啥用不同盒子，我只想用div？
            标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大文字段落就用p
          2. 为啥用辣么多类名？
            类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。
          3. 到底用margin还是padding？
            大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
          4. 自己做没有思路？
            布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。

          ⑦.圆角边框

          在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

          border-radius 属性用于设置元素的外边框圆角

          语法：

          border-radius: length;

          radius 半径(圆的半径)原理：圆与边框的交集形成圆角效果

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19PdAerz-1603158857841)(C:\Users\谜语菌\Documents\img\yuan.jpg)]

          • 参数值可以为数值或百分比形式
          • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
          • 如果是个矩形，设置为高度的一半就可以做
          • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
          • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-b8ttom-left-radius

          ⑧.盒子阴影

          CSS3 中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

          box-shadow: h-shadow v-shadow blur spread color inset;
          值描述
          h-shadow必须。水平阴影的位置，允许负值
          v-shadow必须。垂直阴影的位置，允许负值
          blur可选。模糊距离
          spread可选。阴影的尺寸
          color可选。阴影的颜色
          inset可选。将外部阴影(outset)改为内部阴影

          注意：

          1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
          2. 盒子阴影不占空间，不会影响其他盒子排列

          :hover ：鼠标经过(那个元素都可以使用)

          ⑨.文字阴影：

          CSS3 中新增了盒子阴影，我们可以使用text-shadow属性为文本添加阴影

          语法：

          text-shadow: h-shadow v-shadow blur color;
          值描述
          h-shadow必须。水平阴影的位置，允许负值
          v-shadow必须。垂直阴影的位置，允许负值
          blur可选。模糊距离
          color可选。阴影的颜色

          十三.浮动(folat)

          ①.传统网页布局的三种方式

          网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应的位置。

          CSS提供了三种传统布局方式(简单说，就是盒子该如合进行排列顺序)

          • 普通流(标准流)

          • 浮动

          • 定位

          • 标准流(普通流/文档流)
            所谓的标准流：就是标签按照规定好的默认方式排列。

            1. 块级元素会独占一行，从上到下顺序排列
            • 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
            1. 行内元素会按照顺序，从左到右顺序排序，碰到父元素边缘会自动换行
            • 常用元素:span、a、i、em等
            • 注意：实际开发中，一个页面基本都包含 了这三种布局方式（后面移动端学习新的布局方式）。

          • 常见的网页布局

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIpZgwLE-1603158857844)(C:\Users\谜语菌\Documents\img\bianzhun.jpg)]

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5IxPiCJs-1603158857846)(C:\Users\谜语菌\Documents\img\biaozhun2.jpg)]

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3NJt56P-1603158857848)(C:\Users\谜语菌\Documents\img\bianzhun3.jpg)]

          ②.为什么需要浮动？

          有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。浮动最典型的应用：可以让多个块级元素一行内排列显示。

          • 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

          ③.什么是浮动？

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

          • 语法：

            选择器{ float: 属性值; }
            属性值描述
            none元素不浮动(默认值)
            left元素向左浮动
            right元素向右浮动

          ④.浮动特性(重点)

          1. 浮动元素会脱离标准(脱标)

            • 设置浮动的元素最重要的特性：

              1. 脱离标准普通流的控制(浮)移动到指定位置(动),(脱标)

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

              [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1s1zrVm-1603158857850)(C:\Users\谜语菌\Documents\img\sss.jpg)]

          2. 浮动的元素会一行内显示并且元素顶部对齐

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

              [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A0KM42KX-1603158857853)(C:\Users\谜语菌\Documents\img\fu.jpg)]

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

          3. 浮动元素会具有行内块元素的特性

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

            • 如果块级盒子没有设置宽度，默认宽度和父级-样宽，但是添加浮动后，它的大小根据内容来决定
            • 浮动的盒子中间没有缝隙，是紧挨在一起的
            • 行内元素同理

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

          为了约束浮动元素位置我们网页布局一般采取的策略是：
          先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.
          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mPtEGeN0-1603158857855)(C:\Users\谜语菌\Documents\img\fu1.jpg)]

          ⑥.浮动布局的注意点

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

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

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

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

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

          ⑦.清除浮动

          1. 为什么需要清除浮动？

            由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7DlEkjTn-1603158857857)(C:\Users\谜语菌\Documents\img\cdas.jpg)]

            由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

          2. 清除浮动本质

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

          3. 清除浮动

            • 语法

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

              实际开发中，几乎只用 clear:both； 清除浮动的策略是闭合浮动。

            • 清除浮动的方法

              1. 额外标签法也称为隔墙法，是W3C的推荐做法

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

                例如：

                • 优点：通俗易懂，书写方便
                • 缺点：添加许多无意义的标签，结构化较差
                • 注意：要求这个新的空标签必须是块级元素。

              2. 父级添加 overflow 属性

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

                • 优点：代码简洁
                • 缺点：无法显示溢出的部分

              3. 父级添加 after 伪元素

                :after 方式是额外标签法的升级版，给父元素添加

                .clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {	  /* IE6、7专有 */*zoom: 1;
}
                • 优点：没有增加标签，结构简单
                • 缺点：照顾低版本浏览器

              4. 父级添加双伪元素

                也是给父元素添加

                .clearfix:before,.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}
                • 优点：代码更简洁
                • 缺点：照顾低版本浏览器

          4. 清除浮动总结

            1. 为什么清除浮动？

              • 父级没高度
              • 子盒子浮动了
              • 影响下面布局了，我们就应该清除浮动

            2. 清除浮动方式

              清除浮动方式优点缺点
              额外标签法通俗易懂，书写方便添加许多无意义标签，结构化较差
              父级overflow:hidden;书写简单溢出隐藏
              父级after伪元素结构语义化正确由于IE6-7不支持：after，兼容性问题
              父级双伪元素结构语义化正确由于IE6-7不支持：after，兼容性问题

          ⑧.网页制作注意事项

          1. 确定版心

            每个版心都要水平居中对挤，可以定义版心为公共类：

            .w {width: XXXpx;margin: auto;
}

          2. header

            logo(商标)

            nav(导航栏)

            • 实际开发中，我们不会直接用链接a而是用li包含链接（li+ a）的做法。
              • lita语义更清晰，一看这就是有条理的列表型内容。
              • 如果直接用a，搜索引|擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索弓擎有降权的风险），从而影响网站排名
            • 注意：
              • 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示.
              • 这个nav导航栏可以不给宽度将来可以继续添加其余文字
              • 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

          十四.定位

          ①.为什么需要定位

          以下情况使用标准流或者浮动能实现吗？

          1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WL1wkAwR-1603158857858)(C:\Users\谜语菌\Documents\img\ding.jpg)]

          2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afjvazhg-1603158857861)(C:\Users\谜语菌\Documents\img\ding1.jpg)]

          使用场景

          1. 浮动可以让多个块级盒子一 行没有缝隙排列显示，经常用于横向排列盒子。
          2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

          ②.定位的组成

          定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

          定位 = 定位模式 + 边偏移

          定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

          1. 定位模式

            定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

            值语义
            static静态定位
            relative相对定位
            absolute绝对定位
            fixed固定定位

          2. 边偏移

            边偏移就是定位的盒子移动到最终位置。有top、bottom.left 和right 4个属性。

            边偏移属性示例描述
            toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离
            bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线距离
            leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离
            rightright:80px右侧偏移量，定义元素相对于其父元素右边线的距离

          3. 静态定位

            静态定位是元素的默认定位方式，无定位的意思。

            语法：

            选择器 {position: static;
}
            • 静态定位按照标准流特性摆放位置，它没有边偏移
            • 静态定位在布局中很少使用

          4. 相对定位

            相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

            语法：

            选择器 {position: relative;
}
            • 相对定位的特点：
              • 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
              • 原来在标准流的位置继续占有，后面的盒子依然以标准流的方式对待它。(不脱标，继续保留原来的位置)
              • 因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

          5. 绝对定位

            绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

            语法：

            选择器 {position: absolute;
}
            • 绝对定位特点：
              • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
              • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
              • 绝对定位不再占有原先的位置。（脱标）
            • 子绝父相：子级是绝对定位的话，父级要用相对路径
              • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
              • 父盒子需要加定位限制子盒子在父盒子内显示。
              • 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
              • 总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

          6. 固定定位

            固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

            语法：

            选择器 {position: fixed;
}

            • 相对定位特点：

              1. 以浏览器的可视窗口为参照点移动元素
              • 跟父元素没有任何关联
              • 不随滚动条滚动
              1. 固定定位不再占有原先位置
              • 固定定位也是脱标的

            • 固定定位小技巧：固定在版心右侧位置

              小算法：

              • 让固定定位的盒子left：50%.走到浏览器可视区（也可以看做版心）的一半位置。
              • 让固定定位的盒子margin-left：版心宽度的一半距离。多走 版心宽度的一半位置

          7. 粘性定位

            粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的

            语法：

            选择器 {position: sticky;
}
            • 粘性定位的特点
              • 以浏览器的可视窗口为参照点移动元素(固定定位特点)
              • 粘性定位占有原先的位置（相对定位特点）
              • 必须添加top、left、right.bottom其中一个才有效

          8. 定位总结：

            定位模式是否脱标移动位置是否常用
            static 静态定位否不能使用边偏移很少
            relative 相对定位否(占有位置)相对于自身偏移常用
            absolute 绝对定位是(不占有位置)带有定位的父级常用
            fixed 固定定位是(不占有位置)浏览器可视区常用
            sticky 粘性定位否(占有位置)浏览器可视区目前很少

          ③.定位的叠放次序

          在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序

          语法：

          选择器 {z-index: 1;
}

          • 数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上

          • 如果属性值相同，则按照书写顺序，后来居上

          • 数字后面不能加单位

          • 只有定位的盒子才有z-index属性

          ④.定位的拓展

          1. 绝对定位的盒子居中

            加了绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。

            • left：50%；：让盒子的左侧移动到父级元素的水平中心位置。
            • margin-left：-100px；：让盒子向左移动自身宽度的一半。

          2. 定位的特殊特性

            绝对定位和固定定位和浮动类似。

            • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

          3. 脱标的盒子不会触发外边距塌陷

            • 浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

          4. 绝对定位(固定定位)会完全压住盒子

            浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

            但是绝对定位（固定定位）会压住下面标准流所有的内容。

            浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qLNXB8h-1603158857864)(C:\Users\谜语菌\Documents\img\dja.jpg)]

          十五.网页布局总结

          通过盒子模型，清楚知道大部分html标签是一个盒子。
          通过CSS浮动、定位可以让每个盒子排列成为网页。

          一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

          1. 标准流

            可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

          2. 浮动

            可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

          3. 定位

            定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

          十六.元素的显示和隐藏

          类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现

          本质：让一个元素在页面中隐藏或者显示出来。

          1. display(显示隐藏)

            • display属性用于设置一个元素应如何显示。

              • display: none; 隐藏对象
              • display: block; 除了转换为块级元素之外，同时还有显示元素的意思

            • display 隐藏元素后室不再占有原来的位置。

              后面应用及其广泛，搭配JS可以做很多的网页特效。

          2. visibility(显示隐藏)

            • visibility属性用于指定一个元素应可见还是隐藏。

              • visibility：visible；元素可视
              • visibility：hidden；元素隐藏

            • visibility隐藏元素后，继续占有原来的位置。

              如果隐藏元素想要原来位置，就用visibility：hidden

              如果隐藏元素不想要原来位置，就用display：none（用处更多重点）

          3. overflow(溢出显示隐藏)

            • overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
              • overflow：visible；不隐藏内容，也不加滚动条
              • overflow：hidden；不显示超过对象尺寸的内容，超出的部分隐藏掉
              • overflow：scroll；不管超出内容否，总是显示滚动条
              • overflow：auto；超出自动显示滚动条，不超出不显示滚动条
            • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
              但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

          十七.CSS高级技巧

          ①.精灵图

          1. 为什么需要精灵图

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KoAlK7va-1603158857866)(C:\Users\谜语菌\Documents\img\fdsf.jpg)]

            一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

            因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

            核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

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

          2. 使用精灵图技术

            • 使用精灵图核心：
              • 精灵图主要针对于小的背景图片使用。
              • 主要借助于背景位置来实现–background-position。
              • 一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理。）
            • 精灵图具体使用：
              • 设置同一张精灵图背景
              • 使用background-position调整位置，显示图标

          ②.字体图标

          • 字体图标使用场景：主要用于显示网页中通用，常用的一些小图标

          • 精灵图有诸多优点，但是缺点也很明显

            • 图片文件较大
            • 图片本身放大缩小会失真
            • 一旦图片制作完毕想要更换非常复杂

            此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
            字体图标可以为前端工程师提供-种方便高效的图标使用方式，展示的是图标，本质属于字体。

            1. 字体图标的优点
              • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
              • 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
              • 兼容性：几乎支持所有的浏览器，请放心使用
              • 注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

            总结：

            • 如果遇到一-些结构和样式比较简单的小图标，就用字体图标。

            • 如果遇到一些结构和样式复杂点的小图片，就用精灵图。

            1. 字体图标的下载网站

              /

            2. 字体图标的引入

              下载完毕之后，注意原先的文件不要删，后面会用。

              • 把下载包里面的fonts文件夹放入页面根目录下

                [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O70W9veO-1603158857867)(C:\Users\谜语菌\Documents\img\ziti.jpg)]

              • 在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。
                一定注意字体文件路径的问题。

                @font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?7kkyc2');src: url (' fonts/icomoon.eot?7kkyc2#iefix') format(' embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon. woff?7kkyc2") format ('woff') ,url ('fonts/icomoon. svg?7kkyc2#icomoon') format('svg') ;font-weight: normal;font-style: normal;
}

              • html标签内添加小图标

                [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sA8O3DDD-1603158857868)(C:\Users\谜语菌\Documents\img\tu.jpg)]

            3. 字体图标的追加

              如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
              把压缩包里面的selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

              [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lnuNe8lO-1603158857870)(C:\Users\谜语菌\Documents\img\zititu.jpg)]

          ③.CSS三角的做法

          网页中常见–些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。
          一张图，你就知道CSS三角是怎么来的了，做法如下：

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvg0Legy-1603158857873)(C:\Users\谜语菌\Documents\img\sanjiao.jpg)]

          div{width：0；height：0；line-height：0；font-size：0；border：50px solid transparent；border-left-color：pink；
}

          ④.用户界面样式

          1. 鼠标样式 cursor

            li {cursor: pointer;}

            设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

            属性值描述
            default默认
            pointer小手
            move移动
            text文本
            not-allowed禁止

          2. 表单轮廓线 outline

            给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的蓝色边框。

            input {outline: none;
}

          3. 防止拖拽文本域 resize

            实际开发中，我们文本域右下角是不可以拖拽的。

            textarea{resize: none;
}

          ⑤.vertical-align 属性应用

          CSS的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

          官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

          语法：

          vertical-align: baseline | top | middle | bottom
          值描述
          baseline默认。元素放置在父元素的基线上
          top把元素的顶端与行中最高元素的顶端对齐
          middle把此元素放置在父元表的中部。
          bottom把元素的顶端与行中最低的元素的顶端对齐。

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bekyIca-1603158857875)(C:\Users\谜语菌\Documents\img\xian.jpg)]

          图片、表单都属于行内块元素，默认的vertical-align是基线对齐。

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0j9Tkpx-1603158857877)(C:\Users\谜语菌\Documents\img\jixian.jpg)]

          此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

          • 解决图片底部默认空白缝隙问题

            bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
            主要解决方法有两种：

            1. 给图片添加vertical-align: middle | topl bottom等。（提倡使用的）
            2. 把图片转换为块级元素display：block；

          ⑥.文本溢出显示省略号

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tB8pchSk-1603158857878)(C:\Users\谜语菌\Documents\img\wenziyichu.jpg)]

          1. 单行文本溢出显示省略号的三个条件

            /*1.先强制一行内显示文本*/
white-space: nowrap;（默认normal自动换行）
/*2.超出部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出部分*/
text-overflow: ellipsis;

          2. 多行文本溢出显示省略号

            多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

            overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

          ⑦.常见的布局技巧

          1. margin负值的运用

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i84AaP8Y-1603158857880)(C:\Users\谜语菌\Documents\img\margin.jpg)]

            • 让每个盒子margin往左侧移动-1px正好压住相邻盒子边框
            • 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

          2. 文字环绕浮动元素

            巧妙运用浮动元素不会压住文字的特性

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeMuKyQl-1603158857882)(C:\Users\谜语菌\Documents\img\fuddd.jpg)]

          3. CSS三角强化

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wbGG0N8N-1603158857883)(C:\Users\谜语菌\Documents\img\sanjiaoqianghua.jpg)]

            width: 0; 
height: 0;
border-color: transparent red transparent transparent; 
border -style: solid; 
border-width: 22px 8px 0 0;

          ⑧.CSS初始化

          不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

          简单理解：CSS初始化是指重设浏览器的样式。（也称为CSS reset）

          每个网页都必须首先进行CSS初始化。这里我们以京东css初始化代码为例。

          Unicode编码字体：

          把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

          比如：

          黑体\9ED1\4F53

          宋体\5B8B\4F53

          微软雅黑\5FAE\8F6F\96C5\9ED1

          JavaScript

          一.JavaScript基础

          1. 概念：一门客户端脚本语言

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

          2. 功能：

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

          3. 组成

            JavaScript = ECMAScript + JavaScript特有的(BOM+DOM)

          二.ECMAScript:客户端脚本语言的标准

          Ⅰ.基本语法

          ①.与HTML结合方式

          1. 内部JS：

            • 定义

          ②.注释
           1. 单行注释：//注释内容2. 多行注释：/\*注释内容\*/
          ③.数据类型
          1. 原始数据类型(基本数据类型)：
            • number : 数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
            • String : 字符串。“abc” ‘abc’
            • boolean : true 和 false
            • null : 一个对象为空的占位符
            • undefined : 未定义。如果一个变量没有给初始化值，则会默认为undefined
          2. 引用数据类型:对象
          ④.变量

          • 定义：一小块存储数据的内存空间

          • Java是强类型语言，而JavaScript是弱类型语言

            • 强类型：在开辟变量存储空间时，定义了空间将来存储数据的类型，只能存储固定类型的数据
            • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意数据类型的数据

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

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

            <script>var num = 10;var num2 = 10.02;var num3 = NaN;document.write(num + "---" + typeof(num) + "<br>");document.write(num2 + "---" + typeof(num2) + "<br>");document.write(num3 + "---" + typeof(num3) + "<br>");var str = "abc";var obj = null;var obj2 = undefined;document.write(str + "---" + typeof(str) + "<br>");document.write(obj + "---" + typeof(obj) + "<br>");document.write(obj2 + "---" + typeof(obj2) + "<br>");var falo = false;document.write(falo + "---" + typeof(falo) + "<br>");
</script>
10---number
10.02---number
NaN---number
abc---string
null---object
undefined---undefined
false---boolean
            • 注：null运算后得到的时object
          ⑤.运算符

          1. 一元运算符：只有一个运算数的运算符

            ++ , – ,+(正号),-(负号)

            • ++（–）在前，先自增（自减），再运算
            • ++（–）在后，先运算，再自增（自诚）
            • +(-):正负号
              • 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
              • 其他类型转number
                • string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                • boolean转number：true转为1，false转为0

          2. 算数运算符

            + - * / % …

          3. 赋值运算符

            = += -= …

          4. 比较运算符

            > < >= <= == ===(全等于)

            • 比较方式

              1. 类型相同：直接比较
              • 字符串：按照字典顺序比较。按位逐–比较，直到得出大小为止。
              1. 类型不同：先进行类型转换，再比较
              • ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

          5. 逻辑运算符

            && ：与

            ||：或

            ！：非

            • 其他类型转boolean:

              !!num;
              • number：0或NaN为假，其他为真
              • string：除了空字符串（""），其他都是true
              • null&undefined:都是false
              • 对象：所有对象都是true

          6. 三元运算符

            ？：表达式

            语法：

            表达式？ 值1:值2;
判断表达式的值，如果是true则取值1，如果是false则取值2；
var a = 3;
var b = 4;
var c = a > b ? 1:0;

          7. 流程控制语句

            1. if… .else. . .
            2. switch
            • 在java中，switch语句可以接受的数据类型：byte int shor char，枚举（1.5），String（1.7）
              • switch（变量）：
                case值：
            • 在JS中，switch语句可以接受任意的原始数据类型
            1. while
            2. do… .while
            3. for

            案例：九九乘法表

                document.write("<table align='center'>");for (var i = 1; i <= 9; i++) {document.write("<tr>");for (var j = 1; j <= i; j++) {document.write("<td>");document.write(j + "*" + i + "=" + i * j);document.write("</td>");}document.write("</tr>");document.write("<br>");}document.write("</table>");

          Ⅱ.基本对象

          ①.Function: 函数(方法)对象

          1. 创建：

            var fun = new Function(形参列表,方法体);
function fun(形参列表){方法体；
}
var fun = function(形参列表){方法体;
}

          2. 方法：

          3. 属性：

            length: 代表形参的个数

          4. 特点：

            • 方法定义时，形参的类型不用写,返回值类型也不用写
            • 方法是一个对象，如果定义名称相同的方法，会覆盖前面的方法
            • 在JS中，方法的调用只与方法的名称有关，和参数列表无关
            • 在方法声明中有一个内置数组，arguments，封装所有的实际参数

          5. 调用：

            方法名称(实参列表);

          ②.Array: 数组对象

          1. 创建：

            var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];

          2. 方法：

            join() : 将数组中的元素按照分隔符拼接为字符串

            push() : 像数组的末尾添加一个或多个元素，并返回新的长度

          3. 属性：

            length：数组长度

          4. 特点：

            • JS中，数组元素类型是可变的
            • JS中，数组长度可变的
          ③.Boolean: 布尔对象
          ④.Deta: 日期对象

          1. 创建：

            var date = new Date();

          2. 方法：

            tolocaleString(): 返回当前date对象对应的本地时间

            getTime(): 获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

          ⑤.Math: 数学对象

          1. 创建

            特点：Math对象不用创建，直接使用。Math.方法名();

          2. 方法：

            random(): 返回0 ~ 1之间的随机数。含零不含1

            ceil(x) : 对数进行上舍入。(向上取整)
            floor(x): 对数进行下舍入。(向下取整)
            round(x): 把数四舍五入为最接近的整数。

          3. 属性：

            PI = Π

          ⑥.Number:
          ⑦.String: 字符串对象
          ⑧.RegExp: 正则表达式对象

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

            1. 单个字符：[]

              如：[a] [ab] [a-zA-Z0-9_]

              • 特殊符号代表特殊含义的单个字符

                \d:单个字符[0-9]

                \w:单个单词字符[a-zA-Z0-9_]

            2. 量词符号

              ? : 表示出现0次或1次

              * : 表示出现0次或多次

              + : 表示出现1次或多次

              {m,n} : 表示 m<= 数量 <=n （m,n之间）

              • m如果缺省：{,n}: 最多n次
              • n如果缺省：{m,}: 最少m次

          2. 正则对象

            1. 创建：

              var reg = new RegExp("正则表达式");
var rge = /正则表达式/;
开始符号：^ $

            2. 方法：

              text(参数): 验证指定的字符串是否符合正则定义的规范

          ⑨.Global:

          1. 特点：全局对象，全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();

          2. 方法：

            encodeURI()：url编码
            decodeURI()：url解码

            encodeURIComponent()：url编码，编码字符更多
            decodeURIComponent()：url解码

            parseInt(): 将字符串转换为数字

            • 逐一判断每个字符是否是数字，直到不是数字为止，将前边数字部分转为number

            isNaN(): 判断一个值是否为NaN

            • NaN参与的==比较全部为false

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

          3. URL编码

            %分割的16进制数字

            前端开发—%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91

          三.JavaScript对象

          Ⅰ.BOM

          ①.DOM简单学习：为了满足案例需求

          1. 功能：控制html文档的内容

          2. 代码：获取页面标签（元素）对象Element

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

          3. 操作Element对象

            • 修改属性值：
              • 明确获取对象是哪一个
              • 查看API文档，找其中有哪些属性可以设置
            • 修改标签体内容：
              • 属性：innerHTML 设置标签体的内容
            <h1 id="title">时代在召唤</h1>
<img id="light" src="../img/bj.jpg" /><script>var title = document.getElementById("title");alert("更改");title.innerHTML = "梦想在号召";var light = document.getElementById("light");alert("改图");light.src = "../img/c.jpg";
</script>
          ②.事件的简单学习

          1. 概念：某些组件被执行了某些操作后，触发某些代码的执行。

            • 事件：onclick—单击事件

              <h1 id="title" onclick="fun()">时代在召唤</h1>
<script>function fun() {alert("点我？");alert("变身！~古娜拉黑暗之神！");var title = document.getElementById("title");title.innerHTML = "命运在招手";
}
</script>

            • 通过js获取元素对象，指定事件属性，设置一个函数（推荐使用）

              <h1 id="title">时代在召唤</h1>
<script>var title = document.getElementById("title");title.onclick = fun;function fun() {alert("变身！");alert("古娜拉黑暗之神！");alert("小魔仙全身变~");title.innerHTML = "命运在招手";}
</script>
          ③.BOM概述
          1. 概念：Browser object Model浏览器对象模型
            • 将浏览器的各个组成部分封装成对象。
          2. 组成：
            • window：窗口对象
            • Navigator：浏览器对象
            • Screen：显示器屏幕对象
            • History：历史记录对象
            • Location：地址栏对象

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DK1oTi5W-1603158857886)(C:\Users\谜语菌\Documents\img\DOM.jpg)]

          ④.Window: 窗口对象

          1. 创建：

          2. 方法

            • 与弹出框有关的方法

              • alert() : 显示带有一段消息和确认按钮的警告框

                alert("警告");

              • confim() : 显示带有一段消息以及确认按钮和取消按钮的对话框

                var con = confim("您确定退出吗？");
如果用户点击确认按钮，则方法返回true
如果用户点击取消按钮，则方法返回false

              • prompt() : 显示可提示用户输入的对话框

                var user = prompt("请输入用户名");
返回值：用户输入的内容

            • 与打开关闭有关的方法

              • close() : 关闭浏览器窗口

                close();
谁调用关谁

              • open() : 打开一个新的浏览器窗口

                var newWindow = open("www.baidu");
返回一个新的window对象

            • 与定时器有关的方法

              • setTimeout() : 在指定的毫秒数后调用函数或计算表达式

                var id = setTimeout(fun,2000);
参数：1，JS代码或者方法对象  2，毫秒值
返回值：唯一标识，用于取消定时器

              • clearTimeout() : 取消由 setTimeout()方法设置的timeout

              • setInterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式

              • clearInterval() : 取消由 setInterval() 设置的timeout

            • 入口函数

              window.onload() = function(){}

          3. 属性

            • 获取其他BOM对象

              • history
              • location
              • Navigator
              • Screen
              语法：
var h1 = window.history;
var h2 = history;

            • 获取DOM对象

              • document
              语法：
window.document.getElementById("");
document.getElementById("");

          4. 特点

            • window对象不需要创建可以直接使用 window使用。window.方法名();
            • window引用可以省略。 方法名();
          ⑤. Location : 地址栏对象

          1. 创建

            window.location
location

          2. 方法

            • reload() : 重新加载当前文档

              Lication.reload();

          3. 属性

            • href 设置或返回完整的URL
          ⑥.history : 历史记录对象

          1. 创建

            window.history
history

          2. 方法

            • back() : 加载history 列表中前一个URL

            • forward() : 加载history 列表中下一个URL

            • go() : 加载history 列表中某一个具体页面

              URL 参数使用的是要访问的 URL，或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。

          3. 属性

            • length() : 返回历史列表的网页数

          Ⅱ.DOM

          ①.DOM概述：

          1. 概念：Document object Model文档对象模型

            将标记语言文档的各个部分，封装为对象。可以用这些对象，对标记语言文档进行CRUD的动态操作

          2. W3C DOM标准被分为3个不同的部分

            • 核心 DOM — 针对任何结构化文档的标准模型

              • Document : 文档对象

              • Element : 元素对象

              • Attribute : 属性对象

              • Text : 文本对象

              • Comment : 注释对象

                Node是他们的父对象

              • Node：节点对象

            • XML DOM — 针对 XML 文档的标准模型

            • HTML DOM — 针对 HTML 文档的标准模型

          ②.核心 DOM 模型
          1.Document ：文档对象

          • 创建：在html dom模型中可以使用wi ndow对象来获取

            window.document
document

          • 方法

            1. 获取Element对象：
              • getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
              • getElementsByTagName() : 根据元素名称获取元素对象们。返回值是一个数组
              • getElementsByClassName() : 根据class属性值获取元素对象们。返回值是一个数组
              • getElementsByName() : 根据name属性值获取元素对象们。
              • querySelector():根据指定选择器获取第一个元素对象，考虑兼容
              • querySelectorAll():根据指定选择器获取所有元素对象，考虑兼容
            2. 创建其他DOM对象：
              • createAttribute(name)
              • createComment ( )
              • createElement ( )
              • createTextNode( )
          2.Element : 元素对象

          • 获取/创建：通过document来进行获取和创建

          • 方法：

            • setAttribute() 添加新属性

              参数：1. 属性名 2. 属性值
栗子：a.setAttribute("href", "");

            • removeAttribute() 删除指定的属性

              参数：属性名
栗子：a.removeAttribute("href");

            • disabled=true 禁用按钮

          3.Node对象

          • 特点：所有的DOM对象都可以认为是一个节点

          • 方法：

            • CRUD(增删改查) dom树:

              • appendChild() : 向节点的子节点列表的结尾添加新的子节点
              • removeChild() : 删除并返回当前节点指定的子节点
              • replaceChild() : 用新节点替换一个子节点
              <head><style>#box {width: 200px;height: 200px;border: 1px solid red;}#div {width: 100px;height: 100px;border: 1px solid red;}#div2 {width: 60px;height: 50px;border: 1px solid red;}</style>
</head><body><div id="box">box<div id="div">div</div></div><a id="delete" href="JavaScript:void(0);">删除子节点</a><a id="add" href="JavaScript:void(0);">添加子节点</a><a id="updet" href="JavaScript:void(0);">修改子节点</a><script>// 获取超链接var dele = document.getElementById("delete");dele.onclick = function() {// 获取盒子对象var box = document.getElementById("box");var div = document.getElementById("div");//删除子节点box.removeChild(div);}// 获取超链接var add = document.getElementById("add");add.onclick = function() {// 获取盒子对象var box = document.getElementById("box");//创建盒子对象var div = document.createElement("div");//添加属性div.setAttribute("id", "div2");//添加子节点box.appendChild(div);}// 获取超链接var updet = document.getElementById("updet");updet.onclick = function() {// 获取盒子对象var box = document.getElementById("box");var div = document.getElementById("div")//创建盒子对象var div2 = document.createElement("div");//添加属性div2.setAttribute("id", "div2");//修改子节点box.replaceChild(div2, div);}</script>
</body>

          练习：

          <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态表格</title><style>* {margin: 0;padding: 0;}.box {width: 480px;height: 30px;margin: 30px auto;}.box input {width: 100px;height: 30px;color: rgb(155, 146, 146);}.box #but {color: black;}table {width: 400px;margin: 20px auto;border: 1px solid #000;}th,td {height: 30px;text-align: center;border: 1px solid #000;}</style>
</head><body><div class="box"><input id="ID" type="text" value="请输入ID" /><input id="name" type="text" value="请输入姓名" /><input id="sex" type="text" value="请输入性别" /><input id="but" type="button" value="提交" /></div><table><thead><tr><th>ID</th><th>name</th><th>sex</th><th>操作</th></tr></thead><tbody id="add"><tr><td>1001</td><td>张三丰</td><td>男</td><td><a href="JavaScript:void(0);" οnclick="dele(this)">删除</a></td></tr><tr><td>1002</td><td>张三丰</td><td>男</td><td><a href="JavaScript:void(0);" οnclick="dele(this)">删除</a></td></tr><tr><td>1003</td><td>张三丰</td><td>男</td><td><a href="JavaScript:void(0);" οnclick="dele(this)">删除</a></td></tr></tbody></table><script>//添加表格//单击事件but.onclick = function() {//获取用户输入的值var ID = document.getElementById("ID").value;var name = document.getElementById("name").value;var sex = document.getElementById("sex").value;//转换文本节点var text_ID = document.createTextNode(ID);var text_name = document.createTextNode(name);var text_sex = document.createTextNode(sex);//获取按钮对象var but = document.getElementById("but");//创建avar a = document.createElement("a");var text_a = document.createTextNode("删除");a.appendChild(text_a);//给a添加属性a.setAttribute("href", "JavaScript:void(0);");a.setAttribute("onclick", "dele(this)");//创建tdvar td_ID = document.createElement("td");var td_name = document.createElement("td");var td_sex = document.createElement("td");var td_a = document.createElement("td");//添加数据到tdtd_ID.appendChild(text_ID);td_name.appendChild(text_name);td_sex.appendChild(text_sex);td_a.appendChild(a);//创建trvar tr = document.createElement("tr");//添加td到trtr.appendChild(td_ID);tr.appendChild(td_name);tr.appendChild(td_sex);tr.appendChild(td_a);//添加tr到tbodyvar add = document.getElementById("add");add.appendChild(tr);}//删除表格function dele(obj) {var tr = obj.parentNode.parentNode;var tbody = document.getElementById("add");tbody.removeChild(tr);}</script>
          ③.HTML DOM 模型

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

            document.getElementById("div").innerText = "替换的文本";document.getElementById("div").innerHTML = "替换的数据";
document.getElementById("div").innerHTML += "t追加的数据";
区别
a.innerHTML可以识别HTML标签，innerText不识别HTML标签

          2. 修改HTML元素对象的属性

            Element.属性名 = "修改的值";

          3. 控制样式

            Element.style.样式名 = ""; // 添加元素标签的行内样式，样式少时使用
Element.className = "类名"; //覆盖原本的css类名

            <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div {border: 1px solid blue;}</style>
</head><body><div id="div1">div1</div><div id="div2">div2</div><script>//第一种方式；使用元素的style属性来设置样式var div1 = document.getElementById("div1");div1.onclick = function() {div1.style.border = "1px solid red";}//第二种方式:通过元素的className属性设置样式var div2 = document.getElementById("div2");div2.onclick = function() {div2.className = "div";}</script>
</body>
          ④.操作元素总结

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCTvm1mR-1603158857888)(C:\Users\谜语菌\Documents\img\DOM.png)]

          Ⅲ.事件

          ①.概述

          1. 概念：某些组件被执行了某些操作后，触发某些代码的执行

          2. 组成：

            • 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了…
            • 事件源：组件。如：按钮，文本输入框…（HTML标签）
            • 监听器：代码。
            • 注册监听：将事件，事件源，监听器结合在-起。当事件源上发生了某个事件，则触发执行某个监听器代码。
          ②.常见的事件

          • 点击事件：

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

          • 焦点事件

            1. onblur：失去焦点(一般用于表单校验)
            2. onfocus：元素获得焦点。

          • 加载事件：

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

              window.onload

          • 鼠标事件：

            1. onmousedown 鼠标按钮被按下。

              定义方法时：定义一个形参，接受event对象
event对象的button属性可以获取鼠标按钮哪个键点击
左键 0 中键 1 右键 2 
<input type="button" value="按钮" id="but" />
<script>document.getElementById("but").onmousedown = 		function(even) {alert(even.button);}
</script>

            2. onmouseup 鼠标按键被松开。

            3. onmousemove 鼠标被移动。

            4. onmouseover 鼠标移到某元素之上。

            5. onmouseout 鼠标从某元素移开。

          • 键盘事件：

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

          • 选择和改变

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

          • 表单事件

            1. onsubmit 确认按钮被点击

              可以阻止表单的提交 方法返回false则表单被阻止提交

            2. onreset 重置按钮被点击

          案例：

          <head><meta charset="UTF-8"><title>表格全选</title><style>.center {width: 500px;margin: 0 auto;}table {width: 500px;margin: 15px auto;border: 1px solid #000;}th,td {border: 1px solid #000000;text-align: center;}.over {background-color: pink;}.out {background-color: white;}</style>
</head>
<body>
<form><table><thead><tr><th> <input id="boss" name="xuan" type="checkbox"/> </th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th></tr></thead><tbody id="tbody"><tr><td><input name="xuan" type="checkbox"/></td> <td>1</td> <td>张大仙</td><td>男</td> <td><a href="#">删除</a></td></tr><tr><td><input name="xuan" type="checkbox"/></td> <td>2</td> <td>张三丰</td><td>男</td> <td><a href="#">删除</a></td></tr><tr><td><input name="xuan" type="checkbox"/></td> <td>3</td> <td>张无忌</td><td>男</td> <td><a href="#">删除</a></td></tr></tbody></table><div class="center"><input id="quanxuan" type="button" value="全选"><input id="buxuan" type="button" value="全不选"><input id="fan" type="button" value="反选"></div>
</form>
<script>//设置全选//获取全部的需要选择的表单对象var xuan = document.getElementsByName("xuan");//获取全选按钮对象var quanxuan = document.getElementById("quanxuan");//设置点击事件quanxuan.onclick = function () {//遍历数组for(i in xuan){xuan[i].checked = true;}}//设置全不选var buxuan = document.getElementById("buxuan");buxuan.onclick = function () {//遍历数组for(i in xuan){xuan[i].checked = false;}}//设置反选var fan = document.getElementById("fan");//遍历数组fan.onclick = function () {for(i in xuan){xuan[i].checked = !xuan[i].checked;}}//设置第一个选择框全选var boss = document.getElementById("boss");boss.onclick = function () {for (i in xuan){xuan[i].checked = boss.checked;}}//设置鼠标悬停的背景色//获取全部tr对象var tr = document.getElementsByTagName("tr");for(i in tr){tr[i].onmouseover = function () {this.className = "over";}tr[i].onmouseout = function () {this.className = "out";}}
</script>
</body>

          四.Bootstrap

          ①.概述：

          1. 概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JavaScript 的，它简洁灵活，使Web开发更加快捷。
          2. 好处：
            • 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
            • 响应式布局。同一套页面可以兼容不同分辨率的设备。

          ②.快速入门

          1. 下载Bootstrap

          2. 在项目中将这三个文件夹复制

          3. 创建HTML页面，引入必要资源

            <!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><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="@3.7.3/dist/html5shiv.min.js"></script><script src=".js@1.4.2/dest/respond.min.js"></script><![endif]--><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

            ③.响应式布局

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

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

            • 步骤：

              1. 定义容器。(相当于table)

                • 容器分类
                  1. container:固定宽度(有留白)
                  2. container-fluid:每一种设备都是100%宽度

              2. 定义行。(相当于tr) 样式：row

              3. 定义元素。指定该元素在不同设备上，所占的格子数目。

                • 样式：col-设备代号-各自数目
                • 设备代号：
                  1. xs：超小屏幕 手机(<768px)
                  2. sm：小屏幕 平板 (≥768px)
                  3. md：中等屏幕 桌面显示器 (≥992px)
                  4. lg： 大屏幕 大桌面显示器 (≥1200px)

              4. 注意：

                • 一行中如果格子数目超过12，则超出部分自动换行
                • 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
                • 栅格类属性向下不兼容，如果设置属性设备代号大于实际设备，会一个元素占满一整行
              5. <div class="container-fluid"><div class="row"><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div><div class="col-lg-1 col-sm-2 border">栅格</div></div>
</div>

          ④.css样式和js插件

          1. 全局CSS样式
            • 按钮：class=“btn btn-default”
            • 图片：
              • class=“img-responsive”：图片在任意尺寸都占100%
              • 图片形状：
                • <img src="…“alt=”…"class=“img-rounded”>：方形
                • <img src="…“alt=”…class=“img-circle”>：圆形
                • <img src="…“alt=”…"class=“img-thumbnail”>：相框
            • 表格
              • table
              • table-bordered
              • table-hover
            • 表单
              • 给表单项添加：class=“form-control”
          2. 组件
            • 导航条(复制粘贴)
            • 分页条(复制粘贴)
          3. 插件
            • 轮播图(复制粘贴)

          五. JQuery

          简介：是一个JavaScript框架，简化JS开发
          JavaScript框架本质：JS文件，封装了，JS的原生代码

          ####　①.快速入门

          • 步骤：

            1. 下载JQuery文件

              • Jquery-xxx.js: 开发版本，阅读源码
              • Jquery-xxx.min.js: 生产版本，程序开发

            2. 导入JS文件

            3. 使用

              <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><script src="JS/jquery-3.3.1.min.js"></script>
</head><body><div id="div1">div1...</div><div id="div2">div2...</div>
</body>
<script>//$("选择器");var div1 = $("#div1");alert(div1.html());var div2 = $("#div2");alert(div2.html());
</script>

          ②. JQuery对象和JS对象的区别和转换

          1. JQuery对象在操作时，更加方便
          2. JQuery对象和JS对象方法不通用
          3. 两者之间可以互相转换
            • Jquery --》JS:Jquery对象[索引] 或者 Jquery对象.get(索引)
            • JS --》Jquery:$(JS对象)
          <body><div id="div1">div1...</div><div id="div2">div2...</div>
</body>
<script>var divs = document.getElementsByTagName("div");for (var i = 0; i < divs.length; i++) {$(divs[i]).html("aaa");}var $divs = $("div");$divs[0].innerHTML = "bbb";$divs.get(1).innerHTML = "bbb";
</script>

          ③. Jquery的基本语法

          事件绑定

          $(selector).click(function)

          入口函数

          $(function() {});
window.onload = function(){}
两者的区别：
1.window.onload 只能定义一次，如果多次定义，后者函数对象会覆盖前者的函数对象
2.$(function) 可以多次定义

          样式控制

          $("选择器").css("属性名", "属性值");

          ④. 选择器

          选择器实例选取
          基础选择器
          *$("*")所有元素
          #id$("#lastname")id=“lastname” 的元素
          .class$(".intro")所有 class=“intro” 的元素
          element$(“p”)所有

          元素

          .class.class$(".intro.demo")所有 class=“intro” 且 class=“demo” 的元素
          选择器,选择器$(“p,#div”)获取并集选择器
          层级选择器
          选择器 选择器$(div span)获取div中所有的span
          选择器 > 选择器$(div > span)获取div中所有的子span
          过滤选择器
          :first$(“p:first”)第一个

          元素

          :last$(“p:last”)最后一个

          元素

          :even$(“tr:even”)所有偶数
          :odd$(“tr:odd”)所有奇数
          :eq(index)$(“ul li:eq(3)”)列表中的第四个元素（index 从 0 开始）
          :gt(no)$(“ul li:gt(3)”)列出 index 大于 3 的元素
          :lt(no)$(“ul li:lt(3)”)列出 index 小于 3 的元素
          :not(selector)$(“input:not(:empty)”)所有不为空的 input 元素
          :header$(":header")所有标题元素

          -

          :animated所有动画元素
          :contains(text)$(":contains(‘W3School’)")包含指定字符串的所有元素
          :empty$(":empty")无子（元素）节点的所有元素
          :hidden$(“p:hidden”)所有隐藏的

          元素

          :visible$(“table:visible”)所有可见的表格
          s1,s2,s3$(“th,td,.intro”)所有带有匹配选择的元素
          属性选择器
          elenment[属性]$(“a[href]”)所有带有 href 属性的元素
          elenment[属性=“属性值”]$(“a[href=’#’]”)所有 href 属性的值等于 “#” 的元素
          elenment[属性=“属性值”][…]$(“a[href=’#’]/[title=’#‘]”)所有 href 属性和title的值等于 “#” 的元素
          elenment[属性!=“属性值”]$(“a[href!=’#’]”)所有 href 属性的值不等于 “#” 的元素
          elenment[属性^=“属性值”]$(“a[href^=’#’]”)所有 href 属性的值包含以 “#” 开始的元素
          elenment[属性$=“属性值”]$(“a[href​$=’.jpg’]”)所有 href 属性的值包含以 “.jpg” 结尾的元素
          elenment[属性*=“属性值”]$(“a[href*=’.jpg’]”)所有 href 属性的值包含以 “.jpg” 的元素
          表单选择器
          :input$(":input")所有 元素
          :text$(":text")所有 type=“text” 的 元素
          :password$(":password")所有 type=“password” 的 元素
          :radio$(":radio")所有 type=“radio” 的 元素
          :checkbox$(":checkbox")所有 type=“checkbox” 的 元素
          :submit$(":submit")所有 type=“submit” 的 元素
          :reset$(":reset")所有 type=“reset” 的 元素
          :button$(":button")所有 type=“button” 的 元素
          :image$(":image")所有 type=“image” 的 元素
          :file$(":file")所有 type=“file” 的 元素
          表单过滤选择器
          :enabled$(":enabled")所有可用的 input 元素
          :disabled$(":disabled")所有不可用的 input 元素
          :selected$(":selected")所有下拉框选中的 input 元素
          :checked$(":checked")所有单选/复选框选中的 input 元素
          元素 元素

          ⑤. DOM操作

          内容操作

          1. html()

            html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数，则返回被选元素的当前内容。
$(selector).html(HTML内容)

          2. text()

            text() 方法方法设置或返回被选元素的文本内容。
当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
$(selector).text(文本内容)

          3. val()

            val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值。
$(selector).val(value值)

          属性操作

          1. 通用属性操作

            • attr()

               attr() 设置或返回元素的属性值。
操作元素的自定义属性建议使用语法：$(selector).attr(attribute)$(selector).attr(attribute,value)

            • removeAttr()

              removeAttr() 从元素中移除属性。
语法:
$(selector).removeAttr(attribute)

            • prop()

              prop() 设置或返回元素的属性值。
操作元素固有属性建议使用
$(selector).prop(attribute)
$(selector).prop(attribute,value)

            • removeProp()

              removeProp() 从元素中移除属性。
$(selector).removeprop(attribute)

          2. 对class属性操作

            • addClass()

              addClass() 添加class属性值
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
$(selector).addClass(class)
class 	必需。规定一个或多个 class 名称。

            • removeClass()

              removeClass() 删除class属性值
$(selector).addClass(class)

            • toggleClass()

              toggleClass() 切换class属性值
$(selector).toggleClass(class,switch)
class 	必需。规定添加或移除 class 的指定元素。如需规定若干 class，请使用空格来分隔类名。
switch 	可选。布尔值。规定是否添加或移除 class。

          CRUD操作

          1. append():父元素将子元素追加到末尾

            对象1.append(对象2):将对象2添加到对象1的内部，并且在末尾

          2. prepend():父元素将子元素追加到开头

            对象1.prepend(对象2):将对象2添加到对象1的内部，并且在开头

          3. appendTo():子元素追加到父元素的末尾

            对象1.appendTo(对象2):将对象1添加到对象2的内部，并且在末尾

          4. prependTo():子元素追加到父元素的末尾

            对象1.prepend(对象2):将对象1添加到对象2的内部，并且在开头

          5. after():添加元素到元素后面

            对象1.after(对象2):将对象2添加到对象1的后面。两者是兄弟关系

          6. before():添加元素到元素前面

            对象1.before(对象2):将对象2添加到对象1的前面。两者是兄弟关系

          7. remove():移除元素

            对象.remove():将对象删除

          8. empty():清空元素的所有后代元素

            对象.empty():将对象的后代元素全部清空，但是保留当前对象以及属性节点

          ⑥. 案例

          ⑦. Jquery高级

          动画

          1. 显示隐藏

            • hide():隐藏HTML元素

              $(selector).hide(speed,[easing],[fun]);
参数：
speed:动画的速度，三个预定义的值("slow","normal","fast"),或使用毫秒值表示
easing:用来指定切换效果，默认是 swing 可用参数 linear- swing: 动画执行的效果是先慢，中间快，最后慢- linear:动画执行时速度时匀速的
fun:在动画完成后执行的函数

            • show():显示HTML元素

              $(selector).show(speed,[easing],[fun]);

            • toggle():显示/隐藏HTML元素

              $(selector).toggle(speed,[easing],[fun]);

          2. 滑动显示和隐藏方式

            • slideDown()

              $(selector).slideDown(speed,[easing],[fun]);
参数：
speed:动画的速度，三个预定义的值("slow","normal","fast"),或使用毫秒值表示
easing:用来指定切换效果，默认是 swing 可用参数 linear- swing: 动画执行的效果是先慢，中间快，最后慢- linear:动画执行时速度时匀速的
fun:在动画完成后执行的函数

            • slideUp()

              $(selector).slideUp(speed,[easing],[fun]);

            • slideToggle()

              $(selector).slideToggle(speed,[easing],[fun]);

          3. 淡入淡出显示和隐藏方式

            • fadeIn()

              $(selector).fadeIn(speed,[easing],[fun]);
参数：
speed:动画的速度，三个预定义的值("slow","normal","fast"),或使用毫秒值表示
easing:用来指定切换效果，默认是 swing 可用参数 linear- swing: 动画执行的效果是先慢，中间快，最后慢- linear:动画执行时速度时匀速的
fun:在动画完成后执行的函数

            • fadeOut()

              $(selector).fadeOut(speed,[easing],[fun]);

            • fadeToggle()

              $(selector).fadeToggle(speed,[easing],[fun]);

          遍历

          1. JS的遍历方式

            for(初始化值;循环结束条件;步长){}

          2. Jquery的遍历方式

            • Jquery对象.each(callback)
            <script>$(function() {var li = $("ul li");$("#but").click(function() {// for (var i = 0; i < li.length; i++) {//     if ("山东" == li[i].innerHTML) {//         break;//         continue;//     }//     alert(li[i].innerHTML);// }li.each(function(index, elenment) {//1. 使用this获取// alert(this.innerHTML);//2. 使用索引// alert(index + " = " + elenment.innerHTML);if ("山东" == li[index].innerHTML) {// return false;  相当于break// return true;   相当于continue}alert(index + " = " + $(elenment).html());});});});
</script><body><input type="button" id="but" value="按钮" /><ul><li>你好</li><li>我好</li><li>他好</li><li>背景</li><li>山东</li><li>北京</li><li>上海</li><li>广东</li><li>M78</li><li>澳大利亚</li></ul>
</body>
            • $.each(Object,[callback])
            $.each(li, function() {if ("山东" == this.innerHTML) {// return false;  相当于break// return true;   相当于continue
}alert($(this).html());
});
            • for…of:
            for(存储对象变量 of 需要遍历的数组){}

            事件绑定

            1. Jquery标准的绑定方式

              $(selector).事件方法(函数);

            2. on绑定事件/off接触绑定

              $(selector).on("事件名称",函数);
$(selector).off("事件名称");
如果不传递参数，会解除组件所有事件

            3. 事件切换

              $(selector).toggle(函数1,函数2...);
注意：1.5以后取消,需要插件

          六.AJAX

          概念

          ASynchronous JavaScript and XML 异步的JavaScript和xml

          AJAX 是一种用于创建快速动态网页的技术。

          通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

          异步和同步：客户端和服务器端相互通信的基础上

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4jTpoBQc-1603158857890)(C:\Users\谜语菌\Documents\img\同步异步.png)]

          同步：客户端必须等待服务器端的响应。在等待期间客户端不可以进行其他操作

          异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他操作

          实现方式

          1. 原生的JS实现方式(了解)

            <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>// 创建方法function fun() {// 发送异步请求//1. 创建核心对象var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//2. 建立连接/*open() 参数1. 请求方式 ： GET POST* GET方式： 请求参数要在URL后面拼接。send()为空参* POST方式：请求参数在send()中定义2. 请求的URL3. 同步或异步请求：true(异步) or false(同步)*/xmlhttp.open("GET","ajaxServlet?username=tom",true);//3. 发送请求xmlhttp.send();//4. 处理响应//获取方式   xmlhttp.responseText;//什么时候获取服务器的响应//存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。xmlhttp.onreadystatechange=function(){//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("title").innerHTML=xmlhttp.responseText;}}}</script>
</head>
<body>
<input type="button" onclick="fun()" id="but" value="按钮" />
<h1 id="title"></h1>
</body>
</html>

            @WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 获取请求参数String username = request.getParameter("username");//2. 打印usernameSystem.out.println(username);//3. 响应response.getWriter().write("Hello"+username);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

          2. Jquery的实现方式(重点)

            • $.ajax()

               语法：
$.ajax({键值对<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="JS/jquery-3.3.1.min.js"></script><script>// 创建方法function fun() {$.ajax({url:"ajaxServlet",//请求的URLtype:"POST",// 请求的方式data:{"username":"jack","age":23},success:function (data) {alert(data);},error:function () {//如果请求出错时执行的回调函数alert("错误")},//设置接收到的响应数据格式datatype:"text"});}</script>
</head>
<body>
<input type="button" onclick="fun()" id="but" value="按钮" />
<h1 id="title"></h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="JS/jquery-3.3.1.min.js"></script><script>// 创建方法function fun() {$.ajax({url:"ajaxServlet",//请求的URLtype:"POST",// 请求的方式data:{"username":"jack","age":23},success:function (data) {alert(data);},error:function () {//如果请求出错时执行的回调函数alert("错误")},//设置接收到的响应数据格式datatype:"text"});}</script>
</head>
<body>
<input type="button" onclick="fun()" id="but" value="按钮" />
<h1 id="title"></h1>
</body>
</html>

            • $.get():发送get请求

              语法：$.(url,data,callback,type)
参数：- url:请求路径- data：请求参数- callback:回调函数- type:响应结果的类型<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="JS/jquery-3.3.1.min.js"></script><script>// 创建方法function fun() {$.get("ajaxServlet",{"username":"bulak"},function (data) {$("#title").html(data);},"text");}</script>
</head>
<body>
<input type="button" onclick="fun()" id="but" value="按钮" />
<h1 id="title"></h1>
</body>
</html>

            • $.post():发送post请求

              同上

          七.JSON

          概念：JavaScript Object Notation JavaScript对象表示法

          java中封装对象

          person p = new person();p.setName("张三");p.setAge(12);

          JavaScript中封装对象

          var p = {"name":"张三","age":23};
          • Json现在多用于存储和交换文本信息的语法
          • 进行数据的传输
          • json比XML更小、更快、更易解析

          语法

          1. 基本规则

            • 数据在键值对中名称:值
              • 键用引号引起来，也可以不使用引号
              • 值的类型
                1. 数字(整数或浮点数)
                2. 字符串(在双引号中)
                3. 逻辑值(true or false)
                4. 数组(在方括号中){“persons”:[{},{},{}]}
                5. 对象(在花括号中){“address”:{“province”:“陕西”…}}
            • 每组数据由逗号分隔
            • 花括号保存对象,使用{}定义json格
            • 方括号保存数组：[]

          2. 获取数据

            • json对象.键名
            • json对象[“键名”]
            • 数组对象
            var josn = {"name":"刘成大傻逼",age:32,'gender':true};
var josns = {"persons":{person1:{name:"张三",age:21,gender:true},person2:{name:"李四",age:22,gender:true},person3:{name:"王五",age:23,gender:false}}};
var josns2 = {person:[{name:"张三",age:21,gender:true},{name:"李四",age:22,gender:true},{name:"王五",age:23,gender:false}]};//获取所有的json对象
//使用for in 循环
for(var key in josn){alert(key+josn[key]);
}
var person = josns2.person;
for(var i =0;i<person.length;i++){var person2 = person[i];for(var key in person2){alert(key+":"+person2[key])}
}

          JSon数据和Java对象的相互转换

          • JSON常见解析器

            Jsonlib,Gson,fastjson,jackson

          1. JSON转为Java对象

            public class jack_java {public static void main(String[] args) throws JsonProcessingException {String json = "{\"name\":\"张三\",\"age\":23,\"gender\":\"男\"}";ObjectMapper mapper = new ObjectMapper();Student student = mapper.readValue(json, Student.class);System.out.println(student);}
}

          2. Java对象转为JSON

            1. 导入jackson的相关jar包
2. 创建Jackson核心对象 objectMapper

          3. 调用ObjectMapper的相关方法进行转换

            • 转换方法
              writeValue(参数1,obj)
              参数：
              File:将obj对象转换为JSON字符串，并保存到指定文件中
              Weiter：将obj对象转换为JSON字符串，并将JOSN数据填充到字节输出流中
              OutputStream:将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

              writeValueAsString(obj):将对象转为JSON字符串

            public class jack {
            public static void main(String[] args) throws Exception {
            Student s = new Student();
            s.setName(“张三”);
            s.setAge(23);
            s.setGender(“男”);
            //创建jackson核心对象
            ObjectMapper mapper = new ObjectMapper();
            //使用writeValueAsString()
            String s1 = mapper.writeValueAsString(s);
            System.out.println(s1);
            //打印 {“name”:“张三”,“age”:23,“gender”:“男”}
            //使用writeValue()
            mapper.writeValue(new File(“D:\a.txt”),s);
            mapper.writeValue(new FileWriter(“D:\b.txt”),s);
            mapper.writeValue(new FileOutputStream(“D:\c.txt”),s);
            }
            }

            ​```java
//集合转JSON
public class jackson_list_map {public static void main(String[] args) throws Exception {Student s1 = new Student("张三",23,"男");Student s2 = new Student("李四",24,"男");Student s3 = new Student("小红",27,"女");List<Student> list = new ArrayList<>();list.add(s1);list.add(s2);list.add(s3);//创建ObjectMapper对象ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(list);System.out.println(json);//[{"name":"张三","age":23,"gender":"男"},{"name":"李四","age":24,"gender":"男"},{"name":"小红","age":27,"gender":"女"}]Map<String,Student> map = new HashMap<>();map.put("张三",s1);map.put("李四",s2);map.put("小红",s3);String json1 = mapper.writeValueAsString(map);System.out.println(json1);//{"李四":{"name":"李四","age":24,"gender":"男"},"张三":{"name":"张三","age":23,"gender":"男"},"小红":{"name":"小红","age":27,"gender":"女"}}Map<String,String> map1 = new HashMap<>();map1.put("name","张三");map1.put("age","23");map1.put("genber","男");String json2 = mapper.writeValueAsString(map1);System.out.println(json2);//{"name":"张三","genber":"男","age":"23"}}
}

          注解

          1. @JsonIgnore：排除属性

          2. @JsonFormat：属性值的格式化

                //@JsonIgnore //忽略该属性//@JsonFormat(pattern = "yyyy-MM-dd")//格式化方法private Date birthday;public class jackson {public static void main(String[] args) throws Exception {Student s = new Student();s.setName("张三");s.setAge(23);s.setGender("男");s.setBirthday(new Date());//创建jackson核心对象ObjectMapper mapper = new ObjectMapper();String s1 = mapper.writeValueAsString(s);System.out.println(s1);}
}

          案例 — 校验用户名是否存在

          <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="JS/jquery-3.3.1.min.js"></script><script>//1. 页面加载完毕执行JavaScript代码$(function () {//2. 获取username表单，绑定失去焦点事件$("#username").blur(function () {//1. 获取用户名var username = $(this).val();//2. 将用户名传递给服务器端$.get("finServlet",{username:username},function (data) {//获取响应数据var i = data.Err;if(i==1){//用户名存在$("#s_username").css("color","red").html(data.msg);}else {//用户名不存在$("#s_username").css("color","green").html(data.msg);}},"json");});});</script>
</head>
<body><form><input type="text" placeholder="请输入用户名" name="usename" id="username" /> <span id="s_username"></span> <br/><input type="password" placeholder="请输入密码" name="password" id="password" /> <br /><input type="submit" value="注册" /></form>
</body>
</html>

          @WebServlet("/finServlet")
public class FinServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");String username = request.getParameter("username");Map<String,Object> map = new HashMap<>();ObjectMapper mapper = new ObjectMapper();if("tom".equals(username)){//用户名存在map.put("Err",1);map.put("msg","用户名存在");mapper.writeValue(response.getWriter(),map);}else {//用户名不存在map.put("Err",0);map.put("msg","用户名可用");mapper.writeValue(response.getWriter(),map);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

          本文标签： web前端阶段笔记

          版权声明：本文标题：web前端阶段笔记 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/IT/1694688906a255111.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。