2-HTML中的表格及表單控制元件
阿新 • • 發佈:2019-01-29
自己總結:
讓圖片和外部文字 出現間隙 使用hspace[水平]和vspace[垂直]屬性
img(標籤中使用)-->usermap="#myMap" 屬性-->設定熱點 可以使用DW中-->(視窗)屬性-->進行熱點在圖片中的定位(DW會自動生成程式碼)-->area 便籤中的 href屬性設定點選後的跳轉(下面有介紹)
其他常用的html標籤
第一部分
1,超連結
從一個web資源到另外一個web資源的連線
絕對路徑:
每個網頁都有一個唯一的地址,稱為URI 統一資源定位符,也稱為該網頁的絕對路徑。
http://ip:port/目錄/檔名
相對路徑:
相對於當前文件所在的路徑
../imgs/a.jpg
./imgs/a.jpg
imgs/a.jpg
本地連線
file:///d:/html/index.html
超連結中不允許寫本地連線
伺服器路徑
http://localhost:8888/test/index.html
1)a 超連結
連線狀態:
未訪問
已選擇
已訪問
<a href="">內容顯示</a>
屬性:
href 定義連線的目標URI
絕對路徑:http://www.baidu.com
相對路徑:b.html
郵件地址:mailto: [email protected]
錨點 :#mao
空連線 :javascript:void(0);
target 定義連線的目標視窗
_blank
_parent
_self
_top
自定義目標名
title 定義連線的提示資訊
type 連線到任何型別的檔案以供下載
<a href="../docs/myWord.doc" type="application/msword">報名表</a>
錨點:
錨點可以讓使用者在文件中設定標記,這些標記通常放在文件的特定主題處或頂部,然後建立到這些錨點的連線,指向網頁中的特點位置。
例如:
<h2 id="section1">1,什麼是全球資訊網</h2>
<p>全球資訊網,是基於Internet的資訊服務系統,官方定義為"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",簡而言之,WWW是一個以Internet為基礎的計算機網路,它允許使用者在一臺計算機上通過Internet訪問另一臺計算機上的信...</p>
<a href="#section1">檢視第一部分內容</a>
2)link 文件關係連線
只能出現在head標籤中,定義了當前文件和另一個資源之間的聯絡。
通常用於連結到外部樣式表
<link rel="stylesheet" href="style.css" type="text/css">
屬性:
href: 定義關係連結地址
rel: 定義當前文件與所連線文件之間的關係。
type: 文件型別
3)base 基準連結地址
設定頁面中所有文件相對路徑相對的基準URI。如果設定了基準連結地址,當前頁面中的所有相對路徑都基於該路徑
<base href="http://localhost:8888/sg">
4)圖片
1,圖片型別
適合在網站上進行快速檢視的圖片格式
GIF (graphics interchange format,圖形交換格式)
可以將背景設定為透明的,圖片最多使用256中顏色,最適合顯示色調不連續或具有大面積單一顏色的圖片,如導航條,按鈕,圖示等。由於GIF圖片中儲存的顏色資訊較少,因此佔用空間極小,使用起來更方便。
JPEG(joint photographic experts group,聯合影象專家組)
最適合攝影或連續色調影象的彩色照片,jpeg檔案可以包含數百萬中顏色,保證圖片不失真。JPEG圖片無法擁有透明的背景
PNG(portable network graphics,可移植網路圖形)
PNG可以包含256種以上的顏色,並可以具有透明的背景。PNG檔案可保留所有原始層,向量,灰度,顏色和效果資訊,並且在任何時候所有元素都是可以編輯的。
2,鏈入圖片文字
<img src="" alt="">
屬性:
src : 圖片的源地址
title : 對圖片的文字說明,當用戶把滑鼠放在圖片上稍作停留,alt屬性的值就會以浮動的形式顯示出來。
width : 圖片的寬度
height : 圖片的高度
alt : 當圖片檔案找不到的時候顯示的文字資訊
border :圖片的邊框
align :圖片和文字的對齊
當align值為left時,圖片靠在最左方,周圍的文字顯示在右側上方
當align值為right時,圖片靠在最右方,周圍的文字顯示在左側上方
當align值為top時,圖片靠在最上方,周圍的文字顯示在上方
當align值為bottom時,圖片靠在最上方,周圍的文字顯示在下方
hspace :圖片的水平間距
vspace :圖片的垂直間距
為圖片新增連結
<a href=""><img src="" alt=""></a>
熱點 area
<img src="" alt="" usemap="#myMap">
<map name="myMap">
<area shape="" coords="" href="beijing.html" alt="北京">
<area shape="" coords="" href="shanghai.html" alt="上海">
</map>
可以在一副圖片的某幾個部位建立連結
<area shape="" coords="" href="" alt="">
屬性:
shape:default預設為整個區域,rect矩形,circle圓形,poly多邊形
coords:
rect: left-x ,top-y ,right-x ,bootom-y
circle: center-x,center-y,radius
poly: x1,y1,x2,y2...xn,yn
使用DW建立熱點:
2,表格
1)table
定義表格
屬性: caption
thead
tbody
tfoot
border: 設定表格邊框線條寬度
width: 設定表格寬度
align: 表格在頁面中對其
bgcolor:表格背景色
cellspacing: 單元格之間的間距
cellpadding: 單元格之間的襯距
frame: 表格中邊框線的顯示
void 不顯示邊框
above 上邊框
below 下邊框
hsides 上下邊框
vsides 左右邊框
lhs 左邊框
rhs 右邊框
box 四個邊框
border:四個邊框
rules: 表格中分割線的顯示
none 無分割線顯示
groups 僅在列分組間和行分組間顯示分割線
rows 僅在行間顯示分割線
cols 僅在列間顯示分割線
all 在所有行列間顯示分割線
2)tr
定義表格行
3)th/td
th 定義單元格
td 定義內容單元格
屬性:
colspan 跨列
rowspan 跨行
align 單元格水平對其
left,center,right,justify 兩端對其
valign 單元格垂直對其
top,middle,bottom,baseline基準
對齊的繼承
1)內容自身的設定具有最高優先順序
2)th,td元素的對齊設定
3)tr,thead,tfoot,tbody元素的對齊設定
4)table元素的對齊設定具有全域性性
5)預設的設定
4)caption
表格的標題
5)表格的分組顯示
thead 表格頭
tfoot 表格尾
tbody 表格主體
3,框架文件
一個框架文件由四部分組成,文件宣告,html元素,head元素,frameset元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
1)frameset 框架集
rows
用來定義將框架水平分隔為子框架的數量和這些子框架的寬度
cols
用來定義將框架垂直分隔為子框架的數量和這些子框架的高度。
<frameset rows="10%,90%">
<frame src="">
<frameset cols="15%,85%">
<frame src="">
<frame src="">
</frameset>
</frameset>
2)frame 框架視窗
屬性
src: 設定框架的初始內容
frameborder:框架視窗邊框線 frameborder="0" border="0"
marginwidth: 在框架的邊緣和邊框的內容之間可以出現的空白(左右邊)
marginheight: 在框架的邊緣和邊框的內容之間可以出現的空白(上下邊)
srolling: 框架檢視的滾動條設定
auto 必要時提供,預設值
yes 始終提供滾動條
no 不提供滾動條
noresize: 改變框架視窗大小
name: 框架名稱,作為該框架的標識
target: 框架目標
_blank
_parent
_self
_top
框架名
3)iframe 內聯框架
iframe允許使用者在一個文字中插入一個框架,iframe元素可以使用frame元素的所有屬性,實現功能也相同。
<body>
<iframe src="" frameborder="0"></iframe>
</body>
4,表單
主要用於收集來自使用者的資訊,並將收集的資訊傳送給伺服器端處理程式處理。表單時客戶端和伺服器端傳遞資料的橋樑,是實現用於與伺服器互動的最主要方式。
1)form
表單控制元件的容器
<form action="">
</form>
屬性
action 設定處理表單資料URI的地址
method 設定資料傳送到伺服器的方式
get 將輸入的資料追加到action地址後面
post 將輸入的資料儲存到HTTP協議的報文中
name 設定表單的名稱
enctype 設定表單資料的內容型別
application/x-www-form-urlencoded 在傳送前編碼所有字元(預設)
編碼方式:
1)控制元件的名稱和值都被轉義,空白字元使用【+】替換,保留的字元一般都是用來實現特定的目的,例如(: / ? ; @ = & 等)。非數字和字母的字元使用%HH(這裡HH表示兩個十六進位制數字,代表該字元的ASCII碼)進行轉換,
2)控制元件的"名稱/值"對按照它們在文件資料流中出現的順序列出來。"名稱""值"使用"="分割,兩個"名稱/值"之間使用&隔開。
multipart/form-data 不對字元編碼。在使用包含檔案上傳控制元件的表單時,必須使用該值。
資料分成多個部分,每個部分代表一個結構良好的控制元件,作為文件資料流的一部分,每一個部分都按照它們在文件資料流中出現的順序依次傳送到伺服器端,並且,每一部分的邊界不會出現在資料中。每一部分有一個content-desposition標題頭,它的值的格式是:
Content-Disposition:form-data;name="myControl"
text/plain 空格轉換為 "+" 加號,但不對特殊字元編碼。
accept-charset 設定伺服器端可以處理的字元編碼
2)input 基本表單控制元件
<input type="text">
屬性:
type 控制元件型別
text 單行文字框
textarea 多行文字框
password 密碼框
checkbox 複選框
radio 單選按鈕
submit 提交按鈕
reset 重置按鈕
file 檔案
hidden 隱藏域
image 影象按鈕
button 普通按鈕
name
控制元件名稱,這個名稱將與控制元件的當前值形參"名稱/值"對 一同隨表單提交到伺服器(可以將提交的資料傳輸到伺服器,伺服器獲取設定的value值)
value
用於設定初始化,可選。
checked
單選框,複選框預設選中屬性
size
當前控制元件的初始寬度,這個寬度以畫素為單位。除非控制元件型別是text,password,這時寬度是整數值,表示字元的數目
maxlength
指定可以輸入的字元的最大值。適用於控制元件型別為text,password。
3)button 按鈕控制元件
<button></button>
屬性
name 控制元件名稱
value 控制元件初始值
type 控制元件型別
button 普通按鈕
submit 提交按鈕
reset 重置按鈕
圖片按鈕
<button><img src="" alt=""></button>
4)select 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
屬性
name: 控制元件名稱
size: 列表框中行的顯示數量
multiple: 是否允許多選
如果select元素不包含屬性size和屬性multiple時,表單型別顯示為選單(組合框)
如果使用了屬性size和屬性multiple中的任意一個,則表單型別顯示為列表框
selected: 預設選中
option 下拉列表選項
屬性:
value: 定義控制元件的初始值。提交表單時,初始值會被提交給伺服器。
optgroup 分組選項
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">東海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4)textarea 多行文字框
屬性
name: 控制元件名稱
rows: 定義文字框行數
cols: 定義文字框ul列數
warp: 是否自動換行。
off 不自動換行
hard自動硬回車換行,換行元素一同被傳送到伺服器中
soft自動軟回車換行,換行元素不會傳到伺服器中
5)label 為表單控制元件定義標籤
一些表單控制元件內建有標籤,當內建有標籤時,一般使用value屬性的值作為標籤,而另外一些表單控制元件沒有標籤,則直接使用文字作為標籤來說明控制元件的意義。每個label元素都要和表單控制元件關聯到一起
<table>
<tr>
<td><label for="username">使用者名稱:</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密碼:</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6)fieldset 為表單新增結構
一般與legend元素配合使用,fieldset元素可以包含其他的表單控制元件,在這些表單控制元件周圍畫一個方框,而legend元素可以顯示一個標籤說明被包含的這些表單控制元件。
7)其他控制元件特性
disabled 禁用
支援該屬性的控制元件:button,input,optgroup,option,select,textarea
1)禁止的元素不接受節點
2)禁止的控制元件的值不與表單一起被提交
readonly 只讀
支援該屬性的控制元件:input,textarea
1)可以接受焦點,但是不能被使用者修改
2)只讀元素的值可以與表單一起被提交。
******************************************************************
1、所有的屬性格式都是屬性=”屬性值”嗎?如果不是,還有哪種方式?
布林型屬性 (boolean) 結果為真假值
<input type="text" readonly value="禁止在公眾場合吸菸"/>
真的表示方法:不寫值、readonly=”readonly” readonly=”true”
1、<hr width=”800”>中,800的單位是什麼?
px 畫素(預設)
2、<hr width=”80%”>和<hr width=”800”> 80%和800實現效果有什麼區別?
百分比:佔外層元素的百分比
固定值:不隨著瀏覽器大小的變化而改變
3、<p>今 天天 氣很 好</p>
以上語句實現效果是什麼?為什麼?
4、用p標籤實現如下圖所示的效果:
空格
7、實現在頁面上顯示 <b> 標籤和版權符號©,如下圖所示。
<b> ©
8、實現如下圖所示的效果:
&lt;
9、什麼是HTML字元實體?(特殊字元),他的作用是什麼?
語法:&字母;
為了區別html中的標籤
10、有序列表和無序列表的標籤分別是什麼?
11、按規範講,一個頁面可以有多少個<h1>?從搜尋引擎的角度說說為什麼?
其它的標題標籤呢?
*****************************************************************
HTML字元實體
布林型(boolean)屬性:
屬性值為真假,寫上就代表真,不寫就代表假;
1、有序列表和無序列表的標籤分別是什麼?
<ol> <ul>
ol:ordered lists
ul:unordered lists
l:lists
2、按規範講,一個頁面可以有多少個<h1>?從搜尋引擎的角度說說為什麼?
其它的標題標籤呢?
按規範講,一個頁面只能有一個<h1>
搜尋引擎會把它當做關鍵字-->寫多個按作弊處理-->封殺域名
剩下的標題標籤可以寫多個
3、<i></i> <u></u> <b></b>
斜體標籤 下劃線標籤 加粗標籤
<strong> <em> 強調 :搜尋引擎會重點處理
4、超連結標籤是什麼?其中指定跳轉位置的屬性是什麼?
<a href=”URL”></a>
5、圖片的標籤是什麼?其中指定圖片位置的屬性是什麼?
<img src=”URL”/>
6、<br>標籤和<p>標籤格式上有什麼區別?
<p>本身會換行,並且會加一個空行
7、圖片標籤是單標籤,存放圖片;p標籤是雙標籤,存放文字等
8、字型標籤<font></font>
讓圖片和外部文字 出現間隙 使用hspace[水平]和vspace[垂直]屬性
img(標籤中使用)-->usermap="#myMap" 屬性-->設定熱點 可以使用DW中-->(視窗)屬性-->進行熱點在圖片中的定位(DW會自動生成程式碼)-->area 便籤中的 href屬性設定點選後的跳轉(下面有介紹)
其他常用的html標籤
第一部分
1,超連結
從一個web資源到另外一個web資源的連線
絕對路徑:
每個網頁都有一個唯一的地址,稱為URI 統一資源定位符,也稱為該網頁的絕對路徑。
http://ip:port/目錄/檔名
相對路徑:
相對於當前文件所在的路徑
../imgs/a.jpg
./imgs/a.jpg
imgs/a.jpg
本地連線
file:///d:/html/index.html
超連結中不允許寫本地連線
伺服器路徑
http://localhost:8888/test/index.html
1)a 超連結
連線狀態:
未訪問
已選擇
已訪問
<a href="">內容顯示</a>
屬性:
href 定義連線的目標URI
絕對路徑:http://www.baidu.com
相對路徑:b.html
郵件地址:mailto:
錨點 :#mao
空連線 :javascript:void(0);
target 定義連線的目標視窗
_blank
_parent
_self
_top
自定義目標名
title 定義連線的提示資訊
type 連線到任何型別的檔案以供下載
<a href="../docs/myWord.doc" type="application/msword">報名表</a>
錨點:
錨點可以讓使用者在文件中設定標記,這些標記通常放在文件的特定主題處或頂部,然後建立到這些錨點的連線,指向網頁中的特點位置。
例如:
<h2 id="section1">1,什麼是全球資訊網</h2>
<p>全球資訊網,是基於Internet的資訊服務系統,官方定義為"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",簡而言之,WWW是一個以Internet為基礎的計算機網路,它允許使用者在一臺計算機上通過Internet訪問另一臺計算機上的信...</p>
<a href="#section1">檢視第一部分內容</a>
2)link 文件關係連線
只能出現在head標籤中,定義了當前文件和另一個資源之間的聯絡。
通常用於連結到外部樣式表
<link rel="stylesheet" href="style.css" type="text/css">
屬性:
href: 定義關係連結地址
rel: 定義當前文件與所連線文件之間的關係。
type: 文件型別
3)base 基準連結地址
設定頁面中所有文件相對路徑相對的基準URI。如果設定了基準連結地址,當前頁面中的所有相對路徑都基於該路徑
<base href="http://localhost:8888/sg">
4)圖片
1,圖片型別
適合在網站上進行快速檢視的圖片格式
GIF (graphics interchange format,圖形交換格式)
可以將背景設定為透明的,圖片最多使用256中顏色,最適合顯示色調不連續或具有大面積單一顏色的圖片,如導航條,按鈕,圖示等。由於GIF圖片中儲存的顏色資訊較少,因此佔用空間極小,使用起來更方便。
JPEG(joint photographic experts group,聯合影象專家組)
最適合攝影或連續色調影象的彩色照片,jpeg檔案可以包含數百萬中顏色,保證圖片不失真。JPEG圖片無法擁有透明的背景
PNG(portable network graphics,可移植網路圖形)
PNG可以包含256種以上的顏色,並可以具有透明的背景。PNG檔案可保留所有原始層,向量,灰度,顏色和效果資訊,並且在任何時候所有元素都是可以編輯的。
2,鏈入圖片文字
<img src="" alt="">
屬性:
src : 圖片的源地址
title : 對圖片的文字說明,當用戶把滑鼠放在圖片上稍作停留,alt屬性的值就會以浮動的形式顯示出來。
width : 圖片的寬度
height : 圖片的高度
alt : 當圖片檔案找不到的時候顯示的文字資訊
border :圖片的邊框
align :圖片和文字的對齊
當align值為left時,圖片靠在最左方,周圍的文字顯示在右側上方
當align值為right時,圖片靠在最右方,周圍的文字顯示在左側上方
當align值為top時,圖片靠在最上方,周圍的文字顯示在上方
當align值為bottom時,圖片靠在最上方,周圍的文字顯示在下方
hspace :圖片的水平間距
vspace :圖片的垂直間距
為圖片新增連結
<a href=""><img src="" alt=""></a>
熱點 area
<img src="" alt="" usemap="#myMap">
<map name="myMap">
<area shape="" coords="" href="beijing.html" alt="北京">
<area shape="" coords="" href="shanghai.html" alt="上海">
</map>
可以在一副圖片的某幾個部位建立連結
<area shape="" coords="" href="" alt="">
屬性:
shape:default預設為整個區域,rect矩形,circle圓形,poly多邊形
coords:
rect: left-x ,top-y ,right-x ,bootom-y
circle: center-x,center-y,radius
poly: x1,y1,x2,y2...xn,yn
使用DW建立熱點:
2,表格
1)table
定義表格
屬性: caption
thead
tbody
tfoot
border: 設定表格邊框線條寬度
width: 設定表格寬度
align: 表格在頁面中對其
bgcolor:表格背景色
cellspacing: 單元格之間的間距
cellpadding: 單元格之間的襯距
frame: 表格中邊框線的顯示
void 不顯示邊框
above 上邊框
below 下邊框
hsides 上下邊框
vsides 左右邊框
lhs 左邊框
rhs 右邊框
box 四個邊框
border:四個邊框
rules: 表格中分割線的顯示
none 無分割線顯示
groups 僅在列分組間和行分組間顯示分割線
rows 僅在行間顯示分割線
cols 僅在列間顯示分割線
all 在所有行列間顯示分割線
2)tr
定義表格行
3)th/td
th 定義單元格
td 定義內容單元格
屬性:
colspan 跨列
rowspan 跨行
align 單元格水平對其
left,center,right,justify 兩端對其
valign 單元格垂直對其
top,middle,bottom,baseline基準
對齊的繼承
1)內容自身的設定具有最高優先順序
2)th,td元素的對齊設定
3)tr,thead,tfoot,tbody元素的對齊設定
4)table元素的對齊設定具有全域性性
5)預設的設定
4)caption
表格的標題
5)表格的分組顯示
thead 表格頭
tfoot 表格尾
tbody 表格主體
3,框架文件
一個框架文件由四部分組成,文件宣告,html元素,head元素,frameset元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
1)frameset 框架集
rows
用來定義將框架水平分隔為子框架的數量和這些子框架的寬度
cols
用來定義將框架垂直分隔為子框架的數量和這些子框架的高度。
<frameset rows="10%,90%">
<frame src="">
<frameset cols="15%,85%">
<frame src="">
<frame src="">
</frameset>
</frameset>
2)frame 框架視窗
屬性
src: 設定框架的初始內容
frameborder:框架視窗邊框線 frameborder="0" border="0"
marginwidth: 在框架的邊緣和邊框的內容之間可以出現的空白(左右邊)
marginheight: 在框架的邊緣和邊框的內容之間可以出現的空白(上下邊)
srolling: 框架檢視的滾動條設定
auto 必要時提供,預設值
yes 始終提供滾動條
no 不提供滾動條
noresize: 改變框架視窗大小
name: 框架名稱,作為該框架的標識
target: 框架目標
_blank
_parent
_self
_top
框架名
3)iframe 內聯框架
iframe允許使用者在一個文字中插入一個框架,iframe元素可以使用frame元素的所有屬性,實現功能也相同。
<body>
<iframe src="" frameborder="0"></iframe>
</body>
4,表單
主要用於收集來自使用者的資訊,並將收集的資訊傳送給伺服器端處理程式處理。表單時客戶端和伺服器端傳遞資料的橋樑,是實現用於與伺服器互動的最主要方式。
1)form
表單控制元件的容器
<form action="">
</form>
屬性
action 設定處理表單資料URI的地址
method 設定資料傳送到伺服器的方式
get 將輸入的資料追加到action地址後面
post 將輸入的資料儲存到HTTP協議的報文中
name 設定表單的名稱
enctype 設定表單資料的內容型別
application/x-www-form-urlencoded 在傳送前編碼所有字元(預設)
編碼方式:
1)控制元件的名稱和值都被轉義,空白字元使用【+】替換,保留的字元一般都是用來實現特定的目的,例如(: / ? ; @ = & 等)。非數字和字母的字元使用%HH(這裡HH表示兩個十六進位制數字,代表該字元的ASCII碼)進行轉換,
2)控制元件的"名稱/值"對按照它們在文件資料流中出現的順序列出來。"名稱""值"使用"="分割,兩個"名稱/值"之間使用&隔開。
multipart/form-data 不對字元編碼。在使用包含檔案上傳控制元件的表單時,必須使用該值。
資料分成多個部分,每個部分代表一個結構良好的控制元件,作為文件資料流的一部分,每一個部分都按照它們在文件資料流中出現的順序依次傳送到伺服器端,並且,每一部分的邊界不會出現在資料中。每一部分有一個content-desposition標題頭,它的值的格式是:
Content-Disposition:form-data;name="myControl"
text/plain 空格轉換為 "+" 加號,但不對特殊字元編碼。
accept-charset 設定伺服器端可以處理的字元編碼
2)input 基本表單控制元件
<input type="text">
屬性:
type 控制元件型別
text 單行文字框
textarea 多行文字框
password 密碼框
checkbox 複選框
radio 單選按鈕
submit 提交按鈕
reset 重置按鈕
file 檔案
hidden 隱藏域
image 影象按鈕
button 普通按鈕
name
控制元件名稱,這個名稱將與控制元件的當前值形參"名稱/值"對 一同隨表單提交到伺服器(可以將提交的資料傳輸到伺服器,伺服器獲取設定的value值)
value
用於設定初始化,可選。
checked
單選框,複選框預設選中屬性
size
當前控制元件的初始寬度,這個寬度以畫素為單位。除非控制元件型別是text,password,這時寬度是整數值,表示字元的數目
maxlength
指定可以輸入的字元的最大值。適用於控制元件型別為text,password。
3)button 按鈕控制元件
<button></button>
屬性
name 控制元件名稱
value 控制元件初始值
type 控制元件型別
button 普通按鈕
submit 提交按鈕
reset 重置按鈕
圖片按鈕
<button><img src="" alt=""></button>
4)select 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
屬性
name: 控制元件名稱
size: 列表框中行的顯示數量
multiple: 是否允許多選
如果select元素不包含屬性size和屬性multiple時,表單型別顯示為選單(組合框)
如果使用了屬性size和屬性multiple中的任意一個,則表單型別顯示為列表框
selected: 預設選中
option 下拉列表選項
屬性:
value: 定義控制元件的初始值。提交表單時,初始值會被提交給伺服器。
optgroup 分組選項
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">東海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4)textarea 多行文字框
屬性
name: 控制元件名稱
rows: 定義文字框行數
cols: 定義文字框ul列數
warp: 是否自動換行。
off 不自動換行
hard自動硬回車換行,換行元素一同被傳送到伺服器中
soft自動軟回車換行,換行元素不會傳到伺服器中
5)label 為表單控制元件定義標籤
一些表單控制元件內建有標籤,當內建有標籤時,一般使用value屬性的值作為標籤,而另外一些表單控制元件沒有標籤,則直接使用文字作為標籤來說明控制元件的意義。每個label元素都要和表單控制元件關聯到一起
<table>
<tr>
<td><label for="username">使用者名稱:</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密碼:</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6)fieldset 為表單新增結構
一般與legend元素配合使用,fieldset元素可以包含其他的表單控制元件,在這些表單控制元件周圍畫一個方框,而legend元素可以顯示一個標籤說明被包含的這些表單控制元件。
7)其他控制元件特性
disabled 禁用
支援該屬性的控制元件:button,input,optgroup,option,select,textarea
1)禁止的元素不接受節點
2)禁止的控制元件的值不與表單一起被提交
readonly 只讀
支援該屬性的控制元件:input,textarea
1)可以接受焦點,但是不能被使用者修改
2)只讀元素的值可以與表單一起被提交。
******************************************************************
1、所有的屬性格式都是屬性=”屬性值”嗎?如果不是,還有哪種方式?
布林型屬性 (boolean) 結果為真假值
<input type="text" readonly value="禁止在公眾場合吸菸"/>
真的表示方法:不寫值、readonly=”readonly” readonly=”true”
1、<hr width=”800”>中,800的單位是什麼?
px 畫素(預設)
2、<hr width=”80%”>和<hr width=”800”> 80%和800實現效果有什麼區別?
百分比:佔外層元素的百分比
固定值:不隨著瀏覽器大小的變化而改變
3、<p>今 天天 氣很 好</p>
以上語句實現效果是什麼?為什麼?
4、用p標籤實現如下圖所示的效果:
空格
7、實現在頁面上顯示 <b> 標籤和版權符號©,如下圖所示。
<b> ©
8、實現如下圖所示的效果:
&lt;
9、什麼是HTML字元實體?(特殊字元),他的作用是什麼?
語法:&字母;
為了區別html中的標籤
10、有序列表和無序列表的標籤分別是什麼?
11、按規範講,一個頁面可以有多少個<h1>?從搜尋引擎的角度說說為什麼?
其它的標題標籤呢?
*****************************************************************
HTML字元實體
布林型(boolean)屬性:
屬性值為真假,寫上就代表真,不寫就代表假;
1、有序列表和無序列表的標籤分別是什麼?
<ol> <ul>
ol:ordered lists
ul:unordered lists
l:lists
2、按規範講,一個頁面可以有多少個<h1>?從搜尋引擎的角度說說為什麼?
其它的標題標籤呢?
按規範講,一個頁面只能有一個<h1>
搜尋引擎會把它當做關鍵字-->寫多個按作弊處理-->封殺域名
剩下的標題標籤可以寫多個
3、<i></i> <u></u> <b></b>
斜體標籤 下劃線標籤 加粗標籤
<strong> <em> 強調 :搜尋引擎會重點處理
4、超連結標籤是什麼?其中指定跳轉位置的屬性是什麼?
<a href=”URL”></a>
5、圖片的標籤是什麼?其中指定圖片位置的屬性是什麼?
<img src=”URL”/>
6、<br>標籤和<p>標籤格式上有什麼區別?
<p>本身會換行,並且會加一個空行
7、圖片標籤是單標籤,存放圖片;p標籤是雙標籤,存放文字等
8、字型標籤<font></font>