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>

method屬性

method屬性指定在提交表單時使用的http方法:get或post

下面是兩個示例:

提示:

當你使用get時,表單數據將在頁面地址中使用.

如果表單正在更新數據或使用敏感信息(密碼),請使用post.post提供更好的安全性,因為提交的數據不會再頁面地址中顯示.

name屬性

name屬性指定表單的名稱

要接手用戶的輸入,你需要相應的表單元素,如文本字段.而輸入類型是由類型屬性(type)定義的,大多數經常被用到的輸入類型有:text,password,radio,checkbox,submit等

下面是一個請求用戶名和密碼的表單例子:

<form>

</form>

單選框

<input type="radio">標簽定義了表單單選框選項

下面是一個單選框的例子:

<form>

<input type="radio" name="sex" value="female">Female

</form>

運行效果如下:

注意:沒有結束標簽,也能正常顯示,但是有時候會出現意想不到的情況.所以建議還是要加上結束標簽.

復選框

<input type="checkbox">定義了復選框,用戶需要從若干給定的選擇中選取一個或若干選項.

下面是一個復選框的例子:

<form>

<input type="checkbox" name="vehicle" value="Car">I have a Car

</form>

運行效果如下:

提交按鈕將表單提交到其action屬性:

運行效果如下:

表單提交后,應該使用服務器端語言(如php)進行數據處理.當完成html和css課程后,你可以試著學習php課程.

三 html顏色

html顏色由一個十六進制符號來定義,這個符號由紅色,綠色和藍色的值組成(rgb)

rgb顏色的最小值是0(十六進制:#000).最大值是255(十六進制:#FFF)

四 html框架

通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面

一個內聯框架被用來在當前html文檔中嵌入另一個文檔

標記一個內聯框架:

提示:你可以把需要的文本放置在<iframe>和</iframe>之間,這樣就可以應對不支持<iframe>的瀏覽器.html5中不支持<frame>標簽.

定義iframe標簽的高度與寬度

height和width屬性用來定義iframe標簽的高度與寬度.

屬性默認以像素為單位,但是你可以指定其按比例顯示(如:80%)

下面是一個例子:

定義iframe表示是否顯示邊框

frameborder屬性用來定義iframe表示是否顯示邊框

設置屬性值為"0"移除iframe的邊框:

JavaScript中，將GET請求的參數串轉換為POST請求格式通常意味著將查詢字符串（query string）轉換為一個對象，然后可以通過某種方式（例如，通過fetch API或axios庫）發送POST請求。這里是一個基本的步驟指南和示例代碼：

步驟指南

解析查詢字符串：使用URLSearchParams API或正則表達式等方法解析GET請求的查詢字符串。
構建POST請求體：將解析后的參數轉換為一個對象，這個對象可以作為POST請求的請求體（body）。
發送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(請求地址,參數,處理函數,數據類型);

在線咨詢

上一篇：html5如何將表單數據提交到數據庫表的指定空格
下一篇：HTML的基本語法以及如何使用HTML來創建網頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html自學教程（五）html基礎

步驟指南

示例代碼

您的項目需求