文章目錄

• • 1. 什么是HTML 5？
  • 2. HTML 5的組成
  • 3.HTML 5可以實現的事情
  • 4. HTML 5的開發工具
  • 5.editplus的安裝簡單介紹
  • 6.EditPlus 5的一些簡單操作

在學習HTML 5之前，我們首先要知道這是什么？能實現什么作用？下面我們開始了解什么是HTML 5

1. 什么是HTML 5？

HTML 5是HTML的最新版本，目標是更好地開發網絡應用程序。HTML 5比HTML 4擁有更簡潔的語法并且提供了更多新的特性。Html 5自推出以來，依托的強大功能特性，天生跨平臺開發的優勢，受到更多互聯網從業者喜愛。它還有以下幾點強大功能，讓零基礎的學員想學習;有基礎的人員想繼續深造，其他行業人員看好Html 5前景，想轉行學習。
1.離線存儲
HTML 5可以讓你的WEB應用程序離線也能運行，它提供了一個稱作“應用程序緩存”的離線存儲功能，因此即使當用戶離線,瀏覽器仍然能夠訪問到它所需的文件。這些文件可以是HM, CSS， Javascript或者其它任何網頁運行所需要的文件。
2.拖拽功能
HTML 5提供了可以用來設計交互應用程序的本地拖拽功能，通過這個特性你可以拖動任何元素然后把它放到你想放到地方。
3.地理位置定位技術
HTML 5的地理位置定位API可以讓你與所信任的網站分享你當前的位置信息,當然,隱私問題是這- -特性所主要考慮的，W3. org聲明:瀏覽器在沒有用戶許可的情況下不允許私自向網站發送用戶的地理位置信息。比如一位用戶使用Firefox瀏覽器訪問了一個實現地理位置定位技術的網頁，瀏覽器會向用戶詢問是否共享他的地理位置信息，如果用戶同意，Firefox 會收集附近無線接入點和訪問者IP地址信息，并把這些信息發送到默認設定的Google地理位置服務，處理之后的位置信息將會發送給用戶訪問的這個網站。
4.音頻和視頻.
當前的HML缺少在頁面中嵌入多媒體文件的特性，因此多媒體文件的嵌入需要使用各種的插件。比如FLASH被廣泛地用來嵌入音頻和視頻文件。現在可以非常方便地使用HTML5提供的audio和video標簽，而不用任何插件。
5.表單輸入
HTML5提供了幾個新的表單input 類型，像彈出日歷，調色板，數字輸入框等等。這些可以創建擁有更好的輸入控制和驗證的高效表單。

2. HTML 5的組成

HTML5(WEB前端)由HTML（結構）、CSS（樣式）、JavaScript（行為）組成。
什么是結構、樣式與行為
結構實現的是網頁中的標題、列表、圖片等標簽。
樣式處理的是標題文字的字體大小、顏色，圖片尺寸，某個標簽的背景等。
行為可以實現網頁中的時間，電商網站當中的倒計時效果，在注冊表單時用戶名是否重復的檢測，網站當中頂部圖片的切換特效等等。
簡單的理解結構樣式和行為：將網頁看做一個裝修好的功能完備的房子，那么結構實現的是房間以及家具的位置布局，樣式則是針對房間進行裝飾，行為是為房間添加“開門”等功能。
想了解更多，可查看文章《HTML5(WEB前端)是什么？

3.HTML 5可以實現的事情

HTML 5作為新寵，在越來越多的領域得到了應用，特別是咋移動端，不管是大公司還是小公司都特別的重視。而隨著HTML 5的的不斷更新，相信在很多新的領域會得到推廣。那下面就簡單的為大家介紹一下可以運用HTML 5做的幾件很棒的事情。
1.可以制作出想要的時尚表單
表單在HTML中的運用是很常見的，不管是注冊表單、聯系人、信息反饋等等，他不僅美觀而且用戶體驗度很高，為大家在編程的工作中提供了很多的便利。
2. 構建實用的HTML 5框架
框架在HTML中的運用是很多的，他可以幫我們實現想要的功能，讓你更加的重點。也可以讓用戶更直觀的找到重點、發現重點。
3.開發豐富多彩的游戲
游戲其實是我們在日常生活中必不可少的休閑娛樂方式，而HTML 5頁可以幫我們得到想要的游戲，這當然是專業的程序員才能完成的事情。但不管怎么說他還是讓我們感受到了樂趣
4.以更直觀的方式讓數據可視化呈現
有的時候，你需要在網站中以更直觀的可視化方式呈現大量的數據或者信息，這個時候就需要圖表解決方法幫助你實現。
5.HTML 5的未來 驚艷的HTML 5示例和實驗
HTML 5不僅僅是用來表示網頁內容的，它的使命是將 Web 帶入一個成熟的應用平臺，盡管 HTML 5 的實現還有很長的路要走，但 HTML 5 正在改變 Web。是不是感覺HTML 5很神奇呢？一種簡單的標記語言就可以實現這么多的功能，那就快點動手動腦去學習吧。

4. HTML 5的開發工具

HTML 5的開發工具非常之多，就不一一列舉了，舉幾個比較好用的軟件
1.hbuilder
hbuilder是國產的一款前端開發I具而且是免費的,對于英語不好的前端工程師是一個不錯的消息。hbuilder的官方大 致是這么解釋為什么要開發hbuilder的: HTML 最開始實不是一-個編程語言，確實用不著什么ide。但是發展到現在，7w多個語法，js越來越龐大，真開發一個達到原生水準的App,不是用以前的文本編輯器能搞定的。
2.sublime tex
sublime text是一個輕 量級的編輯器，也是支持各種編程語言，sublime text所有的強大功能都是支持插件的，而且快捷鍵十分的好用，可以極大的減少開發的勞動程度，使用sublime就是要使用其快捷鍵和插件。該軟件的優點的輕量級但是功能強大，缺點是對于項目的管理等不是很方便，代碼提示不如hubuilder強大。
3.Dreamwave
Dreamwave是使用較為廣泛的編輯如軟件，這是一款很經典的前端開發工具期， 以前人們使用的是它的可視化開發工具，但是現在它只能是作為一一個代碼編輯器來使用的,當然一些可視化的功能現在也是用的上,如要插入Flash視頻等還是使用可視化簡單一些，鏡不是所有人都能純手寫哪些意義不大的代碼,優點是人們熟悉穩定，支持些可視化的插入操作，缺點是代碼提示不好，不能進行快速的開發只能是作為學習使用。
4.WebStorm
WebStorm支持最新的ECMAScript版本，你可以嘗試新的功能，每個javascript引擎的實現增加了別人所不具備的一些不錯的功能，當您使用的目前選定的javascript版本不支持，WebStorm將通知您,并建議速戰速決。
5.notepad+ +
notepad+ +軟件小巧高效，支持27種編程語言，通吃C,C++ Java ,C#, XML, HTML,PHP,JS等，Notepad++ 內置支持多達27種語法高亮度顯示。是一款小巧而功能強大的軟件。
6.editplus
editplus是一套功能非常強大的文字編輯器， 擁有無限制的Undo/Redo (撤銷)、英文拼字檢查、自動換行、列數標記、搜尋取代、同時編輯多文件、全屏幕瀏覽功能。除了支持HTML, CSS, PHP, ASP, Perl, C/C+ +, Java, JavaScript, VBScript的代碼高亮外,還內建完整的HTML和CSS指令功能。是許多前端人員比較喜歡的一款編輯軟件。本篇文章將會使用editplus軟件舉例子，大家還需要其他開發工具簡介的話，我也找到了一些，大家喜歡的話，有時間可以看一下，鏈接如下：https://zhinan.sogou.com/guide/detail/?id=316513287659
各軟件下載鏈接的話，我也找了一些，需要的話點擊下方鏈接自行選擇下載，
下載鏈接：http://www.pc6.com/pc/html5kfgj/
后面我將使用editplus進行一些簡單操作的學習。為什么下載這個？因為有些軟件雖然挺實用并且功能比較多，但是需要電腦配置好的，運行起來才不卡。editplus占內存比較小而且用起來也挺方便的，推薦使用。

5.editplus的安裝簡單介紹

點擊下載，然后在桌面上找到那個軟件進行安裝就好了，最后安裝好了會新增四個文件，這個就是應用程序了

打開EditPlus 5點擊文件直接新建.HTML后綴的文檔就完成了

新建項目就已經幫我們填充好一些代碼，我們只需要輸入網頁內容，非常人性化

6.EditPlus 5的一些簡單操作

聲明必須是 HTML 文檔的第一行，位于 標簽之前，瀏覽器就可以知道要處理的內容，可以注釋掉或者刪除也是不影響的

注釋的快捷鍵是:ctrl+/,不運行這行代碼，在按一次: ctrl+/ 的話又會返回原來的樣子或者
<!-- 注釋內容-->也是可以的

文件中html部分的開始，成對出現，lang是language的簡稱，會自動翻譯這個語言，en是English的簡稱，自動翻譯成英語。zh表示簡體中文

提供有關文檔內容和標注信息的，也是成對出現的

UTF-8是編碼方式，記住就好

這個是網頁的標題，直接在中間填充內容就可以完成網頁標題的填寫


body里面所填寫的內容都可以在網頁輸出，里面可以嵌入各種類型的內容

HTML 5的基本元素

超鏈接的實現，下面分別進行三個效果演示和作用(a表示定義超鏈接)

<a href="HTML5測試.html" target="blank">入口1</a><a href="HTML5測試.html" >入口2</a><a href="HTML5測試.html" target="_self">入口3</a>

點擊瀏覽器閱覽，有三個超鏈接入口，分別對應上面三個代碼段程序

點擊入口1，會在一個新的窗口重新打開超鏈接

點擊入口2和入口3效果都是一樣的，在原來的上面網頁上面打開超鏈接，所以

<a href="HTML5測試.html" >入口2</a>

默認效果和

<a href="HTML5測試.html" target="_self">入口3</a>

是一樣的

下面介紹換行的實現，就上面那個例子做對比，在程序前面加上換行符就可以換行了

<ol>換行符</ol>

本來沒加換行符之前都是在一行的，加了換行符之后就實現換行功能，效果如下

b表示加粗效果，為了和原來進行對比，我們用a進行對比（這個和wps里b的作用效果是一樣的，都是用來加粗）

比原來的加粗了

制作表格，代碼如下

<table borden="1px" align="center"><tr><td>feng</td><td>男</td><td>20</td></tr></table>

完成第一行單元格的創建

再增加幾行可以直接在下面重復以上內容，代碼如下

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>標題</title> </head> <body> <table borden="1px" align="center"> <tr><td>feng</td><td>男</td><td>20</td> </tr> <tr><td>luo</td><td>男</td><td>21</td> </tr> <tr><td>huang</td><td>男</td><td>24</td> </tr> </table> </body> </html>

結果如圖所示。補充一點，每一個單元格會保證容納最寬的內容，通俗來說就是單元格長度就是最長字符的長度，也是HTML 5的優點

如何增加標題欄？代碼如下

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>標題</title>注釋：網頁標題 </head> <body> <table borden="1px" align="center"> <tr><th>姓名</th>注釋：表的標題欄<th>性別</th><th>年齡</th> </tr> <tr><td>feng</td>注釋：表的內容<td>男</td><td>20</td> </tr> <tr><td>luo</td><td>男</td><td>21</td> </tr> <tr><td>huang</td><td>男</td><td>24</td> </tr> </table> </body> </html>

標題欄自動黑體加粗居中

有序列標簽代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>標題</title></head><body><ol><li>a</li><li>a</li><li>a</li><ol></body> </html>

效果如下，結果是升序

用a,b,c,d進行排序
代碼如下

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>標題</title></head><body> <ol><li>a</li><li>a</li><li>a</li> <ol><ol type="a">注釋：排序類型<li>a</li><li>a</li><li>a</li> </ol></body> </html>

type的類型可以修改，包括

<ol type="1">注釋：這個是默認的，其他需要自己設置 <ol type="a"> <ol type="A"> <ol type="I"> <ol type="i">

效果如下，需要的小伙伴可以試著改變去嘗試其他排序方法

整理的一些快捷方式，因為HTML 5的快捷功能比較多，就不一一列舉了

1.<em>斜體</em> 2.<u>下劃線</u> 3.<s>中間刪除線</s> 4.Html中標題的大小 <h1>最大字體 <h6>最小字體 5.<p>這是段落（paragraph）標簽頁面的一個段落，自動換行</p> 6.<a>標簽的作用是跳轉包括頁見跳轉 7. href屬性指定鏈接的目標 8.target屬性指定打開目標頁面的方式，其取值包括 9._self:在當前頁面中打開，默認； 10_blank:在新的頁面中打開； 11._parent:父子關系，嵌套關系； 12.頁內跳轉在目標標簽處指定id="……"，在鏈接處指定href="#……" id屬性是頁面元素的唯一標識， “錨點”：anchor13.圖片標簽<img>14.src屬性：source，圖片資源的URL地址，可以是本地的，也可以是遠程的

HTML 5入門就介紹到這里了。

總結

以上是生活随笔為你收集整理的HTML5的入门教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。