整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這里我們創建一個填寫個人基本信息的表單，使用了表單元素有<input>輸入框、<datalist>選項列表、<textarea>文本框，通用的表單輸入類型有text、password、file、radio、checkbox、email、url、number、Date pickers。并為表單及表單元素設定了相應的屬性。代碼如下：
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。那什么又是HTML呢？HTML 是用來描述網頁的一種語言。HTML的上一個版本誕生于1999年。自從那以后，Web 世界已經經歷了巨變。HTML 指的是超文本標記語言： Hyper Text Markup Language。HTML 不是一種編程語言，而是一種標記語言。而標記語言是一套標記標簽 (markup tag)。HTML 使用標記標簽來描述網頁，HTML 文檔包含了HTML 標簽及文本內容，因此HTML文檔也叫做 web 頁面。
HTML5 是 W3C 與 WHATWG 合作的結果。W3C 致 的是World Wide Web Consortium，也就是萬維網聯盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表單和應用程序，而 W3C 專注于 XHTML 2.0。在 2006 年的時候，雙方決定進行合作，來創建一個新版本的 HTML。
新特性基于 HTML、CSS、DOM 以及 JavaScript；減少對外部插件的需求（比如 Flash）；更優秀的錯誤處理；更多取代腳本的標記；HTML5 應該獨立于設備；開發進程應對公眾透明。
用于繪畫的 canvas 元素；用于媒介回放的 video 和 audio 元素；對本地離線存儲得更好地支持；新的特殊內容元素，比如 article、footer、header、nav、section新的表單控件，比如 calendar、date、time、email、url、search。
專業的 HTML 編輯器來編輯 HTML：Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不過，我們同時推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學習 HTML 的好方法，高手們都是用記事本寫的~~~~
而本人使用的是Adobe Dreamweaver（下文中提到簡稱DW），大家可以自己嘗試各種編輯器，再選擇自己喜歡的。本教程是實用性類，不會長篇大論闡述理論，會留一些問題供大家去理解，不了解的話百度谷歌。
還需要的軟件就是瀏覽器的準備，大家肯定知道什么是瀏覽器啦，現在谷歌，微軟新版瀏覽器以及360等眾多瀏覽器都是支持查看網頁源代碼的。鼠標右鍵選擇查看源代碼即可。
學習資料推薦：
在本文中，需要理解的點，在下面講解中可能會混著講，所以大家要看完教程之后自己去總結。
首先打開DW，新建一個HTML文件，就是后綴是html結尾的文件。
用DW這樣的HTML專業軟件有個好處就是新建的文件已經自動寫好的一個HTML文件的基本結構。文檔標題在頁面中間上部的標題處可以修改，也可以保存后自己再修改。
保存名字為教程1，可以看到文件是這樣的。
之后，我們嘗試用記事本打開這個文件。
用記事本打開的樣子。跟DW打開是一樣。
在body部分輸入文字，內容隨意，然后保存。
再用瀏覽器打開，我這邊用的谷歌瀏覽器。打開之后可以看到如下圖所示。相信大家對HTML文件已經有了一點點概念了。
再回到DW打開，可以看到，文件下邊是代碼，上邊是結果。如果只看到代碼，這是因為在頁面左上角傳視圖的方式選擇。選擇拆分即可。
在DW中新建一個文件之后，你其實就已經看到一個HTML的基本結構了，這是我們剛才新建的教程1
紅色的矩形框內部的內容，我們稱為<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。
doctype 聲明是不區分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整網頁聲明類型 DOCTYPE 參考手冊。
<!DOCTYPE> 聲明之后就是 <html> .....</html> 中間的那些我們暫時忽略。這兩個尖括號之間的內容就告訴了瀏覽器，這段內容是html頁面的內容。
在html頁面中，哪些是被顯示的，哪些是代碼？相信通過第一節大家已經有所認識了，在HTML中，標簽是通過"< >"表現的。而每一個標簽都以對應的“</ >”來結束，如<html></html>,<head></head>,<title></title>.....。(當然也有例外，之后再說)
接下來就是在 <html> ，</html>之間編輯整個頁面的頭部和身體了.
頭部用<head></head>來表示，之間的內容一般包含meta 和title，meta大家可以自己去了解，如果沒有這一塊，顯示可能會出現亂碼。一些預先的設置都會放在頭部里，樣式表等，就像是C語言程序中的頭文件。title標簽就是整個網頁的標題。
編輯好了頭部，就進入頁面的身體啦。用body標簽來表示很直觀，也不需要刻意去記了。在實例1中body的內容很簡單，只有一行文字，之后的內容也就是教大家如何將body豐富起來~~
1.HTML 標題<h1>-<h6>
2.HTML 段落<p>
3.HTML <br/>
在 HTML 文檔中，標題很重要。
標題是通過 <h1> - <h6> 標簽進行定義的.
<h1> 定義最大的標題。 <h6> 定義最小的標題。
看看實例效果
關于查看文件的效果，大家可以保持瀏覽器打開，當DW中保存過文件以后，在瀏覽器中刷新一下，就可以看到效果。
HTML 可以將文檔分割為若干段落。段落是通過 <p> 標簽定義的。在<p> </p>中輸入如下內容，并在瀏覽器打開看一下效果。
如果我縮小瀏覽器的寬度，效果如下。
現在大家可以發現，html語言是一種排版語言，他會保證你可以看到內容的全部，隨著瀏覽器的變化，文字排版也會跟著變化。你自己敲的空行，是不會顯示出來。那么如何自己定義斷行呢？介紹一個新的標簽<br/>
英文brake的縮寫，很顯然，就是打斷的意思。因為這個標簽是放在內容的結尾的，所以它的開始就是結束，因此他沒有結束標簽，所以沒有</br>,只有<br/>,大家要記清楚~
這時就能看到斷行啦。
<hr> 標簽在 HTML 頁面中創建水平線。<hr>標簽與<br>標簽一樣，沒有結束標簽。所以也可以寫成<hr/>.
在設置完水平線之后，我們還可以及設置水平線的寬度。
代碼<hr width=50%> 這里的50%是指頁面的50%，也可以設置一個具體的數值,比如50，是指50個像素，大家可自行嘗試。
這里的width就是這個標簽的屬性。像這樣的屬性值，還有，align，size。但不同的效果，大家可以試試。這些效果學了CSS之后，都建議通過CSS樣式表來實現。
<hr width=50>設定絕對長度；
<hr align=left>設置左對齊，當然也可以設置右對齊。
<hr size=1>這表示線寬；
曾有有一段時間屬性值“=”后面是需要加引號的，<hr width=“50”>，但現在所有瀏覽器都支持不加引號，大家看到有引號不要覺得是錯誤的。
<標簽名 屬性名=color> - 指定顏色
比如我可以給水平線設置顏色
在DW中輸入color=“之后會彈出顏色選擇，可以只選擇顏色，DW會自動生成顏色代碼。
代碼為：
<h3>第四節 水平線</h3>
<hr width=90% color=”#FF0000“>
插入一條水平線
效果如下：
我們會舉例說一些，但是在學習CSS之后，字體樣式等于格式有關的功能，都會通過CSS樣式表來實現。所以，這里大家只要稍微了解下就好。
舉幾個例子
加粗<b></b>；斜體<i></i>；下劃線<ins></ins>；變小<small></small>；在html中，標簽是可以嵌套的。大家可以仔細對比，以下代碼，和效果。
以下標簽的顯示結果是由瀏覽器和樣式表決定的，這些標簽標識的意思而不是效果。這句話可能有一些難以理解，大家學習久了就會有所體會。
<em>強調</em>；<strong>著重</strong>；<dfn>definition</dfn>；<code>表示這一行是源代碼，僅用于小部分代碼。</code>；<samp>例子代碼</samp>；<kbd>用戶輸入</kbd>；<bar>變量</bar>；<site>引用</site>
我們試著輸入這些代碼。
掌握幾個標簽<ul><li><ol><dl><dt><dd>，標簽是可以嵌套的，大家自己可以試一試。
無序列表 <ul>和<li>標簽
<ul>un-odered list <li>list item,一項
將 <ul> 標簽與 <li> 標簽一起使用，創建無序列表。將<ol>標簽與<li>標簽一起使用，創建有序列表。
代碼：
ol和ul可以嵌套自動縮進ul縮進每層標記不一樣會有實心和空心等不同的標記。
<dl>、<dd>和<dt>標簽
定義：<dl> 標簽定義了定義列表（definition list）。<dd> 在定義列表中定義條目的定義部分。<dt> 標簽定義了定義列表中的項目（即術語部分）。
用法：<dl> 標簽用于結合 <dt> （定義列表中的項目）和 <dd> （描述列表中的項目）。
舉例代碼：
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
瀏覽器中的效果如下：
<table width="80%" border="1"> <tr> <th>www.dreamdu.com</th> <th>.com域名的數量</th> <th>.cn域名的數量</th> <th>.net域名的數量</th> </tr> <tr> <td>2003年</td> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>
由于篇幅有限，今天的內容就介紹這么多。如果你有什么想法或者建議，歡迎評論交流！
特性
1.語意特性,添加<header><header/><nav><nav>等標簽
2.多媒體， 用于媒介回放的 video 和 audio 元素
3.圖像效果，用于繪畫的 canvas 元素，svg元素等
4.離線 & 存儲,對本地離線存儲的更好的支持,local Store,Cookies等
5.設備兼容特性 ，HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，
6.連接特性，更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網頁游戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能
7.性能與集成特性，HTML5會通過XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作
新增標簽
1.多媒體：<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表單元素：<datalist> ,<output> , <keygen>
3.新文檔節段和綱要:<header>頁面頭部、<section>章節、<aside>邊欄、<article>文檔內容、<footer>頁面底部、<section>章節、<aside>邊欄、<article>文檔內容、<footer>頁面底部等
使用html5shiv可以解決ie低版本不兼容的問題，只需要在head中加上,當版本低于IE9時，瀏覽器會加載html5.js腳本，使得支持html5的新功能，也可以將腳本文件下載到本地
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--></head>localStorage.setItem(key,value)如果key存在時，更新valuelocalStorage.getItem(key)如果key不存在返回nulllocalStorage.removeItem(key)一旦刪除，key對應的數據將會全部刪除localStorage.clear() 使用removeItem逐個刪除太麻煩，可以使用clear,執行的后果是會清除所有localStorage對象保存的數據*請認真填寫需求信息，我們會在24小時內與您取得聯系。
