HTML5 学习_html 导航栏多个页面-优快云博客

本文链接：https://blog.youkuaiyun.com/fvcvv/article/details/127372114

HTML5 学习笔记

前言
第一章：基础知识
第二章：高级技术
第三章：主流框架
- 3.1、Vue

前言

什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。

什么是 HTML5

—HTML5是构建Web前端开发的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web前端开发中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

页面排版

排版的重要性：将有限的视觉元素进行有机的排列组合，让逻辑清晰，阅读流畅，便捷，生产良好的视觉体验。
四大原则：重复 / 对比 / 亲密 / 对齐

重复原则：设计的某些元素需要在整个作品中重复，可能是一种粗字体，一条粗线，某一个项目符号，颜色，设计要素，某种格式，空间关系等。

亲密原则：指彼此相关的项应当靠近，归组在一起，如果多个项目之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素

对比原则：从图片大小，颜色，形状来进行对比，从而突出某一种主题

对齐原则：使页面的顶(头)部，底部，按照轴线的方式对齐。使整个页面设计看起来简单明了

第一章：基础知识

1.1、HTML5 基础

1.1.1、HTML 文件语法

.html 版本用的是 5
.html 后缀的文件为页面文件。
.html 文件由标签组成。

1.1.2、HTML 标签

一般标签是由开始标签和结束标签组成。
书写方式划分为：

双闭合(<div>   </div>)
单闭合(<img src="" alt="">)

例：
在这里插入图片描述

开始标签（Opening tag）：包含元素的名称，被大于号、小于号所包围。表示元素从这里开始或者开始起作用
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

当出现多个相同元素如何区分：这时我们需要使用属性(Attribute)名来区分
例：

<p class="editor-note">My cat us very grumpy</p>
------------------
class  是属性名称；editor-note  是属性的值。
---------------
class 属性可为元素提供一个标识名称
以便进一步为元素指定样式或进行其他操作时使用。

空元素:
不包含任何内容的元素称为空元素。比如 <img>元素：

<img src="图片地址" alt="在图像无法显示时的替代文本">

作用：图像元素不需要通过内容产生效果，它的作用是其特定位置嵌入一个图像

其中alt属性：不可见的原因可能是：

用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。
有些错误使图像无法显示。可以试着故意将 src属性里的路径改错。保存并刷新页面就可以在图像位置看到：

1.1.3、HTML 元素嵌套使用

原理：可以将一个元素置于其他元素之中 —— 称作嵌套。
例：
要表明猫咪非常暴躁，可以将“very”用 元素包围，爆字将突出显示：

<p>My cat is <strong>very</strong> grumpy.</p>

在使用元素嵌套时主次顺序必须要正确

<p>My cat is <strong>very grumpy.</p></strong>

元素必须正确的开始和结束，这样才能清楚的显示出正确的嵌套层次。虽说浏览器可以显示，但浏览器会根据自己猜测来显示效果，但很大程度不会给你期望的结果。所以一定要避免！

1.1.4、HTML 基本结构

<!DOCTYPE html><!--文档声明，位于文档最前面位置-->
<html lang="en"><!--为HTML页面的根元素 其中lang在这里表示为语言：”en”代表英语，”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.0">
  <title>Document</title> <!--指定该文档的标题-->
</head>
<body> <!--包含可见页面的所有内容-->
  
</body>
</html>

1.1.5、HTML 标记文本

1.1.5.1、标题

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题。
HTML 文档也是一样。HTML 包括六个级别的标题，<h1> </h1>--<h6></h6>，一般最多用到 3-4 级标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

1.1.5.2、段落

如上文所讲，<p> 元素是用来指定段落的。通常用于指定常规的文本内容：

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

1.1.5.3、列表

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：

无序列表（Unordered List）在项目的顺序并不重要，就像购物列表为标题。用一个 <ul> 元素包围。
有序列表（Ordered List）在项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围。

其中列表的每个项目可以用一个列表项目（List Item）元素 <li> 包围。
例：

<p>驾驶证考试科目有：</p>
<ul>
  <li>科目一</li>
  <li>科目二</li>
  <li>科目三</li>
  <li>科目四</li>
</ul>

1.1.5.4、链接

链接在网页布局中非常常见 — 它们赋予了文字生命力。当需要给文字植入一个链接时，我们需要使用一个简单的元素 : <a> </a> — a 是 “anchor” （锚）的缩写。
例：

<a href="https://www.baidu.com/">百度</a>

1.2、常用CSS

1.2.1 css是用来干什么的

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

p {
   color: red;
}

css样式存放点：
1 ：

<!DOCTYPE html><!--文档声明，位于文档最前面位置-->
<html lang="en"><!--为HTML页面的根元素 其中lang在这里表示为语言：”en”代表英语，”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.0">
  <title>Document</title> <!--指定该文档的标题-->
</head>
<body> <!--包含可见页面的所有内容-->
  <style>
  p {
       color: red;
    }
  </style>
</body>
</html>

采用外链接方式

<html lang="en"><!--为HTML页面的根元素 其中lang在这里表示为语言：”en”代表英语，”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.0">
  <link rel="stylesheet" href="./css/inder.css"><!--链接样式-->
  <title>Document</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

1.2.2 css规则详解

首先让我们来看一看css规则：

p <!--Selector-->{
       color:                    red;
  <!--Properties-->          <!--Property value-->
}
<!----------------Declaration---------------->

整个结构称为规则集（通常简称“规则”），各部分释义如下：

选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）
一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）
改变 HTML 元素样式的途径。本例中 color 就是 <p> 元素的属性。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
语法规则
每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

如果需要同时修改多个属性，那么我们只需要将他们用分号进行隔开

p{
  font-size: 18px;
  color: red;
  border: 1px solid black;
}

同时我们也可以同时选择多个元素，当他们的元素具有相同样式时，我们将不同的选择器用逗号（,）分开。例如：

p, li, h1{
  font-size: 18px;
  color: red;
  border: 1px solid black;
}

1.2.3 字体和文本

在设置网页中我们需要设置一些特定字体应该如何设置呢

在网上找到我们需要的字体，并且参加文件夹导入到我们项目中
将其导入到css样式中

@font-face {/*字体*/
  font-family: BebasNeue; /*字体名*/
  src: url('../fonts/BebasNeue-webfont.eot'),
  url('../fonts/BebasNeue-webfont.ttf'),
  url('../fonts/BebasNeue-webfont.woff'),
  url('../fonts/BebasNeue-webfont.svg');
}

应用

p, li, h1{
  font-family: BebasNeue;/*字体名*/
  font-size: 18px;
  color: red;
  border: 1px solid black;
}

1.2.4 一切皆盒子

在编写 CSS 时你会发现，我们所写的代码好像都是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：
padding：即内边距，围绕着内容（比如段落）的空间。也可称为交互区域
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。
如图：
在这里插入图片描述
在这里我们还可能用到基础的属性有：

width：元素的宽度
height: 元素的高度;
background-color ：元素内容和内边距底下的颜色（该盒子区域内的背景颜色）
color ：元素内容（通常是文本）的颜色
text-shadow ：为元素内的文本设置阴影
text-align: center;文字居中
display ：设置元素的显示模式（暂略）
宽度（width)、高度（height）设置元素的高度和宽度。
- 可设置的值有：
  - auto - 默认。浏览器计算高度和宽度。
  - px、cm 等定义高度/宽度。
  - % 设置百分比定义高度/宽度。

例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      width: 600px;
      margin: 0 auto;
      background-color: #FF9500;
      padding: 0 20px 20px 20px;
      border: 5px solid black;
    }
    h1{
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>喜欢唱，跳，rep，篮球</h1>
</body>

</html>

在这里插入图片描述

根据上述<dody>元素。我们进行逐条解读：

width: 600px; — 强制性规定页面永远保持 600 像素宽。（在我们进行页面缩小时有滚动）
margin: 0 auto; — 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中我们设置了它为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。
margin写法：
margin:两个值用空格隔开例：margin：10px 20px;上下10 左右20
margin：一个值例:margin:10px 上下左右都是10px
margin:四个值用空格隔开 (margin: 上右下左)
margin:三个值为(上左右下)(margin: 20px 40px 上是20px 右是40px)
background-color: #FF9500; — 如前文所述，指定元素的背景颜色。
padding: 0 20px 20px 20px;— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。
border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。

定位页面主标题并添加样式

 h1 {
      margin: 0;
      padding: 20px 0;
      text-align: center;
      color: #00539F;
      text-shadow: 3px 3px 1px black;
    }

修改后的样式
在这里插入图片描述
在这里我们对样式进行分析：

margin: 0;在原样式中margin存在一定的默认值，我们规定margin为0，是为了使margin看起来更好看
padding: 设置内边距
text-shadow:为元素中的文本提供阴影：
第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。

1.2.5 块元素与行元素

块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；
行内元素：有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。但我们可以使用display:block;强制性将它转为块元素
常见的块元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>（地址引用）、<blockquote> （块引用）、<form>
常见的行元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
特点总结：
块特点：可以设置大小，独立成行
行级块特点：可以设置大小，不独立成行
(常用的用：<img>（图片）、<input>（输入框）)
行特点：不可以设置大小,不独立成
可以使用 display 相互转化一般为行转块 (行转行级块(display:block;) 块转行级块(display:inline))

1.2.6 图片

关于图片我们主要用途有：

在某一个地方插入图片

<img src="./imgs/3.jpg" alt=""><!--src="图片地址"-->

为某一个盒子设置背景图片

    h1 {
      margin: 0;
      padding: 20px 0;
      text-align: center;
      color: #00539F;
      text-shadow: 3px 3px 1px black;
      background-image: url('./10.1/imgs/4.jpg');
      /*url(‘图片地址')*/
    }

1.3、css属性

1.3.1、跟文字属性相关的

常用的属性有：
color: 设置文字颜色;
line-height: 设置行高;
font-size: 设置字体大小默认为16px 最小为12px;
letter-spacing：指定文本中字符之间的间距
word-spacing 指定文本中单词之间的间距。
white-space 指定元素内部空白的处理方式。
改变文本样子：
font-style:设置字体风格
- normal 默认值
- italic：显示一个斜体的字体样式。
- oblique：显示一个倾斜的字体样式。
font-weight: 设置字体粗细;
- normal 默认值与 400 相等
- bold 加粗与 700 相同
- lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。
- 100–900: 数值粗体值
text-transform:转换字体 ;
- none：禁止任何转型
- uppercase：转为大写
- lowercase: 将所有文本转为小写。
- capitalize: 转换所有单词让其首字母大写。
text-decoration: 取消/设置字体上的文本装饰，主要用在取消下划线
- none：取消存在的任何装饰
- underline：设置文本下划线
- overline: 文本上划线
- line-through: 穿过文本的线。
text-shadow: 文字阴影;
- 语法：text-shadow: h-shadow v-shadow blur color;
- h-shadow：必须，水平阴影的位置。允许负值。
- v-shadow：必须，垂直阴影的位置。允许负值。
- blur：可选。模糊的距离。
- color：可选。阴影的颜色。
text-align: 文本对齐;
- left: 左对齐文本
- right: 右对齐文本
- center: 居中文字
文本布局样式：
text-indent: 指定第一行留出多少水平空间(类似于首行缩进);
text-overflow: 当文本溢出包含元素的盒子时发生的事情。
- clip：修剪文本。
- ellipsis：显示省略符号来代表被修剪的文本。
- string
- fade:将会在截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。

1.3.2、样式列表

<ul> 和 <ol> 元素会默认设置margin的顶部和底部的宽度分别为：16px(1em) 0;和 padding-left: 40px(2.5em); （注意：浏览器默认字体大小为 16px）
<li> 默认是没有设置间距的。
<dl> 元素设置 margin 的顶部和底部：16px(1em) ，无内边距设定。
<dd> 元素设置为： margin-left 40px (2.5em)。
在参考中提到的 <p> 元素设置 margin 的顶部和底部：16px(1em)，和其他的列表类型相同。
对于<ul>,<ol>,<li>,<dl>,<dd>,<p>虽然有一定的初始值但是我们也是可以进行重新设置：
以<ul>,<ol>为例我们可以设置的元素有：
list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
- 其中最主要的值有：none(无标记)
list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。
- 语法为：list-style-image ：url("图片绝对地址")
在这里我们也可以直接使用
- list-style：list-style-type list-style-position list-style-image
- 例：list-style：square inside url('/i/arrow.gif');

1.3.2.1、列表计数

定义：在有时候，我们可能想在有序列表上进行不同的计数方式。
例如：从 1 以外的数字开始，或向后倒数，或者按步或多于 1 计数。在这里我们可以使用的有：

start允许我们可以从1以外的数进行计数。例：

<ol start="4">
  <li>《海与老人》</li>
  <li>《仙府长生》</li>
  <li>《嘉佑嬉事》</li>
  <li>《大奉打更人》</li>
</ol>

在这里插入图片描述

reversed这个我们可以结合 start属性进行使用：

  <ol start="4" reversed>
    <li>《海与老人》</li>
    <li>《仙府长生》</li>
    <li>《嘉佑嬉事》</li>
    <li>《大奉打更人》</li>
  </ol>

在这里插入图片描述

value 允许设置列表特点的值

 <ol>
    <li value="4">《海与老人》</li>
    <li value="9">《仙府长生》</li>
    <li value="12">《嘉佑嬉事》</li>
    <li value="14">《大奉打更人》</li>
  </ol>

在这里插入图片描述

1.3.2、超链接样式

对于超链接样式可以使用伪类来去设置样式其中应用的有：

:link 正常的，未访问的链接，
:visited 用户访问过的链接，
:hover 用户将鼠标悬停在链接上时。
:active 链接被点击时。

1.3.2.2、鼠标悬停样式

除此之外我们可以设置鼠标悬停样式这里我们直接上代码：
在这里我们用的属性是： cursor 更改鼠标悬停样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .crosshair {
      cursor: crosshair;
    }

    .pointer {
      cursor: pointer;
    }

    .move {
      cursor: move;
    }

    .text {
      cursor: text;
    }

    .wait {
      cursor: wait;
    }

    .help {
      cursor: help;
    }
  </style>
</head>

<body>
  <p>默认样式</p>
  <p class="crosshair">十字线</p>
  <p class="pointer">一只小手</p>
  <p class="move">可被移动</p>
  <p class="text">指示文本</p>
  <p class="wait">表示程序正忙</p>
  <p class="help">表示可用帮助</p>
</body>

</html>

1.3.3、CSS布局

1.3.3.1、display属性

在css页面布局中我们可以通过

display：值

属性来更改元素的默认行为方式其中常见的值有：

none 此元素不会被显示（主要作用:做隐藏可以特定的隐藏某一项在这个时间段不用的内容）
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
list-item 此元素会作为列表显示（类似于ul里面的li）。
inline-block 此元素会不独占一行的块级元素。
- 对于inline-block他的效果与float:left(浮动)类似，但又完全不相同。主要区别是
- - 1.对于父级来说float:left(浮动)会让父元素会高度坍塌
  - 2.所以在这时我们需要对父级使用overflow：hidden来闭合浮动
  - 3.对于浮动来说会出现参差不齐的现象

1.4、CSS基础

1.4.1、背景：background

在背景属性中我们主要用的有：

background-color：为背景添加颜色。
语法 : background-color：
background-image为背景添加图像（默认情况下，图像会重复，以覆盖整个元素。）
- 语法：background-image：url("图片决对地址")
- 注意背景颜色与颜色无法共存
background-repeat：图像重复方向/重复次数
- 语法 :background-repeat：值
- 水平方向重复 repeat-x
- 垂直方向重复 repeat-y
- 指定只显示一次背景图像：no-repeat
background-attachment：指定背景图像是应该滚动还是固定的
- 图像应随页面的其余部分一起滚动：scroll;
- 固定背景图像：fixed
background-position：指定背景图像的位置。
值有：top(上) left(左) right(右) bottom(下)
对于背景图片属性我们可以简写为：

background: 背景颜色背景图像重复方向/重复次数是否固定/滚动图像位置;
注意：属性值缺失并不要紧，但必须按照这个属性顺序来写

1.4.2、边框属性:border

1.4.2.1 、 border-style

在边框中我们可以设置不同的边框类型：

属性：border-style

----
  <style>
    .box {
     margin: 0 auto;
     width: 100px;
     height: 50px;
     border-style: dotted;//修改值
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>

值有：
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
对吧于边框我们于可以采用混合输出形式

border-style: 上右下左;

也可以特定某一边：
border-top-style: 上;
border-right-style: 右;
border-bottom-style: 下;
border-left-style: 左;

1.4.2.2 、 border-width

border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），

border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px /
border-width: 20px 5px; / 上边框和下边框为 20px，其他边为 5px /
border-width: 25px 10px 4px 35px; / 上边框 25px，右边框 10px，下边框 4px，左边框 35px */

1.4.2.3 、 border-color

border-color 属性用于设置四个边框的颜色。
也可以指定不同边的颜色

border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */

注意：如果未设置 border-color，则它将继承元素的颜色。

1.4.2.4 、简写

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color
注意：边框样式是必需写的

在编写代码中，也可以在一个属性中指定所有单独的边框属性。

border-top：/上/
border-right ：/右/
border-bottom ：/下/
border-left：/左/

1.4.2.5、圆角边框属性:border-radius

border-radius 属性用于向元素添加圆角边框：

 border-radius: 5px;/*圆角角度*/

总结：

border	        简写属性，声明设置中所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
---------------------------------------------------------
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
---------------------------------------------------------
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
---------------------------------------------------------
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
---------------------------------------------------------
border-top	简写属性，在一条声明中设置所有上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。

1.4.2.6、轮廓

定义：轮廓是在元素周围绘制的一条线，在边框之外从而凸显元素。
属性值与边框一样：

outline-style：轮廓样式
outline-color：轮廓颜色
outline-width：轮廓宽度
outline-offset：属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
outline：其中outline-style：（必需写）

1.4.3、外边距、内边距

外边距：margin：属性用于在任何定义的边框之外，为元素周围创建空间。
- 我们也可以指定任意一边的外边距：
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left
- 注意：外边距可能会合并输出
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个新的外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
内边距：padding：属性用于在任何定义的边界内的元素内容周围生成空间。（交互空间）
- 我们也可以指定任意一边的内边距：
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left

上两章总结：

背景属性有：

background-color：颜色
background-image：图像
background-repeat：重复
background-attachment：是否固定
background-position：位置

边框属性有：

border-style：边框样式
border-width：边框宽度
border-color：边框颜色
border-radius：添加圆角边框
margin：外边距
padding：内边距
width：宽度 height ：高度
outline-style：轮廓样式
outline-color：轮廓颜色
outline-width：轮廓宽度
outline-offset：轮廓偏移
font-family：规定文本的字体。

文本属性有：

color：颜色
text-align：对齐方式
text-decoration：用于设置或删除文本装饰。
text-transform：指定文本中的大写和小写字母。
text-indent：指定文本第一行的缩进：
letter-spacing：指定文本中字符之间的间距。
line-height：指定行之间的间距：
word-spacing：指定文本中单词之间的间距。
text-shadow：添加阴影
ont-style：属性主要用于指定斜体文本
font-weight ：指定字体的粗细：
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
font-size：属性设置文本的大小。

链接：

<a href="链接地址"> </a>
a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

列表：

无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记

1.5、CSS中级

1.5.1、Display

display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline

1.5.1.1、block

块级元素总是从新行开始，并占据可用屏幕的全部宽度（尽可能向左和向右伸展）。
块级元素的一些例子：

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

1.5.1.2、 inline

内联元素不从新行开始，仅占用所需的宽度，可以使用padding来扩充。
行内元素的一些例子：

<span>
<a>
<img>

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

1.5.1.3、display:none 也 visibility:hidden区别

display:none /主要配合定位，用于做下拉框，/

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中，类似于删除

visibility:hidden

通过将 visibility 属性设置为 hidden 可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dsad {
      float: left;
      width: 200px;
      height: 200px;
      background-color: blue;
      /* visibility:hidden; */
    }

    .das{
      float: left;
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
      /* display:none; */
    }
    
    .dadss{
      float: left;
      width: 200px;
      height: 200px;
      background-color: rgb(223, 208, 9);
    }
  </style>
</head>

<body>
  <div class="dsad">visibility:hidden</div>
  <div class="das">display:none</div>
  <div class="dadss">参考</div>
</body>

</html>

原有样子
在这里插入图片描述

打开：display:none;
打开：visibility:hidden;

1.5.2、width与max-width区别

设置块级元素的 width 是为了防止其延伸到其容器的边缘。外面可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间进行平均分配

min-width 为浏览器设置最小宽度。
max-width 为浏览器设置最大宽度。

注意：max-width与min-width ，如果没给父级设置宽度，那么他将会默认父级的宽度为 100%，会随着浏览器的变小，而变小。

需要注意的是：当浏览器窗口小于max-width设置的宽度时当浏览器窗口小于元素的宽度时，浏览器会将水平滚动条添加到页面上。在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要。

1.5.3、定位：position

position 属性规定应用于元素的定位方法的类型。

其中有五个不同值：

静态定位的元素不受 top、bottom、left 和 right 属性的影响。
static：的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。（静态）
relative：不会对其余内容进行调整来适应元素留下的任何空间。
fixed：的元素是相对于视口定位的，这意味着即使滚动页面。固定定位的元素不会在页面中通常应放置的位置上留出空隙。例如：分享
absolute：元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
sticky：元素根据用户的滚动位置进行定位
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。例如：导航（其效果类似于excel的窗口冻结）
- 注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀。在这里我们还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      width: 1100px;
    }

    .das {
      margin: 0 auto;
      max-width: 1000px;
      height: 2000px;
    }

    .sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
    }
  </style>
</head>

<body>
  <div class="sticky">我是有粘性的！</div>
  <div class="das">
    <p>英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”、“英雄联盟全球总决赛”、“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化 。</p>
  </div>
</body>

</html>

注意：可以使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

重叠元素 :z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）默认值为：auto

1.5.4、Overflow 属性

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible -：默认。溢出没有被剪裁。内容会在元素框外继续展示
hidden ：溢出被剪裁，其余内容将会不可见
scroll -：溢出被剪裁，并添加滚动条以便在框内滚动。
auto ：与 scroll 类似，但仅在必要时添加滚动条
overflow-x 和 overflow-y属性规定是水平或者是垂直地（或同时）更改内容的溢出方式
注释：overflow 属性仅适用于具有指定高度的块元素。

1.5.5、浮动：float

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下任意的一个值：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

1.5.5.1、去除浮动

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

其中 clear的值有：

none ：元素不会被向下移动以清除浮动
left ：元素被向下移动以清除左浮动。
right：元素被向下移动以清除右浮动。
both ：元素被向下移动以清除左右浮动。

1.5.6、水平和垂直对齐

对于对齐的方式我们主要有：

居中对齐元素：
如果要使块元素（例如 <div> ）水平居中，我们需要使用 margin: auto;。设置元素的宽度将防止其延伸到容器的边缘。然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：
需要注意的是：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。
居中对齐文本：
如果仅需使元素内文本居中，我们需要使用： text-align: center;
居中对齐图像：
如需将图像居中，我们需要为左右外边距设置为 auto，并将其设置为块元素例：

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

使用定位设置对齐方式：
对齐元素的一种方法是使用 position: absolute; 例如:
注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。

.top {
  position: absolute;
  right: 0px;/*对齐位置现为右对齐*/
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

使用浮动设置对齐方式：
对齐元素的另一种方法是使用 float 属性：

.cxk {
  float: right;/*右浮动*/
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用清除浮动来解决此问题，我们可以向包含元素添加 overflow: auto;，来解决此问题。

使用设置内边距设置对齐方式：
方法一：如需同时垂直和水平对齐，我们需要使用 padding 和 text-align: center;：
方法二：如需同时垂直和水平对齐，我们需要使用 padding 和 transform：

transform: translate(-50%, -50%);
transform：属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。通常我们搭配定位来使用

使用通过设置行高方式对齐方式：
我们只需要使用其： height 属性值的＝ line-height 属性。在添加 text-align: center;就可以使文字水平，垂直居中。
注意：如果出现多行文字需要水平，垂直居中，我们需要添加：

 line-height: 1.5;
设置行高增加1.5倍

 display: inline-block;
 允许在元素上设置宽度和高度，且元素不会换行。
 
 vertical-align: middle;
1.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
2.vertical-align:middle是将元素盒子的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐。*/

使用Flexbox布局来将内容居中，在后面布局章节中会介绍到这个使用方法

1.5.7、组合器

组合器是解释选择器之间关系的某种机制。
CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)
后代选择器匹配属于指定元素后代的所有元素。
下面的例子选择 <div> 元素内的所有 <p> 元素： div p
子选择器 (>)
子选择器匹配属于指定元素子元素的所有元素。
属于 <div> 元素子元素的所有 <p> 元素：：div > p
相邻兄弟选择器 (+)
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <ul> 元素之后的 <li> 元素：ul li + li 主要体现在设置下拉框的行高。
通用兄弟选择器 (~)
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
选择前面有 <p> 元素的每个 <ul> 元素。p ~ ul

1.5.8、CSS 伪类与伪元素

什么是伪类？
伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
- 链接能够以不同的方式显示：

1.未访问的链接
a:link {
  color: #FF0000;
}

2.已访问的链接
a:visited {
  color: #00FF00;
}

3.鼠标悬停样式
a:hover {
  color: #FF00FF;
}

4. 已选择的链接样式 
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的a:link 和 a:visited 之后，才能生效！
     a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

在鼠标悬停样式中我们也可以做一个鼠标悬停在某一处时出现样式：
p {
  display: none;/*隐藏*/
}

div:hover p {
  display: block;/*显示*/
}

设置元素获得焦点时的样式
- :focus 选择器用于选取获得焦点的元素。
- 提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
- 主要用法有：
  - p i:first-child {选择 <p> 元素中的第一个 <i> 元素}
  - p:first-child i {选择 <p> 元素中的所有 <i> 元素}

其中伪元素主要用的有：
例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

选择器	例子	选择器作用
`::after`	`p::after`	在所选元素之后插入内容。
`::before`	`p::before`	在所选元素之前插入内容。
`::first-letter`	`p::first-lette`r	对所选元素的首字母添加样式。
`::first-line`	`p::first-line`	对所选元素的首行添加样式。
`::selection`	`p::selection`	用户选择的元素部分，添加样式

注意：::first-line ，::first-letter伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing （词间距）
letter-spacing （字母间距）
text-decoration
vertical-align
text-transform
line-height
clear

以下属性适用于 ::first-letter 伪元素：

字体属
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration （下划线）
vertical-align（仅当 “float” 为 “none”）
text-transform （转换大小写）
line-height （行高）
float（浮动）
clear

1.5.8.1、不透明度与透明度

opacity 属性的取值范围为 0.0-1.0。值越低，越透明：主要用在照片
其中
background: rgba(76, 175, 80, 0.3) 中的0.3也可设置颜色透明度

1.5.9、常有的样式例子

1.5.9.1 垂直导航栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
    }

    li a {
      display: block; /*块元素展示*/
      color: #000;
      padding: 8px 16px;/*设置内外边距*/
      text-decoration: none;/*取消下划线*/
    }

    /*添加鼠标悬停样式*/
    li a:hover {
      background-color: #555;
      color: white;
    }
  </style>
</head>

<body>
  <h3>垂直导航栏</h3>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</body>

</html>

在这里插入图片描述
全高固定垂直导航栏
创建全高的“粘性”侧面导航：主要有

position: fixed; -------使它产生粘性，即使在滚动时
overflow: auto; -------如果侧栏的内容太多，则启用滚动条

1.5.9.2 水平导航栏

创建水平导航栏的方法有两种：使用行内或浮动列表项。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: rgb(74, 107, 77);
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover {
      background-color: rgb(231, 137, 15);
    }

     @media screen and (max-width: 600px) {/*当屏幕小于或者等于600px 时采用这个布局*/
      ul.topnav li.right, 
      ul.topnav li {
            float: none;
            }
      }
  </style>
</head>

<body>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</body>

</html>

在这里插入图片描述

例子解释：

float: left; - 使用 float 使块元素滑动为彼此相邻
display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本）
而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
padding: 8px; - 使块元素更美观
background-color: rgb(74, 107, 77); - 为每个元素添加背景色

提示：如需全宽的背景色，请将 background-color 添加到 <ul> 而不是每个 <a> 元素：

固定的导航栏
使导航栏保持在页面的顶部或底部，即使用户滚动页面也是如此：
在这里插入图片描述

position: fixed;
top: 0;
width: 100%;

粘性导航栏
为 <ul> 添加 position: sticky;，以创建粘性导航栏。

position: -webkit-sticky;
position: sticky;
top: 0;

粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
需要注意的是：因为 Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀。您还必须指定 top、right、bottom 或 left 至少之一，以使粘性定位起作用。

响应式的上导航栏
对于响应式布局
主要是利用 @media screen 来实现网页布局的响应式,
什么是响应式

其作用为：允许添加表达式用以确定用户浏览器窗口的环境情况，以此来应用不同的样式表。
总而言之，允许我们在不改变其内容的情况下，改变页面的布局以精确适应不同的设备。

对于media属性：
主要有三点

screen 是媒体类型里的一种
and 为关键字，其他关键字还有only(限定某种设备)， not(排除某种设备)
(min-width: 400px) 设置屏幕的最大或者最小宽度。

对于响应式布局的方式有两种：

利用link来判断用户现在设备的屏幕大小，从而引用不同的 css 文件

<link rel="stylesheet" type="text/css" href="ymbj.css" media="screen and (min-width: 600px)">

意思是当屏幕的宽度大于等于600px的时候，应用 ymbj.css
2. 直接写在<style>标签中

 @media screen and (max-width: 600px) {
  /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
      p {
           color: white;
       }          
  }

需要注意的在我们采用响应式布局中：
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
这一条非常重要，否则出现横向滚动条的时候 @media是没有效果的。

1.5.9.3 下拉菜单

对于下拉菜单我们主要用的有：

定位
display: none; 隐藏；display: block; | inline-block 显示

<style>
/* 设置下拉按钮的样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 容器 <div> - 需要放置下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉内容（默认隐藏） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 下拉链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 悬停时更改下拉链接的颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 显示下拉内容时，更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">鼠标停留出现下拉框</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

1.5.9.4 选择器

例子	描述
[target]	选择带有 target 属性的所有元素。
[target=_blank]	选择带有 target=“_blank” 属性的所有元素。
[title~=flower]	选择带有包含 “flower” 一词的 title 属性的所有元素。
[lang=en]	选择带有以 “en” 开头的 lang 属性的所有元素。
a[href^=“https”]	选择其 href 属性值以 “https” 开头的每个 `<a>` 元素。
a[href$=“.pdf”]	选择其 href 属性值以 “.pdf” 结尾的每个 `<a>` 元素。
a[href*=“w3school”]	选择其 href 属性值包含子串 “w3school” 的每个 `<a>` 元素。

1.5.10、输入框input

输入框的类型：
在 HTML 中， input 标签表示输入框，而输入框有很多类型，比如普通文本输入框、密码框、邮箱框（只能输入邮箱格式的内容）、网址框（只能输入框网址格式的内容）、数字框（只能输入数字）、单选框、多选框等。我们可以改变 input 标签的 type 属性来显示不同的输入框类型。
输入框的使用：
1. 普通输入框：input 标签的 type 属性默认为text。
  
  <input type='text'>
2. 密码输入框：如果将input 标签的 type 属性改为password,输入的内容则以点了代替
  
  <input type='passwordt'>
3. 邮箱输入框：如果将input 标签的 type 属性改为email,在输入不完整时会出现提示信息，但默认时间短。
  
  <input type='email'>
4. 网址输入框：如果将input 标签的 type 属性改为url,输入的内容需要以 http:// 或者 https:// 开头，且 @ 后必须有内容才满足验证规则，否则会有错误提示。但是提示时间短，而且不明显
  
  <input type=‘url’>
  
  5.数字框：如果将input 标签的 type 属性改为number,输入其他字符无效，且输入框最右侧会有加减按钮。
  
  <input type=‘number’>
5. 单选框：如果将input 标签的 type 属性改为radio则表示为单选框，且每个 input 标签必须添加 name 属性，否则不能成为一组的单选框（既可以选多个）。

<input type="radio" name='gender'> 男
<input type="radio" name='gender'> 女
<input type="radio" name='gender'> 保密

在这里插入图片描述

多选框：把 input 的 type 属性设置为 checkbox，则表示多选框。多选框和单选框一样，需要设置 name属性。

<input type="checkbox" name="ball" checked> 篮球
<input type="checkbox" name="ball">足球
<input type="checkbox" name="ball" checked>排球
<input type="checkbox" name="ball">乒乓球

在这里插入图片描述
8. 占位符：把 input 标签可以设置 placeholder属性为占位符。占位符的作用为输入提示，如果输入框没有内容，则会显示占位符的内容，一旦输入框有内容，则会显示输入框的内容，占位符的内容消失。

<input type="text" placeholder="请输入内容">

在这里插入图片描述

注意：
- 单选框和多选框必须给 name 属性，name 属性的值为自定义内容；
- 邮箱框和网站框对输入内容有限制，需按照其验证规则输入正确的内容；
- 占位符一般为输入提示，所以占位符的内容为此输入框的提示，输入内容后消失。
- 改变 input 的 type 属性来设置输入框不同的类型。

label标签
label 需要和 input 标签搭配一起使用。LABEL 标签的 for 属性需要和 input 的 id 属性一致，这样才能点击 label 标签的内容使对应的 input 输入框自动获取焦点。
对于label 的作用：
1.增强用户体验外
2.装饰作用
3.为行动不便人士上网提供了便利

注意：

label 标签里面需要写内容，才会在页面显示。
label 标签的 for 属性必须和 input 输入框的 id 一致。

<label for="username">用户名</label>
<input type="text" placeholder="请输入内容" id='username'>

在这里插入图片描述

1.5.10.1、textarea 文本域标签

textarea 标签既代表文本域标签

<textarea></textarea>

我们可以通过可以通过 COLS 和 ROWS 属性来规定 textarea 的尺寸：
                           cols 设置文本域的宽度，rows 设置文本域的高度
                           我们也可以用：placeholder属性来实现占位符的效果
代码如下：
<textarea cols="30" rows="10" placeholder="请输入内容"></textarea>

在这里插入图片描述

1.5.10.2、select option 下拉菜单标签

select option 标签和 ul li 标签类似，select 标签代表下拉菜单整体，而 option 则是下拉菜单的每一个选项

<select>
    <option>苹果</option>
    <option>香蕉</option>
    <option>橘子</option>
</select>

在这里插入图片描述
总结：

select 标签表示下拉菜单整体，option 标签表示下拉菜单的每一个选项。
select 标签里只能嵌套 option 标签。
设置 option 标签的 disabled属性，可以禁用该选项。
设置 option 标签的 selected 属性，可以默认选择该选项。

1.5.11、表单标签 form

form 标签和 ul select 标签类似，代表表单整体，而里面嵌套的元素则是表单具体的内容。我们来做一个用户名和密码的表单：

<form>
    <label for="username">用户名</label>
    <input type="text" id='username'>
    <br>
    <label for="password">密码</label>
    <input type="password" id="password">
</form>

我们可以给 form 标签加上一个 method 属性，这个属性表示当前提交表单的方式，一般为 get 或者 post，这个需要后台先行告知。form 标签还有一个 action 属性，表示表单提交的地址，这个也需要后台先行告知。
注意：

form 标签代表表单整体，在页面上并无特殊样式显示。
form 标签里面嵌套的内容是表单的内容，可以是输入框、单选框、多选框、下拉菜单、文本域等。
form 标签需要设置 method属性，为提交表单的方式。
form 标签需要设置 action属性，为提交表单的地址。

例：京东

<form method="post">
    <div>
        <label for="loginname"></label>
        <input id="loginname" type="text" placeholder="邮箱/用户名/登录手机">
    </div>
    <div id="entry" class="item item-fore2">
        <label class="login-label pwd-label" for="nloginpwd"></label>
        <input type="password" id="nloginpwd" placeholder="密码">
        <span><b>大小写锁定已打开</b></span>
    </div>
    <div>
      <div>
        <span>
          <a href="#">忘记密码</a>
          </span>
        </div>
    </div>
    <div>
      <div>
        <a href="#">登    录</a>
      </div>
    </div>
</form>

1.6、CSS高级

1.7、响应式布局

1.8、jQuery

1.9、Javascript基础

1.10、AJAX

在使用前需要在 MINGW 中安装：npm i json-server -g
检测版本号判断是否安装成功： json-server --version
官方网站：https://www.npmjs.com/package/json-server

获取：get
添加：post
删除：delete
修改：patch
注意：除了 axios 其他方法的关键字都为大写

作用：Asynchronus Javascript And XML（前后端数据交互技术）

1.10.1 原生ajax

json 类型数据
- 1.前后端数据交互作用的数据，基本上跟对象一样
- 2.里面的引号都是双引号，属性名也需要引用
- 创建后端数据：
  例：
  获取

<body>
  <button class="btn">请求书籍数据</button>
  <script>
    // 后端数据接口
    // 获取书籍设计  get /books 无参  返回数组

    // 原生 ajax

    document.querySelector('.btn').onclick = function () {
      // a. 创建 xhr 对象
      const xhr = new XMLHttpRequest()
      // b. 创建对应请求  需要请求的方法 以及 请求 的地址
      // open(method, url)
      // method: GET POST DELETE PATCH PUT ...
      xhr.open("GET", "http://localhost:3006/books")

      // c.使用 send 发出请求 需要参数的话在这传递
      xhr.send()

      // b.使用 onreadystatechange 函数监听请求的过程
      xhr.onreadystatechange = function () {
        // xhr.status 状态码  xhr.readyState 状态
        if (xhr.status === 200 && xhr.readyState === 4) {
          // 获取数据是 json数据， json 数据像对象数据但是其实是 字符串
          // 需要 用 JSON.parse() 解析成对象
          console.log(JSON.parse(xhr.responseText))
        }
      }
    }
  </script>
</body>

添加
在这里插入图片描述

// 添加书籍数据  post  /books  {title:'xxx'} 返回新的书籍数据

    document.querySelector('.add').onclick = function () {
      // a. 创建 xhr 对象
      const xhr = new XMLHttpRequest()
      // b. 创建对应请求  需要请求的方法 以及 请求 的地址
      // open(method, url)
      // method: GET POST DELETE PATCH PUT ...
      xhr.open("POST", "http://localhost:3006/books")

      // 默认原生 ajax 是不能使用 josn 类型当参数的时候需要设置请求
      xhr.setRequestHeader("Content-type","application/json")

      // 当传递参数的时候 原生 ajax 请求需要传递 json 数据给后端
      xhr.send(JSON.stringify({title:'小程序'}))

      xhr.onreadystatechange = function () {
        // xhr.status 状态码  xhr.readyState 状态
        if (xhr.status >= 200 && xhr.readyState === 4) {
          // 获取数据是 json数据， json 数据像对象数据但是其实是 字符串
          // 需要 用 JSON.parse() 解析成对象
          console.log(JSON.parse(xhr.responseText))
        }
      }
    }

删除
在这里插入图片描述

// 删除书籍数据  delete /books/id  无参
    document.querySelector('.del').onclick = function () {
      // a. 创建 xhr 对象
      const xhr = new XMLHttpRequest()
      // b. 创建对应请求  需要请求的方法 以及 请求 的地址
      // open(method, url)
      // method: GET POST DELETE PATCH PUT ...
      xhr.open("DELETE", "http://localhost:3006/books/xhn")

      // 默认原生 ajax 是不能使用 josn 类型当参数的时候需要设置请求
      xhr.send()

      xhr.onreadystatechange = function () {
        // xhr.status 状态码  xhr.readyState 状态
        if (xhr.status >= 200 && xhr.readyState === 4) {
          // 获取数据是 json数据， json 数据像对象数据但是其实是 字符串
          // 需要 用 JSON.parse() 解析成对象
          console.log(JSON.parse(xhr.responseText))
        }
      }
    }

修改
在这里插入图片描述

// 修改书籍数据  PATCH    /books/id  无参
    document.querySelector('.edit').onclick = function () {
      // a. 创建 xhr 对象
      const xhr = new XMLHttpRequest()
      // b. 创建对应请求  需要请求的方法 以及 请求 的地址
      // open(method, url)
      // method: GET POST DELETE PATCH PUT ...
      xhr.open("PATCH", "http://localhost:3006/books/a3O_77F")

      // 默认原生 ajax 是不能使用 josn 类型当参数的时候需要设置请求
      xhr.setRequestHeader("Content-type","application/json")

      // 默认原生 ajax 是不能使用 josn 类型当参数的时候需要设置请求
      xhr.send(JSON.stringify({title:"微信小程序"}))

      xhr.onreadystatechange = function () {
        // xhr.status 状态码  xhr.readyState 状态
        if (xhr.status >= 200 && xhr.readyState === 4) {
          // 获取数据是 json数据， json 数据像对象数据但是其实是 字符串
          // 需要 用 JSON.parse() 解析成对象
          console.log(JSON.parse(xhr.responseText))
        }
      }
    }

1.10.2 jquery的ajax

实现：

获取

<body>
  <button class="btn">请求书籍数据</button>
  <button class="add">添加书籍数据</button>
  <button class="del">删除书籍数据</button>
  <button class="edit">修改书籍数据</button>
  <script src="./js/jquery-3.6.1.js"></script> <!--引入jquery-->
  <script>
    // 获取
    $(".btn").click(function () {
      $.ajax({
        method: 'GET',
        url: 'http://localhost:3006/books',
        success(res){
          console.log(res)
        }
      })
    })
  </script>
</body>

添加

 // 添加
    $(".add").click(function () {
      $.ajax({
        method: 'POST',
        data: {titile: 'js 高级程序设计'},
        url: 'http://localhost:3006/books',
        success(res){
          console.log(res)
        }
      })
    })

删除

在这里插入图片描述

// 删除
    $(".del").click(function () {
      $.ajax({
        method: 'DELETE',
        url: 'http://localhost:3006/books/a3O_77F',
        success(res){
          console.log(res)
        }
      })
    })

修改

// 修改
    $(".edit").click(function () {
      $.ajax({
        method: 'PATCH',
        data: {titile: '喜欢唱，跳，rep'},
        url: 'http://localhost:3006/books/ctrp',
        success(res){
          console.log(res)
        }
      })
    })

1.10.3 axios的ajax

实现：

获取

<body>
  <button class="btn">请求书籍数据</button>
  <button class="add">添加书籍数据</button>
  <button class="del">删除书籍数据</button>
  <button class="edit">修改书籍数据</button>
  <script src="./js/jquery-3.6.1.js"></script>
  <script src="./js/axios.min.js"></script>
  <script>
    // 获取
    $(".btn").click(function () {
      axios.get('http://localhost:3006/books').then(res => {
        console.log(res.data)
      })
    })
  </script>
</body>

添加

 // 添加
    $(".add").click(function () {
      axios.post('http://localhost:3006/books',{title:'数据结构与算法'}).then(res => {
        console.log(res.data)
      })
    })

删除

在这里插入图片描述

// 删除
    $(".del").click(function () {
      axios.delete('http://localhost:3006/books/BI82pzn').then(res => {
        console.log(res.data)
      })
    })

修改

在这里插入图片描述

// 修改
    $(".edit").click(function () {
      axios.patch('http://localhost:3006/books/8id89xN',{title:'c语言程序与设计'}).then(res => {
        console.log(res.data)
      })
    })

上三小章总结：

1.原生 ajax 请求
请求的方法有：get post
首先需要创建一个：XMLHttpRequest 对象使用对象的方法有
- open(‘method’,'url') 创建对应请求需要请求的方法以及请求的地址
- send(传递数据)使用 send 发出请求需要参数的话在这传递
- 使用onreadystatechange 函数监听请求的过程

需要注意：可能会因为 json字符串 JSON.stringfy() JSON.parse()出现的问题
json.stringfy()将对象、数组转换成字符串；json.parse()将字符串转成json对象

 const obj = {
      a: 100,
      b: {
        c: 200
      }
    }
    const newobj = JSON.parse(JSON.stringify(obj))
    newobj.b.c = 300
    console.log(newobj)
    console.log(obj)

在这里插入图片描述

2.JQuery 请求
- $.ajax({ method: '请求的方法, url: '请求的地址',data‘请求传递的数据’,success(res){请求成功的回调函数 }）
3.axios请求
- axios.请求方法('地址',{数据}).then(res => { res.data } )
4.请求的问题：如果之前的 ajax 请求，出现了请求嵌套了多次
- 需要注意：请求是异步，基本上所有的请求都是写在请求的回调函数内，如果嵌套多了回调更多就会形成 ‘回调地狱’

//请求的多次嵌套
$.ajax({method:'',url:'',data{}, success(res){
    $.ajax({method:'',url:'',data{}, success(res){
    })
})

1.10.4 promise 封装 ajax

在这里插入图片描述

 //基础结构
    // axios.get()
    // .then( get )
    // .then( post )
    // 代码详解请参考上三小节
    const myAxios = (options) => {
      return new Promise((resolve, reject) => {
        const { method, url, data } = options
        const xhr = new XMLHttpRequest()
        xhr.open(method, url)
        if (data) {
          xhr.setRequestHeader("Content-type", "application/json")
          xhr.send(JSON.stringify(data))
        } else {
          xhr.send()
        }
        xhr.onreadystatechange = function () {
          // xhr.status 状态码  xhr.readyState 状态
          if (xhr.status >= 200 && xhr.readyState === 4) {
            // 获取数据是 json数据， json 数据像对象数据但是其实是 字符串
            // 需要 用 JSON.parse() 解析成对象
            console.log(JSON.parse(xhr.responseText))
          }
        }
      })
    }

    // 其实 then 是 promise 实例化对象下的方法
    // then 方法传递的参数其实技术 resolve函数

    // 写法一： 
    // myAxios({ method: 'GET', url: "http://localhost:3006/books" })
    // .then(res => {
    //   console.log(res)
    //   return 
    //   myAxios({ method: 'POST', url: "http://localhost:3006/books", data: {titile: 'css3'} })
    //   })
    // .then(res => {
    //       console.log(res)
    // })

    // 写方二：添加按钮

    $(".btn").click(function () {
      myAxios({ method: 'GET', url: "http://localhost:3006/books" }).then(res => {
        console.log(res)
      })
    })
    $(".add").click(function () {
      myAxios({ method: 'POST', url: "http://localhost:3006/books", data: { titile: 'css3' } }).then(res => {
        console.log(res)
      })
    })

请求出错怎么写:


    //基础结构
    // axios.get()
    // .then( get )
    // .then( post )

    const myAxios = (options) => {
      return new Promise((resolve, reject) => {
        const { method, url, data } = options
        const xhr = new XMLHttpRequest()
        xhr.open(method, url)
        if (data) {
          xhr.setRequestHeader("Content-type", "application/json")
          xhr.send(JSON.stringify(data))
        } else {
          xhr.send()
        }
        xhr.onreadystatechange = function () {
          if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 400) {
              resolve(JSON.parse(xhr.responseText))
            }else{
              console.log(JSON.parse(xhr.responseText))
              reject()
            }
          }
        }
      })
    }

    // 其实 then 是 promise 实例化对象下的方法
    // then 方法传递的参数其实技术 resolve函数
    // 传递参数出现错误时
    $(".add").click(function () {
      myAxios({ method: 'POST', url: "http://localhost:3006/books", data: { titile: 'css3',id: ymNlOLv} })
      .then(res => {
        console.log(res)
      })
      .catch(res => {
        console.log('失败了')
      })
    })
  </script>

Generator 与 Promise一样是异步编程解决方案
具体详解参考：https://es6.ruanyifeng.com/#docs/generator
- 简写方式

// 写法一：
const getBooks = async() => {
      // await 会将后面的 promise 或者Generator 或者 async 函数制作成同步的
      // 而且 await 会获取请求的结果
      const res = await axios.get('http://localhost:3006/books')
      console.log(res)
      console.log(111)
    }
    getBooks()
// 写法二：
async function getBooks(){
      // await 会将后面的 promise 或者Generator 或者 async 函数制作成同步的
      // 而且 await 会获取请求的结果
      const res = await axios.get('http://localhost:3006/books')
      console.log(res)
      console.log(111)
    }
    getBooks()

1.11、Git

第二章：高级技术

2.1、npm

2.1.1、安装

node 安装好后自带 npm. node 的包管理工具
node package manager 包括前端和后端的包
前端使用npm 管理前端项目所需要的包
前端主要使用npm下载前端相关的包
官网:https://www.npmjs.com/

npm的作用：

可以作为包管理工具，项目如果想要使用 npm 管理项目的包，那么项目必须是 node 项目
- 如何将项目制作成为 node 项目
  - 1.在项目内打开命令行工具
  - 2.执行 npm init -y命令
  - 项目中就会多一个 package.json 文件,这时就意味着创建成功.
- npm 的配置修改：
  - 替换 npm 的镜像源替换为“淘宝”镜像源
  - npm config set registry https://registry.npm.taobao.org
  - 体现 npm 下载时的 http 请求
  - npm config set loglevel=http
- npm 的下载：
- npm install 包名@版本install可以简写为: i
- 在下载包的时候可以附加一些参数：
- --save -S 不写参数也是一个意思（下载的包是项目的必须包）
- --save-dev -D下载的包是项目的工包（就是使用了一次后就不再使用）
- -g下载全局的包，下载到我们电脑上
- 包的卸载 npm uninstall 包 uninstall 可简写为：uni
- 例:lodash
- npm install lodash
- npm 下载的包会在项目的根目录 node_modules 文件夹内
- 下载和的包会在项目的 package.json内体现，必须的包在 dependencies字段显示，工具包在 devdependencies字段显示
npm 安装的包使用

console.log('测试')

//使用 npm 下载的包不需要在 html 内使用  script 引入 可以直接在对应的 js 文件内导入 lodash来使用
var cloneDeep = require('lodash/cloneDeep.js')
var xx = require('./about')
var obj = {
  a: 100,
  b: {
    c: 200
  }
}
var newObj = cloneDeep(obj)
newObj.b.c = 300
console.log(newObj)
console.log(obj)
console.log(xx)

// 直接将上面的js引入到页面会报错，提示 require 找不到

// require 是 node 的模块语法 浏览器不支持

// 解决方法
// 需要利用打包编译工具 lai'b 他给我们处理模块

// mode 的模块概念

// 模块需要设置导出，才能导入
// node 项目内会将所有的 js 文件当作模块
// 核心模块（node 自带）第三方模块（npm 下载的）自定义模块（子级写的）

//核心模块（node 自带）第三方模块（npm 下载的） 引入的方式都是  require('包名')
// 自定义模块（子级写的）引入的时候写路径

// 模块导入的时候会先执行模块 js 内的语句，然后在获取模块导出的内容

// 模块是拥有独立作用域
// 模块是可以相互导入也就是是 js 里面可以引入 js，在之前我们都需要将
// js 一起写到 html 才能有关联

about.js

var a = 100
module.exports = a  //模块导出 a

webpack功能：模块打包，编译器，优化工具箱
https://webpack.docschina.org/
webpack 的使用
项目内安装 webpak 以及 webpack-cli
npm install webpack webpack-cli --save-dev
修改项目结构将需要编译打包的 js 命名为 index.js 并且放在根目录下的 src/index.js

在这里插入图片描述

执行npx webpack进行编译
在执行完后会不出现 main.js文件

重新引入：js

在这里我们可以可以使用了
在编译成功后会创建 dist 文件夹，将编译好的 js 文件放进去，在index.html中重新引入该js既可。
对于修改后的 js 在现阶段我们可以进行重新编译

2.2、ECMAScript6 +

let和const命令
- 作用：跟 var 一样起声明变量的作用
- let 和 const 与 var 区别：
  - a.不能重复声明
  - b.没有变量声明提升
  - c.拥有块级作用域 {} 就是块
  - d.let 与 const 的区别：const 用于创建常量不可以被修改
变量的解构赋值：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
- ：
- ：变量参数的解构赋值
模板字符串

<script>
    const username = '大白'
    console.log(`我的名字是${username}`)
  </script>

BigInt 大整型
- 当数字过大时浏览器会无法解析，会直接显示：Infinity
- 这时我们只需要 + n浏览器就可以解析

 const maxNum = 1646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446164646464461646464644616464646446n
    console.log(maxNum)

数组的扩展
- 1. 扩展运算符

回顾：
const arr = [1,2,3] 
//arr是对象数据，叫数组。数组是对象的一种，他们的存储方式是地址的方式存储，在我们修改它里面的
// 内容时，地址没有方式改变，所有不会报错
arr.push(4)
console.log(arr)

报错方式：
const arr = [1,2,3] 
arr = [1,2,3,4]
console.log(arr) //我们修改了 arr 地址

扩展运算符
let arr = [1,2,3]
arr = [...arr,4]
console.log(arr)

对象：
let obj = {a:100 ,b:200}
let newObj = {...obj}
newObj.b = 300
console.log(newObj)
console.log(obj)

let obj = {a:100 ,b:200}
let obj1 = {c:300}
let newObj = {...obj, ...obj1)
console.log(newObj)

结果: {a:100 ,b:200 ,c:300}

在这里插入图片描述

对象的简洁表示法

原写法：

const userage = 20
const username = 'lucy'
const obj = {
  username: username,
  userage: userage,
  say: function () {
  
  },
}

简洁法：
const userage = 20
const username = 'lucy'
const obj = {
//当对象的属性名和属性值表示的变量名相同的时候可以省略
  username,
  userage,
  //方法的简写 
  say(){
  }
}

对象新增的方法 object.assign() Object.is()
运算符的扩展
- 链判断运算符

    //链判断运算符
    let obj = {
      a: {
        id: 1,
        b: {
          name: 'hahaha',
          c: {
            val: 'xxx'
          }
        }
      }
    }
    console.log(obj.a?.b?.c?.val)

    //null 判断运算符  值判断 undefined 以及 null  若值存在则显示值
    let num = undefined
    let newNum = num ?? '值不存在'
    console.log(newNum)

symbol 新的数据类型
- 创建独一无二的数据

    //创建独一无二的数据
    let a =Symbol(1)
    let b =Symbol(1)
    console.log(a)
    console.log(b)
    console.log(a===b)
    let obj = {
      [a]: 'xx',
      'Symbol(1)': 'xxxxxxx',
      a:100,
      a:200
    }
    console.log(obj)

函数的扩展
- 箭头函数

//原函数写法
    function fn(a, b){
      return a + b
    }

    let fn = (a,b) => {
      return a + b
    }

    let fn = (a, b) => a + b
    let res = fn(2, 3)
    console.log(res)

    // 当箭头函数的参数只有一个的时候可以省略（）  let fn = a => {}
    // 当箭头函数内只有返回值，而没有操作的时候可以省略{}以及 return  let fn =(a,b) => a+b

    //箭头函数和普通函数的区别 
    // 1. this 指向不同
    // 普通函数的  this  指向，函数调用的时候谁调用的函数指向的就是谁
    // 箭头函数this指向，函数创建的时候就绑定了，一般箭头函数内的 this 都是 window 
    // 在 es6 的类里面的方法 写成箭头函数， 函数内的 this 指向的是 实参

- 函数参数的默认值

let fun = (x =10, y = 20) => {
    // 一顿操作
    // 当调用的时候传递了 x  y 就是用来传递的，没传递的话 x 10 y 20
    // let xx = x ?? 10
    // let yy = y ?? 20
    // console.log(xx)
    // console.log(yy)
    console.log(x)
    console.log(y)
   }

   fun()

- 箭头函数的参数

// 原写法
   function fn() {
    // 普通函数内有一个关键字 arguments 指的是函数实参的集合  是一个类数组
    console.log(arguments)
    for (let i = 0; i< arguments.length; i++) {
      console.log(arguments[i])
    }
   }
   fn(1,2,3,4,5,6,7,8,9)

   // 新写法
   // ...rest 是实参集合数组
   let fn = (a,...rest) => {
    console.log(rest)
   }
   fn(1,2,3,4,5,6,7,8,9)

class 就是构造函数的原型对象的另外写法

第三章：主流框架

3.1、Vue

首先需要全局安装 Vue :npm i -g @vue/cli
完成后在：Vscode 中的目标文件打开集成终端在这里插入图片描述
输入：vue create es6-module-demo

3.1.1、导入与导出

在项目中安装：lodash
对导入进行引入方式有：导入的语句必须写在文件的最上面
1. 语法： import 任意名 from '包名 | 地址'
导入方式有：
1. 默认导入
2. 命名导入
3. 全部导入
导出方式有：
1. 命名导出
2. 默认导出，其中默认导出只能导出一次

项目文件中自带的 main.js

import Vue from 'vue'
import App from './App.vue'
// 引入
// import 任意名 from '包名 | 地址'
import _ from 'lodash'
// 执行整个 about.js 文件 不获取里面的导出内容
// import './about'
// 2.命名导入  然后换名
import {str as newStr, a} from './about'
// 默认导入
import xxxx from './about'


// 全部导入 all 是所有导出的内容组成的对象
import * as all from './about'



// es6 模块
// 1.核心
// 2.第三方
// 3.自定义

//步骤一：安装lodash  在终端中输入：npm i lodash

// 引入方式    导入的语句必须写在文件的最上面
// 1.默认导入
//必须对应默认导出 第三方模块基本上都是默认导出的
// import 任意名 from '包名 | 地址'
// 2.命名导入

const str = 'hello'
console.log(_.capitalize(str))
console.log(newStr)
console.log(a)
console.log(xxxx)
console.log(all) // {str:'hello', a: 100, default: 400}


Vue.config.productionTip = false

new Vue({
  render:h => h(App),
}).$mount('#app')

在 src 下创建 about.js

//创建
const str = 'hello'
const a = 100
const b = 400
console.log(str)

// 导出方式：
// 1. 命名导出
export{str,a}
// 2.默认导出  只能导出一次
export default b

3.1.2、Vue

什么是Vue:
Vue（发音为/vjuː/，likeview）是一个用于构建用户界面的渐进式框架。与其他单片框架不同，Vue 是从头开始设计的，可以逐步采用。核心库仅专注于视图层，并且易于拾取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue 也完全能够为复杂的单页应用程序提供支持。

安装 Vuecli

脚手架工具快速搭建 Vue 项目 ‘npm i -g @ vue/cli’
安装好 vuecli 之后，使用 vue 命令创建项目
1.vue cerate 项目名，在创建过程中的时候会，让我们选择 vue 版本，还可能问包管理工具这时我们选择npm
2.创建好后使用：cd 项目名进入项目内
3.进入后使用：npm run serve启动项目
4.项目启动后进入：
在初次使用项目时：vscode会提示安装 Vetur
验证 Vetur 安装是否成功
Vue项目构成
- node_modules 项目使需的包
- public 里面放的 index.html 是单页面应用的模板页面，在没有需求时不修改
- src 项目的源代码，写 vue 地方
  - assetc 放全局 Css 已经图片
  - App.vue 组件
  - main.js 项目入口文件
- .gitignore git 仓库忽略上传
- babel.config.js babel 的配置文件（编译JavaScript编译器）
- jsconfig.json 解析 js 配置文件
- package.json(node项目标志性文件) package-lock.json(包记录文件)
- vue.config.js vue 项目配置文件

3.1.3、组件

组件一般由三个标签组成,Vue 项目是由很多组成的
组件名需要由多单词组合而成（2个以上）以大骆峰方式组成，具体组件名以所在公司为准

temlate 书写 html 结构的地方只能有一个子级
script 书写 js 逻辑
style 书写 css 样式的，其样式为全局样式

<template>  
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>  <!--书写 html 结构的地方  只能有一个子级-->

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script> <!--书写 js 逻辑-->

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style> <!--书写样式的-->

3.1.3、组件的注册

意义：组件的嵌套

在父组件中导入子组件 import 组件名 from ‘文件所在位置’
在父组件的 script内导出的对象下，写一个components属性，用于注册组件
在父级的template内之间使用组件名当作标签既可
打开网站：

注意：子组件可以与子组件嵌套使用

也是可以同时在父组件中显示

3.1.4、Prop

导使用组件的时候，父组件希望子组件可以展示父组件希望展示的内容
Prop 子组件接收之后可以在 template内直接使用

用法：
    父组件
    <ButtonDemo text='登录'/>
    
    子组件
     <template>
         <button >{{text}}</button>
         <button >{{text ?? ”默认文字“}}</button><!--当想展示子组件默认内容时可以使用 ?? 来进行判断-->
     </template>

     <script>
         export default {
             props: ['text']
               }
     </script>

在这里插入图片描述

3.1.3.1、模板语法

意义：在Vue中的 template内允许写 js代码，但学法需要遵守模板语法规则

初级写法：

在标签之间使用： {{Js代码}}
如果需要按钮展示不同颜色，在开始标签内使用 v-bind 指令来实现
对于v-bind 指令，我们可以使用：来代替

<button v-bind:class=" `btn ${type||''}`">{{text ?? "默认文字"}}</button>

<button :class=" `btn ${type||''}`">{{text ?? "默认文字"}}</button>

在这里插入图片描述

高级写法：

规定 props 的类型
type 可以是以下原生构造函数中的一个
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
规定 props 的类型以及默认值和自定义校验函数
- 需要注意：required与default不能同时存在

 props: {
    text: {
      type: String,

      required: true,// 必须传递,

      // default: '默认文字'// 默认值
    },
    type:{

    }
   }

自定义校验函数
对于父级传递过来的内容，子组件最好进行校验函数。
以上几节用的代码
App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <br>
    <!-- 一个登录，一个注册 -->
    <ButtonDemo text="登录" type="primary" />
    <ButtonDemo text="注册" type="secondary" />
    <ButtonDemo text="1234" />
  </div>
</template>

<script>
import ButtonDemo from "./components/ButtonDemo.vue"

export default {
  name: "App",
  components: {
    ButtonDemo
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ButtonDemo.vue

<template>
  <button :class=" `btn ${type||''}`">{{text}}</button>
</template> 

<script>
export default {
  // props: ['text' ,'type']
  //规定 props 的类型
  // props: {
  //   text: String,
  //   type: String
  // }

   //规定 props 的类型 以及默认值和自定义校验函数


   props: {
    text: {
      type: String,

      required: true,// 必须传递,

      // default: '默认文字'// 默认值

      // 自定义校验函数
      validator: (value) => {
        // value 表示的是传递的值
        // return ['登录','注册'].includes[value]
        return value.length <= 4 //规定长度
      }
    },
    type:{
      type: String,
    }
   }
}
</script>

<style>
  .btn{
    border: none;
    outline: none;
    padding: 10px 20px;
    border-radius: 4px; /*圆角*/
    background-color: rgb(31, 122, 66);
    cursor: pointer;/* 鼠标样式*/
    color: #fff;
  }
  .btn:hover {
    background-color: rgb(195, 207, 27);
  }
  
  .primary{ /* 主要 */
    background-color: aqua;
  }

  .secondary{ /* 次要的 */
    background-color: rgb(153, 49, 66);
  }
</style>

3.1.5、data 函数

意义：Vue 中如果页面想要产生变化的话，Vue 中需要使用 data 控制这个变化。页面的变化必须由数据(data)来驱动。数据(data)变则页面变

例：选择加或者减，实现 0 的变化
步骤：
- 1.定义 date
- 2.进行 data 和页面的关联
- 3.修改 data

3.1.5.1、Vue中如何绑定事件

Vue的事件处理

使用 v-on 指令绑定事件 (vue 中有很多指令指令的值是 js 环境) v-on可以简写成 @
事件函数需要在 methods 对象下定义
methods 内定义的可以直接在 template中使用
- Vuethis解析：
  - vue 组件函数内的 this 表示的是组件本身
  - 但是需要注意，最外层函数需要写成普通函数，内部函数需要写成箭头函数才能获取 this
  - vue 组件中很少获取真实的 dom 节点

在这里插入图片描述

修改 data
加入:this.num --|++既可
事件内实现的功能如果就是简单的修改 data 的话，可以直接写在 template内
实现修改功能
- 使用 change 来修改 (事件传参)
- 在methods 内的方法一般都是当作事件的，也有特殊的情况，不是事件就是功能函数
- 在methods 内的方法一般都是当作事件的，也有特殊的情况，不是事件就是功能函数

 <button @click="change(900, $event)">任意修改</button>

// 事件设置参数如何获取  事件对象
    change(newNum, event){
      console.log(newNum)
      console.log(event)
      this.num = newNum
    }

以上案例完整版：ButtonDemo.vue

<template>
  <div>
    <h3>小计数器</h3>
    <button v-on:click="sub">-</button>
    <span>{{num}}</span>
    <button @click="add">+</button>
  <!-- 事件内实现的功能如果就是简单的修改 data 的话，可以直接写在 template内 -->
    <!-- <button @click="num++">+</button> -->
    <!-- <button @click="() => { this.num ++}">+</button> -->
    <!-- 事件函数传递参数 -->
    <button @click="change(900, $event)">任意修改</button>
  </div>
</template>

<script>
// vue 中如果页面想要产生变化的话，vue 中需要使用 data 控制这个变化
// 页面的变化必须由数据(data)来驱动。 数据(data)变则页面变

// 之前要实现 span 内的 0 的加减，需要先获取 0 然后进行 运算 ，最后将结果放在上面

// 做功能步骤
// 1.定义 data
// 2.data 和页面进行关联
// 3.修改data

// vue 的事件处理
// 使用 v-on 指令绑定事件  可以简写成@
// 事件函数需要在 `methods` 对象下定义
// `methods` 内定义的可以直接在 `template`中使用


// vue 中有很多指令  指令的值是 js 环境
export default {
  data(){
    return {
      num: 100
    }
  },
  methods: {
    sub(){
      // vue 组件函数内的 this 表示的是组件本身
      // 但是需要注意，最外层函数需要写成普通函数，内部函数需要写成箭头函数才能获取 this
      // vue 组件中很少获取 真实的 dom 节点
      // console.log(this);//外层
      // //内层
      // (function () {
      //   console.log(this);
      // })()
      
      // 修改 data 直接使用 this.data名 修改既可
      this.num --
    },
    add(){
      this.num++
    },
    // 在methods 内的方法一般都是当作事件的，也有特殊的情况，不是事件 就是功能函数
    
    // 事件设置参数如何获取  事件对象
    change(newNum, event){
      console.log(newNum)
      console.log(event)
      this.num = newNum
    }
  }
}
</script>

<style>

</style>

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <br>
    <!-- 一个登录，一个注册 -->
    <ButtonDemo text="登录" type="primary" />
    <ButtonDemo text="注册" type="secondary" />
    <ButtonDemo text="1234" />
    <hr>
    <CountDemo />
    
  </div>
</template>

3.1.6、class 与 style 的绑定

例：
颜色的切换

StyleDemo.vue

<template>

  <div>
    <button @click="change">切换颜色</button>
    <div :class="` demo ${active ? 'active': ' '}`"></div>
    <!-- <div :class="active ? 'demo active' : 'demo'"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: false
    }
  },
  methods: {
    change(){
      this.active = !this.active
    }
  }
}
</script>

<style>
.demo {
  width: 300px;
  height: 300px;
  background-color: aqua
}

.active {
  background-color: red;
}
</style>
</style>

class 的绑定
- 1.对象的写法

<div :class="{demo:true, active: active}"></div>

2.数组的写法

<div :class="['demo',active? 'active':' ']"></div>

3.数组对象的写法

<div :class="['demo',{active:active}]"></div>

style的绑定
对象的语法

<div class="demo" :style="{backgroundColor: active? 'red': ' '}"></div>

上例子的StyleDemo.vue 项目

<template>

  <div>
    <button @click="ch">切换颜色</button>
    <!-- <div class="demo"></div> -->
    <!-- <div :class=" active ?'demo active':'demo'"></div> -->
    <!-- <div :class="`demo ${active ? 'active' :' '}`"></div> -->
    <!-- class 的绑定 -->
    <!-- 1.对象的写法 -->
    <!-- <div :class="{demo:true, active: active}"></div> -->
    <!-- 2.数组的写法 -->
    <!-- <div :class="['demo',active?'active':' ']"></div> -->
    <!-- 3.数组对象的写法 -->
    <!-- <div :class="['demo',{active:active}]"></div> -->
    <!-- d -->
    <!-- 对象语法 -->
    <div class="demo" :style="{backgroundColor: active ? 'red': ' #ccc'}"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: false
    }
  },
  methods: {
    ch(){
      this.active =! this.active
    }
  }

}
</script>

<style>
.demo {
  width: 300px;
  height: 300px;
  background-color: aqua
}

.active {
  background-color: red;
}
</style>

3.1.7、条件渲染

样式的消失和出现 v-show 指令
创建


```handlebars
<template>
  <div>
    <!-- 条件渲染 -->
    <!-- 样式的消失和出现 v-show 指令 -->
    <button @click=" show = !show">切换消失和出现</button>
    <div v-show="show" class="box1"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: 1
    }
  }
}
</script>

<style>
.box1 {
  width: 200px;
  height: 200px;
  background-color: aqua;
}

.hide {
  display: none;
}
</style>

- 样式的消失和出现 v-show 指令

<template>
  <div>
    <!-- 条件渲染 -->
    <!-- 样式的消失和出现 v-show 指令 -->
    <button @click=" show = !show">切换消失和出现</button>
    <!-- 结构的消失和出现 v-if -->
    <div v-if=" show === 1" class="box1">1</div>
    <div v-else-if="show === 2" class="box1">2</div>
    <div v-else class="box1">3</div> 
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: 1
    }
  }
}
</script>

<style>
.box1 {
  width: 200px;
  height: 200px;
  background-color: aqua;
}

.hide {
  display: none;
}
</style>

3.1.7.1、v-show与v-if对比

共同点
我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示
- 当表达式为true的时候，都会占据页面的位置
- 当表达式都为false时，都不会占据页面位置
不共同点
- 控制手段不同
  - v-show隐藏则是为该元素添加css–display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除
- 编译过程不同
  - v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
- 编译条件不同
  - v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染
- 性能消耗不同
  - v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
- 使用环境
  - 如果需要非常频繁地切换，则使用 v-show 较好
  - 如果在运行时条件很少改变，则使用 v-if 较好

3.1.7、列表渲染

解释：如何将数组数据展示到页面

使用 v-for
v-for 可以对 template 进行循环 template不会渲染成如何标签，还要注意 key 不能给在 template 上写
v-if 与 v-for 可以搭配使用 ,但注意 v-if不能也 v-for 写在同一级

<template>
  <div>
    <!-- 列表渲染 v-for -->
    <!-- 如何将数组数据展示到页面 -->
    <!-- <ul>
      <li v-for="(book, index) in books" :key="book.id">{{book.title}}{{index}}</li>
      <li v-for="book in books" :key="book.id">{{book.title}}</li>
    </ul> -->

    <!-- v-for 可以对 template 进行循环 template不会渲染成如何标签，还要注意 key 不能给在 template 上写-->
    <!-- v-if 与 v-for 可以搭配使用 ,但注意 v-if不能也 v-for 写在同一级 -->
    <template v-for="book in books">
      <span :key="book.id">{{book.id}}</span>
      <span :key="book.id+book.title">{{book.title}}</span>
    </template>
  </div>
</template>

<script>
export default {
  data(){
    return{
      books: [
        {
          id: 1,
          title: 'vue'
        },
        {
          id: 2,
          title: 'react'
        }
      ]
    }
  }
}
</script>

<style>

</style>

3.1.8、输入表单的绑定

在vue项目内,所有可输入的表单, vue 认为输入过程都是页面的变化,那么页面的变化都必须由 data 去控制

我们选择使用：v-model 来进行绑定

<template>
  <div>
    <!-- 表单输入绑定 -->
    <!-- 在vue项目内,所有可输入的表单, vue 认为输入过程都是页面的变化,那么页面的变化都必须由 data 去控制 -->
    <!-- <input type="text" :value="username" @input="handleInput"> -->
    <input type="text" v-model="username"> <!--输入框-->
    <textarea v-model="comment"></textarea><!--评论框-->
    <input type="checkbox" v-model="isAgree"><!--选择框-->
    <div><!--文字单选择框-->
      男<input value="男" v-model="sex" type="radio" name="sex"> 
      女<input value="女" v-model="sex" type="radio" name="sex">
    </div>
    <select name="" id="" v-model="type"><!--下拉选择框-->
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
    </select>

  </div>
</template>

<script>
export default {
  data(){
    return {
      username:'',
      comment:'',
      isAgree:'',
      sex:'男' ,//它的取值与 value 有关
      type: 'a' //它的取值与 value 有关
    }
  },
  methods: {
    // handleInput(event){
    //   this.username = event.target.value
    // }
  }
}
</script>

<style>

</style>

3.1.9、计算属性

通俗一点可以为：能够在里面写一些计算逻辑的属性

作用：
- 减少模板中的计算逻辑
- 数据缓存。当我们的数据没有变化时，不在执行计算的过程
- 依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据
- 值不是直接渲染到页面，是通过计算之后再渲染到页面，可以使用计算属性computed
  例：

<template>
  <div>
    <!-- 计算属性 -->
    <label for="">姓：</label><input type="text" v-model.lazy="firstName" />
    <label for="">名：</label><input type="text" v-model.lazy="lastName" />
    <br />
    <label for="">全称：</label><input type="text" v-model.lazy="fullName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: "",
    };
  },

  computed: {
    // fullName(){
    //    return this.firstName + "" + this.lastName;
    // }
    // 计算属性如果可以被修改的话， 计算属性需要写成对象
    fullName: {
      // get 就是计算属性的值
      get() {
        return this.firstName + "" + this.lastName;
      },
      // set 函数在 计算属性被修改的时候会自动触发， 会接收修改的值作为参数
      // 我们需要 根据 修改的结果来取修改计算属性的来源数据
      set(val) {
        this.firstName = val.split(" ")[0];
        this.lastName = val.split(" ")[1];
      },
    },
  },
};
</script>

<style>
</style>

搜索例子：

<template>
  <div>
    <input type="text" v-model.trim="comm">
    <button @click="submit">提交</button>
    <input type="text" v-model.trim="searchText">
    <button @click="ssya">搜索</button>
    <ul class="comments" >
      <li v-for="comm in saAcomments" :key="comm.id">{{comm.text}}<button @click="del(comm.id)">删除</button></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        {
          id: 1,
          text: "666",
        },
        {
          id: 2,
          text: "777",
        },
        {
          id: 3,
          text: "喜欢唱,跳,rep,篮球",
        },
        {
          id: 4,
          text: "你干嘛,哎哟",
        },
      ],
      comm: "",
      searchText:''
      // 方法一
      // saAcomments: [
      //   {
      //     id: 1,
      //     text: "666",
      //   },
      //   {
      //     id: 2,
      //     text: "777",
      //   },
      //   {
      //     id: 3,
      //     text: "喜欢唱,跳,rep,篮球",
      //   },
      //   {
      //     id: 4,
      //     text: "你干嘛,哎哟",
      //   },
      // ],
    };
  },
  // 方法二:计算属性 
  computed: {
    // 计算属性联系 data 可以在 template 内直接使用
    saAcomments() {
      const{ searchText } = this;
      if(!searchText){
        return this.comments  
      }
      return this.comments.filter((comm) => comm.text.includes(searchText));
    }
  },
  methods: {
    // 添加
    submit(){
      const { comm } = this
      console.log(comm)
      if(comm){
        this.comments.push({ id: new Date().getTime(), text: comm})
        this.comm = '';
      }
    },
    // 删除
    del(id){
      // 数组的删除操作不推荐使用索引值去删除,推荐提供 id 去删除
      this.comments = this.comments.filter(ele => ele.id !== id)
    },
    ssya (){
      // 对数组进行选择
      // 方法一
      // const{ searchText } = this
      // if(searchText){
      //   this.saAcomments = this.comments.filter(comm => comm.text.includes(searchText)) 
      // }else {
      //   this.saAcomments =this.comments
      // }
    }
  }
};
</script>

<style>
</style>

详情使用方法：参考使用 Vue 框架实现经典例子：TodoMVC

3.2.1、事件修饰符

<template>
  <div class="event">
    <h3>事件修饰符</h3>
    <div class="box" @click.once="boxClick">
      <form action="">
        <input type="text" value="aq">
        <!-- .stop 禁止跳转 -->
        <!-- .prevent 禁止默认行为 -->
        <!-- .self 只有真的点击自己才会触发 -->
        <!-- .once 只能点一次 -->
        <button @click.prevent="btnClick">btn</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    boxClick() {
      console.log("我是 box")
    },
    boxClick() {
      console.log("我是 btn")
    }
  }
}
</script>

<style>
.event .box {
  width: 200px;
  height: 200px;
  background-color: black;
}
</style>