Web网页：
结构 表现 行为
html：标记 语义
  空格
< <小于号
> >大于号
& &号
" 双引号
文本标签
<body>
==============文本标签=============
<h> </h> 标题标签
<br> 换行
<p> </p> 段落
<span> </span> ？？
----可通过css实现----
<sup> </sup> 上注脚
<sub> </sub> 下注脚
<i> </i> 斜体
<b> </b> 加粗
<u> </u> 下划线
<del> </del> 删除线
=============图片==============
<img src="图片路径" alt="图片没显示时出现的内容"title="鼠标悬停时显示内容"> 图片
----样式属性----
width：宽度 px
height：高度 px
==============超链接==============
<a href="要跳转资源的"></a> 超链接
target：目标显示的窗口，默认当前窗口
_blank 在新窗口显示
---可以做锚点---
href=#top 跳转页面顶部
a有默认颜色和下划线
============列表==========
1.无序列表
<ul> 前面有黑点 list-style-trpe:square 把黑点改成方形
<li>嵌套文本或超链接</li>
</ul>
2.有序列表
<ol> 前面有序列号
<li></li>
</ol>
3.自定义列表
<dl>自定义列表
<dt>列表项</dt>
<dd>说明</dd>
</dl>
===========表格=========
<table>
<tr> 行
<th>表头单元格</th> 文本自动加粗居中
<td> 每行的单元格
</td>
</tr>
</table>
----------属性----------
1.width：宽 table td
height： 高 table tr td
2.border：加边框 可=1
-collapse 合并边框线
-top 上边框
-radius 做圆角
-bottom 下边框
3.align：水平方向
valign：垂直方向
=center 居中
=left
=right
4.rowspand: 跨行 =2 向下侵占两行
colspand：跨列 =2 向后侵占两列
5.bgcolor 背景色
6.cellpadding 内容到边框的距离
cellspacing 单元格之间间隙
caption 给表格起名字
=============表单===========
<form action="后台url地址">
method 提交请求方式
默认get：不安全，url直接拼接请求参数
post：相对安全
<input type="">
1.1=text 文本框
1.2=password 密码框
1.3=submit 提交按钮
1.4=checkbox 复选框
1.5=radio 单选按钮 name属性值相同，value不同实现2选1
1.4，1.5 checked 默认选中
1.6=reset 重置按钮
1.7button 普通按钮
属性：name 表示请求参数
value 表示对应参数值
<select name="" id=""> 下拉框
<option value="">下拉框内的值</option>
selected 默认选中
</select>
<button> 注册</button> 按钮
<textarea name="" id="" cols="列" rows="行">文本域</textarea>
</form>
</body>
CSS ：Cascading Style Sheet 层叠样式表
注释 /* */
样式格式
样式名:值
多个样式之间;分割
使用：
1.内联式 在标签内部 style="样式1;样式2;"
2.内部式 <style></style> 一般把style放在head中
使用选择器写样式表
3.外部式 链接使用css html head中通过<link/>引用外部样式文件 (.css) css文件写选择器样式
4.导入式 style 标签中 @import 引入外部样式
优先级：同一个元素同一个样式进行设定
行内样式>内嵌样式>链接样式>导入样式
开发中 主要通用样式css文件+style
选择器：筛选元素
基本选择器
标签选择器：按照标签名选择
标签名{样式表}
类选择器
定义
.类选择器名{样式表}
使用 标签使用class属性 class属性值可以相同
一个标记可以使用多个类选择器 class="selector1 selector2 "
id选择器
定义 #选择器名字{}
使用 id属性 id属性值唯一
其他选择器：
后代（掌握）
兄弟
+:相邻
~:向下兄弟
并集（掌握）
*（掌握）
a的选择器：
a:link{}
a:visited{}
a:hover{鼠标悬停是的样式
}
a:active{}
样式：
基础样式
文字：
1.font-
family :字体 常用字体是微软雅黑 宋体
style：风格 斜体显示
weight：加粗效果 取值 bold bolder
size:字号 px 默认16px
连写 font：
font-style font-weight font-size font-family
2.颜色 ：color 取值：16进制颜色值
文本
3.文本样式
text-
indent：首行缩进 单位em
shadow： 水平方向 垂直方向 [模糊值] [颜色]
text-decoration:装饰线
text-align: center; 文本水平居中
line-height:行高
4.背景：
背景色：background-color
/*背景图片*/
background-image:url("images/bgimg.jpg");/*路径*/
background-size: cover;/*背景大小*/
background-position: center;/*位置 水平方向 垂直方向*/
background-attachment: fixed;/*背景图固定*/
background-repeat:no-repeat;/*背景图不重复显示*/
连写：
background: greenyellow url("images/bgimg.jpg") no-repeat center fixed;
background-size: 50%;
5.常用样式：
a默认有颜色 、下划线
列表：list-style：列表项的符号 none
width:宽度 px
height:高度 px
不是所有的标签都可以设置宽高
border:边框
display：标签的显示模式（行块变化）inline-block
按钮：
标签分类：
1.行标签 a span
共享一行
width height 不起作用
2.块标签 ul li p div
独占一行 width height 有效
3.行内块 input img
共享一行 width height 有效
精灵图（雪碧图）：一张图片 有多个图标，使用背景图的position
background-position:水平方向值（可取负值） 垂直方向值（可取负值）
圆角和阴影
border-radius 圆角//radius是半径，可以使用%值
阴影 box-shadow
水平（必需 可取负值） 垂直（必需 可取负值）
模糊度 color（ rgba）
css 权重：
继承或者* 0 0 0 0
标签 0 0 0 1
类 伪类 0 0 1 0
id 0 1 0 0
style属性 1 0 0 0
！important 正无穷
值从左到右 。左侧值最大 ，一级大于一级，没有进制，级别之间不可跨越
页面布局 div+css
盒子模型：
边距
margin ：外边距 四个方位 margin-top margin-right margin-bottom margin-left
padding：内边距 四个方位 padding-top padding-right padding-bottom padding-left
注意盒子塌陷
border：边框
盒子宽度=width+左右padding+左右border+左右margin
盒子高度=height+上下padding+上下border+上下margin
标准流文档：页面从左到右 从上到下
浮动：脱标
float:left right
应用
1.图文环绕
2.布局
定位：
position：
position: relative;相对定位 相对自身原位置移动，原位置不变
position: absolute; 绝对定位 相对父辈的第一个position，最终相对body
position: fixed;固定定位 相对浏览器
/* position: static;静态定位（默认）*/
方位：top right bottom left
使用：
相对定位 微调
固定定位 固定导航
绝对定位 子绝父相 轮播图
js和jquery
3.JavaScript (JS)
编程语言：
解释型语言：边解释边执行
脚本语言：不需要编译 运行时由js解释器（js引擎）执行
运行在客户端的脚本语言
标记语言：不向计算机发出指令 是静态的
应用：
表单验证
页面动效 tab切换 轮播图
服务端开发（Node.js）
桌面程序
App
物联网
游戏开发
与Java无关
组成 ECMAScript+dom+bom
使用方式：
1.标签内
2.script标签中国
3.js文件
4.伪url
js语言基础：
数据类型
简单 String Number Boolean
复杂数据类型 Object Array ...
特殊:
null NaN undefined
变量 var ;
运算
+ - * / % ++ --
比较
== 值
=== 类型
> < >= <= !=
流程：
分支
if
if else
if else if else
switch case
break
循环
while
dowhile
for
break
continue
练习：输入年月日，计算这个日期是这一年的第几天
1.累加计算1~前一个月的天数（循环）
每个月的天数（分支）
2月特殊处理
2.加上当前日期
函数：
定义函数：
1.function 函数名(){}
2.var 函数名=function(){}
调用 函数名();
参数：
定义时形参没有类型，个数与实参个数可以不一致
参数arguments对象
实参的个数arguments.length
返回值:函数体中return 值
function 函数名 (){return ;}
return :1.终止函数的执行 2.返回值
函数：求菲波那切数列的第20项
数组：多个变量的容器，数组元素类型可以不相同
定义数组
方式1：var arr=new Array();
方式2：var arr=[];
添加元素
arr[0]=10;
注意：下标灵活,下标可以不连续
arr.push("hello");
下标从0开始递增
数组元素的个数
arr.length
String对象
Date对象
Number对象
DOM：Document Object Model 文档对象模型
<html>
<head>
<title></title>
</head>
<body>
<div>
<a href="">
<span></span>
</a>
</div>
</body>
</html>
1.获取节点
1).通过id属性值获取 要求id值唯一
2).通过class属性获取 类数组 操作与数组一致
3).通过标签名获取 类数组 操作与数组一致
4).name属性获取节点 类数组 操作与数组一致
2.获取dom节点的内容
innerText：获取纯文本
innerHTML：文本和html标记
value:表单元素的输入值
3.操作属性
获取属性值
dom节点.属性名
设置属性值
dom节点.属性名=
5.样式
dom节点.style.样式
6.事件
onclick
onmouseover
onmouseout
onsubmit
onfocus 获取焦点
onblur 失去焦点
7.节点操作
document.createElement
document.createTextNode
setAttribute(attrname,attrvalue)
appendChild
parentNode
removeChild
正则表达式：
JavaScript:
缺点：
浏览器不兼容
api不丰富
遍历不方便
JQuery:函数库 封装了js代码 使用方便 解决了浏览器兼容性 提供了丰富的api
jquery.js文件
开发中使用jquery
使用jquery：
方式一：在项目中添加jquery文件 引入js文件
方式二：CDN方式引入jquery
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
dom对象与jquery对象转换
dom---$()-->jquery
jquery---get(i)或者[i]--->dom对象
jquery选择器：
操作样式
1. css("样式名","样式值").css().css()...
2.css({,,,})
3.addClass() removeClass() ...
属性操作
1.attr(name,value) 用法与css()一致
2.prop(name,boolean) boolean 属性
事件动态绑定：
click(function(){})
易忘：
text-indent :2 em; 首行缩进
background-attachment: fixed;/*背景图固定*/，固定在页面下方
border-collapse: collapse;/*合并边框线*/
超链接改变行宽，以及文字居中
dispiay：inline-block;
width:55px;
text-align:center;
line-height:55px;
全部选中或取消
$("#t2 input").prop("checked",$(this).prop("checked"));
background-attachment:fixed ;
