html4與html5的區別及html5的一些新特性

時間 2019-11-13

標籤 html4 html html5 區別一些特性欄目 HTML 简体版

原文原文鏈接

區別

1.html5語法的改變javascript

HTML5簡化了不少細微的語法，例如：css

1.1doctype的聲明;html

html4:html5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         

"http://www.w3.org/TR/html4/loose.dtd">

html5:java

<!DOCUTYPE html>

1.2字符編碼:node

html4:ios

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

html5:css3

<meta charset="utf-8" />

HTML5的語法兼容HTML4和XHTML1，但不兼容SGML(標準通用標記語言)。html5有向下兼容 web

的特性，他能夠完整的顯示html4的內容;正則表達式

1.3元素標記

不容許寫結束標記的元素：br、embed、hr、img、input、link、meta、param。正確格式:<元素/>

<br/>

1.4具備boolean值的屬性

<!--只寫屬性不寫屬性值，屬性爲true-->
<input type="checkbox" checked /><br/>
<!--不寫屬性，屬性爲false-->
<input type="checkbox" /><br/>
<!--屬性值=屬性名，屬性爲true-->
<input type="checkbox" checked="checked" /><br/>
<!--屬性值=空字符串，屬性爲true-->
<input type="checkbox" checked="" />

1.5省略引號

<input type=button value=點擊>

新特性

2.全局屬性（全部標籤均可以使用的屬性）

1.contentEditable屬性.容許用戶對文本進行編輯,是布爾值類型，true爲可編輯，false爲不可編輯，默認爲true
2.designMode屬性.規定頁面是否可編輯，值爲on/off,on爲頁面可編輯，off頁面不可被編輯，必須在javascript中使用
3.hidden屬性
4.spellcheck屬性.針對input和textarea標籤的文本拼寫語法檢查，拼寫錯誤會提示
5.tabindex屬性.規定按tab鍵以後的選擇順序，默認按tab鍵對連接元素和form表單有用，
經過tabindex屬性可使其餘標籤也能夠按Tab鍵獲取焦點，值爲-1不會獲取焦點

3.HTML5新增元素

3.1 新增的主體結構元素:artical,aside,section,nav,time,pubdate元素

artical標籤一般表示文檔，頁面中獨立的部分，一篇博客，文章或其餘獨立的部分，一般能夠用來表示插件，可嵌套

<!--artical標籤一般表示文檔，頁面中獨立的部分，一篇博客，文章或其餘獨立的部分，一般能夠用來表示插件，可嵌套-->
    <article>
        <header>
            <h1>這裏是標題</h1>
            <p>文本段落</p>
        </header>
        <artical>

            <h3>這裏是評論區域</h3>
            <p>正文在這裏</p>
        </artical>
        <footer>底部文本</footer>
    </article>

artical

aside標籤一般表示當前頁面或文章的附屬信息，側邊欄，廣告彈出框等，一個獨立的部分

<!--aside標籤一般表示當前頁面或文章的附屬信息，側邊欄，廣告彈出框等，一個獨立的部分-->
<aside>
    <nav>
        <h3>評論</h3>
        <ul>
            <li>好好學習</li>
            <li>每天向上</li>
        </ul>
    </nav>
</aside>

aside

section內有標題有內容，強調分塊或分段

<!--section內有標題有內容，強調分塊或分段，artical元素強調獨立性-->
<section>
    <h1>標題</h1>
    <p>內容</p>
</section>

section

nav主要用來作頁面導航

<nav>
    <ul>
        <li><a href="#">導航1</a></li>
        <li><a href="#">導航2</a></li>
        <li><a href="#">導航3</a></li>
    </ul>
</nav>

nav

time元素表示時間

<time datetime="2017-2-4">2017-2-4</time>
<!--T表示時間-->
<time datetime="2017-2-4T17:00">2017-2-4</time>
<!--Z國際標準UTC時間-->
<time datetime="2017-2-4T17:00Z">2017-2-4</time>
<!--+表示時差-->
<time datetime="2017-2-4T17:00+06:00">2017-2-4</time>

time

pubdate表示發佈時間

<!--pubdate表示發佈時間-->
<time datetime="2017-2-24" pubdate>2017-2-24</time>

3.2 新增的非主體結構元素:address、header、hgroup、footer元素

address元素用來在文檔中呈示聯繫信息，包括聯繫人，聯繫地址，郵箱，電話等聯繫信息

header元素(一個頁面能夠有多個):

<header>
   <nav>
     <ul>
        <li><a href="#">導航1</a></li>
        <li><a href="#">導航2</a></li>
        <li><a href="#">導航3</a></li>
     </ul>
  </nav>
</header>

hrader

hgroup標籤用於歸類同一個標題下的子標題

<header>
    <hgroup>
        <h1>大標題</h1>
        <h2>小標題</h2>
    </hgroup>
    <p>這是正文</p>
</header>

hgroup

footer元素：

<footer>
    <ul>
        <li><a href="#">版權信息</a></li>
        <li><a href="#">站點地圖</a></li>
        <li><a href="#">聯繫方式</a></li>
    </ul>
</footer>

footer

網頁排版:

<body>
<header>
    <h1>大標題</h1>
    <nav>
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">幫助</a></li>
        </ul>
    </nav>
</header>
<article>
    <hgroup>
        <h1>大標題</h1>
        <h2>小標題</h2>
    </hgroup>
    <p>文本正文</p>
    <section>
        <div>
            <article>
                <h3>評論標題</h3>
                <p>評論內容</p>
            </article>
        </div>
    </section>
</article>
<footer>
    <small>版權內容...</small>
</footer>
</body>

View Code

4.HTML5新增表單元素與屬性

form屬性：

<!--從屬form表單的標籤脫離form標籤，添加css樣式更方便-->
<form id="testform">
    <input type="text">
</form>
<textarea form="testform"></textarea>

form屬性

formaction屬性:

<!--HTML4中，一個表單內的全部元素只能經過表單的action屬性被統一提交到另外一個頁面，
在HTML5中能夠爲全部的提交按鈕增長不一樣的formaction屬性，使單擊不一樣按鈕能夠將表單提交到不一樣頁面-->
<form>
    <input type="submit" name="n1" value="v1" formaction="../3/address.html">按鈕1</input>
    <input type="submit" name="n1" value="v2" formaction="../3/hgroup.html">按鈕2</input>
    <input type="submit" name="n1" value="v3" formaction="../3/paiban.html">按鈕3</input>

formaction屬性

formmethod屬性:

<form id="testform">
    <!--formmethod屬性對每個表單元素分別指定不一樣的提交方法-->
    <input type="submit" value="v1" name="n1" formmethod="post" formaction="../3/address.html">
    <input type="submit" value="v2" name="n2" formmethod="get" formaction="../3/footer.html">
</form>

formmethod屬性

formtarget屬性:

<form>
    <input type="submit" name="n1" value="v1" formtarget="_blank" formaction="../3/address.html">按鈕1</input>
    <input type="submit" name="n1" value="v2" formtarget="_self" formaction="../3/hgroup.html">按鈕2</input>
    <input type="submit" name="n1" value="v3" formtarget="_parent" formaction="../3/paiban.html">按鈕3</input>
    <input type="submit" name="n1" value="v3" formtarget="_top" formaction="../3/paiban.html">按鈕4</input>
    <input type="submit" name="n1" value="v3" formtarget="framename" formaction="../3/paiban.html">按鈕5</input>
</form>

formtarget屬性

formenctype屬性:

<form>
    <!--formmethod屬性對錶單元素分別指定不一樣的編碼方式-->
    <input type="text" formenctype="text/plain">
    <input type="text" formenctype="multipart/form-data">
    <input type="text" formenctype="application/x-www-form-urlencoded">
</form>

formenctype屬性

autofocus屬性:

<form>
    <!--文本框，選擇框，按鈕空間加上autofocus屬性，當頁面打開時，該控件自動得到焦點-->
    <input type="text">
    <input type="text" autofocus>
</form>

autofocus屬性

required屬性:

<form>
    <!--required屬性，若是輸入框內爲空，就不能提交，會提示必須輸入字段-->
    <input type="text" required="required">
    <button type="submit">提交</button>
</form>

required屬性

list元素:

<!--list屬性相似於選擇框，當用戶想要設定的值不在選擇列表內可自行輸入，屬性值爲某個datalist元素的id-->
<input type="text" list="greetings">
<datalist id="greetings">
    <option value="html學習">html學習</option>
    <option value="css學習">css學習</option>
    <option value="ios學習">ios學習</option>
</datalist>

list屬性

下拉菜單:

        <select name="" id="">
            <option value="">html5</option>
            <option value="">css3</option>
            <option value="">javascript</option>
        </select>

View Code

control屬性:

<head>
    <meta charset="UTF-8">
    <title>control屬性</title>
    <script>
        //h5中，能夠在標籤內部放置一個表單元素，而且經過該標籤的control屬性來訪問該表單元素;
        function setValue() {
            var label=document.getElementById("label");
            var textbox=label.control
            textbox.value="100100"
        }
    </script>
</head>
<body>
<form>
    <label id="label">
        郵編:
        <input id="input_text" type="text" maxlength="6">
        <small>請輸入六位郵編</small>
    </label>
    <input type="button" value="默認郵編" onclick="setValue()">
</form>
</body>

control屬性

建立節點:

<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">請點擊按鈕向列表插入一個項目。</p>
<button onclick="myFunction()">試一下</button>
<script>
    function myFunction()
    {
        var newItem=document.createElement("LI")
        var textnode=document.createTextNode("Water")
        newItem.appendChild(textnode)

        var list=document.getElementById("myList")
        list.insertBefore(newItem,list.childNodes[0]);
    }
</script>
<p><b>註釋：</b><br>首先請建立一個 LI 節點，<br>而後建立一個文本節點，<br>而後向這個 LI 節點追加文本節點。<br>最後在列表中的首個子節點以前插入此 LI 節點。</p>
</body>

View Code

labels節點:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>labels節點</title>
    <script>
        function validate(){
            var name=document.getElementById("name");
            var button=document.getElementById("button");
            var form=document.getElementById("form");
            if(name.value.trim()==""){
                 var label=document.createElement("label");
                label.setAttribute("for","name");
                form.insertBefore(label,button);
                name.labels[1].innerHTML="請輸入姓名";
                name.labels[1].setAttribute("style","color:red;font-size:8px;padding:10px;");
            }
        }
    </script>
</head>
<body>
<form id="form">
    <label id="label" for="name">姓名</label>
    <input id="name" type="text">
    <input type="button" value="驗證" onclick="validate()" id="button">
</form>
</body>
</html>

View Code

placeholder屬性:

<input type="text" placeholder="請輸入...">

autocomplete標籤:

<body>
<!--autocomplete 屬性規定表單是否應該啓用自動完成功能。
autocomplete屬性值爲on/off/空，默認空爲on
自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。-->
<input type="text" list="greetings" autocomplete="off">
<datalist id="greetings">
    <option value="html學習">html學習</option>
    <option value="css學習">css學習</option>
    <option value="ios學習">ios學習</option>
</datalist>
<p><b>註釋：</b>autocomplete 屬性適用於 &lt;form&gt;，以及下面的 &lt;input&gt; 類型：text, search, url, telephone, email, password, datepickers, range 以及 color。</p>
</body>

View Code

image標籤的寬高屬性:

<form>
    <label>姓名</label>
    <input type="text">
    <input type="image" src="../image/1.jpg" width="40px" alt="圖片">
</form>

View Code

checkbox屬性:

<body>
<!--checkbox有三種狀態，選中，未選中，及不明選中狀態(indeterminate)-->
<input type="checkbox" id="input" indeterminate>選中測試
<script>
    var input=document.getElementById("input");
    input.indeterminate=true;
</script>
</body>

View Code

pattern正則表達式:

    <form action="">
        <!--pattern正則表達式-->
        請輸入<input type="text" pattern="[a-v]{4}">
        <input type="submit" value="提交">
    </form>

View Code

selectionDirection屬性:

<body>
    <form>
        <input type="text" name="text">
        <input value="點擊" type="button" onclick="clickBtn()">
    </form>
    <script>
        /*selectionDirection屬性獲取用戶選中文本的方向*/
        function clickBtn(){
            var text=document.forms[0]["text"];
            direction=text.selectionDirection;
            alert(direction)
        }
    </script>
</body>

View Code

五、HTML5 改良的 input 元素的種類

5.1表單驗證

<body>
    <form id="testform" onsubmit="test_submit()">
        <label for="email">郵箱</label>
        <input type="email" name="email" id="email">
        <input type="submit" value="提交">
    </form>
    <script>
        function test_submit() {
            var email=document.getElementById("email");
            if (email.value==""){
                alert("請輸入郵箱地址");
                return false;
            }
            // 調用checkValidity()方法執行輸入校驗
            else if(!email.checkValidity()){
                alert("請輸入正確的郵箱地址");
                return false;
            }
        }
    </script>
</body>

checkValidity()方法執行輸入校驗

5.2 type類型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <!--url類型-->
        <input type="url" name="url" value="http://www.baidu.com">
        <input type="submit" value="提交">
    </form><br/>
    <form>
        <!--email類型-->
        <input type="email" name="email" value="956600450@qq.com">
        <input type="submit" value="提交">
    </form><br/>
    <!--date類型-->
    <label for="meeting">培訓日期：</label><input id="meeting" type="date" value="2017-02-24"/><br/><br/>
    <!--time類型-->
    <input type="time" name="time" value="10:00"><br/><br/>
    <!--datetime類型(UTC國際標準時間)-->
    <input type="datetime" name="datetime" value="10:00"><br/><br/>
    <!--datetime-local類型(本地日期時間)-->
    <input type="datetime-local" name="datetime-local"><br/><br/>
    <!--month類型-->
    <input type="month" name="month" value="2017-02-06"><br/><br/>
    <!--week元素-->
    <input type="week" name="week"><br/><br/>
    <!--number元素-->
    <input type="number" name="number" value="10" min="10" max="30" step="10"><br/><br/>
    <!--計算器(valueAsNumber),valueAsNumber屬性很輕鬆地設置和讀取該元素中的數值-->
    <input type="number" id="num1">+
    <input type="number" id="num2">=
    <input type="number" id="result" readonly>
    <input type="button" id="button" onclick="bun()" value="計算">
<script>
    function bun() {
        var num1=document.getElementById("num1");
        var num2=document.getElementById("num2");
        var result=document.getElementById("result");
        result.valueAsNumber=num1.valueAsNumber+num2.valueAsNumber;
    }
</script>
    <!--range屬性只容許輸入必定範圍內的數值，可設置最大最小及每次拖動步數-->
    <br/><br/>
    <input type="range" name="range" step="5" min="0" max="100" value="20"><br/><br/>
    <!--search類型-->
    <input type="search"><br/><br/>
    <!--tel類型-->
    <input type="tel"><br/><br/>
    <!--color類型-->
    <input type="color" number="color" onchange="document.body.style.backgroundColor=document.getElementById('colorContent').textContent=this.value;">
    <span id="colorContent"></span>
    <br/><br/>
    <!--output元素的追加-->
    <input type="range" value="15" min="0" max="100" step="5" id="range1" onchange="value_change()">
    <output id="output1">15</output>
    <script>
        function value_change() {
            var range1=document.getElementById("range1");
            document.getElementById("output1").value=range1.value
        }
    </script>
</body>
</html>

type

5.3計算器

<body>
<!--計算器2-->
<input type="number" id="num1">+
<input type="number" id="num2">=
<input type="number" id="result" readonly>
<input type="button" id="button" onclick="bun()" value="計算">
<script>
    function bun() {
        var num1=document.getElementById("num1");
        var num2=document.getElementById("num2");
        var result=document.getElementById("result");

        result.valueAsNumber=add(num1.valueAsNumber,num2.valueAsNumber);
    }
    function add(a,b) {
        return a+b;
    }
</script>
</body>

計算器

5.4 radio單選按鈕的使用

    <form>
        <!--radio單選按鈕必須有個相同的name才能算一組-->
        你是男生仍是女生?
        <br/>女生<input type="radio" name="sex"x>
        男生<input type="radio" name="sex">
    </form>

View Code

六、新增的頁面元素

6.1 cite元素

    <!--cite元素主要表示做品，一本書，一部電影，一首歌等的標題，可在頁面中詳細引用也可提一下-->
    <h3>cite元素</h3>
    <p>我最近想看電影<cite>功夫瑜伽</cite></p>

6.2 small元素

    <!--small元素標識小字印刷體版權等相關法律信息-->
    <small>這裏能夠寫版權等</small>

6.3 details元素和summary元素

<body>
    <!--details元素和summary元素(details元素表示該元素有內部元素可被展開隱藏顯示，有個布爾值屬性open)
    summary元素是details元素的從屬元素-->
    <details id="detail" onclick="detail_on()">
        <summary>好看是電影在這裏</summary>
        <p id="p1">我就是好看的電影</p>
    </details>

    <script>
        function detail_on() {
            var p=document.getElementById("p1");
            if(detail.open){
                p.style.visibility="hidden";
            }else{
                p.style.visibility="visible";
            }
        }
    </script>
</body>

View Code

6.4 figure元素

<body>
    <!--figure元素是一種組合元素，帶有其標題，表示網頁上獨立的內容，可表示圖片，統計圖，代碼示例，音頻，視頻插件等
    figcaption元素是figure的標題，一個figure只能有一個figcaption標題元素-->
    <figure>
        <img src="../image/1.jpg" alt="圖片">
        <img src="../image/2.jpg" alt="圖片">
        <img src="../image/3.jpg" alt="圖片">
        <figcaption>圖片</figcaption>
    </figure>
</body>

View Code

6.5 mark元素

    <!--mark元素表示突出高亮顯示的內容-->
    <p>誰比較突出，就是<mark>我</mark></p>

6.6progress元素

<body>
    <!--progress元素表明任務完成的進度等-->
    <section>
        <h3>progress進度</h3>
        <p>完成的百分比<progress id="pro" value="0" max="100"></progress></p>
        <input type="button" value="點擊" onclick="btn()">
    </section>
    <script>
        function btn() {
            var i=0;
            function open(){
                if(i<100){
                    i++;
                    newPogress(i);
                }
            }
            //setInterval定時器
            setInterval(open,200);
        }
        function newPogress(value_p) {
            var pro=document.getElementById("pro");
            pro.value=value_p;
        }
    </script>
</body>

View Code

7.列表的使用

ul無序列表:

<!--ul type類型有disc(實心圓，默認),circle(空心圓，嵌套二級默認),square(實方塊)-->
<ul type="">
    <li>html5</li>
    <li>css3</li>
    <li>javascript</li>
</ul>

View Code

ol有序列表:

<!--ol有序列表type類型有A、a、I、i，默認爲數字，start屬性表示從哪一個數字開始,reversed倒數-->
<ol start="5">
    <li>html5</li>
    <li>css3</li>
    <li>javascript</li>
</ol>

View Code

ol li ul嵌套列表:

<!--ol li ul嵌套-->
<ol>
    <li>動物
        <ul>
            <li>貓</li>
            <li>狗</li>
        </ul>
    </li>
    <li>植物
        <ul>
            <li>花</li>
            <li>草</li>
        </ul>
    </li>
    <li>生物
        <ul>
            <li>魚</li>
            <li>大樹</li>
        </ul>
    </li>
</ol>

View Code

dl自定義列表:

<!--dl dt dd列表-->
<dl>
    <dt>標題</dt>
    <dd>註釋</dd>
    <dt>標題</dt>
    <dd>註釋</dd>
</dl>

View Code

8.table表格

<!--cellpadding內容距單元格邊框間距
        cellspacing單元格間距
        align對齊方式
        colspan跨列
        rowspan跨行-->
    <table border="1" bgcolor="#f0f8ff" cellpadding="10" cellspacing="0" align="center" style="text-align: center">
        <caption>標題</caption>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
            <th>表頭4</th>
        </tr>
        <tr>
            <td colspan="2">單元格1</td>
            <td>單元格1</td>
            <td>單元格1</td>
        </tr>
        <tr>
            <td>單元格2</td>
            <td>單元格2</td>
            <td rowspan="3">單元格2</td>
            <td>單元格2</td>
        </tr>
        <tr>
            <td>單元格3</td>
            <td>單元格3</td>
            <td>單元格3</td>
        </tr>
        <tr>
            <td>單元格4</td>
            <td>單元格4</td>
            <td>單元格4</td>
        </tr>
    </table>

View Code

9.內聯框架

iframe元素:

<!--iframe 元素會建立包含另一個文檔的內聯框架（即行內框架-->
<iframe src="test.html" frameborder="0" width="400px" height="400px"></iframe>

10.實體

帶有特殊字符的標籤不能被展示出來，要經過html實體的方式表達，如：

&lt;html&gt;表示<html>

11.audio音頻元素

<audio src="../../audio/1.mp3" controls="controls">您的瀏覽器暫不支持播放</audio>
<br/><br/><br/>
<!--方法2，自定義界面顯示-->
<audio id="audio" src="../../audio/2.mp3">您的瀏覽器暫不支持播放</audio>
<button onclick="clickA()">暫停/播放</button>
<script>
    var audio=document.getElementById("audio")
    function clickA() {
        //pased:暫停狀態
        if(audio.paused){
            audio.play();
        }else{
            //pase():暫停方法
            audio.pause();
        }
    }
</script>

View Code

12.video視頻元素

<body>
<video controls="controls">您的瀏覽器暫不支持播放
    <source  src="../../audio/1.mp4">
    <source  src="../../audio/1.ogg">
</video>
<br/><br/><br/>
<!--方法2，自定義界面顯示-->
<video id="audio" src="../../audio/1.mp4">您的瀏覽器暫不支持播放</video>
<button onclick="clickA()">暫停/播放</button>
<script>
    var audio=document.getElementById("audio")
    function clickA() {
        //pased:暫停狀態
        if(audio.paused){
            audio.play();
        }else{
            //pase():暫停方法
            audio.pause();
        }
    }
</script>
</body>

View Code

13.拖放

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1 {width:300px; height:300px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>

<p>請把圖片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="../../image/1.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>

View Code

14.web存儲

以前，都是由cookie完成數據存儲的，可是，cookie不適合大量數據的存儲，由於它們由每個對服務器請求來傳遞，使得cookie速度很慢且效率不高。

14.1localStorage數據存儲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web存儲1</title>
    <script>
        //1.localStorage數據存儲，刷新瀏覽器數據依然存在
        // 特色:localStorage存儲的數據沒有時間限制，不管多久以後依然可用，瀏覽器退出數據依然還在;
        var inp;
        var btn;
        window.onload=function(){
            inp=document.getElementById("inp");
            //若是localStorage.text不爲空，則輸出它自己;
            if(localStorage.text){
                inp.value=localStorage.text;
            }
            btn=document.getElementById("btn");
            btn.onclick=function(){
                //alert(inp.value);
                //點擊按鈕則將輸入框中內容做爲本地存儲內容輸出;
                localStorage.text=inp.value;
            }
        }
    </script>
</head>
<body>
    <!--input輸入框中輸入內容，點擊save按鈕，自動保存當前輸入框中內容爲本地存儲，-->
    <input type="text" id="inp">
    <button type="button" id="btn">save</button>
</body>
</html>

View Code

14.2 sessionStorage數據存儲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web存儲2</title>
    <script src="sessionStorage.js">
        //2.sessionStorage數據存儲，刷新瀏覽器數據依然存在
        // 特色:瀏覽器退出數據清除
        var num=0;
        var span;
        var btn1;
        window.onload=function () {
            span=document.getElementById("span");
            if (sessionStorage.num){
                num=sessionStorage.num;
            }else{
                num=0;
            }
            btn1=document.getElementById("btn1");
            btn1.onclick=function(){
                num++;
                sessionStorage.num=num;
                showNumber();
            };
        };
        function showNumber(){
            span.innerHTML=num;
        }
    </script>
</head>
<body>
    <span id="span">0</span>
    <button type="button" id="btn1">add</button>
</body>
</html>

View Code

15.canvas圖形繪製標籤

<canvas> 標籤只是圖形容器，必須使用腳原本繪製圖形。

<!DOCTYPE HTML>
<html>
<body>
<!--經過 canvas 元素來顯示一個紅色的矩形：-->
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);

</script>

</body>
</html>