有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區別？在哪些情況下使用哪種（重要）？ 如何嵌套？
如何使用：
<ol>//有序列表通常定義有編號或順序的列表，用于執行步驟的語義
<li>輸入用戶名</li>
<li>輸入密碼</li>
<li>進入登錄界面</li>
</ol>//常用于
<ul> //無序列表只是純粹的表示一些相關項的列表，順序并不重要，常用于網站導航欄
<li>iPad</li>
<ul>
<li>iPad mini</li>
<li>iPad2</li>
<li>iPad3</li>
</ul>
<li>iPhone</li>
<li>MacBook Air</li>
</ul>
<dl>//自定義列表通常用來概述多個項目的描述
<dt>家電</dt>
<dd>洗衣機</dd>
<dd>電視機</dd>
<dt>家具</dt>
<dd>茶幾</dd>
<dd>櫥柜</dd>
</dl>
- 如何去除列表前面的點或者數字？
- 給列表添加 list-style: none;樣式可以去除
- class 和 id 有什么區別？什么時候用 class 什么時候用 id？
- id是一個唯一的標識符，class是可重復的我們可以給多個標簽增加同一個class名稱。id的優先級大于class
- 當HTML中只出現一次的標簽可以用id，比如頁眉、頁腳、側邊欄，當頁面中很多元素都需要用同一個樣式時則使用class。
- 塊級元素、行內元素是什么？有什么區別？分別對應哪些常用標簽？
- 塊級元素占據其父元素（容器）的整個空間，默認情況下，塊級元素會新起一行。高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設定一個寬度。
- 行內元素只占據它對應標簽的邊框所包含的空間，默認情況下，行內元素不會以新行開始，相鄰的行內元素在同一行上緊鄰顯示，而塊級元素會新起一行。高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。
-
塊元素
塊元素 - 行內元素
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea - display: block、display: inline、display: inline-block分別有什么作用?
- display:inline; 該元素生成一個或多個行內元素盒。
使元素具有行內元素的特性。 - display:block; 該元素生成一個塊元素盒。
使元素具有塊元素的特性。 - display:inline-block; 該元素生成一個塊狀盒，該塊狀盒隨著周圍內容流動，如同它是一個單獨的行內盒子（表現更像是一個被替換的元素）
使元素具有塊元素的特性，又同時使元素能跟隨周圍內容顯示具有行內元素的特性。(應用此特性的元素呈現為內聯對象，周圍元素保持在同一行，但可以設置寬度和高度地塊元素的屬性) - 下面代碼是做什么的？抄寫一遍下面的代碼，注意class和id的使用及命名方式
- 下面代碼中使用三個id給頁面分為header、content、footer三塊，header、content中用class命名每塊需要的內容，然后用class類.wrap加上樣式使得不同區域塊里的內容使用同一個樣式得到固定寬度并水平居中。
- 可以從下列代碼中看出id通常命名單獨的一個塊區域，如：header、content、footer、logo。而class用來定義需要同一樣式的多個元素。
<!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>
- 如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節
- web語義化是在設計頁面時通過采用語義恰當的標簽去構建網頁，從而使網頁更好讓計算機、開發者和用戶理解，這導致的結果是頁面在去除CSS樣式后仍然具有良好的可讀性、后期的維護性以及搜索引擎的優化性等。
- 增加用戶體驗
- 提高開發效率
- 搜索引擎優化
在平時寫代碼的過程中要注意哪些細節
嚴格要求自己精準使用語義化標簽
多思考能夠使用語義化標簽的地方盡可能采用語義化標簽
不要嫌麻煩，只要你的網頁是需要團隊開發以及后期維 護
良好的格式化代碼習慣
精簡的寫碼風格
標識符要具有可讀性
form表單有什么作用？有哪些常用的input 標簽，分別有什么作用？
<form>元素表示了文檔中的一個區域，這個區域包含有交互控制元件，用來向web服務器提交信息。
<input type="text" name="user">用戶可以在文本域寫入文本。
<input type="password" name="password">用戶可以在密碼域中寫入密碼。
<input type="checkbox" name="Bike">
<input type="checkbox" name="Car">用戶可以選中或取消選取復選框。
<input type="radio" checked="checked" name="Sex" value="male" >用戶可以選中或取消選取單選框。
<input type="submit" value="submit"> 創建一個提交按鈕
<input type="button" value="Hello world!">創建按鈕,你可以對按鈕上的文字進行自定義。
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>創建簡單的下拉列表框。
<textarea rows="10" cols="30">用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字數不受限制。
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>在數據周圍繪制一個帶標題的框。
- post 和 get 方式的區別？
- POST和GET完成的任務都是一樣的，都是將表單數據從瀏覽器發送到服務器，不過采用了兩種不同的方式。POST會打包表單變量，在后臺把它們發送到服務器；GET也會打包你的表單變量，但會把這些數據追加到URL的最后，然后向服務器發送一個請求。
- GET的使用場景：查看當前時事的表單（如果你希望用戶能夠對提交的表單后的結果頁面加書簽，就必須使用GET）
- POST的使用場景：輸入用戶名和口令的表單，訂購CD的表單，提交書評的表單，按身份證號查看福利的表單，發送客戶反饋的表單······
- 在input里，name 有什么作用？
- name 屬性用于對提交到服務器后的表單數據進行標識，或者在客戶端通過 JavaScript 引用表單數據。只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。在input里，name是唯一的名字是后臺接受的名字，比如同組的所有單選鈕都有相同的名字，多選按鈕最好使用name[]（把結果提交到后臺數組中的名稱）。
- <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么區別？
- <button>提交</button>
是一個普通的按鈕，一般加上js事件。在button元素內部，可以放置內容，比如文本或圖像。 - <a class="btn" href="#">提交</a>
是一個鏈接，可以通過css把他制作成一個按鈕的樣式鏈接到另外一個頁面。不會提交數據。 - <input type="submit" value="提交">
可以提交form表單的數據，當加上JS事件時會一并提交表單。 - radio 如何 分組?
- 設置name為同一個名字，意思為設置為同一組。
<input type="radio" name="beantype" value="whole">Whole bean <br>
<input type="radio" name="beantype" value="ground">Ground
- placeholder 屬性有什么作用?
- placeholder 屬性用于設置或返回文本域的 placeholder 屬性值。
placeholder 屬性設置了輸入字段預期值的提示信息。
姓名:<input type="text" name="user" placeholder="在這輸入姓名...">
placeholder屬性
- type=hidden隱藏域有什么作用? 舉例說明
- 定義隱藏字段。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改。這個提交的隱藏值可以用于后臺對提交的數據進行效驗。
- 下列代碼：
Email: <input type="text" name="email" /><br />
<input type="hidden" name="country" value="China" />
<input type="submit" value="Submit" />
-
頁面中顯示的樣子：
頁面中 當用戶填寫好Email后點擊Submit提交表單到后臺時，后臺接收到的不僅僅是email=郵箱地址，而是email=郵箱地址&country=China。
本博客版權歸 楊然和饑人谷所有，轉載需說明來源
