整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。那什么又是HTML呢？HTML 是用來描述網(wǎng)頁的一種語言。HTML的上一個(gè)版本誕生于1999年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。HTML 指的是超文本標(biāo)記語言： Hyper Text Markup Language。HTML 不是一種編程語言，而是一種標(biāo)記語言。而標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)。HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁，HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容，因此HTML文檔也叫做 web 頁面。
HTML5 是 W3C 與 WHATWG 合作的結(jié)果。W3C 致 的是World Wide Web Consortium，也就是萬維網(wǎng)聯(lián)盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專注于 XHTML 2.0。在 2006 年的時(shí)候，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個(gè)新版本的 HTML。
新特性基于 HTML、CSS、DOM 以及 JavaScript；減少對(duì)外部插件的需求（比如 Flash）；更優(yōu)秀的錯(cuò)誤處理；更多取代腳本的標(biāo)記；HTML5 應(yīng)該獨(dú)立于設(shè)備；開發(fā)進(jìn)程應(yīng)對(duì)公眾透明。
用于繪畫的 canvas 元素；用于媒介回放的 video 和 audio 元素；對(duì)本地離線存儲(chǔ)得更好地支持；新的特殊內(nèi)容元素，比如 article、footer、header、nav、section新的表單控件，比如 calendar、date、time、email、url、search。
專業(yè)的 HTML 編輯器來編輯 HTML：Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不過，我們同時(shí)推薦使用文本編輯器來學(xué)習(xí) HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡(jiǎn)單的文本編輯器是學(xué)習(xí) HTML 的好方法，高手們都是用記事本寫的~~~~
而本人使用的是Adobe Dreamweaver（下文中提到簡(jiǎn)稱DW），大家可以自己嘗試各種編輯器，再選擇自己喜歡的。本教程是實(shí)用性類，不會(huì)長(zhǎng)篇大論闡述理論，會(huì)留一些問題供大家去理解，不了解的話百度谷歌。
還需要的軟件就是瀏覽器的準(zhǔn)備，大家肯定知道什么是瀏覽器啦，現(xiàn)在谷歌，微軟新版瀏覽器以及360等眾多瀏覽器都是支持查看網(wǎng)頁源代碼的。鼠標(biāo)右鍵選擇查看源代碼即可。
學(xué)習(xí)資料推薦：
在本文中，需要理解的點(diǎn)，在下面講解中可能會(huì)混著講，所以大家要看完教程之后自己去總結(jié)。
首先打開DW，新建一個(gè)HTML文件，就是后綴是html結(jié)尾的文件。
用DW這樣的HTML專業(yè)軟件有個(gè)好處就是新建的文件已經(jīng)自動(dòng)寫好的一個(gè)HTML文件的基本結(jié)構(gòu)。文檔標(biāo)題在頁面中間上部的標(biāo)題處可以修改，也可以保存后自己再修改。
保存名字為教程1，可以看到文件是這樣的。
之后，我們嘗試用記事本打開這個(gè)文件。
用記事本打開的樣子。跟DW打開是一樣。
在body部分輸入文字，內(nèi)容隨意，然后保存。
再用瀏覽器打開，我這邊用的谷歌瀏覽器。打開之后可以看到如下圖所示。相信大家對(duì)HTML文件已經(jīng)有了一點(diǎn)點(diǎn)概念了。
再回到DW打開，可以看到，文件下邊是代碼，上邊是結(jié)果。如果只看到代碼，這是因?yàn)樵陧撁孀笊辖莻饕晥D的方式選擇。選擇拆分即可。
在DW中新建一個(gè)文件之后，你其實(shí)就已經(jīng)看到一個(gè)HTML的基本結(jié)構(gòu)了，這是我們剛才新建的教程1
紅色的矩形框內(nèi)部的內(nèi)容，我們稱為<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。
doctype 聲明是不區(qū)分大小寫的，以下方式均可：
<!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">
查看完整網(wǎng)頁聲明類型 DOCTYPE 參考手冊(cè)。
<!DOCTYPE> 聲明之后就是 <html> .....</html> 中間的那些我們暫時(shí)忽略。這兩個(gè)尖括號(hào)之間的內(nèi)容就告訴了瀏覽器，這段內(nèi)容是html頁面的內(nèi)容。
在html頁面中，哪些是被顯示的，哪些是代碼？相信通過第一節(jié)大家已經(jīng)有所認(rèn)識(shí)了，在HTML中，標(biāo)簽是通過"< >"表現(xiàn)的。而每一個(gè)標(biāo)簽都以對(duì)應(yīng)的“</ >”來結(jié)束，如<html></html>,<head></head>,<title></title>.....。(當(dāng)然也有例外，之后再說)
接下來就是在 <html> ，</html>之間編輯整個(gè)頁面的頭部和身體了.
頭部用<head></head>來表示，之間的內(nèi)容一般包含meta 和title，meta大家可以自己去了解，如果沒有這一塊，顯示可能會(huì)出現(xiàn)亂碼。一些預(yù)先的設(shè)置都會(huì)放在頭部里，樣式表等，就像是C語言程序中的頭文件。title標(biāo)簽就是整個(gè)網(wǎng)頁的標(biāo)題。
編輯好了頭部，就進(jìn)入頁面的身體啦。用body標(biāo)簽來表示很直觀，也不需要刻意去記了。在實(shí)例1中body的內(nèi)容很簡(jiǎn)單，只有一行文字，之后的內(nèi)容也就是教大家如何將body豐富起來~~
1.HTML 標(biāo)題<h1>-<h6>
2.HTML 段落<p>
3.HTML <br/>
在 HTML 文檔中，標(biāo)題很重要。
標(biāo)題是通過 <h1> - <h6> 標(biāo)簽進(jìn)行定義的.
<h1> 定義最大的標(biāo)題。 <h6> 定義最小的標(biāo)題。
看看實(shí)例效果
關(guān)于查看文件的效果，大家可以保持瀏覽器打開，當(dāng)DW中保存過文件以后，在瀏覽器中刷新一下，就可以看到效果。
HTML 可以將文檔分割為若干段落。段落是通過 <p> 標(biāo)簽定義的。在<p> </p>中輸入如下內(nèi)容，并在瀏覽器打開看一下效果。
如果我縮小瀏覽器的寬度，效果如下。
現(xiàn)在大家可以發(fā)現(xiàn)，html語言是一種排版語言，他會(huì)保證你可以看到內(nèi)容的全部，隨著瀏覽器的變化，文字排版也會(huì)跟著變化。你自己敲的空行，是不會(huì)顯示出來。那么如何自己定義斷行呢？介紹一個(gè)新的標(biāo)簽<br/>
英文brake的縮寫，很顯然，就是打斷的意思。因?yàn)檫@個(gè)標(biāo)簽是放在內(nèi)容的結(jié)尾的，所以它的開始就是結(jié)束，因此他沒有結(jié)束標(biāo)簽，所以沒有</br>,只有<br/>,大家要記清楚~
這時(shí)就能看到斷行啦。
<hr> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。<hr>標(biāo)簽與<br>標(biāo)簽一樣，沒有結(jié)束標(biāo)簽。所以也可以寫成<hr/>.
在設(shè)置完水平線之后，我們還可以及設(shè)置水平線的寬度。
代碼<hr width=50%> 這里的50%是指頁面的50%，也可以設(shè)置一個(gè)具體的數(shù)值,比如50，是指50個(gè)像素，大家可自行嘗試。
這里的width就是這個(gè)標(biāo)簽的屬性。像這樣的屬性值，還有，align，size。但不同的效果，大家可以試試。這些效果學(xué)了CSS之后，都建議通過CSS樣式表來實(shí)現(xiàn)。
<hr width=50>設(shè)定絕對(duì)長(zhǎng)度；
<hr align=left>設(shè)置左對(duì)齊，當(dāng)然也可以設(shè)置右對(duì)齊。
<hr size=1>這表示線寬；
曾有有一段時(shí)間屬性值“=”后面是需要加引號(hào)的，<hr width=“50”>，但現(xiàn)在所有瀏覽器都支持不加引號(hào)，大家看到有引號(hào)不要覺得是錯(cuò)誤的。
<標(biāo)簽名 屬性名=color> - 指定顏色
比如我可以給水平線設(shè)置顏色
在DW中輸入color=“之后會(huì)彈出顏色選擇，可以只選擇顏色，DW會(huì)自動(dòng)生成顏色代碼。
代碼為：
<h3>第四節(jié) 水平線</h3>
<hr width=90% color=”#FF0000“>
插入一條水平線
效果如下：
我們會(huì)舉例說一些，但是在學(xué)習(xí)CSS之后，字體樣式等于格式有關(guān)的功能，都會(huì)通過CSS樣式表來實(shí)現(xiàn)。所以，這里大家只要稍微了解下就好。
舉幾個(gè)例子
加粗<b></b>；斜體<i></i>；下劃線<ins></ins>；變小<small></small>；在html中，標(biāo)簽是可以嵌套的。大家可以仔細(xì)對(duì)比，以下代碼，和效果。
以下標(biāo)簽的顯示結(jié)果是由瀏覽器和樣式表決定的，這些標(biāo)簽標(biāo)識(shí)的意思而不是效果。這句話可能有一些難以理解，大家學(xué)習(xí)久了就會(huì)有所體會(huì)。
<em>強(qiáng)調(diào)</em>；<strong>著重</strong>；<dfn>definition</dfn>；<code>表示這一行是源代碼，僅用于小部分代碼。</code>；<samp>例子代碼</samp>；<kbd>用戶輸入</kbd>；<bar>變量</bar>；<site>引用</site>
我們?cè)囍斎脒@些代碼。
掌握幾個(gè)標(biāo)簽<ul><li><ol><dl><dt><dd>，標(biāo)簽是可以嵌套的，大家自己可以試一試。
無序列表 <ul>和<li>標(biāo)簽
<ul>un-odered list <li>list item,一項(xiàng)
將 <ul> 標(biāo)簽與 <li> 標(biāo)簽一起使用，創(chuàng)建無序列表。將<ol>標(biāo)簽與<li>標(biāo)簽一起使用，創(chuàng)建有序列表。
代碼：
ol和ul可以嵌套自動(dòng)縮進(jìn)ul縮進(jìn)每層標(biāo)記不一樣會(huì)有實(shí)心和空心等不同的標(biāo)記。
<dl>、<dd>和<dt>標(biāo)簽
定義：<dl> 標(biāo)簽定義了定義列表（definition list）。<dd> 在定義列表中定義條目的定義部分。<dt> 標(biāo)簽定義了定義列表中的項(xiàng)目（即術(shù)語部分）。
用法：<dl> 標(biāo)簽用于結(jié)合 <dt> （定義列表中的項(xiàng)目）和 <dd> （描述列表中的項(xiàng)目）。
舉例代碼：
<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來計(jì)算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
瀏覽器中的效果如下：
<table width="80%" border="1"> <tr> <th>www.dreamdu.com</th> <th>.com域名的數(shù)量</th> <th>.cn域名的數(shù)量</th> <th>.net域名的數(shù)量</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>
由于篇幅有限，今天的內(nèi)容就介紹這么多。如果你有什么想法或者建議，歡迎評(píng)論交流！
事Web前端開發(fā)，HTML5語言是繞不開的話題，學(xué)好HTML5語言對(duì)于從事Web前端開發(fā)的人非常重要。那么，在廣州Web前端培訓(xùn)班學(xué)習(xí)的人要如何學(xué)好HTML5語言呢?下面，小編就給大家分享一下。
1、基礎(chǔ)
如果之前接觸HTML4，可以嘗試著去學(xué)習(xí)HTML5，如果沒有基礎(chǔ)建議去w3cshool官網(wǎng)了解一下HTML、css(css3)及JavaScript等知識(shí)。
2、建立邏輯思維
HTML5基礎(chǔ)打好后，邏輯思維是下一步晉級(jí)必須面對(duì)的問題，這個(gè)階段也許新手會(huì)感到復(fù)雜和棘手，但是如果你能迎難而上堅(jiān)持下來不斷自我總結(jié)，這是成為大牛必須經(jīng)歷的過程。
3、多跟后端交流
了解一下服務(wù)器開發(fā)，做前端總是要跟服務(wù)器配合的，你要是完全不懂后端，我可以說你的工作會(huì)遇到很多問題而且這些問題是完全無法避免的。
4、多實(shí)踐
你跟大牛的其實(shí)不是技術(shù)的差別，而是一個(gè)項(xiàng)目和一百個(gè)項(xiàng)目經(jīng)驗(yàn)的差別，每做一個(gè)項(xiàng)目比你單純?nèi)タ匆槐緯鴮?shí)用得多，有機(jī)會(huì)要多嘗試各種類型的開發(fā)，不斷打破自己的舒適區(qū)。
對(duì)于零基礎(chǔ)的學(xué)員如何才能在短時(shí)間內(nèi)成為一名合格的Web前端開發(fā)?參加培訓(xùn)班無疑是最高效便捷的方式，千鋒廣州Web前端開發(fā)培訓(xùn)課程結(jié)合時(shí)下流行技術(shù)，三大階段幫助學(xué)員從基礎(chǔ)到進(jìn)階：
1、前端頁面重構(gòu)。主要內(nèi)容為PC端網(wǎng)站布局、HTML5+CSS3基礎(chǔ)、WebApp頁面布局。學(xué)習(xí)目標(biāo)是完成PC端網(wǎng)站布局，WebApp頁面布局，還要可以通過HTML5+CSS3的2D、3D等屬性實(shí)現(xiàn)一些精美的動(dòng)畫效果。
2、JavaScript高級(jí)課程、PC端全棧項(xiàng)目開發(fā)。主要內(nèi)容為原生JavaScript、面向?qū)ο筮M(jìn)階與ES5/ES6應(yīng)用、JavaScript工具庫自主研發(fā)、JQuery經(jīng)典交互特效開發(fā)、HTTP協(xié)議、Ajax進(jìn)階與后端開發(fā)、前端工程化與模塊化應(yīng)用以及AngularJS等。學(xué)習(xí)目標(biāo)是可以通過原生JavaScript開發(fā)交互功能，實(shí)現(xiàn)網(wǎng)站上的交互效果，以及模塊化應(yīng)用等，實(shí)現(xiàn)完整的前端工程。
3、Web前端框架、混合開發(fā)(Hybrid，RN)、大數(shù)據(jù)可視化。主要內(nèi)容為Node.js后端開發(fā)、Vue.js前端框架、React前端框架、混合開發(fā)(Hybrid，RN)、Angular前端框架、大數(shù)據(jù)可視化等。學(xué)習(xí)目標(biāo)是可以獨(dú)立完成相應(yīng)的項(xiàng)目，如微信場(chǎng)景，應(yīng)用Vue.js/Ionic/React.js等框架開發(fā)WebApp，微信小程序項(xiàng)目開發(fā)，以及各類混合應(yīng)用項(xiàng)目開發(fā)等。
TML5 是一個(gè)新的web標(biāo)準(zhǔn)的集合，它包括全新定義的HTML標(biāo)簽和更為規(guī)范化的HTML標(biāo)簽，CSS3以及全新的javascript API接口。這些接口既能操作前端所見所得，也能操作后臺(tái)輸送到前臺(tái)的數(shù)據(jù)，比如離線存儲(chǔ)功能。【推薦教程：Html5視頻教程】
HTML5技術(shù)主要用來做Web應(yīng)用、WebAPP的開發(fā)，網(wǎng)頁、網(wǎng)站的開發(fā)和維護(hù)等工作。HTML5技術(shù)開發(fā)的應(yīng)用可以運(yùn)行在PC端和移動(dòng)端，iOS端和Android端。
HTML5都能做什么？
第一：剛出現(xiàn)不久的小程序，很流行，在開發(fā)的過程，HTML5技術(shù)就會(huì)應(yīng)用的很多。
第二：移動(dòng)端是HTML5不可缺少的技術(shù)，現(xiàn)在都是移動(dòng)端的市場(chǎng)，人們手機(jī)的一些功能，緩存，音樂，視頻，地位，Canvas繪圖還有大量的特效，好看的效果，都是不可能離開HTML5技術(shù)。
第三：現(xiàn)手游的火爆程度，PC端游戲受到了沖擊，比如LOL被王者榮耀沖擊，這是時(shí)代的變化，HTML5可以做手機(jī)游戲，前景光明。
第四：互聯(lián)網(wǎng)的各種應(yīng)用，在如今變化多端的互聯(lián)網(wǎng)，好像任何東西都仿佛離不開了HTML5的技術(shù)。
HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式，包括：
· 新的解析規(guī)則增強(qiáng)了靈活性
· 新屬性
· 淘汰過時(shí)的或冗余的屬性
· 一個(gè)HTML5文檔到另一個(gè)文檔間的拖放功能
· 離線編輯
· 信息傳遞的增強(qiáng)
· 詳細(xì)的解析規(guī)則
· 多用途互聯(lián)網(wǎng)郵件擴(kuò)展（MIME）和協(xié)議處理程序注冊(cè)
· 在SQL數(shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)的通用標(biāo)準(zhǔn)（Web SQL）
以上就是html5能做什么的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注其它相關(guān)文章！
更多技巧請(qǐng)《轉(zhuǎn)發(fā) + 關(guān)注》哦！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
