整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html自学教程(五)html基础

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请求。这里是一个基本的步骤指南和示例代码:


步骤指南


  1. 解析查询字符串:使用URLSearchParams API或正则表达式等方法解析GET请求的查询字符串。
  2. 构建POST请求体:将解析后的参数转换为一个对象,这个对象可以作为POST请求的请求体(body)。
  3. 发送POST请求:使用fetch API、axios或其他HTTP客户端库发送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(请求地址,参数,处理函数,数据类型);