目录
网页的组成部分
内容
在网页中我们可以看到的内容
表现
网页内容在网页上的展现形式 比如说 布局，颜色，大小
行为
指的是页面中元素与输入设备交互式的相应，一般使用js实现
html常用标签
插入图片
<img src=" "width=" " height="">src表示图片的路径，有绝对路径以及相对路径之分 width表示设置照片宽度
height表示照片的高度，可以采用像素设置，也可以使用%设置
超链接标签<a></a>
<a href=""></a>href属性表示要跳转的网页
target="_back"属性表示是在新页面显示
a标签的锚定
<a name="a"></a>
<a href="#a">点我</a>表格table标签
tr表示行
td表示列
colspan合并列
rowspan合并行
border边框
cellspacing="0"单元格间距为0
bgcolor设置背景颜色
width设置宽度
height设置高度
th 是表头标签，标签内字体居中
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!-- cellspacing="0"单元格间距设为0
colspan 合并两列
rowspan 合并两行-->
<table width="500px" height="500px" border="1px solid blue" bgcolor="antiquewhite" align="center" cellspacing="0">
<tr>
<td colspan="2"></td>
<!-- <td></td> -->
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<!-- <td></td> -->
</tr>
<tr>
<!-- <td></td> -->
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
</table><br /><br />
<table border="1px" align="center" cellspacing="0px" bgcolor="bisque" height="500px" width="500px">
<tr>
<th width="125px">页面总流量</th>
<th width="125px">共计来访</th>
<th width="125px">会员</th>
<th width="125px">游客</th>
</tr>
<tr>
<th width="125px">974562</th>
<th width="125px">16545</th>
<th width="125px">3213</th>
<th width="125px">124324</th>
</tr>
<tr>
<th width="125px">121</th>
<th width="125px">1243</th>
<th width="125px">1243</th>
<th width="125px">123</th>
</tr>
<tr>
<th>平均每人浏览</th>
<th colspan="3">1.58</th>
</tr>
</table>
</body>
</html>
form表单
文本框input type="text"
密码域<input type="password">
单选框<input type="radio" name="a" checked="checked">
复选框<input type="checkbox" name="b">
下拉栏 <select>
<option>山东</option>
<option>菏泽</option>
<option>曹县</option>
</select>
文件<input type="file">
文本域<input type=“textarea“”>
重置<input type=“reset“>
提交<input type=“submit“>
日期<input type=“date“>
数字 <input type=“number“>
h5播放器音频
<audio controls="controls">
<source src=""></source>
</audio>
loop循环执行视频
<video controls="controls" loop="loop">
<source src="1.jpg"></source>
</video>
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<link rel="stylesheet" href="1.css" />
</head>
<body>
<form method="post" action="www.baidu.com">
<table border="0px" width="700px" height="700px" align="center" bgcolor="antiquewhite" cellspacing="0px">
<tr>
<td colspan="2" align="center"><h1>注册表单</h1></td>
<!-- <td></td> -->
</tr>
<tr>
<td>用户名</td>
<td><input class="a" type="text" name="user"></td>
</tr>
<tr>
<td>密码</td>
<td><input class="a" type="password" name="password"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" class="a" name="repassword"></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text" class="a" name="nidk"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" class="a" name="mail"></td>
</tr>
<tr>
<td>性别</td>
<td>男<input type="radio" name="a" checked="checked" value="男"> 女<input type="radio" name="a" value="女"></td>
</tr>
<tr>
<td>爱好</td>
<td>篮球<input type="checkbox" name="b"> 足球<input type="checkbox" name="b"> 乒乓球<input type="checkbox" name="b"></td>
</tr>
<tr>
<td>城市</td>
<td>
<select>
<option>山东</option>
<option>菏泽</option>
<option>曹县</option>
</select>
</td>
</tr>
<tr>
<td>头像</td>
<td><input type="file"></td>
</tr>
<tr>
<td>验证码</td>
<td><img src="屏幕截图%202021-07-06%20112926.png"> <input type="button" value="点击换一张"></td>
</tr>
<tr>
<td>自我描述</td>
<td>
<textarea>请输入自我描述</textarea>
</td>
</tr>
<tr>
<td colspan="2px" align="center">
<input type="reset" />
<input type="submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
表单提交细节
form 标签是表单标签 action 属性设置提交的服务器地址 method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有 name 属性值
2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
3、表单项不在提交的 form 标签中
GET 请求的特点是：
1、浏览器地址栏中的地址是：action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是：
1、浏览器地址栏中只有 action 属性值
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
font 字体标签
标题标签
<h1></h1>
<h6></h6>
列表
有序列表
<ol><li></li></ol>
无序列表
<ul><li></li></ul>
开头顶格列表
<dt><li> </li></dt>
div
div 标签 默认独占一行
span 标签
它的长度是封装数据的长度
p 段落标签
默认会在段落的上方或下方各空出一行来（如果
已有就不再空）
事件
单击 onlick
双击 ondblclick
鼠标划入 mouseenter
鼠标划出 mouselive
css
css分类
需要使用<style>css属性</style>
标签选择器
div{}
类选择器
.a{}调用时 class=“a”
id 选择器
#a{} 调用时 id=“a”
组合选择器
组合选择器的格式是： 选择器 1，选择器 2，选择器 n{ 属性：值; }
常用样式
字体颜色 color：red；
宽度width:19px;
高度height:20px;
背景颜色 background-color:#0F2D4C
字体样式： color：#FF0000；字体颜色红色 font-size：20px; 字体大小
红色 1 像素实线边框 border：1px solid red;
DIV 居中 margin-left: auto; margin-right: auto;
文本居中： text-align: center;
超连接去下划线 text-decoration: none;
列表去除修饰 ul { list-style: none; }
表格细线 table { border: 1px solid black; /*设置边框*/ border-collapse: collapse; /*将边框合并*/ }td,th {border: 1px solid black; /*设置边框*/ }
引入外部css样式
<link rel="stylesheet" href="">
javascript
介绍
Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码
特点
交互性（它可以做的就是信息的动态交互）
JS 是弱类型，Java 是强类型。
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
书写方式与引入css
1.只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写 JavaScript 代码
2.使用 script 标签引入 单独的 JavaScript 代码文件
<script type="text/javascript" src="1.js"></script>
数据类型
定义格式
var 变量名; var 变量名 = 值;
变量类型
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
特殊类型
undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined
null 空值
NaN 全称是：Not a Number。非数字。非数值。
关系运算符
等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
且运算： &&
或运算： ||
取反运算： !
所有的变量，都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false；
数组
定义方式一
var str = []; // 空数组
定义方式二
var str = new Array();
遍历方式一
for(var i=0;i<str.length;i++){
console.log(str[i]);
}遍历方式二 高效
for(var a in str){
console,log(str[a]);
}函数
定义方式
function 函数名(形参列表){ 函数体 } 可以在定义之前使用
var 函数名 = function(形参列表) { 函数体 }不可以再定义之前使用
函数重载
在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义
函数的隐形形参（可变形参）
就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。 隐形参数特别像 java 基础的可变长参数一样。 public void fun( Object ... args ); 可变长参数其他是一个数组。 那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。
DOM
document对象获取/更改css内容
window.document.getElementById("元素的id的属性的值")--返回1个元素
window.document.getElementsByName("元素的name属性的值")--返回多个元素(用数组
window.document.getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
window.document.getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
window.document.write()--向文档写 HTML 表达式 或 JavaScript 代码
window.document.title--返回网页的标题
window.document.id--设置或返回元素的id
window.document.innerHTML--设置或返回元素的内容
文档就绪
在定义之前使用需要使用文本就绪功能
格式
window.document.getElementById("元素的id的属性的值")--返回1个元素，定义一个变量接收可以更改名字修改样式a.innerHTML="张三";
按照表格进行输出
console.table(对象名) 按照表格形式进行输出
JQuery
简介
jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码
语法
基础语法是：$(selector).action()//行为
优势
1,简化了js的写法，用$替代了document.getXxx()
2,可以像CSS选择器一样非常方便的获取元素
3,可以通过修改css样式控制页面的效果
引入jQuery文件
<script src="jquery.min.js"></script>jQuery获取选择器
标签名选择器 $（“div”）
id选择器$("#id")
class选择器 $(".cla")
属性选择器$("[href]")
高级选择器$("div.d3")
获取之后可以进行事件操作单击，双击，鼠标划入，划出等等
jQuery文档就绪
1.$（function（）{
jQuery业务
}）
2.
$(document.ready(function(){
jQuery业务
}))
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
//window.document.getElementsByTagName("h1")[0].innerHTML="我是你野爹";
//未加载就是用会报错
//想使用h1但未加载 使用时会报错
//解决方法 ：写在h1加载之后+使用文档就绪函数,
/*1.先导入jQuery文件
2.$(document).ready(function(){业务需求});
*/
$(document).ready(function(){
//document.getElementsByTagName("h1")[0].innerHTML="我是你野爹";//原始方式
// alert($("h1").text("张三"));
/* $("h1").text("我是你野爹");//jQuery简化 */
$("#d1").onmouseenter(function(){
$("[href]").hide();
});
});
</script>
</head>
<body>
<h1>张</h1>
<div id="d1">我是div1</div>
<div class="dd">我是div2</div>
<div>我是div3</div>
<div class="dd">我是div4</div>
<p id="p1">你是p1</p>
<p>你是p2</p>
<a id="dd">我是a1</a><br />
<a href="#">我是a2</a><br />
<a href="#">我是a3</a>
</body>
</html>
json
简介
轻量级的数据交换格式
格式
var a='[{"name":"tony","age":"18"}]'
json与js对象转换
json串转化成js对象 JSON.parse()
js对象转为json串 JSON.stringify()
Ajax
概念
Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
格式
$.ajax({
type: //要使用的请求方式
url: //要使用的请求路径
contentType: //要传递的数据类型
data: //要拼接的数据
dataType: //数据类型
success: function(data){ //成功时的方案
},
error: function(data){ //失败时的方案
}
})
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
