html区块
●区块元素
大多数html元素被定义为块级元素或内联元素.
块级元素在浏览器显示时,通常以新行来开始(和结束)
例如:<h1>,<p>,<ul>,<table>,<div>等
●内联元素
内联元素在显示时通常不会以新行开始
例如:<b>,<td>,<a>,<img>等
●div元素
html<div>元素是块级元素,它可用于组合其他html元素的容器.
<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.
如果与css一同使用,<div>元素可用于对大的内容块设置样式属性.
●<span>元素
html<span>元素是内联元素,可用作文本的容器.
<span>元素也没有特定的含义.
当与css一同使用时,<span>元素可用于为部分文本设置样式属性.
二 html表单
html表单用于搜集不同类型的用户输入.
<form>标签用于创建供用户输入的html表单.
<form>
...
</form>
使用action属性规定:当提交表单时,向何处发送表单数据.
<form action="url">
</form>
method属性
method属性指定在提交表单时使用的http方法:get或post
下面是两个示例:
<form action="url" method="get">
<form action="url" method="post">
提示:
当你使用get时,表单数据将在页面地址中使用.
如果表单正在更新数据或使用敏感信息(密码),请使用post.post提供更好的安全性,因为提交的数据不会再页面地址中显示.
name属性
name属性指定表单的名称
要接手用户的输入,你需要相应的表单元素,如文本字段.而输入类型是由类型属性(type)定义的,大多数经常被用到的输入类型有:text,password,radio,checkbox,submit等
下面是一个请求用户名和密码的表单例子:
<form>
<input type="text" name="username" /><br/>
<input type="password" name="password" />
</form>
单选框
<input type="radio">标签定义了表单单选框选项
下面是一个单选框的例子:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
运行效果如下:
注意:没有结束标签,也能正常显示,但是有时候会出现意想不到的情况.所以建议还是要加上结束标签.
复选框
<input type="checkbox">定义了复选框,用户需要从若干给定的选择中选取一个或若干选项.
下面是一个复选框的例子:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>
<input type="checkbox" name="vehicle" value="Car">I have a Car
</form>
运行效果如下:
提交按钮将表单提交到其action属性:
<input type="submit" value="Submit">
运行效果如下:
表单提交后,应该使用服务器端语言(如php)进行数据处理.当完成html和css课程后,你可以试着学习php课程.
三 html颜色
html颜色由一个十六进制符号来定义,这个符号由红色,绿色和蓝色的值组成(rgb)
rgb颜色的最小值是0(十六进制:#000).最大值是255(十六进制:#FFF)
四 html框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面
<iframe>标签规定一个内联框架
一个内联框架被用来在当前html文档中嵌入另一个文档
标记一个内联框架:
<iframe src="url"></iframe>
提示:你可以把需要的文本放置在<iframe>和</iframe>之间,这样就可以应对不支持<iframe>的浏览器.html5中不支持<frame>标签.
定义iframe标签的高度与宽度
height和width属性用来定义iframe标签的高度与宽度.
属性默认以像素为单位,但是你可以指定其按比例显示(如:80%)
下面是一个例子:
<iframe src="url" width="200" height="200"></iframe>
定义iframe表示是否显示边框
frameborder属性用来定义iframe表示是否显示边框
设置属性值为"0"移除iframe的边框:
<iframe src="url" frameborder="0"></iframe>
JavaScript中,将GET请求的参数串转换为POST请求格式通常意味着将查询字符串(query string)转换为一个对象,然后可以通过某种方式(例如,通过fetch API或axios库)发送POST请求。这里是一个基本的步骤指南和示例代码:
假设你有一个GET请求的URL,如https://www.bjtimes.cc/api?param1=value1¶m2=value2,你可以这样将其转换为POST请求格式:
装文件public.js完整代码:
(function(){
//用于得到一个dom元素
var $=function(id){
return document.getElementById(id);
};
//用于得到一个ajax对象
$.init=function(){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
alert('error');
};
//用于发送ajax的get请求
$.get=function(url,data,callback,type){
var xhr=$.init();
if(data!=null){
url=url+'?'+data;
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}
}
};
xhr.open('get',url);
xhr.setRequestHeader("If-Modified-Since","0");
xhr.send(null);
};
//用于发送ajax的post请求
$.post=function(url,data,callback,type){
var xhr=$.init();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//如果没有传递type参数,让type的值为text
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}
}
};
xhr.open('post',url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
}
window.$=$;
})();
语言类似于jQuery
理解:
1、添写一个自调用匿名函数
(function (){
})();
在一个项目中,可能会引用多个js框架,如果函数名相同,会有命名冲突,定义匿名函数没有名称,就不会冲突,
但匿名函数不能执行,所以需要使用以上格式让其自动执行一次。
2、封装一个函数,用于dom元素的获取
var $=function(id){
return document.getElementById(id);
};
但$是局部变量,外面不能直接使用,所以:
window.$=$;
表示为全局对象window添加一个"$"的属性,这个属性的值是当前局部变量$的值。
所以在外部,如果想获取某个dom元素,可以直接:
$('content');
3、封装一个函数,用于创建ajax对象
因为之前,我们将一个函数赋值给了$,函数也是对象,所以$也就是一个对象
$.init=function(){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
alert('error');
};
表示为对象$添加一个新的方法:init
当然, 也可以添加其它方法
4、封装ajax的get请求
为对象 $添加一个get方法,参数有三个
url:表示ajax请求的页面地址
data:表示get请求时所需要传递的参数
callback:当ajax得到正确数据后,所执行的回调函数,也就是参数callback接收的参数应该是一个函数。
$.get=function(url,data,callback,type){
var xhr=$.init();
if(data!=null){
url=url+'?'+data;
}
xhr.open('get',url);
xhr.setRequestHeader("If-Modified-Since","0");
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}
}
};
xhr.send(null);
};
5、封装post请求
为对象 $添加一个post方法,参数有三个
url:表示ajax请求的页面地址
data:表示post请求时所需要传递的参数
callback:当ajax得到正确数据后,所执行的回调函数,也就是参数callback接收的参数应该是一个函数。
$.post=function(url,data,callback,type){
var xhr=$.init();
xhr.open('post',url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//如果没有传递type参数,让type的值为text
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}
}
};
xhr.send(data);
}
当调用ajax请求时,可以使用这种形式:
$.method(页面地址,传递参数,处理函数);
那么对应的方法中callback参数就指向了这个处理函数,所以
callback(xhr.responseText);
相当于
处理函数(xhr.responseText);
6、添加返回值类型
现在,我们在ajax程序中,可以使用三种数据形式:
1)字符串
2)xml
3)json
我们需要完善这个框架,可以返回不同类型的数据,再进行不同的处理。
首先,为get和post方法添加第四个参数:type,表示期望得到的返回值类型
$.post=function(url,data,callback,type){}
再根据type值的不同,返回对应的数据
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}
调用形式
$.method(请求地址,参数,处理函数,数据类型);
*请认真填写需求信息,我们会在24小时内与您取得联系。