JavaWeb笔记
HTML
Hyper Text Markup Language ：超文本标记语言。
超文本标记语言：功能比普通文本更加强大 标记语言：使用一组标签对内容进行描述的语言，它不是编程语言
HTML文件都是以.html或者.htm结尾的，建议使用.html结尾！
Html文件分为头部分<head></head>和体部分<body></body>。
Html标签都是由开始标签和结束标签组成(<hr />)。
Html标签忽略大小写，建议使用小写。
标题标签
从<h1>到<h6>逐渐变小(加粗加黑显示)
水平线标签<hr/>
段落标签<p>
字体标签
<font 属性=值>内容</font>
color:设置字体的颜色，可使用英文单词或者16进制
size：设置字体的大小，从1到7逐渐变大，最大显示为7
face：设置字体
标签的src属性<img/>
当前目录：直接写文件名称或者./文件名称上一级目录：…/文件名称下一级：目录名称/文件名称
width：设置图片的宽度 height：设置图片的高度
alt：当图片无法正常显示的时候给出的提示信息，它的显示效果与浏览器有关
列表标签：
有序列表：<ol type=”1” start=”4”><li></li></ol>
无序列表：<ul type=”circle”><li></li></ul>
超链接标签：<a></a>
<a href=”http://www.baidu.com” target=”_self、_blank”>百度</a>
表格标签
<table>标记表示表格,以<table>开始以</table>结束
<caption>标题标签,给表格提供标题。
<th> 表头标签 一般对表格的第一行或者第一列进行格式化，就是粗体显示。
<tr> 行标签
<td> 单元格标签, 加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。
常用的属性
border 表格的边框
width 宽度
height 高度
align 对齐方式 left左对齐 right右对齐 center 居中
th 用作表头标签
rowspan 合并行，上边合并下边
colspan 合并列，一般是右边合并
<table border=”1px” width=”” heigth=”” cellspacing=”” cellpadding=”” align=”” bgcolor=””>
<tr >
<td rowspan=”” colspan=””></td>
</tr>
</table>
框架标签
<frameset>
<frame src="头部页面.html"/>
<frameset>
<frame src="左边页面.html"/>
<frame src="中间页面.html"/>
<frameset/>
<frame src="底部页面.html"/>
<frameset/>
<frameset rows=”30%,*”>
<frame src=”” />
<frameset cols=”20%,80%”>
<frame src=”” />
<frame name=”” />
</frameset>
</frameset>
HTML表单&CSS
表单标签
作用：用于采集用户输入的数据，提交给后台程序处理。
<form> 表示一个表单。
<body>
<form action="#" method="get" name="regForm">
内容
</form>
</body>
常用的属性：
Action：表单提交到的地址
method：提交方式
get:提交的数据会放到地址啦上
get提交的数据不能超过1kb（只适合于一些简单的数据）
post：提交的数据不会放到地址栏上
post提交的数据没有限制（文件上传用post比较好）
<input type="text"> 单行输入域
<textaera><textaera/>
value属性 该输入域的默认值，一般是4-10位的字符
name 这个是必须填，该name的属性值是用于给后台程序获取该标签的内容
<input type="password"> 密码输入域，使用一个非明文的效果获取用户输入的数据
value 同上
name 同上
<input type="radio"> 单选按钮
注意：如果是同一组的按钮的单选选项，就是用相同的name属性值
<input type="checkbox"/> 多选按钮
<input type="hidden"/> 隐藏域 特点：不会显示到HTML页面上
属性：name属性就是后台程序获取的标记
这个value值就是发送给后台程序的内容。
<select name="籍贯"/> 下拉选项
name属性就是后台程序获取的标记
下拉选项的option标签中的value属性值一定要填，这个value值就是发送给后台程序的内容。
<option value="广东">广东<option/>
<input type="file"/> 文件选择器
<input type="submit"/> 提交按钮
属性：name
提交按钮，点击这个按钮，form中的全部数据就会发送到后台。
value：表示按钮的显示文本。
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮
点击这个按钮，form中的数据返回到初始状态。
DIV和CSS
div就是html的一个普通标签，进行区域划分。
特性：独自占一行。独自不能实现复杂效果，必须结合CSS样式进行渲染
div通常是块级元素<div></div>可定义文档中的分区和节。
用id或class来标记
CSS称为层叠样式表，主要设置HTML页面中的文本内容(字体，大小，对齐方式)，图片的外形以及版面的布局等外观显示样式。
CSS+DIV布局更加灵活。
CSS基本选择器
元素选择器
<style>
div{
font-size: 30px;
color: pink;
}
</style>
类选择器
<head>
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
</head>
<body>
<div class="div2">
内容
</div>
</body>
id选择器
<head>
<style>
#div5{
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div id="div5">
内容
</div>
</body>
层级选择器
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<p>
内容
</p>
</body>
属性选择器
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>
</head>
<body>
用户名；<input type="text" name="username"/><br />
密码：<input type="password" name="password"/>
</body>
CSS引入方式
内部引入
<style type="text/css">
div{
font-size: 30px;
color: pink;
}
</style>
行内引入
<div style="font-size: 20px;color: blue;">
内容
</div>
外部引入
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
新建style.css文件
JavaScript
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)
Javascript：它能够让整个页面具有动态效果。
JavaScript组成部分
ECMAScript:它是整个javascript的核心，包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)
DOM：文档对象模型，包含(整个html页面的内容)、
BOM：浏览器对象模型,包含(整个浏览器相关内容)
获取元素
document.getElementById(“id名称”);
获取元素里面的值
document.getElementById(“id名称”).value;
JavaScript事件
表单提交事件：onsubmit
JavaScript的输出
警告框：alert();
向页面指定位置写入内容：innerHTML(属性)
向页面写入内容：document.write(“”);
如何控制表单提交？
关于事件onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。
onsubmit = return checkForm()
<script> function checkForm(){
函数体
}
</script>
<form action="#" method="get" name="regForm" "return checkForm()">
事件(onload) 定时操作：
setInterval(“changeImg()”,3000);
用法同事件onsubmit
<script> function init(){
setInterval("changeImg()",3000);
}
function changeImg(){ }
</script>
<body "init()"> 在指定位置定义id。
JavaScript的引入方式
内部引入方式
直接将javascript代码写到<script type=”text/javascript”></script>
外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script 标签的src属性引入该外部的js文件
BOM对象
BOM对象：浏览器对象模型(操作与浏览器相关的内容)
alert()警告框
setInterval():它有一个返回值，主要是提供给clearInterval使用。
setTimeout():它有一个返回值，主要是提供给clearTimeout使用。
clearInterval():该方法只能清除由setInterval设置的定时操作
clearTimeout():该方法只能清除由setTimeout设置的定时操作
Location对象
Location 对象包含有关当前 URL 的信息
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script> function tiao(){
window.location.href="http://www.ibaidu.com";
}
</script>
</head>
<body>
<a href="#" "tiao()">跳转到百度首页</a> </body>
</html>
History 对象包含用户（在浏览器窗口中）访问过的 URL。
<input type=“button” value=" 返 回 上 一 个 页 面 “javascript:history.back()”/>
go(参数)
参数：-1 返回上一个历史记录页面；-2返回上上一个历史记录页面，1进入下一个历史记录页面。
其他事件
JQuery
JQuery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
所有的jquery代码写在页面加载函数内
$(function(){
Jquery代码
});
获取元素方法
JS: document.getElementById();
JQ: $(“#id”);
注意 JQ对象只能操作JQ里面的属性和方法 JS对象只能操作JS里面的属性和方法。
层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","pink");
});
$("#btn2").click(function(){
$("body>div").css("background-color","pink");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","pink");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>