码迷，mamicode.com
首页 > 其他好文 > 详细

前端基础

时间：2019-06-07 23:00:36      阅读：159      评论：0      收藏：0      [点我收藏+]

标签：20px   add   重要   ble   node   hover   end   表达式   效果   

目录

11.1 html基础

浏览器 内核
IE trident
chrome blink
火狐 gecko
Safari webkit

PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

  • 总结：渲染引擎是兼容性问题出现的根本原因。
  • 首页：index.html(64,32). Index.htm(32位)

1. 创建html文件

  1. html全称HyperText Mackeup Language，翻译为

    超文本标记语言

    ，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。

    • 超文本：音频，视频，图片称为超文本。
    • 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

  2. 作用：HTML是负责描述文档语义的语言。

  3. 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。

2. 基本格式

  • webstrom：重量级html编辑器
  • stylesheet css文件
  • javascript file js文件
  • 文件名：全英文、命名规范
  • 标签也称为标记：双闭合标签、单闭合标签
# ctrl + / 注释
<!DOCTYPE html>                                 # html5的声明。随着版本的变化而变化
<html lang='en'>                  # 开始标记
  <head>
    <meta charset='utf-8'>      # 元信息, charset属性，名值对,配置网站信息
    <title>Title</title>                # 标题，搜索引擎首先查找title
    <link rel='stylesheet' href='index.css'>     # 链接css文件 
    <script src='index.js'></script>             # 连接js文件，弹出框 
  </head>

  <body>正文</body>
</html>
  • css样式定义
# 行内嵌css，style段独立
<style>
  body{
    backgroud-color:red;
  }
</style>
  • js弹出框
# js文件
var a='warning';
alert(a);

3. head标签(5)

  1. meta 基本网站元信息标签
  2. titile 网站的标题
  3. script 链接javascript文件：动态
  4. link 链接css文件：静态装饰
  5. style 直接把link文件写进html文件，内嵌颜色

4. body标签(7)

4.1 标题标签

# h1-h6
<h1>一级标题</h1>
<h2>二级标题</h2>
如果是h7，则认为是普通文本

4.2 段落标签

# 段落标记，&nbsp表示一个空格
<p>\&nbsp;\&nbsp;段落</p>

4.3 超链接

  1. href：链接的网址，默认有下划线，#top：锚点
  2. tartget：默认_self当前页面打开, 可以使用_blank，# 表示空连接
  3. sytle：行内样式，text-decoration:none取消下划线，color：指定字体颜色
  4. title：悬浮显示
<a  href='localhost' target='_self' style='text-decoration:none; color:red;' title='小圆圈'>哈哈哈</a>

<h6 id='#top'> <h6>
<a href='#top' target='_self' style='text-decoration:none; color:red;' title='小圆圈'>实现跳转</a>

4.4 img标签

  • src：路径、title：标题
  • class：类
  • style：每个标签都有的行内属性
  • alt：图片加载失败时显示的文本
  • width等比例缩放、height，改变图片大小
<img src='路径' alt='校花' width='200'>
  • 其他
换行标签<br>
分割线<hr>
特殊字符? &copy;
<u>下划线</u>
<strong>字体加粗</strong>
<em>斜体</em>
<i>斜体2</i>

4.5 列表标签

  • 有序列表
type表示顺序a，A，1，I，i，start='3'从3开始
<ol type="A" start="3">
        <li>echo</li>
        <li>dean</li>
        <li>henry</li>
</ol>
  • 无序列表
  • 000 白 111/222/777灰 FFF 黑
  • li独占一行
type还有circle，默认实体的circle
<ul type="square" >
  <li>python</li>
  <li>linux</li>
  <li>golong</li>
</ul>
  • 自定义列表(常用于网站底端)
<dl>
  <li>python</li>
  <li>linux</li>
  <li>golong</li>
</dl>

4.6 表格

  • border：边框，cellspacing：边框之间间隙，width：等比例缩放(或设置height)
<table border="1px" cellspacing="0" width="50px">
  <tr>
    <th>id</th>
    <th>name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>henry</td>
  </tr>
  <tr>
    <td>2</td>
    <td>echo</td>
  </tr>
</table>

4.7 表单

# <form action='域名:端口号' method='get/post'> </form>
# action默认self， method默认get
文本输入框/密码输入框/表单按钮
表单控件
# 请求的方式 get(明文，网址最大2k byte) / post(密码，密文提交使用post)
# 文本输入框
# get：明文不安全、网址栏显示且内容不能超过2k，key:value&key2:value
# post：安全，提交任意内容
<!--form表单-->
    <form action="提交服务器地址" method="post" enctype="multipart/form-data">
        <p id="username">
            <input type="text" name="username" value="">
        </p>
        <p>  
                <!--密文显示-->
            <input type="password" name="pwd" value="">
        </p>
        <!--单选，给每个name定一个相同的名字产生互斥效果-->
        <h3>单选</h3>
        <input type="radio" name="gender" checked> 男
        <input type="radio" name="gender"> 女
        <!--多选-->
        <h3>多选</h3>
        <p>
            <input type="checkbox" name="A" checked>A
            <input type="checkbox" name="B">B
            <input type="checkbox" name="C">C
        </p>
        <!--单选+多选-->
        <h3>单选+多选</h3>
        <p>
            <select name="hobby" id="" multiple>
            <option value="musics">音乐</option>
            <option value="reading"selected>阅读</option>
            <option value="movies">电影</option>
            </select>
        </p>
        <!--时间选择-->
        <h3>时间选择</h3>
        <input type="datetime-local">
        <!--多行文本-->
        <p><textarea name="" cols="30" rows="10"></textarea></p>
        <!--提交表单-->
        <h3>提交表单</h3>
        <p><input type="submit" value="登录"></p>

    </form>

Note(5)

  1. 空白折叠：换行和空格都成为一个空格
  2. 自动换行，每个标签都有style属性
  3. 标题独占一行
  4. % 表示空格

11.2 CSS基础

1. div标签

  • 盒子标签，divison：分割，把网页分割成不同的独立的逻辑区域
  • span：可以包裹文本，利用class，可以在head标签中定义文本格式
# 命名，id和class
<head>
  <style type='text/css'>
    #top{                 # id选择器
      height=40px,        # 盒子高
      line-height=40px,     # 行高
      background-color:#333
      text-align:center;  # 水平居中(left,right,center)
    }
    a{
      text-decoration:none;
      color:#b0b0b0;
      font-size=14
    }
    </style>
</head>

<body>
    <div id='top'>
    <div calss='top-l'>小米顶部</div>
    <a href='#'>小米商城</a>
    <span class='sep'>|</span>
    <a href='#'>loi</a>
    <span class='sep'>|</span>
    <a href='#'>MIUI</a>
    
    <div calss='shop'>shop</div>
    <div calss='user_login'></div>   # 从右往左
  </div>
  
  <div id='nav'>导航</div>
  <div id='bottom'>底部</div>
</body>
  • .sep：类选择器，作用：选中标签
  • div/span/table：选中所有的div/span的标签

2. lable标签

  • label值和input的id(唯一不重复)值一样可以点击，快速定位
  • for属性和表单控件的id属性关联
<form action=''>
  <label for='username'>用户名</label>
  <input type='text' id='username'>
  <label for='pwd'>用户名</label>
  <input type='text' id='pwd'>
</form>
<form actin='https://www.baidu.com/s'>
  <input type='text' name='wd'>
  <input type='submit' value='百度一下'>
</form>

2. css(层叠样式表)

  1. 行内样式
<div style='color:red;'>
    henry
</div>
<body>
  <div id='box' style='color:red;'>
    henry
  </div>
</body>
  1. 内嵌式
在head标签内部书写sytle
<style>
/*css代码/
</style>
<head>
  <style>
    #box{
      backgroud=greenyellow;
    }
  </style>
  <link href='css/index.css' rel='stylesheet'>
</head>

<body>
  <div id='box' style='color:red;'>
    henry
  </div>
</body>
  1. 外接式
<link href='css/index.css' rel='stylesheet'>
  • 三种引入的优先级：行内>内嵌=外接
  • 内嵌和外嵌要看顺序，在后面的会覆盖前面的

3. css选择器

3.1 基础选择器

  • id选择器，类选择器，标签选择器
    • #id，id是唯一
    • .xxx类可以重复，可设置多个
<style>
  /*类选择器*/
  .box{
    width=200px,
    height=200px,
    backgroud-color:yellow
  }
  /*类选择器*/
  .active{
    border-radius:200px;
    border-radius:4px;      /*圆角*/
  }
  /*id选择器*/
  #box{
    color=red;
  }
  /*标签择器*/
  div{
    border:1px solid #000;
  }
  a{
    text-decoration:none; 或
    text-decoration:underline;
  }
  
  input{
    border:none;    /*边框线*/
    outline:none;   /*外线*/
  }
  
  #box{
    /*内容的宽高*/
    width:200px;
    height:200px;
    backgroud:red;
     /*border到内容的距离*/
    padding:50px;
    /*表示上下为0，左右为10*/
    padding:0 10px;
    /*上、左右、下*/
    padding:0 10 20;
    padding-left/right/top/bottom
     /*外边距*/
    margin-lfet:30px;
    border:1px solid;
  }
</style>

<div class='box active' id='box'></div>
<div class='box'></div>
<div class='box'></div>

<form actin='https://www.baidu.com/s'>
  <input type='text' name='wd'>
  <input type='submit' value='百度一下'>
</form>
  • 盒模型
  • 外边距
  • 内填充padding

3.2 高级选择器

  • 后代选择器(256以内，一般不超过8层)、子代选择器(>)、组合选择器、交集选择器
<style>
  .box{
    width=200px;
    height=200px;
    background-color:yellow;
    /*显示行内*/
    display:inline;
  }
  a{
    width=100px;
    height=40px;
    backgroud-color:red;
    /*显示块*/
    display:block;
    /*left，right，center*/
    text-align:center;
    /*行高等于文本高，垂直居中*/
    line-height=40px;
    /*underline、overline、line-through(del标签)*/
    text-decoration:none;
    color:#333333;
  }
</style>
  • 块级标签：独占一行，可设置宽高
  • 行内标签：一行显示，不可设置宽高，尽量不要嵌套块
  • input / img是行内块，可以设置宽高 display inline-block;
  • body默认8px、p默认16px、ul默认有margin
  • 块级标签可以嵌套块级和行内标签
  • p标签不要嵌套div和p标签，可以嵌套a、img、表单控件
/*重制样式*/
<style>
  p,ul,ol,body{
        margin=0;
    padding=0;
    }
  
  input,textarea{
    boder:none;
    outline=0;
  }
</style>

3.3 层叠性和继承性

  • 继承
    1. css中某些属性有继承性：color、text-xxx、line-height、font-xxx
    2. 盒子属性没有继承
    3. p标签是一个透明色
    4. 行内1000>id100>类10>标签1
    5. 继承来的属性权重为0
  • 权重比较
    1. 数选择器的数量：id、类、标签，权重大的优先级高
    2. 选中标签的优先级永远大于继承来的属性权重
    3. 同是继承来的属性
      • 描述近的优先级高
      • 描述的一样近，回归到第1条
      • !important 一般用于调试
  • 四条线，基线、文本底线

[TOC]

11.3 CSS 浮动

内容回顾：

1.div和span标签在网页中的作用

div:将网站分割成独立的逻辑区域 division 分割

span: 小区域标签,在不影响文本正常显示的情况下，单独设置对应的样式

<style>
    span.active{
        font-weight:bold;
    }
</style>
<p>
    <span class='active'>央视网消息</span>（新闻联播）：北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体代表，代表党中央、国务院向大家表示热烈欢迎和衷心祝贺，向世界各地华侨华人致以诚挚问候。
</p>

2.css基础选择器和高级选择器有哪些？

选择器的作用：选中标签

基础选择器

  • id选择器 特定属性的元素（标签）
  • 类选择器 class = ‘active‘ .active 类是可以重复，并且可以设置多个
  • 标签选择器

高级选择器

  • 后代 子子孙孙
  • 子代 只包括儿子
  • 组合 html,body,div,p,ul....
  • 交集 span.active

3.盒子模型的属性有哪些？并说明属性的含义，画出盒子模型图

width:内容的宽度
height:内容的高度
border:边框
padding:内边距
margin: 外边距

技术图片

4.如何让文本垂直和水平居中？

<style>
    div{
        width:200px;
        height: 60px;
        background-color: red;
        text-align:center;
        line-height: 60px;
    }
</style>
<div>
 wusir
</div>

让行高等于盒模型的高度实现垂直居中

使用text-align:center；实现文本水平居中

5.如何清除a标签的下划线？

text-decoration: none;

none;无线
underline:下划线
overline:上划线
line-through:删除线

6.如何重置网页样式？

reset.css

html,body,p,ul,ol{
    margin: 0;
    padding: 0;
}
/*通配符选择器 */
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
input,textarea{
    border: none;
    outline: none;
}

7.如何清除input和textarea标签的默认边框和外线？

8.在css中哪些属性是可以继承下来的？

color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing

9.如何正确比较css中的权重？

技术图片

如果选中了标签
    数选择器的数量  id  class 标签 谁大优先级越高 如果一样大，后面优先级越大
    如果没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性
    都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），如果描述的一样近，继续数选择器的数量。
    !important 它设置当前属性的权重为无限大，大不过行内样式的优先级

10.块级标签和行内标签

块级标签

1.可以设置高度，如果不设置宽度，默认是父标签的100%的宽度
2.独占一行

p
div
ul
ol
li
h1~h6
table
tr
form

行内标签

1.不可以设置宽高
2.在一行内显示
a 
span
b
strong
em
i

行内块标签

1.可以设置宽高
2.在一行内显示

input
img

今日内容：

伪类选择器

对于a标签，如果想设置a标签的样式，要作用于a标签上，对于继承性来说，a标签不起作用的

“爱恨准则”

LoVe HAte

/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
    /*color: red;*/
}
/*a标签被访问时候设置的属性*/
a:visited{
    color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
    color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
    color: deepskyblue;
}

属性选择器

input[type='text']{
    background-color: red;
}
input[type='checkbox']{

}
input[type='submit']{

}

伪元素选择器

p::first-letter{
    color: red;
    font-size: 20px;
    font-weight: bold;
}
p::before{
    content:'@';
}
/*解决浮动布局常用的一种方法*/
p::after{
    /*通过伪元素添加的内容为行内元素*/
    content:'$';
}

常用格式化排版

1.字体属性

2.文本属性

参考：https://book.apeland.cn/details/351/

盒子模型

margin:在水平方向上不会出现问题，垂直方向上会出现塌陷问题

布局-浮动

先参考一下：https://book.apeland.cn/details/355/

明天再详细讲浮动

今日作业：

技术图片

11.4 CSS清除浮动+定位+BFC

默写+内容回顾：

1.伪类选择器

a:link{} 没有被访问过时a标签的样式
a:visited{} 访问过后的
a:hover{} 悬浮时
a:active{} 摁住的时候

2.如何在p标签的后面添加‘‘&‘内容？

<style>
    p::after{
        /*行内元素*/
        content:'&',
        color:red;
        font-size: 20px;
    }
</style>
<p>wusir</p>

3.设置网页字体使用哪个属性，备选字体如何写？

font-family:'宋体','楷体';

4.如何设置文字间距和英文单词间距？

文字间距:letter-spacing
英文单词间距:word-spacing

5.字体加粗使用哪个属性，它的取值有哪些？

font-weight:lighter| normal | bold |bolder| 100~900 字体加粗
font-style:italic;/*斜体*/

6.文本修饰用哪个属性，它的取值有哪些？

text-decoration:none| underline | overline | line-through

7.分别说明px，em,rem单位的意思

px: 绝对单位  固定不变的尺寸
em和rem :相对单位       -------> 和font-size有关
    em:相对于当前的盒子
    rem:相对于根元素（html）

8.如何设置首行缩进，一般使用什么单位？

em    首行缩进text-indent: 2em;

9.文本水平排列方式是哪个属性，它的取值有？

text-align:left | center | right | justify(仅限于英文，两端对齐)

10.如何让一个盒子水平居中？

盒子必须有宽度和高度，再设置margin: 0 auto;
让文本水平居中： text-align:center;
让文本垂直居中：line-height = height
文本垂直居中：vertical-align: middle;

11.margin在垂直方向上会出现什么现象？

外边距合并，“塌陷”
尽量避免出现塌陷问题，只要设置一个方向的margin

12.如果让两个盒子并排在一行上显示？

1.float浮动属性
2.设置盒子的显示方式 display:inline | inline-block;

13.简单阐述一下，浮动对盒子产生了什么现象？

1.脱离标准文档流，不在页面上占位置 “脱标”
2.文字环绕 设置浮动属性的初衷
3.“贴边” 现象： 给盒子设置了浮动，会找浮动盒子的边，如果找不到浮动盒子的边，会贴到父元素的边，如果找到了，就会贴到浮动盒子的边上
4.收缩效果

 有点像 一个块级元素转成行内块

今日内容：

浮动

布局方案

作用：实现元素并排

浮动的现象

  • 脱离了标准文档流，不在页面上占位置

  • 贴边现象

  • 收缩效果

    浮动的带来问题（撑不起父盒子的高度）

    清除浮动的方式

  • 给父元素添加固定高度 （不灵活，后期不易维护）
    • 应用：万年不变导航栏
  • 内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both;
问题：冗余
  • 伪元素清除法 推荐大家使用
.clearfix::after{
    content:'';
    display: block;
    clear: both;
    /*visibility: hidden;*/
    /*height: 0;*/
}
  • overflow:hidden; 常用

因为overflow:hidden;会形成BFC区域，形成BFC区域之后，内部有它的布局规则
计算BFC的高度时，浮动元素也参与计算
但是小心overflow：hidden它自己的本意

定位

position:static | relative | absolute | fixed;
         静态      相对        绝对        固定

相对定位 relative

特征：

  • 与标准文档流下的盒子没有任何区别
  • 留“坑”，【占着原来的位置】会影响页面布局
  • 不脱标，在页面上占位置

作用：

做“子绝父相”布局方案的参考

参考点：

以原来的盒子为参考点

绝对定位 absolute

参考点

脱标了，在页面上不占位置

如果单独设置一个盒子为绝对定位，
绝对定位：脱标
以top描述，它的参考点是以body的（0，0）为参考点
以bottom描述，它的参考点是以浏览器的左下角为参考点
子绝父相

子元素：绝对定位 以最近的父辈元素的左上角为参考点进行定位
设置相对定位【压盖，有坑，保留原来的位置】，不会脱标，不会有任何变化
特征
1.脱标
2.压盖
3.子绝父相

11.5 CSS 定位层级z-index

内容回顾+默写

1.浮动有哪些现象？

1.脱离标准文档刘
2.贴边
3.收缩
4.文字环绕

浮动带来问题：不去计算浮动元素的高度，导致撑不起父盒子的高度

2.清除浮动的方式？

1.给父盒子添加固定高度
2.内墙法：给最后一个浮动元素添加一个空的块级标签，设置该标签的属性为clear:both;
3.伪元素清除
 给父元素添加一个类
 .clearfix::after{
    content:'',
    display:block;
    clear:both
 }
4.overflow:hidden; BFC区域

3.overflow:hidden和overflow:scroll属性的作用？

overflow:hidden;超出部分隐藏
overflow:scroll;出现滚动条

清除浮动

4.定位有哪几种？

position: static | relative | absolute | fixed

5.相对定位的元素有哪些特征？它的参考点是谁？

1.给一个标准文档流下的盒子单纯的设置相对定位，与普通的盒子没有任何区别
2.top|bottom|left|right

参考点：以原来的位置为参考点
应用：1.微调元素 2.做“子绝父相”

6.绝对定位的元素由哪些特征？它的参考点？

现象：
    1.脱标
    2.压盖现象
参考点：
是否有定位（相对定位，绝对定位，固定定位）的祖先盒子进行定位，如果没有定位的祖先盒子，以body为参考点

重要： “子绝父相”

7.阐述一下，“子绝父相”布局方案的好处

8.引用效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <!--<link rel="stylesheet" href="css/index.css">-->
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            position: relative;
            transition: all .2s linear; # 动画特效
        }
        .box:hover{
             top: -2px;
             box-shadow: 0 0  20px red;   # 阴影部分
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

9.圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*border-radius: 50%;*/
            border-radius: 50px;  # 圆角
            border: 3px solid blue;
        }
         #box:hover{
             background-color: #000;
         }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

10.轮播图左右按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            color: #fff;
        }

        ul {
            list-style: none;
        }

        #box {
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            background-color: #000;
        }

        #box ul {
            /*overflow: hidden;*/
            padding: 12px 0 0 30px;
            /*width: 500px;*/
            height: 88px;
            /*background-color: red;*/
        }

        #box ul li {
            float: left;
            width: 60px;
            height: 58px;
            /*padding-top: 30px;*/
        }

        #box ul li.active {
            width: 100px;
            height: 88px;
            background-color: green;
            position: relative;
        }

        #box ul li.active .box {
            position: absolute;
            width: 234px;
            height: 600px;
            background-color: rgba(0, 0, 0, .5);
            top: 88px;
            left: -30px;
            z-index: 80;
        }

        .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }

        .swiper {
            width: 100%;
            height: 460px;

        }

        .container {
            width: 1226px;
            position: relative;
            margin: 0 auto;
        }

        .swiper span {
            display: inline-block;
            width: 41px;
            height: 69px;
            background: url("icon-slides.png") no-repeat 0 0;
            position: absolute;
            margin-top: -34px;
            top: 50%;
            cursor: pointer;
        }

        .swiper span.prev {
            background-position: -83px 0;
            left: 234px;
        }

        .swiper span.next {
            background-position: -124px 0;
            right: 0;
        }
        .swiper span.prev:hover{
            background-position: 0 0;
        }
         .swiper span.next:hover{
            background-position: -42px 0;
        }
    </style>
</head>
<body>
<div id="box">
    <ul class="clearfix">
        <li class="active">
            <div class="box"></div>
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<div class="swiper">
    <div class="container">
        <img src="xmad.jpg" alt="" width="1226">
        <span class="prev"></span>
        <span class="next"></span>
    </div>
</div>
</body>
</html>

要浮动一起浮动，有浮动清除浮动，浮动带来的好处：实现元素并排

今日内容

固定定位

1.脱标
2.固定不变
3.提高层级

参考点：
    以浏览器的左上角为参考点

z-index

只适用与定位的元素，z-index:auto;

z-index只应用在定位的元素，默认z-index:auto;
z-index取值为整数，数值越大，它的层级越高
如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。(与标签的结构有关系)
从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。

background背景

/*设置背景图*/
background-image: url("xiaohua.jpg");
background-repeat: no-repeat;
/*调整背景图的位置*/
background-position: -164px -106px;

border

border-radius 设置圆角或者圆

阴影

box-shadow: 水平距离 垂直距离 模糊程度 阴影颜色 inset

行内的水平和垂直居中

块的水平和垂直居中

链接：https://book.apeland.cn/details/355/#8.%E7%BD%91%E9%A1%B5%E4%B8%AD%E7%9A%84%E5%B8%B8%E7%94%A8%E9%97%AE%E9%A2%98

周末作业

1.脑图 主要

2.小米商城 主要

3.预习 ： https://book.apeland.cn/details/358/

11.6 JavaScript基础

预习

判断一个变量是不是undefined，用typeof函数，typeof函数主要是返回的是字符串，主要这么几种："number"、"string"、"boolean"、"object"、"function"、"undefined"

null==undefined   ======> true
null===undefined   ======> false

1. js的引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内js-->
<p id="" class="" style="" onclick="console.log(2);">mjj</p>
<!--内嵌-->
<script type="text/javascript">
    //js代码
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

2.递增和递减运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var a = 1; # 定义一个变量
    a ++;//a+=1;
    console.log(a);
    var a = 4;
    // 先让a的值赋值给c 再对a++
    var c = a ++;  # 先赋值，再加1，a+=1
    console.log(c);//4
    console.log(a);//5*/
    var c = ++a;  # 先a+=1， 再赋值
    console.log(c);//5
    console.log(a);//5
</script>
</body>
</html>

3.拼接字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var name = 'wusir', age = 28;
    var str = name + '今年是' + age + '岁了，快要结婚了，娶了个黑姑娘'; #字符串拼接1
    console.log(str);
    //    es6的模板字符串 ``   
    var str2 = `${name}今年是${age}岁了，快要结婚了，娶了个黑姑娘`;  #字符串拼接2
    console.log(str2);
</script>
</body>
</html>

4.数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr  = [1,'2','mjj'];

    //解释器 遇到var声明的变量 会把var声明的变量提升到全局作用域下
    var i;
    var c;
    for(i = 0;i < arr.length;i++){
        console.log(arr[i]);
    }
    function fn(){
        var d = 4;
    }

    // console.log(i,c);
</script>
</body>
</html>

5.流程控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var score = 100;
    if(score > 80){
       console.log('可以吃鸡了');
    }else if(){
        console.log('在家呆着');
    }else if{

    }else if{}
    var weather = prompt('请输入今天的天气');
    switch (weather) {                 # switch： 把输入的值和case的值对比
        case '晴天':
            console.log('可以去打篮球');
            break;
        case '下雨':
            console.log('可以睡觉');
            break;
        default:
            console.log('学习');
            break;
    }

    //    == ===
    var a = 2;
    var b = '2';
    console.log(a == b);//比较的是值
    console.log(a === b); //比较是值和数据类型
</script>
</body>
</html>

6.循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr = [8,9,0];
    //1.初始化循环变量  2.循环条件  3.更新循环变量
    for(var i = 0;i < arr.length; i++){
        console.log(arr[i]);
    }

//    1到100之间的数
//     while

    var a = 1;
    while(a <= 100){
        console.log(a);
        a+=1;
    }
</script>
</body>
</html>

7.函数

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

    function fn() {
        switch (arguments.length) {
            case 2:
                console.log('2个参数')
                break;
            case 3:
                console.log('3个参数')
                break;
            default:
                break;
        }
    }

    fn(2, 3);
    fn(2, 3, 4)

</script>
</body>
</html>

8.对象Object【python中字典】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.字面量创建方式
    var obj = {};
    obj.name = 'mjj';
    obj.fav = function(){
        //obj
        console.log(this);
    }
    obj.fav();
   //点语法 set 和get
    console.log(obj.name);

    //构造函数
    var obj2 = new Object();
    console.log(obj2);
    obj2.name = 'wusir';

    /*console.log(this);
    function  add(x,y) {
        console.log(this.name);
        console.log(x);
        console.log(y);
    }

    // console.dir(add);
    // add();
    // add.call(obj,1,2);
    add.apply(obj,[1,2]);

    (function () {
        console.log(this);
    })()*/


    class Person{
        constructor(name,age){
            //初始化
            this.name = name;
            this.age = age;
        }
        fav(){
            console.log(this.name);
        }
        showName(){

        }
    }
    var p = new Person('mjj',18);
    p.fav();
</script>
</body>
</html>

9.数组的常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //1,判断当前数组是否为数组，返回值是true,则证明是数组

        var num = 123;
        var arr = ['red','green','yellow'];
        console.log(Array.isArray(arr));
        console.log(arr.toString());//red,green,yellow
        console.log(num.toString());
        console.log(typeof num.toString());
        console.log(arr.join('^'));

        console.log(arr.push('purple')); //返回了数组的最新的长度
        console.log(arr);
        console.log(arr.pop());//返回删除的内容
        console.log(arr);

        //往数组的第一项上添加内容
        console.log(arr.unshift('gray','black'));
        console.log(arr);
        console.log(arr.shift());
        console.log(arr);

        var names = ['女神','wusir','太白'];
        // names.splice() //对数组进行添加，删除，替换操作
        //name.slice(1) //对数组进行分割


        // for(var i = 0; i < names.length; i++){
        //     names[i]
        // }
        names.forEach(function (index,item) {
            console.log(index);
            console.log(item);
        });
        function  fn(a,b) {
            //arguments.length 代指的实参的个数
            //arguments它不是一个数组，它被称为叫伪数组
            console.log(arguments);
            for(var i = 0; i < arguments.length; i++){
                console.log(arguments[i]);
            }
        }
        fn(2,3,4);
        console.log(fn.length);//形参的个数

        var  str = '            mjj          '


    </script>
</body>
</html>

10.日期对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var date = new Date();
    console.log(date);
    console.log(date.getDate());
    console.log(date.getMonth()+1);
    console.log(date.getFullYear());
    console.log(date.getDay());
    console.log(date.getHours());
    console.log(date.getMinutes());
    console.log(date.getSeconds());

    console.log(date.toLocaleString());
    var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
    console.log(weeks[date.getDay()]);
    var day = weeks[date.getDay()];
    document.write(`<a href="#">${day}</a>`);

    var a =  1 < 2 ? "yes": "no";
    console.log(a);

</script>
</body>
</html>

11.数字时钟案例

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

<h2 id="time"></h2>
<script>
    var timeObj = document.getElementById('time');
    console.log(time);

    function getNowTime() {
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var temp = "" + ((hour > 12) ? hour - 12 : hour);
        if (hour == 0) {
            temp = "12";
        }
        temp += ((minute < 10) ? ":0" : ":") + minute;
        temp += ((second < 10) ? ":0" : ":") + second;
        temp += (hour >= 12) ? " P.M." : " A.M.";
        timeObj.innerText = temp;
    }

    setInterval(getNowTime, 20)
</script>

</body>
</html>

12.window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var name = 'mjj';
    console.log(window);
    console.log(window.name);
</script>
</body>
</html>

13.math对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var obj = {name:'mjj'};
    function add() {
        console.log(this.name);
    }
    // add();
    // add.call(obj);
    // add.apply(obj,[]);

    //求最大值和最小值
    var values = [1,2,36,23,43,3,41];
    var max = Math.max.apply(null,values);
    console.log(max);

    var a = 1.49999999;
    console.log(Math.ceil(a));//天花板函数
    console.log(Math.floor(a))//地板函数
    console.log(Math.round(a))//四舍五入

//    随机数
    console.log(Math.random());

//    min~  max
    //0.113131313
    function random(min,max) {
       return min+Math.floor(Math.random()*(max-min))
    }

    console.log(random(100, 400));

//    rgb(237,100,10)


</script>
</body>
</html>

11.7 BOM 、DOM

bom对象 dom对象

内容回顾

ECMAScript基础语法

1.基本数据类型和引用数据类型

基本数据类型:number,string,boolean,undefined,null
引用数据类型:Array,Object,Function

2.条件判断和循环

switch(name){
    case 'xxx':
        break;
    case 'xxx':
        break;
    default:
        break;
}

for(var i = 0; i < 10; i ++){
    
}

三元运算
1 > 3 ? '真的' : '假的';

3.赋值运算符，逻辑运算符

&&  跟py的and
||   or
!    not

i++

==   比较的值的
===   比较的值和数据类型

4.字符串的常用方法

slice() 切片，有一个参数，从当前位置切到最后，两个参数，顾头不顾尾
substring()
substr() 如果有两个参数，第二个参数表示切字符串的个数

拼接字符串
concat() 返回新的字符串
+
es6的模板字符串
``  插入变量用${变量名}

//获取索引
indexOf()
lastIndexOf()

//获取字符
charAt()
//获取字符的ASCII码
charCodeAt()


//转大写
toUppercase()
//转小写
tolowercase()


typeof 校验当前变量的数据类型

trim() 清除左右的空格

5.数组的常用方法

toString()
join('*')
concat()  # 数组拼接

//栈方法 后进先出
push()  # 压栈
pop()   # 出栈

//堆方法 先进先出
unshift() 
shift()


splice(起始位置，删除的个数，添加的元素)； 对数组的增加，删除，替换
slice()
reverse()
sort()  #排序   【后面的元素，只和第一个元素对比】


//迭代方法
for
forEach() 仅能在数组对象中使用
在函数中arguments 这个对象是伪数组，不能使用这个方法，只能用for循环遍历

6.对象

var obj = {
      name:'mjj',
      age:18
}
obj['name']
obj['fav'] = function(){}
obj.name
obj.fav = function(){}


function fn(name){
    var obj = {};
    obj[name] = 'mjj';
    return obj;

}
fn('age')

//遍历对象
for(var key in obj){
    obj[key]
}

7.函数

1.创建方法
（1）普通函数
   function fn(){
       
   }
   fn();
(2)函数表达式
  var fn = function(){}
  
 (3) 自执行函数
 ;(function(){
    this指向 一定是指向window
 })()

全局作用域下，函数作用域，自执行函数都指向了window,函数作用域中this指向可以发生改变，可以使用call()或者apply()


var obj = {name：'mjj'};
function fn(){
    console.log(this.name);
}
fn();//是空值，因为函数内部this指向了window
fn.call(obj)//此时函数内部的this指向了obj


作用： 解决冗余性代码，为了封装


构造函数
new Object();
new Array();
new String();
new Number();


//使用构造函数来创建对象
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

//es6用class来创建对象
class Person{
    constructor(x,y){
        this.x = x;
        this.y = y
    }
    toString(){
        
    }
    
}
var p = new Person();

8.日期对象

var date = new Date();
date.getDate();
date.getMonth();
date.getDay();
date.getHours();
date.getMinutes();
date.getSeconds()

date.toLocaleString() 2018/08/21 21:30:23

9.Math数学对象

Math.ceil();向上取整 天花板函数
Math.floor();向下取整，地板函数
Math.round()；标准的四舍五入

随机数
Math.random(); 获取0到1之间的数

function random(min,max){
    return Math.floor(Math.random()*(max-min)) + min;
}

10.数值和字符串转换

1.数值转字符串
toString();
数字+空的字符串
2.字符串转数值
parseInt() 转整数
parseFloat() 转浮点型
Number()
var a = NaN   # not a number
isNaN(a)

Infinity 无限大的

今日内容

BOM

Browser Object Model 浏览器对象模型

【bom相关的api】

1.系统对话框方法

  • alert() 警告框
  • confirm() 确认框
  • prompt() 提交框

2.定时方法 ***

一次性任务

var timer = setTimeout(callback,2000);
clearTimeout(timer);

周期性循环

var timer = setInterval(callback,2000);  # 异步
//清除定时器 关闭
clearInterval(timer);

3.location对象的属性和方法

DOM

获取节点对象的方式

标签，div span p

document.getElementById();  #通过id获取元素
document.getElementsByTagName(); # 通过标签名获取与元素
document.getElementsByClassName(); # 通过类名获取与元素

对样式操作

样式操作

style（）

box.style.color
box.style.backgroundColor
box.style.width
....

对属性设置

setAttribute(name,value); # 设置属性
getAttribute(name);

事件

onclick()  # 点击时间
onmouseover()  #鼠标经过
onmouseout() #鼠标离开

11.8 jQuery基础一

默认+内容回顾

1.列出至少5个以上数组的常用方法，并说明它们的含义

2.列出数学对象Math常用的三个方法，并说明它们的含义

Math.ceil() 向上取整
Math.floor() 向下取整
Math.random() 随机数
Math.round() 四舍五入取整

3.函数对象中，可以通过哪两个方法改变函数内部this的指向？

function fn(){
            console.log(this);//this指向了window
        }
        fn.call(obj);
        fn.apply(obj)

4.javascript的基本数据类型和引用数据类型有哪些？

基本数据类型：number,string,boolean,undefined,null
引用数据类型：Array,Object,Function,Date

5.对DOM的理解

D:document 文档
O:object 对象
M:model 模型

6.获取节点对象的三种方式

 var b = document.getElementById()
      document.getElementsByTagName()
      var a = document.getElementsByClassName('active')
      b.setAttribute();

7.如何设置节点对象的样式，属性，类？

    设置样式
    obj.style
    设置属性
    obj.setAttribute(name,value);
    obj.getAttribute(name);
    obj.className
    obj.title

8.节点对象的创建，添加，删除分别用什么方法？

  var op =  document.createElement('p');
  box.appendChild(op);
  box.insertBefore(newNode,oldNode)
  box.removeChild(op);

9.列出你所知道的js中的事件？

  onclick
 onmouseover
 onmouseout
 onchange 聚焦
 onselect 选中
 onsubmit
 onload

10.定时方法有哪两个？写出对应的方法，并说明它们的含义

setTimeout(callback,毫秒) 一次性任务，延迟操作，异步
setInterval(callback,毫秒) 周期性循环任务  动画 css  transtion tranform

11.设置值的操作

innerText 只设置文本
innerHTML 即设置文本，又渲染标签
       
针对与表单控件
inputText.value = '123';
       
<input placeholder=“请输入密码”>

今日内容

1.jquery介绍

    jQuery是一个快速，小巧，功能丰富的JavaScript库。
    它通过易于使用的API在大量浏览器中运行，
    使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
    操作: 获取节点元素对象，属性操作，样式操作，类名，节点的创建，删除，添加，替换
    jquery核心：write less,do more
    1.1 jquery对象转换js对象
        $('button')[0]
    1.2 js对象转换jquery对象
        $(js对象)

2.jquery的选择器

        - 基础选择器
        - 高级选择器
        - 属性选择器
        - 基本过滤选择器

3.jq对象和js节点对象转换

$('.box')  jquery对象 伪数组

$('#box')[0]  jquery对象转js节点对象

4.基本选择器和高级选择器

- 基础选择器
#id       $("#box")
.class   $(".box")
element  $("div")

- 高级选择器
    后代选择器 $("div p") 选择p和p的子代的所有标签
    子代选择器 $("div>p") 和p平级的都选
    组合选择器 $("div,p") 
    交集选择器 $("div.box")

5.属性选择器

$('input[type=submit]')     属性选择器

<input type="submit" value='提交'>

6.过滤选择器和筛选方法

基本过滤选择器：

:eq() 选择一个 索引从0开始
:first 获取第一个
:last 获取最后一个
:odd  获取奇数
:even 获取偶数

过滤的方法：

.eq() 选择一个 索引从0开始
.children() 获取亲儿子
.find() 获取的后代
.parent() 获取父级对象
.siblings() 获取除它之外的兄弟元素

7.常用事件

8.样式操作

    通过调用.css()方法
    如果传入一个参数，看一下这个参数如果是一个字符串表示获取值，如果是对象，表示设置多少属性值，如果是两个参数，设置单个属性值

9.类操作

addClass()
removeClass()
toggleClass()

10.属性操作

attr(name,value);//设置属性
removeAttr(name);//删除属性

11.动画的方法

    - 普通动画
        show()
        hide()
        toggle()  切换【开关】
    - 卷帘门动画
        slideDown()
        slideUp()
        slideToggle() 卷帘门切换【开关】
    - 淡入淡出效果
        fadeIn()
        fadeOut()
        fadeToggle() 淡入淡出切换
    - 自定义动画
        .animate({params},speed,callback)  #callback回调函数

# 作用：执行一组CSS属性的自定义动画。
    第一个参数表示：要执行动画的CSS属性（必选）
    第二个参数表示：执行动画时长（可选）
    第三个参数表示：动画执行完后，立即执行的回调函数（可选）

11.9 jQuery 基础二

1.对属性的操作

attr（） #获取属性（id，class），设置属性（id，class）
removeAttr() #移除属性

2.文档的操作

3.事件

1)鼠标事件

<body>
   <div id="box">
      <div id="child"></div>
   </div>
   <input type="text">
   <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

   <script type="text/javascript">
      // mouseover 鼠标穿过父级元素和子元素都会调用方法
       $('#box').mouseover(function(){
         console.log('移入进来了');
         
         $('#child').slideDown(1000);
      })
      $('#box').mouseout(function(){
         console.log('移除了');
         
         $('#child').slideUp(1000);
      })
      
       $('#box').mouseenter(function(){
         console.log('进来了');
         
         $('#child').stop().slideDown(1000);
      })
      $('#box').mouseleave(function(){
         console.log('离开了');
         
         $('#child').stop().slideUp(1000);
      })
      
      $('#box').hover(function(){
         $('#child').stop().slideDown(1000);
      },function(){
         $('#child').stop().slideUp(1000);
      })
      //默认加载页面聚焦行为
      $('input[type=text]').focus();
      $('input[type=text]').focus(function(){
         //聚焦
         console.log('聚焦了');
      })
      $('input[type=text]').blur(function(){
         //聚焦
         console.log('失去焦点了');
      })

      
      $('input[type=text]').keydown(function(e){
         console.log(e.keyCode);
         switch (e.keyCode){
            case 8:
               $(this).val(' ')
               break;
            default:
               break;
         }  
      })
   </script>
</body>

表单提交事件

增   删   改   查

4.ajax（了解）

<script type="text/javascript">
            $(function(){
                // 获取首页的数据
                $.ajax({
                    url:'https://api.apeland.cn/api/banner/', # 接口
                    methods:'get',
                    success:function(res){
                        console.log(res);
                        if(res.code === 0){
                            var cover = res.data[0].cover;
                            var name = res.data[0].name;
                            console.log(cover);
                            $('#box').append(`<img src=${cover} alt=${name}>`)
                        }
                    },
                    error:function(err){
                        console.log(err);
                    }
                })
            })
        </script>

5.jQuery插件

jQuery插件库
https://www.jq22.com/

6.H5小拓展

H5新标签 在05年被广泛使用
#音频
<audio src="static/BEYOND%20-%20情人.mp3" controls=""></audio>
#画布  【做小游戏】
<canvas id="" width="" height=""></canvas>
#视频
<video src="static/速度与激情7_bd.mp4" controls=""></video>

前端基础

标签：20px   add   重要   ble   node   hover   end   表达式   效果   

原文地址：https://www.cnblogs.com/yx12138/p/10989148.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！