整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
增的結構標簽
section元素
表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面的其他部分。可以和h1、 h2...等元素結合起來使用，表示文檔結構。
例：HTML5中<section>...</section>;HTML4中<div>...</div>。
article元素
表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章。
aside元素
表示article元素內容之外的、與article元素內容相關的輔助信息。
header元素
表示頁面中一個內容區塊或真個頁面的標題。
hgroup元素
表示對真個頁面或頁面中的一個內容區塊的標題進行組合。
footer元素
表示整個頁面或頁面中一個內容區塊的腳注。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯系信息。
nav元素
表示頁面中導航鏈接的部分。
figure元素
表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。
figure 定義媒介內容的分組, 以及它們的標題。
figcaption 定義 figure 元素的標題。
例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>HTML4中常寫作
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>新增的其他元素
video元素
定義視頻。像電影片段或其他視頻流。例：
<video src="movie.ogg" controls="controls">video元素</video>HTML4中寫法：
<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>audio元素
定義音頻。如音樂或其他音頻流。例：
<audio src ="someaudio.wav">audio元素</audio>html4中寫法：
<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>embed元素
用來嵌入內容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />
HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>
mark元素
主要用來在視覺上向用戶呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜索結果中高亮顯示搜素關鍵字。
HTML5<mark></mark>;HTML4 <span></span>。
progress元素
表示運行中的進程，可以使用progress元素顯示JavaScript中耗時時間函數的進程。等待中……、請稍后等。<progress></progress>。
time元素
表示日期或時間，也可以兩者同時。
ruby元素
定義 ruby 注釋(中文注音或字符)。
與 <ruby> 以及 <rt> 標簽一同使用。ruby 元素由一個或多個字符(需要一個解釋/發音)和一個提供該信息的 rt 元素組成，
還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。
<ruby>
漢朝<rt><rp>(</rp>西漢和東漢<rp>)</rp></rt>
</ruby>
rt元素
定義字符(中文注音或字符)的解釋或發音。
rp元素
在 ruby 注釋中使用, 以定義不支持 ruby 元素的瀏覽器所顯示的內容。
wbr元素
表示軟換行。與br元素的區別：br元素表示此處必須換行；wbr表示瀏覽器窗口或父級元素足弓寬時(沒必要換行時)，
不換行，而寬度不夠時主動在此處換行。
canvas元素
定義圖形，比如圖表和其他圖像。<canvas> 元素只是圖形容器(畫布)，必須使用腳本來繪制圖形。
<canvas id="myCanvas"></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>command元素 各版本瀏覽器支持有問題
表示命令按鈕，比如單選按鈕、復選框或按鈕。
只有當 command 元素位于 menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵。。
<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>details標簽
用于描述文檔或文檔某個部分的細節 。
可與 summary 標簽配合使用，summary可以為 details 定義標題。
標題是可見的，用戶點擊標題時，會顯示出 details。summary應該是details的第一個子元素。
<details>
<summary>迪麗熱巴</summary>
<p>迪麗熱巴（Dilraba），1992年6月3日出生于新疆烏魯木齊市，中國內地影視女演員。</p>
</details>fieldset標簽
組合表單中的相關元素
fieldset 標簽用于從邏輯上將表單中的元素組合起來。
legend 標簽為 fieldset 元素定義標題。
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>datalist標簽
定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來綁定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>datagrid標簽 如何用？
定義可選數據的列表。datagrid 作為樹列表來顯示。
如果把 multiple 屬性設置為 true，則可以在列表中選取一個以上的項目。
keygen標簽 如何用?
標簽規定用于表單的密鑰對生成器字段。
當提交表單時，私鑰存儲在本地，公鑰發送到服務器。
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>output標簽
定義不同類型的輸出，比如腳本的輸出。
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>source標簽
標簽為媒介元素(比如 <video> 和 <audio>)定義媒介資源。
menu標簽
定義菜單列表。當希望列出表單控件時使用該標簽。注意與nav的區別，menu專門用于表單控件。
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>abbr: 標記一個縮寫
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
顯示結果
The PRC was founded in 1949.
mark標簽
定義有記號的文本。
<mark>有記號的文本</mark>
progress 定義任何類型的任務的進度。
<progress min="0" max="100" value="60"></progress>
中國，北京，2016年5月13日]由華為和云適配聯合主辦，主題為"HTML5的未來，就是你！"的HTML5移動應用開發大賽頒獎典禮今日在北京圓滿落幕。本次大賽設計的初衷即希望為廣大HTML5開發企業和個人提供一個交流和展示的平臺，讓開發者們在HTML5移動應用上盡情"燒腦"。對于優秀的作品和個人，華為和云適配將給予大賽獎金之外更為廣闊的展示空間和發展機會，與開發者共享移動辦公的藍海。
本次大賽自2015年11月啟動，歷時5個多月的時間。期間華為組織專業講師在線與開發者共同探討HTML5技術原理；通過線下沙龍的方式邀請行業領袖與開發者、創客面對面分享前沿技術理念，深入剖析市場機遇，現場參與人數達到150多位。到2016年4月作品提交截止日，大賽共吸引400多個開發團體及個人參加。收到的參賽作品涵蓋了備忘錄、計算器等基礎辦公工具，企業IM、電子簽章等通用行業應用，面向快消、職信監督等垂直行業應用。大賽評委會經過多輪深入討論和細致評審，評選出20個優秀作品入圍，并在今天現場頒獎。20位優秀作品的作者受邀齊聚一堂，共同見證、分享收獲的時刻。
個人開發者鄭張寬所設計的企業IM應用"PenPen"榮獲此次大賽一等獎，斬獲50000元現金大獎。山西百城科技的"BB商務會簽"和永中軟件的"永中DCS"應用則拿下獎金為20000元的二等獎。深圳前海圓舟科技的"柚客"、長春我們倆文化傳播公司的"職業信用監督體系"和個人開發者李文祥的"i記事"榮獲獎金為8000元的三等獎。其他入圍作品的作者也在現場通過抽獎的方式獲得Mate8、華為Watch、手環等豪華禮品。為了給開發者充分展現自我的機會，現場還安排了開發者故事分享和優秀作品路演環節，充分展現參賽開發者強大的創新能力，并通過作品展示了HTML5技術在移動化開發中的獨特優勢。
典禮現場，華為邀請到了云適配CEO陳本峰、白鷺時代聯合創始人張翔、LAYABOX創始人謝成鴻、火速移動CEO趙九州、致遠軟件副總裁李平等HTML5移動應用開發領域領軍人物，就HTML5技術的應用之道進行了深入討論。相對于傳統的基于原生API的開發方式，HTML5在跨平臺方面具有天然的優勢，能夠更好地解決企業移動化過程中開發和升級維護成本高、信息割裂等問題。在未來，HTML5必將滿足從普通用戶的生活娛樂，到企業的專業移動化辦公等全方位多領域的需求。
"今天的頒獎典禮只是本次大賽的一個階段性成果，但它并不是休止符。我們還會繼續通過各種賽事活動來發現和挖掘優秀的開發者，并與其建立合作關系。"華為AnyOffice產品總監陳愛平說。根據計劃，AnyOfficeEMM（EnterpriseMobileManagement，企業移動管理）平臺報表插件大賽即將啟動，而決賽則被安排在2016年8月31日-9月2日華為旗艦大會上進行。這將是一次在更大舞臺上展示的機會，相信將會有更多的開發者在這個舞臺上一展才華。
華為的BYOD戰略與企業移動化發展密切相關。華為BYOD移動應用聯盟經過3年多的持續發展，目前聯盟平臺已有超過200家合作伙伴，集成各種應用500多個，覆蓋全球超過450萬移動終端。HTML5是未來企業移動應用發展的重要方向，華為已與微軟、英特爾、云適配等公司共同籌建并啟動"中國企業級HTML5聯盟"，AnyOffice安全平臺也已全面兼容HTML5應用。在未來，華為一方面將堅持聚焦構建移動應用基礎安全能力，如安全沙箱、應用層VPN、MDM、MAM等，并以SDK的形式助力伙伴快速實現對安全能力的整合；另一方面，將始終堅持移動辦公商業生態的構建，與開發者和合作伙伴一起推動HTML5的市場化進程，為企業提供更為安全、快速、高效的移動化解決方案。
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>
由于篇幅有限，今天的內容就介紹這么多。如果你有什么想法或者建議，歡迎評論交流！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
