HTML4

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

  1. 有序列表
    有順序的列表，適用于有排列順序的列表，如
<ol class="getup">
  <li>1.張開眼睛</li>
  <li>2.抬起身子</li>
  <li>3.穿衣服</li>
</ol>
  1. 無序列表
    沒有順序的列表，也是最常使用的列表，如
<ul class="food">
  <li>包子</li>
  <li>餃子</li>
  <li>面條</li>
</ul>
  1. 自定義列表
    自定義列表不僅僅是一列項(xiàng)目，也是項(xiàng)目及其注釋的組合，如
<dl>
  <dt>包子</dt>
   <dd>蒸著吃</dd>
  <dt>餃子</dt>
    <dd>煮著吃</dd>
</dl>

具體選用那種列表就要根據(jù)自己的需要來決定，順序列表在展示一些不能次序錯(cuò)亂的選項(xiàng)時(shí)是一個(gè)最佳的選擇，無序列表則更適合表達(dá)一些并列的關(guān)系，自定義列表則更簡(jiǎn)單語義化。
列表也可以嵌套使用，以達(dá)到更好的展示效果，如

    <dl>
        <dt>必須干的事情</dt>
        <dd>
            <ol>
                <li>1.起床</li>
                <li>2.吃飯</li>
                <li>3.睡覺</li>
            </ol>
        </dd>
        <dt>選擇要干的事情</dt>
        <dd>
            <ul>
                <li>學(xué)習(xí)</li>
                <li>運(yùn)動(dòng)</li>
                <li>娛樂</li>
            </ul>
        </dd>
    </dl>

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

使用list-style:none;可以去除。

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

  • class和id的區(qū)別？
    class代表的是類，具有普遍性，可以被多次引用，可以應(yīng)用到任何結(jié)構(gòu)和內(nèi)容上。class在頁面布局上先定義好一類樣式，然后根據(jù)頁面需要把類樣式應(yīng)用到不用的元素和內(nèi)容上。
    id具有唯一標(biāo)識(shí)性，一般只在一個(gè)頁面上使用一次，也可以重復(fù)定義，但是會(huì)被W3C認(rèn)為不符合標(biāo)準(zhǔn)。id用于區(qū)分不同的內(nèi)容和結(jié)構(gòu)。id在頁面布局上先確定結(jié)構(gòu)和內(nèi)容，再為它定義樣式。
  • 什么時(shí)候用 class 什么時(shí)候用 id？
    由于id的唯一性，一般用于定義單一的元素，或者需要程序JS控制的東西。class由于可以多次引用，一般在結(jié)構(gòu)內(nèi)部使用，用于定義重復(fù)使用的元素類別。

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

  • 塊級(jí)元素、行內(nèi)元素是什么？
    塊級(jí)元素類似一個(gè)段落，是其他元素的容器。行內(nèi)元素也叫內(nèi)聯(lián)元素或內(nèi)嵌元素，只能容于文本內(nèi)容或者其他行內(nèi)元素。
  • 有什么區(qū)別？
    1.塊級(jí)元素會(huì)單獨(dú)占據(jù)一整行，行內(nèi)元素則只占用自身的內(nèi)容寬度，可以并列顯示。
    2.塊級(jí)元素可以手動(dòng)設(shè)置寬高。行內(nèi)元素設(shè)置寬高是無效的，設(shè)置padding margin等在垂直方向不占空間，左右padding margin是有效的，我們可以根據(jù)line-height的特性為行內(nèi)元素設(shè)置高度。
    行內(nèi)元素.png
  • 分別對(duì)應(yīng)哪些常用標(biāo)簽？
    塊級(jí)元素：<div> <p> <dl> <ol> <ul> <li> <h1>~<h6> <table>等
    行內(nèi)元素:<a> <span> <input> <img> <br>等

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

display:block:將元素設(shè)置為塊級(jí)元素
display:inline:將元素設(shè)置為行內(nèi)元素
display:inline-block:將對(duì)象呈遞為內(nèi)聯(lián)元素，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。也就是說可以使元素在一行內(nèi)呈現(xiàn)，并且可以設(shè)置寬高。

下面代碼是做什么的？抄寫一遍下面的代碼，注意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>

把頁面分成了頭部，內(nèi)容，底部三個(gè)部分，內(nèi)容也分為了側(cè)邊欄和中心塊區(qū)兩部分。根據(jù)了區(qū)域的唯一性由id命名。在內(nèi)部結(jié)構(gòu)中，又因?yàn)闃邮较嗤⑶乙⒁庹Z義化，命名風(fēng)格保持統(tǒng)一，用class設(shè)置了wrap類，設(shè)置了統(tǒng)一的寬度和邊距。

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

語義化是根據(jù)情況選擇正確的標(biāo)簽，命名有含義并且保持統(tǒng)一的風(fēng)格，便于閱讀和維護(hù)

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

form表單用于把用戶數(shù)據(jù)提交到后臺(tái)。
<input type="text" name="user" placeholder="用戶名" maxlength=10/>用于輸入文本
<input type="textarea">文本域，用于文本框輸入
<input type="password">密碼域，用于輸入密碼，內(nèi)部文本以*顯示
<input type="radio">單選框
<input type="checkbox">復(fù)選框
<input type="hidden">隱藏域，用于暫存數(shù)據(jù)，安全校驗(yàn)
<input type="submit">提交表單數(shù)據(jù)

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

  1. 數(shù)據(jù)提交方式不同，get會(huì)把提交的數(shù)據(jù)組織成url可以看到，post則在后臺(tái)運(yùn)行看不到。
  2. get一般用于提交少量數(shù)據(jù)并獲得大量數(shù)據(jù)，post一般提交大量數(shù)據(jù)得到少量信息。
  3. get最多提交1k數(shù)據(jù)，post理論上不會(huì)有限制，受服務(wù)器限制。
  4. get提交的數(shù)據(jù)會(huì)存在歷史記錄當(dāng)中，安全性不好

在input里，name 有什么作用？

name是表單提交時(shí)的名稱，在提交時(shí)，后臺(tái)會(huì)給對(duì)應(yīng)的變量輸入數(shù)據(jù)，<input>必須有那么屬性。

  • 在單選框中需要設(shè)定像同的name以保證是同一個(gè)單選框：
<input type="radio" name="sex" value="man"/ checked>男
<input type="radio" name="sex" value="man"/ checked>女
  • 在復(fù)選框中也可以把name設(shè)置成一個(gè)數(shù)組：
<input type="checkbox" name="love" value="運(yùn)動(dòng)"/ checked>運(yùn)動(dòng)
<input type="checkbox" name="love" value="吃"/ checked>吃

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

<button>提交</button>：普通按鈕需要綁定JS事件
<a class="btn" href="#">提交</a>：鏈接，點(diǎn)擊后會(huì)跳轉(zhuǎn)到頁面，但是不會(huì)提交數(shù)據(jù)
<input type="submit" value="提交">：用于提交表單數(shù)據(jù)

radio如何分組?

用設(shè)置name來分組，如果name相同則為同一組，如果name不同則為不同組。

<input type="radio" name="sex" value="man"/ checked>男
<input type="radio" name="sex" value="man"/ checked>女

placeholder 屬性有什么作用?

用于設(shè)置提示信息
<input type="text" name="user" placeholder="用戶名" maxlength=10/>

placeholder.png

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

type=hidden用于暫存數(shù)據(jù)，安全校驗(yàn)

<form action="a.php" method="post">
        賬號(hào)：<input type="text" name="user" placeholder="用戶名"/><br/>
        密碼：<input type="password" name="password" placeholder="請(qǐng)輸入密碼"/><br/>
        <input type="submit" name="submit">
        <input type="hidden" name="check" value="666"/>
    </form>
hidden展示.png

hidden.png

在后臺(tái)會(huì)看到check的數(shù)據(jù)，以此校驗(yàn)安全性。

代碼

github地址
在線預(yù)覽

最后編輯于 ：
?著作權(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)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,578評(píng)論 19贊 139
  • 最近還莫名其妙的生病了，好受打擊，希望能順順利利的學(xué)完我的前端。加油！ 一.有序列表、無序列表、自定義列表如何使用...
    婷樓沐熙閱讀 1,176評(píng)論 2贊 3
  • 1.有序列表、無序列表、自定義列表如何使用？寫個(gè)簡(jiǎn)單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    墨月千樓閱讀 341評(píng)論 0贊 0
  • 一、有序列表、無序列表、自定義列表如何使用？寫個(gè)簡(jiǎn)單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    鴻鵠飛天閱讀 774評(píng)論 0贊 0
  • 課程目標(biāo) 熟悉列表的使用場(chǎng)景和用法 理解HTML語義化 理解行內(nèi)元素、塊級(jí)元素概念 熟悉常見input表單的使用方...
    饑人谷_江君閱讀 298評(píng)論 0贊 0

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