Web前端快速入门
HTML基础
网站建站的流程
- 注册域名(网址)
- 租用空间
- 网站建设
- 确定网站主题
- 搜集资料
- 规划网站
- 制作页面
- 网站推广
- 网站维护
网页的组成部分
- HTML
- 相当于毛坯房
- CSS
- 网页的装修队
- JavaScript
- 智能家居
HTML基础
-
网页
- 一个html文件就是一个网页
-
网站
- 把所有的网站资源文件整合到一起
-
html
- 超文本标记语言
- hyper text markup language
- xhtml
- Extensible
- 可扩展超文本标记语言
- Extensible
- 超文本标记语言
-
建立站点
- 规划网站的所有内容和代码，整合资源
-
html文档基本结构
-
<!doctype html>命名文档类型 <html>说明我们写的是标记语言 <head>文件头部(描述区) <meta charset=“utf-8”/>编码格式(gb2312/gbk中文编码) <title>html5</title>文件标题（显示在状态栏上的内容） </head> <body> 文件主体(所有要写的内容) </body> </html>
-
-
网页的调试工具
- PC端
- 浏览器
- 移动端
- Chrome浏览器
- PC端
-
html标记的语法
-
<!--说明： 1）写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素； 2）标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内 3）一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序； 4）空标记是指没有结束标签的标记，必须使用"/" 关闭 例如：<hr />--> -
双标记/常规标记
- <标记名 属性1名="属性1值" 属性2名="属性2值" ……></标记名>
-
单标记/空标记
- <标记名 属性1名="属性1值" />
-
-
标题字体
-
<h1></h1>- 文本标题共有6个，h1~h6
-
-
字体标记
-
<p></p>- 段落标记，标识一个段落
-
<i></i> <em></em>- 文本倾斜
-
<b></b> <strong></strong>- 字体加粗
-
<u></u>- 文本加下划线
-
-
换行
-
<br> -
<hr>- 换行并加分割线
-
-
转义字符
-  
- 不换行空格
- >
- 右尖括号
- <
- 左尖括号
-  
-
列表
-
ul
-
无序列表
- a,1,A,i,I,none
-
<ul> <li></li> ．．．． </ul>
-
-
ol
-
有序列表
-
<ol> <li></li> ．．．．．． </ol> -
有序列表的属性
-
<ol type="a"></ol>- a,1,A,i,I,none
-
<ol start="5"></ol>- 规定有序列表的开始点(列表内容总数不变)
-
-
-
dl
-
自定义列表
-
<dl> <dt>名词</dt> <dd>解释</dd> (definition description 定义描述) ．．．．．． </dl>
-
-
-
超链接和图像
-
<a href=“目标文件路径及全称或者连接地址” title=“提示文本”>链接文本或图片</a> <a href="#">空链接</a> -
target 属性参数定义了打开链接的目标窗口。 _blank -- 在新窗口中打开链接 页面（会保留原窗口） _self -- 在当前窗口打开链接页面，此为默认值
-
-
插入图片
-
<img src=“图片的路径” border=“边框" alt="图片替换文本" title="图片标题" width="" height="" /> -
HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的，图片标题
-
alt:当图片不显示的时候，提示的信息。用户体验较好
-
-
相对路径与绝对路径
- 与Python/Linux中的相对路径/绝对路径用法一致
- 当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名
-
常用元素
-
<div></div>- 没有具体含义，统称为块标签， 用来设置文档区域，是文档布局常用对象
-
<span> </span>-
文本结点标签,可以是某一小段文本，或是某一个字
-
<label></label>- 也可以实现
-
-
-
注释
- <!- -注释的内容- ->
- Ctrl+/
-
表格
-
<table> <tr> <th></th> </tr> <tr> <td></td> </tr> </table>- 一对th表示表头;一对tr表示一行;一对td表示一个单元格（一列）
- 注意，th与td都包含在tr中
-
表格属性
-
加在表格上的
-
<table border="1px" bordercolor="ff00ff" align="center" cellspacing="0">
-
-
<!-- 1）width="表格的宽度" 2）height="表格的高度" 3）border="表格的边框" 4）bordercolor="边框色" 5）cellspacing="单元格与单元格之间的间距" 6）cellpadding=“单元格与内容之间的距离" 7）align="表格水平对齐方式" 取值：left、right、center、 valign=“垂直对齐” top\bottom\middle 8）合并单元格属性：(td) 合并列： colspan=“所要合并的单元格的列数" 合并行： rowspan=“所要合并单元格的行数” --> -
颜色
- RGB
- red/green/blue
- bordercolor="#00ff00"
- red/green/blue
- RGBA
- alpha
- 透明度
- alpha
- RGB
-
-
-
表单
-
用来收集用户信息的
-
表单框
-
<form name=“表单名称” method=“post/get” action=“路径"> </form> -
name 属性规定表单的名称,name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据
- 将数据规划为字典结构
-
action 属性规定当提交表单时，向何处发送表单数据
-
-
表单控件
-
<input type=“” name=“” value=“” size=“” maxlength=" " />- 注意,一定要对控件加name,对同类控件加相同的name
-
<!-- input：标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。 ---------------------------------------------------------------- name：标识表单域的名称； type：标识表单控件的类型，大概有十几种； Value：定义表单域的默认值，其他属性根据type的不同而有所变化。 maxlength：控制最多输入的字符数， Size：控制框的宽度（以字符为单位） -->-
<!-- 1）文本框 <input type="text" value="默认值"/> 2)密码框 <input type="password" />-----用placeholder来进行提示 3)提交按钮 <input type="submit" value="按钮内容" /> 4)重置按钮 <input type="reset" value="按钮内容" /> 5)空按钮 <input type="button" value="按钮内容" /> 6)单选按钮组 <input type=“radio” name=“ral” />男 <input type=“radio” name=“ral” checked=“checked”/>(默认选中)女 7）复选框组 <input type="checkbox" name="" /> <input type="checkbox" name="" disabled="disabled" /> *disabled="disabled" (禁用) * checked="checked" (默认选中) -->
-
-
表单域下拉列表
-
<select > <option>下拉选项1</option> <option>下拉选项2</option> ………… </select>
-
-
表单域多行文本
-
<textarea name="" cols="" rows="" > </textarea> -
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符
-
-
post和get的区别
-
1. get是从服务器上获取数据，post是向服务器传送数据。 2. get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。 3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。 4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
-
-
-
CSS
CSS基础
-
css简介
- 层叠样式表(英文全称：Cascading Style Sheets)
-
基础语法
-
CSS语法由两部分组成：选择符、声明
-
选择符
-
div{ width:200px;height:200px;background:red; }
-
-
-
样式及其优先级
-
样式
-
内部样式
-
嵌套到页面中
-
<style type="text/css"> css语句 </style> -
使用style标记创建样式时，最好将该标记写在
<head></head>
-
-
外部样式
-
1-创建外部样式表
-
2-导入外部样式表
-
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" /> -
使用link元素导入外部样式表时，需将该元素写在文档头部
-
rel：用于定义文档关联，表示关联样式表
-
type：定义文档类型
-
-
-
内联样式
-
表行间样式，行内样式，嵌入式样式
-
<标签 style=“属性:属性值;属性:属性值;”></标签> -
<div style="width:100px;"></div>
-
-
样式优先级
- 内联样式表的优先级别最高
- 注意，如果定义了默认的内联样式，再用js通过改变class改变外部样式，会无法改变
- 内部样式表与外部样式表的优先级和书写的顺序有关，临近原则
- 内联样式表的优先级别最高
-
-
-
CSS选择符/选择器
-
选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素
-
元素选择符/类型选择符(element选择器)
- 元素名称
- 类型选择符是根据html语言中的标记来直接定义
-
id选择器
-
#id名
-
当我们使用id选择符时，应该为每个元素定义一个id属性
-
<div id="top"></div>
-
-
最大的用处：创建网页的外围结构
-
-
class选择器
-
.class名
-
当我们使用类选择符时，应先为每个元素定义一个类名称
-
<div class="top"></div>"
-
-
-
伪类选择器
-
理解伪类
- 伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式
- CSS伪类是用来添加一些选择器的特殊效果
- 伪类可以看作以选中元素为基准点，此元素的一些状态或属性
-
anchor伪类
-
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */- 注意顺序
- 对于a标签
- 也可以相对于其他标签
-
-
:before/:after
-
.fix_float:after{ content: ""; clear: both; display: block; } -
伪类用法：在原有的选择符基础上，后面加:伪类{}
-
-
-
群组选择器
- 选择符1，选择符2，选择符3......
- .top, #nav, p
-
包含/父子选择器
-
选择符1(父) 选择符2（子）
-
选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;
-
效果针对选择器2
-
div ul li{height:200px;} -
父子选择器中的父是用来定位目标子的
-
-
-
通配符
-
*{属性：属性值；}- 含义就是所有元素
-
常用来重置样式
-
-
选择符的权重
-
类型选择符的权重为0001
-
class选择符的权重为0010
-
id选择符的权重为0100
-
内联样式的权重为1000
-
!improtant
-
慎用
-
.top{ color: brown !important; }
-
-
-
-
核心属性和浮动
-
文本字体属性
-
- 用js操作时一定注意单位
- PPI是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多。PPI也叫图像的采样率（在图像中，每英寸所包含的像素数目）
- 字体大小
- em:表示元素字体高度，em值是根据父元素值(本节点没有设置字体大小)来确定
- font-size:12px;line-height:2em(行高为字号的两倍); 则行高为24px；
- 注意line-height的设定
- 字体的类型
- 当字体是中文字体时需加引号当英文字体中有空格时需加引号： 如“Times New Roman”；
- 文本颜色
- rgb
- #faf7fc
- color:#F00;
- 显示的不够细腻
- rgba
- rgb
- 字体加粗
- 字体倾斜
-
- oblique倾斜幅度更大
-
- 检索或设置对象中的文本的大小写
- 文本对齐方式
-
- 注意这里只是一行，如果设定竖直方向的居中对齐，往往需要设置行高与对应区域高度一致(line-height)
-
- 文本行高
- 文本修饰
- text-decoration:none/underline/overline/line-through/blink
- blink已不可用
- text-decoration:none/underline/overline/line-through/blink
- 首行缩进
- text-indent可以取负值； text-indent属性只对第一行起作用
- 字间距
-
- 控制英文字母或汉字的字距
-
- 词间距
- word-spacing:value;
- 控制英文单词词距
- word-spacing:value;
- 垂直对齐方式
- 当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐
- 此属性无法单独使用，需要支持的条件
- 让一个图片垂直居中的几个条件
- 必须给容器加一个text-align:center;
- 必须给当前元素转成行内块级元素（display:table-cell）再给当前元素加上vertical-align:middle;
-
-
CSS列表属性
- 定义列表符号样式
- 取值： disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号)；
- 使用图片作为列表符号
- 定义列表符号位置
- 取值： outside(外边) inside(里边)；
- 简写方法
- 可简写直接设置列表属性值； 常用属性： list-style:none;去掉列表样式；
- 定义列表符号样式
-
CSS边框属性
- border-style
- solid/dashed/dotted/double
- border-width：取值；
- border-color:取值；
- 可以单独设置某一个边框的属性
- border-style
-
css背景图属性
-
背景颜色
- 选择符
-
背景图片的设置
-
background-image:url(背景图片的路径及全称)；
-
背景图片的显示原则
-
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中; 2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素； 3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。 4）加载背景图必须有容器区域；
-
-
-
背景图片平铺属性
- 选择符
- no-repeat:不平铺,repeat：平铺 (默认),repeat-x：横向平铺
-
背景图片的位置
- 选择符
- 水平方向值：left/center/right或数值,垂直方向值： top/center/bottom或数值
- 水平向右 垂直向下移动 是正数值,水平向左 垂直向上移动 是负数值
-
背景缩放
- background-size
- 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏
- 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域
- background-size
-
各属性的缩写
- 选择符
-
网页上常用的图片格式
- jpg
- rgb，压缩性比较好，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )
- gif
- 多张图切换，有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像
- png
- 压缩性基本为0，有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，适用于颜色数量较少的图像
- webp
- Google推出的一种格式，支持透明，支持压缩
- jpg
-
-
CSS浮动属性
-
float:定义网页中其它文本如何环绕该元素显示
- left/right/none
-
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动框是脱离了普通的文档流
-
清除浮动
-
清除浮动是让当前元素远离浮动元素
-
clear:both清除浮动
-
父级添加overflow:hidden;缺点：父级这个盒子不能放其他元素
-
万能清除浮动
-
.clearfix:after{ content:""; display:block; height:0; clear:both; }
-
-
在末尾添加块状空元素，使用清除浮动属性
-
-
CSS盒模型
-
盒模型的概念
- 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
-
标准盒子模型
- 盒子宽度=margin left+border left+padding left+width+padding right+border right+margin right
-
padding属性
-
Padding是设定页面中一个元素内容到元素的边框之间的距离
- 补白
-
用法
-
1）用来调整内容(子元素)在容器（父元素）中的位置关系 2）用来调整子元素在父元素中的位置关系。 注：padding属性需要添加在父元素上
-
-
padding属性值不允许是负值
-
钟面原则
- 如果不指定，先取对面，对面缺失则取右面
-
padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域
-
-
margin外边界
-
边界：margin,在元素外边的空白区域，被称为边距
-
margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;
-
-
border属性
- border:5px solid #f00;
- 边框宽度 边框类型 边框颜色
-
怪异盒模型
- box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素
- 盒模型尺寸基准有两种
- 默认的content-box
- border-box/怪异盒
-
文本属性
-
容器溢出
-
visible:默认值，内容不会被修剪，会呈现在元素框之外； hidden：内容会被修剪，并且其余内容是不可见的； scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
-
文本溢出
-
-
clip：不显示省略号（...），而是简单的裁切; ellipsis：当对象内文本溢出时，显示省略标记
-
-
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义
-
1、容器宽度：width：value；（px、%，都可以） 2、强制文本在一行内显示:white-space：nowrap; 3、溢出内容为隐藏：overflow：hidden； 4、溢出文本显示省略号：text-overflow：ellipsis; -
#box{ width: 100px; height: 25px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-
必须是单行文本才能设置文本溢出
-
-
单位
- px
- em
- 相对单位
- 相对父级
- rem
- 相对单位
- 相对根级
-
js基础
js基础
-
js简介
- JavaScript是一种专为与网页交互而设计的脚本语言, 具有较强的逻辑性
- JavaScript 是一种具有面向对象能力的、解释型的程序设计语言
- 因为它不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等
-
特点
- 脚本语言
- 面向对象
- 简单
- JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求
- 动态性
- JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应
- 跨平台
-
组成
- 核心(ECMAScript)
- 是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的基础，他的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等
- 浏览器对象模型(BOM)
- Browse Object Model, 浏览器对象模型，提供与浏览器交互的方法和接口(API), 开发人员使用BOM可以控制浏览器显示页面以外的部分
- 文档对象模型(DOM)
- Document Object Model,文档对象模型，提供访问和操作网页HTML内容的方法和接口
- 增删改查/CRUD
- create
- retrieve
- update
- delete
- 核心(ECMAScript)
-
js程序基础
-
导入JavaScript标签:
<script type="text/javascript"></script>-
在标签中间写js程序
-
script标签可以出现多次, 且可以出现在html文件的任何地方, 建议写在body的末尾
-
同一个文件中Javascript和HTML代码, 它们的执行顺序都是自上而下，谁在前就谁先执行, 谁在后就后执行
-
1.避免因为加载（下载）脚本或脚本运行过慢，阻塞页面。 2.防止脚本运行时，页面未加载完成，造成script要操作的DOM节点没有加载完成而出错。 -
MIME
- 多用途互联网邮件扩展类型
- 表示数据是哪种类型
-
-
导入外部js文件
<script type="text/javascript" src="demo1.js" ></script>- 外部引入的js标签中如果写代码，不会被执行
-
alert(“hello world!”) ;- 弹窗
-
document.write(“hello world!”) ;- 文档输出
-
console.log(“hello world!”) ;- 控制台输出
-
var age=20；- 变量定义赋值
- JS是弱数据类型的语言，容错性较高, 在赋值的时候才确定数据类型
- 变量名可以是数字,字母,下划线_和美元符$组成
- 变量定义赋值
-
-
js数据类型
-
Boolean: 布尔类型
-
Number：数字（整数int，浮点数float）
-
由于保存浮点数值需要的内存空间比整型数值大两倍，因此 ECMAScript 会自动将可以 转换为整型的浮点数值转成为整型
-
NaN, 即非数值(Not a Number)是一个特殊的值
- isNaN()检测
-
var b = 0/0; //NaN var b = 12/0; //Infinity var b = 12/0 * 0 //NaN
-
-
String：字符串
- parseInt() 是把其它类型转换为整型
- parseFloat() 是把其它类型转换为浮点型（小数）
-
Array：数组
-
Object：对象
-
特殊数据类型 Null、Undefined
- Undefined 类型只有一个值，即特殊的 undefined。在使用 var 声明变量，但没有对其初始化时，这个变量的值就是 undefined
- Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回 object
-
-
js运算符
-
算数运算符
- +，-, *, /, %(取余数)
- 整除：Math.floor(5/3)
- 向下取整
- ceil向上取整
-
关系运算符
- <、>、<=、>=、、=、!=, !==
- ==比较的是值
- ===指的是恒等
- null == undefined
- true
- NaN == NaN
- false
- undefined == 0
- false
- null == 0
- false
-
逻辑运算符
- && 与(且)、|| 或、! 非
-
赋值运算符
- =、+=、-=、*=、/=、%=
-
自增/自减
-
++a, a++, --a, a--
-
a++
-
先调用a，再a+1
-
var b = a ++ -
先把a赋值给b，a再自加1
-
-
++a
-
a先+1，再调用a
-
var b = ++a -
a先+1，再赋值给b
-
-
-
var b = '89'; b++; //90,数值字符自动转换成数值 -
var b= 'ab'; b++; //NaN,字符串包含非数值转成NaN -
var b = false; b++; //1,false转成数值0,累加就是1
-
-
循环语句
-
while
-
while(表达式) { 执行代码; }
-
-
do-while
-
do…while 循环和 while 循环相似，不同的是，do…while 循环至少会执行一次
-
do { //代码语句 }while(布尔表达式);
-
-
for
-
for (表达式1; 表达式2; 表达式3) { 执行代码; }-
for(var i=100; i<=999; i++){ //循环体 }
-
-
-
forEach
- forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
-
for-in
- 用的是索引，尽量不用
逻辑分支
-
三目运算符
-
b == true ? console.log("a是素数") : console.log("a不是素数")
-
-
程序的三大流程控制
-
顺序
-
分支/选择
-
if分支
-
if单分支
-
if(表达式){ 执行语句 }
-
-
if双分支
-
if(表达式){ 执行语句1 }else{ 执行语句2 }
-
-
if多分支
-
if(表达式){ 执行语句1 } else if(表达式2){ 执行语句2 } else{ 执行语句n }
-
-
switch分支
-
switch(表达式) { case 常量1:语句; break; case 常量2:语句; break; … case 常量n:语句; break; default:语句; break; }- 注意case后面跟的是常量
- 注意break
-
-
-
循环
-
-
字符串
-
属性
-
length
-
字符串的长度
-
var str = “how are you”; console.log(str.length);
-
-
-
console.log(str[0])- 获取字符串中对应下标的字符
-
str = str+” world!”;- 字符串连接
- 数字也可以和字符串直接连接
-
-
方法/函数
-
str.charAt(3);- 获取下标为3的字符
-
str.charCodeAt(3); -
String.fromCharCode(94);- Unicode编码转换成字符
-
str.concat();-
连接字符串
-
var str1 = “hello”; var str2 = str1.concat(“ world”);
-
-
str.indexOf(“abc”);-
查找字符串第一次出现的位置, 如果没找到则返回-1
-
var str = “abcdabcd”; var subStr = “bcd”; var index = str.indexOf(subStr);
-
-
str.lastIndexOf(“abc”);- 查找字符串最后一次出现的位置, 如果没找到则返回-1
-
str.search();-
var str = “Abcdabcd”; var index = str.search("abc");
-
-
str.match()-
正则
-
inputText.match(/\W+/)- g表示进行全局匹配，i表示匹配的时候忽略大小写
-
括号内没有引号
-
-
-
str.replace();-
替换字符串
-
var str = “how are Are are you!”; var newStr = str.replace(“are”, “old are”);- 这里的替换只能执行一次，不能够进行全局匹配，如果需要全局匹配，则应使用正则表达式： str.replace(/are/gi, "old are")
-
-
str.substring(start,end);-
截取字符串 范围是[start, end)
-
var str = “Hello world!”; console.log(str.substring(2,5));
-
-
str.split(separator, howmany);- 根据分隔符、拆分成数组
- separator(字符串或正则表达式)
- howmany(可以指定返回的数组的最大长度, 可以省略)
- 如果空字符串(“”)用作separator, 那么stringObject中的每个字符之间都会被分割
-
str.toLowerCase();- 把字符串转换成小写
-
str.toUpperCase();- 把字符串转换成大写
-
数组
-
定义数组
-
var arr = new Array();- 定义一个空数组
-
var arr = new Array(10);- 创建一个包含 10 个元素的数组，没有赋值
-
var arr2 = new Array(“芙蓉姐姐”,30);- 创建一个数组有两个元素
-
-
属性
- arr.length
- 数组的长度/数组元素的个数
- 数组的下标
- 下标就是索引，即元素的序号，从0开始，下标最大取值是：数组的长度(length) -1；
- arr.length
-
赋值
-
arr[0] = 20;
-
-
数组的使用
-
for in遍历
-
for(var i in arr){ document.write(arr[i]); }
-
-
数组中元素交换位置
-
var a = 1; var b = 2; var c =a; a = b; b = c; -
var a = 1; var b = 2; a = a + b; b = a - b; a = a - b; -
var a = 1; var b = 2; a = a ^ b; b = a ^ b; a = a ^ b;- 位运算
-
-
-
方法
-
push()
-
可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度
-
alert(box.push('盐城'));
-
-
pop()
-
从数组末尾移除最后一个元素，减少数组的 length 值，然后返回移除的元素
-
box.pop()
-
-
shift()
- 从数组前端移除一个元素
-
unshift()
- 从数组前端添加一个或多个元素
-
reverse()
- 逆向排序方法，返回排序后的数组
-
sort()
-
从小到大排序，返回排序后的数组
-
该方法对于既含有数值型数字又含有字符型数字的排序不起作用，需要给sort方法传递一个函数参数
-
function compare(value1, value2){ if(parseInt(value1)<=parseInt(value2)){ // 返回0或1，表示不交换值 return -1 }else{ // 返回1，表示交换值 return 1 } } var a = ["-100",-200,2,4,65,7,"7",3,"0",89,2]; a.sort(compare); console.log(a);
-
-
-
concat()
-
追加数据, 创建一个新数组, 不改变原数组
-
var box2 = box.concat('美队', '雷神');
-
-
slice()
-
不修改原数组, 将原数组中的指定区域数据提取出来
-
var box = [2, 3, 4, "绿巨人"]; var box2 = box.slice(1, 3);- 取的是下标在区域: [1,3)
-
类比字符串的substring方法
-
-
splice()
-
截取原数组中指定的数据, 会改变原数组
-
var a = [2,4,65,7,7,3,6,89]; // 参数2为0则为插入 a.splice(1,0,"e"); console.log(a); // 参数2不为0则为替换,表示替换多少个 a.splice(2,2,0); console.log(a); // 只有;两个参数则为删除,从参数1开始删除参数2个 a.splice(3,1); console.log(a);- 参数1表示索引
- 参数2表示替换数量
- 为0，则替换0个，即插入,不为0，则替换参数个
- 参数3表示引入的字符
- 为空则是用空字符替换，即删除
-
-
元素、定位、js对象及DOM
元素类型
- 分类
- 块状元素
- 内联元素
- 可变元素
- 块状元素特点
- 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
- 默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列
- 块状元素都可以定义自己的宽度和高度
- 块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
- 常见块状元素
- div/dl/form/h1-h6/hr/ol/p/ul
- 内联元素/行内元素特点
- 内联元素的表现形式是始终以行内逐个进行显示
- 内联元素没有自己的形状，不能定义它的宽和高，根据所包含的内容显示
- 内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示
- 常见内联元素
- a/br/i/em/lable/span/strong/textarea/select
- 行内块元素
- 元素的内容以块状显示，行内的其他元素显示在同一行
- img - 图片
- input - 输入框 display:inline-block
- 致命bug
- 会识别标签之间的空格
- 元素转变
- 需要根据上下文关系确定该元素是块元素或者内联元素，盒子模型可通过display属性来改变默认的显示类型
- display属性
- 属性值
- block/inline/inline-block/none
- 作用
- 该属性设置或检索对象元素应该生成的盒模型的类型
- display+
- block
- 转换为块状
- inline
- inline-block
- none
- block
- 属性值
定位
-
position定位属性
-
position
- 检索对象的定位方式
-
各属性值的作用
- static
- 默认值
- 只有此模式不支持 left，right， top， bottom
- relative
- 相对定位，相对自己原来的位置
- 通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方
- 未脱离文档流
- 飘出来的是影子
- absolute
- 绝对定位，坐标系需要手动指定
- 逐级向外查找
- 找到拥有定位的父级结束，如果一直没找到就是html
- 父级指的是有非默认定位属性的元素
- 脱离文档流
- fixed
- 绝对定位
- 相对于浏览器
- 悬停在固定位置，哪怕页面进行滚动
- 脱离文档流
- 使用定位后，就多支持了left，right，top，bottom
- static
-
坐标系
- 坐标系原点屏幕左上角
- 向右为x正轴，向下为y正轴
- 向屏幕外为z正轴
- 可以使用z-index设置z轴值
-
包含块
- 包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考
- 定义元素为包含块
- 给绝对定位元素的父元素添加声明position：relative；
-
定位元素层叠属性
- z-index : auto |number
- 检索或设置对象的层叠顺序
- auto：默认值。 number:无单位的整数值。可为负数
- 较大数值的对象会覆盖在较小数值的对象之上，值相同将依据它们在HTML文档中声明的顺序层叠
- z-index : auto |number
-
锚点链接
-
是网页制作中超级链接的一种，又叫命名锚记
-
命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍
-
<a href="#footer">去底部</a>- footer为目标标签id
-
-
滚动条
-
overflow 水平及垂直方向内容溢出时的设置
-
overflow-x 水平方向内容溢出时的设置
-
<div style="overflow-x:hidden">test</div>
-
-
overflow-y 垂直方向内容溢出时的设置
-
属性值
- visible
- 默认值，其中的内容无论是否超出范围都将被显示
- hidden
- 效果与visible相反。任何超出“width”和“height”的内容都会隐藏
- scroll
- 无论内容是否超越范围，都将显示滚动条
- auto
- 当内容超出范围时，显示滚动条，否则不显示
- visible
-
-
对象和日期
-
对象
-
什么是对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例；JavaScript没有类
- 对象本质上就是一个字典结构
- 统称为Object
- 对象本质上就是一个字典结构
-
创建对象
-
var box = new Object(); //new方式 box.name =‘张三’; -
使用字面量方式创建Object
-
var box = { //字面量方式 name :‘张三', //创建属性字段,最后加逗号 age : 18 }; -
属性字段也可以加“”
-
类似于直接创建一个字典
-
-
var box={}; //字面量方式声明空的对象 box.name='张三'; //点符号给属性赋值 box.age= 18; -
输出方式
-
alert(box.age); //点表示法输出 -
alert(box['age']); //中括号表示法输出，注意引号
-
-
对象方法
-
var box={ //对象中添加方法(函数)run run : function() { retrun “正在跑步..”; } } alert(box.run()); //调用对象中的方法 -
注意调用方法时要加括号
-
-
删除属性
-
delete box.name
-
-
-
-
日期对象Date
-
创建日期对象
-
var d = new Date();- new Date() 用当前日期和时间创建新的日期对象
-
var d = new Date("2015/08/22");- 创建日期对象并指定时间
-
-
日期对象格式化方法
-
alert(box.toDateString());- 星期几、月、日和年
-
alert(box.toTimeString());- 时、分、秒和时区
-
alert(box.toLocaleDateString());- 年、月、日
-
alert(box.toLocaleTimeString());- 时、分、秒
-
alert(box.toUTCString());- UTC 日期: 年,月,日,时,分,秒。
-
-
setDate/getDate
-
getDate
- 以数字（1-31）返回日期的日
-
setDate
-
设置日期对象的日（1-31）
-
d.setDate(d1+1); console.log(d)；- 设置完成后，查看的是日期对象
-
-
其他
-
/* getDay() set / getMonth() set / getFullYear() set / getHours() set / getMinutes() set / getSeconds() set / getMilliseconds() set / getTime() getTimezoneOffset() */- 月份是从0-11，所以取得的值要加1才是当前月份,星期天是从0-6, 0代表星期天
-
-
-
-
定时器
-
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
- 注意定时器内不要加循环
-
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
-
var st = 0; var tim = setInterval(function(){ if (st <= 100){ console.log(st); st += Math.random() * 10; }else{ clearInterval(tim); } },1000) -
定时器在启动时会返回一个定时器的唯一标识(tim)
- 使用定时器的唯一标识进行定时器的中止
-
DOM初步
-
概念
- DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准
- 通过DOM，我们可以访问所有的HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素
-
DOM树
- 加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构，DOM 将这种树型结构称为节点组成的节点树
- 标签的包含关系
- 抽象成对象的结构
-
元素节点对象的获取方式
-
document.getElementById()- 获取特定ID元素的节点对象(返回一个对象)
-
getElementsByTagName()- 获取指定标签名的节点列表(返回一个数组)
- 需要遍历
- 获取指定标签名的节点列表(返回一个数组)
-
getElementsByName()- 获取相同name属性值的节点列表(返回一个数组)
- 需要遍历
- 获取相同name属性值的节点列表(返回一个数组)
-
getElementsByClassName()- 获取相同class值的节点列表(返回一个数组)
- 需要遍历
- 获取相同class值的节点列表(返回一个数组)
-
DOM进阶
DOM概念
- Document Object Model
- 文档对象模型
- DOM 是 W3C（万维网联盟）的标准
- DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式
- D
- 可以理解为整个Web加载的网页文档
- O
- 可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是 document 对象
- M
- 可以理解为网页文档的树型结构
- DOM树
- 加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构称为节点组成的节点树
元素节点
-
元素节点的获取方式
- getElementById()
- 获取特定ID元素的节点对象(返回一个对象)
- getElementsByTagName()
- 获取指定标签名的节点列表(返回一个数组)
- getElementsByName()
- 获取相同name属性值的节点列表(返回一个数组)
- getElementsByClassName()
- 获取相同class值的节点列表(返回一个数组)
- getElementById()
-
getElementById()
-
var box = document.getElementById('box'); -
如果id值存在, 但是返回null，则是执行顺序的问题
-
把
<script>标签(JS代码)移到html结构后面 -
使用onload事件来处理， onload事件会在html加载完毕后再调用
-
window.onload=function() { document.getElementById('box'); //id具有唯一性 };
-
-
-
-
元素节点的属性
-
tagName
- 元素节点对象所指向的标签名称
-
id
- 元素节点的id属性值
-
innerHTML
- 元素节点中的内容
-
innerText
-
className
- 元素节点的class属性值
-
style
-
css内联样式对象
-
box.style.width = start * 5 + "px"
-
-
-
title
- 元素节点的title属性值
-
-
获取子元素节点
-
利用document
-
document.getElementsByTagName(); -
document.getElementByName();
-
-
通过父元素节点
-
<div id="box"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> </div> <img id="showImg" src="images/4.jpg" /> -
var oBox = document.getElementById("box"); var aImg = oBox.getElementsByTagName("img");
-
-
-
DOM节点间关系的相关属性
-
parentNode
-
返回该节点的父节点
-
console.log(box.parentNode.nodeName);
-
-
-
previousSibling
- 返回该节点的前一个同级节点
- 空白区域也算
-
previousElementSibling
- 返回该节点的前一个同级节点
- 忽略空白区域
-
nextSibling
- 返回该节点的后一个同级节点
-
nextElementSibling
- 返回该节点的后一个同级节点
- 忽略空白区域
-
-
DOM节点操作
-
createElement();
-
创建一个元素节点
-
var newEle = document.createElement(‘div’);
-
-
-
appendChild();
-
添加一个新子节点到节点的末尾
-
box.appendChild(pNode); -
通过父节点调用
-
-
-
createTextNode();
-
创建一个文本节点
-
var textNode = document.createTextNode(‘段落’); -
段落是文本节点的内容
-
-
-
insertBefore();
-
将新节点插入到某节点前面
-
box.parentNode.insertBefore(p, box); -
通过父节点调用, 在box之前插入一个新节点p;
-
-
-
replaceChild();
-
将新节点替换旧节点
-
box.parentNode.replaceChild(p, div); -
通过父节点调用, 新节点p替换了旧节点div
-
-
-
cloneNode();
-
复制节点
-
var newNode = box.firstChild.cloneNode(true);- 这里box是父节点
-
通过父节点调用，获取第一个子节点, true表示复制标签和内容 , false表示只复制标签
-
-
-
removeChild();
-
移除节点
-
box.parentNode.removeChild(box); -
通过父节点调用, 来删除指定子节点
-
-
-
事件初步
基本概念
- JS中的事件
- 用户在页面上操作, 然后我们要调用函数来处理
- 事件触发
- 用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等), 就是事件触发
事件模式
-
内联模式
-
直接在HTML标签中添加事件
-
这种模型是最传统简单的一种处理事件的方法。但是这种模式中事件和HTML是混写的, 并没有将JS与HTML分离, 当代码量多了以后,对后期代码维护和扩展很不利
-
<input type="button"value="按钮" onclick="btnClick();" /> -
注意: 内联模式调用的函数不能放到window.onload里面, 否则会找不到该函数
-
-
脚本模式
-
脚本模式能将JS代码和HTML代码分离, 符合代码规范
-
使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件
-
方式一
-
var box = document.getElementById('box'); box.onclick = function() { console.log('Hello world!'); };- 通过匿名函数，可以直接触发对应的代码 (推荐)
-
-
方式二
-
box.onclick = func; //注意这里不能写成func() function func() { console.log('Hello world!'); };- 通过指定的函数名赋值的方式 来执行函数
-
-
事件的组成
-
触发事件的元素节点对象
-
事件处理函数
- 所有的事件处理函数都会都有两个部分组成，on+事件类型
- 事件处理函数一般都是小写字母
-
事件执行函数
-
document.onclick = function(){ console.log('单击了文档页面的某一个地方'); };- document : 是触发事件的对象, 表示触发事件的元素所在区域
- onclick : 表示一个事件处理函数(on+事件类型click)
- function(){} : 匿名函数是被执行的函数, 用于触发事件后执行
-
事件的分类
-
鼠标事件
-
onclick
-
当单击鼠标按钮并在松开时触发
-
X.onclick = function() { console.log('单击了鼠标'); };
-
-
-
ondblclick
- 当双击鼠标按钮时触发
-
onmousedown
- 当按下了鼠标还未松开时触发
-
onmouseup
- 释放鼠标按钮时触发
-
onmouseover
- 当鼠标移入某个元素的那一刻触发
- 只在移入本元素时调用一次
- 当鼠标移入某个元素的那一刻触发
-
onmouseenter
- 当鼠标移入某个元素的那一刻触发
- 移入内部元素都会进行触发
- 当鼠标移入某个元素的那一刻触发
-
onmouseout
- 当鼠标刚移出某个元素的那一刻触发
- 移入内部元素也算是一种移出
- 当鼠标刚移出某个元素的那一刻触发
-
onmouseleave
- 当鼠标刚移出某个元素的那一刻触发
- 只在移出本元素时触发一次
- 当鼠标刚移出某个元素的那一刻触发
-
onmousemove
- 当鼠标指针在某个元素上移动时触发
-
-
键盘事件
-
键盘事件，在键盘上按下键时触发的事件
- 一般由window对象或者document对象调用
-
onkeydown
-
当用户按下键盘上某个键触发，如果按住不放，会重复触发
-
window.onkeydown = function() { console.log(按下了键盘上的某个键); };
-
-
onkeypress
- 当用户按下键盘上的字符键触发，如果按住不放，会重复触发
-
onkeyup
- 当用户释放键盘上的某个键触发
-
-
HTML事件
-
onload
-
当页面完全加载后触发
-
window.onload = function() { console.log('页面已经加载完毕'); };
-
-
onunload
- 当页面完全卸载后触发
-
onselect
- 当用户选择文本框(input 或 textarea)中的内容触发
-
onchange
- 当文本框(input 或 textarea)内容改变且失去焦点后触发
-
onfocus
- 当页面或者元素获得焦点时触发
-
onblur
- 当页面或元素失去焦点时触发
-
onscroll
- 当用户滚动带滚动条的元素时触发
-
-
循环事件中的下标
-
在JS事件中, this表示触发事件的元素节点对象
-
var box = document.getElementById('box'); box.onclick = function() { console.log(this.nodeName); //this表示box对象 };
-
-
通过for循环添加事件, 使用this
-
var aInput = document.getElementsByTagName('input'); for (var i=0; i<aInput.length; i++) { aInput[i].index = i; aInput[i].onclick = function() { console.log(this.index); }; }- 用index存储下标
-
-
事件对象
-
事件对象(event对象)
-
event对象是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数
-
var container = document.getElementById("container"); container.onclick = function(event){ console.log(event); }
-
-
事件对象的属性
-
button
- 鼠标按下了哪个键
- 0左键
- 1鼠标滚轮键(一般)
- 2右键(一般)
-
坐标
- clientX: 浏览器可视区域的x坐标
- clientY: 浏览器可视区域的y坐标
- pageX: 浏览器内容区域的x坐标
- pageY: 浏览器内容区域的y坐标
- screenX: 显示器屏幕的x坐标
- screenY: 显示器屏幕的y坐标
- offsetX: 鼠标坐标到元素的左侧的距离
- offsetY: 鼠标坐标到元素的顶部的距离
-
键盘事件的组合键
- shiftKey
- 判断是否按下了Shift键
- ctrlKey
- 判断是否按下了Ctrl键
- altKey
- 判断是否按下了Alt键
- shiftKey
-
键码
-
所有按键(包括功能键control, alt,shift, tab, 方向键等, 不包括亮度,音量...的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应
-
对数字字母字符集，keyCode属性的值与 ASCII 码中对应
-
document.onkeydown = function(event) { console.log(event.keyCode); //按任意键，得到相应的 keyCode }; -
对于onkeydown而言，大写字母或小写的编码相同, 都为大写字母
-
-
字符编码: charCode属性
-
Firefox, Chrome和Safari的event对象支持charCode属性, 只有按下字符键并且使用keypress事件时才会得到charCode, 这个charCode的值和UniCode码对应
-
charCode的字母区分大小写. ( 字符键: 数字, 字母(区分大小写), 字符, 空格, 回车 )
-
用了keypress后，keyCode也区分大小写
-
document.onkeypress = function(event) { console.log(event.charCode); } -
可以使用 String.fromCharCode()将 Unicode 编码转换成实际的字符
-
-
-
阻止事件冒泡
-
事件流
- 事件流描述的是从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而是层叠在你点击范围的所有元素都会触发事件
- 事件流包括两种模式：冒泡和捕获
-
事件冒泡
- 事件冒泡是从里往外逐个触发. 事件捕获, 是从外往里逐个触发. 现代的浏览器默认情况下都是事件冒泡的模式
-
阻止事件冒泡的方法
- 一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡
- evt.stopPropagation();
- 停止传播
-
例
-
var first = document.getElementById("first"); var second = document.getElementById("second"); var third = document.getElementById("third"); first.onclick = function(event){ console.log(1); } second.onclick = function(event){ console.log(2); // event.stopPropagation(); } third.onclick = function(event){ console.log(3); event.stopPropagation(); }
-
事件进阶&CSS3
事件
-
阻止右键菜单默认行为
-
如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单
-
document.oncontextmenu = function(){ console.log("右键被按下"); return false;}
-
-
自定义右键菜单
-
右键菜单初始状态为隐藏
-
right_menu.style.display = "none";
-
-
右键菜单的位置跟随鼠标移动的位置
- onmousemove
-
右键后，右键菜单状态为可见
-
right_menu.style.display = "block";
-
-
-
-
获取生效的style样式
-
style=window.getComputedStyle(element, null)- 传入的两个参数，元素和伪类
- 第二个参数伪类是非必传的，当不需要查询伪类时，可以忽略，或者传入null
- 获取计算后的属性
-
与HTMLElement.style的区别
- HTMLElement.style获取的是内联样式，即写在元素style上的属性
- 可以通过Window.getComputedStyle()去获取样式，使用HTMLElement.style去修改样式
-
-
拖拽
- 实现拖拽相关的三大事件
- onmousedown
- onmousemove
- onmouseup
- 实现拖拽的思路
- 给目标元素添加onmousedown事件(鼠标按下事件)
- 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)
- 在onmousedown事件(鼠标按下事件)发生以后，给document再添加onmouseup事件(鼠标松开事件)，且在onmouseup事件中，取消document的onmousemove事件
- 实现拖拽相关的三大事件
-
事件监听器
-
事件监听器, 是JS事件中的一种事件触发机制, 我们可以通过添加事件监听器的方式给元素添加事件及执行函数
-
添加事件监听器
-
box.addEventListener(“click”, func, false) -
第三个参数(false/true) : 是否使用捕捉(反向冒泡)，默认false，为冒泡
-
container.addEventListener("click",function(){ console.log("container被点击"); },true);
-
-
移除事件监听器
-
box.removeEventListener(“click”, func)- 这里只会删除使用box.addEventListener()方法添加的事件监听器
-
-
-
offsetTop和offsetLeft
- offsetTop
- 自身上外边框到定位父级的上内边框的距离
- offsetLeft
- 自身左外边框到定位父级的左内边框的距离
- offsetTop
HTML5基础
-
HTML5发展史
- HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG（ 网页超文本应用技术工作小组）提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队
- 2013年5月6日， HTML 5.1正式草案公布
-
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
- 不允许写结束标记的元素
-
-
video和audio的应用
-
video元素定义视频
-
<video src="movie.ogg" controls="controls">Video元素</video>
-
-
audio元素定义音频
-
<audio src="someaduio.wav">Audio元素</audio>
-
-
属性
-
controls
- 如果出现该属性，则向用户显示控件，比如播放按钮
-
autoplay
- 如果出现该属性，则视频在就绪后马上播放
-
loop属性
- 重复播放属性
-
muted属性
- 静音属性
-
poster属性
- 视频的海报图片，直到用户点击播放按钮
-
<source>标签-
为媒介元素（比如
<video>和<audio>）定义媒介资源，允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择 -
<video controls> <source src="../mv/movie.ogg" type="video/ogg"> <source src="../mv/web.mp4" type="video/mp4"></video>
-
-
-
-
HTML5智能表单
- Type=“email” 限制用户必须输入email类型
- 它不检查email地址是否存在
- 具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址
- Type=“url” 限制用户必须输入url类型
- Type=“range” 产生一个滑动条表单
- 它具有min属性与max属性，及step属性
- Type=“search” 产生一个搜索意义的表单
- Type=“color” 生成一个颜色选择的表单
- Type=“time” 限制用户必须输入时间类型
- Type=“month” 限制用户必须输入月类型
- Type=“week” 限制用户必须输入周类型
- Type=“datetime-local” 选取本地时间
- Number类型
- 专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性
- Type=“email” 限制用户必须输入email类型
CSS3的选择器及属性
-
CSS3的优势及概念
- CSS3语言开发是朝着模块化发展的
- CSS3将完全向后兼容
- CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果，而且可以很简单的设计出现在的设计效果
-
渐进增强和优雅降级
- 渐进增强
- 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级
- 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
- 渐进增强
-
CSS3选择器
-
以title属性为例：
-
E[attr]
-
只使用属性名，但没有确定任何属性值
-
li[title]{background:red;}
-
-
E[attr="value"]
-
指定属性名，并指定了该属性的属性值
-
li[class="first"]{background:green;}
-
-
E[attr~="value"]
-
指定属性名，并且包含有指定词汇，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，注意是词列表，以空格隔开
-
li[title~="ya"]{background:#ccc;}
-
-
E[attr^="value"]
-
指定了属性名，并且有属性值，属性值是以value开头的
-
li[title^="zhao"]{background:#fcc;}
-
-
E[attr$="value"]
-
指定了属性名，并且有属性值，而且属性值是以value结束的
-
li[title$="zhao"]{background:#faa;}
-
-
E[attr*="value"]
-
指定了属性名，并且有属性值，而且属值中包含了value，注意，这里属性值包含value即可
-
li[title*="hua"]{background:#dcc;}
-
-
E[attr|="value"]
-
指定了属性名，并且属性值是value或者以“value-”开头的值
-
li[lang|="en"]{font-weight: bold;}- lang属性，设定语言
-
-
结构性伪类选择器
-
X:first-child 匹配父元素的第一个X元素
-
li:first-child{background:red;}
-
-
X:last-child匹配父元素中最后一个X元素
-
li:last-child{background:yellow;}
-
-
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
-
li:nth-child(2){background:#fcc;} -
li:nth-child(2n){background:#fcc;}- 匹配偶数索引子元素
-
li:nth-child(2n-){background:#fcc;}- 匹配奇数索引子元素
-
-
X:only-child匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配
-
p:only-child{background:red;}
-
-
X:nth-last-child(n)从最后一个开始算索引
-
li:nth-last-child(1){background:#caa;}
-
-
X:first-of-type匹配同级兄弟元素中的第一个X元素
-
p:first-of-type{background:#bcc;}
-
-
X:last-of-type匹配同级兄弟元素中的最后一个X元素
-
p:last-of-type{background:#bcc;}
-
-
X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
-
li:nth-of-type(2){background:#bbb;}
-
-
X:only-of-type匹配属于同类型中唯一兄弟元素的X
-
p:only-of-type{background:#ddd;}- 只有一个p才会匹配到
-
-
X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素
-
li:nth-last-of-type(1){background:red;}
-
-
:root匹配文档的根元素
-
在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
-
:root{background:#c2c2c2;}
-
-
-
X:empty匹配没有任何子元素（包括包含文本）的元素X
-
li:empty{background:red;width: 100px;height: 20px;} -
<li>剑圣，我的剑，就是你的剑 </li> <li></li> <li>盲僧，我用双手成就你的梦想</li>
-
-
-
层级选择器
- E F
- 包含选择器
- 选择所有被E元素包含的F元素
- 包含选择器
- E>F
- 子选择器
- 选择所有作为E元素的子元素F
- 与 包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈
- 子选择器
- E+F
- 相邻选择器
- 与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）
- E~F
- 兄弟选择器
- 选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级
- 兄弟选择器
- E F
-
-
CSS3文本属性
-
文本阴影属性
-
语法：text-shadow
-
text-shadow: 2px 2px 2px red- 水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色
-
-
盒子阴影属性
-
box-shadow: 10px 10px 5px 10px #888888 inset;- 水平阴影位置 垂直阴影位置 模糊距离 阴影大小 阴影颜色 阴影向内
- 后四个参数可以省略
-
-
文本换行相关属性
- word-warp
- normal
- 只在允许的断字点换行（浏览器保持默认处理）
- break-word
- 属性允许长单词或 URL 地址换行到下一行
- normal
- Word-break
- break-all
- 它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
- Keep-all
- 文本不会换行，只能在半角空格或连字符处换行
- break-all
- word-warp
-
@font-face
-
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中
-
语法规则
-
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } -
YourWebFontName:此值指的就是你自定义的字体名称
-
source:此值指的是你自定义的字体的存放路径
-
format：此值指的是你自定义的字体的格式
-
-
-
动画
-
CSS3渐变（gradient）
-
可以让你在两个或多个指定的颜色之间显示平稳的过渡
-
线性渐变
-
background: linear-gradient(direction, color-stop1, color-stop2, ...); -
direction
- to left、top right、to bottom、to top
- to right bottom、top right top、top left bottom、top left top
-
使用角度渐变
-
div { background: linear-gradient(10deg, red, blue) } -
0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变
-
角度代表着渐变线的方向
-
-
径向渐变
-
径向渐变是从“一个点”向四周的颜色渐变
-
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：最远角
-
div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); } -
div { background: radial-gradient(red 5%, green 15%, blue 60%); }
-
-
重复渐变
-
重复性线性渐变
-
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); } -
10%的位置为yellow，20%的位置为green，然后按照这20%向下重复
-
-
重复性径向渐变
-
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
-
-
-
-
-
transition
- css3的transition允许css的属性值在一定的时间区间内平滑地过渡
- transition-property
- 检索或设置对象中的参与过渡的属性
- transition-duration
- 检索或设置对象过渡的持续时间
- transition-delay
- 检索或设置对象延迟过渡的时间
- transition-timing-function
- 检索或设置对象中过渡的动画类型
- linear
- 匀速
- ease
- 逐渐慢下来
- ease-in
- 加速
- ease-out
- 减速
- ease-in-out
- 先加速后减速
- linear
- 检索或设置对象中过渡的动画类型
- transtion:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型
-
CSS3 2Dtransform
- 属性
- rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()
- translate(tx,ty)或者 translate(tx)
- 将元素向指定的方向移动
- 水平向右，竖直向下为正
- translateX()
- 水平方向移动一个对象
- translateY()
- 纵轴方向移动一个对象
- 将元素向指定的方向移动
- scale()
- 让元素根据中心原点对对象进行缩放。默认的值1
- 他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等
- rotate()
- 旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转
- 主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转
- rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
- 定义沿 X 轴的 3D 旋转
- rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
- 定义沿 Y 轴的 3D 旋转
- skew()
- 倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
- 一个参数时：表示水平方向的倾斜角度；两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
- 水平方向上的拉伸变形及竖直方向上的拉伸变形
- transform-origin
- transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用
- 属性
-
CSS3动画
-
CSS3属性中有关于制作动画的三个属性
- transform,transition,animation
- transition+transform
- 过度+转场实现动画
- 并不是真正的动画
- transition需要触发一个事件(hover事件或click事件等)才会随时间改变其
- animation
- 是真正的动画
- animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation只需要明确的动画属性值
- transition+transform
- transform,transition,animation
-
语法
-
@keyframes mymove{ from{初始状态属性} to{结束状态属性}}- mymove为动画名
- keyframes关键帧
-
@keyframes mymove{ 0%{初始状态属性} 20%{中间状态属性} 100%{结束状态属性} } -
写在css的开头，确保最先加载，避免出现其他的问题
-
-
animation-name
-
检索或设置对象所应用的动画名称
- 必须与规则@keyframes配合使用
-
@keyframes move{}-
#container{animation-name:move;}
-
-
animation-duration
- 检索或设置对象动画的持续时间
- animation-duration:3s;
-
animation-timing-function
- 检索或设置对象动画的过渡类型
- linear,ease,ease-in......
- step-start:马上跳到动画每一结束桢的状态
-
animation-delay
- 检索或设置对象动画延迟的时间
- animation-delay:0.5s;
-
animation-iteration-count
-
检索或设置对象动画的循环次数（包含初始的第一次）
-
animation-iteration-count: infinite | number;
-
-
animation-direction
-
检索或设置对象动画在循环中是否反向运动
-
normal：正常方向 reverse：反方向运行 alternate：动画先正常运行再反方向运行，并持续交替运行 alternate-reverse：动画先反运行再正方向运行，并持续交替运行
-
-
animation-play-state
-
检索或设置对象动画的状态
-
animation-play-state:running | paused;-
animation-play-state:paused; -
当鼠标经过时动画停止，鼠标移开动画继续执行
-
-
-
animation-fill-mode
- 规定对象动画时间之外的状态
- none不改变默认行为
- forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
-
-
其他
-
draggable
- draggable属性可以控制图片是否允许拖动，默认效果，拖动并不是真正移走了，而是有一个拖动的阴影
- draggable=false
-
setTimeout
-
只执行一次
-
setTimeout(function () { console.log("延迟执行") fengche.style.transform = "rotate(8turn)"; }, 2000)
-
jQuery
jQuery概述
- 简介
- jQuery是什么
- 是一个JavaScript程序库
- JS是语言，jQuery是建立在这个语言上的一个基本库(框架)，利用jQuery可以更简单的使用JS
- jQuery是什么
- jQuery优势
- 轻量级，使用灵巧(只需引入一个js文件)
- 强大的选择器(模仿CSS选择器更精确、灵活)
- 出色的DOM操作的封装(动态更改页面样式/页面内容,添加、移除等)
- 可靠的事件处理机制(动态添加响应事件)
- 提供基本网页特效(提供已封装的网页特效方法)
- 完善的Ajax
- 易扩展、插件丰富
- jQuery版本
- jquery.js(开发版)
- 完整无压缩版本，主要用于测试、学习和开发
- jquery.min.js(生产版)
- 经过工具压缩, 主要应用于产品和项目
- jQuery不需要安装，把下载的jquery.js放到网站上的一个公共的位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可
- jquery.js(开发版)
jQuery操作初步
-
引入jQuery包
- a. 引入本地的jQuery
- b. 引入在线的库文件
- 在jQuery库中，\(是jQuery的别名，\)()等效于就jQuery()
-
文档就绪事件
-
jQuery入口函数
-
$(document).ready(function(){ // 执行代码 }); -
$(function(){ // 执行代码 }); -
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行
-
-
JS入口函数
-
window.onload = function () { // 执行代码 } -
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行
-
-
如果写在body的最后，则默认已经加载完毕，不需要入口函数，灵活处理
-
jQuery对象与DOM对象
-
DOM对象
-
var domObj = document.getElementById(“id”); var objHtml = domObj.innerHTML；
-
-
jQuery对象
-
就是通过jQuery包装DOM对象后产生的对象
-
$("#foo").html();-
document.getElementById(“foo”).innerHTML;
-
-
-
相互转换
-
DOM对象转成jQuery对象
-
var foo = document.getElementById(“foo”); var $foo = $(foo);
-
-
jQuery对象转成DOM对象
-
jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
-
var $foo = $(“#foo”); var foo = $foo[0]; 或 var foo = $foo.get(0);
-
-
jQuery字典
-
核心（最常用的地方）
-
jQuery(选择器)
- 获取jQ对象
-
jQuery(html)
-
创建html对象
-
$("<div>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); }}).appendTo("body"); -
动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中
-
-
-
jQuery(callback)
- callback回调函数
- 就是一个function，指的是页面加载好了，准备好了
-
jQuery.holdReady
- 开发jQuery插件使用
-
each
-
可以迭代所有匹配的对象
-
$("img").each(function(i){ this.src = "test" + i + ".jpg"; });-
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
-
-
-
size()
- 方法
-
length
- 属性
-
selector
- 当前对象通过哪个选择器获取过来的
-
context
- jQuery关联的是哪块的DOM上下文
-
get(index)
- 根据索引获取对应的元素
-
index
- 计算指定元素的索引值
-
data
-
将数据绑定在jQuery对象上
-
$("div").data("blah"); // undefined$("div").data("blah", "hello"); // blah设置为hello$("div").data("blah"); // hello
-
-
queue
- 元素上的执行序列
-
noConflict
- 没有冲突
- 礼让$
-
-
选择器（获取元素手段）
- 基本选择器
- #id
- element
- .class
- *
- selector1,selector2...selectorN
- 层级选择器
- ancestor descendant
- parent > child
- prev + next
- prev ~ siblings
- 伪类选择器
- :first
- :last
- :not()
- :even
- :odd
- :eq(index)
- 注意，索引从0开始
- :gt(index)
- :lt(index)
- :nth-child
- :first-child
- :last-child
- 基本选择器
-
属性
- attr
- 支持任意属性
- removeAttr
- prop
- 只支持html内置属性
- removeProp
- class
- addClass
- removeClass
- toggleClass（toggle切换）
- html
- 设置或获取内容
- html(内容)设置
- html()获取
- text
- 设置或获取文本内容
- text(内容)设置
- text()获取
- val
- 设置或获取值
- val(值)设置
- val()获取
- attr
-
筛选/过滤规则
- 对选择器进行补充
- eq(index|-index)
- index
- 一个整数，指示元素基于0的位置,这个元素的位置是从0算起
- -index
- 一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)
- index
- first()
- last()
- hasClass(class)
- is(expr|obj|ele|fn)
- 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
-
文档处理（DOM操作）
- CRUD
- C
- $(html)创建元素
- append
- appendTo
- prepend
- prependTo
- R
- $("选择器")
- U
- css
- attr
- addClass
- removeClass
- D
- remove
- detach（与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来）
- C
- CRUD
-
CSS
-
设置或获取
-
key,value设置
-
($("p").css("color","red");- 设置一个属性用,分隔
-
($("p").css({ color: "#ff0011", background: "blue" });) -
设置多个属性中间用:分隔
-
-
key获取
-
-
事件
-
on
-
在选择元素上绑定一个或多个事件的事件处理函数
-
$("p").on("click", function(){alert( $(this).text() );});
-
-
off
-
bind
-
为每个匹配元素的特定事件绑定事件处理函数
-
一个事件一个处理函数/多个事件一个处理函数/多个事件多个处理函数
-
$("button").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} });
-
-
one
- 只执行一次
-
trigger
-
$("#container").on("click",function(){ alert("gogogo"); }) setTimeout(function(){ $container.trigger("click"); },3000)- 注意，如果不设置Timeout，trigger就是触发的意思，即自动触发
-
-
hover
-
click
-
鼠标事件等
-
jQ效果&Ajax&Vue
jQuery效果
-
自定义动画
-
animate内写关键帧，设定持续时间及回调函数
-
$("button").click(function(){ $("#box").animate({ left:"500px", top:"0px" },2000,function(){})
-
-
slideDown/slideUp/slideToggle
-
fadein/fadeout/fadeTo
Ajax
-
网络请求工具
- Python
- urllib
- requests
- 封装urllib
- 前端
- jQuery中的Ajax
- 网络请求核心点
-
请求地址
-
请求方法
-
请求参数
-
请求结果
-
- Python
-
$.getJSON()
-
$.getJSON("data/movie_list.json", function(data) {});
-
-
$.get()
-
$.get("data/movie_list.json",function(data){},"json");
-
-
$.ajax({})
- $.ajax({type: "get",url: "data/movie_list.json",success: function(data) {});
Vue初步
-
简介
- 一套用于构建用户界面的渐进式框架
- Vue 的核心库只关注视图层
-
引入vue
-
网络版本
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
本地版本
-
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
-
-
-
声明式渲染
-
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
- 一个 Vue 应用会将其挂载到一个 DOM 元素上，然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部
-
html
-
<div id="container"> {{ message }}</div>
-
-
js
-
var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})
-
-
-
绑定元素 attribute
-
<span v-bind:title="message">title提示</span> -
也可以通过浏览器更新data中的message，进而来更新span标签的title提示
-
-
条件与循环
-
条件
-
<p v-if="seen">现在你看到我了</p> -
对应data中的seen值为true/false，控制v-if为true/false，进而控制标签是否显示
-
可以在控制台更新
-
-
循环
-
<li v-for="todo in todos"> {{ todo.text }}</li> -
data中有一个列表为todos，列表的每一个元素都是一个字典，字典的key为text
-
可以在控制台更新
- container.todos.push({ text: '新项目' })
-
-
-
处理用户输入
-
v-on监听
-
<button v-on:click="reverseMessage">反转消息</button> -
vue对象有一个名为reverseMessage的方法
-
-
v-model
-
实现表单输入和应用状态之间的双向绑定
-
<p>{{ message }}</p><input v-model="message">- 将input的value与message绑定
-
-
-
组件化应用构建
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="code/HelloJQ/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="container"> <button type="button" v-on:click="getdata">获取数据</button> <ul> <test_li v-for="movie in movie_list" v-bind:film="movie"></test_li> </ul> </div> <script type="text/javascript"> Vue.component("test_li", { props: ["film"], template: "<li><h2>{{ film.title }}<h2></li>" }); var vm = new Vue({ el: "#container", data: { movie_list: [] }, methods: { getdata: function() { $.getJSON("data/movie_list.json", function(data_origin) { vm.$data.movie_list = data_origin.data; }) } } }) </script> </body> </html>-
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用
-
注册组件
-
Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) var app = new Vue(...)
-
-
创建实例
-
<ol> <todo-item></todo-item> <todo-item></todo-item> </ol>
-
-
从父作用域将数据传到子组件
-
Vue.component('todo-item', { // todo-item 组件现在接受一个"prop"，类似于一个自定义 attribute，这个 prop 名为 todo props: ['todo'], template: '<li>{{ todo.text }}</li>' })
-
-
-
MVVM
- 一种软件架构模型
- 软件设计规范，不是固定的标准
- Model
- 模型
- 数据
- data
- View
- 视图
- 展示数据的
- html
- ViewModel
- 视图模型
- 视图和模型的绑定
- 核心思想：解耦合
- 基本不需要去操作
bootstrap&swiper
bootstrap
-
简介
- Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷
- 复制粘贴
-
加载插件
-
使用在线插件
-
使用离线插件
-
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css"/> <!-- 注意顺序，先jquryjs,再bootstrap.js --> <script src="./bootstrap/bootstrap-3.3.7-dist/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -
需要额外加载jQuery插件，而且顺序在bootstrap插件之前
-
移动设备优先
- 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能
-
-
-
使用
- 在官网找到需要的样例，进行针对性的修改即可
-
栅格系统
-
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
-
栅格参数
-
参数分类\屏幕尺寸
- 手机屏幕
- 平板屏幕
- 桌面显示器
- 大桌面显示器
-
栅格系统行为
- 总是水平排列
- 开始是堆叠在一起的，当大于这些阈值时将变为水平排列
- 总是水平排列
-
类前缀
- .col-xs-
- .col-sm-
- .col-md-
- .col-lg-
-
.container最大宽度
- None(自动)
- 750px
- 970px
- 1170px
-
栅格系统，优先使用大的，大的不行了用小的
-
<div class="box col-lg-3 col-md-4 col-sm-6">1</div>
-
-
<div class="container">- 非铺满
-
<div class="row">- 铺满
-
-
swiper
-
轮播组件
-
使用方法
-
加载插件
-
<link rel="stylesheet" type="text/css" href="swiper-6.1.1/swiper-master/package/swiper-bundle.css"/> <script src="swiper-6.1.1/swiper-master/package/swiper-bundle.js" type="text/javascript" charset="utf-8"></script>
-
-
html内容
-
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div>
-
-
定义swiper大小
-
.swiper-container { width: 600px; height: 300px; }
-
-
初始化swiper
-
<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script>
-
-
官网找到样式，自己修改
-
