JavaWeb之前端

秉灬性

已于 2023-12-01 10:08:47 修改

阅读量1.5k

点赞数 53

文章标签： java java-ee

于 2023-12-01 10:08:18 首次发布

本文链接：https://blog.csdn.net/m0_66967690/article/details/134727981

版权

8、HTML

8.1、web概念概述

JavaWeb：
- 使用Java语言开发基于互联网的项目
软件架构：
1. C/S：Client/Server 客户端/服务端
  - 在用户本地有一个客户端程序，在远程有一个服务器端程序
  - 如：QQ，迅雷…
  - 优点：
    - 用户体验好
  - 缺点：
    - 开发、安装，部署，维护麻烦
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>

秉灬性

关注

53
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb之前端

8、HTML8.1、web概念概述JavaWeb：使用Java语言开发基于互联网的项目软件架构：C/S：Client/Server 客户端/服务端在用户本地有一个客户端程序，在远程有一个服务器端程序如：QQ，迅雷…优点：用户体验好缺点：开发、安装，部署，维护麻烦B/S：Browser/Server 浏览器/服务器端只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序优点：开发、安装，部署，维护简单缺点：如果应用
复制链接

扫一扫