html區(qū)塊

●區(qū)塊元素

大多數(shù)html元素被定義為塊級元素或內(nèi)聯(lián)元素.

塊級元素在瀏覽器顯示時,通常以新行來開始(和結(jié)束)

例如:<h1>,<p>,<ul>,<table>,<div>等

●內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時通常不會以新行開始

例如:<b>,<td>,<a>,<img>等

●div元素

html<div>元素是塊級元素,它可用于組合其他html元素的容器.

<div>元素沒有特定的含義.除此之外,由于它屬于塊級元素,瀏覽器會在其前后顯示折行.

如果與css一同使用,<div>元素可用于對大的內(nèi)容塊設置樣式屬性.

●<span>元素

html<span>元素是內(nèi)聯(lián)元素,可用作文本的容器.

<span>元素也沒有特定的含義.

當與css一同使用時,<span>元素可用于為部分文本設置樣式屬性.

二 html表單

html表單用于搜集不同類型的用戶輸入.

<form>標簽用于創(chuàng)建供用戶輸入的html表單.

<form>

...

</form>

使用action屬性規(guī)定:當提交表單時,向何處發(fā)送表單數(shù)據(jù).

<form action="url">

</form>

method屬性

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

下面是兩個示例:

<form action="url" method="get">

<form action="url" method="post">

提示:

當你使用get時,表單數(shù)據(jù)將在頁面地址中使用.

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

name屬性

name屬性指定表單的名稱

要接手用戶的輸入,你需要相應的表單元素,如文本字段.而輸入類型是由類型屬性(type)定義的,大多數(shù)經(jīng)常被用到的輸入類型有: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>

運行效果如下:

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

復選框

<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)進行數(shù)據(jù)處理.當完成html和css課程后,你可以試著學習php課程.

三 html顏色

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

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

四 html框架

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

<iframe>標簽規(guī)定一個內(nèi)聯(lián)框架

一個內(nèi)聯(lián)框架被用來在當前html文檔中嵌入另一個文檔

標記一個內(nèi)聯(lián)框架:

<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>

個表單的form標簽是必不可少的，所有的表單元素都應該被他包含。一個頁面可能有多個表單，就需要對每個表單的區(qū)域進行分組，防止表單信息混雜。

目標

1. 表單的完整結(jié)構(gòu)？
2. 表單內(nèi)如何進行元素分組？

表單

可以在一個網(wǎng)頁中收集用戶的數(shù)據(jù)，比如填寫用戶注冊數(shù)據(jù)、留言板、評論等內(nèi)容。

Form標簽

一個表單的form標簽是必不可少的，所有的表單元素都應該被他包含。

<form >
	<input type="text" />			
</form>

一個網(wǎng)頁可能會有多個表單，就需要聲明每個表單的區(qū)域，防止表單信息混雜。

以下就是兩個表單，他們之間的表單元素就會跟隨自己的表單。

分組

有時候，表單內(nèi)的元素過多，就需要將他們進行分類。

fieldset標簽可以將表單內(nèi)的相關元素分組。

legend標簽是為 fieldset元素定義標題。

<fieldset >
	<legend>學生信息</legend>
	姓名：<input type="text" /><br>
	班級：<input type="text" /><br>			
</fieldset>

總結(jié)

lt;form> 標簽用于為用戶輸入創(chuàng)建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

表單用于向服務器傳輸數(shù)據(jù)。

下面小編為大家介紹幾個常用的表單標簽。

<datalist>標簽

這個標簽規(guī)定了 <input> 元素可能的選項列表。

一般會被用來在為<input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，里邊的選項是預先定義好的，將作為用戶的輸入數(shù)據(jù)。

我們來演示一個案例，大家就知道怎么用了：

上面這個小代碼，我們看得出，input標簽的list屬性值和datalist標簽的id是一樣的，沒錯，它們就是這樣來相互關聯(lián)起來的。當它們結(jié)合起來之后，不僅可以像select標簽一樣可以通過下拉來選擇已有的選項，還可以根據(jù)用戶輸入的字符，對選項進行匹配篩選。

效果圖如下：

有了datalist標簽，我們實現(xiàn)這種效果起來十分簡單，不需要任何的JavaScript代碼也能輕松實現(xiàn)。

<output>標簽：

標簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運算結(jié)果，我們都可以使用這個標簽。

我們來舉個例子：輸入的數(shù)字乘以2后得到的結(jié)果，我們用output輸出顯示。

我們用oninput屬性監(jiān)聽著表單的變化，并把得到的結(jié)果賦值到output標簽的value。我們來看看效果圖：

其中，output標簽是可以離開form表單標簽的，但是，如果你這樣做的話，必須給output標簽添加form屬性，其屬性值是與其相關聯(lián)form表單的id。

我們來將output移到form表單的外面試試：

<form id="demo" oninput="b.value = parseInt(a.value)*2">
 <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代碼有幾處不同之處，form標簽多了一個id，值為“demo”，output標簽被移到了form標簽外面，不再是form標簽的子節(jié)點，變成了兄弟節(jié)點（當然你可以把它移到文檔的其他位置）。output標簽還多了一個form屬性，此時，它的值正好是form標簽的id值：“demo”。這種寫法，代碼同樣是奏效的。

<keygen>標簽

這個標簽相信大家很少用到，但是也是為了學習，我們來了解一下就好。

這個標簽規(guī)定用于表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發(fā)送到服務器，這種機制是專為使用基于Web的證書管理系統(tǒng)。

我在MDN（Mozilla Developer Network）的網(wǎng)站上看到了關于它的一些介紹：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大瀏覽器廠商還在討論是否要保留它，在討論結(jié)束之前，你最好還是別用它。

而另一段話則是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：雖然有些瀏覽器還支持它，但是這個特性已經(jīng)被移除出web標準了，以后別使用它了。