html及html5知識點總結

泉本尊發表於2019-02-01
HTML

Iframe - 刪除邊框

frameborder 屬性規定是否顯示 iframe 周圍的邊框。

設定屬性值為 "0" 就可以移除邊框：

例項

<iframe src="demo_iframe.htm" frameborder="0"></iframe>複製程式碼

使用 iframe 作為連結的目標

iframe 可用作連結的目標（target）。

連結的 target 屬性必須引用 iframe 的 name 屬性：

例項

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>複製程式碼

HTML 元素

<head> 元素是所有頭部元素的容器。<head> 內的元素可包含指令碼，指示瀏覽器在何處可以找到樣式表，提供元資訊，等等。

以下標籤都可以新增到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title> 標籤定義文件的標題。

title 元素在所有 HTML/XHTML 文件中都是必需的。

title 元素能夠：

  • 定義瀏覽器工具欄中的標題
  • 提供頁面被新增到收藏夾時顯示的標題
  • 顯示在搜尋引擎結果中的頁面標題

<base> 標籤為頁面上的所有連結規定預設地址或預設目標（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>複製程式碼

<link> 標籤定義文件與外部資源之間的關係。

<link> 標籤最常用於連線樣式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>複製程式碼

HTML
元素

後設資料（metadata）是關於資料的資訊。

<meta> 標籤提供關於 HTML 文件的後設資料。後設資料不會顯示在頁面上，但是對於機器是可讀的。

典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文件的作者、最後修改時間以及其他後設資料。

<meta> 標籤始終位於 head 元素中。

後設資料可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。

針對搜尋引擎的關鍵詞

一些搜尋引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。

下面的 meta 元素定義頁面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />複製程式碼

下面的 meta 元素定義頁面的關鍵詞：

<meta name="keywords" content="HTML, CSS, XML" />複製程式碼

name 和 content 屬性的作用是描述頁面的內容。

HTML 中有用的字元實體

註釋：實體名稱對大小寫敏感！

顯示結果描述實體名稱實體編號
空格&nbsp;&#160;
<小於號&lt;&#60;
>大於號&gt;&#62;
&和號&amp;&#38;
"引號&quot;&#34;
'撇號 &apos; (IE不支援)&#39;
￠分（cent）&cent;&#162;
£鎊（pound）&pound;&#163;
¥元（yen）&yen;&#165;
€歐元（euro）&euro;&#8364;
§小節&sect;&#167;
©版權（copyright）&copy;&#169;
®註冊商標&reg;&#174;
™商標&trade;&#8482;
×乘號&times;&#215;
÷除號&divide;&#247;

 宣告

Web 世界中存在許多不同的文件。只有瞭解文件的型別，瀏覽器才能正確地顯示文件。

HTML 也有多個不同的版本，只有完全明白頁面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。

<!DOCTYPE> 不是 HTML 標籤。它為瀏覽器提供一項資訊（宣告），即 HTML 是用什麼版本編寫的。

HTML5 - 新特性

HTML5 的一些最有趣的新特性：

  • 新的語義元素，比如 <header>, <footer>, <article>, and <section>。
  • 新的表單控制元件，比如數字、日期、時間、日曆和滑塊。
  • 強大的影象支援（藉由 <canvas> 和 <svg>）
  • 強大的多媒體支援（藉由 <video> 和 <audio>）
  • 強大的新 API，比如用本地儲存取代 cookie。

如何使用Canvas 標記繪圖

大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個“繪圖環境”物件上。

Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法呼叫來定義，而不是描述為字母和數字的字串，比如呼叫 beginPath() 和 arc() 方法。

一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環境的各種屬性，比如 fillStyle，說明了這些操作如何使用。

註釋：Canvas API 非常緊湊的一個原因上它沒有對繪製文字提供任何支援。要把文字加入到一個 <canvas> 圖形，必須要麼自己繪製它再用點陣圖影象合併它，或者在 <canvas> 上方使用 CSS 定位來覆蓋 HTML 文字。

canvas提供了三種方法繪製矩形：

繪製一個填充的矩形
繪製一個矩形的邊框
清除指定矩形區域，讓清除部分完全透明。
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}複製程式碼

繪製路徑節

圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。一個路徑，甚至一個子路徑，都是閉合的。使用路徑繪製圖形需要一些額外的步驟。

  1. 首先，你需要建立路徑起始點。
  2. 然後你使用畫圖命令去畫出路徑。
  3. 之後你把路徑封閉。
  4. 一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。

以下是所要用到的函式：

beginPath()
新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑。
closePath()
閉合路徑之後圖形繪製命令又重新指向到上下文中。
stroke()
通過線條來繪製圖形輪廓。
fill()
通過填充路徑的內容區域生成實心的圖形。
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}複製程式碼
Screenshot
moveTo(x,y)
將筆觸移動到指定的座標x以及y上。
繪製一條從當前位置到指定x以及y位置的直線。

如果沒有 moveTo 那麼第一次 lineTo 的效果和 moveTo 一樣，每次lineTo後如果沒有moveTo，那麼下次lineTo的開始點為前一次lineTo的結束點

路徑使用填充（fill）時，路徑自動閉合，使用描邊（stroke）則不會閉合路徑。如果沒有新增閉合路徑closePath()到描述三角形函式中，則只繪製了兩條線段，並不是一個完整的三角形。

畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（預設為順時針）來生成。

這裡詳細介紹一下arc方法，該方法有六個引數：x,y為繪製圓弧所在圓上的圓心座標。

radius為半徑。startAngle以及endAngle引數用弧度定義了開始以及結束的弧度。這些都是以x軸為基準。引數anticlockwise為一個布林值。為true時，是逆時針方向，否則順時針方向。
context.beginPath();
context.arc(300, 350, 100, 0, Math.PI * 2, true);
//不關閉路徑路徑會一直保留下去
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();複製程式碼

HTML5 - 使用地理定位

請使用 getCurrentPosition() 方法來獲得使用者的位置。

下例是一個簡單的地理定位例項，可返回使用者位置的經度和緯度。

例項

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>複製程式碼

getCurrentPosition() 方法 - 返回資料

若成功，則 getCurrentPosition() 方法返回物件。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會返回其他下面的屬性。

屬性描述
coords.latitude十進位制數的緯度
coords.longitude十進位制數的經度
coords.accuracy位置精度
coords.altitude海拔，海平面以上以米計
coords.altitudeAccuracy位置的海拔精度
coords.heading方向，從正北開始以度計
coords.speed速度，以米/每秒計
timestamp響應的日期/時間

什麼是 HTML 本地儲存？

通過本地儲存（Local Storage），web 應用程式能夠在使用者瀏覽器中對資料進行本地的儲存。

在 HTML5 之前，應用程式資料只能儲存在 cookie 中，包括每個伺服器請求。本地儲存則更安全，並且可在不影響網站效能的前提下將大量資料儲存於本地。

與 cookie 不同，儲存限制要大得多（至少5MB），並且資訊不會被傳輸到伺服器。

本地儲存經由起源地（origin）（經由域和協議）。所有頁面，從起源地，能夠儲存和訪問相同的資料。

  • window.localStorage - 儲存沒有截止日期的資料
  • window.sessionStorage - 針對一個 session 來儲存資料（當關閉瀏覽器標籤頁時資料會丟失）

什麼是應用程式快取？

HTML5 引入了應用程式快取（Application Cache），這意味著可對 web 應用進行快取，並可在沒有因特網連線時進行訪問。

應用程式快取為應用帶來三個優勢：

  1. 離線瀏覽 - 使用者可在應用離線時使用它們
  2. 速度 - 已快取資源載入得更快
  3. 減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源

什麼是 Web Worker？

當在 HTML 頁面中執行指令碼時，頁面是不可響應的，直到指令碼已完成。

Web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 執行在後臺。

Web Worker 和 DOM

由於 web worker 位於外部檔案中，它們無法訪問下例 JavaScript 物件：

  • window 物件
  • document 物件
  • parent 物件

例項

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>複製程式碼

html5常見面試題

一、doctype 的意義

文件型別，讓瀏覽器以標準模式渲染，知道元素的合法性

二、 HTML、XHTML， HTML5的關係

HTML： ＳＧＭＬ，語法寬鬆

XHTML：XML化的HTML，語法嚴格

HTML5：獨立規範，寬鬆

三、html5的變化

新的語義化元素（header section等）

表單增強（required, disabled date datetime email 等）

新的api（離線 manifest 

manifest 檔案可分為三個部分：

  • CACHE MANIFEST
    - 在此標題下列出的檔案將在首次下載後進行快取
  • NETWORK
    - 在此標題下列出的檔案需要與伺服器的連線，且不會被快取
  • FALLBACK
    - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面）

,音視訊（audio， video）， 圖形：canvas ，svg）

實時通訊、本地儲存、裝置能力，service work等，

分類和巢狀（a元素）

四，語義化的意義

開發者容易理解，

機器容易理解結構（搜尋，讀屏軟體）

有助於SEO

五、自閉合元素

input、img 、br、hr、meta、link

六 、html和dom 的關係

HTML是靜態字串，經過瀏覽器解析成記憶體中的dom 樹，js維護dom樹



相關文章