這些HTML、CSS知識點，面試和平時開發都需要 No8-No9（知識點：媒體操作、構建表單）
系列知識點匯總
這些HTML、CSS知識點，面試和平時開發都需要 No1-No4（知識點：HTML、CSS、盒子模型、內容布局）
這些HTML、CSS知識點，面試和平時開發都需要 No5-No7（知識點：文字設置、設置背景、數據列表）
這些HTML、CSS知識點，面試和平時開發都需要 No8-No9（知識點：媒體操作、構建表單）
這些HTML、CSS知識點，面試和平時開發都需要 No10-No11（知識點：表格操作、代碼編寫規則）
No8.媒體操作
1.增加圖片
（1）img元素：自包含元素，不能封裝其他任何元素。正確寫法是<img>,而不是<img/>或者<img></img>。
（2）屬性說明：src設置圖片的地址；alt(alternative text)提供給搜索引擎，或者當圖片不可見時顯示的文本。
（3）width和height屬性：為img設置固定的width和height可提升頁面的加載速度。預留固定的大小，加載整個頁面。如果設置width或者height任意一個屬性，其他一個屬性尺寸會等比例縮放。
（4）測試代碼如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> .box img{ width: 400px; } </style> </head> <body> <img src="http://img1.gtimg.com/tech/pics/hv1/104/221/2071/134723234.jpg" alt="火星表面是否曾有海洋"> </body> </html>
2.定位圖片
（1）img元素級別：img默認是inline級別元素，但可通過設置float、display以及盒子模式的padding、border、margin設置元素停靠位子。
（2）float定位圖片：為了讓圖片停靠在文字的左邊或者右邊，可通過float屬性設置。例如下面的代碼可通過設置img的float值可讓圖片靠左或者靠右：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> .box{ border: 1px solid #dedede; width: 700px; } .box span{ word-wrap:break-word; word-break:break-all; } .box img{ border: 1px solid #9799a7; background: #eaeaed; width: 200px; float: right; margin: 5px; padding: 4px; } </style> </head> <body> <div class="box"> <span>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<img src="http://img1.gtimg.com/tech/pics/hv1/104/221/2071/134723234.jpg" alt="火星表面是否曾有海洋">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span> </div> </body> </html>
3.增加音頻文件
（1）audio元素：播放音頻文件元素。
（2）屬性：autoplay、controls、loop、preload。autoplay、controls、loop是布爾屬性，在使用它們時不需要設置值，直接添加屬性名即可。例如：<audio src=”test.mp3”controls loop></audio>。
（3）屬性說明：controls，是否手動控制;autoplay,是否自動播放；loop，是否循環播放。
（4）preload：包含none、auto、metadata三個值，none表示不加載文件信息，auto表示自動加載所有信息，metadata加載有效信息。如果audio沒有添加preload屬性，則默認加載文件的所有信息（相當於auto）。為了讓頁面加載更快，可設置preload屬性為none或者metadata。demo如下：
<audio src="test.mp3" controls loop></audio>
4.增加視頻文件
（1）video元素：播放視頻文件元素。
（2）屬性：和audio相似，擁有src、autoplay、controls、loop、preload屬性。
（3）controls：和audio不同，如果沒有controls屬性，video也會顯示出來。
（4）poster屬性：在播放視頻之前可設置poster顯示一張默認圖片。例如：
<video src="test.mp4" controls poster="test.jpg"></video>
5.頁面嵌套
（1）iframe元素：<iframe src=”http://www.baidu.com”></iframe>。
（2）屬性：iframe默認設置了border、width、height。我們有可以自己設置。例如下面的樣式設置：
iframe{
height: 800px;
width: 100% ;
border: none;
}
No.9 構建表單
1.表單元素
（1）form：form是表單的容器，最常用的兩個屬性action和method。例如：
<form action="/login.html" method="post"> </form>
（2）原始文本類型：text、password。
（3）Html5增加的文本類型：color、date、datetime、email、month、number、range、search、tel、time、url、week。例如下面代碼：
form action="No8-6.html" method="post"> 日期：<input type="date" /> <br> 顏色：<input type="color"/> <br> 範圍：<input type="range"/> </form>
chrome展示結果：
（4）兼容性：如果瀏覽器不支持這些Html5的文本類型，元素類型自動顯示為text類型。
（5）textarea元素：屬性cols設置初始化時文本區內的可見寬度，rows設置初始化時文本區內的可見行數。個人建議直接設置height和width。
2.選擇元素
（1）radio元素：一組radio必須有相同的名字，添加checked表示選擇項。例如：
<form action="No8-6.html" method="post"> 哪天？ <input type="radio" name="day" value="Friday" checked>Friday <input type="radio" name="day" value="Saturday" >Saturday <input type="radio" name="day" value="Sunday" >Sunday </form>
（2）checkbox元素：和radio相似，但可以多選。例如：
<input type="checkbox" name="day" value="Friday" checked> Friday <input type="checkbox" name="day" value="Saturday"> Saturday <input type="checkbox" name="day" value="Sunday"> Sunday
（3）下拉列表元素：使用select和options兩個元素實現。例如：
<select name="day"> <option value="Friday" selected>Friday</option> <option vlaue="Saturday">Saturday</option> <option value="Sunday">Sunday</option> </select>
（4）多選列表：和下拉列表相似，但需要給select添加multiple屬性。例如：<select name="day" multiple>
3.表單按鈕
（1）submit input:<input type="button" value="submit">。
（2）submit button：可通過設置button元素實現和input button一樣的效果，代碼如下：
<button type="submit"> <strong>Send us</strong> a message </button>
4.其他元素
（1）hidden input：可通過該類型在本地保存某些值，例如：<input type="hidden" name="tracking-code" value="abc-123">。
（2）file input：file類型的樣式不好控制，一般都是通過js設置文件上傳控件。
5.組織表單
（1）label元素：一般用來描述表單的頭部信息。label包含for屬性，for的值為text輸入框元素的id。這樣設置後，當點擊label元素時，for屬性值對應的輸入框元素自動獲取焦點。例如：
<label for="username">Username</label> <input type="text" name="username" id="username">
（2）label元素for屬性的替代方式：只需用label元素包含輸入框元素，例如：
<label> <input type="radio" name="day" value="Friday">Friday </label> <label> <input type="radio" name="day" value="Saturday"> Saturday </label> <label> <input type="radio" name="day" value="Sunday"> Sunday </label>
（3）fieldset：字段集合分組，和section相似。把form表單中同類元素信息放在一個組。
（4）legend：作為filedset頭部信息。例如：
<fieldset> <legend>登錄</legend> <label> Username <input type="text" name="username"> </label> <label> Password <input type="text" name="password"> </label> </fieldset>
顯示效果如下：
6.input屬性
（1）disabled：元素不可用。
（2）placeholder：html5屬性，文本框提示信息，例如：
<label> Email: <input type="email" name="email" placeholder="請輸入電子郵件"> </label>
（3）required：html5屬性，設置為必填項。可通過:required偽類設置無效元素的樣式。
（4）html5其他附加屬性：accept、autocomplete、autofocus、formaction、formenctype、formmethod、formnovalidate、formtarget、max、maxlength、min、pattern、readonly、selectionDirection、step。
這些HTML、CSS知識點，面試和平時開發都需要 No8-No9（知識點：媒體操作、構建表單）