html的知識點快速記憶(二)
知識點30:表格、表單、列表標籤目的
表格table:用來顯示、展示表格資料,特別是在後臺引用的時候,顯得非常重要,
表格建立:table>tr>td,table定義一個表格標籤,tr定義表格中的行,td定義表格中的單元格,必須完整,比較規則。
列表:用來佈局的
表單:用來收集使用者資訊的
知識點31:表格屬性---在開始標籤裡去寫,預設屬性值是畫素
border:定義表格邊框寬度
width:定義表格的寬
height:定義表格的高
align:定義表格在網頁中的水平對齊方式 left 、center、right
cellspacing:定義單元格與單元格之間的距離,設定為0,單元格之間就是單實線,
cellpadding: 定義單元格內容與單元格的距離。
HTML中所有的屬性不存在單位!所以不寫。
知識點32:表頭單元格標籤---<th></th>
th :表頭單元格一般引用於表格的第一行或第一列,並且顯示會加粗和居中。
知識點33:表格標題標籤---<caption></caption>
caption :定義表格標題,通常會居中顯示, 且居於表格之上,
注意寫在緊跟table標籤後面,只存在表格中有意義,其他位置無效。
知識點34:合併單元格---rowspan、colspan,不支援既跨行又跨列合併
rowspan: 跨行(垂直一排)合併,colspan :跨列(水平一排)合併。
合併順序 :先上後下,先左後右;
合併步驟 :①確定合併方式(跨行還是跨列);②確定目標單元格(遵循合併順序原則),確定合併數量;③刪除多餘的單元格(刪除單元格的數量=合併數量-1(合併自身要減去))。
表格提供了HTML中定義表格式資料的方法。
知識點35:表格結構劃分---題頭、正文、腳註三部分,都用在表格中
<thead></thead>:用於定義表頭的頭部,注意<thead>內部必須擁有<tr>標籤,
<tbody></tbody>:用於定義表頭的主體,
<tfoot></tfoot>:用於定義表頭的腳註。
知識點36:列表標籤---有序列表、無序列表、自定義列表
列表是用來佈局的,組合自由度更高;容器裡面裝著結構,樣式一致的文字或圖表的一種形式,叫列表,
無序列表各個列表之間是沒有順序的,ul裡面只能巢狀li,中間放其他標籤是不被允許的,li 相當於一個容器。
語法:ul>li
知識點37:有序列表---有排列順序的列表
語法:ol>li
知識點38:自定義列表---常用於對術語或名詞進行描述和解釋
語法:dl>dt+dd
dd圍繞dt來解釋說明,dt(自定義標題)、dd(自定義解釋)是並列關係。
知識點39:表單控制元件---form、input、textarea、select、lable
表單的目的是為了收集使用者資訊,
在HTML中,一個完整的表單通常由表單控制元件(表單元素)、提示資訊和表單域3個部分組成,
<input type="" name="" value="預設屬性值" /> 為單標籤
type型別:text 單行文字輸入框
passward 密碼輸入框
radio 單選框 通過設定相同name值來生效
checkbox 複選框 通過設定相同name值來生效
button 普通按鈕 需要寫value值
submit 提交按鈕
reset 重置按鈕
image 影象按鈕 語法:<input type="image" src="地址路徑" />
file 檔案域 語法:<input type="file" />
email 郵箱框 語法:<input type="email">
date 日期按鈕 語法:<input type="date">
phone 電話框
知識點40:表單屬性
type:表單型別
checked:表示預設選中狀態,checke="checked"
name:屬性作用就為後臺區別哪個表單,因為表單太多了,
單選按鈕如何實現單選效果,需要通過設定相同的name屬性進行分組
value:預設的屬性值文字
size:表示input在頁面中顯示寬度,正整數
maxlength:表示輸入字元長度正整數
required:表示輸入不能為空
placeholder: 表示提示輸入文字/內容
知識點41:lable標籤--為input元素定義標註(標籤)
語法1:<lable> <input type="" /> </lable> 直接包含
語法2:<lable for="nc"> 暱稱:</lable> <input type="" id="nc"/> 通過for和id來控制
作用:用於繫結一個表單元素,提升使用者體驗。
知識點42:textarea文字域控制元件---雙標籤
可以建立多行文字,cols="每行中的字元數",rows="文字的行數"
文字域中內容會原樣顯示在頁面上,注意字元
知識點43:select下拉列表---使用者選擇
語法:<select> <option> </option> </select>
select裡至少包含一對option
selected="selected"表示預設選中,用在相應的option裡。
知識點44:form表單域標籤---將使用者資訊通過表單域傳遞給伺服器
語法:<form action="" > </form>
action: url地址,用於指定接收並處理表單資料的伺服器程式的URL地址
method:get/post (post安全性較高,不顯示內容) 設定表單資料的提交方式
name: 用來識別區分哪個表單。
元素屬性使用雙引號語法。
完!