瞭解HTML核心精髓（一）

時間 2019-11-12

標籤瞭解 html 核心精髓欄目 HTML 简体版

原文原文鏈接

html部分javascript

1.html標籤css

標籤不區分大小寫。html

如：<!doctype html>與<!DOCTYPE html >vue

<div></div>與<DIV></DIV>html5

PS：建議一概使用小寫字母。對於javascript的mvvm框架（vue，react，angularjs）組建標籤，會採用大寫母開頭的標籤。java

2.行內元素與塊元素node

行內元素：不換行 span, strong, em, br, img , input, label
塊元素：會換行 div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, tablereact

二者區別：行內元素沒法設置height，width，margin，padding。angularjs

3.a標籤空連接寫法web

做用：禁止空連接跳轉到頂部。

4.特殊符號要用字符實體

如：空格符號要使用 （避免瀏覽器誤認）。

5.郵件html

使用table佈局。

不使用style標籤，使用css內聯，css內聯不要寫float、position（儘可能少用）。

少用圖片。

頁面結尾須要加上「若是您沒法查看郵件內容，請點擊這裏查看」。（再作一個html頁面）

PS：緣由是大多數郵件系統有過濾機制（用於識別垃圾郵件），因此不能使用div+css這種模式的郵件網頁。

6.不用添加<noscript>標籤

通常沒有不使用js腳本的網站，通常瀏覽器不會默認禁用js腳本。（通常用戶不會手賤設置瀏覽器禁用js腳本，IE是個特例）

7.後臺頁面使用iframe與frameset

防止SEO後臺頁面。

8.響應式iframe

irame自己不能伸縮，因此要加兩個個容器去包裹，再來響應式。

如：.wrap{width：500px} /*第一層容器*/

.wrap-iframe{position:relative;} /* 第二層容器*/

iframe{position:aboslute;width:100%;height:100%;} /*iframe標籤*/

@media (max-width:500px){.wrap{800px}}

9.img標籤訂義高寬

PS:定義的做用是爲了img標籤佔位高寬，防止圖片沒有加載出來的時候影響佈局。

若是有固定寬高的圖片就定義高寬（不用css去定義）

若是沒有固定寬高的圖片，如瀑布流的圖片牆（就不定義高寬）

補充：若是使用https協議的話，頁面加載的資源（如圖片，視頻等）的url最好改爲https協議（採用同源策略），防止瀏覽器加載不出來。

10. input類型submit和button區別

submit會提交表單（form），按回車提交表單。

button不會提交表單.單純的按鈕功能。能夠經過onclick事件觸發表單事件。

html5部分

1.建議使用的標籤

結構標籤

<article> 標記定義一篇文章

<header> 標記定義一個頁面或一個區域的頭部

<nav> 標記定義導航連接

<section> 標記定義一個區域

<aside> 標記定義頁面內容部分的側邊欄

<hgroup> 標記定義文件中一個區塊的相關信息

<figure> 標記定義一組媒體內容以及它們的標題

<figcaption> 標籤訂義 figure 元素的標題。

<footer> 標記定義一個頁面或一個區域的底部

多媒體標籤

<video> 標記定義一個視頻

<audio> 標記定義音頻內容

<source> 標記定義媒體資源

<canvas> 標記定義圖片

PS：使用以上經常使用html5標籤，利於網頁佈局的改變及提高SEO。

補充：div標籤與section標籤區別

div標籤表示無心義的塊元素。

section標籤表示區塊的元素，經常使用於兩處，一是在<article>標籤裏面包裹區塊，二是做爲間隔內容區塊。

1.html5不使用的標籤

純表現的元素： basefont，big，center，font, s，strike，tt，u。

對可用性產生負面影響的元素： frame，frameset，noframes。

產生混淆的元素： acronym ，applet，isindex，dir。

已經廢棄的元素：keygen

PS：html5新特性：

語義化標籤，無需指明link的type屬性，無需DTD文件，新增html5地理定位，本地存儲，拖拽，音視頻，圖形繪製，表單輸入類型API。兼容性提升。

2.html5離線緩存與瀏覽器緩存區別

html5離線緩存能夠緩存整個網站，而瀏覽器的緩存將只存儲你實際上已經訪問過的網頁緩存。

PS：html5緩存的AppCache（已過期，不推薦使用），建議使用瀏覽器緩存機制來進行緩存靜態資源。

對於一些用戶數據，如一些定位信息，請使用localstorage來存儲。

4. <time>標籤

做用：利於seo的按時間檢索。

3.html5 web worker與nodejs區別

web worker瀏覽器的後臺（多線程），nodejs獨立的服務端。

4.html5 vedio標籤裏面使用MP4格式有聲無畫面

轉換成H264編碼就能夠網頁正常播放了。

5.html5 使用data-* 自定義屬性

自定義屬性規範化，不要隨便自定義屬性名字。

正確寫法：<div data-name="waterman"></div>

6.html5微數據

做用：利於seo優化。

7.利用data-*來存放數據，避免使用<input type="hidden" name="field＿name" value="value">

緣由：規範屬性，節省空標籤。

PS：IE須要IE 11+以上支持這屬性。

8.使用meta標籤中dns-prefetch 提升頁面載入速度。

做用是告訴瀏覽器頁面加載的時候，先解析這些域名，減小頁面資源URL的DNS解析。

如：<link rel="dns-prefetch" href="//img.sroot.com">

PS：同域無效，跨域有效。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。