任務(wù)7-HTML4

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

  • 列表簡單列子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task7-1</title>
</head>
<style>
    h2{
        border: 1px solid red;
        color: red;
    }
    h3{
        color: green;
    }

</style>
<body>



<h2>無序列表</h2>
<h3>默認(rèn)的無序列表</h3>
<ul>
    <li>元素</li>
    <li>元素</li>
    <li>元素</li>
</ul>
<h3>指定類型的無序列表</h3>
<h4>Disc 項目符號列表：</h4>
<ul type="disc">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>檸檬</li>
    <li>桔子</li>
</ul>

<h4>Circle 項目符號列表：</h4>
<ul type="circle">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>檸檬</li>
    <li>桔子</li>
</ul>

<h4>Square 項目符號列表：</h4>
<ul type="square">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>檸檬</li>
    <li>桔子</li>
</ul>

<h2>有序列表</h2>
<h3>默認(rèn)的有序列表</h3>
<ol>
    <li>元素</li>
    <li>元素</li>
    <li>元素</li>
</ol>
<h3>指定類型的有序列表</h3>
<h4>數(shù)字列表：</h4>
<ol start="50">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>檸檬</li>
    <li>桔子</li>
</ol>

<h4>字母列表：</h4>
<ol type="A">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>檸檬</li>
    <li>桔子</li>
</ol>

<h4>小寫字母列表：</h4>
<ol type="a">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>檸檬</li>
    <li>桔子</li>
</ol>

<h4>羅馬字母列表：</h4>
<ol type="I">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>檸檬</li>
    <li>桔子</li>
</ol>

<h4>小寫羅馬字母列表：</h4>
<ol type="i">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>檸檬</li>
    <li>桔子</li>
</ol>

<h2>自定義列表</h2>
<dl>
    <dt>列表頭</dt>
    <dd>列表內(nèi)容</dd>
    <dd>列表內(nèi)容</dd>
    <dd>列表內(nèi)容</dd>
    <dd>列表內(nèi)容</dd>
</dl>



</body>
</html>
  • 三者語義上的區(qū)別及適用場景
    有序列表適用于有順序排列要求的數(shù)據(jù)或項目，無序列表適用于并列不分前后的數(shù)據(jù)或項目，自定義列表適用于有層次感的列表。
  • 如何嵌套
<uL>
<li>
    <h3>無序列表</h3>
    <ul>
        <li>元素</li>
        <li>元素</li>
        <li>元素</li>
    </ul>
</li>
<li>
    <h3>無序列表</h3>
    <ul>
        <li>元素</li>
        <li>元素</li>
        <li>元素</li>
    </ul>
</li>
</ul>

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

<style type="text/css">
     li {
        list-style:none;
     }
</style>

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

class可以并列被多個html元素應(yīng)用，而id只能被應(yīng)用于唯一的html元素。常規(guī)下都是用class，只有一個元素需要唯一定義樣式時才需要id。

4、塊級元素、行內(nèi)元素是什么？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽？

塊級元素獨自占一行，除非是用樣式改變它的display屬性，或使用float影響它的文檔流排版。多個行內(nèi)元素占用同一行，占用它自身的寬度，手動設(shè)置它們的寬高是無效的。可以通過設(shè)置display屬性把它轉(zhuǎn)換為塊級顯示方式。

行內(nèi)元素可以一并排顯示，塊級元素不能。

塊級元素：div、p、h1...h6、table、tr、ul、li、dl、dt、form section nav
行內(nèi)元素：label、a、span、img、input、button、em、textarea

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

display: block 以塊級展示方式顯示元素
display: inline 以行級展示方式顯示元素
display: inline-block 想使元素能行內(nèi)排列同時又能體現(xiàn)塊級元素特性時使用此樣式。舉例來講一個a標(biāo)簽，既想對它定義高寬度，又不想讓其換行時可使用此樣式。

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

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
      .warp{
        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="#">導(dǎo)航1</a></li>
        <li><a href="#">導(dǎo)航2</a></li>
        <li><a href="#">導(dǎo)航3</a></li>
    </ul>
 </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>

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

css的語義化是指給css的選擇器取好記好理解的名字，一般用英文名字，如果需要多個英文單詞組成，單詞之家可以用中線符連接一下，如果英文單詞很長，可以適當(dāng)?shù)目s寫它，能讓別人容易理解就ok。養(yǎng)成好的語義化風(fēng)格有利于自己和其它開發(fā)人員快速理解代碼意圖，便于樣式的擴展和維護。

8、form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？

用于收集用戶提交的數(shù)據(jù)。

<input type="text">：輸入
<input type="submit" >：提交
<input type="password">: 輸入密碼
<input type="checkbox" >：多選選項
<input type="radio" >：單選選項
<input type="hidden" >：隱藏
<textarea></textarea>:多文本輸入
<select name="sex" >
    <option value="1">男</option>
    <option value="0">女</option>
</select>:下拉選擇框

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

get會以組裝url地址的方式進行數(shù)據(jù)提交，會被紀(jì)錄在瀏覽器歷史紀(jì)錄里邊，對提交的數(shù)據(jù)的長度有1k限制。而post是以body體的方式提交數(shù)據(jù)，而且沒有文本大小的限制。一般查詢數(shù)據(jù)用get，提交表單數(shù)據(jù)用post。

10、在input里，name 有什么作用？

用于提交數(shù)據(jù)的參數(shù)名字，服務(wù)器端通過這個名字獲取它對應(yīng)的用戶提交的數(shù)據(jù)。

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

<button>提交</button> 一個普通按鈕，點擊默認(rèn)沒有任何事件
<a class="btn" href="#">提交</a> 一個沒有資源地址的超級連接，點擊會跳到本頁
<input type="submit" value="提交"> 表單提交按鈕，一般放在form里邊，點擊默認(rèn)會跳到form指定的action指向的地址

12、radio 如何 分組?

根據(jù)name的名字

13、placeholder 屬性有什么作用?

在文本框里顯示提示的信息，如果光標(biāo)定位到文本框提示信息會消失，離開如果用戶沒有輸入數(shù)據(jù)還會出現(xiàn)提示信息，如果用戶已經(jīng)輸入了信息，焦點再離開文本框就不回再顯示提示信息了。

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

用于隱藏傳遞給服務(wù)器一些數(shù)據(jù)，比如防止用戶重復(fù)提交表單，可以在表單里邊增加一個hidden的token，由服務(wù)器來生產(chǎn)這個值，也由服務(wù)器端驗證這個值來放置客戶端二次提交。

** 本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源！ **

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • 1.有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    墨月千樓閱讀 296評論 0贊 0
  • 一、有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    鴻鵠飛天閱讀 731評論 0贊 0
  • 一、有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    咩咩咩1024閱讀 523評論 0贊 0
  • 課程目標(biāo) 熟悉列表的使用場景和用法 理解HTML語義化 理解行內(nèi)元素、塊級元素概念 熟悉常見input表單的使用方...
    饑人谷_江君閱讀 280評論 0贊 0
  • 有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？ 如...
    饑人谷_桶飯閱讀 275評論 0贊 0