[TOC] # 題1、DOCTYPE 標簽是干什么用的？ 答：doctype 是一種標準的標記語言的文檔類型聲明，用來指示web瀏覽器關于頁面使用哪個HTML版本進行編寫的； `<!DOCTYPE>` 聲明必須是HTML文檔的第一行，位于html標簽之前。 # 題2、什么是語義化標簽？請列出至少5個語義化標簽？ 答：語義化標簽就是一種我們僅通過標簽名就能判斷出該標簽內容的語義的標簽。 `<nav>` : 頁面導航 `<header>` : 頁面頂部區域 `<footer>` : 頁腳區域 `<aside>` : 頁面側邊欄 `<article>` : 文章整體內容區塊，整個模塊 `<section>` : 內容分組 …… 等HTML5新增的語義化區塊標簽 # 題3、行級標簽和塊級標簽的區別？ **行級標簽**： 1. 不能設置寬、高，寬高由內容撐開 2. 能和其他行級標簽在一行顯示 常用行級標簽：`span、input、a、strong、em、i` 等等 **塊級標簽**： 1. 可以設置寬高，默認寬是100% 2. 默認不能和其他標簽在同一行顯示，除非定位、浮動、flex布局等等 常用塊級標簽：`div、p、ul、li、form、h1~h6` 等等 HTML5中新增的塊級標簽：`header、footer、aside、section` # 題4、請寫出至少5個行級標簽？ 答： span、a、img、input、strong、i、em、select、textarea 等等 # 題5、請寫出 table 標簽中包含的標簽？ 答：thead、tbody、tfoot、tr、td、th 等等 # 題6、很多網站不使用 table 和 iframe 標簽，為什么？ 答：table 和iframe 標簽在渲染時性能不好，用戶體驗不好，所以一般前端頁面都不使用。一般在后臺管理系統做數據列表時使用的比較多。 # 題7、HTML 如何進行 SEO？ 1. 適用的使用語義化標簽 2. 讓頁面結構盡量簡潔清晰 3. 使用 TDK 標簽（T:title、D:description、K:keywords）  # 題8、常用的瀏覽器有哪些？對應的內核是什么？ 答： chrome（blink)、opera (blink) 、IE (trident) 、 firefox (Gecko) 、 safari (webkit). ? # 題9、a 標簽中打開新窗口使用哪個屬性？ 比如：在新窗口中打開京東 ~~~ <a href="http://www.jd.com" target="_blank">京東</a> ~~~ # 題10、寫兩個 a 標簽中間會出現空格？為什么？ 比如： ~~~ <a href="">你好</a> <a href="">你好</a> ~~~ 解決方法： 1. 最好最簡單的辦法，就是把它們寫在同一行 2. 使用 flex 布局 # 題11、form 標簽上哪個屬性定義請求方法？哪個屬性定義請求地址？ ~~~ <form method="post" action="/user/login"></form> ~~~ # 題12、img 標簽的 alt 屬性的用途是？設置圖片路徑的屬性是？ ~~~ <img src="./abc.jpg" alt="abc" /> ~~~ # 題13、input 標簽上 `readonly` 和 `disabled` 屬性的用途？ disabled：設置標簽為禁用狀態，并且不能被選中。 # 題14、iframe 標簽的用途是？ 示例： ~~~ <iframe src="https://www.jd.com/" frameborder="0"></iframe> ~~~ # 題15、GET 和 POST 兩種提交表單方式的區別？應用場景？ 答： 區別1、GET 方式提交時，數據是通過URL地址上提交的，且GET請求只能進行url編碼 POST 方式提交時，數據是看不到的，且POST支持多種編碼方式 區別2、GET 方式提交的數據量比較小 POST 可以一次提交較大的數據量 區別3、GET 方式不能上傳文件 POST 方式可以上傳文件 應用場景： GET：搜索時的表單。 POST：添加、修改、登錄、注冊 等 # 題16、制作下拉框用哪個標簽？ ~~~ <select name="city"> ? ?<option value="北京">北京</option> ? ?<option value="上海">上海</option> </select> ~~~ # 題17、如何制作復選框？ ~~~ <input type="checkbox" value="男" /> 男 <input type="checkbox" value="女" /> 女 ~~~ # 題18、如何實現復選框在點擊后面的漢字就選中？ ~~~ <label> ? ? ? ?<input type="checkbox" value="男" /> 男 ? ?</label> ? ?<p> ? ? ? ?<input type="checkbox" value="女" id="check" /> ? ? ? ?<label for="check">女</label> ? ?</p> ~~~ # 題19、什么是SEO？做 SEO 有什么用？ 搜索引擎：百度、谷歌這種搜索網站。 SEO 的用途：讓網頁在百度、谷歌中搜索時排名靠前的技術。 # 題20、無序列表用哪個標簽？有序列表用哪個標簽？二級列表嘞？ ~~~ 無序列表： Unorderd List <ul> ? ?<li>123</li> ? ?<li>123</li> </ul> ? 有序列表：Ordered List <ol> ? ?<li>123</li> ? ?<li>123</li> </ol> ? 二級列表： <dl> ? ?<dt>北京</dt> ? <dd>朝陽區</dd> ? <dd>東城區</dd> ? ?<dt>河北</dt> ? ? ? ?<dd>石家莊</dd> ? ? ? ?<dd>廊坊</dd> </dl> ~~~ # 題21、 th 和 td 標簽的區別？ 答：這兩個標簽都是使用在 table 中的 tr 中的。 th： 居中并加粗。一般用在表格的第一行。 td：普通單元格 ~~~ <table> ? ?<tr> ? ? ? ?<th>id</th> ? ? ? ?<th>name</th> ? ?</tr> ? ?<tr> ? ? ? ?<td>1</td> ? ? ? ?<td>tom</td> ? ?</tr> </table> ~~~ # 題22、常用的圖像都是什么格式？ 答： gif（動圖）、png、jpg、jpeg、bmg、avg 等等 # 題23、如何制作多行文本框？ 答：使用 textarea 標簽。 ~~~ <textarea rows="10" cols="60"></textarea> ~~~ # 題24、塊級標簽默認的寬度是多少？ 答： 獨占一行 有內容時，寬度是 100% 。 沒有內容時，寬度是 0 .