任務(wù)七-HTML4

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

  • 無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記,列表結(jié)構(gòu)中的列表項(xiàng)沒有先后順序的列表形式。大部分網(wǎng)頁應(yīng)用中的列表均采用無序列表，其列表標(biāo)簽采用<ul></ul>

  • 有序列表就是列表結(jié)構(gòu)中的列表項(xiàng)有先后順序的列表形式，從上到下可以有各種不同的序列編號，如1、2、3或 a、b、c 等。

  • 自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以<dt>開始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始。

        <li>無序1</li>
    <li>無序2</li>
</ul>
<ol>
    <li>有序1</li>
    <li>有序2</li>
</ol>
<dl>
    <dt>自定義1</dt>
    <dd>這是自定義1的定義</dd>
    <dt>自定義2</dt>
    <dd>這是自定義2的定義</dd>
</dl>
列表1.png

若我們?nèi)绻胱専o序列表與有序列表的樣式有些改變，可以在ul與ol中添加 type 來修改相應(yīng)你想要的效果，例如：

<ul type="circle">
    <li>無序1</li>
    <li>無序2</li>
</ul>
<ol type="a">
    <li>有序1</li>
    <li>有序2</li>
</ol>
列表2.png

使用情況：

  • 有序列表是使用者在對列表有順序要求時(shí)使用
  • 無序列表最為常見，列表中各個(gè)數(shù)據(jù)關(guān)系并列，用于對列表沒有順序要求時(shí)使用
  • 自定義列表用于對列表有定義內(nèi)容時(shí)使用

下面給一個(gè)簡單的嵌套：

<ul>
    <li>體育</li>
    <ul>
        <li>足球</li>
        <li>籃球</li>
        <li>橄欖球</li>
    </ul>
    <li>樂器</li>
    <ul>
        <li>吉他</li>
        <li>貝司</li>
        <li>口琴</li>
    </ul>
</ul>

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

要去除列表的默認(rèn)樣式，可以在樣式中清除列表的默認(rèn)樣式，參考代碼如下：

<style>
ol,ul{
    list-style: none;
}
</style>

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

區(qū)別：

  • 在 css 的書寫中，id加前綴“#”，class 加前綴“.”
  • id 在頁面中是獨(dú)一無二的，是作為劃分大區(qū)塊使用的，有且只有一個(gè)名稱；class 可以重名，代表同一類型，是作為劃分小區(qū)塊使用的，可以有多個(gè)名稱
  • id 是一個(gè)標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容；class 是一個(gè)樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上
  • id 是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class 是先定義好一種樣式，再套給多個(gè)結(jié)構(gòu)/內(nèi)容

用法：

  • id 使用于主要塊級元素
  • class 用于要重復(fù)使用樣式的除 id 其他塊級或行內(nèi)元素

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

  • 塊級元素（block element）：每個(gè)塊級元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級元素后無法一般無法添加其他元素（float 浮動后除外），也就是說占用空間是一整行
  • 行內(nèi)元素（inline element ）：也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等，行內(nèi)元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，占用空間是自身的內(nèi)容寬度

區(qū)別：

  • 行內(nèi)元素會在一條直線上排列，都是同一行的，水平方向排列；塊級元素各占據(jù)一行，垂直方向排列。塊級元素從新行開始結(jié)束接著一個(gè)斷行
  • 行內(nèi)元素沒有寬高，不能手動設(shè)置，但又行高（line-height），左右內(nèi)邊距和外邊距均有效，但上下不占據(jù)空間，若添加邊框，邊框可見但不占據(jù)空間；塊級元素高度，行高以及外邊距和內(nèi)邊距都可控制
  • 塊級元素可以包含行內(nèi)元素和塊級元素；行內(nèi)元素不能包含塊級元素，只能容納文本或者其他行內(nèi)元素

這里我們給出下面這個(gè)代碼來看一下具體的區(qū)別：

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <link href="css/style.css" rel="stylesheet">
    <style>
        a {
            border: 1px solid red;
            width: 50px;
            height: 50px;
            padding: 20px;
            margin: 20px;
        }
        
        p {
            margin: 0;
            padding: 0;
            background: #ccc;
        }
    </style>
</head>

<body>
    <p>p1</p>
    <a href="#">a</a>
    <a href="#">b</a>
    <p>p2</p>
</body>

</html>
我們可以看到作為行內(nèi)元素的 a 上下不占據(jù)空間，若添加邊框，邊框可見但不占據(jù)空間,而作為k塊級元素的 p 占了一整行。.png

對應(yīng)常用標(biāo)簽：

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

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

  • display: block 讓對象成為塊級元素，此元素前后會帶有換行符
  • display: inline 該元素是默認(rèn)的。對象會被顯示為行內(nèi)元素，元素前后沒有換行符。
  • inline-block 此特性的元素呈現(xiàn)為內(nèi)聯(lián)對象，四周元素保持在同一行，但可以設(shè)置寬度和高度地塊元素的屬性。

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>

這段代碼將頁面劃分為多個(gè)部分，將頭部，內(nèi)容與頁尾分別用唯一的 id 進(jìn)行命名。用 class=warp 對 div 的內(nèi)部結(jié)構(gòu)進(jìn)行了統(tǒng)一樣式，方便管理，不重復(fù)操作，設(shè)置為寬度900px，margin 外邊距根據(jù)瀏覽器自動調(diào)整，上下外邊距為0。

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

  • HTML 標(biāo)簽可以分為有語義的標(biāo)簽，和無語義的標(biāo)簽。比如table表示表格，form表示表單，a標(biāo)簽表示超鏈接，strong標(biāo)簽表強(qiáng)調(diào)。無語義標(biāo)簽典型的有div等。而 CSS 中可以利用 class 與 id 來進(jìn)行命名。HTML 與 css 語義化就是在頁面中盡量多滴結(jié)合場景多使用含有語義的標(biāo)簽，少使用無語義的標(biāo)簽。
  • 在寫代碼過程中，我們得注意命名得有意義，并且統(tǒng)一風(fēng)格，命名中包含2個(gè)以上單詞用“-”鏈接，用小寫字母來進(jìn)行規(guī)范。

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

<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單，用于把用戶輸入的數(shù)據(jù)提交到后臺。

<strong>常用的input 標(biāo)簽及其作用：

標(biāo)簽 值 定義
name field_name 定義 input 元素的名稱
action URL 定義提交的地址
method get/post 規(guī)定如何發(fā)送表單數(shù)據(jù)

<strong>input 的 type 屬性各類作用：

屬性 定義
text 定義單行的輸入字段，用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符
submit 定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器
radio 定義單選按鈕
checkbox 定義復(fù)選框
number 限制只能輸入數(shù)字
password 定義密碼字段。該字段中的字符被掩碼。

<strong>其他表單元素：

元素 定義
textarea 創(chuàng)建一個(gè)多行文本區(qū)，可以在其中輸入多行文本
select 在頁面中創(chuàng)建一個(gè)菜單空間（與 option 結(jié)合使用可以創(chuàng)建一個(gè)菜單）
option 表示各個(gè)菜單項(xiàng)

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

瀏覽器使用 method 屬性設(shè)置的方法將表單中的數(shù)據(jù)傳送給服務(wù)器進(jìn)行處理。共有兩種方法：POST 方法和 GET 方法。

<strong>post 和 get 方式的區(qū)別：

  • 1 數(shù)據(jù)提交方式不同，GET 方法將表單參數(shù)直接放在應(yīng)用程序的 URL 中，這樣網(wǎng)絡(luò)窺探者可以很輕松地捕獲它們，還可以從服務(wù)器的日志文件中進(jìn)行摘錄。POST 沒有安全方面的漏洞，在將參數(shù)作為單獨(dú)的事務(wù)傳輸給服務(wù)器進(jìn)行處理時(shí)，至少還可以采用加密的方法。所以在安全性方面更加提倡用 path 的方式。
  • 2 提交數(shù)據(jù)的數(shù)量不同，post 用于提交大量數(shù)據(jù)，而 get 一般用于提交少量數(shù)據(jù)
  • 3 服務(wù)器限制，get 最多提交2K數(shù)據(jù)，瀏覽器會限制；post 理論上瀏覽器不會限制，只會受服務(wù)器限制。
  • 4 get 可收藏為書簽，post 不可收藏為書簽

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

作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示。name是用來連接數(shù)據(jù)庫，在服務(wù)器端的作用是十分大的。

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

  • <button>提交</button> 在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像，而 input 元素則不可以
  • <a class="btn" href="#">提交</a> 表示 a 鏈接，用于從一張頁面鏈接到另一張頁面，并不能提交數(shù)據(jù)，而是轉(zhuǎn)到另一個(gè)指定頁面
  • <input type="submit" value="提交"> 為表單提供提交數(shù)據(jù)按鈕，提交表單的數(shù)據(jù)，但是不能提交其他內(nèi)容

12. radio 如何 分組?

    <form name="one" method="POST">
        <div>
            體育愛好：<input type="radio" name="sports" value="足球">足球
            <input type="radio" name="sports" value="籃球">籃球
            <input type="radio" name="sports" value="羽毛球">羽毛球
            <input type="radio" name="sports" value="橄欖球">橄欖球
        </div>
        <div>
            食物愛好： <input type="radio" name="food" value="漢堡">漢堡
            <input type="radio" name="food" value="薯?xiàng)l">薯?xiàng)l
            <input type="radio" name="food" value="雞腿">雞腿
            <input type="radio" name="food" value="米飯">米飯
        </div>

        <input type="hidden" name="url_delete" value="777777">
        <input type="submit" value="提交">
    </form>

<strong>radio 分組只要在 name 中輸入同一個(gè)名稱即可分為一組，效果如下：

radio分組.png

13.placeholder 屬性有什么作用?

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

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

    <form name="text" method="post">
        <div>姓名:<input name="usename" type="text" placeholder="用戶名" maxlength="10" /></div>
        <div>密碼:<input type="password" name="password" placeholder="密碼" maxlength="16" /></div>
        <input type="hidden" name="url_delete" value="777777">
        <input type="submit" value="提交">
    </form>
hidden.png
  • type=hidden 定義隱藏的輸入字段,在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器。
  • 用以確定用戶身份
  • 便于查找用戶提交按鈕
  • form是不能同時(shí)提交，添加隱藏域可使相關(guān)聯(lián)表單聯(lián)系起來
  • javascript不支持全局變量，可添加隱藏域保留值

引用：html中隱藏域hidden的作用介紹及使用示例

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

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

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

  • 一、有序列表、無序列表、自定義列表如何使用？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    dengpan閱讀 405評論 0贊 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,554評論 19贊 139
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,875評論 32贊 459
  • 一，有序列表、無序列表、自定義列表如何使用？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？...
    kingBirds閱讀 893評論 0贊 0
  • 在小伙伴的推薦和資源分享下，我大起膽子看了這部比較有名的喪尸連續(xù)劇。在看這部劇之前，其實(shí)我已經(jīng)看過不少的喪尸片。從...
    婉青婉青閱讀 1,157評論 25贊 8

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