才吹小雨又须晴 BlogMyTags
前端

第一章

第一节

主要技术：HTML5:搭建网页结构，CSS3：样式表,美化网页，JavaScript，Vue.js/React.js:前端框架

  1. IDE:集成开发环境，高级代码编辑器。

  2. VsCode:红色的波浪线说明代码有错误，编译器空白右键里格式化文档，Visual Studio Code。

  3. Sublime是一个编辑器，VScode可以集成Sublime的快捷键

  4. HTTP是超文本传输协议，输入网址就是发出向服务器http请求，服务器识别请求，服务器将网页发送给用户叫http响应。

  5. 一次http事务由请求和响应构成。

第二节 HTML语法与基础标签

  1. 创建网页：创建一个空白的文件夹，在vscode中打开，新建文件，保存格式手动填写.html后缀。html文件是纯文本的
  2. HTML骨架的生成：输入英文感叹号，按tab键
  3. 网页的浏览1：在文件夹中双击网页图标即可。
  4. 网页的浏览2：安装Live Server插件，可以让网页“实时更新”，编译区内右键点击Open With Live Server，要求网页必须放在文件夹中

一.认识HTML5骨架

<!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>慕课网</title>网页名字
    <meta name="Keywords" content="慕课网,程序员的梦工厂">
    <meta name="Descripion" content="慕课网是IT技能学习平台">
</head>
<body>
    天气
</body>
</html>

第一行：文档类型声明DTD，全称是Document Type Definition。作用：表明当前书写的文档遵循几代规范，不写DTD会引发浏览器的一些兼容问题。

第二行到最后：分为head标签对和body标签对两部分。head标签对是对网页的配置，不是网页的头部；body标签对中书写网页的内容，包括网页的头部，主要内容，页脚等。

  1. W3C万维网联合会，是万维网的主要国际标准组织，制定Web标准，HTML和CSS
  2. lang属性表示网页的语言，zh表示中文。

二.字符集

<meta charset="UTF-8">字符集

单标签，不是成对出现的。meta :元标签，设置网页的基础配置；charset：字符集，也是标签的属性，char是字符；UTF-8 是一种字符集，是属性的值。

  1. UTF-8 中一个汉字占3个字节，覆盖全球语言文字；gb2312（gbk）也是一种字符集，主要包括所有的汉字字符和英语，1个汉字只占2个字节。
  2. 更改网页的字符集
  • 哪种字符集，一定要在编辑器中将文件也设置为相同字符集，否则会出现乱码，然后更改meta标签。
  • Live Server不支持gbk字符集.
  • 点编译器的右下角UTF-8，点击，点击通过选择编码保存，搜索gb2312，网页文件字符集变成gb2312。
  • UTF-8比gb2312的网页占的字节数更大。

三.

  • title设置出现的位置
<title>慕课网</title>网页名字

  1. 用途：设置网页的标题，文字会显示在浏览器的标签栏上，如图，Document处写文字。

    QQ20220301-160806@2x.png

  2. 为了吸引用户的点击，合理设置title是有必要的。

  • 网页关键词和页面描述，合理设置是SEO的重要手段，SEO是搜索引擎优化（利用搜索规则提高网站在搜索中的自然排名），SEO配置：书写好title，网页的两个meta标签，Keywords和Description。
  1. 设置网页关键词和页面描述：使用meta标签，name属性非常关键，用来设置meta的具体功能，name后边的字母的首字母要大写。

四.

<meta name="Keywords" content="慕课网,程序员的梦工厂">
<meta name="Descripion" content="慕课网是IT技能学习平台">
  • HTML叫做“超文本标记语言”，全称是Hyper Text Markup Language，就是开发网页的语言，主要是用标签对的形式为文本添加语义或放置文档的部件。就是标签，标签就是超文本标记。
  • 标签通常成对出现<p></p>。但不是所有的标签都成对存在，有单标签，比如骨架中的字符集设置。
  • 不同标签对有不同功能，标签可以给文字设置不同的语义，p标签表示段落，h1标签表示一级标题。

五.标题标签

  • h系列标签表示“标题”，h：headline。h1：一级标题（最重要的）。。。h6:六级标题。
  • 重点内容<h1></h1>中，比如网页的logo。
  • <h1></h1>标签一般只能放置一个，什么语义用h几的标题标签
  • title标签和h1标签设置内容一般是一样的。

六.段落标签

  • 表示为<p></p>，paragraph。
  • 任何段落都要放<p></p>标签中，因为即使HTML中代码换行了，页面显示的效果也不会换行，必须写<p></p>。
  • <p></p>标签中不能嵌套h系列标签和其他p标签。
  • 查看→自动换行，可以将p标签里占一行太长
  • 没有嵌套关系的标签不用代码缩进。

七.div标签

  • division，<div></div标签，分割语义。
  • 用来将相关内容组合在一起，和无关的内容分割开来，文档结构更加清晰。
  • 网页的任何部分都要放到div标签中。div标签里可以再套div标签。
  • 为了区分每个div的功能，程序员会借助class属性。
  • div标签可以结合CSS使用，实现网页的布局，布局形式叫：DIV+CSS。

八.HTML5特性

  1. 空白折叠现象：

  • 文字和文字之间的多个空格或换行会被折叠成一个空格。

    <body>
        <p>文字文字文字文
            
            字文字文字文字</p>
    </body>

QQ20220301-165428@2x.png

  • 标签“内壁”和文字之间的空格会被忽略。
<p>   啊啊啊啊啊啊   </p>
  1. 转义字符

常见的转义字符：&lt;意义小于号；&gt;意义大于号；&nbsp;意义空格（不会被折叠）；&copy;意义版权符号

<body>
    <p>大于号&gt;</p>
    <p>小于号&lt;</p>
    <p>空格&nbsp;文字</p>
    <p>版权符号&copy;</p>
</body>
我们今天学习了&lt;p>&lt;/p>标签

QQ20220301-172700@2x.png

九.小慕医生项目

  1. 主要文件夹：images存放图片，css存放样式表，js存放js脚本文件。
  2. class类名，给div起名字，服务于css样式表。常见的类名有：页头header，图标logo，导航条nav，横幅banner，内容区域content，页脚footer。

第三节 列表标签

一.无序列表标签

1.

  • 使用<ul></ul标签，ul全称unordered list。
  • 每个列表项都是<li></li>标签，父子组合标签，不能单独出现，展示：
<ul>
      <li>面包</li>
      <li>水果</li>
      <li>牛奶</li>
</ul>
  • <ul>的子标签只有<li>标签。<li>标签是容器，里面可以放任何其他标签
  1. 列表的嵌套：li标签里可以放ul标签。

二.有序列表

  • 使用<ol></ol>标签，ordered list。
  • 每个列表项都是<li></li>标签，父子组合标签，不能单独出现，使用方法同无序列表一样。
  • ol标签的属性
  1. type属性，用来设置编号类型，常见的有：a表示小写英文字母编号，A表示大写英文字母编号，i表示小写罗马数字编号，I表示大写罗马数字编号，1表示数字编号（默认值）。
  2. start属性，属性值是一个阿拉伯数字整数，指定列表编号的起始值。尽管列表条目的编号类型type属性可能指定为其他类型编号。
<h1>成绩排名</h1>
    <ol type="A" start="5" >
        <li>小红</li>
        <li>小铭</li>
        <li>小蓝</li>
    </ol>

QQ20220302-155257@2x.png

  1. reversed属性，指定列表中的条目倒序排列。该属性不需要值，只写单词即可，HTML5的全新特性。reversed属性和start属性不要在一块使用。

三.定义列表

1.

  • 需要逐条给出定义的列表，使用<dl>标签，<dt>标签是数据项，<dd>标签是数据定义。
  • <dl>是定义列表标签，内容交替出现<dt>，<dd>标签，先dt再dd。
  • 也允许<dt>，<dd>标签不交替出现，处于不同的列表中。
  1. 使用什么标签，应该看语义，不应该看样式。语义上有“解释说明”含义的文字，且为列表形态，应该使用定义列表。

第四节 多媒体与语义化标签

一.图片标签

  1. 使用<img>标签在网页中插入图片；src是来源的缩写，后跟图片的存储目录和完整文件名，后缀名一定要写。alt是alternate替代品的缩写，是对图像的文本描述，有没有都可以。
<img src="images/gugong.jpg" alt="故宫">
  1. alt作用：由于某种原因无法加载图像，浏览器会在页面上显示alt文本。
  2. 图片必须复制在项目文件夹中，在项目文件夹中新建一个images子文件夹。图片本质上没有插入到网页中，只是被引入到了网页中。
  • width，height属性分别设置宽度和高度，单位是像素，不需要写单位。
  • 省略其中一个属性，按原始比例缩放图片。

5.格式是.png的图片在有网页背景的情况下，图片没有边界，用于logo。

6.相对路径：描述从网页出发，如何找到图片。以上提到的路径都是相对路径。如果需要回退层级，使用“../”这样写法。回退一次就加一个“../”。（重点与难点）

<p>
        <img src="../images/gugong.jpeg" alt="">
    </p>
  1. 绝对路径：描述图片的精准地址。可以src中插入图片的网址。（重点与难点）

二.超级链接

  1. 将网页和网页连结到一起的方法，是互联网“成网”的原因。
  2. 使用<a>标签制作超级链接，href叫超文本引用。
  3. href属性支持相对路径和绝对路径。
  4. title属性：用于设置鼠标的悬停文本。
<a href="lyou.html" title="美丽的风景">去看我的旅游分享</a>
  1. target属性，设置为blank，即可在新的标签页中打开网页。
  2. 给图片设置超级链接：需要用<a>标签包裹img标签。
  • 页面内锚点：给h系列标签添加id属性，它将成为页面的锚点，当在网站后面添加#时，页面自动滚动到锚点位置。
  • 超级链接href后加#，可以链接到指定锚点。HTML5的一个特色，如下代码
<p>
    <a href="#top">返回顶部</a>
</p>
  • 下载链接：指向exe，zip，rar等文件格式的链接，将自动下载。

三.音频和视频

  1. 使用<audio>标签插入音频，controls src里面放音频地址，标签对中是对不兼容audio标签的浏览器的显示文字。
<audio controls src="">
  1. 使用<video>标签插入标签。

四.HTML5众多新的区块标签（背诵）

<section>文档的区域，语义比div大；<article>文档的核心文章内容，会被搜索引擎主要抓取；<aside>文档的非必要相关内容，比如广告等；<nav>导航条；<header>页面头部；<main>网页核心部分；<footer>页脚；<address>联系方式

五.语义化标签

  1. <span>标签，文本中的区块标签，结合CSS，使得文字在以后会有不同的样式。
  2. <b>加粗，<u>加下划线，<i>文字倾斜，三个标签已经被CSS所替代，但是在网页中也可以表示要强调的文本。
  3. 表示强调语义的标签：<strong>特别重要的文字,<mark>被高亮文字,<em>强调文字。
  • 在使用鼠标滚轮进行全编辑时，按住command键，可以同时移动每一行的光标。

第五节 表单标签

一.表单创建

  • 所有HTML表单都以一个<form>元素开始的。
  • action属性表示表单要提交到的后台程序的网址，method属性表示表单提交的方式，有get或post（默认）（需要服务器相关知识）。
<form action="" method="post"> </form>

二.表单的基本控件

  1. 单行文本框
  • 使用<input>标签，type属性值设置为text。
  • value属性表示已经填好的值
  • placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值
  • disabled属性表示用户不能与元素交互，即“锁死”。
<body>
    <form action="" method="post">
        <p>
            请输入你的姓名：<input type="text">
        </p>
        <p>
            报考院校：<input type="text" value="清华大学" disabled>
        </p>
        <p>
            毕业院校：<input type="text" placeholder="请输入真实的毕业学校">
        </p>
        
    </form>
</body>

QQ20220306-195607@2x.png

  1. 单选按钮
  • 使用<input>标签，type属性值为radio，互斥的单选按钮设置他们的name值相同。
  • value属性值是向服务器提交的值。
  • check属性，表示默认被选中。
<p>
     性别：
     <input type="radio" name="sex" value="男" checked>男
     <input type="radio" name="sex" value="女">女
</p>

QQ20220306-200718@2x.png

  • 使用<label>标签对，将文字和单选按钮进行绑定，用户单击文字的时候也作为单选按钮，有两种形式。
<label>
    性别：
    <input type="radio" name="sex" value="男">男
</label>
<label>
    <input type="radio" name="sex" value="女">女
</label>

<input type="radio" name="sex" id="nan">
    <label for="nan">男</label>
  1. 复选框
  • 使用<input>标签，type属性设置为checkbox。
  • 同组复选框设置name属性值相同。
  • 向服务器提交value属性值。
爱好：
 <label>
     <input type="checkbox" name="hobby" value="唱歌">唱歌
 </label>

QQ20220306-203150@2x.png

  1. 密码框
  • 使用<input>标签，type属性设置为password。

QQ20220306-213550@2x.png

  1. 下拉菜单
  • <select>标签对，表示下拉菜单，<optio>是内部选项。
  • select里面只能放置option，option不能单独使用。
  • value属性表示提交到服务器上的值。
<p>
     请选择你最喜欢的编程语言：
     <select>
         <option value="Java">Java</option>
         <option value="PHP">PHP</option>
         <option value="C++">C++</option>
     </select>
 </p>

QQ20220306-214218@2x.png

  1. 多行文本框
  • 使用<textarea>标签对，rows属性和cols属性，用于定义行数和列数。
<textarea cols="30" rows="10">"已经填好的值"</textarea>

QQ20220306-215324@2x.png

  1. 三种按钮
<p>
    <button>我是一个普通按钮</button>
</p>
<p>
    <input type="submit" value="提交表单">
</p>
<p>
    <input type="reset" value="重置表单">
</p>

8.input类型总结，type属性值

单行文本框，单选按钮，复选框，密码框，普通按钮，重置按钮，提交按钮。

三.

  1. HTML5中新增的表单控件
颜色选择控件：<input type="color">
日期选择：<input type="date">      
时间选择：<input type="time">        
电子邮件：<input type="email">       
必填：<input type="text" required>        
数字：<input type="number" min="1" max="20">        
数字拖拽条：<input type="range" min="1" max="20">
<!-- 结合JS实现拖拽条显示数字 -->        
搜索框：<input type="search">     
网址：<input type="url">       
<input type="submit" value="提交表单">

  1. <datalist>控件，可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应。
选择省份：
<input type="text" list="province">
<datalist id="province">
    <option value="山西">
    <option value="北京">
    <option value="山东">
    <option value="云南">
    <option value="广东">
</datalist>

第六节 表格标签

一.

  1. <table>标签对表示表格，<tr>表示表格行，<td>表示一行有几个格子，格子中的数据。
  2. <border>属性，表格显示有边框，单位是像素。
  <style>
       table,tr,td{
            border-collapse: collapse;
        }
    </style>  
<table border="1">
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>    
    </table>

  1. caption属性，表格的标题，只能放在<tr>的前面。
<caption>我是表格的标题</caption>
  1. <th>标题小格，可替代<td>的作用，一般放在表头里使用。
<tr>
        <th>第一季度</th>
        <th>第二季度</th>
        <th>第三季度</th>
        <th>第四季度</th>
    </tr>

二.单元格的合并

1.属性用来设置td或者th的列跨度。

<tr>
        <td colspan="2">A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td colspan="3">E</td>
    </tr>

  1. <rowspan>属性是设置行跨度。
  2. 可以同时列跨度，行跨度。
<table border="1" width="300">
      <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
          <td>D</td>
      </tr>
      <tr>
          <td>E</td>
          <td rowspan="2">F</td>
          <td colspan="2" rowspan="2">G</td>
      </tr>
      <tr>
          <td>H</td>
      </tr>
  </table>

5.表格的其他属性
表头
表核心内容
表脚

第二章

CSS必背属性

第一节 CSS3基础入门

一.CSS3简介

  1. cascading style sheet，层叠式样式表，是用来给HTML标签添加样式的。
  2. 前端三层（会考到）
结构层 HTML 搭建结构，放置部件，描述语义
样式层 CSS 美化页面，实现布局
行为层 JavaScript 实现交互，数据收发，表单验证等

3.选择器，背诵CSS属性的熟练程度决定了做网页的速度。

二.CSS的书写位置

  1. 内嵌式，内嵌在.html文件中。在<head>标签对中，书写<style>标签对，里面书写CSS语句。
<style>
   （选择器） h2,p{
        color: blue;
        font-size: 30;
    }
</style>
  1. 外链式，将CSS文件单独存为.css文件，在html文件中使用标签引入它。
  • rel属性表示关系，，关系是样式表“stylesheet”，href属性表示引入路径和文件名。
  • 优点是多个html网页，可以共用一个CSS样式表文件。
  1. 导入式，最不常见。
<style>
    @import url(css/css.css);
</style>
  1. 行内式

样式可以直接通过style属性写在标签身上，牺牲了样式表的批量设置样式的能力，不常用。

三.CSS基本语法

  1. 每个选择器的最后一条可以不书写分号，保险起见都写。
  2. CSS的注释是/**/，快捷键command+/。

四.

传统CSS2.1选择器

  1. 标签选择器
  • 也叫元素选择器，类型选择器。由于标签选择器的覆盖面比较大，所以通常用于标签的初始化。

去掉无序列表的小圆点：list-style：none; 去掉超级链接的下划线；text-decoration：none；

  1. id选择器
  • id属性，是标签的唯一标识。
  • id只能有字母，数字，下划线，短横构成，不能以数字开头，字母区分大小写，习惯上用小写字母。
  • 可以使用#号前缀，选择指定id的标签。
  1. class选择器
  • class属性表示类名，与id的命名规范相同。
  • 用点.前缀选择指定class的标签。
  • class类名非常灵活，多个标签可以为相同类名。
    <style>
        .warning{
            color: red;
        }
    </style>
</head>
<body>
    <p class="warning">我是段落</p>
    <p class="warning">我是段落</p>
    <ul>
        <li>我是列表项</li>        
        <li class="warning">我是列表项</li>        
    </ul>
    <p class="waning spec">我是段落</p>
</body>
  • 同一个标签可以同时属于多个类名，类名用空格隔开
<p class="waning spec">我是段落</p>
  • 如果一个class属性，携带多个类名，且类名中有颜色冲突，文字的颜色取决于CSS的style中哪个颜色先写。
  1. 原子类

在网页项目之前，将所有常用字号，文字颜色，行高，外边距，内边距等都设置为单独的类。HTML 标签就可以“则需选择”它的类名，可以非常快速的添加一些常见样式。


.fs12{
    font-size: 12px;
}
.fs14{
    font-size: 14px;
}
  1. 复合选择器
1⃣️后代选择器 .box .spec 选择类名为box的标签，内部的类名为spec的标签
2⃣️交集选择器 li.spec 选择既是li标签，也是spec类的标签
3⃣️并集选择器 ul,ol 选择所有的ul和ol标签
  • 1⃣️：使用空格表示后代
<style>
    .box p{
        color: red ;
    }
</style>

<div class="box">
    <p>我是盒子中的段落</p>
</div>
<p>我是段落</p>

QQ20220309-110541@2x.png

  • 2⃣️：后代选择器和交集选择器可以搭配使用。
div.box p.spec em{
        color: red ;
    }
    
<div class="box">
    <p class="spec">我是盒子中的段落<em>强调文字</em></p>
</div>
  1. 伪类
  • 添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4 个特殊状态。冒号就表示伪类。
a:link 没有被访问的超级链接
a:visited 已经被访问过的超级链接
a:hover 正被鼠标悬停的超级链接
a:active 正被激活的超级链接（按下按键但是还没有松开按键）
  • a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效。

LOVE HATE：link，visited，hover，active。

CSS3新增选择器

  1. 元素关系选择器，有三个选择器组成
名称 符号 举例 意义
子选择器 > div>p div的子标签p
相邻兄弟选择器 + img+p 图片后面紧跟的段落将被选中
通用兄弟选择器 ～ p～span p元素之后的所有同层级span元素
  • 子选择器：匹配作为第一个元素直接后代的元素，两个标签为父子关系
  • 相邻兄弟选择器：a+b 紧跟在a后面的b
  • 通用兄弟选择器：a～b选择a元素之后所有同层级b元素。
  1. 序号选择器，借鉴了伪类，表达位置和序号的伪类。
类型 含义 举例 意义
:first-child 第一个子元素 .box1 p:first-child 选择.box1盒子中的第一个p
:last-child 最后一个子元素 .box1 p:last-child 选择.box1盒子中的最后一个p
:nth-child() 任意序号的子元素 .box1 p:nth-child(3) 选择.box1盒子中的第三个p
:nth-of-type() 将选择同种标签指定序号的子元素 .box p:nth-of-type(3) 选择p标签的3号元素
:nth-last-child() 倒数选择
:nth-last-of-type() 倒数选择
  • ::nth-child()还可以写成An+B的形式，表示从B开始每A个选一个。
.box p:nth-child(3n+2){
     color: green;
 }
  • 2n+1等价于odd，表示奇数。2n等价于even，表示偶数，
.box p:nth-child(even)
  1. 属性选择器，并不常用。
img[alt="北京鸟巢"]{
    border: 1px solid #000;
}

4.新增伪类

        .para{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        .para:empty{
            /* 空白标签 */
            background-color: red;
        }
        input:focus{
            /* 当前聚焦的元素 */
            background-color: red;
        }
        input:disabled{
						/* 选择无效的标签 */
            border: 1px solid #000;
        }
        input:checked+span{
		    /* 选择已经被勾选的单选按钮或者复选框 */
            color: red;
        }
        :root{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="para"></p>
    <p class="para">123</p>
    <!-- 空格和换行不能视为空白标签 -->
    <p class="para"> </p>

    <p>
        <input type="text">
        <input type="text" disabled>
    </p>
    <p>
        <input type="checkbox"> <span>wenzi</span>
        <input type="checkbox"> <span>wenzi</span>
        <input type="checkbox"> <span>wenzi</span>
    </p>
  1. 伪元素，表示虚拟动态创建的元素。
  • 用双冒号::表示。
    <style>
        /* 给选中标签添加第一个子元素，content是第一个元素的内容，
        必须设置content属性的内容 */
        a::before{
            content: '⭐️';
        }
        /* 给选中标签添加最后一个子元素 */
        a::after{
            content: '❤️' ;
        }
        .box1{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
        }
        .box1::selection{
            /* 对鼠标圈选的部分的设置 */
            background-color: springgreen;
            color: blueviolet;
        }
        .box1::first-letter{
            /* 选中某元素中（块级元素）第一行的第一个字母 */
            font-size: 30px;
        }
        .box1::first-line{
            /* 选中某元素中（块级元素）第一行的全部文字  */
            /* 添加下划线 */
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>
        <a href="">我是超级链接</a>
    </p>
    <p>
        <a href="">我是超级链接</a>
    </p>
    <div class="box1">
        文字文字文字文字文字文字文字文字文字文字文
    </div>
</body>
  1. 层叠性和选择器权重计算（难点）
  • 层叠性：多个选择器可以同时作用于同一个标签，效果叠加。
  • CSS有严密的处理冲突的规则。id权重>class权重>标签权重。
  • 复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重。权重最大的是（2，1，2）。

  • 需要将某个选择器的某条属性提升权重，可以在属性后面写!important。他比行内样式优先级还要高。
.spec{
    font-style: italic !important;
}
  • 要想特别的改变某个元素，就让选择器的权重加高。

第三节 文本与字体属性

一.常用文本样式属性

  1. color属性
  • 工作中为了精确颜色，要用十六进制表示法，是设计软件中通用的。十六进制中的ff是十进制中的255，每种颜色分量都是0～255的数字。黑色#000，白色#fff，常见的灰色有#ccc，#333，#2f2f2f。
color:#ff0000;
  • rgb()表示法
color:rgb(255,0,0);
  • rgba()表示法，a表示透明度，介于0到1之间。
color:rgb(255,0,0,.5);
  1. font-size属性，设置字号，单位：px，em，rem。
  2. font-weight属性，字体粗细，bold表示加粗（700），normal是正常。
  3. font-style属性，设置字体倾斜
normal 取消倾斜，把天生倾斜的i，em等标签设置为不倾斜。
italic 设置为倾斜字体
  1. text-decoration属性，设置文本的修饰线
none 没有修饰线
underline 下划线
line-through 删除线

二.字体属性详解

  1. font-family属性，设置字体类型，字体可以是列表形式，后面的字体是“后备”字体。字体名称中有空格，必须用引号包裹。一般用微软雅黑和宋体。中文不能设置在英文之前。
font-family: serif,"Times New Roman",’微软雅黑‘;
  • 定义字体，需要字体文件，使用@font-face定义字体
  • 阿里巴巴普惠字体，免费使用。网址：iconfont

三.段落和行相关属性

  1. text-indent属性，定义首行文本内容之前的缩进量，缩进两个字符：em表示字符宽度
text-indent:2em;
  1. line-height属性用于定义行高，可以是以px为单位数值；也可以是没有单位，表示字号的倍数，最推荐的写法。
line-height:30px;   line-height:1.5;
  1. 单行文本垂直居中，设置行高=盒子高度可以实现。
.box
{
    width: 300px;
    height: 100px;
    background-color: blue;
    line-height: 100px;
    text-align:center;实现文本水平居中
}
  1. font合写属性，作为font-style，font-weight，font-size，font-height，font-family的合写。样式和字体粗细一定要打头。要使简写定义有效必须至少提供 font-size 和 font-family 这两个属性
font:italic bold 20px/1.5 Arial,"微软雅黑"；

四.继承性

  1. 文本相关的属性普遍具有继承性，设置祖先标签，即可在后代所有标签生效。
  • 比如color，font-，list-，text-，line-。
  • 设置body标签的属性，就能当作整个网页的默认。
  1. 在继承的情况下，选择器权重计算失效，而是“就近原则”
   <style>
        /* 两种都是继承 */
        /* 但一个到了第二层，较远 */
        #box1 #box2{
            color: red;
        }
        /* 一个到了第三层，较近，就近原则,文字是蓝色 */
        .box1 .box3{
            color: blue;
        }
				/* 直接选中的标签比权重更大 */
        p{
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>文字</p>
            </div>
        </div>
    </div>
</body>

第四节 盒模型

一.认识盒模型

  1. 所有HTML标签都可以看成矩形盒子，由width，height，padding，border构成元素实际大小。

元素空间大小还要加上margin大小。宽度和高度是盒子中文字的宽度和高度。

二.padding属性

  1. 四个方向的padding，分别有小属性设置，分别为padding-top，padding-right，padding-left，padding-bottom。
  2. padding属性四个方向可以合写，按照上，右，下，左的顺序书写，中间用空格隔开。
  3. padding属性可以只用三个数值书写，按照上，左右，下。
padding: 10px 20px 30px;
  1. padding属性可以只用两个数值书写，按照上下，左右。
  2. 灵活设置padding

QQ20220314-100144@2x.png

QQ20220314-104458@2x.png

三.margin属性详解

  1. margin是盒子有了外边距，是盒子与盒子之间的距离。
  2. margin也有四个方向。竖直方向的margin有塌陷现象：小的margin会塌陷到大的中，从而margin不叠加，只以大的为准。

QQ20220314-105444@2x.png

  1. 一些元素有默认的margin，比如body，ul，p等，要将他们清除，使用交集选择器。
body,ul,p{
        margin: 0;
        padding: 0;
    }
  1. 盒子的水平居中
  • 盒子左右两边的margin都设置为auto
.box{
    margin:0 auto;
}
  • 文本居中text-align：center;，（块级元素）盒子水平居中margin:0 auto;，文字垂直居中line-height=height

四.盒模型的计算，看代码

五.box-sizing属性

  1. 盒子添加box-sizing：border-box;，width，height表示盒子实际占有的宽高（不含margin），即padding，border变为“内缩”。
  2. 大量应用于移动网页制作中，在PC（personal computer）页面中开发很少，电脑端。

六.display属性

  1. 分为行内元素和块级元素
是否能并排显示 是否能设置宽高 当不设置width属性时 举例
块级元素 否 是 width自动撑满 div，section，header，h系列，li，ul等
行级元素 是 否 width自动收缩 a，span，em，b，u，i等
  1. 行内块：img和表单元素是特殊的行内块，既能设置宽度高度，也能并排显示。

七.行内元素与块级元素的相互转换

display:block; 转换为块级元素，常见
display:inline;转换为行内元素，不常见
dispaly:inline-block;转换为行内块，常见

八.元素的隐藏

1.display:none ;放弃特效位置。visibility:hidden;不放弃特效位置。

第三章

第一节 浮动与定位

一.浮动概念

  1. 最本质功能用来实现并排。
  2. 要浮动，并排的所有盒子都要设置浮动。
  3. 父盒子要有足够的宽度，否则子盒子会掉下去。
  4. 浮动的顺序贴靠特性：子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找再前一个兄弟元素。1盒子贴靠父盒子，2贴靠1盒子，3贴靠2盒子没有足够的父盒子空间，3盒子贴靠1盒子，如果1盒子不能贴靠，3盒子贴靠父盒子边缘。

QQ20220315-100741@2x.png

  1. 浮动的元素一定能设置宽高，即使是span或a标签。

二.使用浮动实现网页布局

  1. 只有并排显示的盒子才要设置浮动。
  2. 一个大盒子里，内部可以继续使用浮动。
  3. 先给内容增加底色，划分区域，再对元素进行浮动设置，最后将区域底色代码删除。

三.BFC规范和浏览器差异

  1. BFC（box formatting context）（面试），块级格式化上下文，是一个隔离的独立容器，是一个盒子的稳定状态，使渲染达到隔离独立状态。
  2. 创建BFC
靠谱的两个方法
position值 不是static或relative
overflow hidden
  1. overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏，但是盒子padding部分的溢出还在。简打oh。
  2. BFC的其他作用
  • 可以取消margin塌陷。
  • 可以阻止元素被浮动的元素覆盖。(实战不用)
    p{
         width: 200px;
         height: 200px;
         background-color: orange;
         margin: 50px;
     }
     div{
         overflow: hidden;
     }
<body>
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
</body>
  1. 浏览器差异

制作兼容到IE6，IE7的网页时，尽量使网页布局简单，内部有浮动的盒子要设置height属性。

四.清除浮动

  1. 浮动要封闭在一个盒子中，否则就会对页面后续元素产生影响。
  2. 清除方法一：让父盒子形成BFC，父盒子使用overflow:hidden属性。常用
  3. 清除方法二：给后面的父盒子设置clear:both属性。clb。不常用
  4. 清除方法三：使用::after伪元素给父盒子添加最后一个子元素，并且设置clear：both。还要转为块级元素。常用。
		<style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix::after{
            content: '';
            clear: both;
            /* 要转为块级元素 */
            display: block;
        }
        div{
            margin-bottom: 10px;
        }
         p{
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>
</body>
  1. 清除浮动的方法四：在两个父盒子之间隔一个携带clear:both的盒子。

五.相对定位

  1. 盒子可以相对自己原来的位置进行位置调整，称为相对定位。四个位置描述词，left，right，top，bottom。值可以是负数，即忘规定的反方向移动。

  1. 相对定位的性质：本质上仍然是在原来的位置，只不过渲染在了新的地方了，但是不会影响其他元素的位置。

QQ20220315-213205@2x.png

QQ20220315-213304@2x.png

  1. 用途：微调元素的位置；当做绝对定位的参考盒子。

六.绝对定位

  1. 盒子在浏览器中以坐标进行位置精准描述，拥有绝对位置。简写poa。

  1. 绝对定位的性质：将释放自己的位置，对其他元素不会产生干扰，脱离标准文档流。

  1. 脱离标准文档流的方法：浮动，绝对定位，固定定位。
  2. 绝对定位的盒子并不是永远以浏览器作为基准点，它会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子拥有相对定位。
				.box2{
            width: 58px;
            height: 58px;
            padding: 20px;
            border: 1px solid #000;
            position: relative;
        }
        p{
            width: 10px;
            height: 10px;
            background-color: orange;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <p></p>
        </div>
    </div>
</body>

  1. 绝对定位的盒子垂直居中（非常实用）

		   div{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 0 auto;
            /* div成为p的参考盒子，所以设置成相对定位 */
            position: relative;
        }
        p{
            /* 由于该元素已经脱离了标准文档流，所以不能用margin属性居中 */
            width: 80px;
            height: 80px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -40px;
            margin-left: -40px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>

  1. 堆叠顺序z-index属性

决定绝对定位元素的压叠顺序，是一个没有单位的正整数，数值大的压住数值小的。

       .box1{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 30px;
            left: 30px;
            z-index: 9999;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

  1. 绝对定位的用途
  • 用来制作“压盖”，“遮罩”效果。
  • 结合CSS，结合JS实现动画

七.固定定位

  • 不管页面如何卷动，它永远固定在那里，应用比如返回顶部，悬停导航。

  • 只能以页面为参考点，脱离标准文档流。

课程小结

  1. 使用浮动父盒子必须有足够的宽度，要浮动，兄弟盒子一起浮动，浮动有顺序贴靠的性质，使盒子脱离标准文档流，设置宽高。
  2. 清除浮动，形成BFC。
  3. 定位：相对，绝对，固定。

第二节 边框与圆角

一. 边框的三要素

  1. border：线宽度，线型，线颜色。三要素还可以是小属性
  2. 常用线型
soild 实线
dashed 虚线
dotted 点状线

二.

  1. 边框有四个方向，四个方向也有三要素小属性。
  2. 去掉边框：赋值none；
  3. 利用边框制作三角形
			.box{
            width: 0;
            height: 0;
            /* transparent是透明色 */
            border: 20px solid transparent;
            border-top-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

QQ20220322-163837@2x.png

三. 圆角

  1. border-radius，通常是px为单位，圆角的半径。
  2. 也可以用百分数做单位，表示圆角起始于每条边的哪里。正方形设置50%是圆形，长方形设置50%是椭圆形。
  3. 可以单独设置四个圆角
border-radius:10px 20px 30px 40px;左上，右上，右下，左下
border-radius:10px 70px 30px;左上，右上和左下，右下
border-top-left-radius:10px;

四.盒子阴影

  1. box-shadow
box-shadow:10px 20px 30px rgba(0,0,0,.4);x偏移量，y偏移量，模糊量，颜色
  1. 阴影延展
box-shadow:10px 20px 30px 40px(阴影延展) rgba(0,0,0,.4)
  1. 内阴影
box-shadow:inset(内阴影) 10px 20px 30px rgba(0,0,0,.4);
  1. 多阴影，多个阴影中间用逗号隔开
box-shadow:10px 20px 30px red,4px 5px 4px blue;

第三节 背景渐变

一. 背景图片设置

  1. background-image:url()，图片路径写到圆括号里，可以是相对路径，也可以是网址。
  2. 如果CSS是外链的，那么要书写从CSS出发到图片的路径。

二. 背景图片的重复模式：background-reapt属性

值 意义
reapt x，y均平铺
reapt-x x平铺，x方向有图片
reapt-y y平铺，y方向有图片
no-repeat 不平铺

三.背景尺寸

  1. background-size属性，值也可以用百分数设置，表示为盒子宽，高的百分之多少。
background-size: 100px 200px;宽度，高度
  1. contain和cover两个特殊的background-size的值。contain表示讲背景图片智能改变尺寸以容纳到盒子中。cover表示将背景图片智能改变尺寸以撑满盒子
<style>
        .box1{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            background-image: url(images/gugong.jpeg);
            background-size: contain;
            background-repeat: no-repeat;
            margin-bottom: 10px;
        }
        .box2{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            background-image: url(images/gugong.jpeg);
            background-size: cover;
            background-repeat: no-repeat;
            margin-bottom: 10px;
        }
    </style>

四.背景裁切

background-clip属性，设置元素的背景裁切到哪个盒子。(几乎不用)

border-box 背景延伸至边框（默认值）
padding-box 背景延伸至内边（padding），不会绘制到边框处，dotted和dashed边框可察觉
content-box 背景被裁剪至内容区

五.背景固定

background-attachment属性

fixed 背景图片滚动条不动，外部滚动条不动
local 背景图片滚动条动，外部滚动条动
scroll（默认值） 背景图片滚动条不动，外部滚动条动 
<style>
     .box1{
         width: 200px;
         height: 200px;
         border: 1px solid #000;
         /* 纵向溢出的内容用滚动条显示 */
         overflow-y: scroll;
         background-image: url(images/niaochao.jpeg);
         background-attachment: local;
     }
     body{
         /* 网页变高，拥有滚动条 */
         height: 3000px;
     }
 </style>

六.背景图片位置

  1. background-position：100px 200px;设置图片出现在盒子的什么位置。
  2. 可以用top，bottom，center，left，right描述图片出现的位置
<style>
        .box1{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin-bottom: 10px;
            background-image: url(images/niaochao.jpeg);
            background-repeat: no-repeat;
            background-size: 50% auto;
            background-position: top right;
        }
        .box2{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin-bottom: 10px;
            background-image: url(images/niaochao.jpeg);
            background-repeat: no-repeat;
            /* cover不能使图片居中，position使图片居中 */
            background-size: cover;
            background-position: center center;
        }
    </style>

七.CSS精灵

  1. CSS精灵：将多个小图标合并制作到一张图片上，使用background-position单独显示其中一个图标，也叫做CSS雪碧图。
  2. CSS精灵可以减少HTTP请求数，加快网页显示速度，但缺点是后期改动麻烦。

八.backgroud综合属性：一些常用的背景相关属性，可以合写到一条background属性中。

background: white url(images/niaochao.jpeg) no-repeat center center ;

九.线性渐变

background: linear-gradient(to right,blue,red);(渐变方向，开始颜色，结束颜色)
  1. 渐变方向也可以写成度数，deg表示度数。
  2. 可以有多个颜色值，并且用百分数定义出现的位置。
background: linear-gradient(to bottom,blue,yellow 20%,red);(中间色)
  1. 不同浏览器有不同的似有前缀，用来对试验性质的CSS属性加以标识（会背），工作中不需要动手添加。
Chrome -webkit-
Firefox -moz-
IE -ms-
欧朋 -o- 
background: -webkit-linear-gradient(to right,blue,red);

十.径向渐变

background-image: radial-gradient(50% 50%,red,blue);(圆心坐标)

第四节 2D与3D

一.旋转变形

  1. 角度是正的，则顺时针方向旋转，反之逆时针。
transform: rotate(45deg);(旋转角度)
  1. transform-origin属性设置自己的自定义旋转原点
transform-origin:0 0;(水平方向，数值方向)

二.缩放变形：数值小于1时，表示缩小；数值大于1时表示放大

transform:scale(3);（缩放倍数）

三.斜切变形

transform:skew（10deg,20deg）;(x角度，y角度)

四.位移变形，和相对定位非常像

transform:translate(100px,200px);(向右移动，向下移动)

五.3D旋转

  1. 将transform属性的值设置为rotateX()或者rotateY()，实现绕横轴，纵轴旋转。可以同时设置。
transform:rotateX(30deg);(向后仰)
transform:rotateY(30deg);(右侧向前动)
  1. perspective属性用来定义透视强度，单位px

六.空间移动

  1. 当元素进行3D旋转后，可继续添加translateX(),translateY(),translateZ()让元素在空间进行移动
transform:rotateY(30deg) translateX(100px);

第四章 动画与实战

第一节 过渡与动画

一. 过渡的基本使用

  1. transition过渡属性，可以为一个元素在不同样式之间变化自动添加“补间动画”
transition: width 1s linear 0s;(要过渡的属性，动画时长，变化速度曲线（匀速），延迟时间)
  1. 所有数值类型的属性都可以参与过渡：border-radius。背景颜色和文字颜色都可以被过渡。所有的变形也可以过渡。
  2. all属性：所有的属性都参与过渡。
transition: all 1s linear 0s;

二. 过渡的缓动效果

  1. transition的第三个参数就是缓动参数，也就是变化曲线

可以用transition-timing-function小属性来改变个别元素的过渡情况

  1. 贝塞尔曲线：网址http://cubic-bezier.com/可以生成。自定义动画缓动参数

三.过渡实战

  1. 透明度opacity，值为0是完全透明，值为1是完全不透明。
  2. 伪元素使用需要转块，加content: ‘’;
  3. 绝对定位的盒子居中。

四.动画的定义和调用

  1. 使用@keyframes定义动画，表示关键帧，在项目闪现前，要补上@-webkit-这样的私有前缀。

  1. 定义动画后，使用animation属性调用动画，第五个参数就是动画的执行次数，永远执行写infinite
animation：r 1s linear 0s 3;(动画名字，总时长，缓动效果，延迟)
  1. 想让动画进行偶数次自动逆向执行，加alternate属性。
animation：r 1s linear 0s alternate;（交替的）

想让动画停止在最后结束状态，加forwards属性

animation：r 1s linear 0s forwards;（保留的）
  1. 多关键帧动画

五.仿穷游

1. 

/*取消默认的外线，外线是文本框特有的东西 */
outline: none;

1. 

/* 使用min-width属性，表示限制网页的最小的宽度，这样图片不会因为要撑满网页，而变的越来越小 */
min-width: 1152px;
成熟套路

1. 

/* 图片与盒子产生一些缝隙 */
    vertical-align: middle;
  1. 能使用CSS精灵图片的，可以减轻网页加载的负担。用FireWorks制作自己想要的CSS精灵。
/* box-sizing: border-box;作用就是让height属性是盒子的高度，只有在盒子高度是百分比的情况下*/
    /* 让盒子的边框涵盖在height中 */
    box-sizing: border-box;
  1. ul中的li不能用margin居中，只能用padding挤一挤。
  2. a标签能包裹任何标签。

第五章 JS基础语法与表达式

第一节 JS语法与变量

一.初识JavaScript

  1. Nodes让JavaScript的触角伸到服务器端。
  2. ECMAScript是JavaScript的标准。
  3. JavaScript分为
语言核心 首先学习ECMAScript5，其次还有ECMAScript6，7，8，9
DOM 网页特效
BOM 网页特效

二. 书写位置

  1. 可以在body中书写引入。
  2. NodeJS将成为JavaScript独立运行的平台。

三.输出语句

  1. alert('');弹出警告框，console.log();控制台输出
  2. alert('');详细讲解
  • alert()是内置函数，功能的封装，调用函数使用圆括号。
  • 单引号双引号都可以。
  • 会打断程序的运行
  1. console.log();详细讲解。
  • console.log()是内置对象，通过”打点“可以调用它内置的log函数，这个函数称为“方法”。
  • 不会打断程序的进行。

四.控制台可以查看错误

  1. referenceError引用错误；syntaxError语法错误。
  2. REPL：read，eval，print，loop。

五.变量

  1. JS中只用var定义变量。
  2. 更改变量的值，不需要再写var
  3. 命名规范：不能数字开头；不能是关键字或保留字；字母大小写是意义不同的。
  4. 不定义直接赋值，会产生作用域问题。
  5. 直接一个变量使用，会产生引用错误。
  6. 变量声明的提升：可以先使用变量，再定义变量，但是只会提升定义，不会把值也提升，所以下面代码输出为unfined。
console.log(a);
var a=5;

第二节 Js基本数据类型

一.1.

基本数据类型 Number，String，Boolean，Undefined和Null
复杂数据类型 Object，Array等
  1. typeof运算符：可以检测值或变量的类型。
  • typeof不是函数，是操作符，后面不跟圆括号，也可以跟圆括号。
  • null类型检测结果是object，undefined既是类型也是数值。

二. Number数据类型

  1. 不分整浮，不分正负，都是数字类型
  2. 科学技术法：3e8，3e-8。
  3. 二进制以0b开头，八进制以0开头，十六进制以0x开头。
  4. 一个特殊的值NaN，他是数组类型，typeof NaN;
  • 在数学运算中，若不能得到数字结果往往都是NaN。
  • 性质：不自等。
WX20220405-104204@2x.png

三.字符串类型

  1. 常用的方法
.charAt() 得到指定位置字符
.substring(a,b) 提取子串,从a开始到b结束，不包括b处。a可以大于b，将自动调整为小数在前。 .slice()，提取子串，相同的是前两个有的它也有
.substr(a,b) 提取子串，得到从a开始长度为b的子串。a可以是负数，表示从倒数位置 不同的一点是a必须小于b
.toUpperCase() 将字符串变为大写
.toLowerCase() 将字符串变为小写
.indexof() 检索字符串 返回首次出现的位置，没有检索出，就返回-1

WX20220405-123248@2x.png

四.关系运算和逻辑运算中用到布尔类型

五. 需要将对象销毁，数组销毁或者删除事件监听时，通常设置为null。

六.数据类型的转换

Number()函数 其他转换为数字，Number(undefined); //NaN Number(null); //0
parseInt()函数 将字符串转为整数，将数字转为整数
parseFloat()函数 将字符串转为浮点数
String()函数 数字都会转换为十进制的数
toString()方法 (6).toString() //’6’
Boolean()函数 0，NaN，’’，undefined，null //结果为flase 
parseInt('3.14');  //3 将自动截掉第一个非数字字符之后的所有字符。
parseInt('3.14是圆周率');  //3 所有文字都被截掉
parseInt('圆周率是3.14');  //NaN  字符串不是以数字开头，转为NaN
parseInt('3.99');  //3  不存在四舍五入
parseFloat(true);  //NaN

七.加法计算器

  1. 用prompt()函数弹出输入框，让用户输入两个数字。输入的内容属于字符串类型，必须先转入数字类型，再做加法。最后alert()显示结果。

第三节 表达式与操作符

一.算术表达式：取余%

  1. 隐式类型转换：如果参与数学运算的不是数字型，那么JavaSript会自动将此操作数转换为数字型
true+true  //2
flase+2  //2
3*‘2’  //6    这样的形式只存在乘除法
  1. 在JavaSript中，有些小数的运算不是很准确。

解决方法：在小数运算时，调用数字的tofixed()方法保留小数的指定位数。

Number(0.1+0.2).tofixed(2)
  1. 幂和开根号，使用Math对象的相关方法。
Math.pow(2,3);  //8  指数运算
Math.sqrt(81);  //9  开方运算
  1. Math.ceil();向上取整。Math.floor();向下取整

二.关系运算符的结果是布尔值

  1. 两个等号：隐式转换后比较值是否相等。三个等号：比较值，比较类型是否相同
5=='5';   //true
5==='5';  //false
0==undefined   //false
undefined==null   //true
  1. NaN不自等
NaN===NaN   //false
  • isNaN()函数可以用来判断变量值是否为NaN，该变量在Number()的执行结果为NaN时，则isNaN()函数结果为true。
isNaN(undefined);   //true
NaN==undefined;   //false
  1. !==不全等

三.逻辑运算符

  1. 非运算的结果类型是Boolean。
!undefuned  //true
  1. 短路计算：a&&b：a真，结果为b，a假，结果为a；a||b：a真，结果为a，a假，结果为b
  2. 运算优先级：非，与，或

四.综合运算

  1. 运算顺序：非运算，数学运算，关系运算，逻辑运算
  2. 验证变量a是否介于5到12之间：a≥5&&a≤12;
博客HTML5CSS3