HTML（超文本標記語言）基礎知識彙總

1、語義化

什麼是語義化？就是用合理、正確的標籤來展現內容，好比h1~h6定義標題。

語義化優勢：

• 易於用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
• 有利於SEO，搜索引擎根據標籤來肯定上下文和各個關鍵字的權重。
• 方便其餘設備解析，如盲人閱讀器根據語義渲染網頁
• 有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關係更和諧。

2、新標籤新特性

新block標籤：header,footer,main,aside,article,section,nav,hgroup （主要8個）。
新表單標籤，calendar、date、time、email、url、search 
媒介標籤： video 和 audio 
繪畫標籤： canvas 

<header>

　　<header>定義文檔或者文檔的部分區域的頁眉，應做爲介紹內容或者導航連接欄的容器。

　　在一個文檔中，您能夠定義多個<header>元素，但須要注意的是<header>元素不能做爲<address>、<footer> 或 <header> 元素的子元素。

<nav>

　　<nav>描述一個含有多個超連接的區域，該區域包含跳轉到其餘頁面或頁面內部其餘部分的連接列表。

　　在一個文檔中，可定義多個<nav>元素。

<main>

　　<main> 定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重複的內容，好比側邊欄，導航欄連接，版權信息，網站logo，搜索框（除非搜索框做爲文檔的主要功能）。

　　須要注意的是在一個文檔中不能出現多個<main>標籤。

<article>

　　<article>元素表示文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可複用的結構，如在發佈中，它多是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、交互式組件，或者其餘獨立的內容項目。

　　當<article>元素嵌套使用時，則該元素表明與外層元素有關的文章。例如，表明博客評論的<article>元素可嵌套在表明博客文章的<article>元素中。

<aside>

　　 <aside> 元素表示一個和其他頁面內容幾乎無關的部分，被認爲是獨立於該內容的一部分且能夠被單獨的拆分出來而不會影響總體。一般表現爲側邊欄或嵌入內容。

<footer>

　　 <footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳一般包含該章節做者、版權數據或者與文檔相關的連接等信息。

　　使用footer插入聯繫信息時，應在 footer 元素內使用 <address> 元素。

　　注意不能包含<footer>或者<header>

<section>

　　<section>表示文檔中的一個區域（或節），好比，內容中的一個專題組。若是元素內容能夠分爲幾個部分的話，應該使用 <article> 而不是 <section>。

　　不要把 <section> 元素做爲一個普通的容器來使用，特別是當<section>僅僅是爲了美化樣式或方便腳本使用的時候，應使用<div>。

　　這幾個標籤，比較容易混淆的是<section>、<article>，因此這裏特別說明：

　　「Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.」

　　通俗來講就是<article>比<section>更具備獨立性、完整性。可經過該段內容脫離了所在的語境，是否完整、獨立來判斷。

3、input和textarea的區別

①  <input type="text">標籤

• text標籤是單行文本框，不會換行。
• 經過size屬性指定顯示字符的長度，注意：當使用css限定了寬高，那麼size屬性就再也不起做用。
• value屬性指定初始值，Maxlength屬性指定文本框能夠輸入的最長長度。
• 能夠經過width和height設置寬高，可是也不會增長行數

②  <textarea>標籤

　　<textarea>是多行文本輸入框，文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（一般是 Courier），能夠經過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

4、用一個div模擬textarea的實現

設置contenteditable這一屬性爲true（HTML5新增屬性）

#textarea {
     width:300px;
     border:1px solid #ccc;
     min-height:150px;
     max-height:300px;
     overflow: auto;
     font-size: 14px;
     outline: none; 
}

5、移動設備忽略將頁面中的數字識別爲電話號碼的方法

1.標準的電話號碼格式是這樣的:<a  href="tel:1-408-555-5555">1-408-555-5555</a>，點擊後會自動打開電話功能；

2.但有時候不是電話號碼的數字也會被瀏覽器自動解析爲電話號碼, 並把數字的顏色和樣式都改了；

3.若是忽略頁面中的數字識別爲電話號碼, 只要把這個默認行爲關閉就行

 <meta name = "format-detection" content = "telephone=no"> 

Meta標籤中的format-detection屬性及含義，format-detection翻譯成中文的意思是「格式檢測」，顧名思義，它是用來檢測html裏的一些格式的，那關於meta的format-detection屬性主要是有如下幾個設置： 

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">
<meta name="format-detection" content="telephone=no,email=no,adress=no">

下面具體說下每一個設置的做用：
1.telephone
你明明寫的一串數字沒加連接樣式，而iPhone會自動把你這個文字加連接樣式、而且點擊這個數字還會自動撥號！想去掉這個撥號連接該如何操做呢？這時咱們的meta又該大顯神通了，代碼以下：

telephone=no就禁止了把數字轉化爲撥號連接！
telephone=yes就開啓了把數字轉化爲撥號連接，要開啓轉化功能，這個meta就不用寫了,在默認是狀況下就是開啓！

2.email

告訴設備不識別郵箱，點擊以後不自動發送

email=no禁止做爲郵箱地址！
email=yes就開啓了把文字默認爲郵箱地址，這個meta就不用寫了,在默認是狀況下就是開啓！

3.adress

adress=no禁止跳轉至地圖！
adress=yes就開啓了點擊地址直接跳轉至地圖的功能,在默認是狀況下就是開啓！

6、defer和async的區別

在HTML頁面中插入Javascript的主要方法，就是使用<script>元素。這個元素由Netscape創造並在Netscape Navigator 2中首先實現。後來，這個元素就被加入到正式的HTML規範中。HTML4.01爲<script>定義了6個屬性，包括defer和async。defer和async都是可選的，且只對外部腳本文件有效。

一、當瀏覽器解析到script腳本，沒有defer或async時：

<script src="main.js"></script>

瀏覽器會當即加載並執行指定的腳本，「當即」指在渲染該script標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。

二、當瀏覽器解析到script腳本，有async時：

<script async src="main.js"></script>

瀏覽器會當即下載腳本，但不妨礙頁面中的其餘操做，好比下載其餘資源或等待加載其餘腳本。加載和渲染後續文檔元素的過程和main.js的加載與執行並行進行（異步）。

async不保證按照腳本出現的前後順序執行，所以，確保二者以前互不依賴很是重要，指定async屬性的目的是不讓頁面等待兩個腳本的下載和執行，從而異步加載頁面其餘內容，建議異步腳本不要在加載期間修改DOM。

異步腳本必定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件觸發以前或以後執行。支持異步腳本的瀏覽器有Firefox 3.六、Safari 5 和Chrome。

三、當瀏覽器解析到script腳本，有defer時：

<script defer="defer" src="main1.js"></script>
<script defer="defer"  src="main2.js"></script>

表示腳本會被延遲到文檔徹底被解析和顯示以後再執行，加載後續文檔元素的過程將和main.js的加載並行進行（異步）。HTML5規範要求腳本按照它們出現的前後順序執行，所以第一個延遲腳本會先於第二個延遲腳本執行，而這兩個腳本會先於DOMContentLoaded事件。在現實當中，延遲腳本並不必定會按照順序執行，也不必定會在DOMContentLoaded事件觸發前執行，所以最好只包含一個延遲腳本。

7、canvas繪圖

canvas是HTML5中新增一個HTML5標籤與操做canvas的javascript API，它能夠實如今網頁中完成動態的2D與3D圖像技術。標記和 SVG以及 VML 之間的一個重要的不一樣是，有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。 canvas能夠完成動畫、遊戲、圖表、圖像處理等原來須要Flash完成的一些功能。

Canvas

• 經過Javascript來繪製2D圖形。
• 是逐像素進行渲染的。
• 其位置發生改變，會從新進行繪製。

SVG

• 一種使用XML描述的2D圖形的語言
• SVG基於XML意味着，SVG DOM中的每一個元素都是可用的，能夠爲某個元素附加Javascript事件處理器。
• 在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

比較

Canvas

• 依賴分辨率
• 不支持事件處理器
• 弱的文本渲染能力
• 可以以 .png 或 .jpg 格式保存結果圖像
• 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

• 不依賴分辨率
• 支持事件處理器
• 最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
• 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
• 不適合遊戲應用

建立 Canvas 元素

向 HTML5 頁面添加 canvas 元素。

規定元素的 id、寬度和高度：<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成：

<script type="text/javascript">
　　var c=document.getElementById("myCanvas");
　　var cxt=c.getContext("2d");
　　cxt.fillStyle="#FF0000";
　　cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 來尋找 canvas 元素： var c=document.getElementById("myCanvas"); 

而後，建立 context 對象： var cxt=c.getContext("2d");  

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪製一個紅色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。

實例 - 圓形

經過規定尺寸、顏色和位置，來繪製一個圓

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>