整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
html區(qū)塊
●區(qū)塊元素
大多數(shù)html元素被定義為塊級(jí)元素或內(nèi)聯(lián)元素.
塊級(jí)元素在瀏覽器顯示時(shí),通常以新行來開始(和結(jié)束)
例如:<h1>,<p>,<ul>,<table>,<div>等
●內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開始
例如:<b>,<td>,<a>,<img>等
●div元素
html<div>元素是塊級(jí)元素,它可用于組合其他html元素的容器.
<div>元素沒有特定的含義.除此之外,由于它屬于塊級(jí)元素,瀏覽器會(huì)在其前后顯示折行.
如果與css一同使用,<div>元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性.
●<span>元素
html<span>元素是內(nèi)聯(lián)元素,可用作文本的容器.
<span>元素也沒有特定的含義.
當(dāng)與css一同使用時(shí),<span>元素可用于為部分文本設(shè)置樣式屬性.
二 html表單
html表單用于搜集不同類型的用戶輸入.
<form>標(biāo)簽用于創(chuàng)建供用戶輸入的html表單.
<form>
...
</form>
使用action屬性規(guī)定:當(dāng)提交表單時(shí),向何處發(fā)送表單數(shù)據(jù).
<form action="url">
</form>
method屬性
method屬性指定在提交表單時(shí)使用的http方法:get或post
下面是兩個(gè)示例:
<form action="url" method="get">
<form action="url" method="post">
提示:
當(dāng)你使用get時(shí),表單數(shù)據(jù)將在頁面地址中使用.
如果表單正在更新數(shù)據(jù)或使用敏感信息(密碼),請(qǐng)使用post.post提供更好的安全性,因?yàn)樘峤坏臄?shù)據(jù)不會(huì)再頁面地址中顯示.
name屬性
name屬性指定表單的名稱
要接手用戶的輸入,你需要相應(yīng)的表單元素,如文本字段.而輸入類型是由類型屬性(type)定義的,大多數(shù)經(jīng)常被用到的輸入類型有:text,password,radio,checkbox,submit等
下面是一個(gè)請(qǐng)求用戶名和密碼的表單例子:
<form>
<input type="text" name="username" /><br/>
<input type="password" name="password" />
</form>
單選框
<input type="radio">標(biāo)簽定義了表單單選框選項(xiàng)
下面是一個(gè)單選框的例子:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
運(yùn)行效果如下:
注意:沒有結(jié)束標(biāo)簽,也能正常顯示,但是有時(shí)候會(huì)出現(xiàn)意想不到的情況.所以建議還是要加上結(jié)束標(biāo)簽.
復(fù)選框
<input type="checkbox">定義了復(fù)選框,用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng).
下面是一個(gè)復(fù)選框的例子:
<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>
運(yùn)行效果如下:
提交按鈕將表單提交到其action屬性:
<input type="submit" value="Submit">
運(yùn)行效果如下:
表單提交后,應(yīng)該使用服務(wù)器端語言(如php)進(jìn)行數(shù)據(jù)處理.當(dāng)完成html和css課程后,你可以試著學(xué)習(xí)php課程.
三 html顏色
html顏色由一個(gè)十六進(jìn)制符號(hào)來定義,這個(gè)符號(hào)由紅色,綠色和藍(lán)色的值組成(rgb)
rgb顏色的最小值是0(十六進(jìn)制:#000).最大值是255(十六進(jìn)制:#FFF)
四 html框架
通過使用框架,你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁面
<iframe>標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架
一個(gè)內(nèi)聯(lián)框架被用來在當(dāng)前html文檔中嵌入另一個(gè)文檔
標(biāo)記一個(gè)內(nèi)聯(lián)框架:
<iframe src="url"></iframe>
提示:你可以把需要的文本放置在<iframe>和</iframe>之間,這樣就可以應(yīng)對(duì)不支持<iframe>的瀏覽器.html5中不支持<frame>標(biāo)簽.
定義iframe標(biāo)簽的高度與寬度
height和width屬性用來定義iframe標(biāo)簽的高度與寬度.
屬性默認(rèn)以像素為單位,但是你可以指定其按比例顯示(如:80%)
下面是一個(gè)例子:
<iframe src="url" width="200" height="200"></iframe>
定義iframe表示是否顯示邊框
frameborder屬性用來定義iframe表示是否顯示邊框
設(shè)置屬性值為"0"移除iframe的邊框:
<iframe src="url" frameborder="0"></iframe>
JavaScript中，將GET請(qǐng)求的參數(shù)串轉(zhuǎn)換為POST請(qǐng)求格式通常意味著將查詢字符串（query string）轉(zhuǎn)換為一個(gè)對(duì)象，然后可以通過某種方式（例如，通過fetch API或axios庫）發(fā)送POST請(qǐng)求。這里是一個(gè)基本的步驟指南和示例代碼：
假設(shè)你有一個(gè)GET請(qǐng)求的URL，如https://www.bjtimes.cc/api?param1=value1¶m2=value2，你可以這樣將其轉(zhuǎn)換為POST請(qǐng)求格式：
裝文件public.js完整代碼：
(function(){
//用于得到一個(gè)dom元素
var $=function(id){
return document.getElementById(id);
};
//用于得到一個(gè)ajax對(duì)象
$.init=function(){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
alert('error');
};
//用于發(fā)送ajax的get請(qǐng)求
$.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);
};
//用于發(fā)送ajax的post請(qǐng)求
$.post=function(url,data,callback,type){
var xhr=$.init();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//如果沒有傳遞type參數(shù)，讓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、添寫一個(gè)自調(diào)用匿名函數(shù)
(function (){
})();在一個(gè)項(xiàng)目中，可能會(huì)引用多個(gè)js框架，如果函數(shù)名相同，會(huì)有命名沖突，定義匿名函數(shù)沒有名稱，就不會(huì)沖突，
但匿名函數(shù)不能執(zhí)行，所以需要使用以上格式讓其自動(dòng)執(zhí)行一次。
2、封裝一個(gè)函數(shù)，用于dom元素的獲取
var $=function(id){
return document.getElementById(id);
};但$是局部變量，外面不能直接使用，所以：
window.$=$;
表示為全局對(duì)象window添加一個(gè)"$"的屬性，這個(gè)屬性的值是當(dāng)前局部變量$的值。
所以在外部，如果想獲取某個(gè)dom元素，可以直接：
$('content');
3、封裝一個(gè)函數(shù)，用于創(chuàng)建ajax對(duì)象
因?yàn)橹埃覀儗⒁粋€(gè)函數(shù)賦值給了$，函數(shù)也是對(duì)象，所以$也就是一個(gè)對(duì)象
$.init=function(){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
alert('error');
};表示為對(duì)象$添加一個(gè)新的方法：init
當(dāng)然, 也可以添加其它方法
4、封裝ajax的get請(qǐng)求
為對(duì)象 $添加一個(gè)get方法，參數(shù)有三個(gè)
url：表示ajax請(qǐng)求的頁面地址
data：表示get請(qǐng)求時(shí)所需要傳遞的參數(shù)
callback：當(dāng)ajax得到正確數(shù)據(jù)后，所執(zhí)行的回調(diào)函數(shù)，也就是參數(shù)callback接收的參數(shù)應(yīng)該是一個(gè)函數(shù)。
$.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請(qǐng)求
為對(duì)象 $添加一個(gè)post方法，參數(shù)有三個(gè)
url：表示ajax請(qǐng)求的頁面地址
data：表示post請(qǐng)求時(shí)所需要傳遞的參數(shù)
callback：當(dāng)ajax得到正確數(shù)據(jù)后，所執(zhí)行的回調(diào)函數(shù)，也就是參數(shù)callback接收的參數(shù)應(yīng)該是一個(gè)函數(shù)。
$.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參數(shù)，讓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);
}當(dāng)調(diào)用ajax請(qǐng)求時(shí)，可以使用這種形式：
$.method(頁面地址,傳遞參數(shù),處理函數(shù));
那么對(duì)應(yīng)的方法中callback參數(shù)就指向了這個(gè)處理函數(shù)，所以
callback(xhr.responseText);
相當(dāng)于
處理函數(shù)(xhr.responseText);
6、添加返回值類型
現(xiàn)在，我們?cè)赼jax程序中，可以使用三種數(shù)據(jù)形式：
1）字符串
2）xml
3）json
我們需要完善這個(gè)框架，可以返回不同類型的數(shù)據(jù)，再進(jìn)行不同的處理。
首先，為get和post方法添加第四個(gè)參數(shù)：type，表示期望得到的返回值類型
$.post=function(url,data,callback,type){}
再根據(jù)type值的不同，返回對(duì)應(yīng)的數(shù)據(jù)
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}調(diào)用形式
$.method(請(qǐng)求地址,參數(shù),處理函數(shù),數(shù)據(jù)類型);
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
