整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、關于HTML語義化，你知道都有哪些標簽？
語義化就是讓計算機能夠快速讀懂內容，高效的處理信息。搜索引擎只能通過標簽來判斷內容的語義，因為頁面的很大一部分流量來自搜索引擎，要使頁面盡可能地對搜索引擎友好，所以盡可能地使用語義化標簽，如：
div是division分離，span是span范圍，table是表格，ol是orderList有序列表，ul是unorderList無序列表，li是list item列表選項，html5進一步推進web語義化的發展，使用了一些新的標簽有header、artical、address等。
2、HTML標簽分類有哪些？都有啥特點?
默認寬度是100%
塊級標簽獨占一行
塊級標簽可以使用height設置高度
常見塊級標簽：div、p、h1~h6、ol、ul、table、form等等。
默認寬度由內容撐開
行級標簽不會自動換行，從左到右一次排列
行級標簽height設置高度失效，高度由內容撐開。
常見行級標簽：span、a、br、strong、lable、i、em。
結合行級和塊級的優點
可以設置元素的寬高
還可以將多個元素顯示在一行從左到右一次排列。
常見行內塊標簽：img、input。
3、網頁編碼設置有幾種方式？
Charset屬性規定HTML文檔的字符編碼，常見的屬性值有以下幾個：
4、HTML的框架優缺點有哪些？
Html框架有iframe和frame兩個，將多個頁面通過一個瀏覽器窗口顯示。
框架的優點：
缺點：
5、HTML5有哪些新特性，移除了哪些元素？
H5新增了圖像、位置、存儲、多任務等功能。
新增元素：
移除元素：
Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標準規范，把 HTML5 的元素按優先級定義為結構性屬性、級塊性元素、行內語義性元素和交互性元素 4 大類。
6、如何區分HTML和HTML5？
DOCUMENT聲明方式是區分的重要元素。
根據新增加的結構、功能來區分。H5有好多新增語義化標簽。
7、H5文件離線存儲怎么使用，工作原理是什么？
在線情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問那么瀏覽器就會根據manifest文件的內容下載相應的資源，并進行離線存儲。如果已經訪問過并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有改變，就不會有任何操作，如果文件改變了，那么就會重新下載資源，并進行離線緩存。
頁面頭部加入manifest屬性。如：<html manifest="demo.appcache">
在cache.manifest文件中編寫離線存儲的資源。
8、Cookies,sessionStorage和localStorage的區別？
共同點：都是保存在瀏覽器端，而且都是同源的。
區別：
9、title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義，只表示標題，h1表示層次明確的標題，對頁面信息抓取也有很大的影響。
strong標明重點內容，語氣加強含義，b表示無意義的視覺表示
em表示強調文本，i是斜體，是無意義的視覺表示
視覺樣式標簽：b、u、i、s
語義樣式標簽：strong、em、ins、del、code
10、viewport 所有屬性 ？
viewport是用戶網頁的可視區域，使用meta設置viewport時有很多屬性，分別對以下各個屬性介紹
安卓中還支持：target-densitydpi，表示目標設備的密度等級，作用是決定css中的1px 代表多少物理像素。
11、meta標簽的name屬性值？
name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索機器人查找信息和分類信息用的。
Meta標簽的name屬性語法格式是：
<meta name=”參數”content=”具體的參數值”>
Name主要有以下幾個參數：
Content的參數主要有name的參數來決定，如果是關鍵字的時候，多個關鍵字之間使用逗號隔開，一般使用5個關鍵字為宜；如果是描述的時候，描述長度一般控制在200字左右；如果是索引的時候，一般使用inde、noindex、none、all，默認是all。
，Doctype作用？標準模式與兼容模式各有什么區別?
（1）、<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標簽之前。告知瀏覽器的解析器 用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
（2）、標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
2，HTML5 為什么只需要寫 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
3，行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
4，頁面導入樣式時，使用link和@import有什么區別？
（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;
5，介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
（1）渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
（2）JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。
6，常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
7，html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
* HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;
sessionStorage 的數據在瀏覽器關閉后自動刪除;
語意化更好的內容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websocket, Geolocation;
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；
* 支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
* 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素
8，簡述一下你對HTML語義化的理解？
用正確的標簽做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。
9，HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態時，操作window.applicationCache進行需求實現。
10，瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
11，請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
12，iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
13，Label的作用是什么？是怎么用的？
label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
14，如何實現瀏覽器內多個標簽頁之間的通信?
WebSocket、SharedWorker；
也可以調用localstorge、cookies等本地存儲方式；
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；
15，如何在頁面上實現一個圓形的可點擊區域？
1、map+area或者svg
2、border-radius
3、純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
16，title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展示強調內容。
i內容展示為斜體，em表示強調的文本；
Physical Style Elements -- 自然樣式標簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標簽
strong, em, ins, del, code
應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。
17，你知道多少種Doctype文檔類型？
該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
18， HTML與XHTML——二者有什么區別？
區別：
1.所有的標記都必須要有一個相應的結束標記
2.所有標簽的元素和屬性的名字都必須使用小寫
3.所有的XML標記都必須合理嵌套
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內容中使“--”
8.圖片必須有說明文字
19，<img>的title和alt有什么區別？
title是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。
html的頭部標簽<head>和</head>中，可以嵌套用來表達頁面內容的標簽，除了用<title>指定文件標題，用<meta charset="UTF-8">指定頁面編碼之外，還有另外的好幾個標簽。特別是用于SEO的那些標簽。
SEO是搜索引擎優化的意思，意思就是你在某搜索工具中，搜索某個內容時，為什么指向并跳轉到你的網站中，而不是別的網站，這就涉及到SEO可了。如果想要搜索引擎搜索到你，你必須保證用戶要搜索的內容出現在你的Meta說明中。
為搜索引擎定義的關鍵詞，提供給SEO搜索。
<meta name="keywords" content="Python, 前端, 小程序, App,Java,嵌入式">為網頁定義描述內容，也是SEO的一部分。
<meta name="description" content="老陳說編程，編程界的劉德華">頁面定時刷新，在H5之前，實時更新頁面數據的時，常用這種方法。但很不科學，因為浪費資源。在H5時，改用Websocket了。
<meta http-equiv="refresh" content="15">定義頁面作者是誰。
<meta name="author" content="老陳">在<head></head>中，用<link>標簽，引入外部資源。一個是CSS文件，一個是icon。引入CSS文件如下。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>引入頂部icon的方式。
<link rel="shortcut icon" href="圖片url">引入共用的javascript文件。
<script type="text/javascript" src="scripts.js"></script>如果你定義的CSS或JavaScript代碼，只當前頁面應用，那可以在<head></head>中用<style></style>和</script>標簽對。有關CSS和Javascript的應用，后面再說。
<head>
<style type="text/css">
body {background-color:red}
</style>
<script type="text/javascript">
document.write("老陳說編程");
</script>
</head>好了，有關HTML頭部標簽常用的內容，也就這么多了。如果你喜歡，那就轉發出去，如果你不喜歡，那就點個贊。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。
#前端##程序員##HTML5##CSS##鴻蒙#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
