具體示例 //代碼 console.log(JSON.stringify({ x: 5, y: 6 },null,2)); //輸出結果 { "x": 5, "y": 6 } JSON.stringify() 介紹 JSON.stringify()方法將一個JavaScript對象或值轉換為JSON ...
主要內容
-
列表
-
表格
-
表單
-
語義化標簽
-
字元實體
列表
應用場景：新聞列表、商品列表、導航菜單...
無序列表(重點)
標簽
-
ul 無序列表整體 雙標簽 獨占一行 子級 只能 放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 通常用於存放文字 不會獨占一行 標簽名 作用 header 網頁頭部 nav 網頁導航 footer 網頁底部 aside 網頁側邊欄 article 網頁文章 section 網頁區塊 以上標簽其實都相當於div，只是增加了具體的語義而已
字元實體
某些特殊符號(如 < > 空格 )因為有特殊含義，不能直接顯示在網頁裡面，要顯示的話需要用字元實體
字元實體 作用 英文空格（重點） << >>  中文空格 -
21:34:00
