1.表格
語法：
1.<table></table> ：表示一個表格
2.<tr></tr> ：表示表格中的一行
3.<td></td> ：表行中的一列（單元格）
<th></th> ：行 / 列 標題（加粗，水平居中）
4.<caption></caption> ：表格的標題 該元素必須添加在 <table> 之下，所有的 <tr> 之上
5.<col> ：按順序設定表格每列寬度 該元素必須添加在 <table> 之下，所有的 <tr> 之上 屬性：width
6.<colgroup> ：設定表格列分組的樣式 屬性：span（表示列數） width
屬性：
1. table
width
height
align 設定表格的對齊方式 left / center / right
border 邊框寬度 單位：px
bgcolor 背景顏色
cellspacing 單元格外邊距（單元格與單元格或單元格與表格之間的距離）
cellpadding 單元格內邊距（單元格與內容之間的距離）
2. tr
align 水平對齊
valign 垂直對齊 top / middle / bottom
bgcolor
3. td / th
align
valign
width
height
colspan 跨行
rowspan 跨列
表格的復雜分組 （允許將若干行劃分到一個組中，以便管理）
1.表頭行分組
允許將第一行的內容單獨分到表頭行分組中 <thead></thead>
2.表尾行分組
允許將最后一行的內容單獨分到表尾行分組中 <tfoot></tfoot>
3.表主體行分組
<tbody></tbody>
不規則表格創建（通過 td 的跨行和跨列來實作不規則的表格）
1.跨行 <td colspan=" ">
從指定單元格位置處開始，橫著向右，合并掉幾個單元格（包括自己），被合并掉的單元格要洗掉
2.跨列 <td rowspan=" ">
從指定單元格位置處開始，豎著向下，合并掉幾個單元格（包括自己），被合并掉的單元格要洗掉
2.串列
有序串列 <ol></ol>
串列項 <li></li>
無序串列 <ul></ul>
串列項 <li></li>
屬性
1.ol
type
1 ：按數字方式排列，默認值
a ：按小寫英文方式排列
A ：按大寫英文方式排列
i ：按小寫羅馬數字排列
I ：按大寫羅馬數字排列
start 指定標識從幾開始
2.ul
type
disc 實心圓，默認值
circle 空心圓
square 實心矩形
none 無標記
定義串列
1.作用：以一種特殊的結構來排列資料，通常用于對一類事物 / 名詞的解釋
2.語法：
<dl></dl>
<dt></dt> 宣告要解釋的事物名稱或名詞
<dd></dd> 對上述名詞或事物解釋的內容
3.常用場合 ：圖文混排
3.表單
表單元素 <form></form> (只有放在<form></form>里的表單控制元件的值，才能提交給服務器)
屬性
1.action 提交給服務器處理程式的地址（動作）
2.method 提交方式，以什么樣的方式把資料交給服務器
get
以明文的方式將資料傳遞給服務器（提交的資料會顯示在地址欄上）
安全性低
提交資料最大限制為2KB
向服務器要資料時可以使用
post
以隱式的方式將資料傳遞給服務器
安全性很高
不限制提交資料的大小
要提交資料給服務器處理時使用
enctype
作用：指定表單資料進行編碼的方式
取值：
1、application/x-www-form-urlencoded
默認值，允許將任意型別的文本提交給服務器
2、multipart/form-data
允許將檔案提交給服務器
3、text/plain
不對任何資料進行編碼和傳輸
input元素 <input> （里邊會包含若干個不同的表單控制元件）
1.屬性：
1.type 根據不同的type屬性值，可以創建不同的input元素
2.name 定義表單控制元件的名稱，主要提交給服務器使用的（如果不宣告name屬性的話，元素無法提交給服務器）
3.value 定義當前控制元件的值，主要提交給服務器使用
2.disabled 禁用控制元件，無值的屬性 <input disabled>
2.文本框與密碼框
文本框 ：<input type="text">
密碼框 ：<input type="password">
具備除以上四個屬性外，還具備以下幾個獨立屬性：
1、maxlength 限制輸入的字符數，取值為數字
2、readonly 只讀，無值屬性
Q : readonly 和 disabled 的區別
1、readonly ，是只讀的意思，是允許提交給服務器，不讓用戶改資料而已
2、disabled ， 是禁用的意思，不僅不讓用戶改資料，而且還不能提交給服務器
3、placeholder占位符，即默認顯示在文本框用于給用戶提示的文字
3.按鈕
1.提交按鈕 將表單提交給服務器
語法：<input type="submit" value="https://www.cnblogs.com/hourglas/p/顯示的文本">
2.重置按鈕 將表單恢復到初始化的狀態
語法：<input type="reset" value="https://www.cnblogs.com/hourglas/p/顯示的文本">
3.普通按鈕 通過JS自定義功能
語法： <input type="button" value="https://www.cnblogs.com/hourglas/p/顯示的文本">
4.<button>顯示的文本</button>
屬性：type : submit / reset / button
4.單選按鈕 和 復選框
單選按鈕 ：<input type="radio">
復選框 ：<input type="checkbox">
屬性：
name 設定名稱，并用于分組，一組單選按鈕或復選框的名稱必須相同
value 必須設定
checked 默認被選中，無值屬性
5.隱藏域和檔案選擇框
隱藏域 <input type="hidden" name=" " value="https://www.cnblogs.com/hourglas/p/">
想要提交給服務器，但又不想給用戶看的資料
檔案選擇框 <input type="file" name=" ">
form的method屬性值必須為post
form的enctype屬性值必須為 multipart / form-data
textarea控制元件 （多行文本域） <textarea></textarea>
屬性：
name ：定義名稱，提交給服務器使用
cols ：指定文本與的寬
rows ：指定文本域的高
readonly ：只讀
選項框
語法：
<select></select> 表示下拉串列或滾動串列
<option></option> 串列中的內容，允許出現多個
屬性：
<select>
name：控制元件名稱
size ：默認顯示選項數量，默認為1，為下拉串列，如果取值>1,則為滾動串列
multiple：設定多選，無值的屬性（僅滾動串列使用，如果加上就會默認為滾動串列）
<option>
value ：選項的值，提交給服務器用
select ：默認被選中（作用在下拉串列中）
其他標記
lable元素
語法： <label>文本</label>
屬性 ：for ：指定要關聯的表單控制元件的ID值
浮動框架 （將其他頁面匯入到當前頁面中來）
語法：<iframe></iframe>
屬性：
src ：要引入頁面的url
frameborder ：指定浮動框架的邊框，默認為1，則顯示邊框，不需要邊框則指定為0
width
height
新input元素（支持HTML5）
電子郵件型別（提交時會驗證資料是否符合Email的規范） <input type=”email”>
搜索型別（在文本框的基礎上，提供了快速清除操作） <input type=”search”>
URL型別（提交時會驗證資料是否符合web站點的URL規范 絕對路徑） <input type=”url”>
電話號碼型別（在移動端設備中，能展開 撥號鍵盤，在PC中無效） <input type=”tel”>
數字型別（只能讓用戶輸入或選擇數字） <input type=”number”>
屬性：min：最小值，max：最大值，step：微調數值（默認為1）
范圍型別（提供一個滑塊，讓用戶選擇數字） <input type=”range”>
屬性：min ：最小值，max ：最大值，value ：初始值
顏色型別（提供顏色拾取控制元件） <input type=”color”>
日期型別（提供一個日期輸入控制元件） <input type=”date”>
周型別（提供一個日期控制元件，用于選取周） <input type=”week”>
月份型別（選取月份控制元件） <input type=”month”>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/142059.html
標籤：Html/Css
上一篇：HTML影像的呼叫和超鏈接