HTML5 與JS學習筆記

時間 2019-11-30

標籤 html5 html 學習筆記欄目 HTML5 简体版

原文原文鏈接

1999年12月發佈的HTML4.01javascript

W3C（World Wide Web Consortium，萬維網聯盟css

HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性可以幫助咱們實現服務器將數據「推送」到客戶端的功能。html

OOP 【Object Oriented Programming】面向對象編程html5

W3C 【World Wide Web Consortium】萬維網聯盟java

視頻音頻播放web

上圖：瀏覽器找到合適的視頻文件進行播放，如沒有顯示您的瀏覽器不支持！下圖音頻同理編程

//視頻/音頻  暫停播放代碼：
<input type="button" value="播放/暫停" onclick="playq();"/>
function playq(){
  if(aaa.paused)
    aaa.play();
  else{
    aaa.pause();
    }
}

控件的拖放canvas

將任何控件拖放到div中api

Canvas繪圖瀏覽器

1. 方形fillRect（X,Y,width,height）

效果圖：

2. 繪製線條stroke()

SVG

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用於定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失
SVG 是萬維網聯盟的標準

與其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於：

SVG 圖像可經過文本編輯器來建立和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印

SVG 可在圖像質量不降低的狀況下被放大

Canvas 與 SVG 的比較

下表列出了 canvas 與 SVG 之間的一些不一樣之處。

Canvas

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

SVG

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

鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的。
1. 獲取用戶所在的經度和緯度
2. 獲取google地圖所在的位置
HTML 5 Web 存儲

在客戶端存儲數據

HTML5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲
localStorage 方法

localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。
```
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
```
　　

sessionStorage 方法

sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

C#後臺不能用其建立的對象，C#建立的對象這裏也用不了。
```
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
```
　　

HTML 5 應用程序緩存

什麼是應用程序緩存（Application Cache）？

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。

應用程序緩存爲應用帶來三個優點：
- 離線瀏覽 - 用戶可在應用離線時使用它們
- 速度 - 已緩存資源加載得更快
- 減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
<html manifest="/example/html5/demo_html.appcache">

頁面在斷網時也能訪問。

HTML 5 Web Workers

這是運行在後臺的JavaScript,他的運行不會影響頁面的性能。

使用
/example/html5/demo_workers.js

註釋：web worker 一般不用於如此簡單的腳本，而是用於更耗費 CPU 資源的任務。

Web Workers 和 DOM

因爲 web worker 位於外部文件中，它們沒法訪問下例 JavaScript 對象：

window 對象
document 對象
parent 對象

HTML 5 服務器發送事件

服務器後臺跟新後自動跟新到前臺

HTML5新的輸入類型

email -----------只能輸入郵箱地址，並加以驗證
url -----------只能輸入例如:http://www.baidu.com的鏈接，並加以驗證
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

有點意思的標籤

<legend>	定義 fieldset 元素的標題。
<fieldset>	定義圍繞表單中元素的邊框。
<footer>	定義 section 或 page 的頁腳。
<header>	定義 section 或 page 的頁眉。
<ins>	定義被插入文本。
<del>	定義被刪除文本。
<keygen>	定義生成密鑰。
<mark>	定義有記號的文本。
<meter>	定義預約義範圍內的度量。
<noframes>	定義針對不支持框架的用戶的替代內容。
<noscript>	定義針對不支持客戶端腳本的用戶的替代內容。
<ol>	定義有序列表。
<optgroup>	定義選擇列表中相關選項的組合。
<output>	定義輸出的一些類型。
<progress>	定義任何類型的任務的進度。進度條
<q>	定義短的引用。加「」
<source>	定義媒介源。
<audio>	定義聲音內容。
<video>	定義視頻。
<sup>	定義上標文本。
<track>	定義用在媒體播放器中的文本軌道。

HTML5新標籤

<bdi>	定義文本的文本方向，使其脫離其周圍文本的方向設置。
<mark>	定義有記號的文本。
<meter>	定義預約義範圍內的度量。
<progress>	定義任何類型的任務的進度。
<rp>	定義若瀏覽器不支持 ruby 元素顯示的內容。
<rt>	定義 ruby 註釋的解釋。
<ruby>	定義 ruby 註釋。
<time>	定義日期/時間。
<wbr>	定義視頻。
<datalist>	定義下拉列表。
<keygen>	定義生成密鑰。
<output>	定義輸出的一些類型。
<canvas>	定義圖形。
<figcaption>	定義 figure 元素的標題。
<figure>	定義媒介內容的分組，以及它們的標題。
<audio>	定義聲音內容。
<source>	定義媒介源。
<track>	定義用在媒體播放器中的文本軌道。
<video>	定義視頻。
<nav>	定義導航連接。
<command>	定義命令按鈕。
<header>	定義 section 或 page 的頁眉。
<footer>	定義 section 或 page 的頁腳。
<section>	定義 section。
<article>	定義文章。
<aside>	定義頁面內容以外的內容。
<details>	定義元素的細節。
<dialog>	定義對話框或窗口。
<summary>	爲 <details> 元素定義可見的標題。
<embed>	爲外部應用程序（非 HTML）定義容器。

新屬性

1.<input type="number" name="points" step="3" />// step 屬性規定輸入字段的合法數字間隔,（假如 step="3"，則合法數字應該是 -三、0、三、6，以此類推）
2.<input type="email" name="email" autocomplete="off/on" />//是否啓用輸入記憶，和自動完成輸入功能.off（打開）
3.<input type="text" name="lname" autofocus>//頁面加載時自動獲取焦點
4.<input type="url" list="url_list" name="link" />//將html5的下拉框<datalist id="url_list">綁定到文本框中。
5.<input type="search" name="user_search" placeholder="Search W3School" />//以灰色背景字提示該輸入的數據。
6. <input type="text" name="usr_name" required="required" />//不爲空的檢驗
-------------以上是input 相關的屬性
7. <p contenteditable="true">這是一段可編輯的段落。</p>//在網頁上能夠直接編輯該文字。
8. <p draggable="true">這是一個可拖動的段落。</p>//設置能夠拖動的段落
9. <element dropzone="copy|move|link">//拖動時產生一個複製副本或其餘。
10. #div_1{text-transform:capitalize;}//這個樣式可以使全部單詞首字母以大寫開頭

11.css中 !important的用法。 !important表明這重要的意思若有有相同的樣式會與這條執行剩下的不執行，ie6除外。

   #box {
           color:red !important;//ie6中不會執行改行，由於ie6不認識 !important，其餘瀏覽器會執行。
           color:blue;//ie6會運行這一行。
          }

---------------如下是JS面向對象---------------

封裝

以下圖是一個javascript構造函數（constructor ）（其實就是一普通的方法，可是在面向對象時理解成構造函數），其中封裝了Cat這個原型對象的屬性和方法。