JavaWeb之前端_IT分享知识网

大家好，欢迎来到IT知识分享网。

8、HTML

8.1、web概念概述

JavaWeb：
- 使用Java语言开发基于互联网的项目
软件架构：
1. C/S：Client/Server 客户端/服务端
  - 在用户本地有一个客户端程序，在远程有一个服务器端程序
  - 如：，迅雷…
  - 优点：
    - 用户体验好
  - 缺点：
    - 开发、安装，部署，维护麻烦
2. B/S：Browser/Server 浏览器/服务器端
  - 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
  - 优点：
    - 开发、安装，部署，维护简单
  - 缺点：
    1. 如果应用过大，用户的体验可能会受到影响
    2. 对硬件要求过高

8.2、资源分类

B/S架构详解
- 资源分类：
  1. 静态资源：
    - 使用静态网页开发技术分布的资源
    - 特点：
      - 所有用户访问，得到的结果是一样的
      - 如：文本，图片，音频，视频，HTML，CSS，JavaScript
      - 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
  2. 动态资源：
    - 使用动态网页及时发布的资源
    - 特点：
      - 所有用户访问，得到的结果可能不一样
      - 如：jsp/servlet，php，asp…
      - 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

我们要学习动态资源，必须先学习静态资源！
静态资源：
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果

8.3、HTML介绍

概念：是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言
- 超文本：
  - 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
- 标记语言：
  - 由标签构成的语言。<标签名称> 如 html，xml
  - 标记语言不是编程语言

8.4、HTML快速入门

语法：
1. html文档后缀名 .html 或者 .htm
2. 标签分为
  1. 围堵标签：有开始和结束标签。如<html></html>
  2. 自闭和标签：开始标签和结束标签在一起。如 <br/>
3. 标签可以嵌套：
  需要正确嵌套，不能你中有我，我中有你
  
  错误：<a><b></a></b>
  
  正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要引号（单双都可）引起来
5. html的标签不区分大小写，但是建议使用小写

8.5、HTML标签

8.5.1、文件标签

文本标签：构成html最基本的标签

html：html文档的跟标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签
body：体标签
<!DOCTYPE html>：html5中定义该文档是html文档

8.5.2、文本标签

文本标签：和文本有关的标签

注释：
<h1> to <h6>：标题标签
- h1~h6：字体大小逐渐递减
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线
- 属性：
  - color：颜色
  - width：宽度
  - size：高度
  - align：对其方式
    - center：居中
    - left：左对齐
    - right：右对齐
<b>：字体加粗
<i>：字体斜体
<font>：字体标签
- 属性：
  - color：颜色
  - size：大小
  - face：字体
<center>：文本居中
属性定义：
- color：
  1. 英文单词：red，green，blue
  2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
  3. #值1值2值3：值的范围：00~FF之间。如：#FF00FF
- width：
  1. 数值：width=‘20’，数值的单位，默认是px(像素)
  2. 数值%：占比相对于父元素的比例

8.5.3、图片标签

img：展示图片
- 属性：
  - src：指定图片的位置
    - 相对路径：
      ./：表示当前目录，不写默认就是当前目录
      
      ../：表示上一级目录

8.5.4、列表标签

有序列表：
- ol
- li
无序列表：
- ul
- li

8.5.5、链接标签

a：定义一个超链接
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开（新开一个窗口）

8.5.6、div和span标签

div：每一个div占满一整行。块级标签

span：文本信息在一行展示，行内标签内联标签

8.5.7、语义化标签

语义化标签：html5中为了提高程序的可读性，提供了一些标签。

<header>：表示文档的头部
<footer>：表示文档的底部

8.5.8、表格标签

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
- bgcolor：背景色
- align：表格的对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <caption>学生表格</caption> <tr> <th> 编号 </th> <th> 姓名 </th> <th> 年龄 </th> </tr> <tr> <td> 1 </td> <td> 张三 </td> <td> 20 </td> </tr> <tr> <td> 2 </td> <td> 李四 </td> <td> 25 </td> </tr> <tr> <td> 3 </td> <td> 王五 </td> <td> 30 </td> </tr> </table> </body> </html>

8.5.9、表单标签

表单：

概念：用于采集用户输入的数据的。用于和服务器进行交互
form：用于定义表单。可以定义一个范围，范围代表采集用户数据的范围
- 属性：
  - action：指定提交数据的URL
  - method：指定提交方式
    - 分类：一共7种，2种比较常用
      - get：
        
        请求参数会在地址栏中显示。会封装到请求行中（HTTP协议后讲解）
        
        请求参数大小有限制
        
        不太安全
      - post：
        
        请求参数不会在地址栏中显示。会封装到请求体中（HTTP协议后讲解）
        
        请求参数的大小没有限制
        
        较为安全
  - 表单项中的数据要想被提交：必须指定其name属性
表单项标签：
- input：可以通过type属性值，改变元素展示的样式
  - type属性：
    - text：文本输入框，默认值
      - placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
    - password：密码输入框
    - radio：单选框
      - 注意：
        
        想要让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
        
        一般会给每一个单选框提供value属性，指定其被选中后提交的值
        
        checked属性，可以指定默认值
    - checkbox：复选框
      - 注意：
        
        一般会给每一个单选框提供value属性，指定其被选中后提交的值
        
        checked属性，可以指定默认值
  - label：指定输入项的文字描述信息
    - 注意：
      - label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点
  - file：文件选择器
  - hidden：隐藏域，用于提交一些信息。
  - 按钮：
    - submit：提交按钮。可以提交表单
    - button：普通按钮
    - image：图片提交按钮
      - src属性指定图片路径
- select：下拉列表
  - name：指定提交数据的名称
  - 子元素：option，指定列表项
    - value：指定提交的值
    - selected：指定默认的下拉列表项
- textarea：文本域
  - cols：指定列数，每一行有多少个字符
  - rows：默认多少行。

9、CSS

9.1、CSS概述

CSS：页面美化和布局控制

概念：Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
好处：
1. 功能强大
2. 将内容展示和样式控制分离
  - 降低耦合度。解耦
  - 让分工协作更容易
  - 提高开发效率

9.2、CSS使用方式

CSS的使用：CSS与html结合方式

内联样式：
- 在标签内使用style属性指定css代码
```
<div style = "color:red;">hello css</div> 
```
内部样式
- 在head标签内定义style标签，style标签的标签体内容就是css代码
```
<style> div{ 
        color:blue; } </style> <div>hello css</div> 
```

外部样式

定义css资源文件

在head标签，定义link标签，引入外部的资源文件

如：a.css文件：

div{ 
        color:green; }

<link rel = "stylesheet" href="css/a.css"> <div> hello css </div> <div> hello css </div>

注意：
- 1,2,3种方式 css作用范围越来越大
- 1方式不常用，后期常用2,3
- 第3种格式可以写为：
```
<style> @import "css/a.css"; </style> 
```

9.3、CSS语法

css语法：

格式：

选择器{ 
      属性名1:属性值1; 属性名2:属性值2; ... }

选择器：筛选具有相似特征的元素
注意：
- 每一对属性需要使用;隔开，最后一对属性可以不加;

9.4、选择器

选择器：筛选具有相似特征的元素

元素：
1. 基础选择器
  1. id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
    - 语法：#id属性值{}
  2. 元素选择器：选择具有相同标签名称的元素
    - 语法：标签名称{}
    - 注意：id选择器优先级高于元素选择器
  3. 类选择器：选择具有相同的class属性值的元素。
    - 语法：.class属性值{}
    - 注意：类选择器优先级高于元素选择器
2. 扩展选择器
  1. 选择所有元素：
    - 语法：*{}
  2. 并集选择器：
    - 选择器1,选择器2{}
  3. 子选择器：筛选选择器1元素下的选择器2元素
    - 语法：选择器1 选择器2{}
  4. 父选择器：筛选选择器2的父元素选择器1
    - 语法：选择器1 > 选择器2{}
  5. 属性选择器：选择元素名称，属性名=属性值的元素
    - 语法：元素名称[属性名="属性值"]{}
  6. 伪类选择器：选择一些元素具有的状态
    - 语法：元素:状态{}
    - 如：<a>a标签
      - 状态：
        
        link：初始化的状态
        
        visited：被访问过的状态
        
        active：正在访问状态
        
        hover：鼠标悬浮状态

9.5、CSS属性

字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：对齐方式
- line-height：行高
背景
- background：复合属性，可以设置背景颜色，背景图片等
边框：
- border：设置边框，符合属性
尺寸：
- width：宽度
- height：高度
盒子模型：
- margin：外边距
  - auto：水平居中
- padding：内边距
  - 默认情况下内边距会影响整个盒子的大小
  - 设置盒子属性，让width 和 height 就是最终盒子的大小
  - box-sizing: border-box;
- float：浮动
  - left：左浮动
  - right：右浮动

9.6、案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ 
      margin: 0px; padding: 0px; box-sizing: border-box; } body{ 
      background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout{ 
      width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; } .rg_left{ 
      /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ 
      color:#FFD026; font-size: 20px; } .rg_left > p:last-child{ 
      color:#A6A6A6; font-size: 20px; } .rg_center{ 
      float: left; /* border: 1px solid red;*/ } .rg_right{ 
      /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ 
      font-size: 15px; } .rg_right p a { 
      color:pink; } .td_left{ 
      width: 100px; text-align: right; height: 45px; } .td_right{ 
      padding-left: 50px ; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ 
      width: 251px; height: 32px; border: 1px solid #A6A6A6 ; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #checkcode{ 
      width: 110px; } #img_check{ 
      height: 32px; vertical-align: middle; } #btn_sub{ 
      width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ; } </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单 form--> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td> </tr> <tr> <td class="td_left"><label for="checkcode" >验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>

10、JavaScript

10.1、JavaScript简介

概念：一门客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能：

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

10.2、JavaScript发展史

JavaScript发展史：

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C–，后来更名为：ScriptEase
1995年，Netscape(网景)公司，开发了一门客户端脚本语言LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，ECMAScript，就是所有客户端脚本语言的标准。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

10.3、JavaScript语法

ECMAScript：客户端脚本语言的标准

基本语法：

与html结合方式
1. 内部JS：
  - 定义<script>，标签体内容就是js代码
2. 外部JS：
  - 定义<script>，通过src属性引入外部的js文件
- 注意：
  1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
  2. <script>可以定义多个
注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
数据类型
1. 原始数据类型（基本数据类型）：
  1. number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）
  2. string：字符串。字符串 ”abc“ ”a“ ’abc‘
  3. boolean：true和false
  4. null：一个对象为空的占位符
  5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2. 引用数据类型：对象
变量
- 变量：一小块存储数据的内存空间
- Java语言是强类型语言，而JavaScript是弱类型语言
  - 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
  - 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
- 语法：
  - var 变量名 = 初始值;
- typeof(变量名)：获取变量的数据类型
运算符
1. 一元运算符：只有一个运算数的运算符
  ++,--,+,-(正负号)
  - ++ – ：自增(自减)
    - ++(–) 在前，先自增(自减)，再运算
    - ++(–) 在后，先运算，再自增(自减)
  - +(-) ：正负号
  - 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
    - 其他类型转number：
      - string转number：按照字面值转换。如果字面值不是数字，则转为NaN(不是数字的数字)
      - boolean转number：true转为1，false转为0
2. 算数运算符
  + - * / % ...
3. 赋值运算符
  = += -=....
4. 比较运算符
  > < >= <= == ===(全等于)
  
  比较方式：
  1. 类型相同：直接比较
    - 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止
  2. 类型不同：先进行类型转换，再比较（类型转换是自动进行）
    - ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
5. 逻辑运算符
  && || !
  
  &&：与（短路）
  
  ||：或（短路）
  
  ！：非
  - 其他类型转boolean：
    1. number：0或NaN为假，其他为真
    2. string：除了空字符串（“”），其他都是true
    3. null&undefined：都是false
    4. 对象：所有对象都为true
6. 三元运算符
  ? : 表达式
  
  var a = 3;
  
  var b = 4;
  
  var c = a > b ? 1:0?
  - 语法：
    - 表达式？值1:值2;
    - 判断表达式的值，如果是true则取值1，如果是false则取值2;
流程控制语句
1. if...else...
2. switch：
  - 在Java中，switch语句可以接受的数据类型：byte int short char,枚举(1.5),String(1.7)
    - switch(变量)：
      case 值：
  - 在JS中，switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for
JS特殊语法
1. 语句以;结尾，如果一行只有一条语句则;可以省略(不建议)
2. 变量的定义使用var关键字，也可以不使用
  - 用：定义的变量是局部变量
  - 不用：定义的变量是全局变量(不建议)

练习99乘法表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表</title> <script> for (var i = 1 ;i<=9;i++){ 
        for (var j = 1;j<=i;j++){ 
        document.write(i + '*' + j + "=" + (i*j) + "&nbsp"); } document.write("<br>") } </script> </head> <body> </body> </html>

10.4、JavaScript基本对象

10.4.1、Function对象

Function：函数(方法)对象

创建：

var fun = new Function(形式参数列表,方法体);(不建议使用)

function 方法名称(形式参数列表){ 
        方法体 }

var 方法名 = function(形式参数列表){ 
        方法体; }

属性：
length：代表形参的个数方法名.length

特点：

方法定义是，形参的类型不用写，返回值类型也不写
方法是一个对象，如果定义名称相同的方法，会覆盖（后面覆盖前面）
在JS中，方法的调用只与方法名称有关，和参数列表无关

在方法声明中有一个隐藏的内置对象(数组)，arguments，封装所有的实际参数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>arguments</title> <script> //计算任意参数的返回值 function getSum(){ 
          var sum = 0; for (var i =0;i<arguments.length;i++){ 
          sum+=arguments[i]; } return sum } let sum = getSum(1,2,3,4); document.write(sum) </script> </head> <body> </body> </html>

调用：
方法名称(实际参数列表);

10.4.2、Array对象

Array：数组对象

创建：

```
var arr = new Array(元素列表); 
```
```
var arr = new Array(默认长度); 
```
```
var arr = [元素列表]; 
```

方法：
join(参数)：将数组中的元素按照指定的分隔符拼接为字符串

push()：向数组的末尾添加一个或更多元素，并返回新的长度。
属性：
length：数组的长度
特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的

10.4.3、Date对象

Date：日期对象

创建：
```
var date = new Date(); 
```
方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式

getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

10.4.4、数学对象

创建：
- 特点：Math对象不同创建，直接使用。Math.方法名();
方法：
random():返回0~1之间的随机数。含0不含1

ceil(x)：对数进行上舍入。

floor(x)：对数进行下舍入。

round(x)：把数四舍五入为最接近的整数
属性：
PI：回去π值

10.4.5、RegExp对象

RegExp：正则表达式对象

正则表达式：定义字符串的组成部分。
1. 单个字符：[]
  如：[a] [ab] [a-zA-Z0-9_]
  - 特殊符号代表特殊含义的单个字符：
    \d：单个数字字符[0-9]
    
    \w：单个单词字符[a-zA-Z0-9_]
2. 量词符号：
  ？：表示出现0次或1次
  
  *：表示出现0次或多次
  
  +：出现1次或多次
  
  {m,n}：表示m<= 数量 <= n
  - m如果缺省：{,n}：最多n次
  - n如果缺省：{m,}：最少m次
3. 开始结束符号
  - ^：开始
  - $：结束

正则对象

创建

var reg = new RegExp("正则表达式");

```
var reg = /正则表达式/; 
```

方法

test(参数)：验证指定的字符串是否符合正则定义的规范

var reg = /^\w{6,12}$/; var username = "zhangsan"; var flag = reg.test(username); alter(flag);

10.4.6、Global对象

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名()；
方法：
encodeURI()：url编码

decodeURI()：url解码

encodeURIComponent()：url编码，编码的字符更多

decodeURIComponent()：url解码

parseInt()：将字符串转为数字
- 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN：判断一个值是否是NaN
- NaN六亲不认，连自己都不认。NaN参与的==比较全部为false
eval()：将JavaScript字符串，并把它作为脚本代码来执行
URL编码
传智播客 = %E4%BС%A0%E6%99%BA%E6%92%AD%E5%AE%A2

var str = "http://www.baidu.com?wd=传智播客"; var encode = encodeURI(str); document.write(encode+"<br>");//%E4%BС%A0%E6%99%BA%E6%92%AD%E5%AE%A2 var s = decodeURI(encode); document.write(s+"<br>");//传智播客 var str1 = "http://www.baidu.com?wd=传智播客"; var encode1 = encodeURIComponent(str1); document.write(encode1 +"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2 var s1 = decodeURIComponent(encode); document.write(s1 +"<br>");//传智播客 var str = "a234abc"; var number = parseInt(str); //alert(number + 1); var a = NaN; document.write(a == Nan); //false document.write(isNaN(a));//true var jscode = "alert(123)" eval(jscode);

10.5、BOM

10.5.1、BOM概述

概述：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象

组成：

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

10.5.2、Window对象

Window：窗口对象

创建
方法：
1. 与弹出框有关的方法：
  alter(警告信息) 显示带有一段消息和一个确认按钮的警告框
  
  confirm(提示信息) 显示带有一段信息以及确认按钮和取消按钮的对话框
  - 如果用户点击确定按钮，则方法返回true
  - 如果用户点击取消按钮，则方法返回false
  prompt(提示用户需要输入什么样的信息) 显示可提示用户输入的对话框
  - 返回值：获取用户输入的值
2. 与开关有关的方法
  close()：关闭浏览器窗口。
  - 谁调用我，我关谁
  open(输入想要开启窗口的网址，如果不输入则生成一个空页面) 打开一个新的浏览器窗口
  - 返回新的Window对象，如果传参了返回的window对象就是传参网址的对象
3. 与定时器有关的方式
  setTimeout() 在指定的毫秒数后调用函数或计算表达式
  - 参数：
    1. js代码或者方法对象
    2. 毫秒值
  - 返回值：唯一标识，用于取消定时器
  clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
  
  setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
  
  clearInterval() 取消由setIntervar() 设置的timeout
属性:
1. 获取其他BOM对象：
  history
  
  location
  
  Navigator
  
  Screen
2. 获取DOM对象
  document
特点
- Window对象不需要创建可以直接使用 window使用。window.方法名();
- window引用可以省略。方法名();

10.5.3、轮播图

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>轮播图</title> </head> <body> <img id = "img" src="img/banner_1.jpg" width="100%"> </body> <script> /* 分析： 1.在页面上使用img标签展示图片 2.定义一个方法，修改图片对象的src属性 3.定义一个定时器，每隔3秒调用方法一次。 */ //定义方法实现轮播图效果 var num = 1; function fun(){ 
      num++; if (num > 3) { 
      num = 1; } //获取图片对象并对图片进行修改 var img = document.getElementById("img"); img.src = "img/banner_"+num+".jpg" } //定义定时器 setInterval(fun,3000) </script> </html>

10.5.4、Location对象

Location：地址栏对象

创建(获取)：
1. window.location
2. location
方法：
- reload() ：重新加载当前页面。刷新
属性
- href ：设置或返回完整的URL。

10.5.4.1、自动跳转首页案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转首页</title> <style> p{ 
    text-align: center; } span{ 
    color: red; } </style> </head> <body> <p><span id="time">5</span>秒后跳转首页</p> <script> /* 分析： 1.显示页面效果<p> 2.倒计时读秒效果实现 2.1定义一个方法，获取span标签，修改span标签体内容，时间-- 2.2定义一个定时器，1秒执行一次该方法 3.在方法中判断时间如果<=0,则跳转到首页 */ //获取span标签， let time = document.getElementById("time"); var tt = 5; //定义一个方法 function showTime(){ 
    //改变time的数值 time.innerHTML = tt+""; //在方法中判断时间如果<=0,则跳转到首页 if (tt<=0){ 
    location.href="https://www.baidu.com"; } tt--; } //定义一个定时器，1秒执行一次该方法 setInterval(showTime,1000); </script> </body> </html>

10.5.5、History对象

History：历史记录对象

创建(获取)：
1. window.history
2. history
方法：
- back() 加载history列表中的前一个URL
- forward() 加载history列表中的下一个URL
- go(参数) 加载history 列表中的某个具体页面
  - 参数：
    - 正数：前进几个历史记录
    - 负数：后退几个历史记录
属性：
- length 返回当前窗口历史列表中的URL数量

10.6、DOM

10.6.1、DOM简单学习

功能：控制html文档的内容

代码：获取页面标签(元素)对象 Element

document.getElementById("id值")：通过元素的id获取元素对象

操作Element对象：

修改属性值：
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置
修改标签体内容
- 属性：innerHTML

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>DOM</title> </head> <body> <img id = "light" src="img/off.gif"> <h1 id="title"> 我也是服了 </h1> </body> <script> //1.获取light对象 var light = document.getElementById("light"); alter("我要换照片了"); light.src = "img/on.gif" //获取h1标签对象 var title = document.getElementById("title"); alter("我要换内容了...."); //修改内容 title.innerHTML = "不识妻美刘强东"; </script> </html>

10.6.2、DOM概述

概念：Document Object Model 文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

W3C DOM 标准被分为3个不同的部分：

核心DOM – 针对任何结构化文档的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他5个的父对象
XML DOM – 针对XML文档的标准模型
HTML DOM – 针对HTML文档的标准模型

10.6.3、核心DOM模型

10.6.3.1、Document对象

Document：文档对象

创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
方法：
1. 获取Element对象：
  1. getElementById()：根据id属性值获取元素对象。id属性值一般唯一
  2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
  3. getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组
  4. getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象：
  createAttribute(name)
  
  createComment()
  
  createElement()：创建Element元素对象
  
  createTextNode()
3. 属性

10.6.3.2、Element对象

获取/创建：通过document来获取和创建

方法：

removeAttribute()：删除属性

var a = document.getgetElementById("a"); a.removeAttribute("href")

setAttribute()：设置属性

var a = document.getgetElementById("a"); a.setAttribute("href","https://www.baidu.com")

10.6.3.3、Node对象

Node：节点对象，其他5个的父对象

特点：所以dom对象都可以被认为是一个节点
方法：
- CRUD dom树：
  - appendChild()：向节点的字节点列表的结尾添加新的子节点
  - removeChild()：删除(并返回)当前节点的指定子节点
  - replaceChild()：用新节点替换一个子节点
属性：
- parentNode 返回节点的父节点

10.6.3.4、动态表格案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table { 
      border: 1px solid; margin: auto; width: 500px; } td, th { 
      text-align: center; border: 1px solid; } div { 
      text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table id="table" > <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td> </tr> </table> <script> //获取输入的信息 let id = document.getElementById("id"); let name = document.getElementById("name"); let gender = document.getElementById("gender"); let add = document.getElementById("btn_add"); //给添加按钮绑定单击事件 /*add.onclick = function () { //创建tr的元素对象并添加进表格中 const tr = document.createElement("tr"); //创建td的元素对象并添加到tr中 let td1 = document.createElement("td"); //将输入的信息转换为文本节点添加到td中 td1.appendChild(document.createTextNode(id.value)); let td2 = document.createElement("td"); //将输入的信息转换为文本节点添加到td中 td2.appendChild(document.createTextNode(name.value)); let td3 = document.createElement("td"); //将输入的信息转换为文本节点添加到td中 td3.appendChild(document.createTextNode(gender.value)); //创建a标签的对象 let a = document.createElement("a"); a.innerHTML="删除"; a.href = "javascript:void(0)" a.setAttribute("onclick","delTr(this)"); //将标签添加到td中 let td4 = document.createElement("td"); td4.appendChild(a); //将td添加到tr对象中 tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); //获取table对象将tr添加进去 let table = document.getElementById("table"); table.appendChild(tr); }*/ add.onclick = function () { 
      let table = document.getElementById("table"); table.innerHTML +="<tr>\n" + " <td>"+id.value+"</td>\n" + " <td>"+name.value+"</td>\n" + " <td>"+gender.value+"</td>\n" + " <td><a href=\"javascript:void(0)\" οnclick=\"delTr(this)\">删除</a></td>\n" + " </tr>" } //创建删除事件 function delTr(obj){ 
      let table = obj.parentNode.parentNode.parentNode; let tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>

10.6.4、HEML DOM

标签体的设置和获取：innerHTML
使用html元素对象的属性

控制元素样式

使用元素的style属性来设置

//修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px";

提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

10.7、事件

10.7.1、事件简单学习

功能：某些组件被执行了某些操作后，触发某些代码的执行。

如何绑定事件

直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1. 事件：onclick — 单击事件
通过js获取元素对象，指定事件属性，设置一个函数

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>事件</title> </head> <body> <img id = "light" src="img/off.gif" onclick = "fun();"> <img id = "light2" src="img/off.gif"> </body> <script> function fun(){ 
      alter("我被点了"); alter("我又被点了") } function fun2(){ 
      alter("咋老点我？") } //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定是件 light2.onclick = fun2; </script> </html>

10.7.2、事件概述

概念：某些组件被执行了某些操作后，触发某些代码的执行。

事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮文本输入框…
监听器：代码
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码

常见的事件：

点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
焦点事件
1. onblur：失去焦点
  - 一般用于表单校验
2. onfocus：元素获得焦点
加载事件：
1. onload：一张页面或一幅图像完成加载。
鼠标事件：
1. onmousedown：鼠标按钮被按下
  - 定义方法时，定义一个形参，接受event对象
  - event对象的button属性可以获取哪个鼠标按钮被点击了
2. onmouseup：鼠标按钮被松开
3. onmousemove：鼠标被移动
4. onmouseover：鼠标移到某个元素之上。
5. onmouseout：鼠标从某元素移开
键盘事件：
1. onkeydown：某个键盘按钮被按下
2. onkeyup：某个键盘按键被松开
3. onkeypress：某个键盘按键被按下并松开。
选择和改变
1. onchange：域的内容被改变
2. onselect：文本被选中
表单事件：
1. onsubmit：确认按钮被点击
  - 可以阻止表单的提交
2. onreset：重置按钮被点击

10.7.3、表格全选案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table { 
      border: 1px solid; width: 500px; margin-left: 30%; } td, th { 
      text-align: center; border: 1px solid; } div { 
      margin-top: 10px; margin-left: 30%; } .tr{ 
      background-color: pink; } .trc{ 
      background-color: white; } </style> <script> //当页面加载完执行 window.onload = function () { 
      //获取全选按钮对象绑定单击事件使复选框全选 document.getElementById("selectAll").onclick = function () { 
      //获取所有的复选框并遍历 let boxs = document.getElementsByName("cd"); for (var i = 0;i<boxs.length;i++){ 
      boxs[i].checked = true; } } //获取全不选按钮对象绑定单击事件使复选框全不选 document.getElementById("unSelectAll").onclick = function () { 
      //获取所有的复选框并遍历 let boxs = document.getElementsByName("cd"); for (var i = 0;i<boxs.length;i++){ 
      boxs[i].checked = false; } } //获取反选按钮对象绑定单击事件使复选框反选 document.getElementById("selectRev").onclick = function () { 
      //获取所有的复选框并遍历 let boxs = document.getElementsByName("cd"); for (var i = 0;i<boxs.length;i++){ 
      boxs[i].checked = !boxs[i].checked } } //获取第一个复选框按钮对象绑定单击事件使复选框全选 document.getElementById("first").onclick = function () { 
      //获取所有的复选框并遍历 let boxs = document.getElementsByName("cd"); for (var i = 0;i<boxs.length;i++){ 
      boxs[i].checked = this.checked } } //获取tr对象并遍历绑定鼠标离开和鼠标移动到元素上的方法 let trs = document.getElementsByTagName("tr"); for (var i = 0;i<trs.length;i++){ 
      trs[i].onmouseover = function (){ 
      this.setAttribute("class","tr"); } trs[i].onmouseout = function (){ 
      this.setAttribute("class","trc") } } } </script> </head> <body> <table> <caption>学生信息表</caption> <tr> <th><input type="checkbox" name="cd" id="first"></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" name="cd" ></td> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cd"></td> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cd"></td> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);">删除</a></td> </tr> </table> <div> <input type="button" id="selectAll" value="全选"> <input type="button" id="unSelectAll" value="全不选"> <input type="button" id="selectRev" value="反选"> </div> </body> </html>

10.7.4、表单校验案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> * { 
      margin: 0px; padding: 0px; box-sizing: border-box; } body { 
      background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout { 
      width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; } .rg_left { 
      /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child { 
      color: #FFD026; font-size: 20px; } .rg_left > p:last-child { 
      color: #A6A6A6; font-size: 20px; } .rg_center { 
      float: left; /* border: 1px solid red;*/ } .rg_right { 
      /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child { 
      font-size: 15px; } .rg_right p a { 
      color: pink; } .td_left { 
      width: 100px; text-align: right; height: 45px; } .td_right { 
      padding-left: 50px; } #username, #password, #email, #name, #tel, #birthday, #checkcode { 
      width: 251px; height: 32px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #checkcode { 
      width: 110px; } #img_check { 
      height: 32px; vertical-align: middle; } #btn_sub { 
      width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } </style> <script> window.onload = function () { 
      function checkUsername(){ 
      var user = /^.{3,20}$/; //获取username输入的内容 let username = document.getElementById("username").value; let span = document.getElementById("user"); var flag=user.test(username) if (flag){ 
      return true }else { 
      span.innerHTML = "x"; return false; } } document.getElementById("username").onblur = function (){ 
      checkUsername(); } //获取表单对象 let form = document.getElementById("form"); form.onsubmit = function (){ 
      return checkUsername(); } } </script> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单 form--> <form action="#" method="post" id="form"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"> <span id="user"></span> </td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"> </td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"> </td> </tr> <tr> <td class="td_left"><label for="checkcode">验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>

10.8、电灯开关案例

<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>电灯开关</title> </head> <body> <img id = "light" src="img/off.gif"> <script> /* 分析： 1.获取图片对象 2.绑定单击事件 3.每次点击切换图片 * 规则： * 如果灯是开的 on，切换图片为off * 如果灯是关的 off，切换图片为on * 使用标记flag来完成 */ //1.获取图片对象 var light = document.getElementById("light"); var falg = false;//代表灯是灭的。off图片 //绑定单击事件 light.onclick = function(){ 
      if(falg){ 
     //判断如果灯是开的，则灭掉 light.src = "img/off.gif"; falg = false; }else{ 
      //如果灯是灭的，则打开 light.src = "img/on.gif"; falg = true; } } </script> </body> </html>

11、Bootstrap

11.1、Bootstrap概述

概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得web开发更加快捷

框架：一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码
好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果
2. 响应式布局。
  - 同一套页面可以兼容不同分辨率的设备

11.2、Bootstrap快速入门

下载Bootstrap
在项目中将这三个文件夹复制
创建html页面，引入必要的资源文件

<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap快速入门</title> <!-- Bootstrap --> <link rel="stylesheet" href="/css/bootstrap.min.css"> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="/js/jQuery.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="/js/bootstrap.min.js"></script> </body> </html>

11.3、响应式布局

同一套页面可以兼容不同分辨率的设备

实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

步骤：

定义容器。相当于之前的table
- 容器分类：
  1. contatiner：两边留白
  2. container-fluid：每一种设备都是100%宽度
定义行。相当于之前的tr 样式：row
定义元素。指定该元素在不同设备上，所占的格子数目。样式：col – 设备代码 – 格子数目
- 设备代码：
  1. xs：超小屏幕手机（<768px）：col – xs – 12
  2. sm：小屏幕平板（>=768px）
  3. md：中等屏幕桌面显示器（>=992px）
  4. lg：大屏幕大桌面显示器（>=1200）px

注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于屏幕宽度大于或等于分界点大小的设备
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一行。

<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap快速入门</title> <link rel="stylesheet" href="/css/bootstrap.min.css"> <script src="/js/jQuery.js"></script> <script src="/js/bootstrap.min.js"></script> <style> .inner{ 
      border: 1px solid red; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> <div class="col-lg-1 inner">栅格</div> </div> </div> </body> </html>

11.4、CSS样式和JS插件

全局CSS样式：
- 按钮：class = "btn btn-default" befault 可以修改更改按钮的样式
- 图片：
  - class = "img-responsive"：图片在任意尺寸都占100%
  - 图片形状
    - ```
    <img src="..." alt="..." class="img-rounded"> 
```
- ```
<img src="" alt="." class="img-circle">  
```
    - ```
    <img src="." alt="." class="img-thumbnail">  
```
- 表格
  - table：基本实例
  - table-bordered：带边框的表格
  - table-hover：鼠标悬停
- 表单
  - 给表单项添加：class="form-control"

组件

导航条

Copy <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

分页条

<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>

插件

轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/110432.html

JavaWeb之前端