整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例
使用 <span> 元素對文本中的一部分進行著色：
<p>我的母親有 <span style="color:blue">藍色</span> 的眼睛。</p>
瀏覽器支持
所有主流瀏覽器都支持 <span> 標簽。
標簽定義及使用說明
<span> 用于對文檔中的行內元素進行組合。
<span> 標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對 <span> 應用樣式，那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。
<span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。
提示和注釋
提示：被 <span> 元素包含的文本，您可以使用 CSS 對它定義樣式，或者使用 JavaScript 對它進行操作。
HTML 4.01 與 HTML5之間的差異
NONE.
全局屬性
<span> 標簽支持 HTML 的全局屬性。
事件屬性
<span> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML我們也學了那么久了，是時候看一些面試題了，畢竟學習完找工作要面試，你工作能力再強，面試這一關還是要過得。所以面試題占了很重要的成分。下面我來總結一部分，盡量全面一些，既要接近我們所學，又要滿足真實面試場景。
1、請說出XHTML和HTML的區別
答： 1、文檔頂部doctype聲明不同，xhtml的doctype頂部聲明中明確規定了xhtml DTD的寫法；
2、html元素必須正確嵌套，不能亂；
3、屬性必須是小寫的；
4、屬性值必須加引號；
5、標簽必須有結束，單標簽也應該用 “/” 來結束掉；
2、請寫出至少5個HTML塊元素標簽
答： div p ul li table h1 h2 h3 ... h6 form 等
3、請寫出至少5個HTML行內元素標簽
答：span a i label img input button textarea select 等
4、請寫出table標簽下面會包含哪些標簽元素
答： tr th td thead tbody tfoot 等
5、很多網站不常用table iframe這兩個元素，知道原因嗎？
答：因為瀏覽器頁面渲染的時候是從上至下的，而table 和 iframe 這兩種元素會改變這樣渲染規則，他們是要等待自己元素內的內容加載完才整體渲染。用戶體驗會很不友好。
6、jpg和png格式的圖片有什么區別？
答： jpg是有損壓縮格式，png是無損壓縮格式。所以，相同的圖片，jpg體積會小。比如我們一些官網的banner圖，一般都很大，所以適合用jpg類型的圖片。但png分8位的和24位的，8位的體積會小很多，但在某些瀏覽器下8位的png圖片會有鋸齒。
7、請用html知識解決seo優化問題
答： 網站上線應該設置TDK
TDK就是 ：
然后就是html語義化標簽，要簡潔，合理，這樣可以在css和js加載不全的時候，使我們的html文檔盡量清晰的展示出來，而不會特別亂；
8、常用瀏覽器有哪些，內核都是什么？
答： 常用瀏覽器有 IE 火狐(firefox) chrome safari 360 搜狗 等
內核：IE的是 Trident
火狐的是 Gecko
chrome和safari 用的是 Webkit
360和搜狗這些分極速模式和兼容模式，極速模式用的Webkit的內核，兼容模式用的Trident內核。
9、請至少寫出5個H5的新標簽
答： header nav footer canvas datalist article mark
10、a標簽在新窗口打開鏈接怎么加屬性？
答： <a target="_blank">鏈接</a>
11、寫了2個<a>標簽，兩個標簽之間有空格的情況遇到過嗎？
答：遇到過，一般換行寫的時候會出現這種情況。代碼：
<a>我們</a>
<a>你們</a>
這樣“我們”和“你們”之間就會有明顯的空格，如圖：
怎么樣，是不是空格挺明顯的。
解決辦法就是不換行寫，把兩個a標簽寫在一行里。
12、form標簽上定義請求類型的是哪個屬性？定義請求地址的是哪個屬性？
答：form表單定義請求類型的是 method 屬性 ， 定義請求地址的是 action屬性
好啦，基本上html這部分面試題就這么多，肯定還有沒有總結到的，這些面試題一定要會，甚至比我總結的多了更好。喜歡文章的小伙伴記得關注公眾號：書軟
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body> <img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>HTML5 doctype在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現；雖然doctype不區分大小寫，但是按照慣例，doctype大寫 （關于html屬性，大寫還是小寫）。<!DOCTYPE html> <html> ... </html> lang屬性根據HTML5規范：應在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應當怎么去發音和翻譯。
更多關于 lang 屬性的說明在這里；在sitepoint上可以查到語言列表；
但sitepoint只是給出了語言的大類，例如中文只給出了zh，但是沒有區分香港，臺灣，大陸。而微軟給出了一份更加詳細的語言列表.aspx)，其中細分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網頁內容的渲染方式，通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標簽可以指定頁面應該用什么版本的IE來渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據HTML5規范, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。HTML5 規范鏈接使用link
使用style
使用script<!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script> 屬性順序屬性應該按照特定的順序出現以保證易讀性；
class是為高可復用組件設計的，所以應處在第一位；
id更加具體且應該盡量少使用，所以將它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；
更多內容可以參考 WhatWG section on boolean attributes：
boolean屬性的存在表示取值為true，不存在則表示取值為false。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
在JS文件中生成標簽讓內容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。
在編寫HTML代碼時，需要盡量避免多余的父節點；很多時候，需要通過迭代和重構來使HTML變得更少。
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
盡量遵循HTML標準和語義，但是不應該以浪費實用性作為代價；任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
