課程目標
- 熟悉列表的使用場景和用法
- 理解HTML語義化
- 理解行內元素、塊級元素概念
- 熟悉常見input表單的使用方式
- 掌握 POST 與 GET 方式的區別
學習建議
語義化、行內元素塊級元素、POST 和 GET 的區別這是面試必問的知識點
預習視頻
課程任務
問答
有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區別？在哪些情況下使用哪種（重要）？ 如何嵌套？
有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。
有序列表
-
定義和用法
-
<ol>標簽定義有序列表。有序列表可以是數字或字母順序。 - 請使用
<li>標簽來定義列表項。
-
-
屬性
- 有序列表的屬性
以下為代碼實例：
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
- 無序列表（使用頻率最多的列表）
- 定義和用法
-
<ul>標簽定義無序列表
-
- 提示與注釋
- 即使有屬性來約束其外表，但是不建議屬性，推薦用CSS去實現這一效果
- 可選的屬性
- 無序列表可選的屬性
以下為代碼實例：
<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
- 自定義列表
- 定義與用法
- 定義一個定義列表，
<dt>為表頭<dd>為列表內容
- 定義一個定義列表，
以下為代碼實例：
<html>
<body>
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>
以下為簡單的例子：
三者在語義上有什么區別？在哪些情況下使用哪種（重要）？
-
<ol>標簽定義有序列表，強調的是先后次序之分 -
<ul>標簽定義無序列表，大多對順序沒有要求或者為并列的關系 -
<dl>標簽定義自定義列表，表現為自己定義項目，并對該項目進行說明，有時更簡單精確，語義化更好
如何嵌套？
直接在<li>標簽里面再寫入<ul>等標簽，以下為簡單的代碼展示
<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
詳見圖“列表方面的簡單例子”實例
如何去除列表前面的點或者數字？
調研得到去除列表前面的樣式有兩種途徑
- 在head里的style內，寫入如下代碼
<style>
ul ol{
list-style: none;
}
</style>
- 在body內部的ul,ol內部寫入如下代碼
<body>
<ul>
<li style="list-style: none">你</li>
<li>我</li>
<li>他</li>
</ul>
</body>
參考文章：
class 和 id 有什么區別？什么時候用 class 什么時候用 id？
class 和 id 有什么區別？
class的定義和用法
class 選擇器設置標簽的類，用于指定元素屬于何種樣式的類。
id的定義和用法：
id選擇器設置標簽的標識，用于定義一個元素的獨特的樣式。
兩者的區別
class可以反復使用而id在一個頁面中僅能被使用一次
id具有唯一性，而class是一個類
class類選擇器的權重沒有id選擇器的權重大
什么時候用 class 什么時候用 id？
- 什么時候用class
- 由于class可以在頁面中被無限使用，所以可以盡可能多的利用class
- class標簽定義一類的屬性，當網頁中好多內容需要利用同一樣式時，請利用class來減小工作量，簡化代碼
- 什么時候用id
- 在頁面較大的模塊里可用id來來
- 由于id在網頁中是唯一的，可用id來區分不同的模塊，比如頁面中有如下模塊時：今日要聞、推薦新聞、最新新聞...時可用id來區分
- 另外由于id在頁面內是唯一的，最好留給js去用
參考文章：
塊級元素、行內元素是什么？有什么區別？分別對應哪些常用標簽？
塊級元素、行內元素是什么？
- 塊級元素的定義和用法：
- 塊級元素占據其父元素（容器）的整個空間，因此創建了一個“塊”。通常瀏覽器會在塊級元素前后另起一個新行。
- 行內元素定義和用法：
- 行內元素只占據它對應標簽的邊框所包含的空間。
- 有什么區別
- 塊級元素會占據一整行，行內元素只會占據自身內容的寬度（可利用chorme的開發者工具去檢查元素是塊級還是行內的，具體表現為鼠標懸停在上面是一整行（塊級元素）還是一小區域（行內元素））
- 行內元素可以并排顯示，塊級元素不會
- 默認情況下，塊級元素會新起一行，行內元素不會
- 塊級元素可以包含行內元素和其他塊級元素，而行內元素只能包括數據和其他行內元素
分別對應哪些常用標簽
- 塊級元素：div、p、h1...h6、table、tr、ul、li、dl、dt、form
- 行內元素：a、span、img、input、button、em、textarea
display: block、display: inline、display: inline-block分別有什么作用?
- display: block的定義和用法
- 此元素將顯示為塊級元素，此元素前后會帶有換行符。
- display: inline定義和用法：
- 默認。此元素會被顯示為內聯元素(也稱作內嵌元素、行內元素)，元素前后沒有換行符。
- display: inline-block的定義和用法：
- 行內塊元素，既能像行內元素一樣水平排列，又有塊級元素的特性，
注：IE8以下不能用
下面代碼是做什么的？抄寫一遍下面的代碼，注意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">側邊欄</div>
<div class="main">中心區塊</div>
</div>
</div>
<div id="footer">
<div class="wrap">這里是 footer</div>
</div>
</body>
</html>
以上代碼做了如下的幾件事：
- 利用id將整個頁面分為了header/content/footer三個部分
- content和footer里面都有利用class定義的"wrap"類
- CSS將wrap類的類型設置為900px寬，可以阻止它從左到右撐滿容器。然后你就可以設置左右外邊距為 auto來使其水平居中。元素會占據你所指定的寬度，然后剩余的寬度會一分為二成為左右外邊距。
如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節
HTML語義化表現為選擇合適的標簽，使用合理的代碼結構，這樣可以將頁面合理的分層，使其更加清晰明了，而且便于開發者閱讀，同時能夠讓瀏覽器的爬蟲和機器更好地去解析
form表單有什么作用？有哪些常用的input 標簽，分別有什么作用？
form表單有什么作用？
用于把用戶輸入的數據提交到后臺
有哪些常用的input 標簽，分別有什么作用？
input的定義和用法：用于搜集用戶的信息等，他有如下常用的標簽
- checked：規定此 input 元素首次加載時應當被選中
- disabled：規定此 input 元素首次加載時應當被選中
- maxlength：規定輸入字段中的字符的最大長度
- name：定義 input 元素的名稱，所有的input必須有name
- placeholder：規定幫助用戶填寫輸入字段的提示
- value：規定 input 元素的值
- type
- type="text": 用于輸入文本。placeholder屬性（可選）展示的是輸入框里的提示，maxlength（可選）限制最大輸入長度；
<!-- 要加上name -->
<input name="username" type="text" placeholder="用戶名" maxlength=10 />
placeholder的作用是為了在輸入框里輸入一些提示信息
maxlength的作用是限制了最大輸入的字符數
type="password": 用于輸入密碼，輸入的內容顯示為星號。
<input name="password" type="password" placeholder="密碼" />type="radio": 單選圓圈按鈕。注意：name要相同才能實現單選，value要有值
<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
- type="checkbox":復選框。加checked屬性會默認選上。提交時，如果選中（如bike），則bike=on
<input type="checkbox" name="bike" checked/>自行車
<input type="checkbox" name="car" />汽車```
- type="textarea": 文本域，用于輸入多行文本
<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>
- type="hidden": 隱藏域，用戶看不到，用于暫存數據。或者安全性校驗
<input name="url_delete" type="hidden" value="/delete.php" />
<input name="csrf_token" type="hidden" value="a23dafd23444" />
- type="submit"
<input type="submit" value="提交" >
> ### post 和 get 方式的區別？
|比較方面|post|get|
|:--:|:--:|:--:|
|數據提交方式|看不到|提交的數據url可以看到|
|數據量|提交大量數據，從而得到少量的提示|提交少量數據，從而得到大量數據（比如搜索和查詢）|
|數據量限制|理論上無限制，受服務器限制|最多提交1k數據，受瀏覽器的限制|
|安全性|安全性較好|提交的數據在瀏覽器歷史記錄中，安全性不好|
注：若method沒寫，則默認get
> ###在input里，name 有什么作用？
name屬性的定義和用法：用于對提交到服務器后的表單數據進行標識，或者在客戶端通過 JavaScript 引用表單數據。
- 在單選框中如果name相同，則他們為一組
- 復選框中name可相同
以下為實例：
愛好
<input type="checkbox" name="love" value="basketball" checked/>籃球
<input type="checkbox" name="love" value="football" checked/>足球
> ###```<button>提交</button>```、```<a class="btn" href="#">提交</a>```、```<input type="submit" value="提交">```三者有什么區別？
- ```<button>提交</button>```沒有任何作用，只是單純的兩個字
- ```<a class="btn" href="#">提交</a>```雖然是一個鏈接，但是他并沒有把數據提交到后臺，點擊效果僅僅是跳轉到了當前的頁面
- ```<input type="submit" value="提交">```提交了一個表單的數據
以下為實例：
> ### radio 如何分組?
type="radio"為<input>標簽里的屬性: 代表單選圓圈按鈕。
name要相同才能實現單選的分組，并且value要有值
<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
> ### placeholder 屬性有什么作用?
placeholder的作用是為了在輸入框里輸入一些提示信息
以下為實例：
> ### type=hidden隱藏域有什么作用? 舉例說明
"type=hidden"為隱藏域，用戶看不到，用于暫存數據。或者安全性校驗
以下為實例，只有后臺接收到hidden里的正確的數字時，才會接受其所提交的數據
<form class="myform" action="index.html" method="post">
<p>
用戶名：
<input type="text" name="username" placeholder="用戶名"/>
</p>
<p>
密碼：
<input type="password" name="password" placeholder="密碼"/>
<input type="hidden" name="hidden" value="123456789">
</p>
<p>
<input type="submit" name="submit" value="提交">
</p>
</form>
***
> ###代碼
- [task_07_01](https://github.com/jirengu-inc/jrg-renwu5/blob/master/%E5%88%98%E6%B1%9F/task_07/task_07_01.html)
***
***本教程版權歸本人和饑人谷所有，轉載須說明來源***