收藏
批改狀態(tài)：合格
老師批語：作業(yè)完全符合要求,肯定花了不少心思吧, 做來程序員, 就應(yīng)該有這樣的精神, 已經(jīng)推薦了
一、html標(biāo)簽、元素與屬性
html標(biāo)簽一般是成對(duì)出現(xiàn)，有開頭和結(jié)尾，比如 <h1></h1>、<p></p>等叫做雙標(biāo)簽，還有比如<hr>、<br>等單標(biāo)簽。
html元素可以描述網(wǎng)頁的構(gòu)成，比如標(biāo)識(shí)標(biāo)題的<h1></h1>，標(biāo)識(shí)圖片的<img />， 標(biāo)識(shí)段落的<p></p>。
hmtl元素還有自己的屬性，比如<img />標(biāo)簽家加上src屬性<img src="" />，用來表明圖片的地址，比如給<a>標(biāo)簽加上
src屬性<a href=""></a>可以表明要跳轉(zhuǎn)的地址。
二、列表
列表有無序列表<ul>、有序列表<ol>、定義列表<dl>
有序列表定義方式
<ul> <li>無序列表</li> <li>無序列表</li> <li>無序列表</li> </ul>
無序列表定義方式
<ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>
定義列表
<dl> <dt>標(biāo)題</dt> <dd>內(nèi)容</dd> </dl>
三、列表與表格
列表是對(duì)信息的逐條展示，表格是對(duì)每條信息進(jìn)行歸類整理逐條展示。表格是在列表基礎(chǔ)上進(jìn)行逐條信息的提取歸類整理劃分。
當(dāng)展示某類的信息的單一屬性比如只展示所有文章的標(biāo)題這一屬性，就可以用列表，是對(duì)單一屬性展示不需要區(qū)分。
而當(dāng)要展示出某類信息的所有屬性比如所有文章的標(biāo)題、描述、寫作時(shí)間等，這時(shí)用表格，因?yàn)樾枰诿織l信息中對(duì)屬性區(qū)分。
四、編程實(shí)現(xiàn)工作計(jì)劃，分別用ul、ol、dl實(shí)現(xiàn)
ul實(shí)現(xiàn)
<ul> <li>第一天用編寫ul列表</li> <li>第二天用編寫table表格</li> <li>第三天用編寫form表單</li> </ul>
ol實(shí)現(xiàn)
<ol> <li>第一天用編寫ul列表</li> <li>第二天用編寫table表格</li> <li>第三天用編寫form表單</li> </ol>
dl實(shí)現(xiàn)
<dl> <dt>第一天</dt> <dd>編寫ul列表</dd> <dt>第二天</dt> <dd>編寫table表格</dd> <dt>第三天</dt> <dd>編寫from表單</dd> </dl>
五、商品清單表格
<table border="1" width="500" cellspacing="0" cellpadding="5"> <caption> <h3>購物清單</h3> </caption> <!-- 頭部 --> <thead> <th>編號(hào)</th> <th>名稱</th> <th>價(jià)格</th> <th>數(shù)量</th> <th>金額</th> <th>分類</th> </thead> <!-- 表體 --> <tr> <td>1</td> <td>Html5精通</td> <td>100</td> <td>1</td> <td>100</td> <td rowspan="4">大前端</td> </tr> <tr> <td>2</td> <td>Css3精通</td> <td>100</td> <td>1</td> <td>100</td> </tr> <tr> <td>3</td> <td>JavaScript精通</td> <td>100</td> <td>2</td> <td>200</td> </tr> <!-- 頁腳 --> <tr> <td colspan="3" align="center">總計(jì)：</td> <td>4</td> <td>400</td> </tr> </table>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
六、 注冊(cè)表單
<form action="" method="POST"> <p> <label for="username">賬號(hào)：</label> <input type="text" id="username" name="username" placeholder="請(qǐng)輸入賬號(hào)" /> </p> <p> <label for="password">密碼：</label> <input type="password" id="password" name="password" placeholder="請(qǐng)輸入密碼" /> </p> <p> <label for="email">郵箱：</label> <input type="email" id="email" name="email" placeholder="example@qq.com" /> </p> <p> <label for="">性別：</label> <input type="radio" id="male" name="sex" /><label for="male">男</label> <input type="radio" id="female" name="sex" /><label for="female">女</label> <input type="radio" id="secrecy" name="sex" checked /><label for="secrecy">保密</label> </p> <p> <label for="">愛好：</label> <input type="checkbox" id="run" name="fonds[]" /><label for="run">跑步</label> <input type="checkbox" id="work" name="fonds[]" /><label for="work">寫代碼</label> <input type="checkbox" id="music" name="fonds[]" /><label for="music">聽音樂</label> </p> <p> <label for="">課程：</label> <select name="" id=""> <option value="">請(qǐng)選擇</option> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> <optgroup label="前端"> <option value="">html</option> <option value="">css</option> <option value="">javascript</option> </optgroup> </select> </p> <p> <input type="submit" name="submit" value="提交" /> <input type="reset" name="reset" value="重置" /> <input type="button" name="button" value="按鈕" /> </p> <p> <button type="">按鈕</button> </p> </form>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
七、總結(jié)
1、<a>標(biāo)簽常用來表示鏈接跳轉(zhuǎn)，<h>標(biāo)簽用來表示文章標(biāo)題，<img>標(biāo)簽用來表示圖片。
2、列表中的<ul>無序列表比較常用，主要用來展示信息，比如新聞列表。
3、table表格經(jīng)常會(huì)用到，比如購物清單、公司員工清單等。
4、form表單經(jīng)常用到，在網(wǎng)站的登錄、注冊(cè)等。
5、form表單中很多的控件像<input type="text" />輸入框、單選框<input type="radio" />、多選框<input type="checkbox" />、下拉框<select>、提交按鈕<input type="submit" />、重置按鈕<input type="reset" />、按鈕<button>，都是經(jīng)常用到的。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)