2021-10-07 html.css3 第一阶段学习笔记

最新推荐文章于 2023-10-06 13:16:26 发布

YPX_早起的鸟儿

最新推荐文章于 2023-10-06 13:16:26 发布

阅读量129

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/YPX_YGWW/article/details/120632732

版权

Htnl基本介绍

html5是什么？

网站建设步骤

买域名

租空间

网站设计

特定网站上传到空间中

网站推广

维护

使用方法

(```+空格+html）生成html再按回车出现html   文本框 

 #+空格 :一级标题

##+空格：两级标题

*+空格：列表

<h1>标题标签</h1>
<p>段落标签</p>
<ul>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
</ol>

ol属性：type="1"
       start="3"

<dl>
    <dt>自定义列表</dt>
    <dd></dd>
</dl>
eg:
<dl>
   <dt>城市</dt>
   <dd>北京</dd>
   <dd>上海</dd>    
</dl>

快速生成自定义列表：
dl>dt+dd*3{$}



不独占一行，可以和其他元素排列在一起的

<s>删除</s>
<u>下划线</u>
<em>倾斜</em>
<i>倾斜</i>
<b>加粗</b>
<sup>上标</sup>
<sub>下标</sub>
<strong>加粗</strong>
<span>哪里有样式包哪里</span>:包裹文字进行更改样式
<a href=""></a>

a标签
<a href="" title="" target="_new"></a>新窗口打开
<a href="" title="" target="_blank"></a>新窗口打开 
<a href="" title="" target="_self"></a>自身窗口打开

<img src="" ait="图片加载失败的提示信息" title="鼠标移入的提示文字信息

路径：
  绝对路径  C:\Users\94560\Desktop\qf_project1\day01\code\taobao\images\pig.jpg
  相对路径  相对于当前文件的路径
            ./    访问同级目录
            ../    访问上级目录
            ./images/1.jpg  访问下级目录

注意：
独占一行的这些标签内部可以嵌套 不独占一行的标签

<p>
   <a href=''></a>
</p>

<h1>
   <a href=''></a>
</h1>


<h1>
   <span></span>
</h1>

标签的属性

独占一行的标签的共有属性:align(水平对齐方式)：left,center,right
<h1 align="center">标题</h1>
<p align="center">段落标签</p>
<ul>
    <li align="center">无序列表</li>
</ul>

列表属性：type（类型）
无序列表：type=“circle"
        type="disc"
        type="square"
有序列表：type=“a"
        type="A"
        type="1"
        type="I"

span标签

span 标签用来定义文本内容，可以是单独的一句话，一些内容，也可以是段落里面的内容。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。span 元素仍然为 p 元素增加了额外的结构。span 标签是不带任何默认样式的，所以它极大的提高了我们可以对文本内容自定义样式的需求。

span标签的特点：

不独占一行，可以和其他元素排列在一起

span标签不支持align属性

span不能设置宽度和高度

支持左右的padding，上下padding尽量不使用

span标签设置背景时，字的宽度就是span的宽度

span标签可以嵌套在div或者p等标签内

div标签
div 标签，称为盒子。作用是设定内容的摆放位置。div 标签可以把文档分割为独立的、不同的部分。div 就相当于一个区域，我们把我们网页内容的都放在这个区域里面。

div的特点：
- 独占一行
- 支持align属性
- 可以设置宽度和高度
- 支持padding和magin
- div 没有任何的默认样式，所以它不会像 P 标签和 H 标签一样，有上下间距
- div 标签里面可以嵌套其他任意标签。
- 我们可以给某些单独的标签外层包裹一个 div，比如 img 标签，a 标签，这样方便我们后续为其设置样式。

单词总结

width：宽度
height：高度
color：字体颜色
background-color：背景颜色
padding：内边距
margin：外边距

padding-top：上内边距
padding-bottom：下内边距
padding-left：左内边距
padding-right：右内边距

margin-top：上外边距
margin-bottom：下外边距
margin-left：左外边距
margin-right：右外边距

border：边框

边框有三个属性值： 
border：1px solid red; 粗细1px  实线  红色

快捷键的使用

shift + alt + 下键 :一起生成相同代码复制
ctr + D ：修改成对的标签，按一次是一个
p{我是段落$}*5  生成多行相同代码 
<a href="#"></a>  与 <a href="javascript:;"></a>窗口不跳转
ul>li{}*5  无序列表 （列表的快速生成）
Alt+B: 运行

特殊符号

&nbsp;空格符 
&copy;版权 
&reg;商标 
&gt;大于号 
&lt;小于号

css样式

什么是css?

1.什么是css？

a) Css翻译过来是层叠样式表

b) 目前发布的版本是3.0

2.css的主要作用：

a) 调整页面中元素的宽高、颜色、排列方式等就需要来美化一下网页。

b) 美化网页就是通过css语言来美化的。

3.css语法：

a) 格式：选择器{属性1:属性值1;属性2:属性值2;.............}

b) 选择器：要改谁的样式就写谁的名字。每一个标签都有自己的标签名字，比如要更改p标签的样式，那么这里的选择器就写上p。

c) 属性：要更改什么属性就写属性的单词。比如要更改文字颜色就写color单词。

选择器

全局选择器：  *{}
类选择器：.a{color:red}
群组选择器：a,b,i,u,s,em{}
标签选择器：h1{}

标签选择器

a{
    color:red;  
}
选择到a标签

类选择器

<body>
    <div class='a'></div>
</body>

<style>
.a{
    color:red;
}
</style>

类选择器支持多类名

<body>
    <div class='a b'></div>
</body>
<style>
    .a{
        color:red;
    }
    .b{
        font-size:20px
    }
</style>

新学单词

text-align：center; 文字水平方向居中（应用在块级元素上）
line-height:30px;实现文字在竖直方向居中(要求line-height的值=height的值)（应用在块级元素上）
font-weight：100-900(细-粗); 字体粗细
font-family: '字体系列'

元素的特点

p: 上下外边距16px
h1：上下外边距21.4px
a：字体蓝色，下划线，手
ul：上下外边距16px ，左内边距40px
li:没有上下外边距

居中

居中一个盒子

div{
	width:100px;
    margin:0 auto;     
}

居中盒子内部的文字或者图片

div{
    text-align:center;
}

// 居中div内部的一行文字
div{
    height:40px;
    line-height:40px;
}

body的高度问题

body默认没有高度，高度由内容撑起来的，如果想设置

html,body{
    height:100%;
    width:100%;
}

解决外边距重叠

父元素和子元素的外边距重叠了

给父元素加一个透明的边框 border:1px solid transparent;
给父元素加一个overflow:hidden;

git的操作方法

git init
git add  .
git commit -m "first commit"
git remote add origin https://gitee.com/wang-rui124/form-learning.git
git push -u origin master

table表格

表格的基本结构

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>




tr:行
td:列
快速生成表格：table>tr*3>td*6
生成3行6列的表格
cellspacing:单元格之间的距离,默认是2px;
cellpadding:单元格的内边距
caption:表格题目
td变成th:字体自动加粗

表格的属性

表格table相关属性：
宽度  width
高度  height
边框  border
边框颜色  bordercolor
背景颜色   bgcolor   
文字水平对齐  align=“left或right或center”
cellspacing="单元格与单元格之间的间距“ 必须给table
cellpadding="单元格与内容之间的空隙"  必须给table
合并单元格属性：
        colspan=“所要合并的单元格的列数”合并列;必须给td
        rowspan=“所要合并单元格的行数”合并行; 必须给td
合并之后需要把多余的单元格删除

form表单

HTML 表单用于收集用户输入。<input> 元素有很多形态，根据不同的 type 属性
<input type="text"> 单行文本框
<input type="password"> 密码框
<input type="radio"> 单选按钮
<input type="checkbox"> 复选按钮
<input type="submit"> 提交按钮
<input type="reset"> 重置按钮

<textarea  cols="30" rows="10"></textarea> 实现多行文本框 
<select>    
    <option>上海</option>   
    <option>北京</option>    
    <option>天津</option>    
    <option>厦门</option>
</select>


注意点：
1. 保证单选按钮能够单选，可以通过相同的name值来实现 <input type="radio" name='sex'>
2. 保证重置按钮能够重置，需要将所有的表单控件放在form标签内部3. <input type="text" placeholder='输入...'> 占位符，占位的内容不可以被删除   <input type="text" value='zhangsan'> 类似于用户的输入内容，内容可以被删除
4. 如果想让复选框或者单选按钮默认被勾选，则需要设置checked属性<input type="radio" checked> <input type="check" checked> 


form表单用于收集用户输入。<input> 元素有很多形态，根据不同的 type属性

<input type="text"> 单行文本框
   单行文本框的属性：
        maxlength:最多能输入的字符的个数
        size：文本框长度（默认是20）
        value：默认的输入内容
eg：
<input type="text" placeholder="用户名/手机号">

<input type="password"> 密码框
eg：
input type="passward" placeholder="密码"

<input type="radio"> 单选按钮
eg：
<input type="radio" value="sex">男
<input type="radio" value="sex">女
            注意：name值保持一致是保持确定单选框的必要条件

<input type="checkbox"> 复选按钮
eg：
<input type="checkbox">足球
<input type="checkbox"> 篮球
<input type="checkbox"> 乒乓球
           {想在一行就用p包住}

<input type="submit"> 提交按钮

<input type="reset"> 重置按钮

实现多行文本框：
<textarea  cols="30" rows="10"></textarea> 
          cols：水平输入内容的个数{控制宽度}
          rows：竖直方向输入的内容的行数{控制高度}

超过则出现滚动条

 下拉列表：  <select>
                        <option>陕西省</option>
                        <option>甘肃省</option>
                        <option> 江苏省</option>
                        <option> 云南省</option>
                        <option> 广东省</option>
                        <option> 云南省</option>
                    </select>

        注意： size:select里面加size，相对于展开几项

注意点：
1. 保证单选按钮能够单选，可以通过相同的name值来实现 <input type="radio" name='sex'>   
2. 保证重置按钮能够重置，需要将所有的表单控件放在form标签内部
3. <input type="text" placeholder='输入...'>  占位符，占位的内容不可以被删除
   <input type="text" value='zhangsan'>  类似于用户的输入内容，内容可以被删除
4. 如果想让复选框或者单选按钮默认被勾选，则需要设置checked属性
<input type="radio" checked> 
<input type="check" checked>

选择器

选择器权重

通用选择器:*,权重为：0
标签选择器（p,div,span ）,权重：1
类选择器：class 与.x，权重：10
id选择器：id与#X，权重：100
       相同的id名只能出现一次
style行内样式，权重：1000
!important权重：无穷大
群组选择器：
p,h1{
  color:red;
}
p{
color:gree;
}
当同时出现选择时，颜色会出现绿色，下面的颜色会覆盖到上面的颜色

选择器种类

通用选择器:*,权重为：0
标签选择器（p,div,span ）,权重：1
类选择器：class 与.x，权重：10
id选择器：id与#X，权重：100
       相同的id名只能出现一次

子代选择器：选择亲儿子，直属下级
.nav > li{
         border: 1px solid coral;
     }
.nav下面的的直属li子儿子

后辈选择器：可以选择下面任何一代，直属与非直属，既儿子与孙子
.div p{
         color: gold;
}

交叉选择器 ： 选择div标签 提高权重 11
     div .div{
         color: green;
     }

群组选择器
p,h1{  
	color:red;
}
当同时出现选择时，颜色会出现绿色，下面的颜色会覆盖到上面的颜色

继承选择器：权重为0
div p{
	color:red;
}

结构伪类选择器:权重为10
选择偶数行：
li:nth-child(even){
            color: red;
        }
li:nth-child(2n){
            color: red;
        }
选择奇数行变色：
li:nth-child(odd){
            color: red;
        }
li:nth-child(2n-1){
            color: red;
        }
选择隔2变色
li:nth-child(3n+1){
            color: red;
        }

选择大于等于4变色 
li:nth-child(n+4){
            color: red;
        }
选择小于等于4 
li:nth-child(-n+4){
            color: red;
        }

盒子

border-radius:10px  添加边框圆角
添加阴影：
div:hover{
      box-shade:10px 10px 20px gray;
	  }
点击后出现的样式
数字分别为：水平 竖直  模糊的宽度 颜色

块级元素宽度默认百分之百

浮动：float
清除浮动：
在最后一个浮动元素后面加一个空标签（写上clear: both）
<div style="clear: both;"></div>
还可以加高来清除浮动

清除两边间距：

平分宽度

#box li{
      width:calc((1230px - 40px)/5)；
      height:350px;
}
计算公式：（总长减去中间的空隙）/分成的几块

清除第五个框的右外边距：

#box li:nth-child(5){
   margin-right:0px
}

相同样式用ul>li
清除默认样式：
*{
padding:0px;
magin:0px;
list-style:none;
}

定位锚点透明

一.position 定位属性和属性值

position 定位属性，检索对象的定位方式；
语法：position：static /absolute/relative/fixed/inherit/sticky/unset(未设置是inherit和initial的结合)/initial(最初的)
取值：
1、static：默认值，无特殊定位,默认的
2、absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据《浏览器》进行定位，而其层叠通过z-index属性定义
3、relative ：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义.
4、fixed：(固定定位)，类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流；

二、定位元素的层级属性

z-index : auto |number 设置定位对象的层叠顺序。
auto：默认值。遵循结构，后写的定位元素层的顺序靠上。
number:无单位的整数值。可为负数，数值越大，层的顺序越靠上
说明：
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。

三、定位的具体细节 position 定位？规定元素的定位类型。

普通流：上下排列

浮动：解决左右排列的问题。（主要去做的）

定位：解决叠加排列的问题。（主要去做的）

position取值： static（默认） ;

relative : 相对定位如果没有定位偏移量，对元素本身没有任何影响不使元素脱离文档流，空间是会被保留。不影响其他元素布局 left、top、right、bottom是相对于当前元素自身进行偏移的;

absolute : 绝对定位使元素完全脱离文档流使内联元素支持宽高（让内联具备块特性）使块元素默认宽根据内容决定（让块具备内联的特性）如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。

定位的组成：

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

定位=定位模式+边偏移。

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

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

相对定位relative (重要) 相对定位是元素在移动位置的时候,是相对于它原来的位置来说的.

语法: 选择器{ position: relative; }

相对定位的特点:

         1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置) .

          2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。( 不脱标,继续保留原来位置)

绝对定位absolute 绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的.

语法:选择器{ position: absolute; }

绝对定位的特点:

         1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位( Document文档).

2.如果祖先元素有定位(相对、绝对、固定定位) , 则以最近- -级的有定位祖先元素为参考点移动位置。

        3.绝对定位不再占有原先的位置。( 脱标) 子绝父相的由来弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。

注意:这个"父相子绝”太重要了,:子级是绝对定位的话,父级要用相对定位。

①子级绝对定位,不会占有位置,可以放到父盒子里面的任何-个地方 ,不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时,需要占有位置,因此父亲只能是相对定位。

固定定位fixed

固定定位是元素固定于浏览器可视区的位置。

主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。

语法: 选择器{ position: fixed; }

固定定位的特点:

        1.以浏览器的可视窗口为参照点移动元素。-跟父元素没有任何关系 -不随滚动条滚动。         2.固定定位不在占有原先的位置。固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。

四、包含块的概念及作用

包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比

长度的参考；默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

绝对和相对定位的区别

1、参照物不同，绝对定位（absolute）的参照物是包含块（父级），相对定位的参照物是元素本身位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

四、锚点连接的语法和应用场景

命名锚点的作用：在同一页面内的不同位置进行跳转。

锚点链接语法：

1)给元素定义命名锚记名语法：<标记 id="命名锚记名"> </标记>

2)命名锚记连接语法：<a href="#命名锚记名称">链接文本或图片</a>

五、透明写法 IE9以下浏览器写法

：filter:alpha(opacity=value);取值范围 0-100 兼容其他浏览器写法：opacity:0.5; (value的取值范围0-1 0.1,0.2,0.3-----0.9---1) rgba(255,255,0,0.5)(最后一位值表示透明，取值范围0-1) 只支持IE8以上的浏览器

六、Flash和marquee(滚动字幕)

1、插入flash

        1）语法： <object> <embed width="value" height="value" wmode="transparent" src="flash路径及全称" ></embed> </object>

        2）将flash背景设置为透明 <embed wmode="transparent" /> 给<embed>标记添加属性：wmode="transparent" 说明：flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe.

        3）IE中不显示flash,可做如下操作：

          A.下载安装flash player;

          B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

2、滚动字幕的应用：

<marquee behavior（行为）="scroll(滚动)/alternate（晃动）" direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）" scrollamount（滚动速度）="value" height="value(上下滚动范围)" width=""(左右滚动范围)> 内容 </marquee>

八、 CSS继承概念：

所谓继承，就是父元素的规则也会适用于子元素。继承得来的规则没有特殊性。

比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform.

块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

九、CSS层叠概念：

一个元素可能同时被多个css选择器或样式表选中，每个选择器及样式表都有一些css规则，这就是层叠。这些规则有可能不矛盾的，自然这些规则将会同时起效，然而有些规则是相互冲突的。当发生冲突的时候必须选出一条最高特殊性(权重)的规则来应用。返回顶部

css3选择器

选择器

伪类选择器

1、结构性伪类选择器
X:first-child 匹配子集的第一个元素。IE7就可以支持
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:empty匹配没有任何子元素（包括包含文本）的元素X

2、目标伪类选择器
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

3、ul元素状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E

4、否定伪类选择器
E:not(s) （IE6-8浏览器不支持:not()选择器。）
匹配所有不匹配简单选择符s的元素E

5、动态伪类选择器
动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动 态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作 用户行为伪类 最常见的锚点伪类： 
:link {color:gray;}/*链接没有被访问时*/ 
:visited{color:yellow;}/*链接被访问过后*/ 
:hover{color:green;}/*鼠标悬浮在链接上时*/ 
:active{color:blue;}/*鼠标点中激活链接那一下*/ 

input:focus/*用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点时的状态*/

层级选择器

E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

属性选择器

1、E[attr]：只使用属性名，但没有确定任何属性值；
2、E[attr="value"]：指定属性名，并指定了该属性的属性值；
3、E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
4、E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的
5、E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

css文本属性

CSS3文本属性
浏览器前缀的简介及应用
CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分

-ms- -ms-box- shadow IE浏览器专属的CSS属性需添加-ms-前缀 
-moz- -moz-box- shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz- 前缀 
-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀 
-webkit- -webkit-box- shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加 -webkit-前缀

文本阴影属性语法及应用
定义： text-shadow: 属性值; 
--1:阴影的水平偏移量，正值阴影在右侧，负值阴影在左侧，必填 
--2:阴影的垂直偏移量，正值阴影在底部，负值阴影在顶部，必填 
--3:阴影的模糊距离，必须为正值，值越大，阴影边缘越模糊，非必填 
color---4：阴影颜色

4、box-shadow 盒子阴影
属性值：

Eg:box-shadow: 10px 10px 5px #888888

@font-face
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）

@font-face的语法规则：
@font-face {
font-family: <YourWebFontName>; 
src: <source> [<format>][,<source> [<format>]]*; 
[font-weight: <weight>]; 
[font-style: <style>]; 
}

@font-face语法说明：
1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";” 
2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径； 
3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等； 
4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

实例：

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

CSS3 渐变

CSS3 渐变（gradient）

可以让你在两个或多个指定的颜色之间显示平稳的过渡。

渐变（gradient）是由浏览器生成的。

1、线性渐变语法： background: linear-gradient(direction, color-stop1, color-stop2, ...);

说明： direction：默认为to bottom，即从上向下的渐变； stop：颜色的分布位置，默认均匀分布，
例如有3个颜色，各个颜色的stop均为33.33%。 

示例1：
to left、top right、to bottom、to top 
div { background:linear-gradient(to left, red , blue) }
 div { background:linear-gradient(to right, red , blue) }
 div { background:linear-gradient(to bottom, red , blue) }

 /* 浏览器默认值 */ div { background:linear-gradient(to top, red , blue) } 分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变 


示例2：
to right bottom、to right top、to left bottom、to left top
 div { background: linear-gradient(to right bottom, red , blue); } 
div { background: linear-gradient(to right top, red , blue); }
 div { background: linear-gradient(to left bottom, red , blue); }
 div { background: linear-gradient(to left top, red , blue); } 

分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变 示例3：使用角度渐变 div { background: linear-gradient(10deg, red, blue) } 
2、径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，

而径向渐变是从“一个点”向四周的颜色渐变

语法： background: radial-gradient(center, shape, size, start-color, ..., last-color);

说明： center：渐变起点的位置，可以为百分比，默认是图形的正中心。

         shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。

        默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

         size：渐变的大小，即渐变到哪里停止，它有四个值。

         closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角
示例1：
多颜色点均匀分布 

div { background: radial-gradient(red, green, blue); }
 以中心（50% 50%）为起点，到最远角（farthest-corner），
从red到green、blue的均匀渐变 EG: div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); }

 或
 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

示例2：
多颜色节点不均匀分布 
div { background: radial-gradient(red 5%, green 15%, blue 60%); }


示例3：设置渐变形状
 div { background: radial-gradient(circle, red, yellow, green); } div { background: radial-gradient(ellipse, red, yellow, green); }


 circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。
3、重复渐变

（1）重复性线性渐变 div { background: repeating-linear-gradient(red, yellow 10%, green 20%); } 说明： 10%的位置为yellow，20%的位置为green，然后按照这20%向下重复

（2）重复性径向渐变 div { background: -webkit-repeating-radial-gradient(red 0%, yellow 10%, green 20%); }

CSS3 背景的新增属性

1、background-size 基本语法：background-size: length | percentage | cover | contain;

一：length 该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

二：percentage 该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

三：cover 宽度高度等比放大，直到铺满为止四：contain 只要有一边占满就停止。 background-size值为cover和值为100%的区别 background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;--宽度高度等比放大，直到铺满为止

background-size cover和contain的区别

前提：. 在no-repeat情况下，如果容器宽高比与图片宽高比不同， cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；

contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

2、Background-origin 背景原点说明：

指定background-origin背景原点,背景从什么位置开始显示属性值： padding-box 背景从padding部分开始显示(默认方式) border-box 背景从border部分开始显示 content-box 背景从内容部分开始显示注：默认值为：padding-box; 2、Background-clip 背景裁切说明： background-clip 属性规定背景的绘制区域。属性值： border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框注：默认值：border-box;

4、css3多背景属性

Eg: p{0 background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片 background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景，第一个最上面 background-color:yellow; //这是定义的默认背景颜色，全部适合 }

CSS3 2D之transform transform的属性包括

rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()

1、translate()

将元素向指定的方向移动，类似于position中的relative。水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty); 对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。 translateX()：水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。 translateY()：纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。所以 transform:translate(-100px,0)实际上等于transform:translateX(-100px); transform:translate(0,-100px)实际上等于transform:translateY(-100px)。

2、scale()

让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如， scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。 scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。 scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。

3、rotate()

旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

4、skew()

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。一个参数时：表示水平方向的倾斜角度；两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度 transform-origin transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew等操作都是以元素自己中心位置进行变化的。

2D 转换元素能够改变元素 x 和 y 轴 CSS3 边框的新增属性

1、border-color EG: border-color:red green #000 yellow;(上右下左)

2、border-image border-image 属性是一个简写属性

用于设置以下属性: border-image-source 用在边框的图片的路径。 border-image-slice 图片边框向内偏移。 border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched) border-image-outset 边框图像区域超出边框的量

3、Border-radius 圆角边框

        (1) .box{ border-radius: 5px 10px 20px 50px }

        (2) .div1{border-radius: 2em/1em} 以斜杠/分开后面的参数: 第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径

        (3) .div1{ border-radius:10px 20px 30px 40px/40px 30px 20px 10px } 按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径，但是通常我们很少写右边的参数，那就是默认右边等于左边的值。

CSS3 过渡

transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

transition-property：检索或设置对象中的参与过渡的属性
transition-duration：该属性主要用来设置一个属性过渡到另一个属性所需的时间，
transition-timing-function：检索或设置对象中过渡的动画类型, ease:由快到慢到更慢/linear:恒速/ease-in:越来越快/ease-out:越来越慢/ease-in-out:先加速后减速
transition-delay：就是过渡效果开始前的延迟时间，单位秒或者毫秒
语法： transition: property duration timing-function delay;
默认值：transition:all 0 ease 0
简写：
transition:all/具体属性值运动时间s/ms 延迟时间s/ms 动画类型

CSS3 2D

transform
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()

1、translate()
        将元素向指定的方向移动，类似于position中的relative。
        水平移动：
        向右移动translate(tx,0)和向左移动translate(-tx,0)；
垂直移动：
向上移动translate(0,-ty)和向下移动translate(0,ty);
对角移动：
右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

translateX()：
水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。
translateY()：
纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。
这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。
所以
transform:translate(-100px,0)实际上等于transform:translateX(-100px);
transform:translate(0,-100px)实际上等于transform:translateY(-100px)。

2、scale()

让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。
例如，
scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。

3、rotate()

旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

4、skew()

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

transform-origin
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew等操作都是以元素自己中心位置进行变化的。

2D 转换元素能够改变元素 x 和 y 轴

CSS3 3D

什么是3d的场景呢？ 2d场景，在屏幕上水平和垂直的交叉线x轴和y轴

3d场景，在垂直于屏幕的方法，相对于3d多出个z轴

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

CSS3中的3D变换主要包括以下几种功能函数：

3D位移：
CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
3D旋转：
CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：
CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；

景深
生活中的3d 区别于2d的地方
近大远小景深
程序中实现的方法 perspective 元素距离视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective: 1200px;（在父元素中使用）
transform:perspective(1200px) （在子元素中使用）
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉

perspective-origin;
观察3d元素的（位置）角度 perspective-origin：center center （中心）
perspective-origin：left top （左上角）
perspective-origin：100% 100% （右下角）

transform-style属性
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d
其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。

3d重要功能函数

1、 3D位移
在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。
语法：translate3d(tx,ty,tz)
tx：代表横向坐标位移向量的长度；
ty：代表纵向坐标位移向量的长度；
tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

ranslateZ()函数的功能是让元素在3D空间沿Z轴进行位移。
语法：translateZ(t)
t：指的是Z轴的向量位移长度。

2、 3D旋转
在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数：rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)。

rotateX(a)
rotateX()函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。

rotateY(a)
rotateY()函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。

rotateZ(a)
rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转。

rotate3d(x,y,z,a)
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3、 3D缩放
CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小

scale3d(sx,sy,sz)
sx：横向缩放比例；
sy：纵向缩放比例；
sz：Z轴缩放比例；
scaleZ(s)
s：指定元素每个点在Z轴的比例。
注：scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果

动画

CSS3属性中有关于制作动画的三个属性：
transform,transition,animation

keyframes
@keyframes mymove{ from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
100%{结束状态属性}
}（中间再可以添加关键帧）

animation和transition的区别
相同点：
都是随着时间改变元素的属性值。
不同点：
transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

animation
animation复合属性。检索或设置对象所应用的动画特效。
1.animation-name

检索或设置对象所应用的动画名称
说明：
必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove

2.animation-duration

检索或设置对象动画的持续时间
说明：
animation-duration:3s; 动画完成使用的时间为3s

3.animation-timing-function

检索或设置对象动画的过渡类型
说明：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

4.animation-delay

检索或设置对象动画延迟的时间
说明：
animation-delay:0.5s; 动画开始前延迟的时间为0.5s)

5.animation-iteration-count

检索或设置对象动画的循环次数
说明：
animation-iteration-count: infinite | number;
infinite：无限循环
number: 循环的次数

6.animation-direction

检索或设置对象动画在循环中是否反向运动
说明：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

7.animation-play-state

检索或设置对象动画的状态
说明：
animation-play-state:running | paused;
running:运动
paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

弹性盒子布局

CSS 弹性盒子布局
flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力

flexbox 的两根轴线
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它
flex-direction属性（设置在父元素上）
主轴 主轴由 flex-direction 定义，可以取4个值：
     row 
     row-reverse 
     column 
     column-reverse
如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。
 
选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。
 
交叉轴 交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。  
如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。
 
理解主轴和交叉轴的概念对于对齐 flexbox 里面的元素是很重要的；flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素。

justify-content属性（设置在父元素上）
 
align-items属性 （设置在父元素上）
 
align-content 属性 （设置在父元素上）
只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果）. 它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体 （属性值为：flex-start、flex-end、center时）进行对齐

flex-wrap （设置在父元素上）
nowrap（默认）：所有flex item将在一条线上
wrap：flex item将会从上到下分为多行
wrap-reverse：flex item将会从下到上分为多行
 
order属性（设置在子元素上）
默认情况下，flex item按源顺序排列。然而，order属性控制它们在flex容器中出现的顺序
order:<整数值>;//默认为0 

flex-grow（设置在子元素上）
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。


flex-shrink（设置在子元素上）
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

flex（设置在子元素上）
上面两个开发过程中用的不多，都是使用flex属性（复合属性）

    
CSS3 多列布局基本属性
1. column-count：设置列的具体个数
2. column-width：设置列的宽度
3. column-gap：设置列的间隙
4. column-rule：设置列的宽度，样式和颜色
5. column-span：设置元素应该跨多少列（all代表所有列，n：指定跨n列）
CSS3 多列布局列宽属性
column-width(取大优先)

CSS3 多列布局列数属性
column-count

CSS3 多列布局列间距属性
column-gap

CSS3 多列布局列边框样式
column-rule
column-rule-width: 1px;
column-rule-style: dashed;
column-rule-color: #000;

CSS3 多列布局跨列属性
column-span

CSS3 3D

一、认识 `3D` 转换

1. `3D` 的特点
   - 近大远小
   - 物体和面遮挡不可见
2. 三维坐标系
   - x 轴：水平向右  -- **注意：x 轴右边是正值，左边是负值
	-y 轴：垂直向下  -- **注意：y 轴下面是正值，上面是负值*
  	- z 轴：垂直屏幕  --  **注意：往外边的是正值，往里面的是负值

`3D` 转换

1. `3D` 转换知识要点

   - `3D` 位移：`translate3d(x, y, z)`
   - `3D` 旋转：`rotate3d(x, y, z)`
   - 透视：`perspctive`
   - `3D`呈现 `transfrom-style`

2. `3D` 移动 `translate3d`

  `3D` 移动就是在 `2D` 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
   `transform: translateX(100px)`：仅仅是在 x 轴上移动
   `transform: translateY(100px)`：仅仅是在 y 轴上移动
    `transform: translateZ(100px)`：仅仅是在 z 轴上移动
   `transform: translate3d(x, y, z)`：其中x、y、z 分别指要移动的轴的方向的距离
   - **注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充**

3. 语法

   ```css
    transform: translate3d(x, y, z)

代码演示

transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
transform: translate3d(100px, 100px, 0)

# 三、透视 `perspective`

``` +html
1. 知识点讲解

   - 如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上)
   - 实际上模仿人类的视觉位置，可视为安排一直眼睛去看
   - 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
   - 距离视觉点越近的在电脑平面成像越大，越远成像越小
   - 透视的单位是像素

2. 知识要点

   - **透视需要写在被视察元素的父盒子上面**
   - 注意下方图片
     - d：就是视距，视距就是指人的眼睛到屏幕的距离

     - z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大   
3. 代码演示

   ```css
   body {
     perspective: 1000px;
   }

四、 translateZ

translateZ 与 perspecitve 的区别
- perspecitve 给父级进行设置，translateZ 给子元素进行设置不同的大小

五、3D 旋转rotateX

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴或者自定义轴进行旋转

语法
- transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
- transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
- transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
- transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

代码案例

div {
  perspective: 300px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)
}

左手准则
- 左手的手拇指指向 x 轴的正方向
- 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

六、3D 旋转 rotateY

代码演示

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateY(180deg)
}

左手准则
- 左手的拇指指向 y 轴的正方向
- 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

七、 3D 旋转 rotateZ

代码演示

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateZ(180deg)
}

rotate3d
- transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
- x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
  - transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
  - transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

代码演示

div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotate3d(1, 1, 0, 180deg)
}

八、3D 呈现 transform-style

transform-style
- ☆☆☆☆☆
- 控制子元素是否开启三维立体环境
- transform-style: flat 代表子元素不开启 3D 立体空间，默认的
- transform-style: preserve-3d 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子

#  H5标签

``` +html
HTML5 发展史


HTML5 的浏览器兼容
支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。

HTML5 语法

DOCTYPE声明
<!DOCTYPE html>不区分大小写
指定字符集编码
meta charset="UTF-8"
可省略标记的元素
不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody
省略引号
属性值可以使用双引号，也可以使用单引号。

HTML5 新增语义化标签

section元素 表示页面中的一个内容区块
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的，与article内容相关的辅助信息
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容

Video和audio的应用
video元素 定义视频
<video controls="controls">
     <source src="movie.mp4" type="video/mp4">
     <source src="movie.ogg" type="video/ogg">
</video>
audio元素 定义音频
<audio src="someaduio.wav">Audio元素</audio>

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

HTML5 智能表单
新增输入类型
Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间

input类型设置
email：专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交。但它不检查email地址是否存在。提交时可以为空，除非加上了required属性。
具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址。

url类型
专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允许提交。mail地址。
例：<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>

Number类型
专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性。
例：<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

range类型
是用来只允许输入一段范围内数值的文本框，它具有min属性与max属性，及step属性，可以指定每次拖动的步幅。
例： <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />

min 最小值
max 最大值
step 数字间隔

(date, month, week, time, datetime,datetime-local)
拥有多个可供选取日期和时间的新输入类型。
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
例：<input type=“month” >
Search：输入的是搜索的关键字，与type=“text” 基本上一样。
Color：用来选取颜色。

对新元素样式的使用：
注意，跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果，等，这些都不可以实现。

表单新属性
1）、Datalist ：选项列表
例： <input type="url" list="url_list" name="link" />
<datalist id="url_list">
  <option label="W3School" value="http://www.W3School.com.cn" />
  <option label="Google" value="http://www.google.com" />
  <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
提示：option 元素永远都要设置 value 属性。

2.属性
placeholder属性：
文本框处于未输入状态时文本框中显示的输入提示。
autofocus属性：
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
required属性：
验证输入不能为空
list属性：
结合datalist元素使用
autocomplete属性：
输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。只有三种：on/off/""。on可是显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以讲该datalist元素中的数据作为候补输入的数据在文本框中显示： <input type="text" name="greeting" autoconplete="on" list ="greeting">

3.自动验证
1）、required
可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。
2）、 min、max、step：
为包含数字或日期的 input 类型规定限定（约束）
max: 最大值
min: 最小值
step: 数字间隔
例：<input type="number“ min="0" max="10" step="3" />
3、取消验证
可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证
4.Multiple:
可以输入一个或多个值，每个值之间用逗号分开
例：<input type=“email” multiple/>
还可以应用于file

移动端布局

移动端布局
viewport视口
一个PC的页面在移动设备上展示效果是怎么样的?
 
手机浏览器默认为我们做了两件事情，一：页面渲染在一个980px的viewport里面
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。
在viewport中有两种视口,分别表示为, visual viewport (视觉视口 )和layout viewport (布局视口)。
visual viewport固定大小跟屏幕大小相同，在上面,而layout viewport可改变 大小，在下面。
Layout viewport默认大小为980像素,可通过document.documentElement.clientWidth获取。
理想视口: 现代网页需要将layout viewport设置成跟visual viewport等同大小,方便进行网页制作。
需要手动添写meta视口标签通知浏览器操作。
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽。
     <meta name="viewport"      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
     maximum-scale=1.0 ----> 最大允许的缩放比例1.0
     minimum-scale=1.0 ----> 最小允许的缩放比例1.0
     user-scalable=0 ----> 不允许用户自行缩放
     width=device-width ---->视口宽度和设备保持一致
     initial-scale=1.0----> 视口的默认缩放比例1.0
dpi、ppi 介绍
像素：像素是指由一个数字序列所表示的图像中的一个最小单位。你可以把像素理解成图像中一个个不可再分割的最小的染色点即可

什么是分辨率:可以细分为显示分辨率、图像分辨率、打印分辨率等
显示分辨率：显示分辨率是指显示器所能显示的像素点的个数，是指整个显示器所有可视面积上的水平像素和垂直像素的数量。 
什么是PPI PPI：Pixels Per Inch，是指图像分辨率，也叫像素密度，表示每英寸的所包含的像素点数量。（1英寸=2.54厘米）
例如：若1英寸包含10个像素点，则图像分辨率是10PPI；若1英寸包含20个像素点，则图像分辨率就是20PPI，如下图所示： 
什么是DPI:Dots Per Inch，是指打印分辨率，也叫打印精度，表示每英寸所能打印的点数

一般来说，DPI值越高，表明打印机的打印精度越高。
像素密度： 所以dpi或ppi统称像素密度(pixel per inch)：即屏幕每英寸所占的物理像素点 PPI=像素数量/物理尺寸（英寸数）


屏幕尺寸： 屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸：
iphone4 3.5英寸
iphone5 4英寸
iphone6 4.7英寸
iphone6 plus 5.5英寸
iphoneX 5.8英寸
设备像素比dpr介绍
设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
逻辑像素又称为css像素。
物理像素和设备独立像素之间存在着一定的对应关系
浏览器显示网页时，需要将css像素转为物理像素然后呈现。
一个css像素最终由几个物理像素来决定。
设备像素比dpr = 物理像素 / 逻辑像素(px) Ps:在某一方向上，x方向或者y方向
iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375。 也就是说，1个逻辑像素，在x轴和y轴方向，需要2个物理像素来显示，如下图： 

dpr如何获取
dpr : 设备像素比例。
dpr == 物理像素（把手机上图片截图放在ps中量取的大小） / 逻辑像素（css去设置的像素）
dpr怎么获取：
根据UI设计图而定：绝大部分拿到的设计图的大小 750px/640px
针对性对dpr进行获取：
----- 如果设计图为640px 或者 750px 选取dpr 2
----- 如果设计图为大于750px 选取dpr为 3
什么是媒体查询
媒体查询（Media Query）是CSS3新语法。
- 使用 @media查询，可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
媒体查询语法规范
- 用 @media开头 注意@符号
- mediatype 媒体类型
- 关键字 and not
- media feature 媒体特性必须有小括号包含
@media mediatype and|not|only (media feature) { CSS-Code; }

mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
   - all 所有设备
   - print 用于打印机和打印浏览
   - screen 用于电脑屏幕，平板电脑，智能手机
关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and：可以将多个媒体特性连接到一起，相当于“且”的意思。
- not：排除某个媒体类型，相当于“非”的意思，可以省略。
- only：指定某个特定的媒体类型，可以省略。
媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
- width:定义输出设备中页面可见区域的宽度 - min-width：定义输出设备中页面最小可见区域宽度 - max-width：定义输出设备中页面最大可见区域宽度

媒体查询书写规则
**注意：** 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁 

书写语法：
1. 媒体查询一般按照从大到小或者 从小到大的顺序来
@media screen and (max-width: 539px) {} 代表宽度小于540px页面的背景颜色为蓝色
@media screen and (min-width: 540px) {} 代表宽度是540px-970px之间
@media screen and (min-width: 970px) {} 代表宽度大于等于970px

0～320px，320px～550px，550px～768px以及768px～960px
@media screen and (max-width: 960px){}
@media screen and (max-width: 768px){}
@media screen and (max-width: 550px){}
@media screen and (max-width: 320px){}

-超小屏幕（手机） < 768px
-小屏设备（平板） (>=)768px - 992px(<)
-中等屏幕（桌面显示器）(>=)992px - 1200px(<)
-宽屏设备（大桌面显示器）>= 1200px
em和rem的特点
em: 一个相对单位，1em等于当前元素或者父元素的font-size值。
rem：一个相对单位rem的特性 ，1rem等于根元素的font-size值。
vw/vh:把屏幕分为100分，1vw等于屏幕的宽度的1%。

如何动态设置根元素的font-size
有两种方式： 1.通过JS
layout viewport : document.documentElement.clientwidth
iphone 6 : 375
iphone 6 plus : 414
document.documentElement.clientwidth / 3.75 -> 100

2.通过vw

总结

写出移动端html根元素字体大小设置为100px时，使用vw的推导过程 /* 750px html{font-size:26.67vw} 640px html{font-size: 31.25vw;} */
元素的类型分类？元素类型的特点？块状元素：独占一行，可以设置宽度和高度 margin,padding都支持行内元素（内联元素）：不独占一行，不可以设置宽度和高度，支持左右padding，左右margin。行内块元素（置换元素）：img input select textarea

行内块元素水平居中：给父元素设置text-align:center 竖直方向：height和line-height（行内块元素加vertical-align:middle）

常见的标签的属性？比如a标签常见的属性？ img常见的属性 <a href='' title='' target='blank/self/new' ></a> <img src='' title='' alt =''> seo
盒子模型的组成？盒子模型分为哪两种，有什么区别？ margin padding border width height margin padding border content(width+height)

触发怪异盒模型：box-sizing：border-box;

怪异盒模型（ie盒模型）：标准盒模型：box-sizing：content-box;
浮动的属性float的属性值有哪几个? left/right/none
浮动元素的特点，如何清除浮动，有哪些方案？脱标（脱离标准文档流）空盒子 <div style='clear:both'></div> 高 .clearfix::after{ content:''; display: block; visibility: hidden; clear:both; overflow:hidden; height:0; } 父元素：overflow：hidden
写出定位属性position的属性值有哪些？以及明显特点？ static 静态定位，默认 relative 相对定位不脱标相对于自身进行定位的，位置上不会影响元素。 absolute 绝对定位脱标相对于具有定位的父级元素来进行定位。位置上会影响其他元素。内联元素支持宽度和高度 fixed 固定定位脱标相对于浏览器窗口 sticky 吸顶

postion： left/right top/bottom

z-index：

说出相对定位和绝对定位的特点？
写出css常见的选择器，css3常见的选择器 * 标签选择器（元素选择器）类选择器 id选择器交叉选择器子代选择器后代选择器群组选择器伪类选择器

css3选择器 a标签的四个伪类选择器 :link{} :visited{} :hover{} :active{} 目标伪类 :target UI元素状态 :enabled :disabled :checked 否定伪类： :not() body :not(p){} 属性选择器：[class='b'] [type*='a'] [type^='a'] [type$='a'] 结构伪类：:nth-child() :first-child :last-child :only-child ::first-line 第一行 ::first-letter 第一个字获取焦点 :focus

相邻选择器： E+F E~F

写出html5新增常见的标签有哪些？ header main footer article section aside figure figcaption nav

video controls autoplay loop muted poster audio

写出css3新增背景相关的属性有哪些？ background-size：cover 、contain、百分比，px background-origin: border-box/ content-box/padding-box（默认值） background-clip: border-box/ content-box/padding-box
写出bfc的特点，解决哪些问题？独立容器，独立渲染，块级格式化上下文
独立渲染区域内的元素不会影响到外部的元素
独立渲染区域内的元素排列是从上向下一次排列
bfc和浮动元素不会发生重叠
bfc在计算高度的时候，浮动元素的高度计算其中

外边距重叠高度塌陷可以清除浮动

写出常见的表单控件？以及表单的一些属性？ email required(必填项) multiple（书写多个邮箱，中间由，隔开），autofocus（自动获得焦点） url number step='' min ='' max='' range step='' min ='' max='' color search time date week month datetime-local
写出表格的标签以及标签上的属性有哪些？ table width height border bgcolor align bordercolor cellpadding cellspacing tr height bgcolor align valign td/th width height bgcolor align valign

thead tfoot tbody

列分组：<colgroup> <col span='2' style='background:red'> <col> </colgroup> caption

写出css中可以继承的属性有哪些？ color font-size font-style font-weight font-family line-height letter-spacing word-spacing text-align text-decoration text-indent text-tansform

写出对css层叠性(也就是优先级)理解？

行内样式》内部样式》外部链接

写出overflow的属性值以及区别？ overflow：visible( 默认值，默认超出不隐藏) hidden（默认溢出隐藏） auto(没有超出没有滚动条，超出出现滚动条) scroll(存在滚动条，多出来的内容以滚动形式出现)

写出多余内容显示省略号的代码 width:; overflow: hidden;（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap;（设置文字在一行显示，不能换行） text-overflow: ellipsis;（规定当文本溢出时，显示省略符号来代表被修剪的文本）
写出媒体查询不同像素宽的屏幕显示不同的背景颜色？如：小于678px时，红色背景 678px-980px，黄色背景大于980px，黑色背景

@media screen and (max-width:678px){ body{ background-color: red; } } @media screen and (min-width:678px and max-width:980px){ body{ background-color: yellow; } } @media screen and (min-width:980px){ body{ background-color: black; } }
写出超链接的内部跳转语法？ <a href='#m'></a> <标签 id='m'></标签>
写出超链接的几种伪类选择器？ :hover{} :visited{} :link{} :active{}
写出外边距重叠解决的方案？给父元素加overflow：hidden 给父标签加透明的边框
写出几种可以是负数的属性？ text-index:-2em; letter-spacing:-10px; margin-left:-10px; transform:translate(-10px,-10px)
写出弹性布局中设置主轴方向的属性？写出弹性布局中交叉轴（侧轴）的对齐方式有哪些？主轴方向属性：flex-direction; 交叉轴(侧轴)对齐方式：align-items:
使用代码写出一个三角形？ div{ width:0px; height:0px; border-width:10px; border-style:solid; border-color:red transparent transparent transparent; }
写出倾斜，旋转，平移，缩放的写法？ transform:skew(7deg); transform:rotate(7deg); transform:translate(10px); transform:scale(2,2);
写出使样式可以发生过渡的属性和属性值？ transition:
写出em，rem，vw的含义？ 1em = 1个父元素的字体大小 1rem=1个根元素的字体大小 1vw=视口宽度的1%
写出解决高度塌陷的方案？
父元素加overflow：hidden
加空标签，清除浮动
父元素加类名，加.clearfix::after{}
写出使用transform来使元素居中的代码？ .zi{ width:100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
visibility：hidden和display：none 的区别？ visibility:hidden; 消失占位置 display:none;消失不占位置
给元素加一个自定义动画的条件？先定义动画 @keyframes 动画名称 {

} 再使用动画

div{ animation:动画名称过渡时间过渡函数类型延迟时间播放次数 }

设置样式的三种方案，优先级行内样式>内部样式>外链样式
flex是哪几个属性的复合? border是哪几个属性的复合？ background是哪几个属性的复合？ list-style是哪几个属性的复合？ font是哪几个属性的复合？

font-style font-weight font-size/line-height font-family 29.对于多列布局中设置列数的属性？ column-count 属性列与列之间间距的属性？ column-gap 列与列之间边框的样式的属性？ column-rules
对于图片间隙的解决方案？ img{ display:block; }

第二阶段

一.Java script

一.js的组成:
ECMAScript:制定语法规范
DOM:页面文档对象类型(操作html元素的)
BOM:浏览器对象类型



二.基本语句
//在页面中写入
 document.write('')

// 在控制台打印
 console.log('二阶段了.要好好学了')

// 弹出框
alert('学习快乐')

// 页面输入框
 prompt('请输入...')
 
 **注意:输入的类型都是字符串

// 确认框
 confirm('亲,确定要删除吗')
 
 ==========================
 
  // alert与console换行是通过\n换行的,\t表示空格
  eg:
  confirm(' 白日依山尽\n黄河入海流\n欲穷千里目\n更上一层楼') 
   alert(' 白日依山尽\t黄河入海流\t欲穷千里目\t更上一层楼')
   
   =====================
   
   document.write('')换行是通过br标签换行的
  eg:
    document.write('<h2>登鹳雀楼</h2>')
    document.write('<p> 白日依山尽</p>')
    document.write('<p>黄河入海流</P>')
    document.write('<p>欲穷千里目</p>')
    document.write('<p>更上一层楼</p>')
    
    
三.js能干什么?
      js做服务器
       轮播图
       选项卡
       小游戏

       
       
四.js的引入方式:
行内式:
	<input type="button" value="按钮" οnclick="alert('Hello World')" />(一般不推荐)
外链式:
	<script src=".js">
	// 这里的js代码不起效果，所以如果想在本html写代码，在写	一个script标签
	</script>

内嵌式 :
<script>
    alert('哈哈')
</script>

五.js的注释

 单行注释://
 多行注释:
    /*
    var age = 18;
    var name = 'zs';
    console.log(name, age);
    */

二.变量

1.变量:是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

变量:存储的数据会发生变化;

2.为什么要使用变量
使用变量可以方便的获取或者修改内存中的数据

3.声明变量:声明一个变量，系统会自动分配空间
      var age;
 变量的赋值:
     var age;
     age = 18;
     
4.定义变量:定义变量包含两部分:声明和赋值
    定义一个变量并赋值
          var a = 15 ;
    定义多个变量并赋值
       var x = 14,y = 15, z = 30;

    // 第一种方式：
    var a = 10;//定义变量a的同时，将10赋值给a
    console.log(a); // 控制台输出a变量
    alert(a); //弹出框打印a变量

    // 第二种：
    // 用var声明一个变量
    var b; //a就是变量名
    b = 10;   // 将10赋值给a  (是一个动作)
    console.log(b);
    document.write(b)

    // 第三种（了解）
    var x,y,z; //先声明三个变量
    // 再分別賦值
    x = '小张'; 
    y = '小李';
    z = '小名';

    // 第四种（认识）
    // 定义的同时并赋值（不建议大家写）
    var a=10,b=20,c=30;
  
  
  
  
  
 
5.变量的命名规则和规范
规则 - 必须遵守的，不遵守会报错

      由字母、数字、下划线、$符号组成，不能以数字开头
      不能是关键字和保留字，例如：for、while。
	  区分大小写

规范 - 建议遵守的，不遵守不会报错
		变量名必须有意义
		遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword



常量:可以直接输出的

数据类型

1.简单数据类型
Number、String、Boolean、Undefined、Null

数据类型:
    number:数值类型 080(八进制) 0x(十六进制) NaN（不是一个数字，但是是一个Number类型）
    String:字符串 '' ""里面写的都是字符串
    Boolean:布尔类型 true false
    undefined:未定义类型,声明了,没有赋值 eg: var a;
    null:空的,声明一个变量,后期将赋值成对象;(了解)
   
   
   
   
二.数据类型的转换:  
 1. 字符串转数字
    var x ='10';
  	console.log(typeof x);
  	
    console.log(Number(x));只能将纯数字的字符串转为数字类型
    
    console.log(parseFloat(x));转为整数 ,将数字开头的字符串转为小数类型
    
    console.log(parseInt(x));转为小数, 将数字开头的字符串转为整数类型
    
     NaN的出现:转换数字类型,数值类型转换不成功就是NaN
     
     
     
    
2.转换为布尔类型
   Boolean()可以将任何其他类型转换为布尔类型
    //!! 隐式转换(!取反 !!取反后取反)
    注意:0 null '' undefined NaN将这几个转换为false,其余都为ture
    console.log(Boolean(''));
    console.log(Boolean(0));
    console.log(Boolean(undefined));
    console.log(Boolean(null));
    console.log(Boolean(NaN));
    
    
 
3.转换成字符串类型
  ①变量.toString()
	eg:
        var num = 5;
        console.log(num.toString());
        
注意:是什么.toString() 把什么转换成字符串类型

 ② String(变量)

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null
		 console.log(String(y));//可以将任意类型转换为字符串


拼接字符串方式

num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

           
      
    typeof:检测数据类型
    isNaN:判断一个变量或常量是否为非数字,如果不是数字返回true,是数字返回false
    
    
    注意：输入框的内容都是字符串，需要转为数值类型
//    var num =  +prompt('请输入一个数字.....');// 键盘录入一个数字，存储到num中
   var num =  Number(prompt('请输入一个数字.....'));// 键盘录入一个数字，存储到num中
   
   
 注意:
   如果出现两个或者两个以上的typeof，结果肯定是string
   null的typeof的返回值是object

运算符

逻辑运算符

&&  与  两个操作数同时为true，结果为true，否则都是false

||  或  两个操作数有一个为true，结果为true，否则为false
!   非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==

------

==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，类型不相等
var result = 55 === 55; 	// true

赋值运算符

= += -= *= /= %=

--------

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-10-07 html.css3 第一阶段学习笔记

Htnl基本介绍html5是什么？网站建设步骤买域名租空间网站设计特定网站上传到空间中网站推广维护使用方法(```+空格+html）生成html再按回车出现html 文本框 #+空格 :一级标题##+空格：两级标题*+空格：列表标签单标签 <hr> 水平线属性：width:宽度 color：颜色 size：粗细<<...
复制链接

扫一扫