任務(wù)7-html4

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

有序列表使用編號(hào)來記錄項(xiàng)目的順序，在當(dāng)列表項(xiàng)目的每個(gè)列表項(xiàng)目前面需要一個(gè)遞增值的時(shí)候使用，默認(rèn)用1.、2.、3.。
無序列表使用項(xiàng)目符號(hào)來記錄無序的項(xiàng)目，默認(rèn)用圓點(diǎn)。
自定義列表由兩個(gè)部分組成：定義條件和定義描述。<dt>描述項(xiàng)目名稱，<dd>描述項(xiàng)目名，一個(gè)項(xiàng)目可以有多個(gè)項(xiàng)目名，多個(gè)描述。
它們都按照由上到下順序執(zhí)行。
無序列表和有序列表都可以通過設(shè)置list-style-type，表現(xiàn)為對(duì)方的樣式。但這樣是不推薦的，這違反了html標(biāo)簽的語義化。語義化是標(biāo)簽被創(chuàng)造時(shí)具有的作用，像<h1>用于一級(jí)標(biāo)題，<p>用于段落，它們都有默認(rèn)的樣式，是為了某種用途存在的，可以直接應(yīng)用時(shí)，沒必要設(shè)置多余的CSS樣式，增加編碼負(fù)擔(dān)。
無序列表主要應(yīng)用于導(dǎo)航條、下拉菜單、照片顯示等不需要數(shù)字編號(hào)的，有序列表主要用于博客評(píng)論等，需要樓層的編號(hào)。自定義列表主要用于商品列表等，有名稱，有描述。
在html5中<ol>標(biāo)簽多了兩個(gè)屬性start和reseved。start屬性支持從一個(gè)數(shù)字開始計(jì)算列表數(shù)。'reseved'支持倒序。
<ul>,<ol>,<li>,<dl>,<dt>,<dd>都是塊級(jí)元素標(biāo)簽。這三個(gè)列表可以相互嵌套。嵌套列表很容易。決定在哪里嵌套后，先不要閉合這個(gè)列表標(biāo)簽，插入需要嵌套的列表之后再閉合列表元素，然后繼續(xù)原來的列表。
舉個(gè)例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表嵌套</title>
    <style>
        body {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <ul>
        <li>
        無序列表
        <ul>
        <li>無序列表1</li>
        <li>無序列表2</li>
        </ul>
        </li>
        <li>有序列表
        <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        </ol>
        </li>
        <li>無序
        </li>
        <li>
        自定義列表
        <dl>
        <dt>自定義</dt>
        <dt>列表</dt>
        <dd>列表1</dd>
        <dd>列表2</dd>
        </dl>
        </li>
    </ul>
    </body>
</html>

效果圖：


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

設(shè)置list-style-type: none;
舉個(gè)例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除標(biāo)號(hào)</title>
    <style>
        body {
            background-color: #ddd;
        }
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>無序列表1</li>
        <li>無序列表2</li>
        <li>無序列表3</li>
    </ul>
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
</body>
</html>

效果：


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

class和id的區(qū)別：
1.定義不同。class 屬性規(guī)定元素的類名（classname）。id 屬性規(guī)定 HTML 元素的唯一的 id，一般用于重要的獨(dú)一無二的標(biāo)簽。
2.同一class名在一篇HTML文檔中可以出現(xiàn)多次，id名只能出現(xiàn)一次，是唯一的。
3.class可以寫成class="intro other"，可以有多個(gè)class名，id名不能這樣寫。
4.同一個(gè)標(biāo)簽可以同時(shí)有class和id屬性，但在寫CSS樣式時(shí)，兩者權(quán)重不同。
一般在頁面布局時(shí)，id用于主區(qū)塊，class用于主區(qū)塊里的詳細(xì)內(nèi)容，對(duì)于有些重要的獨(dú)一無二的元素也可以用id。

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

“塊級(jí)元素”譯為 block level element，塊級(jí)元素在瀏覽器顯示時(shí)，通常會(huì)以新行來開始（和結(jié)束）?！靶袃?nèi)元素”譯為 inline element。行內(nèi)元素在顯示時(shí)通常不會(huì)以新行開始。
塊級(jí)元素占用一整行，行內(nèi)元素的寬高是它自身內(nèi)容的寬高。行內(nèi)元素設(shè)置左右margin、padding時(shí)有效，上下時(shí)加邊框可以看到效果，但是對(duì)其上下元素的位置沒有影響。
塊級(jí)元素一般可以包含行內(nèi)元素和其它塊級(jí)元素。而行內(nèi)元素一般只能包含數(shù)據(jù)和其它行內(nèi)元素。
塊級(jí)元素主要對(duì)應(yīng)的常用標(biāo)簽有：
<p>,<div>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<h1>~<h6>,<hr>,<form>,<table>,<tfoot>,<blockquote>,<address>,<fieldest>,<noscript>,<pre>
html5中新加的常用的有：
<article>,<figcaption>,<figure>,<output>,<aside>,<footer>,<audio>,<section>,<hgoup>,<video>
行內(nèi)元素有：
1.b, big, i, small, tt
2.abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
3.a, bdo, br, img, map, object, q, script, span, sub, sup
4.button, input, label, select, textarea

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

dispaly:block將元素設(shè)置為塊級(jí)元素。display: inline將元素設(shè)置為行內(nèi)元素。display: inline-block將元素設(shè)置為行內(nèi)塊元素?？梢栽诒匾獣r(shí)改變?cè)靥匦浴?br> 塊級(jí)元素的特點(diǎn)是：　　
1.總是在新行上開始；　　
2.高度，行高以及頂和底邊距都可控制；　　
3.寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
行內(nèi)元素的特點(diǎn)是： 　　
1.和其他元素都在一行上；　　
2.寬，高，行高及頂和底邊距不可改變?！　?br> 行內(nèi)塊元素的特點(diǎn)是：
1.和其他元素都在一行上；　　
2.寬，高，行高及頂和底邊距可以改變。

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="#">導(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è)邊欄</div>
        <div class="main">中心區(qū)塊</div>
      </div>
    </div>
    <div id="footer">
      <div class="wrap">這里是footer</div>
    </div>
</body>
</html>

這段代碼設(shè)置class名為wrap的元素寬度為900px，并且在頁面上水平居中。

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

html標(biāo)簽的語義化是用合理html標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。
在編寫html文檔時(shí)，如果選用的標(biāo)簽幾乎全是不帶語義的，那么在去樣式后網(wǎng)頁中幾乎看不到任何結(jié)構(gòu)信息，可讀性非常差；如果選用的都是語義適合的標(biāo)簽，去樣式后網(wǎng)頁依然具有非常好的可讀性；各個(gè)瀏覽器有自己的默認(rèn)樣式，默認(rèn)的樣式給予了各個(gè)標(biāo)簽不同的顯示，標(biāo)簽使用的正確與否能體現(xiàn)網(wǎng)站的可用性，這也是檢驗(yàn)一個(gè)網(wǎng)站可用性的最簡單的方法之一。
CSS語義化的命名是指用易于理解的名稱對(duì)html標(biāo)簽附加的class或id命名。語義化的命名這里就涉及到了團(tuán)隊(duì)的命名規(guī)范，只有在團(tuán)隊(duì)的規(guī)范的基礎(chǔ)之上進(jìn)行更好的語義化命名才是王道。一個(gè)語義化的CSS命名至少應(yīng)遵守如下約定：

  • 1.盡量規(guī)避拼音命名，用英文單詞去命名
  • 2.單詞之間連接用三種方式：下劃線_ 、間隔符-、駝峰命名。具體使用哪種方式請(qǐng)根據(jù)團(tuán)隊(duì)的規(guī)范，但個(gè)人建議不要同時(shí)使用2種以上的連接方法同時(shí)命名
  • 3.單詞后不要跟無意義的數(shù)字，如logo1234 (團(tuán)隊(duì)約定好的除外)
    對(duì)于過長單詞的連接命名可采取縮寫形式，但應(yīng)確保成員都能看懂。
    在平時(shí)寫代碼時(shí)，遇到諸如表格、標(biāo)題、段落、列表等，我們要盡量使用語義化標(biāo)簽，避免大段使用<div>這樣的非語義化標(biāo)簽。在給class、id屬性命名時(shí)，我們使用英文小寫的形式，單詞之間連接加間隔符-。
    一些約定好的單詞命名：
    頭：header
    內(nèi)容：content/container
    尾：footer
    導(dǎo)航：nav
    側(cè)欄：sidebar
    欄目：column
    登錄條：loginbar
    標(biāo)志：logo
    廣告：banner
    輪轉(zhuǎn)：promo
    頁面主體：main
    熱點(diǎn)：hot
    新聞：news
    下載：download
    子導(dǎo)航：subnav
    菜單：menu
    子菜單：submenu
    搜索：search
    友情鏈接：friendlink
    版權(quán)copyright

參考再談?wù)Z義化

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

<form>標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單，向服務(wù)器傳輸數(shù)據(jù)。主要有以下屬性：
name:表單提交時(shí)的名稱。
action： 表單提交到的地址。
method：提交表單的方式。有post和get兩種。默認(rèn)是get方式。
target：在何處打開action。
enctype :規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。
常用的input標(biāo)簽：
<input>標(biāo)簽按type的不同顯示出不同的樣式，有不同的作用。<input>標(biāo)簽必須有name屬性才能把輸入的數(shù)據(jù)傳到后臺(tái)。
1.<input type="text" name="xx">輸入文本，還可以加入placeholder屬性。placeholder展示提示信息。
舉例：
姓名：<input type="text" name= "fullname" placeholder="用戶名" maxlength=10 />
效果：


maxlength=10最大寬度表示輸入文本的最大寬度是10。
2.<input type="password" name="xx">輸入密碼，輸入時(shí)頁面上看不到輸入的數(shù)據(jù)。
舉例：
密碼：<input type="password" name="key">
效果：

3.<input type="radio" name="xx" value="xx">單選框，一次只能選擇一個(gè)選項(xiàng)，且再點(diǎn)沒有反應(yīng)。一個(gè)單選框后有一個(gè)選項(xiàng)，它們的name屬性相同，便于瀏覽器識(shí)別這是同一個(gè)單選框。但value屬性不同，便于傳送選中的是哪個(gè)選項(xiàng)。
舉例：

性別：<input type="radio" name="sex" value="male" checked>男   
         <input type="radio" name="sex" value="female">女<br/>
取向：<input type="radio" name="love" value="male" >男
         <input type="radio" name="love" value="female" checked>女

效果：


checked表示默認(rèn)選中這個(gè)選項(xiàng)。
4.<input type="checkbox" name="xx" value="xx">多選框，name的屬性可以寫成一樣，方便后臺(tái)把選中的選項(xiàng)排成數(shù)組。
代碼：

愛好：<input type="checkbox" name="hobby" value="dota">dota
      <input type="checkbox" name="hobby" value="旅游" checked>旅游
      <input type="checkbox" name="hobby" value="寵物" checked>寵物

效果：


5.<input type="submit" name="xxx" value="xxx">提交按鈕，提交按鈕放在form表單的任意位置，都是把表單中所有元素都提交。
舉例：

6.<textarea name="xxx" value="xxx" placeholder="xxx" >輸入大段文字
舉例：

評(píng)論：<textarea name="commit" rows="5" cols="40" maxlength="1000"></textarea>

效果：


rows是行數(shù)，rols是列數(shù)。
7.<input type="hidden" name="xxx" value="xxx">是隱藏域，用戶看不到，用于暫存數(shù)據(jù)或者安全校驗(yàn)。
8.<select>標(biāo)簽用于下拉選擇。
舉例：

  我的car：
          <select name="car">
            <option value="volvo">沃爾沃</option>
            <option value="saab" selected>薩博</option>
            <option value="audi">奧迪</option>    
          </select>

效果：


selected表示預(yù)先選定。
<select>標(biāo)簽還有multiple屬性，表示多選，size屬性表示下拉列表中可見的選項(xiàng)。
9.<input type="file" name="xxx" > 用于文件上傳。
舉例：

<input type="file"  name="file" >

效果：


點(diǎn)擊選擇文件按鈕可以選擇要上傳的文件。
10.<input type="image" src="xxx" alt="xxx">定義圖像形式的提交按鈕，必須有src屬性和alt屬性。
舉例：

<input type="image" src="eg_submit.jpg" alt="submit" >

效果：


如果 type 屬性設(shè)置為 image，當(dāng)用戶單擊圖像時(shí)，瀏覽器將以像素為單位，將鼠標(biāo)相對(duì)于圖像邊界的偏移量發(fā)送到服務(wù)器，其中包括從圖像左邊界開始的水平偏移量，以及從圖像上邊界開始的垂直偏移。
11.<input type="reset" name="xxx" value="xxx">定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)數(shù)據(jù)。
舉例：

value值不同，按鈕上顯示的值也不同。
12.<input type="button" name="xxx" value="xxx">定義可點(diǎn)擊的按鈕，但沒有任何行為。常用于在用戶點(diǎn)擊按鈕時(shí)啟動(dòng)JavaScript 程序。
舉例：

<input type="button" value="Click me" onclick="msg()">

效果：



value值不同，按鈕上顯示的值也不同。加上onclick屬性，用于調(diào)用JavaScript。

參考HTML <input> 標(biāo)簽的 type 屬性

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

1.數(shù)據(jù)提交方式不同，get用來獲取信息，查詢數(shù)據(jù)庫，不會(huì)影響數(shù)據(jù)庫的數(shù)據(jù)和資源的狀態(tài)。post則會(huì)響數(shù)據(jù)庫的數(shù)據(jù)和資源的狀態(tài)。
2.post一般用于提交少量數(shù)據(jù)，得到大量數(shù)據(jù)。post用于提交大量數(shù)據(jù)。
3.pos理論上可以提交的數(shù)據(jù)無限制，但受服務(wù)器限制，get最多提交1k數(shù)據(jù)，主要用于查詢，受到瀏覽器和服務(wù)器的限制。
4.get提交的數(shù)據(jù)顯示在URL中，會(huì)記錄在瀏覽器的歷史記錄中，安全性不高。

參考GET vs POST

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

name 屬性規(guī)定 input 元素的名稱。name 屬性用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。
只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。所以input必須設(shè)置name屬性。

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

在頁面上：


都是行內(nèi)元素。<a class="btn" href="#">提交</a>是一個(gè)鏈接，可以鏈接到任意網(wǎng)址，包括要提交到的頁面。
<button>提交</button>和<input type="submit" value="提交">放在<form>表單中，都是一個(gè)按鈕，點(diǎn)擊后，都可以向后臺(tái)提交數(shù)據(jù)。
在 button 元素內(nèi)部，可以放置更豐富的多媒體內(nèi)容，比如圖像。而<input type="submit" value="提交">是通過改變value屬性的值，改變按鈕上顯示的文字。

12.radio 如何分組?

name屬性相同的是一組。

13.placeholder 屬性有什么作用?

placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）。該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。

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

Hidden 對(duì)象代表一個(gè) HTML 表單中的某個(gè)隱藏輸入域。這種類型的輸入元素實(shí)際上是隱藏的。這個(gè)不可見的表單元素的 value 屬性保存了一個(gè)要提交給 Web 服務(wù)器的任意字符串。如果想要提交并非用戶直接輸入的數(shù)據(jù)的話，就是用這種類型的元素。在 HTML 表單中 <input type="hidden"> 標(biāo)簽每出現(xiàn)一次，一個(gè) Hidden 對(duì)象就會(huì)被創(chuàng)建。可通過遍歷表單的 elements[] 數(shù)組來訪問某個(gè)隱藏輸入域，或者通過使用document.getElementById()。
隱藏域用戶看不到，用于暫存數(shù)據(jù)或者安全校驗(yàn)。
例如<input type="hidden" name="hidden" value="12345" />在頁面上不顯示這個(gè)信息，但是后臺(tái)可以接收到value的值。如果頁面一樣，但接收到的信息不一致，則不接受這個(gè)信息。用于頁面被偽造時(shí)，驗(yàn)證頁面的正確性，保證頁面安全。

本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請(qǐng)注明出處

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、有序列表、無序列表、自定義列表如何使用？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    鴻鵠飛天閱讀 774評(píng)論 0贊 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,554評(píng)論 19贊 139
  • 一、有序列表、無序列表、自定義列表如何使用？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    咩咩咩1024閱讀 593評(píng)論 0贊 0
  • 課程目標(biāo) 熟悉列表的使用場景和用法 理解HTML語義化 理解行內(nèi)元素、塊級(jí)元素概念 熟悉常見input表單的使用方...
    饑人谷_江君閱讀 298評(píng)論 0贊 0
  • 西方先賢培根講過很多讀書的益處，中國古代圣人也講過讀書的好處，圖書館中常常也能看到勸人讀書的格言：書籍是人類進(jìn)步的...
    許遠(yuǎn)山閱讀 382評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容