任務7——HTMl表單腻贰、列表等使用

1.有序列表、無序列表扒秸、自定義列表如何使用播演？寫個簡單的例子冀瓦。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）写烤？如何嵌套翼闽？

列表，顧名思義洲炊，是HTML中表示一組項目的列表感局，包括：有序列表、無序列表暂衡、定義列表等询微。
eg：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>task-7</title>
</head>

<body>
    <div class="order-list">
        前端基礎知識：
    </div>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>Javascript</li>
    </ol>
    <div class="unorder-list">
        我的愛好：
    </div>
    <ul>
        <li>
            編程：
            <ul>
                <li>前端</li>
                <li>后端</li>
                <li>運維</li>
            </ul>
        </li>
        <li>繪畫</li>
        <li>籃球</li>
    </ul>
    <div class="definity-list">
        我愛吃的食物：
    </div>
    <dl class="mydl">
        <dt>魚</dt>
        <dd>各種魚類，除了刺多的鯉魚</dd>
        <dt>蝦</dt>
        <dd>基圍蝦狂巢，龍蝦之類的海蝦</dd>
        <dt>蟹</dt>
        <dd>當然是陽澄湖大閘蟹好吃啦</dd>
    </dl>
</body>

</html>

效果圖：

列表效果圖

簡單來說語義區(qū)別：

有序列表定義一組有順序要求的列表項目撑毛；
無序列表定義一組對順序沒要求的一系列列表項目；
定義列表定義一系列項目隧膘，同時定義項目的描述代态。
正是定義列表有了項目描述，所以和無序列表區(qū)別就在此疹吃。

使用情況：

有序列表在列表項目對順序有要求的時候使用蹦疑。
無序列表在列表項目對順序沒要求時使用，可以是任何一系列項目萨驶。
定義列表在對項目有描述要求時使用歉摧。
列表嵌套：
在需要嵌套列表的列表項目里，即<li>中腔呜，再寫一個列表即可叁温。
eg：

    <ul>
        <li>
            編程：
            <ul>
                <li>前端</li>
                <li>后端</li>
                <li>運維</li>
            </ul>
        </li>
        <li>繪畫</li>
        <li>籃球</li>
    </ul>

效果圖：

嵌套效果圖

2.如何去除列表前面的點或者數(shù)字？

在樣式里核畴，寫上list-style: none或者list-style-type: none即可膝但。
eg：

    <style type="text/css" media="screen">
      ol,ul{
        list-style-type: none;
      }
    </style>

效果圖：

有序列表和無序列表默認樣式全無

3.class 和 id 有什么區(qū)別？什么時候用 class 什么時候用 id谤草？

選擇器名稱	描述
class	類選擇器跟束，在html中可以多次使用
id	ID選擇器，一個id只能在html中使用一次
區(qū)別	使用區(qū)別：每個id僅能使用一次丑孩，class可以多次使用冀宴；語義區(qū)別：id唯一標識元素，多用于重要元素温学，權(quán)重更大略贮，而class主要是應用常見樣式用的比較多
使用	id多使用于主要塊級元素，有些獨一無二元素也可用id; class用于要重復使用樣式的除id其他塊級或行內(nèi)元素

4.塊級元素、行內(nèi)元素是什么逃延？有什么區(qū)別览妖？分別對應哪些常用標簽？

名稱	描述
塊級元素	html中真友，以新行來開始和結(jié)束黄痪，即獨占一行
行內(nèi)元素	html中，不占用一行盔然，不以新行開始
區(qū)別	1. 塊級元素占用一行，行內(nèi)元素不占用一行是嗜； 2. 塊級元素margin,padding,width,height都可以設置愈案，而行內(nèi)元素無法設置width,height，margin只能水平改變鹅搪，padding都可以改變站绪，但上下方向只對背景起作用，不占用空間

塊級元素：

塊級元素.png

行內(nèi)元素：

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, label, select, input, textarea

eg：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>task-7</title>
    <style type="text/css" media="screen">
        div,h1,p,ul,ol,table,dl,blockquote,form {
            border: 1px solid red;
        }

        .div2,q,a,span,input,img {
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <h1>h是塊級元素</h1>
    <p>
        P是塊級元素
    </p>
    <ul>
        <li>無序列表</li>
    </ul>
    <ol>
        <li>有序列表</li>
    </ol>
    <table>
        <tr>
            <th> 表頭1</th>
            <th>表頭2</th>
        </tr>
        <tr>
            <td>cell1 </td>
            <td>cell2</td>
        </tr>
    </table>
    <a href="#">行內(nèi)元素</a>
    <br>
    <div class="div1">
        這里是div.
    </div>
    <dl class="dl1">
        <dt>項目</dt>
        <dd>描述</dd>
    </dl>
    <form class="" action="index.html" method="post">
        性別：
        <input type="radio" name="sex" value="male" />男
        <input type="radio" name="sex" value="male" />女
    </form>
    <blockquote>
        引用丽柿。
    </blockquote><a href="#">行內(nèi)元素</a>
    <div class="div2">
        <a href="#">行內(nèi)元素</a>
        <span>行內(nèi)元素</span>
        ![女神惠利](http://upload-images.jianshu.io/upload_images/2404178-76f456081933ddf6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <q>引用</q>
        <input type="text" name="name" value="2" />
    </div>
</body>

</html>

效果圖：

效果圖

發(fā)現(xiàn)的問題：

1. 有兩個標簽有問題：

input
img
當我給行內(nèi)元素設置width,height時恢准，兩者發(fā)生了改變；也就是說甫题，input和img不是純行內(nèi)元素馁筐，經(jīng)網(wǎng)上資料查詢，發(fā)現(xiàn)這兩者是inline-block元素坠非，有著block和inline共同的特點敏沉，如下所示：

            q,a,span,input,img {
            border: 1px solid green;
            width: 70px;
            height: 70px;

inline-block效果圖

同理，又進行了相應的margin和padding的設置炎码，發(fā)現(xiàn)兩者有著block的特性盟迟。

2. table表格占用問題：
效果圖中顯示table表格邊框未擴及整行，故我在其后方填寫了一個行內(nèi)元素a標簽潦闲，而行內(nèi)元素從下行開始攒菠，所以可以確定table元素是塊級元素。

3. 行內(nèi)元素padding設置校驗：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a</title>
    <style type="text/css" media="screen">
      a,input {
        border: 1px solid red;
        padding: 40px;
      }
    </style>
  </head>
  <body>
<h1>2222</h1>
    <a >a</a>
    <a >b</a><br>
    <br>
    <form class="" action="index.html" method="post">
      選擇：<input type="radio" name="name" value="1" />男
    </form>
  </body>
</html>

效果圖：

padding效果圖

可以發(fā)現(xiàn)：只對背景起作用歉闰，而不占用空間辖众。

5. display: block、display: inline新娜、display: inline-block分別有什么作用?

三者都是CSS樣式赵辕，塊級元素和行內(nèi)元素嵌套關(guān)系沒有限制。display 屬性規(guī)定元素應該生成的框的類型概龄。

屬性	描述
display: block	使元素顯示為塊級元素
display: inline	使元素顯示為行內(nèi)元素
display: inline-block	使元素顯示為行內(nèi)塊級元素

eg：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a</title>
    <style type="text/css" media="screen">
      .a1 {
        border: 1px solid red;
        display:block;
      }
      .a2 {
        border: 1px solid red;
        display:inline-block;
        margin: 20px;
        padding: 20px;
      }
      form {
        display:inline;
      }
    </style>
  </head>
  <body>
<h1>2222</h1>
    <a class="a1" >a</a>
    <a class="a2" >b</a>
    <form class="" action="index.html" method="post">
      選擇：<input type="radio" name="name" value="1" />男
    </form>
  </body>
</html>

效果圖：

display效果圖

6. 下面代碼是做什么的还惠？抄寫一遍下面的代碼，注意class和id的使用及命名方式

<!DOCTYPE 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="logo" href="#"><img src=""></a>
      <ul class="nav">
        <li><a href="#">導航1</a></li>
        <li><a href="#">導航2</a></li>
        <li><a href="#">導航3</a></li>
      </ul>
    </div>
 </div>
  <div id="content">
    <div class="wrap">
      <div class="aside">側(cè)邊欄</div>
      <div class="main">中心區(qū)塊</div>
    </div>
  </div>
<div id="footer">
  <div class="wrap">這里是 footer</div>
</div>
</body>
</html>

這段html用div將頁面分成了若干塊區(qū)私杜，為了區(qū)分主次蚕键，在主要塊區(qū)（頭部救欧，內(nèi)容區(qū)，腳部）用id唯一標示锣光，使人一目了然笆怠。同時，用class=wrap對內(nèi)部結(jié)構(gòu)進行統(tǒng)一的樣式設置誊爹，margin外邊距根據(jù)瀏覽器窗口自動調(diào)整蹬刷，上下外邊距為0，內(nèi)部區(qū)塊寬度統(tǒng)一為900px频丘。

7. 如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節(jié)

語義化指對代碼結(jié)構(gòu)要嚴謹規(guī)范办成，標簽命名要有有意義；
eg：
內(nèi)容——content
導航——nav
側(cè)邊欄——sidebar
這些命名就會使人很容易讀懂代碼搂漠。
命名盡量統(tǒng)一風格迂卢，命名中包含2個以上單詞用“-”鏈接，并且大小寫要統(tǒng)一風格桐汤。
eg：
order-list不要寫成：orderlist而克、order_list123、OrderList等怔毛。

8. form表單有什么作用员萍？有哪些常用的input 標簽，分別有什么作用馆截？

<form> 標簽用于為用戶輸入創(chuàng)建 HTML 表單充活，并向服務器傳輸數(shù)據(jù)。

屬性	值	描述
action	URL	規(guī)定當提交表單時向何處發(fā)送表單數(shù)據(jù)
method	get post	規(guī)定用于發(fā)送 form-data 的 HTTP 方法
name	form_name	規(guī)定表單的名稱
target	_blank _parent _top _self framename	規(guī)定在何處打開 action URL

常見input標簽：

文本域：

    <form name="textbox" action="http://baidu.com" method="get" >
      名:<input type="text" name="first-name" placeholder="名稱" maxlength="20"><br>
      姓:<input type="text" name="last-name" placeholder="姓" maxlength="20">
    </form>

文本域

密碼域：

    <form name="textbox" action="http://baidu.com" method="get" >
      賬號:<input type="text" name="count" placeholder="名稱" maxlength="20"><br>
      密碼:<input type="password" name="password" placeholder="密碼" maxlength="20">
    </form>

type: password

單選按鈕：

    <form name="textbox" action="http://baidu.com" method="get" >
      男：<input type="radio" name="sex" value="male" checked/ >
      女：<input type="radio" name="sex" value="female">
    </form>

name一樣蜡娶，方便分組混卵，單選。

type: radio

復選框：

    <form name="textbox" action="http://baidu.com" method="get" >
      愛好：<input type="checkbox" name="hobby" value="coding" checked/ >編程
      女：<input type="checkbox" name="hobby" value="draw">繪畫
      女：<input type="checkbox" name="hobby" value="baskerball">籃球
    </form>

name一樣窖张，方便分組幕随，語義化。

type: checkbox

多行文本域：

    <textarea name="comment" rows="10" cols="30" maxlength="500">
this  is   textarea.
    </textarea>

不用在form元素里宿接，比較特殊赘淮。

textarea

提交按鈕：

    <form name="dase" action="index.html" method="post">
      <input type="submit" name="submit-button" value="提交">
    </form>

type="submit"

無論提交按鈕放在哪里，都可以把form所有數(shù)據(jù)打包發(fā)送給后端服務器睦霎。

隱藏域：

  <form name="dase" action="index.html" method="post">
      <input type="hidden" name="hidden-part" value="123456">
    </form>

type="hidden"

隱藏域梢卸，用戶無法看到效果，但是表單存在副女，能夠向后臺發(fā)送hidden的數(shù)據(jù)蛤高，可用于安全校驗厨埋，防止偽造表單數(shù)據(jù)屹徘。

下拉列表：

      <select class="select1" name="pets">
        <option value:"cat">貓</option>
        <option value="dog" selected="selected">狗</option>
        <option value="fish">金魚</option>
      </select>
      <!--selected="selected"可以換成selected，一樣效果-->

select下拉列表

上傳文件按鈕：

<form name="dase" action="index.html" method="post">
        <input type="file" name="file">
    </form>

type="file"

重置按鈕：

    <form name="dase" action="index.html" method="post">
        <input type="reset" name="reset-button">
    </form>

type="reset"

創(chuàng)建自定義按鈕：

    <form name="dase" action="index.html" method="post">
        <input type="button" name="mybut" value="amazing" onclick="msg()">
    </form>

type="button"

圖片按鈕：

    <form name="dase" action="index.html" method="post">
        <input type="image" src="http://v1.freep.cn/3tb_1607121237568yod512293.jpg" alt="我的圖片" />
    </form>

type="image"

可見type="image"的標簽對圖片大小格式有一定要求翩肌，在提交的時候据悔，瀏覽器將以像素為單位伊脓，將鼠標相對于圖像邊界的偏移量發(fā)送到服務器导犹，其中包括從圖像左邊界開始的水平偏移量尔艇，以及從圖像上邊界開始的垂直偏移量。

總結(jié)：大體上就是這些表單功能喜庞，需要注意的就是name和value的使用情況诀浪。

參考HTML <input> 標簽的 type 屬性

9. post 和 get 方式的區(qū)別？

get和post是兩種不同的http方法赋荆，向后端發(fā)送form-data笋妥。
** 區(qū)別**：

使用：由于URL長度限制，get用于簡短數(shù)據(jù)的獲取窄潭，而當數(shù)據(jù)傳輸量較大時，用post方法酵颁。
安全性：get方法的URL和后臺數(shù)據(jù)會顯示所有信息嫉你，而其中涉及隱私安全部分也可見；post所有操作用戶都是不可見的躏惋。
編碼方式不同：Get限制Form表單的數(shù)據(jù)集的值必須為ASCII字符幽污；而Post支持整個ISO10646字符集。
get不會更改數(shù)據(jù)簿姨，只是獲取數(shù)據(jù)距误；而經(jīng)post處理的數(shù)據(jù)到后端會發(fā)生改變。

參考：
GET和POST區(qū)別詳解
 GET vs POST

10. 在input里扁位，name 有什么作用准潭？

name定義 input 元素的名稱。作為可與服務器交互數(shù)據(jù)的HTML元素的服務器端的標示域仇，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)刑然。由于后臺傳輸數(shù)據(jù)值時要借用name，所以name是必需屬性暇务。

11. <button>提交</button>泼掠、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么區(qū)別垦细？

<button>提交</button>是一個html標簽择镇，有眾多屬性，其中type屬性可以設置屬性值button或submit括改，設置不同屬性值其功能也不相同腻豌；可以包含豐富的內(nèi)容，而input type="button"則不含有內(nèi)容。
`<a class="btn" href="#">提交</a>是一個鏈接饲梭，點擊會顯示本頁乘盖，不提交數(shù)據(jù)，只是指定鏈接位置憔涉。
<input type="submit" value="提交">是一個form表單按鈕订框，用于提交表單數(shù)據(jù)，而<button>提交</button>則提交其內(nèi)容兜叨。

參考：HTML <button> 標簽

12. radio 如何分組?

只要radio中的name屬性設置相同穿扳，即可分組。

13. placeholder 屬性有什么作用?

用于在表單文本框中顯示預設提示信息国旷；該提示信息在文本框沒聚焦且文本內(nèi)容為空時顯示矛物，而輸入文本內(nèi)容后不顯示。

14. type=hidden隱藏域有什么作用? 舉例說明

<body>
    <form name="data" action="index.html" method="get">
        賬號：<input type="text" name="count">
        <br>密碼:
        <input type="password" name="passwords">
        <input type="hidden" name="name" value="123">
    </form>
</body>

hidden

hidden后臺提交

如圖跪但，用戶無法看見hidden的信息履羞，當我點擊“提交”時，瀏覽器會想后臺傳送hidden的數(shù)據(jù)屡久，這一原理用在暫存數(shù)據(jù)和安全校驗忆首。只有當服務器接收到的hidden和預存的信息一致時，才能成功提交表單數(shù)據(jù)被环，與生俱來的安全性糙及。

本教程版權(quán)歸饑人谷_阿群和饑人谷所有，轉(zhuǎn)載須說明來源

最后編輯于：2017.12.03 08:15:02

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末筛欢，一起剝皮案震驚了整個濱河市浸锨，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌版姑，老刑警劉巖柱搜，帶你破解...
沈念sama閱讀 221,820評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異漠酿，居然都是意外死亡冯凹，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,648評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門炒嘲，熙熙樓的掌柜王于貴愁眉苦臉地迎上來宇姚，“玉大人，你說我怎么就攤上這事夫凸』肜停” “怎么了？”我有些...
開封第一講書人閱讀 168,324評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵夭拌，是天一觀的道長魔熏。經(jīng)常有香客問我衷咽，道長，這世上最難降的妖魔是什么蒜绽？我笑而不...
開封第一講書人閱讀 59,714評論 1贊 297
?港島之戀（遺憾婚禮）
正文為了忘掉前任镶骗，我火速辦了婚禮，結(jié)果婚禮上躲雅，老公的妹妹穿的比我還像新娘鼎姊。我一直安慰自己，他們只是感情好相赁，可當我...
茶點故事閱讀 68,724評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布相寇。她就那樣靜靜地躺著，像睡著了一般钮科。火紅的嫁衣襯著肌膚如雪唤衫。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,328評論 1贊 310
城市分裂傳說
那天绵脯，我揣著相機與錄音佳励，去河邊找鬼。笑死蛆挫，一個胖子當著我的面吹牛植兰，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播璃吧，決...
沈念sama閱讀 40,897評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼废境！你這毒婦竟也來了畜挨？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,804評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤噩凹，失蹤者是張志新（化名）和其女友劉穎巴元，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體驮宴，經(jīng)...
沈念sama閱讀 46,345評論 1贊 318
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡逮刨，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,431評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了堵泽。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片修己。...
茶點故事閱讀 40,561評論 1贊 352
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖迎罗，靈堂內(nèi)的尸體忽然破棺而出睬愤，到底是詐尸還是另有隱情，我是刑警寧澤纹安，帶...
沈念sama閱讀 36,238評論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布尤辱，位于F島的核電站砂豌，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏光督。R本人自食惡果不足惜阳距，卻給世界環(huán)境...
茶點故事閱讀 41,928評論 3贊 334
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望结借。院中可真熱鬧筐摘，春花似錦、人聲如沸映跟。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,417評論 0贊 24
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽努隙。三九已至球恤，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間荸镊，已是汗流浹背咽斧。一陣腳步聲響...
開封第一講書人閱讀 33,528評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留躬存，地道東北人张惹。一個月前我還...
沈念sama閱讀 48,983評論 3贊 376
代替公主和親
正文我出身青樓，卻偏偏與公主長得像岭洲，于是被迫代替她去往敵國和親宛逗。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 45,573評論 2贊 359

任務7——HTMl表單瞎访、列表等使用

任務7——HTMl表單腻贰、列表等使用

1.有序列表、無序列表扒秸、自定義列表如何使用播演？寫個簡單的例子冀瓦。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）写烤？如何嵌套翼闽？

2.如何去除列表前面的點或者數(shù)字？

3.class 和 id 有什么區(qū)別？什么時候用 class 什么時候用 id谤草？

4.塊級元素、行內(nèi)元素是什么逃延？有什么區(qū)別览妖？分別對應哪些常用標簽？

發(fā)現(xiàn)的問題：

5. display: block、display: inline新娜、display: inline-block分別有什么作用?

6. 下面代碼是做什么的还惠？抄寫一遍下面的代碼，注意class和id的使用及命名方式

7. 如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節(jié)

8. form表單有什么作用员萍？有哪些常用的input 標簽，分別有什么作用馆截？

9. post 和 get 方式的區(qū)別？

10. 在input里扁位，name 有什么作用准潭？

11. <button>提交</button>泼掠、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么區(qū)別垦细？

12. radio 如何分組?

13. placeholder 屬性有什么作用?

14. type=hidden隱藏域有什么作用? 舉例說明

推薦閱讀更多精彩內(nèi)容

任務7——HTMl表單腻贰、列表等使用

1.有序列表、無序列表扒秸、自定義列表如何使用播演？寫個簡單的例子冀瓦。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）写烤？ 如何嵌套翼闽？

2.如何去除列表前面的點或者數(shù)字？

3.class 和 id 有什么區(qū)別？什么時候用 class 什么時候用 id谤草？

4.塊級元素、行內(nèi)元素是什么逃延？有什么區(qū)別览妖？分別對應哪些常用標簽？

發(fā)現(xiàn)的問題：

5. display: block、display: inline新娜、display: inline-block分別有什么作用?

6. 下面代碼是做什么的还惠？抄寫一遍下面的代碼，注意class和id的使用及命名方式

7. 如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節(jié)

8. form表單有什么作用员萍？有哪些常用的input 標簽，分別有什么作用馆截？

9. post 和 get 方式的區(qū)別？

10. 在input里扁位，name 有什么作用准潭？

11. <button>提交</button>泼掠、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么區(qū)別垦细？

12. radio 如何 分組?

13. placeholder 屬性有什么作用?

14. type=hidden隱藏域有什么作用? 舉例說明

推薦閱讀更多精彩內(nèi)容

1.有序列表、無序列表扒秸、自定義列表如何使用播演？寫個簡單的例子冀瓦。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）写烤？如何嵌套翼闽？

12. radio 如何分組?