總結(jié)：列表蝇恶、div崎弃、表單
學習任務
1.列表
- 有序列表
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
- 無序列表
<ul class="">
<li class="product-list">無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
- 自定義列表
<dl>
<dt>列表頭</dt>
<dd>列表內(nèi)容</dd>
<dt>列表頭</dt>
<dd>列表內(nèi)容</dd>
</dl>
簡單示例
無序列表應用場景
自定義列表應用場景
2.div
- 用于頁面結(jié)構(gòu)劃分渤闷，頁面分區(qū)
- 示例一個典型的網(wǎng)頁分為頭部疾瓮、內(nèi)容、尾部飒箭；內(nèi)容可分為側(cè)邊欄和主體內(nèi)容狼电，如：
<body>
<div id="header"></div>
<div id="content">
<div class="siderbar"></div>
<div class="main"></div>
</div>
<div id="footer"></div>
</body>
- div樣式
<style type="text/css">
div {
width: 100px;
height: 100px;
border: 1px solid red;
padding: 10px;
margin: 10px;
text-align: center;
background-color: blue;
color: white;
border-radius: 4px;
}
</style>
3.塊級元素、行內(nèi)元素
- 塊級元素占用空間是一整行弦蹂，行內(nèi)元素占用空間是他自身的內(nèi)容寬度肩碟。行內(nèi)元素可以并排顯示，塊級元素不能
- 行內(nèi)元素設(shè)置width凸椿、height無效（即不改變顯示效果）削祈，設(shè)置垂直的margin、padding無效（即有顯示效果但不占據(jù)空間脑漫，需應用ling-height改變垂直空間）
- 塊級元素包括：div髓抑、p、h优幸、table吨拍、tr、ul网杆、li羹饰、dl、dt碳却、form
- 行內(nèi)元素包括：a队秩、span、img追城、input刹碾、button、em座柱、textarea
4.表單
- 表單的目的是把數(shù)據(jù)提交給后臺
- type="text" 單行文本框
type：選定表單類型
name：提交給后臺迷帜，告知后臺數(shù)據(jù)類型（提交的是什么）
value：表單框內(nèi)的默認輸入的內(nèi)容（可不寫）
placeholder：刪除鍵刪掉value默認值后物舒，表單框內(nèi)重新顯示的內(nèi)容
maxlength：表單框內(nèi)最多輸入的字符數(shù)量
- type=''radio'' 單選按鈕
name：提交給后臺，告知后臺數(shù)據(jù)類型（提交的是什么）
value：提交給后臺的具體值（內(nèi)容）
name相同為單選戏锹，name可以復選（不能取消）冠胯；name分組
- type="checkbox" 多選按鈕
name分組
check：默認選中
value：（不寫value時默認為on，默認選中）value對應分組中锦针，提交的值
-
type="textarea" 文本域
用于輸入多行文本 -
type="hidden" 隱藏域
用戶看不到荠察。用于暫存數(shù)據(jù)，或安全性校驗
5.iframe嵌入頁面
- 在當前頁面嵌入其他頁面
