以前自己学的时候的笔记，
ipconfig
- 13天
####第二部分数据库
- 8天
####前端课程介绍
- HTML 用于搭建页面结构和内容
- CSS 用于美化页面
- JavaScript 用于给页面添加动态的效果
- jQuery 简化JavaScript代码的框架
####学习方法
将大练习为复习重点，照着代码写实现步骤 照着步骤写新的代码
###HTML
- Hyper Text Markup Language：超文本标记语言
- 什么是超文本：不仅仅是文本，还包括文本的样式(字体 大小 颜色等)，还包括多媒体(图片、音频、视频)
- 和xml的区别：XML标签可以任意定制，HTML标签固定就有那么多种
<book id="1"></book>
- 学习HTML主要学习有哪些标签，标签有哪些属性，标签和标签间的嵌套关系
####HTML文件的结构
<!DOCTYPE html><!-- 文档声明：负责告诉浏览器
使用html的哪个版本来解析内容 ，
此写法告诉浏览器以h5的标准解析-->
<html><!-- 根标签，除了文档声明所有的标签都在html标签内部 -->
<head><!-- 头标签：里面的内容是给浏览器看的 -->
<meta charset="UTF-8"><!-- 设置页面的字符集 -->
<title>第一个html文件</title><!-- 设置页面标题 -->
</head>
<body><!-- 体标签：里面的内容是给用户看的 -->
</body>
</html>
###HTML中常用的标签
####文本标签
1. <h1></h1>.......<h6></h6> 内容标题标签
2. 段落标签 <p></p>
3. 水平分割线 <hr>
4. 换行 <br>
####简历案例 代码参见demo02.html
####列表标签
1. 无序列表
<ul>
<li></li>
</ul>
2. 有序列表
<ol type start reversed>
<li></li>
</ol>
3. 定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
4. 列表嵌套
有序列表和无序列表可以进行任意嵌套，可以嵌套n层
Java基础
1. 变量
2. 数据类型
正数
浮点数
字符串
3. 运算符
Java面向对象
JavaAPI
###分区标签div和span
分区标签自身没有任何显示效果，可以理解成是个容器，此容器用于装各种标签，通过分区标签把页面划分成多个区域，便于对页面中的标签进行统一管理
- div：独占一行
- span：共占一行
- 开发一个复杂的页面需要划分三大区：头部、体部、尾部（脚）
<body>
<div>头部</div>
<div>体部</div>
<div>尾部</div>
</body>
- 在html5的标准中新增了几个分区标签
<body>
<header>头部</header>
<article>体部</article>
<footer>尾部</footer>
</body>
####元素(标签)分类
1. 块级元素：独占一行
包含：div，h1-6,hr
2. 行内元素：共占一行
包含：span， 加粗<strong>和<b> 斜体<em>和<i> 删除线<del>和<s> 下划线<u>
####行内元素空格折叠现象
- 一行内连续出现多个空格时只会识别一个空格
- 如果需要使用多个空格 通过 代替
###常见特殊字符
- 空格： & n b s p ;
- <: & l t ;
- >: & g t ;
- 换行 ： <br>
###图片标签
- 格式： <img src="路径">
- src：用于设置图片的路径 可以设置为相对路径或绝对路径，如果访问站内资源使用相对路径，访问站外资源使用绝对路径，如果使用绝对路径其它网站图片路径发生改变则图片无法正常显示
- alt:当图片不能正常显示的时候显示的内容
- title: 当鼠标在图片上悬停时显示的文本内容
- width/height:设置图片的宽高 两种赋值方式：1.通过百分比 按照父元素宽高的百分比进行赋值 2.通过像素 以px为单位 ，如果只对宽度赋值则高度会自动根据图片的原始宽高比进行缩放
- 支持的图片格式：1. jpg和jpeg 2. png（支持透明色） 3. gif
####图片地图
- 给图片的某个范围添加点击事件
- 格式：
<img src="../imgs/a.jpg" usemap="mymap">
<!-- 图像地图 -->
<map name="mymap">
<!-- 区域 shape：形状 rect(矩形) circle(圆形) coords(坐标)
矩形需要赋值四个值 对角线两个点的坐标-->
<area shape="rect" coords="0,0,100,100"
href="http://www.tmooc.cn">
<!-- 圆形三个值：圆心坐标x,y 还有园的半径 -->
<area shape="circle" coords="300,300,100"
href="http://doc.tedu.cn">
</map>
- href属性： 设置连接的地址，此地址可以指向页面(站内和站外) ，指向各种文件，如果该文件浏览器支持打开则直接浏览（如：图片，pdf），如果浏览器不支持打开此文件则下载
<!DOCTYPE HTML> 文档声明
<html>
<head></head>
<body></body>
</html>
h1-h6 align=left/right/center
<p> 段落标签
hr 水平分割线 br换行
列表标签
无序 ul li
有序 ol li
定义列表 dl dt dd
分区标签 ： div 独占一行和span 共占一行 header article footer
元素分类： 1. 块级元素： 独占一行 包含 div,p,hr,h1-h6
2. 行内元素：共占一行 包含 span strong和b em和i del和s u
图片标签 <img src alt title width/height>
图片地图 <map name="xxx"><area shape="rect/circle" coords="" href="路径"></map>
=====================================================================================================
###课程回顾
1. 内容标题h1-h6 align=left/center/right 段落标签 p 水平分割线hr换行br
2. 列表： 无序列表 ul li type 有序列表 ol li type start reversed ，定义列表 dl dt dd
3. 分区元素：div独占一行和span共占一行 header article footer
4. 元素分类： 1. 块级元素：独占一行，包括：div，h1-h6,p,hr 2. 行内元素共占一行:span strong和b em和i del和s u
5. img src是路径可以赋值相对路径和绝对路径 alt图片不能正常显示时显示的内容 title鼠标悬停显示的文本 width/height: 像素和百分比
6. 图像地图 map name
7.
<map name="mymap">
<area shape="circle/rect" coords="" href="路径">
</map>
####超链接a标签
- 让文本或图片具备点击事件
- 如果a标签没有href属性则和纯文本一样
- href属性的作用和图像地图中的作用一致，值为路径，可以指向页面也可以指向文件(如果浏览器支持浏览此文件则直接浏览，不支持则下载)
- target="_blank" 跳转的页面显示到一个新的窗口
- 锚点的使用 href的值 #id #代表当前页面，id为页面中任何元素的id属性值
####表格标签 table
- 相关标签：table(表格) tr（行） td（列）
- 相关属性：border(边框) cellspacing（边框的间距）cellpadding（边框和内容的距离） td的属性：colspan(跨列) rowspan(跨行)
- caption属性：表格标题
- 表格分组：<thead> <tbody> <tfoot> 用于把表格内的标签进行分组，好处：代码更直观 可读性高，便于对标签进行统一管理
- <th> 表头 作用和td类似 但是会有字体加粗效果
####form表单
- 表单是用于获取用户数据并且将数据发送给服务端的元素
- 文本框 <input type="text">
<!-- 文本框 name:代表提交数据时的key
value：代表文本框的初始值
placeholder：占位文本
maxlength:最大长度
readonly:只读
-->
<input type="text" name="username" value="xxx"
placeholder="用户名" maxlength="5" readonly="readonly">
- 密码框 <input type="password">
<input type="password" name="password"
maxlength="5" placeholder="密码">
- 单选框
<input type="radio" name="gender" value="nan" checked="checked" id="nan" ><label for="nan">男</label>
- 多选框 type="checkbox" 其它属性和单选框一致
- 文件选择器 <input type="file" name="xxx">
- 日期选择器 <input type="date" name="xxx">
- 隐藏域 <input type="hidden">
- 文本域 <textarea rows cols>
- 下拉选
所在地：
<select name="city">
<option>请选择</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
<option value="gz">广州</option>
</select>
- 按钮：
1. 提交按钮 <input type="submit" value="注册">
2. 重置按钮 <input type="reset">
3. 自定义按钮 <input type="button">
###注册页面练习：
<h1 align="center">注册表单</h1>
<form action="#">
<table border="1" cellspacing="0" align="center" width="70%">
<tr>
<td>用户名：</td>
<td><input type="text" name="username" > </td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password1" > </td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="password2" > </td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" name="nick" > </td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="gender" value="nan"
id="nan"><label for="nan">男</label><input type="radio" name="gender" value="nan"
id="nv"><label for="nv">女</label> </td>
</tr>
<tr>
<td>爱好：</td>
<td><input type="checkbox" name="hobby" value="lq">篮球
<input type="checkbox" name="hobby" value="wz" checked="checked">王者荣耀
<input type="checkbox" name="hobby" value="gdx">搞对象 </td>
</tr>
<tr>
<td>生日：</td>
<td><input type="date" name="birthday" > </td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="pic" > </td>
</tr>
<tr>
<td>城市：</td>
<td><select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select> </td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea name="intro" rows="3" cols="25">什么都没留下。。。</textarea> </td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" name="yzm" >
<img src="../imgs/2.gif" width="40px" height="20px"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
###html内容回顾
1. 内容标题：h1-h6 属性：align 段落标签p hr水平分割线 br换行
2. 列表标签：无序 <ul type=""> li 有序列表 <ol type start reversed> <li> 定义列表 <dl> <dt> <dd>
3. 分区元素 div独占一行和span共占一行 header article footer
4. 元素分类： 块级元素独占一行 包括：div h1-6 p hr 和行内元素:span strong和b em和i del和s u a
5. 图片 <img src title alt width/height>
6. 图像地图 <map name> <area shape="rect/circle" coords= href="">
7. 超链接 <a href="#id" target="_blank">
8. 表格 <table border cellspacing="边框的间距" cellpadding="内容距边框的距离" width align> <tr> <td rowspan colspan> <caption> <thead> <tbody> <tfoot> <th>
9. 表单：<form action="提交的地址" method="get/post">
- 文本框 type="text" name readonly maxlength placeholder
- 密码框 type="password"
- 单选 type="radio" name相同 checked
- lable 增加点击范围 for="id"
- 多选 type="checkbox" checked
- 文件选择 type="file"
- 日期选择 type="date"
- 隐藏域 type="hidden"
- 文本域 <textarea cols rows>
- 下拉选 <select name><option value></option></select>
- 按钮：1.提交按钮 type="submit" 2.重置按钮type="reset" 3.自定义按钮type="button"
==================================================================================================
###课程回顾
1. h1-h6 p hr br
2. 无序 ul li 有序 ol li 定义 dl dt dd
3. 分区 div独占一行和span共占一行 header article footer
4. 分类 块级元素 div h1-6 p hr 行内元素 span strong b em i del s u
5. 图片 <img src alt title width/height usemap>
6. 地图 <map name> <area shape coords href>
7. 超链接 <a href target="_blank" >
8. 表格 <table border cellspacing cellpadding ><tr> <td rowspan colspan> <thead> <tbody> <tfoot> <caption> <th>
9. 表单 <form action method > <input type="text/password/radio/checkbox/hidden" readonly maxlength placeholder checked name value> <textarea cols rows> <select name> <option value selected>
###CSS
####什么是CSS
Cascading层叠 Style样式 Sheet表，层叠样式表，CSS用于美化页面，使用CSS可以把样式代码和html分离
####如何在html页面中引入CSS
1. 内联样式：在标签内部添加style属性 值为样式代码，弊端是不能复用
<h1 style="background-color: red;border: 1px solid green;">我是一个h1</h1>
2. 内部样式：在head标签内部 添加style标签 标签体内写样式代码，好处是能在当前页面复用，弊端是不能多页面复用
<style type="text/css">
img{
border: 5px solid blue;
width: 100px;
}
</style>
3. 外部样式：在单独的css文件中写样式代码，在head标签内部通过link标签引入，好处是可以多个页面复用
<link rel="stylesheet" href="second.css">
-练习： 创建demo02.html文件 和second.css文件
1. 页面中添加一个h1 通过内联样式添加绿色边框 并设置红色背景
2. 页面中添加一张图片 通过内部样式设置蓝色边框5个像素
3. 页面中添加一个有序列表(显示大象装冰箱的步骤) 通过外部样式设置字体颜色为绿色
####三种引入方式的优先级
1. 内联样式优先级最高
2. 内部和外部相同，后执行的覆盖前面执行的
###选择器
####标签名选择器(基础选择器)
- 格式： 标签名{} 会把页面中所有的此类型的标签全部选中
####id选择器(基础选择器)
- 格式： #id{} 把页面中此id的元素选中
####类选择器(基础选择器)
- 格式： .class{} 把页面中此class的元素选中
####属性选择器
- 格式： 基础选择器[属性名='属性值']
######练习： 创建demo04.html
1. 页面中添加有序列表(还是大象装冰箱) 再添加一个无序列表随意显示三道菜的名字，添加一个提交按钮显示注册再添加一个自定义按钮也显示注册
2. 把有序列表中的第二步字体显示成红色
3. 把有序列表和无序列表的第一个字体显示成蓝色
4. 把有序列表和无序列表的所有背景颜色设置成黄色
5. 把提交按钮设置背景为绿色，把自定义按钮的背景色设置为粉色pink
####后代选择器
- 格式： div p span{} 选取div里面p里面的所有后代span
####子元素选择器
- 格式： div>p>span{} 选取div里面的p里面的span子元素
####分组选择器
- 分组选择器把多个选择器通过,分割合并成一个选择器，用来统一设定样式
- 格式： div,#id,.class{}
####任意元素选择器(所有元素选择器)
- 格式： *{}
####伪类选择器
- 选则元素的状态
- 元素有以下几种状态：
1. 未访问状态 a:link{}
2. 点击状态 a:active{}
3. 鼠标悬停状态 a:hover{}
4. 访问过状态 a:visited{}
###CSS中的常用属性
####颜色的赋值方式
1. 通过颜色单词赋值 red green blue yellow pink purple
2. 通过6位16进制赋值 三原色rgb（red green blue）三原色取值范围0-255
举例：红色 ff0000 蓝色 0000ff 绿色 00ff00 黄色 ffff00
3. 通过3位16进制赋值 红色 #f00
4. 通过3位10进制赋值 红色 rgb(255,0,0)
5. 通过4位10进制赋值 红色 rgba(255,0,0,0-1)
####设置背景图片
/* 设置背景图片 */
background-image: url("../imgs/a.jpg");
/* 设置背景图片的尺寸 */
background-size: 200px 200px;
/* 禁止重复 */
background-repeat: no-repeat;
/* 控制背景图片的位置 left center right top bottom*/
/* background-position: left center; */
background-position: 100% 90%;
###布局相关属性（盒子模型）
- 盒子模型包括：元素的宽高，外边距，内边距，边框
#### 宽高 width、height
- 块级元素可以设置宽高，如果只设置宽度高度会自动识别为内容的高度，行内元素的宽高由内容决定不能修改
####外边距
- 指元素边框距离上级元素或相邻兄弟元素的距离
- 外边距的赋值方式：
/* margin-top: 50px;
margin-left: 80px;
margin-bottom: 30px; */
/* 上下左右外边距都为10px */
/* margin: 10px; */
/* 上下10px 左右20px */
/* margin: 10px 20px; */
/* 水平居中 */
/* margin: 0 auto; */
/* 上 右 下 左 顺时针 */
margin: 10px 20px 30px 40px;
- 行内元素左右外边距生效，上下外边距不生效， 行内相邻的两个元素同时存在右外边距和左外边距时 两值相加
- 块级相邻的两个元素同时存在下外边距和上外边距时 两值取最大值
===================================================================================================
###课程回顾
1. CSS 层叠样式表 美化页面
2. 引入方式：三种，
- 内联：在标签的style属性里面写样式代码 弊端不能复用，优先级最高
- 内部：在head标签里面添加style标签，好处可以当前页面复用，弊端不能多页面复用
- 外部：在单独css文件中写样式代码，在head标签内部通过link标签引入css文件，好处可以多页面复用
3. 选择器
- 标签名选择器： 标签名{}
- id选择器： #id{}
- 类选择器： .class{}
- 属性选择器： 基础选择器[属性名='属性值']
- 任意元素选择器： *{}
- 后代选择器 div span a{}
- 子元素选择器 div>span>a{}
- 分组选择器 div,#id,.class{}
- 伪类选择器 未访问 a:link 访问过 a:visited 悬停：a:hover 点击:a:active
4. 颜色赋值 #00ff00 #0f0 rgb(0,255,0) rgba(0,255,0,0-1) 颜色单词
5. 背景图片 background-color/image/size/repeat/position
6. 盒子模型： 宽高，外边距，内边距，边框
- 宽高： 块级元素可以设置宽高，行内元素宽高由内容决定
###外边距
元素边框距离上级元素或相邻兄弟元素边框的距离
- 赋值方式：margin-left/right/top/bottom, margin:10px; margin:10px 20px, margin:0 auto; margin:10px 20px 30px 40px;
- 块级元素外边距全部生效
- 行内元素外边距上下不生效
- 左右相邻元素外边距相加 上下相邻元素外边距取最大值
- 当元素的上边缘和上级元素的上边缘重叠时元素添加上外边距时会出现粘连的问题，通过给上级元素添加 overflow:hidden解决
###边框
border-top/bottom/left/right: 1px solid red;
- 块级元素边框全部生效，会影响元素的宽高
- 行内元素边框全部生效，会影响宽度不会影响高度
- border-radius 控制元素的圆角，值越大越园
###内边距
- 什么是内边距： 元素边框距内容的距离称为内边距
- 如果移动元素内的文本内容使用内边距（内边距会改变元素的宽高），如果移动元素内的子元素，给子元素添加外边距移动，因为这样不会影响元素的宽高
- 块级元素内边距全部生效，会影响元素所占宽高
- 行内元素内边距全部生效，会影响宽度不会影响高度
####文本相关属性
/* 文本水平对齐 left/right/center*/
text-align: center;
/* 文本修饰 上划线overline
下划线underline 删除线line-through none(去掉元素自带修饰)*/
text-decoration: line-through;
/* 文本颜色 */
color: green;
/* 文本阴影
1.阴影颜色 2.x方向偏移值 3.y方向偏移值
4.模糊度 值越小越清晰*/
text-shadow: blue -15px 15px 10px;
/* 行高 用于让文本在元素中垂直居中，值为元素的高度*/
line-height: 100px;
####字体相关
/* 字体大小 */
font-size: 30px;
/* 加粗 */
/* font-weight: bold; */
/* 斜体 */
/* font-style: italic; */
/* 字体 */
font-family: "黑体";
font: 30px "SimSun","宋体","Arial Narrow",HELVETICA;
####学子商城首页练习 代码参见demo07.html
####溢出设置 overflow
- 超出显示：overflow：visible
- 超出隐藏：overflow：hidden
- 超出滚动显示：overflow：scroll
####显示方式 display
- block: 块级元素的默认值，独占一行
- inline: 行内元素默认值，共占一行
- inline-block:行内块 共占一行 并且可以修改宽高
###课程回顾：
1. 盒子模型 边框+外边距+内边距+宽高
如何计算一个元素所占的宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
- 宽高： 块级元素可以设置宽高 行内元素宽高由内容决定
- 外边距： 元素边框距上级元素或相邻兄弟元素的距离， margin-left/top/right/bottom margin:10px; margin:10px 20px; margin:20 auto margin:10px 20px 30px 40px 上右下左
块级元素全部生效
行内元素上下不生效
- 边框： border-top/left/right/bottom:
块级元素全部生效，会影响元素所占宽高
行内元素全部生效，会影响宽度不会影响高度
- 内边距：元素边框距内容的距离 padding:10px; padding:10px 20px
块级元素全部生效，会影响元素所占宽高
行内元素全部生效，会影响宽度不会影响高度
2. 文本相关：
- 文本对齐方式 text-align:left/center/right
- 文本修饰 text-decoration:overline/underline/line-through/none
- 文本颜色 color:red
- 阴影： text-shadow:red 10px 10px 5px;
- 行高： line-height:10px;
3. 字体相关
- 字体大小： font-size
- 加粗： font-weight:bold
- 斜体： font-style:italic
- 字体： font-family:xxxx
4. 溢出设置
- 隐藏 overflow:hidden;
- 显示 overflow:visible;默认
- 滚动 overflow:scroll;
5. 显示方式
- 块级 display:block
- 行内 display:inline
- 行内块 display:inline-block
======================================================================================
###课程回顾
1. 盒子模型：宽高，外边距，内边距，边框
- 宽高： 块级元素可以设置 行内元素由内容决定
- 外边距：元素边框距上级元素或相邻兄弟元素的距离 margin-top/left/right/bottom margin:10px 20px 30px 40px
块级元素：全部生效
行内元素：上下不生效
左右相邻相加 上下取最大
粘连问题：元素上边缘和上级元素的上边缘重叠时出现，通过overflow：hidden解决
- 边框： border-top/left/right/bottom
块级元素：全部生效，影响宽高
行内元素：全部生效，影响宽度不影响高度
圆角：border-radius:值越大越园
- 内边距：元素边框距内容（文本或子元素）的距离 padding
块级元素：全部生效，影响宽高
行内元素：全部生效，影响宽度不影响高度
2. 文本相关属性：
- 水平对齐 text-align:left/right/center
- 文本修饰 text-decoration: overline/underline/line-through/none
- 颜色 color：red
- 阴影 text-shadow:red 5px 5px 模糊度值越小越清晰
- 行高 line-height:
3. 字体相关
- 字体大小 font-size
- 加粗 font-weight:bold
- 斜体 font-style:italic
- 字体 font-family：xxxx,xxx,xxx
4. 溢出设置 overflow
- hidden 超出隐藏
- visible 超出显示（默认）
- scroll 超出滚动显示
5. 显示方式 display
- block 块级 独占一行
- inline 行内 共占一行 不能改宽高
- inline-block 行内块 共占一行 也可以修改宽高
###定位方式
####文档流定位（静态定位）
- 默认的定位方式，显示的元素从上到下，从左向右排列，通过外边距控制位置
- 格式： position:static
####相对定位 relative
- 元素不脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于元素的初始位置
- 应用场景：当元素需要从当前位置做位置偏移时，仍然占着原来的位置
####绝对定位 position：absolute
- 元素脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于窗口或做了相对定位的祖先元素
- 应用场景：当元素需要做位置偏移，不需要保留原来位置时使用绝对定位
####固定定位 fixed
- 脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于窗口。
- 应用场景，当某个元素需要固定在窗口的某个位置的时候使用固定定位
####浮动定位
- 脱离文档流，元素从当前所在行向左或向右浮动，当撞到上级元素边缘或同级其它浮动元素时停止
- 如果一行显示不下，会自动折行，如果折行时上面的一行有凸出的部分有可能会被卡住
- 如果元素的所有子元素全部浮动，则自动识别的高度为0，通过给元素添加overflow:hidden;
- 如果元素浮动则会脱离文档流后面的元素会顶上来，可以通过给后面元素添加clear属性让后面的元素左右两侧不允许有浮动，这样后面的元素就不会再顶上来。
- 应用场景：当纵向排列的元素需要改成横向时 使用浮动定位
###行内元素垂直对齐方式
/* vertical垂直 对齐方式 默认基线对齐baseline
top上对齐 bottom下对齐 middle中间对齐 */
/* vertical-align: middle; */
/* 如果有需求对页面中的某一个元素做位置偏移
需立即想到相对定位 */
/* position: relative;
top: 10px; */
###CSS的三大特性
1. 继承性
子元素可以继承祖先元素中的部分属性，只能继承color/font-开头/text-开头/line-开头的属性 ，某些特定元素自带显示效果不受继承影响 比如：超链接a，h1-h6字体大小不受继承影响
2. 层叠性
通过不同的选择器可以选择到同一个元素,如果作用的属性不同则全部生效，如果设置的是相同的样式则根据优先级决定
3. 优先级
作用范围越小优先级越高，直接选中优先级高于间接选中（继承）
id>class>标签名>继承
截屏工具：FastStone Capture
================================================================================================
###课程回顾：
####CSS
1. CSS层叠样式表 美化页面
2. 引入方式：
- 内联样式： 在标签内部的style属性里面写样式，优先级最高，不能复用
- 内部样式： 在head标签内部添加style标签，标签体内写样式，好处本页面内复用，不能多页面
- 外部样式： 在单独的css文件中写样式代码，在html页面中head标签里面通过link标签引入css文件，好处可以多页面复用
3. 选择器
- 基础选择器： 标签名选择器 div{} id选择器 #id{} 类选择器 .class{}
- 属性选择器 基础选择器[属性名='值']{}
- 任意元素选择器 *{}
- 子孙后代选择器 div span a{}
- 子元素选择器 div>span>a{}
- 伪类选择器 未访问状态a:link 访问过 a:visited 悬停a:hover 点击a:active
- 分组选择器 div,span{}
4. 颜色赋值
- 颜色单词 red
- 6位16进制 #ff0000
- 3位16进制 #f00
- 3位10进制 rgb(255,0,0)
- 4位10进制透明度 rgba(255,0,0,0-1)
5. 背景
- 背景颜色 background-color
- 背景图片 background-image
- 背景图尺寸 background-size: 200px 100px
- 禁止重复 background-repeat:no-repeat
- 背景图位置 background-position: top/right/bottom/left/center 通过百分比
6. 盒子模型
- 外边距，边框，内边距，宽高
- 外边距：元素边框距上级元素或相邻兄弟元素的距离， margin-left/right/top/bottom: margin:10px 20px 30px 40px;上右下左
块级元素：全部生效
行内元素：上下不生效
粘连问题：当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题，通过overflow：hidden解决
左右相邻外边距相加，上下相邻外边距取最大值
- 边框： border-left/right/top/bottom: 边框粗细像素 边框的样式solid 颜色
块级元素：全部生效，影响元素的宽高
行内元素：全部生效，只影响宽度不影响高度
- 内边距： 元素边框距内容(文本或子元素)的距离，padding赋值方式和外边距一样
块级元素：全部生效，影响元素的宽高
行内元素：全部生效，只影响宽度不影响高度
- 宽高：块级元素可以修改宽高，行内元素的宽高由内容决定
7. 文本相关
- 文本水平对齐方式： text-align:left/right/center
- 文本修饰：text-decoration:overline/underline/line-through/none
- 颜色： color:red
- 阴影： text-shadow:颜色 x偏移 y偏移 模糊度值越大越模糊
- 文本行高： line-height: 用于解决文本垂直对齐问题
8. 字体相关
- 字体大小：font-size
- 字体加粗：font-weight:bold/normal
- 斜体： font-style:italic
- 字体：font-family:字体名称 可以写多个
9. 溢出设置 overflow
- 超出显示 overflow：visible；默认
- 超出隐藏 overflow:hidden
- 超出滚动 overflow：scroll
10. 显示方式 display
- 块级 display：block 独占一行 可以修改宽高
- 行内 display:inline 共占一行 不可以修改宽高
- 行内块 display:inline-block 可以修改宽高也可以显示在同一行
11. 定位方式
- 静态定位/文档流定位（默认） 块级从上到下 行内从左向右
- 相对定位：不脱离文档流 ，元素偏移值相对于元素初始位置
- 绝对定位：脱离文档流，元素偏移值相对于窗口或做了相对定位的祖先元素
- 固定定位：脱离文档流，元素偏移值相对于窗口
- 浮动定位:脱离文档流，元素会在当前所在行内向左或向右浮动，当撞到上级元素边框或同级其它浮动元素边框时停止，如果一行显示不下会自动折行，折行时可能会被卡主，如果上面有浮动元素又不希望元素顶上去可以给元素添加clear属性，如果元素的所有子元素全部浮动的话元素自动识别的高度为0，通过overflow：hidden解决
12. 行内元素垂直对齐方式 vertical-align:baseline/top/bottom/middle
13. CSS三大特性
- 继承： 元素可以继承祖先元素中的部分属性，只有文本相关和字体相关可以继承。
- 层叠： 不同的选择器可以选择到同一个元素，如果作用的样式不同，则全部生效，如果样式相同则由选择器的优先级决定哪个生效
- 优先级：作用范围越小 优先级越高，id>class>标签名>继承
实现步骤：
1. 搭建页面内容
2. 把第一层的li向左侧浮动并设置宽度为111px
3. 去掉所有列表的图标
4. 去掉自带的缩进效果
5. 修改两层li的字体大小 并且文本居中
##JavaScript
html用于搭建页面结构和内容，CSS用于美化页面，JavaScript用于给页面添加动态效果和动态内容
###JS历史
95年由网景(NetScape)公司发布 LiveScript 同年更名为JavaScript，和Java没有任何关系，只是为了层热度
###JS特点
1. 属于脚本语言 不需要编译 由浏览器解析执行
2. js可以嵌入到html中
3. js基于面向对象
4. js语言安全性比较高，js语言只能访问浏览器内部的数据，不允许访问磁盘当中的数据
###如何在html页面中引入js
1. 在标签内部的事件中添加js代码
<input type="button" οnclick="alert('第一种引入')" value="点我试试">
2. 在head里面添加script标签在标签体内写js代码（script标签可以写在html页面的任意位置但是推荐写在head里面）
<script type="text/javascript">
alert("第二种引入方式");
</script>
3. 在单独的js文件中写js代码 通过script标签引入，如果script标签引入了js文件则不能再写js代码
<script type="text/javascript" src="first.js"></script>
###数据类型
1. 数值类型 number
2. 字符串类型 string
3. 布尔值类型 boolean
4. 未定义类型 undefined
5. 对象类型 object
###变量的声明和赋值
- js语言属于弱类型语言,声明变量时不需要指定类型
java写法：int x = 10;
//variable 变量
var x = 10;
x="abc";
x=true;
var y = "刘备";
var z = true/false;
var i; //未定义类型
var p = new Person();
**在js语言中一行结尾的分号可以省略，但是不推荐**
####数值类型
- 数值类型底层都是浮点型，在使用过程中会自动转换类型
int x = 5;
int y = 3;
int z = x/y; 结果1
- 在js中两数相除结果会自动转换正数或小数
var x = 5;
var y = 2;
var z = 5/2;
z= 2.5
- NaN: Not a Number 不是个数， 使用isNaN()方法判断某个变量是否是数值类型
####字符串类型
可以使用单引号或双引号修饰字符串
var s = "abc";
var s = 'abc';
####布尔值类型
var b = true/false;
####未定义类型
var x;
当只声明变量不赋值的时候，此时这个变量的类型为undefined
####对象类型
var p = new Person();
=======================================================================================
###课程回顾
1. JavaScript 给页面添加动态效果和动态内容
2. 引入方式：三种
- 在元素的标签内的事件中添加js代码 点击事件
- 在head标签中添加script
- 在单独的js文件中 然后通过 script标签引入 如果引入了文件就不能再写js代码
3. 数据类型
- 数值类型 number
- 字符串类型 string
- 布尔值类型 boolean
- 未定义类型 undefined
- 对象类型 object
4. 变量声明和赋值
- 弱类型语言 声明变量不需要指定类型
var x=18; x="abc";
###数据类型的隐式转换
- 在js中 数据类型会根据不同的场景自动转换类型
1. 数值类型
- 转字符串 直接转 18->"18" var x = "abc"+18;
- 转布尔值 0和NaN 转成false 其它都是true
if(NaN){alert("aaa")}else{alert("bbb")};
2. 字符串类型
- 转数值 能转直接转，不能转转成NaN "18"->18 "abc"->NaN "18abc"->NaN var x = "20"-18;
- 转布尔值 空字符串转成false 非空转成true
3. 布尔值类型
- 转字符串 直接转 true->"true" false->"false" var x="abc"+true;
- 转数值 true->1 false->0 var x= 20+true;
4. undefined
- 转数值 NaN 20+undefined=NaN
- 转字符串 "undefined" "abc"+undefined = "abcundefined";
- 转布尔值 false if(undefined){alert("aaa")}else{alert("bbb")};
5. null
- 转数值 0 20+null=20
- 转字符串 null->"null" "abc"+null="abcnull"
- 转布尔值 false if(null){alert("aaa")}else{alert("bbb")};
####练习： 点击按钮在页面中弹出"66"+6 和 "66"-6的结果
<input type="button" value="66+6"
οnclick="alert('66'+6)">
<input type="button" value="66-6"
οnclick="alert('66'-6)">
###运算符 + - * / % > < >= <= == !=
- js中的运算符和Java中的大体相同
- ==和===，== 在比较两端变量时会先统一类型再比较，===会先比较类型是否相等如果相等再继续比较值是否相等
- typeof 获取变量的类型 typeof 变量名称
typeof 66 + 6 = "number6"
- 除法运算 会自动转换整数和小数 10/2=5 5/2=2.5
###语句 if else while do while for switch case
- 和Java大体相同
- if while 括号里面如果类型不是布尔值类型会自动转换成布尔值类型 转换规则参见上面的隐式转换
- for循环里面 int i 改成 var i ，不支持增强for循环
for(var i=0;i<10;i++){
console.log(i);
}
###函数/方法
- java方法声明：
public void run(参数列表){
return xxx;
}
- JavaScript方法声明：
function run(参数列表){
return xxx;
}
- 常见的几种方法声明：
/* 无参无返回值 */
function fn1(){
alert("fn1执行了");
}
//调用
//fn1();
/* 有参无返回值 */
function fn2(name,age){
alert("name:"+name+"age:"+age);
}
//fn2("曹操",50);
/* 有参有返回值 */
function fn3(x,y){
return x+y;
}
//var result = fn3(2,3);
//alert(result);
/* 无参有返回值 */
function fn4(){
return "fn4执行了";
}
//alert(fn4());
function fn5(){
alert("方法执行了");
}
- 第二种方式声明方法
var 方法名 = function(参数列表){
return xxx;
}
###和页面元素相关的方法
1. 通过id获取页面中的元素
var x = document.getElementById("元素id");
2. 获取和设置文本框的内容
x.value="abc";
var y = x.value;
3. 给元素设置文本内容 和获取元素内的文本内容
div.innerText="abc";
div.innerText;//获取
4. 给元素添加子元素
div.innerHTML="<h1>abc</h1>"
如果是追加内容把=换成+=
####求平方的练习：
1. 搭建页面在页面中添加一个文本框 和 按钮
2. 在head里添加script标签 里面声明一个方法 myfn() 然后点击按钮的时候调用此方法
3. 方法内部先通过id获取文本框对象
4. 获取文本框里面的内容并且判断此内容是不是NaN
5. 如果是NaN则修改文本框里面的内容为：输入错误
6. 如果不是NaN则获取里面的值相乘 把得到结果再次赋值给文本框
=========================================================================================
###课程回顾
1. 三种引入方式：
- 在元素标签的事件中添加js代码 事件：点击事件
- 在head标签中添加script标签
- 在单独的js文件中写js代码 通过script标签的src属性，引入
2. 数据类型
- 数值类型 number
- 字符串类型 string
- 布尔值类型 boolean
- 未定义类型 undefined
- 对象类型 object
3. 变量声明和赋值
- js属于弱类型语言 var x=10;
4. 数据类型间的隐式转换
- 字符串 转数值：能转直接转不能则转NaN 转布尔值：""->false 其他true
- 数值类型 转字符串：直接转 转布尔值 0和NaN转false 其它true
- 布尔值 转字符串：直接转 转数值 true->1 false->0
- 未定义类型 转字符串：直接转 转数值 NaN 转布尔值 false
- null 转字符串：直接转 转数值 0 转布尔值 false
5. 运算符 和java大体相同
- ==和=== ==先统一类型再比较值 ，===先比较类型再比较值
- typeof 获取变量的类型
- 除法自动转换整数和小数
6. 语句 和java大体相同
- if和while括号里面的内容如果不是布尔值类型会自动隐式转换
- for int i 改成 var i 不支持增强for循环
7. 函数声明
- 第一种格式： function 方法名（参数列表）{ return xxx;}
- 第二种格式： var 方法名 = function(参数列表){return xxx;}
8. 页面相关的方法
- 通过id获取页面元素 var x = document.getElementById("id");
- 获取和设置文本框的内容 x.value
- 给元素设置文本内容 x.innerText+="abc";
- 给元素添加html内容 x.innerHTML += "<h1>xxx</h1>";
###String相关内容
1. 创建字符串的两种方式
var str = "abc"; 支持单引号或双引号
var str = new String("abc");
2. 把字符串转数值
parseInt() 把字符串或小数转成整数
parseFloat() 把字符串转成小数或整数
Number() 等效parseFloat()
3. 字符串转大小写
str.toUpperCase();//转大写
str.toLowerCase();//转小写
4. 获取字符串出现的位置 从0开始
var str = "abcdefg";
str.indexOf("e"); //找第一个出现的位置
str.lastIndexOf("e");//找最后一个出现的位置
5. 截取字符串
str.substring(start,[end]);
str.substring(3);//从3截取到最后
str.substring(3,5);//从3截取到5
6. 替换字符串
str.replace();
color
var str ="<div class='[c]'></div>"
str = str.replace("[c]",color);
7. 拆分字符串
str.split(",");//将一个字符串拆分成多个字符串，返回值为数组 数组里面装着多个字符串
###数值相关 四舍五入
18.34567.toFixed(3);
###数组相关
1. 创建数组 数组中可以保存任意类型的数据
var arr1 = ["刘备",18,true];
var arr2 = new Array();
var arr3 = str.split(","); //数组声明时没有[]
2. 向数组里面添加内容
arr.push("张学友");
arr.push(18);
arr.push(false);
3. 修改数组的长度 （Java数组的长度不能改）
var arr = ["张三","李四","王五","赵六","田七"];
arr.length=3;
4. 数组的遍历
var arr = ["张三","李四","王五","赵六","田七"];
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
5. 数组反转 "a","b","c" c b a
arr.reverse();
上午内容回顾：
1. 字符串相关
- 创建字符串 var str = "abc"; str = new String();
- 字符串转数值 parseInt parseFloat Number
- 转大小写 toUpperCase() toLowerCase();
- 获取字符串出现的位置 str.indexOf() str.lastIndexOf();
- 截取字符串 str.substring(start,?end)
- 替换字符串 str.replace(old,new);
- 拆分字符串 var arr = str.split(",");
2. 四舍五入 number.toFixed(n) n代表保留几位小数
3. 数组相关
- 创建数组 var arr1 = ["abc",18,true]; var arr2 = new Array();
- 数组中添加元素 arr.push("abc");
- 修改数组的长度 arr.length=3;
- 遍历数组
- 数组内容反转 arr.reverse(); a b c c b a
6. 数组排序
- 默认的排序规则是以字符串的形式进行排序，排序规则是通过Unicode字符编码进行排序，比完第一位再比第二位以此类推。
var arr = [25,1,8,15,22,35,40];
arr.sort();
- 自定义排序：
//声明一个自定义排序的方法
function sortfn(a,b){
//return a-b;//升序
return b-a;//降序
}
//如果方法是作为参数传递的话不写括号
//方法调用时才需要写括号
arr.sort(sortfn); */
//给排序方法传递一个匿名函数
/* arr.sort(function(a,b){
return a-b;
});
- 第三种声明函数的方式
/* var myfn = new Function("x","alert(x);");
myfn(18); */
//传递匿名函数
arr.sort(new Function("a","b","return a-b;"));
###日期相关内容
- 服务器时间和客户端时间
1. 获取当前时间(客户端时间)
var d1 = new Date();
2. 把从服务器端请求到的时间字符串转成Date对象
var d2 = new Date("2018/10/11 14:33:22");
3. 从时间对象中获取和设置时间戳（距离1970年1月1日 00：00：00）
d1.getTime();
d1.setTime(1000); 1970/1/1 08:00:01
4. 从时间对象中获取时间分量（单独的年月日时分秒 星期几）
- d1.getFullYear(); //年
- d1.getMonth();//月 从0开始
- d1.getDate();//日
- d1.getDay();//星期几
- d1.getHours();//时
- d1.getMinutes();//分
- d1.getSeconds();//秒
5. 获取年月日 和 获取时分秒
- 年月日 d1.toLocaleDateString();
- 时分秒 d1.toLocaleTimeString();
###正则表达式
- 应用场景： 1. 查找内容 2. 校验文本
. : 匹配任意字符 除了换行
\w : 匹配任意数字、字母、下划线
\d : 匹配任意数字
\s : 匹配任意空白
^ : 开头
$ : 结尾
- 创建正则对象的两种方式：
1. var reg = /规则/模式; （模式：g代表全局查找， i忽略大小写 ）
2. var reg = new RegExp(规则,?模式); 这种方式创建正则对象时如果有反斜杠需要转译
//第一种创建正则对象的方式
//创建一个以a开头的正则，i代表忽略大小写
var reg1 = /^a/i;
//创建一个以m结尾的正则
reg1 = /m$/;
//创建一个包含两位数字的正则
reg1 = /\d{2}/;
//创建一个以三位数字开头的正则
reg1 = /^\d{3}/;
//创建一个以y开头以m结尾中间有5位数字
reg1 = /^y\d{5}m$/;
//创建一个由3-5位数字组成的正则
reg1 = /^\d{3,5}$/;
//创建一个6-10位数字字母下划线的正则
reg1 = /^\w{6,10}$/;
//第二种创建正则对象的方式 new RegExp(规则,？模式);
var reg2 = new RegExp("^\\w{6,10}$");
- 和正则相关的几个方法：
1. reg.exec(str) 查找内容
//1. 查找内容
var str = "you can you up no can no b b ";
//全局查找no
var reg = /no/g;
//exec执行(execute)
//alert(reg.exec(str)); //找到第一个no
//alert(reg.exec(str)); //找到第二个no
//alert(reg.exec(str)); //null 代表没有了
2. reg.test(str) 校验文本
reg = /^You/i;
if(reg.test(str)){
alert("格式正确");
}else{
alert("格式错误");
}
3. 字符串中和正则相关的方法：1. 查找内容
var str = "you can you up no can no b b ";
var reg = /no/g;
//此方法一次性查询到所有出现的内容 装在一个数组中返回
var arr = str.match(reg);
4. 字符串中和正则相关的方法：2. 查找替换
var str = "you can you up no can no b b ";
var reg = /no/g;
//查找到正则匹配的所有内容并全部替换掉
str.replace(reg,"不");
###课程回顾：
1. js 用于给页面添加动态效果和动态内容
2. 三种引入方式:
- 标签内的事件属性中添加
- 在head标签内部添加 script标签
- 在单独的js文件中写js代码 通过 script标签的src属性引入
3. 数据类型
- 数值类型 number
- 字符串 string
- 布尔值 boolean
- 未定义 undefined
- 对象 object
4. 变量声明和赋值 弱类型语言 var x = 10;
5. 隐式转换
6. 运算符 和Java大体相同
- ==和=== ==先统一类型 再比较值 ===先比较类型再比较值
- typeof 获取变量的类型
- 除法 会自动转换整数和小数
7. 语句 if和while括号里面的内容如果不是布尔值会自动隐式转换成布尔值，for 把int i改成var i 不支持增强for
8. 方法声明：
- function 方法名(参数列表){return xxx;}
- var 方法名 = function(参数列表){return xxx;}
- var 方法名 = new Function("参数","参数","方法体代码");
9. 和页面相关
- 通过id获取页面中的元素对象 var x = document.getElementById("id");
- 给文本框获取和设置文本内容input.value = "xxx" var x = input.value
- 给元素添加文本内容 div.innerText+="xxx";
- 给元素添加html内容 div.innerHTML+="<h1>xxx</h1>";
- 修改元素的class div.className="xxx";
10. 字符串相关
- 创建 var str = "abc"; var str = new String("abc");
- 转数值 parseInt() parseFloat() Number()
- 获取字符串出现的位置 str.indexOf("a") str.lastIndexOf("b")
- 大小写 str.toUpperCase() str.toLowerCase();
- 截取 str.substring(start,?end);
- 替换 str.replace(old,new);
- 拆分 var arr = atr.split(",");
11. 四舍五入 num.toFixed(n); n代表保留几位小数
12. 数组
- 创建数组 var arr = [18,20]; var arr = new Array();
- 添加元素 arr.push();
- 修改长度 arr.length = 3;
- 遍历 和Java一样
- 反转 arr.reverse() a,b,c c,b,a
- 排序 arr.sort() 自定义排序 arr.sort(mysort)
function mysort(a,b){
return a-b;//升序 b-a降序
}
13. 日期相关
- 获取客户端时间 var d = new Date();
- 把字符串时间转成时间对象 var d = new Date("2018/10/22 18:33:22");
- 获取和设置时间戳 d.getTime() d.setTime(1000)
- 获取时间分量 d.getFullYear/Month/Date/Day/Hours/Minutes/Seconds()
- 获取年月日 toLocaleDateString() 时分秒 toLocalTimeString()
14. 正则
- .任意字符 除了换行
- \d 任意数字
- \w 任意数字字母下划线
- \s 任意空白
- ^ 开头
- $ 结尾
1. 创建正则的两种格式
- var reg = /规则/模式(g全局查找和i忽略大小写)
- var reg = new RegExp(规则,模式); 如果有\需要转译
2. 相关方法
- 查找 reg.exec(str);
- 校验 reg.test(str);
- 查找 str.match(reg) 返回值为查找到的所有内容 保存在一个数组里面
- 查找替换 str.replace(reg,new) 替换正则匹配到的所有内容
==========================================================================================
###课程回顾
1. JavaScript 给页面添加动态效果 动态内容
2. 三种引入方式：
- 在标签内的事件属性中添加js代码
- 在head标签内部添加 script标签
- 在单独的js文件中写js代码 通过script标签的src属性引入
3. 数据类型
- 数值类型 number
- 字符串 string
- 布尔值 boolean
- 未定义 undefined
- 对象类型 object
4. 变量声明和定义
- js属于弱类型语言
- var x = 10;
5. 隐式转换
- 字符串： 转数值能转直接转不能转NaN, ""转false 其它true
- 数值：转字符串直接转 0和NaN转false 其它true
- 布尔值：转字符串直接转 true转1 false转0
- undefined：转字符串直接转 转数值NaN 转布尔值false
- null：转字符串直接转 专数值 0 转布尔值 false
6. 运算符 和Java大体相同
- ==和=== == 先统一类型 再比较值 ===先比较类型再比较值
- typeof 获取变量的类型
- 除法自动转换整数和小数
7. 语句 和Java大体相同
- if和while括号里的内容 如果不是布尔值会自动转成布尔值
- for循环把int 改为var 不支持增强for循环
8. 方法声明
- function 方法名(参数列表){ return xxx;}
- var 方法名 = function(参数列表){return xxx;};
- var 方法名 = new Function("参数1","参数2","return xxx;");
9. 和页面相关的方法
- 通过id获取页面元素对象 var x = document.getElementById("id");
- 获取和设置文本框的内容 x.value
- 给元素添加文本内容 x.innerText+="aaa";
- 给元素添加html内容 x.innerHTML+="标签内容";
- 获取和设置元素的class x.className="xxx";
10. 字符串相关
- 创建字符串 var str = "abc"; var str2 = new String("abc");
- 转数值 parseInt(3.8) parseFloat("3") Number()
- 获取字符串位置 str.indexOf("a") str.lastIndexOf("a");
- 转大小写 str.toUpperCase() str.toLowerCase();
- 截取字符串 str.substring(start,?end);
- 替换 str.replace(old,new);
- 拆分 var arr = str.split(",");
11. 四舍五入 num.toFixed(保留小数长度);
12. 数组
- 创建数组 var arr = [18,20]; var arr = new Array(18,20);
- 添加元素 arr.push(33);
- 获取和修改长度 arr.length=3;
- 数组反转 arr.reverse();
- 数组排序 arr.sort(); arr.sort();
13. 日期
- 获取客户端时间 var d = new Date();
- 把字符串时间转时间对象 var d = new Date("2018/10/11 20:33:22");
- 获取和设置时间戳 d.getTime() d.setTime(24*60*60*1000);
- 获取时间分量 d.getFullYear/Month/Date/Day/Hours/Munites/Seconds
- 获取年月日 d.toLocaleDateString() d.toLocaleTimeString();
14. 正则
- . 匹配任意字符 除换行
- \d 匹配任意数字
- \w 匹配任意数字字母下划线
- \s 匹配任意空白
- 开始^ 结束$
- 创建正则对象： var reg = /规则/模式; var reg = new RegExp(规则,模式);模式可以省略，如果规则出现\ 需要转译\\
- reg.exec(str); 查找内容 一次只能找到一个 找不到的话返回null
- reg.test(str); 校验文本
- var arr = str.match(reg); 查找所有
- str.replace(reg,new); 替换所有
###事件取消
- 终止当前的事件
- 在事件调用的地方写上 return false;
###自定义对象
- 声明函数/方法的形式创建对象
function Person(name,age){
//声明属性并且给属性赋值
this.name=name;
this.age=age;
//声明方法
this.run = function(){
alert("name:"+this.name+" age:"+this.age);
}
}
//创建对象
var p = new Person("李白",28);
p.run();
- 声明变量的形式创建对象
/* 第二种创建对象的方式 */
var p = {
"name":"曹操",
"age":18,
"run":function(){
alert("name:"+this.name+" age:"+this.age);
}
}
p.run();
###DHTML
- 简介：Dynamic(动态)HTML，并不是一门新的技术，把html+css+js一起做出的页面称为DHTML
- DHTML包括： BOM 和 DOM
- BOM：Browser浏览器 Object对象 Model模型，里面包含和浏览器相关的内容
- DOM：Document文档 Object对象 Model模型，里面包含所有和页面元素相关的内容
###BOM 浏览器对象模型
####window
window中的所有属性称为全局属性，所有方法称为全局方法，调用时可以省略掉window
- window里面包含以下对象：
- location:位置
可以得到浏览器当前的访问地址，也可以修改
location.href 得到当前浏览器访问的地址
location.href="http://doc.tedu.cn"; 修改浏览器访问的地址
- history：历史
当前窗口浏览的历史
history.length 当前窗口的历史页面数量
history.back(); 返回上一个页面
history.forward(); 前进到下一个页面
history.go(num) 前往第几个页面 正值是前进 负值是后退，0是刷新
- screen：屏幕
screen.width/height 获取屏幕宽高 分辨率
screen.availWidth/Height 获取屏幕可用宽高 减掉了开始菜单栏的高度
- navigator：导航/帮助
navigator.userAgent //得到浏览器的版本信息
###和window相关的事件
- 窗口点击事件
onclick = function(){}
- 页面加载完成事件 只会执行一次
onload = function(){}
- 页面获取焦点事件 会执行多次 每次页面激活时执行
onfocus = function(){}
- 页面失去焦点事件 会执行多次 每次页面失去激活状态时执行
onblur = function(){}
###eval()
- 可以将字符串以js代码的形式执行
####计算器练习： 代码参见demo06.html
###弹出窗
- 提示框：alert("弹出的内容");
- 确认框：confirm("")
- 弹出文本框： prompt("请输入您的大名！");
###通过js对元素添加样式
x.style.样式名="值";
###定时器
setInterval(方法,时间间隔);
###创建元素的方式
var img = document.createElement();
###往页面body中添加元素
document.body.appendChild(img);
###获取随机数
- Math.random() 0-1随机数
- Math.floor() 向下取整
====================================================================================================
###课程回顾
1. 事件取消 return false;
2. 自定义对象
- function Person(name,age){
this.name=name;
this.age=age;
this.run = function(){}
}
- var p = {
"name":"程咬金",
"age":18,
"run":function(){}
}
3. DHTML = html+css+js
4. DHTML包括 BOM 浏览器对象模型和 DOM 文档对象模型
5. window里面的变量称为全局变量 调用时可以省略window.
- location.href 获取浏览器访问的地址 还可以修改
- history.length history.back()/forward()/go(n)
- screen.width/height screnn.availWidth/availHeight 可用宽高
- navigator.userAgent 获取浏览器版本信息
6. window相关事件 窗口点击事件 οnclick= function(){} 页面加载完成事件 οnlοad=function(){} 获取焦点事件 οnfοcus=function(){} 失去焦点事件 οnblur=function(){}
7. eval() 可以将字符串以js代码的形式执行
8. 弹出框： 1.alert() 2.confirm() 3. prompt() 弹出文本框
9. 添加样式 xx.style.样式名称="值";
10. 定时器 setInterval(方法,时间间隔)
11. 创建元素对象 var x = document.createElement("img");
12. 往body（页面）中添加元素对象 document.body.appendChild(x);
13. 随机数 Math.random() 0-1
14. 向下取整 Math.floor()
Math.floor(Math.random()*3+3)
获取4-9的随机数 0-5 Math.floor(Math.random()*6+4)
###停止定时器
var timeId = setInterval(方法名,时间间隔);
clearInterval(timeId);
###setTimeout(方法名,时间间隔);
setTimeout()
###DOM
文档对象模型，学习DOM主要用于对页面中的元素进行增删改查操作
####查找元素
- 通过id查找
var x = document.getElementById("id");
- 通过标签名查找
var imgs = document.getElementsByTagName("img");
- 通过class查找元素
var divs = document.getElementsByClassName("c1");
- 通过name属性值查找
var arr = document.getElementsByName("gender");
####创建元素
var div = document.createElement("div");
- 添加元素到最后 document.body.appendChild(div);
- 插入元素 父元素.insertBefore(新元素,弟弟元素);
- 删除元素 父元素.removeChild(被删除的元素对象);
###JS
1. 用于给页面添加动态效果和动态内容
2. 三种引入方式
- 标签属性事件中添加
- 在head标签里面添加script标签
- 在单独js文件中
3. 数据类型 数值类型number 字符串类型string 布尔值类型boolean 未定义类型undefined 对象类型object
4. 运算符 大体相同 ==和=== 除法 typeof 66+6 number6
5. 语句 大体相同 if和while括号里面的内容会自动转成布尔值类型 for var
不支持增强for循环
6. 函数方法
- function 方法名(参数列表){方法体};
- var 方法名 = function(参数列表){方法体};
- var 方法名 = new Function("参数1","参数2","方法体")
7. 字符串相关：
- 创建 var str = "" ; str = new String();
- 转数值 parseInt() parseFloat() Number()
- 获取字符串出现的位置 str.indexOf("a"); str.lastIndexOf("a");
- 转大小写 toUpperCase() toLowerCase();
- 截取 substring(start,end?)
- 替换字符串 replace（old,new）
- 拆分 var arr = str.split(",");
8. 四舍五入 num.toFixed(保留小数点位数)
9. 数组相关
- 创建 var arr = [20,18]; var arr = new Array("",18);
- 添加 arr.push();
- 长度 arr.length=3;
- 反转 arr.reverse();
- 排序 arr.sort(); arr.sort(new Function("a","b","return a-b;"));
10. 日期
- 创建 var d = new Date();
- 通过字符串创建时间对象 var d = new Date("2018/10/11 20:18:22");
- d.setTime(); d.getTime();
- d.getFullYear/Month/Date/Day/Hours/Minutes/Seconds()
- d.toLocaleDateString() d.toLocaleTimeString();
11. 正则： . \d \w \s ^ $
- var reg = /规则/模式; var reg = new RegExp(规则,模式?);
- reg.exec(str) reg.test(str)
- str.match(reg) str.replace(reg,new)
============================================================================
###jQuery (jq)
是一个js代码的框架，用于简化原生JavaScript代码，可以让程序员写的更少，但做的更多，此框架本身就是通过js语言写的
####jQuery优势
1. 简化js代码
2. 可以像css一样获取元素
3. 可以直接修改元素样式
4. 解决部分兼容性问题
####jQuery引入方式
jq本身就是一个js文件，和普通的js文件的引入方式一样
####获取按钮并动态绑定事件
//jq动态绑定事件
$("#btn").click(function(){
alert("jq动态绑定成功！");
})
###选择器
###基本选择器
1. 标签名选择器 选取所有div $("div")
2. id选择器 选取id为abc的元素 $("#abc")
3. 类选择器 选取class为c1的元素 $(".c1")
4. 分组选择器 选取 h1,p,div $("h1,p,div")
5. 所有元素选择器 选取所有元素 $("*")
###层级选择器
1. $("div span") 获取div下所有的span 子孙后代选择器
2. $("div>span") 获取div的span子元素 子元素选择器
3. $("div+span") 获取div后面紧邻的span兄弟元素
4. $("div~span") 获取div后面所有的span兄弟元素
###层级函数
1. 获取元素的所有兄弟元素
$("#one").siblings("div") 获取id为one元素的所有div兄弟元素
2. 获取元素的哥哥元素
$("#one").prev("span") 获取id为one元素的上一个兄弟元素
3. 获取元素的哥哥们元素
$("#one").prevAll() 获取id为one元素的所有哥哥元素
4. 获取元素的弟弟元素
$("#one").next()
5. 获取元素的弟弟们元素
$("#one").nextAll()
###$介绍
- $是 jQuery的缩写 $("#one") 等效 jQuery("#one")
###课程回顾：
- 动态绑定： $("#id").click(function(){})
- 页面加载完成事件 $(function(){})
- 基础选择器
1. 标签名
2. id
3. 类
4. 分组
5. 任意元素
- 层级
1. 子孙后代 div span
2. 子元素 div>span
3. 弟弟 div+span
4. 弟弟们 div~span
- 层级函数
1. 所有兄弟 siblings("")
2. 弟弟 next()
3. 弟弟们 nextAll()
4. 哥哥 prev()
5. 哥哥们 prevAll()
###过滤选择器
1. $("div:first") 匹配所有div中的第一个元素
2. $("div:last") 匹配所有div中的最后一个
3. $("div:even") 匹配所有div中下标为偶数的div
4. $("div:odd") 匹配所有div中下标为奇数的div
5. $("div:lt(n)") 匹配div下标小于n的div
6. $("div:gt(n)") 匹配div下标大于n的div
7. $("div:eq(n)") 匹配div下标等于n的div
8. $("div:not(.one)") 匹配所有div中 class值不为one的
###内容选择器
1. $("div:has(p)") 匹配含有p标签的所有div
2. $("div:empty") 匹配所有空的div
3. $("div:parent") 匹配所有非空的div
4. $("div:contains('abc')") 匹配所有div中包含abc文本的元素
###可见选择器
1. $("div:hidden") 匹配所有隐藏的div元素
2. $("div:visible"）匹配所有可见的div元素
###jq中和显示隐藏相关的函数
//让元素隐藏
$("#abc").hide();
//让元素显示
$("#abc").show();
//让元素隐藏显示切换
$("#abc").toggle();
###属性选择器
1. $("div[id]") 匹配所有 有id属性的div
2. $("div[id='xxx']") 匹配所有id属性值为xxx的div
3. $("div[id!='xxx']") 匹配所有id属性值不为xxx的div
###子元素选择器
1. $("div:nth-child(n)") 匹配所有div中是子元素并且是第n个子元素
2. $("div:first-child") 匹配所有div中是子元素并且是第一个子元素
3. $("div:last-child") 匹配所有div中是子元素并且是最后一个子元素
###表单选择器
1. $(":input") 匹配所有input 包括(文本框，密码框，按钮，单选。。。。)
2. $(":password") 匹配所有密码框
3. $(":radio") 匹配所有单选
4. $(":checkbox") 匹配所有多选
5. $(":checked") 匹配所有被选中的单选、多选、下拉选
6. $("input:checked") 匹配所有被选中的单选、多选
7. $(":selected") 匹配所有被选中的下拉选
###选择器回顾
1. 基本选择器
- 标签名
- id
- class
- 分组
- 任意元素
2. 层级选择器
- div span
- div>span
- div+span
- div~span
- 元素.siblings()
- 元素.prev()
- prevAll()
- next()
- nextAll()
3. 过滤选择器
- div:first
- div:last
- div:not(.one)
- div:eq(n) 0开始
- div:lt(n)
- div:gt(n)
- div:even
- div:odd
4. 内容选择器
- div:has(p)
- div:empty
- div:parent
- div:contains('xxx')
5. 可见选择器
- div:hidden
- div:visible
- show()
- hide()
- toggle()
6. 属性选择器
- div[id]
- div[id='xxx']
- div[id!='xxx']
7. 子元素选择器
- div:nth-child(n) n从1开始
- div:first-child
- div:last-child
8. 表单选择器
- :input
- :password
- :radio
- :checkbox
- :checked
- input:checked
- :selected
- each() 遍历
###js对象和jq对象互相转换
- js转jq
//得到js对象
var input = document.getElementById("i1");
//把js转成jq对象
// var jq = $(input);
// alert(jq.val());
alert($(input).val());
- jq转js
//得到jq对象
var jq = $("#i1");
//把jq转成js 第一种
var js1 = jq[0];
//把jq转成js 第二种
var js2 = jq.get(0);
###jq的文档操作
1. 创建元素
var jq = $("<div id='xxx'>abc</div>");
2. 添加元素
- 添加到最后面
$("body").append(元素)
- 添加到最前面
$("body").prepend(元素)
3. 插入元素
- 插入到兄弟元素的后面
兄弟元素.after(新元素);
- 插入到兄弟元素的前面
兄弟元素.before(新元素);
4. 删除元素
元素.remove();
5. 样式相关
$("#xxx").css("width","200px");
var width = $("#xxx").css("width");
//设置多个样式
$("div").css({"background-color":"yellow",
"width":"200px"});
6. 属性相关
$("#xxx").attr("属性名","属性值");//给元素添加属性
var str = $("#xxx").attr("属性名");//获取属性值
7. 文本相关 innerText
$("#xxx").text("abc");//给元素文本赋值
var str = $("#xxx").text(); //获取元素的文本内容
8. html相关 innerHTML
$("#xxx").html("<h1>xxx</h1>"); //给元素添加html内容
var str = $("#xxx").html(); //获取元素的html内容
###课程回顾：
1. $(function(){ })
2. 选择器
- 基本选择器 标签名 id class 分组 任意元素
- 层级选择器 div span , div>span , div+span, div~span , siblings()所有的兄弟 prev() prevAll() , next() nextAll()
- 过滤选择器 div:first div:last , div:even div:odd , div:lt(n) div:gt(n) div:eq(n) , div:not(.one)
- 内容选择器 div:has(p) div:empty div:parent div:contains('xxx')
- 可见选择器 div:hidden div:visible ， show() hide() toggle()
- 属性选择器 div[id] div[id='xxx'] div[id!='xxx']
- 子元素选择器 div:first-child div:last-child div:nth-child(n) 从1
- 表单选择器 :input :password :radio :checkbox :checked input:checked :selected
- each遍历
3. js和jq互相转换
- js转jq var jq = $(js);
- jq转js var js = jq[0]; jq.get(0);
4. 创建元素 var div = $("<div></div>");
5. 添加 $("body").append(xxx)最后面 $("body").prepend(xxx)最前面
6. 插入 兄弟元素.after(xxx) 兄弟元素.before(xxx)
7. 删除 元素.remove()
8. 样式 元素.css("样式名称","值") 元素.css("样式名称") 元素.css({"样式名称":"值","样式名称":"值"})
9. 属性 元素.attr("属性名","值") 元素.attr("属性名")
10. 文本 元素.text("xxx") 元素.text()
11. html 元素.html("<xx></xx>") 元素.html()
============================================================================================================
###课程回顾
1. $(function(){ })
2. $("#abc").click(function(){})
3. 选择器
- 基础选择器 标签名 id class 分组，任意元素
- 层级选择器 div span ,div>span, div+span,div~span ,siblings(),prev(),prevAll(),next(),nextAll()
- 过滤选择器 div:first div:last , div:even div:odd, div:lt(n) div:gt(n) div:eq(n) ,div:not(.one)
- 内容选择器 div:has(p) div:empty div:parent div:contains('xxx')
- 可见选择器 div:hidden div:visible , show() hide() toggle()
- 属性选择器 div[id] div[id='xxx'] div[id!='xxx']
- 子元素选择器 div:nth-child(n) div:first-child div:last-child
- 表单选择器 :input :password :radio :checkbox :checked input:checked :selected
4. js对象和jq对象互相转换
- js转jq var jq = $(js)
- jq转js var js = jq[0] jq.get(0)
5. 创建元素对象 var xxx = $("<div></div>")
6. 添加元素 父元素.append(xxx)最后面 父元素.prepend(xxx)最前面
7. 插入元素 兄弟元素.after(xxx) 兄弟元素.before(xxx)
8. 删除元素 元素.remove()
9. 样式 xxx.css("color","red") .css({"":"","":""})
10. 属性 xxx.attr("id","xxx")
11. 文本 xxx.text("xxxx")
12. html xxx.html("<h1>xxx</h1>")
实现步骤：
1. 导入jq框架 并创建一个新的script标签写代码
2. 在页面加载完成事件里面给按钮动态绑定点击事件
3. 在点击事件里面 创建三个td td的内容为三个文本框里面的内容，再创建一个tr，把三个td添加到tr里面
4. 把创建好的tr添加到table里面，搞定!
###事件模拟
//模拟按钮的点击事件
$("input").trigger("click");
###hover()
- 格式 hover(fn1,fn2); 等效 onmouseover+onmouseout
//给所有div 添加移入移出事件
$("div").hover(function(){
$(this).css("color","blue");
},function(){
$(this).css("color","red");
})
###动画
if($(this).val()=="隐藏"){
$("img").hide(3000);
}else if($(this).val()=="显示"){
$("img").show(2000,function(){
$("img").hide(2000,function(){
$("img").show(1000);
});
});
}else if($(this).val()=="上滑"){
$("img").slideUp(3000);
}else if($(this).val()=="下滑"){
$("img").slideDown(3000);
}else if($(this).val()=="淡出"){
$("img").fadeOut(3000);
}else if($(this).val()=="淡入"){
$("img").fadeIn(3000);
}else{
$("img").animate({"left":"250px"},1000)
.animate({"top":"250px"},1000)
.animate({"left":"0"},1000)
.animate({"top":"0"},1000)
.animate({"width":"400px","height":"300px"},1000)
.animate({"width":"200px","height":"150px"},1000);
}
###下雪练习
springboot中文文档地址
https://www.breakyizhan.com/springboot/3028.html
新一代Java模板引擎Thymeleaf
http://www.tianmaying.com/tutorial/using-thymeleaf
Spring Boot参考指南-中文版
https://qbgbook.gitbooks.io/spring-boot-reference-guide-zh/content/
Spring Boot教程系列（ImportNew ）
https://blog.csdn.net/softwave/article/details/77152373
window.location.href = "/Test/"
个人分类： javascript
“两情若是久长时,又岂在朝朝暮暮”
使用 location 对象可以通过很多方式来改变浏览器的位置。首先，也是最常用的方式，就是使用assign() 方法并为其传递一个 URL，如下所示。
location.assign("http://www.wrox.com");
1
这样，就可以立即打开新 URL 并在浏览器的历史记录中生成一条记录。如果是将 location.href或 window.location 设置为一个 URL 值，也会以该值调用 assign() 方法。例如，下列两行代码与显式调用 assign() 方法的效果完全一样。
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";
1
2
在这些改变浏览器位置的方法中，最常用的是设置 location.href 属性。
另外，修改 location 对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将 hash 、search 、 hostname 、 pathname 和 port 属性设置为新值来改变 URL。
//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将 URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将 URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;
1
2
3
4
5
6
7
8
9
10
11
每次修改 location 的属性（ hash 除外），页面都会以新 URL 重新加载。当通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用 replace() 方法。这个方法只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用 replace() 方法之后，用户不能回到前一个页面，来看下面的例子：
<!DOCTYPE html>
<html>
<head>
<title>You won't be able to get back here</title>
</head>
<body>
<p>Enjoy this page for a second, because you won't be coming back here.</p>
<script type="text/javascript">
setTimeout(function () {
location.replace("http://www.wrox.com/");
}, 1000);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
如果将这个页面加载到浏览器中，浏览器就会在 1 秒钟后重新定向到 www.wrox.com。然后，“后退”按钮将处于禁用状态，如果不重新输入完整的 URL，则无法返回示例页面。
与位置有关的最后一个方法是 reload() ，作用是重新加载当前显示的页面。如果调用 reload()时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要像下面这样为该方法
传递参数 true 。
location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）
1
2
位于 reload() 调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。
为此，最好将 reload() 放在代码的最后一行。
video
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
audio
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio> 标签的属性
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
input类型
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
浏览器支持
Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
search No 4.0 11.0 10.0 No
color No No 11.0 No No
注释：Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时，会自动验证 email 域的值。
实例
E-mail: <input type="email" name="user_email" />
亲自试一试
提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。
Input 类型 - url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
实例
Homepage: <input type="url" name="user_url" />
亲自试一试
提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。
Input 类型 - number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定：
实例
Points: <input type="number" name="points" min="1" max="10" />
亲自试一试
请使用下面的属性来规定对数字类型的限定：
属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
请试一下带有所有限定属性的例子：亲自试一试
提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定：
实例
<input type="range" name="points" min="1" max="10" />
亲自试一试
请使用下面的属性来规定对数字类型的限定：
属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
下面的例子允许您从日历中选取一个日期：
实例
Date: <input type="date" name="user_date" />
亲自试一试
输入类型 "month": 亲自试一试
输入类型 "week": 亲自试一试
输入类型 "time": 亲自试一试
输入类型 "datetime": 亲自试一试
输入类型 "datetime-local": 亲自试一试
Input 类型 - search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。
CSS
###选择器
####标签名选择器(基础选择器)
- 格式： 标签名{} 会把页面中所有的此类型的标签全部选中
####id选择器(基础选择器)
- 格式： #id{} 把页面中此id的元素选中
####类选择器(基础选择器)
- 格式： .class{} 把页面中此class的元素选中
####属性选择器
- 格式： 基础选择器[属性名='属性值']
####后代选择器
- 格式： div p span{} 选取div里面p里面的所有后代span
####子元素选择器
- 格式： div>p>span{} 选取div里面的p里面的span子元素
####分组选择器
- 分组选择器把多个选择器通过,分割合并成一个选择器，用来统一设定样式
- 格式： div,#id,.class{}
####任意元素选择器(所有元素选择器)
- 格式： *{}
####伪类选择器
- 选则元素的状态
- 元素有以下几种状态：
1. 未访问状态 a:link{}
2. 点击状态 a:active{}
3. 鼠标悬停状态 a:hover{}
4. 访问过状态 a:visited{}
CSS样式
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
如果需要设置一个背景图像，必须为这个属性设置一个 {background-image: url(/i/eg_bg_04.gif);
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。 background-repeat: repeat-y;
背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复
CSS 文本
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
p {text-indent: -5em;}
p {text-indent: 20%;}
水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。
字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值：
uppercase
lowercase
capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。
text-decoration 有 5 个值：
none
underline
overline
line-through
blink
不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：
处理空白符
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
<p>This paragraph has many
spaces in it.</p>
可以用以下声明显式地设置这种默认行为：
p {white-space: normal;}
上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
处理空白符
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
<p>This paragraph has many
spaces in it.</p>
可以用以下声明显式地设置这种默认行为：
p {white-space: normal;}
上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
总结
下面的表格总结了 white-space 属性的行为：
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许
文本方向
如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
CSS 字体
使用 font-family 属性 定义文本的字体系列。
如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
body {font-family: sans-serif;}
字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
实例
字体变形
font-variant 属性可以设定小型大写字母。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
实例
p {font-variant:small-caps;}
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
font-size 属性设置文本的大小。
属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
css列表
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset
css表格边框
border: 1px solid blue; 下面的例子为 table、th 以及 td 设置了蓝色边框：
border-collapse ：collapse 属性设置是否将表格边框折叠为单一边框：
通过 width 和 height 属性定义表格的宽度和高度。
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
CSS 轮廓
"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。
属性 描述 CSS
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2
CSS 框模型概述
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
内边距
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
边框
border-top-style
border-right-style
border-bottom-style
border-left-style
因此这两种方法是等价的：
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
注释：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。
所以，我们可以这样设置边框的宽度：
p {border-style: solid; border-width: 5px;}
或者：
p {border-style: solid; border-width: thick;}
定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以简写为（这样写法称为值复制）：
p {border-style: solid; border-width: 15px 5px;}
您也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width
因此，下面的规则与上面的例子是等价的：
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
没有边框
在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。
那么如果把 border-style 设置为 none 会出现什么情况：
p {border-style: none; border-width: 50px;}
尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？
这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。
记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。根据以下规则，所有 h1 元素都不会有任何边框，更不用说 20 像素宽了：
h1 {border-width: 20px;}
由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。
边框的颜色
设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。
可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：
p {
border-style: solid;
border-color: blue red;
}
注释：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
border-top-color
border-right-color
border-bottom-color
border-left-color
要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：
h1 {
border-style: solid;
border-color: black;
border-right-color: red;
}
透明边框
我们刚才讲过，如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：
<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>
我们为上面的链接定义了如下样式：
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a:hover {border-color: gray;}
属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
外边距
margin-top
margin-right
margin-bottom
margin-left
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
p {margin: 20px 30px 30px 20px;}
CSS 外边距属性
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
css定位
定位：相对定位 position:relative;
定位：固定定位 position:fixed;
定位：绝对定位 position:absolute;
浮动定位 ：float:left;
清除浮动 ：clear:both;
对齐
使用 margin 属性来水平对齐
可通过将左和右外边距设置为 "auto"，来对齐块元素。
注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：
实例
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
提示：如果宽度是 100%，则对齐没有效果。
注释：在 IE5 中，对于块元素存在一个外边距处理方面的 BUG。如需使上面的例子在 IE5 中有效，请添加一些额外的代码。亲自试一试。
使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位：
实例
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
CSS 尺寸属性
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。
属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
边框新属性
属性 描述 CSS
border-image border-image:url(border.png) 30 30 round; 设置所有 border-image-* 属性的简写属性。 3
border-radius：25px； 设置所有四个 border-*-radius 属性的简写属性。 3
box-shadow box-shadow: 10px 10px 5px #888888; 向方框添加一个或多个阴影。 3
background-size 属性规定背景图片的尺寸。
属性 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3
css新文本
您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
text-shadow: 5px 5px 5px #FF0000;
新的文本属性
属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3
css伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
属性 描述 CSS 事件
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2
属性 描述 CSS
:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。
如果有什么不懂可以加入qq群讨论讨论：668535367
2947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
