主要內容
-
串列
-
表格
-
表單
-
語意化標簽
-
字符物體
串列
應用場景：新聞串列、商品串列、導航選單...
無序串列(重點)
標簽
-
ul 無序串列整體 雙標簽 獨占一行 子級 只能 放li
-
li 表示一個串列項 雙標簽 獨占一行 內部可以放任意內容
-
<!-- ul>li 快速得到 嵌套結構的兩個標簽 --> <!-- ul表示無序串列整體，li表示一個串列項 --> <ul> <li>電腦</li> <li> 手機 <ul> <li>華為手機</li> <li>小米手機</li> <li>蘋果手機</li> </ul> </li> <li>投影儀</li> </ul>
有序串列
標簽
-
ol 有序串列整體 雙標簽 獨占一行 子級 只能 放li
-
li 表示一個串列項 雙標簽 獨占一行 內部可以放任意內容 li外部必須被ul或ol包裹
<ol> <li>800分</li> <li>1000分</li> <li>900分</li> </ol>
自定義串列
標簽
-
dl 自定義串列整體 雙標簽 獨占一行 子級 只能 放dt及dd
-
dt 自定義串列中的 定義標題 后面通常跟多個dd 獨占一行
-
dd 用于描述dt 獨占一行
<dl> <dt>幫助中心</dt> <dd>賬戶管理</dd> <dd>購物指南</dd> <dd>訂單操作</dd> </dl> <dl> <dt>服務支持</dt> <dd>售后政策</dd> <dd>自助服務</dd> <dd>相關下載</dd> </dl>
表格
應用場景：用表格方式展示資料時，如成績表、課程表...
核心標簽
-
table 表示表格整體 獨占一行 內部只能放 tr td caption 等相關標簽
-
tr 表示 表格中的一行 必須包裹在table中
-
td 表示行中的一個單元格 必須被包裹在tr中，td中可放任意內容
<table border="10" align="" width="400" height="100" cellspacing="0" cellpadding="20"> <tr> <td width="200" align="center">姓 名</td> <td>年齡</td> <td>性別</td> </tr> <tr> <td>張三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>男</td> </tr> </table>
表格相關屬性(了解，提前熟悉單詞，后面會用到)
-
border 設定表格邊框 屬性值 為 正整數 表示邊框寬度
-
align 用于設定表格的水平對齊方式 屬性值為 left center right
-
width 用于設定表格的寬度 屬性值 為 正整數
-
height 用于設定表格高度 屬性值 為 正整數
-
cellspacing 用于設定相鄰單元格之間的間距 屬性值 為 正整數
-
cellpadding 用于設定單元格邊緣與內容之間的間距 屬性值 為 正整數
輔助標簽(了解)
-
caption 用于定義表格標題 需作為table的子級 內容默認會水平居中
-
th 表示表頭單元格 內容默認 居中加粗 實際應用較多
-
thead 表示表格頭部
-
tbody 表示表格主體
-
tfoot表示表格底部 通常用于顯示 匯總資料
合并單元格
操作步驟：
-
根據左上原則(若為列合并則以最左邊單元格為準，若為行合并則以最上面單元格為準) 確定目標單元格
-
在目標單元格中書寫 xxxspan="合并的個數" 列合并時為 colspan 行合并時為 rowspan
-
洗掉多余單元格
注意：不能跨結構(thead tbody tfoot)合并單元格
<table border="1" width="400" height="400" > <tr> <!--跨列合并3個單元格--> <td colspan="3"></td> <!-- <td></td> <td></td> --> <td></td> </tr> <tr> <!--跨行合并兩個單元格，同時跨列合并兩個單元格--> <td colspan="2" rowspan="2"></td> <!-- <td></td> --> <td rowspan="3"></td> <td></td> </tr> <tr> <!-- <td></td> <td></td> --> <!-- <td></td> --> <td></td> </tr> <tr> <td></td> <td></td> <!-- <td></td> --> <td></td> </tr> </table>
表單
應用場景:注冊、登錄、搜索框
標簽
-
form 表示 表單域 用于 包裹 各種表單元素 會獨占一行 通過action屬性設定資料提交的目標檔案路徑
-
input 表示 輸入控制元件 當type屬性不同時會有不同的形態 不一定要被form包裹
-
type = "text" 單行文本框
-
type = "password" 密碼框
-
type = "radio" 單選框
-
type = "checkbox" 復選框
-
type= "file" 檔案域
-
type = "submit" 提交按鈕
-
type = "reset" 重置按鈕
-
type = "button" 普通按鈕
-
-
button 表示按鈕
-
type = "button" 普通按鈕
-
type = "submit" 提交按鈕
-
type = "reset" 重置按鈕
-
-
select 表示下拉串列 option 表示下拉串列中的一項 必須被包裹在 select中
-
textarea 表示 文本域 可以輸入多行文字 注意：內部的空格及換行會被完整決議
-
label 用于包裹 表單元素提示文字或圖片 可通過for屬性結合表單元素的id 與表單元素關聯起來，提升用戶體驗，也可以同時將文字/圖片及表單元素都包裹起來(非標準，不推薦)
表單元素其他屬性
屬性名 作用 注意 name 表示表單元素是什么資訊 多個單選框的name屬性值必須一致，不然沒有單選效果；實際應用中必須有name才能成功提交資料，name值通常由程式員設定 value 表示表單元素資訊的值 value值通常由用戶決定 checked 決定單選框及復選框是否被選中 placeholder 用于設定表單元素的提示資訊 又被稱為 占位符 multiple 用于設定檔案域多檔案選擇 selected 可設定默認下拉串列項 用在option上 for 可用于關聯label及表單元素 用在label上
-
-
用于布局的無語意標簽
標簽名 作用 特點 div 作為 通用容器 可存放 任意內容 獨占一行 span 通常用于存放文字 不會獨占一行 H5新增的語意化標簽(IE9及以上瀏覽器支持，常用于移動端)
標簽名 作用 header 網頁頭部 nav 網頁導航 footer 網頁底部 aside 網頁側邊欄 article 網頁文章 section 網頁區塊 以上標簽其實都相當于div，只是增加了具體的語意而已
字符物體
某些特殊符號(如 < > 空格 )因為有特殊含義，不能直接顯示在網頁里面，要顯示的話需要用字符物體
字符物體 作用 英文空格（重點） << >>  中文空格 -
21:34:00
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/455425.html
標籤：Html/Css
上一篇：當我使用應用程式腳本發送郵件時，多個附件的方向有何不同？
下一篇：CSS第一天