目录
11.1 html基础 1. 创建html文件 2. 基本格式 3. head标签(5) 4. body标签(7) 11.2 CSS基础 1. div标签 2. lable标签 2. css(层叠样式表) 3. css选择器 11.3 CSS 浮动 内容回顾： 1.div和span标签在网页中的作用 2.css基础选择器和高级选择器有哪些？ 3.盒子模型的属性有哪些？并说明属性的含义，画出盒子模型图 4.如何让文本垂直和水平居中？ 5.如何清除a标签的下划线？ 6.如何重置网页样式？ 7.如何清除input和textarea标签的默认边框和外线？ 8.在css中哪些属性是可以继承下来的？ 9.如何正确比较css中的权重？ 10.块级标签和行内标签 今日内容： 伪类选择器 属性选择器 @L_419_25@ 常用格式化排版 盒子模型 今日作业： 11.4 CSS清除浮动+定位+BFC 默写+内容回顾： 1.伪类选择器 2.如何在p标签的后面添加‘‘&‘内容？ 3.设置网页字体使用哪个属性，备选字体如何写？ 4.如何设置文字间距和英文单词间距？ 5.字体加粗使用哪个属性，它的取值有哪些？ 6.文本修饰用哪个属性，它的取值有哪些？ 7.分别说明px，em,rem单位的意思 8.如何设置首行缩进，一般使用什么单位？ 9.文本水平排列方式是哪个属性，它的取值有？ 10.如何让一个盒子水平居中？ 11.margin在垂直方向上会出现什么现象？ 12.如果让两个盒子并排在一行上显示？ 13.简单阐述一下，浮动对盒子产生了什么现象？ 今日内容： 浮动 定位 11.5 CSS 定位层级z-index 内容回顾+默写 1.浮动有哪些现象？ 2.清除浮动的方式？ 3.overflow:hidden和overflow:scroll属性的作用？ 4.定位有哪几种？ 5.相对定位的元素有哪些特征？它的参考点是谁？ 6.绝对定位的元素由哪些特征？它的参考点？ 7.阐述一下，“子绝父相”布局方案的好处 8.引用效果 9.圆角 10.轮播图左右按钮 今日内容 固定定位 z-index background背景 border 阴影 行内的水平和垂直居中 块的水平和垂直居中 周末作业 11.6 JavaScript基础 1. js的引入方式 2.递增和递减运算符 3.拼接字符串 4.数组 5.流程控制 6.循环 7.函数 8.对象Object【python中字典】 9.数组的常用方法 10.日期对象 11.数字时钟案例 12.window对象 13.math对象 11.7 BOM 、DOM 内容回顾 ECMAScript基础语法 今日内容 BOM DOM 11.8 jQuery基础一 默认+内容回顾 1.列出至少5个以上数组的常用方法，并说明它们的含义 2.列出数学对象Math常用的三个方法，并说明它们的含义 3.函数对象中，可以通过哪两个方法改变函数内部this的指向？ 4.javascript的基本数据类型和引用数据类型有哪些？ 5.对DOM的理解 6.获取节点对象的三种方式 7.如何设置节点对象的样式，属性，类？ 8.节点对象的创建，添加，删除分别用什么方法？ 9.列出你所知道的js中的事件？ 10.定时方法有哪两个？写出对应的方法，并说明它们的含义 11.设置值的 *** 作 今日内容 1.jquery介绍 2.jquery的选择器 3.jq对象和js节点对象转换 4.基本选择器和高级选择器 5.属性选择器 6.过滤选择器和筛选方法 7.常用事件 8.样式 *** 作 9.类 *** 作 10.属性 *** 作 11.动画的方法 11.9 jQuery 基础二 1.对属性的 *** 作 2.文档的 *** 作 3.事件 4.ajax（了解） 5.jQuery插件 6.H5小拓展 11.1 HTML基础| 浏览器 | 内核 |
|---|---|
| IE | trIDent |
| Chrome | blink |
| 火狐 | gecko |
| Safari | webkit |
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
总结：渲染引擎是兼容性问题出现的根本原因。 首页：index.HTML(64,32). Index.htm(32位) 1. 创建HTML文件HTML全称HyperText MackeuP Language，翻译为
超文本标记语言
，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。
超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。作用：HTML是负责描述文档语义的语言。
注意：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文件，d出框 </head> <body>正文</body></HTML>CSS样式定义
# 行内嵌CSS，style段独立<style> body{ backgroud-color:red; }</style> Jsd出框 # Js文件var a='warning';alert(a);3. head标签(5) Meta 基本网站元信息标签 titile 网站的标题 script 链接JavaScript文件：动态 link 链接CSS文件：静态装饰 style 直接把link文件写进HTML文件，内嵌颜色 4. body标签(7) 4.1 标题标签
# h1-h6<h1>一级标题</h1><h2>二级标题</h2>如果是h7，则认为是普通文本4.2 段落标签
# 段落标记， 表示一个空格<p>\ \ 段落</p>4.3 超链接 href：链接的网址，默认有下划线，#top：锚点 tartget：默认_self当前页面打开,可以使用_blank，# 表示空连接 sytle：行内样式，text-decoration:none取消下划线，color：指定字体颜色 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>特殊字符? ©<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) 空白折叠：换行和空格都成为一个空格 自动换行，每个标签都有style属性 标题独占一行 % 表示空格 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>h1标签只能有一个 https://www.baidu.com/s?wd=111
<form actin='https://www.baIDu.com/s'> <input type='text' name='wd'> <input type='submit' value='百度一下'></form>2. CSS(层叠样式表) 行内样式
<div style='color:red;'> henry</div>
<body> <div ID='Box' style='color:red;'> henry </div></body>内嵌式
在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> 外接式 <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 层叠性和继承性 继承 CSS中某些属性有继承性：color、text-xxx、line-height、Font-xxx 盒子属性没有继承 p标签是一个透明色 行内1000>ID100>类10>标签1 继承来的属性权重为0 权重比较 数选择器的数量：ID、类、标签，权重大的优先级高 选中标签的优先级永远大于继承来的属性权重 同是继承来的属性 描述近的优先级高 描述的一样近，回归到第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,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-spacing9.如何正确比较CSS中的权重？
如果选中了标签 数选择器的数量 ID class 标签 谁大优先级越高 如果一样大，后面优先级越大 如果没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性 都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），如果描述的一样近，继续数选择器的数量。 !important 它设置当前属性的权重为无限大，大不过行内样式的优先级10.块级标签和行内标签 块级标签
1.可以设置高度，如果不设置宽度，默认是父标签的100%的宽度2.独占一行pdivulollih1~h6tabletrform行内标签
1.不可以设置宽高2.在一行内显示a spanbstrongemi行内块标签
1.可以设置宽高2.在一行内显示inputimg今日内容： 伪类选择器
对于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-spacing5.字体加粗使用哪个属性，它的取值有哪些？
Font-weight:lighter| normal | bold |bolder| 100~900 字体加粗Font-style:italic;/*斜体*/6.文本修饰用哪个属性，它的取值有哪些？
text-decoration:none| underline | overline | line-through7.分别说明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在垂直方向上会出现什么现象？
外边距合并，“塌陷”尽量避免出现塌陷问题，只要设置一个方向的margin12.如果让两个盒子并排在一行上显示？
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 | fixed5.相对定位的元素有哪些特征？它的参考点是谁？
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 > </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,.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 > <li > <div ></div> </li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul></div><div > <div > <img src="xmad.jpg" alt="" wIDth="1226"> <span ></span> <span ></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 ======> truenull===undefined ======> false1. Js的引入方式
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title></head><body><!--行内Js--><p ID="" 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,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,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,Function2.条件判断和循环
switch(name){ case 'xxx': break; case 'xxx': break; default: break;}for(var i = 0; i < 10; i ++){ }三元运算1 > 3 ? '真的' : '假的'; 3.赋值运算符，逻辑运算符 && 跟py的and|| or! noti++== 比较的值的=== 比较的值和数据类型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() #排序 【后面的元素，只和第一个元素对比】//迭代方法forforEach() 仅能在数组对象中使用在函数中arguments 这个对象是伪数组，不能使用这个方法，只能用for循环遍历 6.对象 var obj = { name:'mjj',age:18}obj['name']obj['fav'] = function(){}obj.nameobj.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指向了windowfn.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:239.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 numberisNaN(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);@H_430_1301@3.location对象的属性和方法 DOM 获取节点对象的方式
标签，div span p
document.getElementByID(); #通过ID获取元素document.getElementsByTagname(); # 通过标签名获取与元素document.getElementsByClassname(); # 通过类名获取与元素对样式 *** 作
样式 *** 作
style（）
Box.style.colorBox.style.backgroundcolorBox.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,null引用数据类型：Array,Function,Date5.对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.Title8.节点对象的创建，添加，删除分别用什么方法？
var op = document.createElement('p'); Box.appendChild(op); Box.insertBefore(newNode,oldNode) Box.removeChild(op); 9.列出你所知道的Js中的事件？ onclick onmouSEOver onmouSEOut onchange 聚焦 onselect 选中 onsubmit onload10.定时方法有哪两个？写出对应的方法，并说明它们的含义
setTimeout(callback,毫秒) 一次性任务，延迟 *** 作，异步setInterval(callback,毫秒) 周期性循环任务 动画 CSS transtion tranform11.设置值的 *** 作
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 基础二 @H_80_1419@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>总结
以上是内存溢出为你收集整理的前端基础全部内容，希望文章能够帮你解决前端基础所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）