表单标签html<form action="表单数据提交的地址" method="提交的方式：方式有很多，常用的get,post">
get/post提交的区别：
1.数据在地址栏是否显示
2.提交的数据是否有大小的限制
表单元素：
表单的输入：input
根据type属性的不同有不同的输入类型
<input type="text" name="" value="默认值"/>
<input type="password" name="" value="默认值" maxLength="输入的最大的长度"/>
<input type="radio" name="" value="提交到后台的值" checked="checked"/>
<input type="checkbox" name="" value="提交到后台的值" checked="checked"/>
<input type="file" name="" /> 文件上传
<input type="submit" value="是显示在按钮上的字"/>
<input type="reset" value="是显示在按钮上的字"/>
<input type="button" value="是显示在按钮上的字"/>
表单文本域：textarea <textarea name="" rows="几行" cols="几列"></textarea>
表单下拉列表：select <select > <option value="提交到后台的值"></option> </select>
表格<table>
<tr>
<td colspan="" rowspan=""></td>
</tr>
</table>
单元格的合并：
只要找准跨行还是跨列图片
<img src="图片的地址：目前相对路径的写法，总是要找相对的位置 ./ 代表当前的路径 ../ 回到上一层的路径 "/>超链接
<a href="要跳转的一个地址" target="打开的方式：_self _blank">链接</a>CSSpart 1使用div和css完成网页制作
我们之前使用表格的布局制作网页,但是表格制作有缺陷,所以我们需要使用这种方式.
div能更灵活的布局网站div HTML的块标签
<div></div>:默认每个div占一行
<span></span> : 默认在同一行css : 层叠样式表*用于美化HTML
*知道CSS的语法
包含两个部分 一个是选择器,一个是声明
属性 值 属性 值
h1 {color:bule; font-size:14px; }
选择器 声明 声明CSS引入的方式(3种)行内样式: 直接在HTML的元素上(<body>里)使用style属性设置CSS(局限性:只能针对一个元素设置)
页面内的样式:通常在<head>标签中
外部样式:
新建一个CSS文件. 如何从CSS文件引入到HTML文件 使用<link>关键字
<link href="css文件的地址 " rel = "stylesheef"(可以不写) type="text/css"/>
就近原则: CSS的选择器元素选择器
div{
border:1px solid blue;
width:40px;
height:45px;
}ID选择器
<style>
#id的名称{
参数
}
</style>类选择器:一次选择多个一类的元素
.divclass{
}一些说明
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
//元素选择器
div{
color: red; //div里内容的颜色
border: 2px solid blue; //设置div的边框的大小和颜色
font-size: 95px; //设置字体的大小
width: 300px; //边框的宽度
height: 150px; //边框的高度
}
//ID选择器
#h01{ //固定格式: #id的名称
color: darkturquoise;
height: 200px;
border: solid black;
}
//类选择器
.divclass{ // .class的名字
color: green;
border: 5px solid red;
}
</style>
</head>
<body>
<div>001</div>
<div id="h01">002</div>
<div class="divclass">003</div> // class=的内容不用加 .
<div class="divclass">004</div>
<div class="divclass">005</div>
</body>
</html>CSS的浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。使用float属性
left
right
none
inherit
clear{
clear : both;
}
通过浮动和清除可以控制一行出现几个商品CSS的其他选择器属性选择器
<style>
input[type = "text"]{
}
</style>后代选择器
div span{} 查找的是所有的div中所有的span元素 ,不区分子父类层级子元素选择器
div > span{}CSS的样式背景,文本,字体,链接等 查看W3 Schoolpart2---CSS的盒子模型及定位使用div和css布局注册页面
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}单边内边距属性也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}margin外边距
padding 内边距
定位 position ,left,right position:
absolute 滚动
fixed 不滚动
显示和隐藏:display:
block:显示
mone:隐藏
inline:在一行显示
JavaScriptJS概述:运行在浏览器端的一个脚本语言.
ECMAScript: JS的基本的语法
BOM:浏览器对象模型
DOM: 文本对象模型
JS的用途:使页面更加丰富,可以动起来
JS的基本语法1.区分大小写
2.弱变量类型的语言
定义所有的变量都用 var
var=1; var="abc";
3.每行结尾的;分号可有可无
4.注释,变量的命名和java一样（字母 数字 下划线 美刀符）
JS的数据类型1.原始类型
undefined 未定义类型
boolean 布尔类型
number 数字类型
string 字符 或字符串
null object 如果变量是一种引用类型或者null类型2.引用类型
对象类型，对象的默认值是null
JS中的运算符
与JAVA基本一致,只有一个
=== 全等 类型和值都一样的情况下才为trueJS的一些语句
与java中的一致,
for（var = 1 ； i<10 ; i++ ）{}
for (var i in list){} 从list里面 取元素JS的输出语句 document.getElementBYId("id") 通过ID获取元素
JS的通常的开发步骤:
JS通常由一个事件触发
触发一个函数,定义一个函数.
获得操作对象的控制权
修改要操作的对象的属性值
定义函数:
function 函数名称(){
//函数体
}
匿名函数
window.onload = function()
{}
常用事件
onsubmit
onload 页面加载
onclick 单击
ondblclick 双击
onmouseover 鼠标指到这儿
onmouseout 鼠标离开
JS的引入方式
一种:页面内直接编写JS代码,
<script>
</script>
第二种：在.JS文件写，在HTML中引入JS中 <head> 调用
JS校验<form action="" method="post"
funtion checkForm(){
}
JS完成图片滚播HTML中的window对象的
setInterval 按照周期，每几个多少毫秒执行某个表达式 执行无数次
setTimeout 按照毫秒数执行一个表达式 执行一次
清除：
clearInterval();
clearTimeout();
匿名函数：
window.onload = function（）{}
file://C:/Users/ADMINI~1/AppData/Local/Temp/1524639674588.png?lastModify=1525331566
file://C:/Users/ADMINI~1/AppData/Local/Temp/1524641736544.png?lastModify=1525331566
JS中的BOM对象 （Browser对象）
1.window
alert（） 警告框，弹出对话框 不用加window。
SetInterval（）
SetTimeout（）
clearSetInterval（）
ClearSetTimeout（）
confirm() 弹出一个确认窗口 一般用于设置删除数据的时候
prompt（） 弹出一个输入的窗口
open（）；打开一个新的窗口Navigator 对象
包含的都是有关浏览器的信息
appName 返回浏览器的信息
Screen ： 用来获得屏幕的信息 window.screen.
history.go(-1)/history.back
location.href="";file://C:/Users/ADMINI~1/AppData/Local/Temp/1524645199202.png?lastModify=1525331566
拓展：
//alert
//排除法JS的输出document.getElementById("").innerHTML="HTML的代码"
onfocus 获得焦点
onblour 失去焦点
onsubmit 提交的时候
file://C:/Users/ADMINI~1/AppData/Local/Temp/1524793097361.png?lastModify=1525331566
今日总结ECMAscript:语法:记住与java语法不一样的地方：
弱变量类型的语言：var
=== ： 全等 类型和值都相等才为ture；
BOM：浏览器对象模型window：
setInterval/clearInterval
setTimeout/clearTimeout
alert(): 一般调试用
confirm（） ：确认框
prompt（）：可输入的对话框
open（） :打开一个小窗口
history：
history.go(-1) / history.back()
location
location.href="" :可以用作页面的跳转
DOMJS的事件总结(记)
onchange:下拉列表事件
ondblclick:双击事件
onload
onclick
onsumbit
onfocus:
onblur:
键盘操作事件
onkeypress:
onkeydown:
onkeyup: 按下抬起的那一刻
鼠标操作事件
onmousemove: 鼠标移动
onmouseout: 鼠标离开
onmouseover: 鼠标放上去
onmousedown:
onmouseup:
JS获得表格的行数
*获得表格的控制权
*var tab1 = document.getElementById("tab1")
*var len = tab1.rows.length;
<script>
//所有表格改变颜色
/*function changeColor(){
var tab1 = document.getElementById("tab1");
var len = tab1.rows.length;
for(var i = 0 ;i < len; i++){
if(i%2 == 0){
tab1.rows.style.backgroundColor="red";
}else{
tab1.rows.style.backgroundColor="green";
}
}
}*/
//除表头外其余表格改变颜色
/*function changeColor(){
var tab1 = document.getElementById("tab1");
var len = tab1.tBodies[0].rows.length;
for (var i =0 ; i<len ; i++) {
if (i%2 == 0) {
tab1.tBodies[0].rows.style.backgroundColor = "blue";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}*/
//全选 全不选
function seletAll() {
var selectall = document.getElementById("selectAll");
var otherbox = document.getElementsByName("otherselect");
if(selectall.checked == true) {
for(var i = 0; i < otherbox.length; i++) {
otherbox.checked = true;
}
} else {
for(var i = 0; i < otherbox.length; i++) {
otherbox.checked = false;
}
}
}
</script>JS中的DOM对象DOM的概述什么是DOM(文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
我们写的html文件都是一个文档document
head body 标签 都是 Element对象
标签里面写的东西 都是Text对象,
HTML DOM 对象参考手册
对象 描述
Document 代表整个 HTML 文档，可被用来访问页面中的所有元素
Anchor 代表 <a> 元素
Area 代表图像映射中的 <area> 元素
Base 代表 <base> 元素
Body 代表 <body> 元素
Button 代表 <button> 元素
Event 代表某个事件的状态
Form 代表 <form> 元素
Frame 代表 <frame> 元素
Frameset 代表 <frameset> 元素
Iframe 代表 <iframe> 元素
Image 代表 <img> 元素
Input button 代表 HTML 表单中的一个按钮
Input checkbox 代表 HTML 表单中的复选框
Input file 代表 HTML 表单中的文件上传
Input hidden 代表 HTML 表单中的隐藏域
Input password 代表 HTML 表单中的密码域
Input radio 代表 HTML 表单中的单选按钮
Input reset 代表 HTML 表单中的重置按钮
Input submit 代表 HTML 表单中的确认按钮
Input text 代表 HTML 表单中的文本输入域（文本框）
Link 代表 <link> 元素
Meta 代表 <meta> 元素
Object 代表 <Object> 元素
Option 代表 <option> 元素
Select 代表 HTML 表单中的选择列表
Style 代表单独的样式声明
Table 代表 <table> 元素
TableData 代表 <td> 元素
TableRow 代表 <tr> 元素
Textarea 代表 <textarea> 元素
Document的常见的操作
获取元素
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合
file://C:/Users/ADMINI~1/AppData/Local/Temp/1524812568162.png?lastModify=1525331566
创建元素
document.createElement() 创建元素document.createTextNode() 创建文本
添加节点:
element.appendChild() 在最后添加一个节点element.insertBefore() 在某个元素之前插入
删除元素
element.removeChild() 删除元素
file://C:/Users/ADMINI~1/AppData/Local/Temp/1524814392425.png?lastModify=1525331566
[使用JS完成省市联动的效果]创建数组
1.new array();new array(size);new array(element0 , element1 , element..........);2.var arrs=[1,2,3,4];
下拉列表的改变的事件 onchange
JS的内置对象:
String
number
Date
getTime();返回1970.1.1至今的毫秒数
JS的全局函数parseInt() ; parseInt("111");parseFloat();
解码decodeURI()decodeURIComponet()
编码encodeURI()encodeURIComponent()
eval函数:将一段内容当成是JS的代码来执行var s = "alert('aaaaa')"eval(s);JSON 数据:
JQuary总结JQ的方法只能由JQ的对象调用核心的函数:$()
括号里面可以写
1.选择器
2.原生的JS对象
3.数组
选择器1.id选择器
$("#id")2.类选择器
$(".class")3.元素选择器
$("div")
4.后代选择器
空格 $("form input")
5.属性选择器
$("input[属性名称=属性值]");
6.表单选择器
:checked 单选:selected 下拉列表
效果函数基本的显示隐藏 show() hide()
向上下滑动 : slideup() / slidedown()
淡入淡出 : fideIn() fideOut()
JQ改变页面样式的两类方式1.通过css()
使用再样式代码比较少的情况下
2.通过 addClass()/removeClass()/toggleClass()
适用于 样式事先定义好的情况下
Jq操作元素属性attr()/porp()
1.$("#id").prop("src") 获取属性值$("#id").prop("src","12") 修改属性值$("#id").prop({"src":"123","":""}) 一次性修改多个
html()/text()/val()
$("#id").html() 获取元素里的html代码
$("#id").html("<span>dadad</span>") 用括号里的内容覆盖原有内容 可以再里面写HTMl标签
$("#id").text() 获取元素里的文本
$("#id").text("<span>dadad</span>")
$("#id").val();获取元素里的value属性值jq的文档操作file://C:/Users/ADMINI~1/AppData/Local/Temp/1525265897538.png?lastModify=1525331566
事件跟JS的事件是一致的 ,只不过去掉ON
$("#id").click(function(){});
$("#id").on("click" function(){});
$("#id").bind("click" function(){});