前端 html javascript 学习

Html及常见前端基础

Posted by Procon on January 19, 2020

HTML

一、引言

0.VSCode安装配置

从vscode官网下载安装包，双击下一步下一步，默认安装

安装插件

image-20221201172532576

Liver Server: 修改代码后实时预览的插件

使用方式，打开HTML文件后，在文件名上点击右键，Open with Liver Server

image-20221201172551965

HTML概念

网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

二、HTML简介

2.1 什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)

  • 超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素
  • 标记:标签，不同的标签实现不同的功能
  • 语言:人与计算机的交互工具

2.2 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户 Out

接收用户输入 表单 信息传递给服务器 In

2.3 HTML书写规范

  • HTML标签是以尖括号包围的关键字
  • HTML标签通常是成对出现的，有开始就有结束
  • HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)
  • HTML标签不区分大小写,建议全小写

2.4 HTML发展史

img

vscode插件：Live Server 实时预览

三、HTML基本标签

3.1 结构标签

1
2
3
4
5
6

<html>:根标签       
    <head>：网页头标签
   		<title></title>:页面的标题      
    </head>      
    <body></body>：网页正文
</html>
属性名 代码 描述
text < body text=”#f00”></ body> 设置网页正文中所有文字的颜色
bgcolor < body bgcolor=”#00f”></ body> 设置网页的背景色
background < body background=”1.png”></ body> 设置网页的背景图

颜色的表示方式：

  • 第一种方式：用表示颜色的英文单词，例，red green blue
  • 第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405

img

3.2 排版标签

  • 可用于实现简单的页面布局
  • 注释标签：
  • 换行标签：< br />
  • 段落标签：< p>文本文字</ p>
    • 特点：段与段之间有空行
    • 属性：align对齐方式(left、center、right)

align 属性规定段落中文本的对齐方式。

兼容性注释

在 HTML 4.01 中，不赞成使用 p 元素的 align 属性；在 XHTML 1.0 Strict DTD 中，不支持 p 元素的 align 属性。

请使用 CSS 代替。

CSS 语法：<p style="text-align:right">

text-align: start 等效于left

text-align: end 等效于right

  • 水平线标签:

属性:

  • width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
  • size: 水平线的粗细 (像素表示，例如：10px)
  • color: 水平线的颜色
  • align: 水平线的对齐方式

课堂案例

img

3.3 块标签

使用CSS+DIV是现下流行的一种布局方式

标签 代码 描述
div < div></ div> 行级块标签，独占一行，换行
span < span></ span> 行内块标签，所有内容都在同一行

3.4 基本文字标签

font标签处理网页中文字的显示方式

属性名 代码 描述
size < font size=”7”></ font> 用于设置字体的大小，最小1号，最大7号
color < font color=”#f00”></ font> 用于设置字体的颜色
face < font face=”宋体”></ font> 用于设置字体的样式

在 HTML 4.01 中，font 元素不被赞成使用。

在 XHTML 1.0 Strict DTD 中，font 元素不被支持。

提示：请使用样式（代替 <font>）来定义文本的字体、字体颜色、字体尺寸 (opens new window)。

我是谁

3.5 文本格式化标签

使用标签实现标签的样式处理

标签 代码 描述
b < b></ b> 粗体标签
strong < strong></ strong> 加粗
em < em></ em> 强调字体
i < i></ i> 斜体
small < small></ small> 小号字体
big < big></ big> 大号字体
sub < sub></ sub> 下标标签
sup < sup></ sup> 上标标签
del < del></ del> 删除线

b&strong区别

相同：效果完全一样

不同：字母长度不同，出现时间不同，语义不同，关注者不同[UI/产品]

3.6 标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签 代码 描述
h1 < h1></ h1> 1号标题，最大字号
h2 < h2></ h2> 2号标题
h3 < h3></ h3> 3号标题
h4 < h4></ h4> 4号标题
h5 < h5></ h5> 5号标题
h6 < h6></ h6> 6号标题，最小字号

课堂案例

img

3.7 列表标签(清单标签)

无序列表：使用一组无序的符号定义， < ul>< /ul>

1
2
3

<ul type="circle">
    <li></li>
</ul>

1 2 3

属性值 描述 用法举例
circle 空心圆 < ul type=”circle”>< /ul>
disc 实心圆 < ul type=”disc”>< /ul>
square 黑色方块 < ul type=”square”>< /ul>

在 HTML 4.01 中，ul 元素的 “compact” 和 “type” 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中，ul 元素的 “compact” 和 “type” 属性是不被支持的。

提示：请使用样式来定义列表的类型。

可选的属性

属性 值 描述
compact(opens new window) compact 不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
type(opens new window) disc | square | circle 不赞成使用。请使用样式取代它。规定列表的项目符号的类型。
  • 1
  • 2
  • 3
  • 4

有序列表：使用一组有序的符号定义， < ol>< /ol>

1
2
3

<ol type="a" start="1">
    <li></li>
</ol>

1 2 3

属性值 描述 用法举例
1 数字类型 < ul type=”1”>< /ul>
A 大写字母类型 < ul type=”A” >< /ul>
a 小写字母类型 < ul type=”a”>< /ul>
I 大写古罗马 < ul type=”I”>< /ul>
i 小写古罗马 < ul type=”i”>< /ul>

列表嵌套：无序列表与有序列表相互嵌套使用

1
2
3
4
5
6
7
8
9
10

代码举例：
	<ol>
		<li></li>
        <li></li>
        <li>
        	<ul>
                <li></li>
            </ul>
        </li>
	</ol>

提示：推荐使用 list-style-type来定义列表的类型。

案例

img

3.8 图形标签

在页面指定位置处中引入一幅图片， < img />

属性名 描述
src 引入图片的地址
width 图片的宽度
height 图片的高度
border 图片的边框
align 与图片对齐显示方式
alt 提示信息
hspace 在图片左右设定空白
vspace 在图片的上下设定空白

在 HTML 4.01 中，不推荐使用 image 元素的 “align”、”border”、”hspace” 以及 “vspace” 属性。

img

3.9 链接标签

在页面中使用链接标签跳转到另一页面

    • 标签： < a href=””>< /a>
    • 属性：href:跳转页面的地址(跳转到外网需要添加协议)

设置跳转页面时的页面打开方式，target属性

    • _blank在新窗口中打开
    • _self在原空口中打开

锚标记

  • 指向同一页面中指定位置
    • 定义位置： < a name=”名称”>< /a>
    • 指向： < a href=”#名称”>< /a>

3.10 表格标签

普通表格(table,tr,td)

<table>
	<tr>
		<td></td>
	</tr>
</table>

表格的列标签(th)：内容有加粗和居中效果

1
2
3
4
5

<table>
	<tr>
		<th></th>
	</tr>
</table>

img

表格的列合并属性(colspan)：在同一行内同时合并多个列

1
2
3
4
5

<table>
	<tr>
		<td colspan=""></td>
	</tr>
</table>

表格的行合并属性(rowspan)：在同一列跨多行合并

1
2
3
4
5

<table>
	<tr rowspan="">
		<td></td>
	</tr>
</table>

完成如下的课程表：

image-20220710211646412

四、综合案例

image-20221205151323823

扩展知识：Emmet语法

ul>li*3{$$}

div#id1.style1{$}

img

::: info 如果编写过Emmet内容后，按下Tab键不能展开Emmet语法

image-20220711160711571

:::

五、HTML表单标签

html表单用于收集不同类型的用户输入数据

5.1 form元素常用属性

  • action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
  • method:请求方式：get 和post
    • get:
      • 地址栏,请求参数都在地址后拼接 path?name=”张三”&password=”123456”
      • 不安全
      • 效率高
      • get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据
    • post：
      • 地址栏：请求参数单独处理。
      • 安全可靠些
      • 效率低
      • post请求大小理论上无限；一般用于插入删除修改等操作
  • enctype:表示是表单提交的类型
    • 默认值：application/x-www-form-urlencoded 普通表单
    • multipart/form-data 多部分表单(一般用于文件上传)

5.2 input元素

作为表单中的重要元素，可根据不同type值呈现为不同状态

属性值 描述 代码
text 单行文体框 < input type=”text”/>
password 密码框 < input type=”password”/>
radio 单选按钮 < input type=”radio”/>
checkbox 复选框 < input type=”checkbox”/>
date 日期框 < input type=”date”/>
time 时间框 < input type=”time”/>
datetime 日期和时间框 < input type=”datetime”/>
email 电子邮件输入 < input type=”email”/>
number 数值输入 < input type=”number”/>
file 文件上传 < input type=”file”/>
hidden 隐藏域 < input type=”hidden”/>
range 取值范围 < input type=”range”/>
color 取色按钮 < input type=”color”/>
submit 表单提交按钮 < input type=”submit”/>
button 普通按钮 < input type=”button”/>
reset 重置按钮 < input type=”reset”/>
image 图片提交按钮 < input type=”image”/>

5.3 select 元素(下拉列表)

  • 单选下拉列表：< select>< /select>
  • 默认选中属性：selected=”selected”
1
2
3
4
5

<select>
    <option selected="selected">内容</option>
    ...
    <option></option>
</select>
  • 多选下拉列表属性： < select></ select>
  • 多选列表：multiple=”multiple”
1
2
3

<select multiple="multiple">
    <option></option>
</select>

5.4 textarea元素(文本域)

多行文本框： < textarea cols=”列” rows=”行”>< /textarea>

5.5 综合示例

image-20221205151731826

六、HTML框架标签

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

  • 使用框架的缺点：
    • 开发人员必须同时跟踪更多的HTML文档
    • 很难打印整张页面

6.1 框架结构标签frameset

TIP

框架结构标签（ < frameset>< /frameset>）用于定义如何将窗口分割为框架

  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积
    • <frameset rows="">< /frameset>
    • <frameset cols="">< /frameset>

6.2 框架标签frame

每个frame引入一个html页面

1
2
3
4

<frameset cols="*,*">
    <frame src="info1.html" />
    <frame src="info2.html" />
</frameset>

6.3 基本的注意事项

  • 不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用
  • 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在< frame>标签中加入：noresize=”noresize”。

6.4 综合案例

image-20221205152953987

七、HTML的其它标签和特殊字符

7.1 其他标签

1
2
3
4
5
6
7
8
9

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
 <!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>

7.2 特殊字符

1

占位符：空格 - &nbsp;

CSS

一 、引言

1CSS概念

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、 CSS简介

2.1 什么是CSS

  • CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素
  • 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的 应用优先级高的，不冲突的共同作用

2.2 CSS能干什么

  • 修饰美化html网页。
  • 外部样式表可以提高代码复用性从而提高工作效率。
  • html内容与样式表现分离，便于后期维护。

2.3 CSS书写规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

  • 选择器通常是您需要改变样式的 HTML 元素。
  • 每条声明由一个属性和一个值组成。

2.4 基础语法

选择器｛属性：值;属性:值….. ｝

语法示例
img

注意事项：

  • 请使用花括号来包围声明
  • 如果值为若干单词，则要给值加引号
  • 多个声明之间使用分号;分开
  • css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

三、 CSS导入方式

3.1 内嵌方式(内联方式)

把CSS样式嵌入到html标签当中，类似属性的用法

1

 <div style="color:blue;font-size:50px">This is my HTML page. </div>

3.2 内部方式

在head标签中使用style标签引入css

1
2
3

<style type=“text/css”> //告诉浏览器使用css解析器去解析
	div{color:red;font-size:50px}
</style>

3.3 外部方式

将css样式抽成一个单独文件，使用者直接引用

1
2
3
4
5
6
7

创建单独文件 div.css
内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部
	<link rel="stylesheet" type="text/css" href=“div.css"></link>
    rel:代表当前页面与href所指定文档的关系
    type:文件类型，告诉浏览器使用css解析器去解析
    href:css文件地址

3.4 @import方式

在页面中引入一个独立的单独文件

1
2
3
4

  <style type="text/css">
       @import url("div.css")
  </style>
 该内容放在head标签中

link和@import方式的区别：

  • link所有浏览器都支持，@import某些版本低的IE不支持
  • @import是等待html加载完成才加载
  • @import不支持js动态修改

四、 CSS选择器

主要用于选择需要添加样式的html元素

4.1 基本选择器

元素选择器： 在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}

1
2
3

<style type="text/css">
    span{color: red;font-size: 100px}
</style>

id选择器： 给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}

1
2
3
4
5
6
7
8
9
10

创建id选择器：
	<div id="s1">hello,everyone!</div>
	<div id="s2">hello,everyone!</div>
    <div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 
    <style type="text/css">
		#s1{color: red;font-size: 100px}
		#s2{color: green;font-size: 100px}
		#s3{color: blue;font-size: 100px}
    </style>

class选择器：给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}

1
2
3
4
5
6
7
8
9
10

创建class选择器：
    <div class="s1">hello,everyone!</div>
    <div class="s2">hello,everyone!</div>
    <div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：
    <style type="text/css">
        .s1{color: purple;font-size: 100px}
        .s2{color: pink;font-size: 100px}
        .s3{color: yellow;font-size: 100px}
    </style>

备注：以上基本选择器的优先级从高到低：id选择器，class选择器，元素选择器

4.2 属性选择器

  • 根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明
  • 格式为：
  • htm标签[属性=‘属性值’]{css属性:css属性值;}
  • html标签[属性]{css属性:css属性值;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

body内容：
	<form name="login" action="#" method="get">
        <font size="3">用户名：</font>
        <input type="text" name="username" value="zhangsan"><br>
		<font size="3">密码：</font>
        <input type="password" name="password" value="123456"><br/>
        <input type="submit" value="登录">
	</form>
head中书写：
    <style type="text/css">
        input[type='text'] {
            background-color: pink;
        }
        input[type='password'] {
            background-color: yellow;
        }
        font[size] {
            color: green
        }
        a[href] {
            color: blue;
        }
	</style>

4.3 伪元素选择器

  • 主要是针对a标签
  • 语法：
  • 静止状态 a:link{css属性}
  • 悬浮状态 a:hover{css属性}
  • 触发状态 a:active{css属性}
  • 完成状态 a:visited{css属性}
1
2
3
4
5
6
7
8
9
10
11
12
13

代码：
	<a href="https://hao.360.cn/">点我吧</a>
样式：
    <style type="text/css">
        <!--静止状态 -->
        a:link {color: red;}
        <!--悬浮状态 -->’
        a:hover {color: green;}
        <!--触发状态 -->
        a:active {color: yellow;}
        <!--完成状态 -->
        a:visited {color: blue;}
    </style>

4.4 层级选择器

父级选择器 子级选择器….，具体示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 <div id="div1">
     <div class="div11">
         <span>span1-1</span>
     </div>
     <div class="div12">
         <span>span1-2</span>
     </div>
</div>
<div class="div2">
    <div id="div22">
        <span>span2-1</span>
    </div>
    <div id="div23">
        <span>span2-2</span>
    </div>
</div>

1
2
3
4
5
6

<style type="text/css">
    #div1 .div11{color:red;}
    #div1 .div12{color:purple;}
    .div2 #div22{color:green;}
    .div2 #div23{color:blue;}
</style>

五、 CSS属性

5.1 文字属性

属性名 取值 描述
font-size 数值 设置字体大小
font-family 默体、宋体、楷体等 设置字体样式
font-style normal正常; italic斜体; 设置斜体样式
font-weight 100~900数值;bold;bolder; 粗体样式

5.2 文本属性

属性名 取值 描述
color 十六进制;表示颜色的英文单词; 设置文本颜色
text-indent 5px缩进5像素;20%缩进父容器宽度的百分之二十; 缩进元素中文本的首行
text-decoration none;underline;overline;blink; 文本的装饰线
text-align left;right;center 文本水平对齐方式
word-spacing normal;固定值; 单词之间的间隔
line-height normal;固定值; 设置文本的行高
text-shadow 四个取值依次是： 水平偏移；垂直偏移；模糊值；阴影颜色； 设置阴影及模糊效果

5.3 背景属性

属性名 取值 描述
background-color 16进制;用于表示颜色的英语单词; 设置背景色
background-image url(‘图片路径’) 设置背景图片
background-repeat repeat-y;repeat-x;repeat;no-repeat; 设置背景图的平铺方向
background-position top;bottom;left;right ; center; 改变图像在背景中的位置

5.4 列表属性

属性名 取值 描述
list-style-type disc等 改变列表的标识类型
list-style-image url(“图片地址”) 用图像表示标识
list-style-position inside;outside 标识出现在列表项内容之外还是内部

5.5 尺寸属性

  • width:设置元素的宽度
  • height:设置元素的高度

5.6 显示属性

显示属性display ，以下是常用取值：

  • none:不显示
  • block:块级显示
  • inline:行级显示

5.7 轮廓属性

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。常用属性：

属性名 取值 描述
outline-style solid(实线)/dotted(虚线)/dashed(虚线)等 设置轮廓的样式
outline-color 16进制;用于表示颜色的英文 设置轮廓的颜色
outline-width 数值 设置轮廓的宽度

5.8 浮动属性float

  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
  • 请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
浮动示例图
img
  • 再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
  • 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
浮动示例图
img

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

浮动示例图
img

clear 属性：规定元素的哪一侧不允许其他浮动元素。它的取值如下：

取值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。

5.9 定位属性

相对定位(relative)：元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<head>
	<style type="text/css">
		h2.pos_left {
			position: relative;
			left: -20px
		}
        h2.pos_right {
			position: relative;
			left: 20px
		}
	</style>
</head>
<body>
    <h2>这是位于正常位置的标题</h2>
	<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
	<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
	<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
	<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
	<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

绝对定位(absolute)：元素框从文档流完全删除，并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。

absolute定位原理剖析：1.在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
    <head>
		<meta charset="utf-8" />
		<style type="text/css">
			h2.pos_abs {
				position: absolute;
				left: 100px;
				top: 150px
			}
		</style>
	</head>
	<body>
		<h2 class="pos_abs">这是带有绝对定位的标题</h2>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
	</body>
</html>

固定定位(fixed)：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#left {
				width: 200px;
				height: 200px;
				background-color: red;
				position: fixed;
				left: 0px;
				bottom: 0px;
			}
			
			#right {
				width: 200px;
				height: 200px;
				background-color: green;
				position: fixed;
				right: 0px;
				bottom: 0px;
			}
			#middle{
				width: 200px;
				height: 200px;
				background-color: blue;
				position: fixed;
				left: 0px;
				bottom: 50%;
			}
			
		</style>
	</head>
	<body>
		<div id="left">左下</div>
		<div id="right">右下</div>
		<div id="middle">中间</div>
	</body>
</html>

六、 CSS盒子模型

盒子模型图
盒子模型

6.1 边框相关属性

属性名 取值 描述
border-style solid;double;dashed;dotted等 设置边框的样式
border-color 16进制;用于表示颜色的英文; 设置边框的颜色
border-width 数值 设置边框的粗

6.2 外边距相关属性

margin：外间距,边框和边框外层的元素的距离

属性名 取值 描述
margin top;right;bottom;left 四个方向的距离
margin-top 数值 上间距
margin-bottom 数值 下间距
margin-left 数值 左间距
margin-right 数值 右间距

6.3 内边距相关属性

padding：内间距,元素内容和边框之间的距离((top right bottom left))

属性值 描述  
padding-left    
padding-right    
padding-top    
padding-bottom    

七、 CSS3扩展属性

7.1 border-radius创建圆角

示例：border-radius: 25px;

圆角示例图
img

7.2 box-shadow:用于向方框添加阴影

示例：box-shadow: 10px 10px 5px #888888;

方框加阴影示例图
img

7.3 background-size: 属性规定背景图片的尺寸

1
2
3
4
5

<body style="text-align: center;
    background:url(img/1.png);
    background-size: 200px 300px;
    background-repeat: no-repeat;">
</body>

7.4 background-image:为指定元素使用背景图像

背景图片示例图
img

7.5 text-shadow: 可向文本应用阴影。

示例：text-shadow: 5px 5px 5px #ffff00;

文本应用阴影示例图
img

八、 HTML结合CSS完成淘宝分类页

8.1 案例效果图

案例效果图
img

JavaScript

什么javaScript

html: 定义也界面元素，画框架的

CSS：美化网页元素的

JavaScript:让页面元素可以动起来，还可以跟用户和跟服务端交互。

JavaScript简介

解释型的动态语言，弱类型【不需要明确指定变量的类型，JS引擎自动判断】

String Number Boolean Undefined Null

他是运行在客户端浏览器的，浏览器内置的JS解释器。

JavaScript使用【重点】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS入门</title>
</head>
<body>
    <script>
        document.write('Hello JavaScript!');
        document.write('Hello Java!');
    </script>
</body>
</html>

内部位置：一般情况下，js代码编写在 body或者head内置，使用script标签括起来js代码。

外部JS文件使用：
image-20220715093720231

js的数据类型

五种：Number 数值 String 字串 Boolean 布尔[真假] Undefined 未定义 Null 空类型

document: 网页文档

html内容：可以带html标签 也可以带样式

document.write() 作用是：到页面上输出html内容。

json数据格式【重点】

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式

作用是：数据传递，前后端，浏览器和服务器之间传递数据使用的一种简单的数据格式

语法： var chaofen = {id:1,name:'goudan',age:18}

大括号括起来标识一个对象；

对象里可以有很多个属性 ，格式是 属性名:属性值

如果有多个属性，属性之间可以用逗号隔开。

属性名要不要引号都可以；var chaofen = {'id':1,'name':'goudan','age':18}

console和document的区别

使用的方法不一样：

网页： document.write()

控制台： console.log()

最大的区别是:

控制台打印的东西是给开发人员看的，用于代码调试

网页打印的东西是给用户看的。

浏览器控制台界面
image-20220715114158913

js中的数组【重点】

语法： var arr = [值1,值2,…];

举例： var num = [1,2,3,4];

如果要获取数组中的某个元素： 数组名[下标]

var aa = [1,’hello’,true];

js的数组中可以是不同类型的数据

1
2
3
4
5
6
7
8
9
10

// 普通数组
var num = [1, 2, 3, 4];
document.write(num);
document.write('<br />');
document.write(num[0]);
document.write('<hr />');
//  js的数组中可以是不同类型的数据
var aa = [1, 'hello', true];
document.write(aa);
document.write('<hr />');

对象数组：

1
2
3
4
5
6
7
8
9
10
11
12

/* 对象数组的第一种方式 先定义对象，把对象放到数组中 */
var chaofan = { name: '超凡', age: 16 };
var limeng = { name: '李萌', age: 99 };
var superman = [chaofan, limeng];
console.log(superman);

/* 对象数组的第二种方式 直接在数组中写对象 */
var person = [
    { name: '超凡', age: 16 },
    { name: '李萌', age: 99 }
];
console.log(person);

运算符

算术运算符 + - * / % ++ --

比较运算符 == === > < >= <= !=

逻辑运算 && || ！

== 比较内容

=== 严格相等，内容和类型都得相同才是true

三目运算符

// 三目运算符

var cf = 18

var lm = 99;

console.log(cf > lm ? ‘超凡是大哥’ : ‘超凡是小弟’);

全局函数

全局函数可以直接使用的

parseInt() 转整型的函数

parseFloat() 转浮点数的函数

Date() 获取系统当前事件的函数

alert() 警告弹窗

confirm() 确认弹窗

prompt() 提示弹窗

条件分支结构

if-else

1
2
3
4
5
6

var weather = '下冰雹';
if (weather == '下雨') {
    document.write('在家打代码');
} else {
    document.write('在学校打代码');
}

switch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var weather = '下冰雹';
switch (weather) {
    case '下雨':
        document.write('在家打代码');
        break;
    case '晴天':
        document.write('在学校打代码');
        break;
    default:
        document.write('出去玩');
        break;
}

var num = 2;
switch (num) {
    case 1:
        document.write('星期一');
        break;
    case 2:
        document.write('星期二');
        break;
    default:
        document.write('休息日');
        break;
}

循环结构

for-i循环

let 声明的是局部变量

var 声明的是全局变量

1
2
3
4
5
6

var sum = 0;
for (let num = 1; num <= 200; num++) {
    sum += num;
}
document.writeln(sum);
document.write('<hr />');

while循环

1
2
3
4
5
6
7
8
9

// while循环
var sum = 0;
var num1 = 1;
while (num1<=200) {
    sum+=num1;
    num1++;
}
document.writeln(sum);
document.write('<hr />');

do-while循环

1
2
3
4
5
6
7
8

// do-while
var sum = 0;
var num2 = 1;
do {
    sum+=num2;
    num2++;
} while (num2<=200);
document.write(sum);

for-of 循环【重点】

for-of只能遍历可迭代的对象, 数组，字串等

可以循环获取到数组的每个值

遍历字串，可以拆分字串

image-20220715153605341

遍历数组

image-20220715153706228

for-of 遍历的是可迭代的对象，比如数组，字串，对象不能！！！

image-20220715154048165

for-in循环【重点】

遍历的是数组的下标和对象的属性，既可以遍历数组又可以遍历对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// for-in 可以遍历对象中的全部属性
var stu = { name: '连冠欣', age: 18 }
for (const key in stu) {
    document.writeln(key);
    // 对象[属性名]
    document.writeln(stu[key]);
    document.write('<br />');
}
document.write('<hr />');

var arr2 = ['董硕','腾飞','狗蛋'];
for (const key in arr2) {
    document.writeln(key);
    document.writeln(arr2[key]);
}

对象数组？遍历

for-each循环

可以使用箭头函数，类似于Java的lambda表达式

只能遍历数组

1
2
3

// for-each 可以遍历数组，需要使用 => 箭头函数
var arr = ['郑州','洛阳','南街村'];
arr.forEach(a => document.writeln(a));

JS函数【重点】

函数定义

1
2
3
4
5
6
7
8
9

// java定义函数
public int add(int a,int b){
	return a+b;
}

// js定义函数
function add(a,b){
	return a+b;
}

使用function声明一个函数，接着写方法名，方法参数直接写变量就行[不用写类型]

方法也不用写返回值类型

如果方法中需要返回东西，直接return,如果不需要返回东西，就不写return

1
2
3
4
5
6
7
8
9

// 函数定义
function add(a,b) {
    return a + b;
}

// add(1,2) 函数调用
// document.writeln(add(3,4));
var sum = add(10,20);
document.writeln(sum);

常用函数

警告弹窗

只能单向的提示信息，不能交互

1
2

浏览器弹窗
alert('稀客大大');
效果如下
image-20220715161302414

确认弹窗

用户可以选择[确认/取消]，有了一定的自主权

1
2
3

// 可以确定或取消 返回true/false
var ans = confirm('你是大傻X吗');
document.writeln(ans);
效果如下
image-20220715161459166
image-20220715161515698

如果用户选择了确定，会返回 true,否则返回false

提示弹窗

交互更加丰富了，用户有了更多的自主权，用户 可以输入自己的内容进行回答

1
2
3

// prompt 你可以自定义答案
var ans = prompt('你喜欢腾飞吗？','喜欢');
document.writeln(ans);
效果如下
image-20220715161840778
页面显示： 喜欢

事件

什么叫事件？ 就是发生了某种行为。。 包括鼠标的行为，键盘的行为，浏览器的行为，网页元素的行为等

在这种行为发生的时候，做什么事情【指定一个处理函数】，就是事件机制！

比如：我们可以指定在用户点击HTML元素的时候[元素的onclick事件发生时]，做什么处理。

事件名称 描述
onchange HTML 元素内容改变
onclick 用户点击 HTML 元素
onmouseover 用户将鼠标移入一个HTML元素中
onmousemove 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeyup 键盘
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onsubmit 表单提交

JS正则表达式【重点】

正则表达式是什么？

是描述字串的字串？ 可以用户匹配、查找、替换字符串。

官方解释：正则表达式是描述字符模式的对象。

作用：正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具

语法格式：

var patt1 = new RegExp(‘\w’) 匹配一个字符类型的字串

var patt2 = new RegExp(‘\w’,i) 匹配一个字符类型的字串

推荐第二种写法 var patt = /\w/i

快速看一个字符匹配的例子: 配到任意一个字符，默认只返回第一个匹配到的字符。
image-20220718095835962

匹配任意一个字符

并且开启了全局匹配模式，可以匹配全部能匹配到的字符。

1
2
3
4
5
6
7
8
9

var patt = /\w/g;
patt.exec('abcd')
#['a', index: 0, input: 'abcd', groups: undefined]
patt.exec('abcd')
#['b', index: 1, input: 'abcd', groups: undefined]
patt.exec('abcd')
#['c', index: 2, input: 'abcd', groups: undefined]
patt.exec('abcd')
#['d', index: 3, input: 'abcd', groups: undefined]

匹配非字符

是对\w的取反操作，类似的还有 \d匹配数字，\D匹配非数字。

1
2
3

var patt = /\W/
patt.exec('123abc def')
#[' ', index: 6, input: '123abc def', groups: undefined]

匹配数字

匹配任意一个数字，没有使用全局匹配模式，只匹配查找到的第一个字符

1
2
3
4
5
6
7

var patt = /\d/
patt.exec('abcd')
# null 返回的结果，没有找到
patt.exec('123')
#['1', index: 0, input: '123', groups: undefined]
patt.exec('123')
#['1', index: 0, input: '123', groups: undefined]

复杂字串的匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var patt = /\d/
patt.exec('abcd1234f &6')
#['1', index: 4, input: 'abcd1234f &6', groups: undefined]

var patt = /\d/g
# 添加上了全局匹配模式
patt.exec('abcd1234f &6')
# ['1', index: 4, input: 'abcd1234f &6', groups: undefined]
patt.exec('abcd1234f &6')
# ['2', index: 5, input: 'abcd1234f &6', groups: undefined]
patt.exec('abcd1234f &6')
# ['3', index: 6, input: 'abcd1234f &6', groups: undefined]
patt.exec('abcd1234f &6')
# ['4', index: 7, input: 'abcd1234f &6', groups: undefined]
patt.exec('abcd1234f &6')
# ['6', index: 11, input: 'abcd1234f &6', groups: undefined]

正则修饰符补充

匹配固定字符

1
2
3
4
5

var patt = /a/
patt.exec('abcdAbcda')
# ['a', index: 0, input: 'abcdAbcda', groups: undefined]
patt.exec('abcdAbcda')
# ['a', index: 0, input: 'abcdAbcda', groups: undefined]

忽略大小写匹配

1
2
3
4
5
6

var patt = /a/i

patt.exec('abcdAbcda')
# ['a', index: 0, input: 'abcdAbcda', groups: undefined]
patt.exec('abcdAbcda')
# ['a', index: 0, input: 'abcdAbcda', groups: undefined]

全局匹配

1
2
3
4
5
6

var patt = /a/g

patt.exec('abcdAbcda')
# ['a', index: 0, input: 'abcdAbcda', groups: undefined]
patt.exec('abcdAbcda')
# ['a', index: 8, input: 'abcdAbcda', groups: undefined]

忽略大小写全局匹配

1
2
3
4
5
6

var patt = /a/gi

patt.exec('abcdAbcda')
# ['a', index: 0, input: 'abcdAbcda', groups: undefined]
patt.exec('abcdAbcda')
# ['A', index: 4, input: 'abcdAbcda', groups: undefined]

上面的演示，我们是在浏览器控制台中操作的，比较直观，简洁

那么在代码中如何使用呢？？本质是一样的，把控制台代码放到html文件中

在js脚本中使用正则

image-20220718105232964

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式</title>
    <script>
        var patt = /\d/g;
        var res;
        // 循环获取匹配到的字符
        while ((res = patt.exec('abcd123')) != null) {
            console.log(res);
            console.log(res[0] + '==='+res.index + '===='+res.input);
        }
    </script>
</head>
<body>
</body>
</html>

量词

+ 指定字符至少出现一次【一次或多次】

* 指定字符出现0次或多次

image-20220718111222343

特殊符号 含义
^n 匹配任何开头为 n 的字符串。
n$ 匹配任何结尾为 n 的字符串。
String对象的正则表达式方法
image-20220718113801461

修饰符：用于执行区分大小写和全局匹配:

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

方括号：用于查找某个范围内的字符

表达式 描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。

元字符（Metacharacter）：是拥有特殊含义的字符：

元字符 描述
. 查找单个字符，除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NULL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词：用于表示重复次数的含义

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，”caaaaaaandy” 中所有的 “a”。
n* 匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，”A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n? 匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，”angle” 中的 “le”。
n{X} 匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，”caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n{X} 前面的模式 n 连续出现X 次时匹配
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法 描述
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。

支持正则表达式的 String 对象的方法

方法 描述
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。

正则表达式的使用

  • test方法：搜索字符串指定的值，根据结果并返回真或假
  • exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

DOM/BOM是什么

DOM : Document 文档 Object 对象 Model 模型

html > body > div 文档对象模型：可以操作页面元素

BOM: Browser 浏览器 Object 对象 Model 模型

浏览器对象模型：可以操作浏览器相关的内容：地址栏，历史记录，窗口，滚动条

获取DOM元素的三种方式

先找到HTML元素

通过ID找到 通过class找到 通过标签tagtag:<h1> <img> <span>。。。找到

Element返回单个元素 Elements返回一个数组
image-20220718150412718

JS的执行顺序： 从上到下一行一行执行

innerText/innerHTML 是属性不是方法，不能使用() 获取和修改值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作</title>
    <script>
        // div 是 null 没有找到元素的时候返回的是null
        var div = document.getElementById('div');

        // 找到id="div1"的元素，并返回
        var div1 = document.getElementById('div1');

        // 找到id="div2"的元素，并返回
        var div2 = document.getElementById('div2');

        // 通过样式类名获取元素，返回的是一个**数组** 获取某个元素可以通过数组的下标
        var clsdiv = document.getElementsByClassName('cls1');

        // 通过name属性获取元素,注意返回的也是数组
        var sex = document.getElementsByName('sex');

        // 通过tag标签名获取元素,注意返回的也是数组
        var span = document.getElementsByTagName('span');
    </script>
</head>
<body>
    <div id="div1" class="cls1">DIV1111</div>
    <div id="div2" class="cls1">DIV222</div>
    <div>DIV333</div>
    <span name="mytext">AAAA</span>
    <input type="text" name="username">
    <input type="text" name="password">
    <hr />
    性别:<input type="radio" name="sex" id="">男  <input type="radio" name="sex" id="">女 
</body>
</html>

操作HTML元素

获取修改：元素本身[创建，修改，删除]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerText&innerHTML</title>
</head>

<body>
    <p id="p1">修改之前的文字</p>

    <p id="p2">
        <font color="red">修改之前的文字</font>
    </p>

    <p id="p3">修改之前的文字</p>

    <script>
        // 通过ID找到p
        var p1 = document.getElementById('p1');
        // 获取元素的文本内容
        console.log('p1-text:' + p1.innerText);
        console.log('p1-html:' + p1.innerHTML);
        // 要特别注意下，JS的执行顺序问题

        var p2 = document.getElementById('p2');
        console.log('p2-text:' + p2.innerText);
        console.log('p2-html:' + p2.innerHTML);

        var p3 = document.getElementById('p3');
        p3.innerText='修改之后的文字';

    </script>
</body>

</html>

JS修改元素属性，演示点击按钮修改图片地址

JS修改元素的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS操作</title>
</head>

<body>
    <div id="div1">这里的一个DIV</div>
    <button onclick="changeCss()">点我</button>
    <script>
        function changeCss() {
            var div1 = document.getElementById('div1');
            div1.style.width = '200px';
            div1.style.height = '200px';
            div1.style.backgroundColor = 'red';
            div1.style.border = 'dotted blue 10px';
        }
    </script>
</body>

</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

注意：

之前元素的css样式中有中划线的-,在JS操作样式时全都要换成驼峰名字,比如下面的属性

CSS样式名称 JS中样式名称
background-color backgroundColor
font-size fontSize

事件监听

添加事件监听

EventListener: 事件监听

HTML元素中都有一个添加事件监听的方法，addEventListener()

他的作用是：给元素绑定一个指定的事件处理函数，触发元素对应的事件时，会回调处理函数。

语法： 元素对象.addEventListener(事件名称，处理函数)，其实还有第三个参数，事件冒泡

事件名称：比如 click mouseover mouseout resize keyup keydown。。

处理函数：可以是命名函数，也可以是匿名函数

image-20220718171056833

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听</title>
</head>

<body>
    <div id="div1">div的内容</div>
    <div id="div2">div2的内容</div>

    <script>
        // 找到div这个元素
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');

        // 给div1添加点击的事件监听
        div1.addEventListener('click', changeCss);
        div2.addEventListener('mouseover', changeCss);
        div2.addEventListener('mouseout', changeCss2);

        // 使用命名函数，我们可以通过参数接收事件对象
        function changeCss(event) {
            // 获取到触发这个事件的对象 event.target
            var t = event.target;
            t.style.color = 'red';
            t.style.fontSize = '30px';
        }

        function changeCss2(event) {
            event.target.style.color='blue';
        }

    </script>
</body>

</html>

冒泡和捕获

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

img

1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；

注意看这里的红色箭头，标识执行顺序！

image-20220718172351287

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡和事件捕获</title>
</head>

<body>
    <div id="div1">
        div的内容
        <p id="p1">P段落标签的内容</p>
    </div>

    <script>
        // 1、找元素
        var div1 = document.getElementById('div1');
        var p1 = document.getElementById('p1');
        // 2、添加事件监听，第三个参数默认是false冒泡阶段执行，如果改为true就是事件捕获阶段执行
        div1.addEventListener('click',showMsg,false);
        p1.addEventListener('click',showMsg2,true);

        function showMsg(event) {
            alert('div1触发点击事件');
        }

        function showMsg2(event) {
            alert('p1触发点击事件');
        }

    </script>
</body>

</html>

移除事件监听

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

1

element.removeEventListener("mousemove", myFunction);

操作元素

创建元素

document.createElement(‘标签名’) 创建一个新的元素

追加元素

1、 先找到父元素

2、把第一步创建的元素追加到父元素内部 appendChild()

删除元素

1、先找到父元素

2、带哦用父元素的 removeChild(子元素对象)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素创建和删除</title>
</head>
<body>
    <div id="div1"></div>

    <button onclick="removeP()">删除P段落</button>

    <script>
        // 1、创建元素
        var p = document.createElement('p');
        var text = document.createTextNode('新的段落内容文字');
        // 2、追加元素
        p.appendChild(text);
        // 3、把p标签追加到div内
        var div1 = document.getElementById('div1');
        div1.appendChild(p);


        // 删除元素的函数
        function removeP() {
            div1.removeChild(p);
        }

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

浏览器BOM

全局函数，变量都是window的对象，window可以省略

比如： alert() window.alert()

parseInt() window.parseInt()

window的尺寸

浏览器窗口宽高

innerHeight：高度 681 innerWidth：宽度 648

document.body.clientHeight : 获取页面内容的高度

document.body.clientWidth：获取页面内容的宽度

Window Screen

屏幕宽高

1
2

document.write("可用宽度: " + screen.availWidth);
document.write("可用高度: " + screen.availHeight);

Window Location

浏览器地址栏

window.location.assign(“http://www.baidu.com/”) 手动设置地址栏地址，并自动跳转

image-20220719095312532

Window History

浏览器历史记录

window.history.forward() 前进

window.history.back() 后退

window.history.go(数字) 数字：如果是正的，就是前进几步，如果是负值，就是后退几步

  • window.history.go(1) 前进一步

Window Navigator

浏览器信息：名称、版本、代号等

1
2
3
4
5
6
7
8
9
10
11

<div id="example"></div>
<script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.language + "</p>";
    document.getElementById("example").innerHTML=txt;
</script>

JavaScript定时器

定义定时器

固定时间间隔，周期执行的 setInterval(函数,时间)

函数： 做什么事情

时间：固定的时间间隔，比如每秒都做什么事情 1000 毫秒单位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>

<body>
    <h1>每隔一秒中到页面上追加一个p段落</h1>
    <h1 id="now">系统时间</h1>

    <script>

        /* function createP() {
            // 1、创建一个p段落标签
            var p = document.createElement('p');
            var text = document.createTextNode('p段落p段落p段落p段落');
            p.appendChild(text);
            document.body.appendChild(p);
        }

        setInterval(createP, 1000); */

        var now = document.getElementById('now');
        
        // 更新系统时间
        setInterval(() => {
            now.innerText = new Date().toLocaleString();
        }, 1000);
    </script>
</body>

</html>

固定时间之后，执行一次的

1
2
3
4
5
6
7
8
9

<body>
    <h1 id="now">系统时间</h1>
    <script>
        // 演示3秒钟后 只执行一次的定时器
        setTimeout(() => {
            document.getElementById('now').innerText = new Date().toLocaleString();
        }, 3000);
    </script>
</body>

关闭定时器

setInterval：设置固定时间间隔周期执行的定时器

clearInterval：清除定时器的

setTimeout：固定时间之后 只执行一次的定时器

clearTimeout：清除定时器

语法：设置定时器时会有个返回值，这个返回值表示定时器对象，clearInterval需要传入定时器对象。

var timer = setInterval(函数，时间);

clearInterval(timer)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除定时器</title>
</head>

<body>
    <h1 id="now">系统时间</h1>
    <button id="btn">清除定时器</button>
    <script>
        var now = document.getElementById('now');
        // 更新系统时间
        var timer = setInterval(() => {
            now.innerText = new Date().toLocaleString();
        }, 1000);
        // 点击按钮清除定时器
        var btn = document.getElementById('btn');
        btn.onclick = ()=>{
            // 需要传入定时器的名字
            clearInterval(timer);
        }
    </script>
</body>
</html>

Ajax

一、引言

1.1 什么是JSON

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (W3C制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

1.2 JSON语法

  • [] 表示数组
  • {} 表示对象
  • ”” 表示是属性名或字符串类型的值
  • : 表示属性和值之间的间隔符
  • , 表示多个属性的间隔符或者是多个元素的间隔符

二、JSON解析【重点】

要解析的字符串：将字符串解析为Java对象

1
2
3
4

//对象嵌套数组嵌套对象
String json1="{'id':1,'name':'JAVAEE-1703','stus':[{'id':101,'name':'刘一','age':16}]}";
//数组
String json2="['北京','天津','杭州']";
  • 初始的类：
    • Student.java
    • Grade.java
1
2
3
4
5
6

public class Student {
    private int id;
    private String name;
    private int age;
    //此处省略get和set方法
}

1
2
3
4
5
6

public class Grade {
    private int id;
    private String name;
    private ArrayList<Student> stus;
    //此处省略get和set方法
}

2.1 FastJSON解析

  • Fastjson 是一个 Java 库，可以将 Java 对象转换为 JSON 格式，当然它也可以将 JSON 字符串转换为 Java 对象
  • 提供了 toJSONString() 和 parseObject() 方法来将 Java 对象与 JSON 相互转换：
    • 调用toJSONString方 法即可将对象转换成 JSON 字符串
    • parseObject 方法则反过来将 JSON 字符串转换成对象。

parseObject方法：字符串转换成对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

public class FASTJson {
    //解析
    @Test
    public void test1() {
        // 对象嵌套数组嵌套对象
        String json1 = "{'id':1,'name':'JAVAEE-1703','stus':[{'id':101,'name':'刘铭','age':16}]}";
        // 数组
        String json2 = "['北京','天津','杭州']";
        //1、
        //静态方法
        Grade grade=JSON.parseObject(json1, Grade.class);
        System.out.println(grade);
        //2、
        List<String> list=JSON.parseArray(json2, String.class);
        System.out.println(list);
    }
}

toJSONString方法：对象转换成 JSON 字符串

1
2
3
4
5
6
7
8
9
10
11
12
13

public class FASTJson {
//生成
    @Test
    public void test2(){
        ArrayList<Student> list=new ArrayList<>();
        for(int i=1;i<3;i++){
            list.add(new Student(101+i, "码子", 20+i));
        }
        Grade grade=new Grade(100001,"张三", list);
        String json=JSON.toJSONString(grade);
        System.out.println(json);
    }
}

2.2 Jackson解析

  • Jackson 是一个能够将Java对象序列化为JSON字符串，也能够将JSON字符串反序列化为Java对象的框架；
  • 通过方法readValue和writeValue实现；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

public class JackSonTest {
    //解析
    @Test
    public void test1() throws Exception{
        // 对象嵌套数组嵌套对象
        String json1 = "{\"id\":1,\"name\":\"JAVAEE-1703\",\"stus\":[{\"id\":101,\"name\":\"刘一\",\"age\":16}]}";
        // 数组
        String json2 = "[\"北京\",\"天津\",\"杭州\"]";
        //1、
        ObjectMapper mapper=new ObjectMapper();
        Grade grade=mapper.readValue(json1, Grade.class);
        System.out.println(grade);
        //2、
        ArrayList<String> list=mapper.readValue(json2, 
                new TypeReference<ArrayList<String>>() {
        });
        System.out.println(list);
    }
    //生成
    @Test
    public void test2() throws JsonProcessingException{
        ArrayList<Student> list=new ArrayList<>();
        for(int i=1;i<3;i++){
            list.add(new Student(101+i, "码子", 20+i));
        }
        Grade grade=new Grade(100001,"张三", list);
        ObjectMapper mapper=new ObjectMapper();
        //将对象转换为JSON格式字符串
        String json=mapper.writeValueAsString(grade);
        System.out.println(json);
    }
}

2.3 浏览器处理JSON字符串

  • JSON.stringify()
1
2
3

var json={name:'zs',age:34};
var str=JSON.stringify(json);
alert(str);

2.4 流览器转换为json对象

JSON.parse()

三、Ajax使用【重点】

3.1 什么是AJAX?

  • AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  • AJAX = Asynchronous异步 JavaScript and XML。
  • AJAX 是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页。

3.2 AJAX工作原理

AJAX工作原理
img1
  • AJAX是基于现有的Internet标准，并且联合使用它们：
  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

3.3 AJAX实例

  • html代码，上面的 AJAX 应用程序包含一个 div 和一个按钮。
  • div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：
1
2

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

接下来，在页面的 head 部分添加一个 < script> 标签。该标签中包含了这个 loadXMLDoc() 函数：

1
2
3
4
5
6
7
8

<head>
<script>
function loadXMLDoc()
{
    .... AJAX 脚本执行 ...
}
</script>
</head>

3.4 创建XMLHttpRequest对象

  • XMLHttpRequest对象是AJAX的基础。
  • 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
  • XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。创建 XMLHttpRequest 对象的语法：
1

var xmlhttp=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

1

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

1
2
3
4
5
6
7
8
9
10
11

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

3.5 XMLHttpRequest请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

1
2

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步），并且XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true；
send(string) 将请求发送到服务器。string：仅用于 POST 请求
  • GET 还是 POST？
  • 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
  • 然而，在以下情况中，请使用 POST 请求：
    • 无法使用缓存文件（更新服务器上的文件或数据库）
    • 向服务器发送大量数据（POST 没有数据量限制）
    • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

1
2
3
4
5
6
7
8
9

//示例一：一个简单的 GET 请求：
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
//示例二：在上面的例子中，您可能得到的是缓存的结果，为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
//示例三：如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST 请求

1
2
3
4
5
6
7

//示例一：一个简单 POST 请求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
方法 描述
setRequestHeader(header,value) 向请求添加 HTTP 头。header: 规定头的名称 value: 规定头的值
  • 对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
  • 通过 AJAX，JavaScript 无需等待服务器的响应，而是：
    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理
  • 当使用Async=true时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
1
2
3
4
5
6
7
8
9
10

//绑定执行函数：
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
  • 如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
  • 我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
  • 请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
  • 注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

3.6 readyState

  • 每当 readyState 改变时，就会触发 onreadystatechange 事件。
  • 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
  • readyState 属性存有 XMLHttpRequest 的状态信息。
  • 当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
  • 下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status 例：200: “OK” ；404: 未找到页面 
1
2
3
4
5
6
7

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
响应码 描述
100 客户必须继续发出请求
101 客户要求服务器根据请求转换HTTP协议版本
200 交易成功
201 提示知道新文件的URL
202 接受和处理、但处理未完成
203 返回信息不确定或不完整
204 请求收到，但返回信息为空
205 服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206 服务器已经完成了部分用户的GET请求
300 请求的资源可在多处得到
301 删除请求数据
302 在其他地址发现了请求数据
303 建议客户访问其他URL或访问方式
304 客户端已经执行了GET，但文件未变化
305 请求的资源必须从服务器指定的地址得到
306 前一版本HTTP中使用的代码，现行版本中不再使用
307 申明请求的资源临时性删除
400 错误请求，如语法错误
401 请求授权失败
402 保留有效ChargeTo头响应
403 请求不允许
404 没有发现文件、查询或URl
405 用户在Request-Line字段定义的方法不允许
406 根据用户发送的Accept拖，请求资源不可访问
407 类似401，用户必须首先在代理服务器上得到授权
408 客户端没有在用户指定的饿时间内完成请求
409 对当前资源状态，请求不能完成
410 服务器上不再有此资源且无进一步的参考地址
411 服务器拒绝用户定义的Content-Length属性请求
412 一个或多个请求头字段在当前请求中错误
413 请求的资源大于服务器允许的大小
414 请求的资源URL长于服务器允许的长度
415 请求资源不支持请求项目格式
416 请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417 服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500 服务器产生内部错误
501 服务器不支持请求的函数
502 服务器暂时不可用，有时是为了防止发生系统过载
503 服务器过载或暂停维修
504 关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505 服务器不支持或拒绝支请求头中指定的HTTP版本

3.7 XMLHttpRequest响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
  • responseText 属性
    • 如果来自服务器的响应并非 XML，请使用 responseText 属性。
    • responseText 属性返回字符串形式的响应，因此您可以这样使用：
1

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

1

  • responseXML 属性
    • 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
1
2
3
4
5
6
7
8

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

3.8 使用回调函数

  • 回调函数是一种以参数形式传递给另一个函数的函数。
  • 如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
  • 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
1
2
3
4
5
6
7
8
9
10

function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

四、AJAX的使用

4.1 AJAX与服务器交互

  • 模拟登陆验证
  • 验证用户是否可以注册，利用AJAX技术!进行动态验证
    • 编写注册页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="./ajax.js"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
   		<center>
   			 <font color="red" size="7">qq注册页面</font>
   			 <input type="text" name="username" onkeyup="kp(this)" /> <span id="sp"></span> <br/>	 
   			 <input type="password" name="password"/><br/>
   			 <input type="submit" value="注册"/>
   		</center>
   		<script type="text/javascript">
   			
   			//当用户名输入框输入内容就调用此方法
   			function kp(ipt){
   			 
   			 //1.获取input输入框的value
   			   var value = ipt.value;
   			 //2.进行验证
   			   if(value != null && value !=""){
   			       	//1-5
   			       	//1.创建Ajax
   			       	var xmlhttp = getAjax();
   			       	
   			       	//2.设置状态改变监听
   			       	xmlhttp.onreadystatechange = function(){
   			       		
   			       		//5获取响应数据
   			       		if(xmlhttp.readyState == 4 && xmlhttp.status ==200)
   			       		{
   			       			
   			       			var result = xmlhttp.responseText; //获取结果
   			       			
   			       			//  1 行    2 不行
   			       			
   			       			//1.找到span标签
   			       			
   			       			var sp = document.getElementById("sp");
   			       			
   			       			if(result == "1"){
   			       				//成功的 span 提示一句绿色的话		
   			       				sp.innerHTML=""; //清空
   			       			 	var ft = document.createElement("font");
   			       				var fttext = document.createTextNode("恭喜您!可以注册!!"); //文本标签
   			       				ft.setAttribute("color", "green");
   			       				ft.appendChild(fttext);
   			       				sp.appendChild(ft);  
   			       			}else{
   			       				//失败的 span 提示一句红色的话
   			       				sp.innerText="用户已经被注册!";
   			       				sp.style.color = "red";
   			       			}
   			       		}
   			       	
   			       	}
   			       	//3.设置ajax method  url
   			       	xmlhttp.open("POST",
   			       	 "${pageContext.request.contextPath}/servlet/DealServlet");			         					//4.发送请求
   			        //设置一个请求头
   			        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   			        xmlhttp.send("value="+value);
   			   
   			   }	
   			}
   		</script>
  </body>
</html>

4.2 编写AJAX处理servlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

public class DealServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//0.设置编码格式
		request.setCharacterEncoding("UTF-8");
	    response.setContentType("text/html;charset=UTF-8");
		//1.
	    String value = request.getParameter("value");
		//2.
	    String  result = null;
	    if (value.equals("root") | value.equals("admin")) {
		   result = "2";
		   //代表已经存在
		}else{
			//可以注册
			result = "1";
		}
		//3.
		response.getWriter().write(result);   
    }	
}

BootStrap

2.1 Bootstrap概述

  • Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
  • Boostrap特点： 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持：
    • 所有的主流浏览器都支持 Bootstrap。
    • Internet Explorer Firefox Opera Google Chrome Safari。
    • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
    • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

2.2 响应式页面案例

  • 需求:
    • 创建一套页面!根据上网设备的不同自动调节显示的效果!
    • m.taobao.com
    • taobao.com
  • Bootstrap的使用步骤：
    • 下载bootstrap：https://v3.bootcss.com/
    • 导入bootstrap.css文件
    • 导入jquery.js
    • 导入bootstrap.js
    • 将所有的内容放到布局容器中
1
2
3
4
5
6
7
8

.container 类用于固定宽度并支持响应式布局的容器。
	<div class="container">
		...
	</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
	<div class="container-fluid">
		...
	</div>

2.3 Bootstrap的组成

  • 全局css的样式 排版 字体 段落对齐 按钮 图片
  • 组件
  • js插件

2.4 栅格系统

2.4.1 什么是栅格系统

12栅格系统 为什么不是11，13，5栅格系统？

1 -12

2-6

3-4

4-3

6-2

12-1

  • Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
    • 注意: Bootstrap将每一行分成12份!
  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
  • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
    • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
    • 通过“行（row）”在水平方向创建一组“列（column）”。
    • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
    • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
    • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
    • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*

2.4.2 媒体查询功能

  • 判断是什么上网设备
    • 小屏幕（平板，大于等于 768px） @media (min-width: @screen-sm-min) { … }
    • 中等屏幕（桌面显示器，大于等于 992px）@media (min-width: @screen-md-min) { … }
    • 大屏幕（大桌面显示器，大于等于 1200px）@media (min-width: @screen-lg-min) { … } col-lg-2
    • 大屏幕 大于1200 col-lg-2
    • 中屏幕 大于992<1200 col-md-3
    • 小屏幕 大于768<922 col-sm-6
    • 最小屏 小于768 col-xs-12
    • 超小屏幕 手机 (<768px)
    • 小屏幕 平板 (≥768px)
    • 中等屏幕 桌面显示器 (≥992px)
    • 大屏幕 大桌面显示器 (≥1200px)
    • 栅格系统行为 总是水平排列 ，开始是堆叠在一起的，当大于这些阈值时将变为水平排列
  • .container 最大宽度 None （自动） 750px 970px 1170px
  • 类前缀 .col-xs- .col-sm- .col-md- .col-lg-
  • 可以class中拼接多个列数限制

2.5 排版

标题: HTML 中的所有标题标签，h1 到 h6 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

1
2
3

<h1>我是h1</h1>我是跟随者
<!-- 要写成行内快-->
<span class="h1">我是h1</span>我是跟随者

对齐：通过文本对齐类，可以简单方便的将文字重新对齐。

1
2
3
4
5

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写：text-lowercase 或 text-uppercase 或 text-capitalize

1

<p class="text-uppercase">Uppercased text.</p>

2.6 表格

  • table 表格
  • table-striped 表格隔行变色
  • table-hover 悬浮变色
1
2
3

<table class="table">
    ...
</table>

行状态：通过这些状态类可以为行或单元格设置颜色。

class类名 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 绿色 标识成功或积极的动作
.info 蓝色 标识普通的提示信息或动作
.warning 黄色 标识警告或需要用户注意
.danger 红色 标识危险或潜在的带来负面影响的动作

2.7 表单【重点】

  • 元素都将被默认设置宽度属性为 width: 100%；将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
  • 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 input、textarea 和 select标签
    • 把标签和控件放在一个带有 class .form-group 的 div 中。这是获取最佳间距所必需的。
    • 向所有的文本元素 input、textarea 和 select 标签 添加 class =”form-control” 。
    • form-group 会将label和input上下排列 。
    • form-control 会自动将input填充满屏幕 并添加点击高亮效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- 表单元素 form input 搜集用户信息的 -->
<form action="" class="">
    <!-- 1、form 加样式 form-group 表单组 -->
    <div class="form-group">
        <label for="username">输入用户名</label>
        <!-- input 加样式 form-control 表单组 -->
        <input type="text" class="form-control" id="username">
    </div>
    <div class="form-group">
        <label for="password">输入密码</label>
        <input type="password" class="form-control" id="password">
    </div>

    <div class="checkbox">
        <label><input type="checkbox"> Check me out</label>
    </div>
    <input type="submit" class="btn btn-success" value="登录">
</form>

内联表单：为 form元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form action="" class="form-inline">
    <!-- 1、form 加样式 form-group 表单组 -->
    <div class="form-group">
        <label for="username">输入用户名</label>
        <input type="text" class="form-control" id="username">
    </div>
    <div class="form-group">
        <label for="password">输入密码</label>
        <input type="password" class="form-control" id="password">
    </div>

    <div class="checkbox">
        <label><input type="checkbox"> Check me out</label>
    </div>
    <input type="submit" class="btn btn-success" value="登录">
</form>

水平表单：通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<form action="" class="form-horizontal">
    <!-- 1、form 加样式 form-group 表单组 独占一行 -->
    <div class="form-group">
        <!-- label 占屏幕的 2/12 -->
        <label for="username" class="col-sm-2 text-right">输入用户名</label>
        <!-- input 站屏幕的 10/12 -->
        <div class="col-sm-6">
            <input type="text" class="form-control" id="username">
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 text-right">输入密码</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" id="password">
        </div>
    </div>

    <div class="checkbox">
        <label><input type="checkbox"> Check me out</label>
    </div>
    <!-- col-sm-offset-4  向右偏移4份 总共一行12份-->
    <!-- col-sm-offset-6  向右偏移4份-->
    <div class="col-sm-offset-4">
        <input type="submit" class="btn btn-success" value="登录">
    </div>
</form>

完整案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap表单</title>
    <!-- 注意js文件引入的顺序，bootstrap依赖jquery -->
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>

<body>
    <!-- 表单元素 form input 搜集用户信息的 -->
    <form action="" class="">
        <!-- 1、form 加样式 form-group 表单组 -->
        <div class="form-group">
            <label for="username">输入用户名</label>
            <!-- input 加样式 form-control 表单组 -->
            <input type="text" class="form-control" id="username">
        </div>
        <div class="form-group">
            <label for="password">输入密码</label>
            <input type="password" class="form-control" id="password">
        </div>

        <div class="checkbox">
            <label><input type="checkbox"> Check me out</label>
        </div>
        <input type="submit" class="btn btn-success" value="登录">
    </form>

    <hr />

    <form action="" class="form-inline">
        <!-- 1、form 加样式 form-group 表单组 -->
        <div class="form-group">
            <label for="username">输入用户名</label>
            <input type="text" class="form-control" id="username">
        </div>
        <div class="form-group">
            <label for="password">输入密码</label>
            <input type="password" class="form-control" id="password">
        </div>

        <div class="checkbox">
            <label><input type="checkbox"> Check me out</label>
        </div>
        <input type="submit" class="btn btn-success" value="登录">
    </form>

    <hr />

    <form action="" class="form-horizontal">
        <!-- 1、form 加样式 form-group 表单组 独占一行 -->
        <div class="form-group">
            <!-- label 占屏幕的 2/12 -->
            <label for="username" class="col-sm-2 text-right">输入用户名</label>
            <!-- input 站屏幕的 10/12 -->
            <div class="col-sm-6">
                <input type="text" class="form-control" id="username">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 text-right">输入密码</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="password">
            </div>
        </div>

        <div class="checkbox">
            <label><input type="checkbox"> Check me out</label>
        </div>
        <!-- col-sm-offset-4  向右偏移4份 总共一行12份-->
        <!-- col-sm-offset-6  向右偏移4份-->
        <div class="col-sm-offset-4">
            <input type="submit" class="btn btn-success" value="登录">
        </div>
    </form>

</body>

</html>

小挂件 Addon

案例: 显示带引导的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<form action="" class="form-horizontal">
    <!-- 1、form 加样式 form-group 表单组 独占一行 -->
    <div class="form-group">
        <!-- label 占屏幕的 2/12 -->
        <label for="username" class="col-sm-2 text-right">输入用户名</label>
        <!-- input 站屏幕的 10/12 -->
        <div class="col-sm-6">
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control" id="username">
                <div class="input-group-addon">.00</div>
            </div>

        </div>
    </div>
    <div class="col-sm-offset-4">
        <input type="submit" class="btn btn-success" value="登录">
    </div>
</form>

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>


<label class="radio-inline">
    <input type="radio" name="sex" id="inlineRadio1" value="option1"> 男
</label>
<label class="radio-inline">
    <input type="radio" name="sex" id="inlineRadio2" value="option2"> 女
</label>
<label class="radio-inline">
    <input type="radio" name="sex" id="inlineRadio3" value="option3"> 未知
</label>

下拉列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

<select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

带分割线的下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="btn-group">
    <button id="show" type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul id="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>
</div>

1
2
3
4
5
6
7
8
9
10
11

<div class="btn-group">
    <button id="show" type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-hand-down"></span></button>

    <ul class="dropdown-menu">
        <li><a href="#">选项1</a></li>
        <li><a href="#">选项2</a></li>
        <li><a href="#">选项3</a></li>
        <li><a href="#">选项4</a></li>
    </ul>
</div>

静态控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
</form>
  • Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
  • 任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<div class="form-group has-success">
    <label class="control-label" for="inputSuccess1">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
    <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>

<div class="form-group has-warning">
    <label class="control-label" for="inputWarning1">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning1">
</div>

<div class="form-group has-error">
    <label class="control-label" for="inputError1">Input with error</label>
    <input type="text" class="form-control" id="inputError1">
</div>

<div class="has-success">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxSuccess" value="option1">
            Checkbox with success
        </label>
    </div>
</div>

<div class="has-warning">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxWarning" value="option1">
            Checkbox with warning
        </label>
    </div>
</div>

<div class="has-error">
    <div class="checkbox">
        <label>
            <input type="checkbox" id="checkboxError" value="option1">
            Checkbox with error
        </label>
    </div>
</div>
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
需要导入font字体库
<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

2.8 按钮

class = btn 将任何东西变成按钮 需要配合 btn-default a标签也可以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

1.按钮颜色
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

2.成组button 
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> 选项 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> 选项 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> 选项 3
    </label>
</div>

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<p>
    <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
  • 按钮组：把一系列的.btn按钮放入.btn-group。
  • btn-group 内部嵌套 btn
1
2
3
4
5

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

按钮工具栏：把一组 div class=”btn-group” 组合进一个 div class=”btn-toolbar” 中就可以做成更复杂的组件

1
2
3
4
5

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

尺寸 ：只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

1
2
3
4

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

2.9 图片形状

  • 响应式图片随着窗体大小改变大小， img src=”img/6.png” class=”img-responsive” alt=”Responsive image”
  • 通过为 img 元素添加以下相应的类，可以让图片呈现不同的形状。
1
2
3
4

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
<img src="..." alt="..." class="img-responsive">

2.10 导航栏

data-toggle=”tab”

标签式导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#" data-toggle="tab">Messages</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade in active" id="h5">
        <p>Html5最近比较火</p>
    </div>
    <div class="tab-pane fade" id="java">
        <p>java是高级语言，是最好的语言</p>
    </div>
    <div class="tab-pane fade" id="android">
        <p>android是最受大众欢迎的智能机品牌</p>
    </div>
</div>

胶囊导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<ul class="nav nav-pills ">
    <li class="active"><a href="#h5" data-toggle="tab">HTML5</a></li>
    <li><a href="#java" data-toggle="tab">JAVAEE</a></li>
    <li><a href="#android" data-toggle="tab">ANDROID</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="h5">
        <p>Html5最近比较火</p>
    </div>
    <div class="tab-pane fade" id="java">
        <p>java是高级语言，是最好的语言</p>
    </div>
    <div class="tab-pane fade" id="android">
        <p>android是最受大众欢迎的智能机品牌</p>
    </div>
</div>

路径导航 面包屑导航

面包屑[导航]这个概念来自童话故事“[汉赛尔]和[格莱特]”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉[访问者]他们在网站中的位置以及如何返回。

1
2
3
4
5

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ol>

image-20220402115632947

点击选项时切换面板的JS代码

1
2
3
4
5
6
7
8
9
10
11
12

// js
$(function(){
    $("ul.nav li").click(function(){
        $(this).siblings().removeClass("active");
        $(this).addClass("active");
        // 获取当前的第几个
        var idx = $(this).index();
        var show = $("#myTabContent .tab-pane").eq(idx);
        show.siblings().removeClass("in active");
        show.addClass("in active");
    });
});

img

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>

<body>

    选项卡导航
    <ul class="nav nav-tabs">
        <li><a href="#" data-toggle="tab">HTML5</a></li>
        <li class="active"><a href="#" data-toggle="tab">JAVA</a></li>
        <li><a href="#" data-toggle="tab">android</a></li>
        <li><a href="#" data-toggle="tab">选项4</a></li>
    </ul>
    <div class="tab-content" id="myContent">
        <div class="tab-pane fade" id="h5">
            <p>Html5最近比较火</p>
        </div>
        <div class="tab-pane fade in active" id="java">
            <p>java是高级语言，是最好的语言</p>
        </div>
        <div class="tab-pane fade" id="android">
            <p>android是最受大众欢迎的智能机品牌</p>
        </div>
        <div class="tab-pane fade" id="iso">
            <p>苹果系统最N</p>
        </div>
    </div>

    <hr />
    胶囊式导航
    <ul class="nav nav-pills">
        <li><a href="#" data-toggle="tab">HTML5</a></li>
        <li class="active"><a href="#" data-toggle="tab">JAVA</a></li>
        <li><a href="#" data-toggle="tab">android</a></li>
        <li><a href="#" data-toggle="tab">选项4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade" id="h5">
            <p>Html5最近比较火</p>
        </div>
        <div class="tab-pane fade  in active" id="java">
            <p>java是高级语言，是最好的语言</p>
        </div>
        <div class="tab-pane fade" id="android">
            <p>android是最受大众欢迎的智能机品牌</p>
        </div>
        <div class="tab-pane fade" id="iso">
            <p>苹果系统最N</p>
        </div>
    </div>

    <hr />
    路径导航 面包屑导航
    <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">关于我们</a></li>
    </ol>

    <script>
        $(function () {
            $("ul.nav li").click(function () {
                // 当前点击的元素的所有兄弟元素 其他li 去掉激活样式
                $(this).siblings().removeClass("active");
                // 当前点击的元素增加激活样式
                $(this).addClass("active");
                // 获取当前的第几个
                var idx = $(this).index();
                // 获取下标对应的面板div 
                var show = $("#myContent .tab-pane").eq(idx);
                // 其他面板隐藏掉
                show.siblings().removeClass("in active");
                // 当前面板显示
                show.addClass("in active");
            });
        });
    </script>

</body>

</html>

2.11 分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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>

2.12 缩略图

1
2
3
4
5
6
7
8
9
10
11

<div class="container" style="margin-top: 30px;">
    <div class="row">
        <div class="col-md-4">
            <a href="#" class="thumbnail"> <img src="images/6.png"></a>
            <div class="caption">
                <h4>HTML入门</h4>
                <h6>html是最好的静态网页语言</h6>
            </div>
        </div>
    </div>
</div>

2.13 模态框

动态模态框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal --><!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2.14 轮播图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<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>

二、validate插件

1.1 validate概述

  • validate: jquery的一个插件,依赖jquery使用，Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点：
  • 内置验证规则： 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
  • 自定义验证规则： 可以很方便地自定义验证规则
  • 简单强大的验证信息提示： 默认了验证信息提示，并提供自定义覆盖默认的提示信息的功能
  • 实时验证： 可能通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证

1.2 validate使用步骤

  • 导入jquery文件
  • 导入validate.js
  • 页面加载成功后!对表单进行验证! $(“选择器”).validate();
  • 在validate中编写校验规则
1
2
3
4

$("选择器").validate(
	rules:{},
	messages:{}
);

1.3 校验规则

默认校验规则

属性 描述
required:true 必输字段
remote:”check.php” 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期 日期校验ie6出错，慎用
dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
number:true 必须输入合法的数字(负数，小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:”#field” 输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10

1.4 validate练习

核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(function(){
    // 校验用户的输入
    $("#frm").validate({
        rules:{
            uname: {
                required:true,
                minlength: 2
            },
            email: "required",
            age: {
                required:true,
                range: [0,120]
            }
        },
        messages:{
            age: {
                required:"必须输入年龄",
                range: "年龄必须在{0}-{1}之间"
            }
        }
    });
});
  • 实现步骤：
    • 导入jquery.js和validate.js，messages_zh.js中文提示
    • 加载完成 进行验证username必填
    • 用户名必须设置
    • messages
      • name的属性:提示信息
      • name的属性:{校验器:”xx”,”校验器”:”xxx”}
      • username:”xxx”,
      • password:{required:”提示信息”,digits:”提示信息”}
      • 此处可以导入messages中文提示库!
    • .密码须为数字 ：password:{required:true, digits:true}
    • 重复密码：equalTo:”#field” repassword:{equalTo:”[name=’password’]”}
    • 最小值 ：min 注意 需要添加必填
    • 动态修改提示的值：0是索引!! zxz:{min:”最小值应该大于{0}”}
1
2
3
4
5
6
7
8
9
10

$(function(){
			$("#formId").validate({
			rules:{
				//1.校验元素的name属性  username:"校验器" 使用单一的校验器
				//2.校验元素的name属性  username:{校验器:"值",校验器:"值"}
				username:"required"
			},
			messages:{}
	});	
})

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校验插件的使用</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/validate.min.js"></script>
    <script src="./js/messages_zh.js"></script>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

    <form action="" id="frm">
        名字：<input type="text" name="uname"><br/>
        邮箱：<input type="email" name="email"><br/>
        年龄：<input type="number" name="age"><br/>
        密码：<input id="pwd" type="password" name="pwd"><br/>
        重复：<input type="password" name="repwd"><br/>
        手机：<input type="text" name="phone"><br/>
        <!-- submit form表单提交按钮的类型必须是submit -->
        <input type="submit" value="登录">
    </form>

    <script>
        $(function(){
            // 校验用户的输入
            $("#frm").validate({
                rules:{
                    uname: {
                        required:true,
                        minlength: 2,
                        maxlength: 6
                    },
                    email: "required",
                    age: {
                        required:true,
                        range: [0,120]
                    },
                    pwd: "required",
                    repwd: {
                        // equalTo: "#pwd"
                        equalTo: "[name='pwd']"
                    },
                    phone: "mobile"
                },
                messages:{
                    uname: {
                        required:"用户名必须输入",
                        minlength: "用户名长度必须大于{0}",
                        maxlength: "用户名长度必须小于{0}"
                    },
                    age: {
                        required:"必须输入年龄",
                        range: "年龄必须在{0}-{1}之间"
                    }
                }
            });
        });

        // 使用自定义验证规则,手机号码验证
        jQuery.validator.addMethod("mobile", function(value, element) {
            var length = value.length;
            return this.optional(element) || (length == 11 && /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value));
        }, "手机号码格式错误!");
        
    </script>
    
</body>
</html>

this.optional作用

1

jQuery.validate的optional(element)`，用于表单控件的值不为空时才触发验证。 当element为空时`this.optional(element)=true`，用于在该控件为非必填项目时可以通过验证，及条件可以不填但是不能填错格式。 例如： `jQuery.validator.addMethod("division", function(value, element) { return this.optional(element) || value % 2 == 0 && value % 3 == 0; }, "必须能被2和3整除");

如果值为空时也要触发验证，移除optional(element)。 例如： $f.addMethod("division", function(value, element) { return value % 2 == 0 && value % 3 == 0; }, "必须能被2和3整除");

ES6

什么是ES6

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

1、变量

  • var 声明变量，没有局部作用域的，可以声明多次
  • let 声明变量，有局部作用域，只能声明一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
    // var 声明变量,没有局部作用域的,可以声明多次
    {
        var a = 2;
        var a = 3;
    }
    console.log(a);

    // let 声明变量 ,有局部作用域,只能声明一次
    {
        let b = 3;
        let b = 4; //Cannot redeclare block-scoped variable 'b'.
    }
    console.log(b); //b is not defined
</script>

错误说明

Cannot redeclare block-scoped variable ‘b’

  • 不能再次声明块级作用域[局部变量]b

b is not defined

  • b未定义

2、常量

  • const 使用常量关键词声明，声明后必须赋值，声明后不能修改值
1
2
3
4
5
6

<script>
    // const PI; // 'const' declarations must be initialized
    const PI = 3.14;
    PI = 3.1415;  // Assignment to constant variable.
    console.log(PI);
</script>

错误说明

‘const’ declarations must be initialized

  • const声明必须初始化[赋值]

Assignment to constant variable.

  • 给常量赋值了

3、解构赋值

解构：把整体拆分成组件

数组解构使用： []

对象解构使用：{}

解构赋值是对 赋值运算符 的 一种扩展，他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

数组解构

1
2
3
4
5
6
7
8

<script>
    // 1、数组解构
    let a = 1, b = 2, c = 3;
    console.log(a, b, c);
    // ES6数组解构
    let [x, y, z] = [4, 5, 6];
    console.log(x, y, z);
</script>

对象解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
    // 2、对象结解构
    let user = { name: '稀客', age: 18, address: '郑州' };
    // 把对象的属性拆分出来
    let username = user.name;
    let userage = user.age;
    let useraddr = user.address;

    console.log(username, userage, useraddr);

    // ES6的对象解构,{}解构的符号
    let { name, age } = user;
    let { address } = user;
    console.log(name, age, address);
</script>

4、模板字符串

模板字符串相当于加强版的字符串，用反引号 `，除了作为普通字符串，还可以用来定义多行字符串，

还可以在字符串用${}中加入变量和表达式。

模板字串使用：`

变量和表达式使用：${}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
    let name = '稀客';
    let city = '郑州';
    // 传统的字符串拼接
    let info = 'Im ' + name + ',Im from ' + city;
    console.log(info);

    // ES6的模板字符串
    let info2 = `Im ${name},Im from ${city}`;
    console.log(info2);

    let info3 = `我还可以
        换行哦`;
    console.log(info3);
</script>

5、对象简写

对象中的属性名和需要赋值的变量名一致时，可以省略属性名

let user2 = {name,age};

1
2
3
4
5
6
7
8
9
10
11

<script>
    let name = '稀客';
    let age = 18;
    // user对象中有name和age两个属性
    let user = {name:name,age:age};
    console.log(user);

    // ES6的对象简写
    let user2 = {name,age};
    console.log(user2);
</script>

6、对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

  • 取出可遍历属性
  • 拷贝到当前对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
    // ... 对象扩展运算符
    let user = { name: '稀客大大', age: 18 };
    // 对象复制
    let xike = { ...user };
    console.log(xike);

    // 对象合并
    let hobby = 'girl';
    let address = { province: '河南', city: '郑州' };
    let xikeman = { ...user, hobby, address };
    console.log(xikeman);

    // 与数组解构表达式结合，... 也可称为剩余运算符
    let [x, y, ...z] = [1, 2, 3, 4, 5];
    console.log(x, y, z);
</script>

7、箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体

箭头函数多用于匿名函数的定义

当箭头函数没有参数或者有多个参数，要用 () 括起来。 (m,n)=>m+n; 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，(m,n)=>{m+n;} 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script>
    // 传统方式定义函数
    var fun = function (a) {
        return a;
    }
    console.log(fun('Hello'));

    // 箭头函数
    var fun2 = x => x;
    console.log(fun2('World'));

    // 加法函数
    // 当箭头函数没有参数或者有多个参数，要用 () 括起来。
    // 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
    // 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
    var fun3 = (m, n) => m + n;
    console.log(fun3(3, 4));
</script>

HTML常用单词

A

absolute 绝对的

active 活动的，激活的，标记的一个伪类

align 对齐

arrow 箭头

auto 自动

B

background 背景border 边框

banner 页面上的一个横条both 二者都是clear 属性的一个属性值

black 黑色bottom 底部,是一个CSS 属性

blink 闪烁box 盒子

block 块br 换行标记

blue 蓝色

bug 软件程序中的错误

body 主体，一个HTML 标记

bold 粗体

button 按钮

C

cell 表格的单元格

color 颜色

center 中间,居中

contact 联系

child 孩子

content 内容

circle 圆圈

class 类别

css 层叠样式表

clear 清除

dashed 虚线

display 显示

default 默认的

dotted 点线

double 双线

E

element 元素

F

float 浮动

first 第一个

fixed 固定的

G

gif 一种图像格式

green 绿色

gray 灰色

H

hidden 被隐藏

head 头部

home 首页

height 高度

help 帮助

hover 鼠标指针经过时的效果，或称为“悬停状态”

I

Image 图像

inline 行内

important 重要的

inner 内部的

indent 缩进

italic 斜体

index 索引

J

jpg 一种图像格式

justify 两端对齐

L

language 语言

line 线

last 最后一个

link 链接

left 左边

list 列表

length 长度

M

margin 外边距

millimeter 毫米

max 最大的

min 最小的

medium 中间

model 模型

menu 菜单

move 移动

middle 中间

N

nav 导航

none 无，不，没有

new 新的

O

object 对象

orange 橙色

one 一个

outer 外面的

only 仅仅

overflow 溢出

open 打开

P

padding 内边距

point 点

pointer 指针，指示器

purple 紫色

position 定位，位置

R

red 红色

resize 重新设置大小

relative 相对的

right 右边

repeat 重复,平铺

row 行

S

scroll 滚动

silver 银色

size 尺寸

square 方块

solid 固体，实线

static 静态的

solution 方案

strong 强壮，加粗的

son 儿子

style 样式

span 一个HTML 标记

T

table 表格title 标题

td 单元格的HTML 标记

top 顶部

text 文本

tr 表格中“行”

type 类型

through 穿过

U

underline 下划线

url 网址

V

vertical 竖直的

visited 访问过的

W

white 白色

width 宽度

CATALOG
    FEATURED TAGS
    Java linux 运维 学习 java centos 开发环境 nginx 容器化 git spring 云原生 基础 jetbrains python
    FRIENDS