第七彈-HTML4

一、有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什麼區別？在哪些情況下使用哪種（重要）？ 如何巢狀？

有序列表使用語法：

無序列表使用語法：

自定義列表使用語法：

三種列表的使用場景：

• 有序列表：多使用於有優先順序的專案，第一步、第二步、……第N步分別做什麼，不可隨意調換順序；
• 無序列表：多使用於同等級、同型別專案的並列顯示，沒有先後之分，可隨意調換位置；
• 自定義列表：多使用於多個並列專案，同時每個專案下可再細分為多個更小的並列專案；

列表巢狀：

二、如何去除列表前面的點或者數字？

為列表新增宣告：

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

備註：list-style：none為清除列表的預設樣式

三、class 和 id 有什麼區別？什麼時候用 class 什麼時候用 id？

• id：id選擇器，使用#name定義（name為id名，可任意取名），使用id="name"呼叫，其優先順序高於類選擇器，一個標籤只能有一個id且每個id只能使用一次，多用於頁面分塊的塊級標籤上；
• class：類選擇器，使用.name定義（name為類名，可任意取名），使用class="name"呼叫，一個標籤可以有多個類且同一個類可以用到不同的標籤上，多用於多個標籤樣式相似或完全相同時；

四、塊級元素、行內元素是什麼？有什麼區別？分別對應哪些常用標籤？

• 塊級元素：佔用空間是一整行，常用標籤有div、p、h1...h6、table、tr、ul、li、dl、dt、form等等；
• 行內元素：佔用空間是它自身的內容寬度，常見標籤有a、span、img、input、button、em、textarea等等；

區別：

1. 行內元素可以並排顯示，塊級元素不能；
2. 行內元素設定寬高無效；
3. 行內元素設定垂直方向的外邊距和內邊距有效但不佔據空間，設定邊框或背景顏色是可見，設定水平方向的外邊距和內邊距有效且佔據空間；

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

• display:inline 塊級元素轉化成內聯元素，不換行；
• display:block 內聯元素轉換成塊元素，換行；
• display:inline-block 既包含內聯元素屬性有包含塊級元素屬性，既不換行又可以使用塊元素所擁有的屬性；

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

做頁面佈局，分為三個大的區塊：導航欄、內容展示區塊、頁尾，每個大的區塊對應一個id型別，大的區塊包含很多小的區塊，內部的小區塊則用class類選擇器去渲染樣式，如下圖：

七、如何理解 HTML CSS 語義化? 在平時寫程式碼的過程中要注意哪些細節

HTML CSS 語義化理解：

• “語義化”指的是機器在需要更少的人類干預的情況下能夠研究和收集資訊，讓網頁能夠被機器理解，最終讓人類受益；
• 語義化的主要目的就是讓大家直觀的認識標籤和屬性的用途和作用；
• 根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析；

平時寫程式碼的過程中要注意哪些細節：

• 多用語義化標籤，方便機器閱讀及人員程式碼維護；
• 對類或id取名最好使用有意義的英文單詞，儘量不要用中文或拼音類取名；
• 每條屬性結束都記得新增結束符（分號"；"）；
• 程式碼縮排，便於檢查錯誤，程式碼比較規範，一些標籤巢狀可以明顯的看出；

備註：語義化理解採摘自百度知道

八、form表單有什麼作用？有哪些常用的input 標籤，分別有什麼作用？

表單的作用:

用於把使用者輸入的資料提交到後臺伺服器端；

常用的input標籤：

• *name: *規定input專案提交時的名稱，必須有，否則該提交項會被忽略；
• *type: *規定提交專案的型別；
• placeholder:提交專案內容提示；
• maxlength：限制輸入內容的最大長度；
• value：規定提交專案的值；
• checked：新增該屬性時預設選中；
• disabled：新增該屬性則禁用輸入；

九、post 和 get 方式的區別？

• get提交時地址上會顯示提交的資料資訊，不安全；post不進行顯示直接提交到後臺，安全性較好；
• get最多提交1k資料，瀏覽器位址列長度限制；post提交資料的大小受後端伺服器限制，資料量較大；

十、在input裡，name有什麼作用？

規定input提交專案的名稱，方便後臺識別並進行相應的處理，必須有，否則提交內容會被忽略；

十一、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什麼區別？

• <button></button> ：html中的按鈕標籤，有預設樣式，未定義功能事件；
• <input type="submit" value="提交">： 表單的一個提交按鈕，當點選時會提交input的資料到後臺，有預設樣式
• <a class="btn" href="#">提交</a>：html的超連結標籤a，顯示文字內容為提交，它包含一個class類為btn的樣式；

十二、radio 如何 分組?

使用name屬性進行分組，相同name的為一組，下圖分為性別和幣種兩組radio：

十三、placeholder 屬性有什麼作用?

為使用者輸入框顯示提示資訊，提高使用者體驗，如下圖為使用者名稱和密碼提示：

十四、type=hidden隱藏域有什麼作用? 舉例說明

隱藏域使用者看不見，同樣可以傳送資料到後臺，使用者不知道其內容：

1. 用於暫存資料,下面程式碼為data-store的隱藏域儲存了一個叫get-post的圖片:
   <input type="hidden" name="data-store" value="get-post.png" >

2. 安全性校驗，下面程式碼為safe的隱藏域包含一個safe-number的安全校驗碼，當後臺收到有這個校驗碼時即認為是安全的:
   <input type="hidden" name="safe" value="safe-number">

十五、程式碼題

程式碼7-1地址，執行效果如下圖：

　　　　　　　　宣告：本部落格版權歸蘭文聰和飢人谷所有，轉載需說明來源！