一倒脓、有序列表、無序列表含思、自定義列表如何使用崎弃？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別含潘？在哪些情況下使用哪種（重要）饲做？ 如何嵌套？
- 有序列表遏弱、無序列表盆均、自定義列表如何使用？簡單例子如下:
- 代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)7</title>
</head>
<body>
<h3>豆瓣電影評(píng)分</h3>
<ol>
<li>肖申克的救贖</li>
<li>這個(gè)殺手不太冷</li>
<li>阿甘正傳</li>
<li>霸王別姬</li>
</ol>
<h3>動(dòng)漫人物</h3>
<ul>
<li>蒙奇·D·路飛</li>
<li>旋渦鳴人</li>
<li>坂田銀時(shí)</li>
<li>旗木卡卡西</li>
</ul>
<h3>進(jìn)擊的巨人角色</h3>
<dl>
<dt>艾倫·耶格爾</dt>
<dd>《進(jìn)擊的巨人》中主人公腾窝，擁有強(qiáng)韌的精神力量與非凡的行動(dòng)力缀踪，對(duì)墻壁外的世界擁有比任何人都要強(qiáng)烈的憧憬，從小便立志要加入調(diào)查兵團(tuán)虹脯。</dd>
<dt>三笠·阿克曼</dt>
<dd>《進(jìn)擊的巨人》中女主角,以第104期訓(xùn)練兵團(tuán)首席的身份畢業(yè)驴娃，性格沉穩(wěn)冷靜，有以一敵百的戰(zhàn)斗力循集。</dd>
<dt>利威爾·阿克曼</dt>
<dd>《進(jìn)擊的巨人》中的角色唇敞，為調(diào)查兵團(tuán)的士兵長、調(diào)查兵團(tuán)特別作戰(zhàn)班利威爾班班長咒彤，通稱“利威爾兵長”或“里維士兵長”疆柔。</dd>
</dl>
</body>
</html>
-
三種列表效果圖
三種列表效果圖
- 三者在語義上的區(qū)別是：
- 有序列表的列表項(xiàng)有先后次序之分
- 無序列表的列表項(xiàng)對(duì)順序沒有要求且大多處于并列關(guān)系
- 自定義列表則是自己定義項(xiàng)目并對(duì)項(xiàng)目進(jìn)行說明
- 列表嵌套
- 在要嵌套的列表項(xiàng)里再加入列表，代碼如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)7-1~列表的嵌套</title>
</head>
<body>
<h3>動(dòng)漫</h3>
<ul>
<li>
<h4>海賊王</h4>
<ul>
<li>蒙其·D·路飛</li>
<li>羅羅諾亞·索隆</li>
<li>娜美</li>
<li>GOD·烏索普</li>
<li>山治</li>
<li>托尼托尼·喬巴</li>
<li>妮可·羅賓</li>
<li>弗蘭奇</li>
<li>布魯克</li>
</ul>
</li>
<li>
<h4>銀魂</h4>
<ul>
<li>坂田銀時(shí)</li>
<li>志村新八</li>
<li>神樂</li>
<li>桂小太郎</li>
<li>坂本辰馬</li>
<li>高杉晉助</li>
</ul>
</li>
</ul>
</body>
</html>
-
列表嵌套效果圖
列表嵌套
二镶柱、如何去除列表前面的點(diǎn)或者數(shù)字旷档？
- 在css樣式里面加入如下代碼就可以去除列表前面的點(diǎn)或者數(shù)字
ul,ol{
list-style:none;/*或者list-style-type:none;*/
}
三、class 和 id 有什么區(qū)別歇拆？什么時(shí)候用 class 什么時(shí)候用 id鞋屈？
- class和id的區(qū)別
- class是類選擇器范咨，類選擇器在一個(gè)頁面中可以有多個(gè)相同的類名；id選擇器具有唯一性厂庇，在一個(gè)頁面中不會(huì)同時(shí)出現(xiàn)id相同的屬性值渠啊；
-
class類選擇器，需要在HTML給需要的元素設(shè)置屬性值的前面加上.號(hào),比如权旷，
.header{font-size:14px;};id選擇器則需要在id屬性值的前面加上#號(hào)替蛉，比如，#header{margin:0 auto;} - class類選擇器的權(quán)重沒有id選擇器的權(quán)重大
- class類選擇器和id選擇器的使用
- class類選擇器用于頁面中重復(fù)出現(xiàn)拄氯，反復(fù)多次利用的html元素
- id選擇器用于頁面中只出現(xiàn)一次的Html元素躲查，也用于html主體結(jié)構(gòu)的劃分
四、塊級(jí)元素译柏、行內(nèi)元素是什么熙含？有什么區(qū)別？分別對(duì)應(yīng)哪些常用標(biāo)簽艇纺？
- 塊級(jí)元素怎静、行內(nèi)元素的定義（定義來自CSS權(quán)威指南）
- 塊級(jí)元素指元素在正常流中時(shí)，會(huì)在其框之前和之后生成“換行”黔衡，所以處于正常流中的塊級(jí)元素會(huì)垂直擺放
- 行內(nèi)元素指在正常流中時(shí)蚓聘，其不會(huì)在之前或之后生成“行分隔符”，它們是塊級(jí)元素的后代
- 塊級(jí)元素和行內(nèi)元素的不同：
- 塊級(jí)元素會(huì)獨(dú)自占據(jù)一行盟劫；而行內(nèi)元素所占據(jù)的空間僅僅是其自身內(nèi)容的寬度
- 對(duì)于塊級(jí)元素夜牡，可以設(shè)置margin,padding,width,height；而對(duì)于行內(nèi)元素侣签，設(shè)置width塘装、height不起作用（行內(nèi)元素的寬高只由其本身內(nèi)容所決定），設(shè)置margin影所、padding只有水平方向有有效蹦肴，但上下方向不占用空間，上下方向只看得到背景設(shè)置
- 塊級(jí)元素猴娩、行內(nèi)元素別對(duì)應(yīng)哪些常用標(biāo)簽
- 塊級(jí)元素對(duì)應(yīng)的常用標(biāo)簽有：h1~h6阴幌、p、div卷中、ul矛双、ol、dl蟆豫、table议忽、form、blockquote十减、header栈幸、section毛雇、aside、footer侦镇、figure、article
- 行內(nèi)元素對(duì)應(yīng)的常用標(biāo)簽有：a织阅、span壳繁、em、i荔棉、em闹炉、strong、img润樱、input渣触、textaera
五、display: block壹若、display: inline嗅钻、display: inline-block分別有什么作用?
- display:block使元素成為塊級(jí)元素
- display:inline使元素成為行內(nèi)元素
- display:inline-block使元素成為行內(nèi)塊元素
- display:block使元素成為塊級(jí)元素
六、下面代碼是做什么的店展？抄寫一遍下面的代碼养篓，注意class和id的使用及命名方式
<!dcotype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.wrap{
width:900px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<a id="log" href="#"><img src=""/></a>
<ul class="nav">
<li><a href="#">導(dǎo)航1</a></li>
<li><a href="#">導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="wrap">
<div class="aside">側(cè)邊欄</di>
<div class="main">中心區(qū)塊</div>
</div>
</div>
<div id="footer">
<div class="wrap">這里是footer</div>
</div>
</body>
</html>
- 該代碼布置了一個(gè)頁面，該頁面由三大部分組成赂蕴，分別是header柳弄、content、footer概说，而這三個(gè)結(jié)構(gòu)性的區(qū)塊的元素則是用id選擇器碧注，因?yàn)槠渚哂形ㄒ恍裕辉谶@三個(gè)區(qū)塊下重復(fù)利用的元素則是使用的是類選擇器糖赔；在header中萍丐，有一個(gè)圖片鏈接，還有一個(gè)導(dǎo)航欄放典；在content中碉纺，有一個(gè)邊欄和中心區(qū)塊；footer在頁面最下邊刻撒；在.wrap中骨田，設(shè)置了寬度為固定900px的區(qū)域且是水平居中的，直到頁面寬度小于等于900px時(shí)声怔，該區(qū)域直接鋪滿整個(gè)頁面
七态贤、如何理解 HTML CSS 語義化? 在平時(shí)寫代碼的過程中要注意哪些細(xì)節(jié)？
- 語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽醋火，使頁面有良好的結(jié)構(gòu)悠汽，頁面元素有含義箱吕，代碼具有良好的可讀性，搜索引擎更容易理解文檔
- 平常寫代碼的時(shí)候要注意不要沒有語義化的標(biāo)簽柿冲，比如各種各樣的p茬高、div等等；其次命名有規(guī)則且統(tǒng)一
- 知識(shí)拓展
八假抄、form表單有什么作用怎栽？有哪些常用的input 標(biāo)簽，分別有什么作用宿饱？
- form表單的作用：用于為用戶輸入創(chuàng)建 html表單熏瞄，并向服務(wù)器傳輸數(shù)據(jù)
- form標(biāo)簽屬性介紹
| 屬性 | 說明 |
|---|---|
| action | 表示表單提交的頁面 |
| method | 表示表單的請(qǐng)求方式：有 POST 和 GET 兩種，默認(rèn) GET |
| name | 設(shè)置表單名稱谬以，以便程序調(diào)用 |
| target | 設(shè)置提交時(shí)的目標(biāo)位置：_blank强饮、_parent、_self为黎、_top |
| enctype | 表示瀏覽器對(duì)發(fā)送給服務(wù)器的數(shù)據(jù)所采用的編碼格式,分別是application/x-www-form-urlencoded邮丰、multipart/form-data、text/plain |
| autocomplete | 設(shè)置瀏覽器記住用戶輸入的數(shù)據(jù)铭乾，實(shí)現(xiàn)自動(dòng)完成表單柠座。默認(rèn)為 on 自動(dòng)完成，如果不想自動(dòng)完成則設(shè)置 off |
| novalidate | 設(shè)置是否執(zhí)行客戶端數(shù)據(jù)有效性檢查 |
常用的Input標(biāo)簽（input都要有name屬性）
文本輸入
年齡：<input name="age" type="text" placeholeder="24" maxlength="3" autofocus="autofocus"/>
- 密碼
密碼：<input name="password" type="password" placeholeder="······" maxlength="18" minlength="6" autofocus="autofocus"/>
- 單選按鈕
性別：<input name="sex" type="radio" value="male" autofocus="autofocus" checked="checked"/>男
<input name="sex" type="radio" value="female" autofocus="autofocus" checked="checked"/>女
- 復(fù)選框
愛好：<input name="hobby" type="checkbox" value="game" autofocus="autofocus" checked="checked"/>游戲
<input name="hobby" type="checkbox" value="football" autofocus="autofocus" checked="checked"/>足球
<input name="hobby" type="checkbox" value="travel" autofocus="autofocus" checked="checked"/>旅游
- 多行文本輸入
評(píng)論：<textarea name="comment" placeholeder="請(qǐng)輸入您的評(píng)論"
maxlength=1000></textarea>
- 隱藏文本輸入~用戶看不到表單效果片橡，但表單存在妈经，可以向后臺(tái)發(fā)送隱藏的value數(shù)據(jù)，用于安全校驗(yàn)捧书，防止偽造表單數(shù)據(jù)
<input name="secret" type="hidden" value="abcdefg" />
- 下拉選擇框
<select name="hobby">
<option value="game">游戲</option>
<option value="football" selected="selected">足球</option> <option value="travel">旅游</option>
</select>
九吹泡、post 和 get 方式的區(qū)別？
- 數(shù)據(jù)提交的方式不同经瓷，get提交數(shù)據(jù)的url可以看到爆哑，而post看不到；
- get用于提交少量數(shù)據(jù)舆吮，post用于提交大量數(shù)據(jù)揭朝；
- 由于瀏覽器的限制，get最多提交1k數(shù)據(jù)色冀；而post理論上無限制潭袱，受服務(wù)器限制；
- get提交的數(shù)據(jù)在瀏覽器記錄中锋恬，安全性不好
十屯换、在input里，name 有什么作用？
- name 屬性規(guī)定了 input 元素的名稱彤悔，用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)嘉抓，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。（W3shool）
十一晕窑、<button>提交</button>抑片、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么區(qū)別杨赤？
- <button>提交</button>設(shè)置一個(gè)一般性按鈕敞斋，沒有任何作用
- <a class="btn" href="#">只是一個(gè)鏈接，點(diǎn)擊</a>鏈接到本頁望拖，無法提交數(shù)據(jù)
- <input type="submit" value="提交">能夠提交表單數(shù)據(jù)
十二、radio 如何 分組?
- 把 name值設(shè)置為相同的即可分為一組
十三挫鸽、placeholder 屬性有什么作用?
- placeholder是文本框中的預(yù)留信息说敏，用于提示用戶
十四、type=hidden隱藏域有什么作用? 舉例說明
- 隱藏域在頁面中對(duì)于用戶是不可見的丢郊，在表單中插入隱藏域的目的在于收集或發(fā)送信息盔沫，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候枫匾，隱藏域的信息也被一起發(fā)送到服務(wù)器架诞，可用于暫存數(shù)據(jù)和頁面的安全校驗(yàn)
- 比如
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)7-1~列表的嵌套</title>
</head>
<body>
<h3>表單校驗(yàn)</h3>
<form action="#" method="post" name="test">
<label for="user">用戶名：</label>
<input type="text" name="user" id="user" required="required" autofocus="autofocus" placeholder="用戶名">
<br/>
<label for="password">密碼：</label>
<input type="password" name="password" id="password" required="required" placeholder="密碼（不少于6位）">
<input type="hidden" name="secret" value="jirengu">
<br/>
<button type="submit">提交</button>
</form>
</body>
當(dāng)點(diǎn)擊提交的時(shí)候，后臺(tái)如下圖
hidden的作用
在代碼里設(shè)置的type="hidden"信息,一同被發(fā)送到服務(wù)器校驗(yàn)干茉，若檢驗(yàn)滿足谴忧，則才可以提交表單！
（注：其它更多用法）
版權(quán)聲明：本教程版權(quán)歸鄧攀和饑人谷所有角虫，轉(zhuǎn)載須說明來源Ｕ次健！４炼臁均驶！
