html5零基礎入門教程

1、離線存儲

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供舒城企業(yè)網站建設,專注與成都網站制作、成都網站設計、HTML5、小程序制作等業(yè)務。10年已為舒城眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站建設公司優(yōu)惠進行中。

HTML 5可以讓你的WEB應用程序離線也能運行，它提供了一個稱作“應用程序緩存”的離線存儲功能，因此即使當用戶離線，瀏覽器仍然能夠訪問到它所需的文件。這些文件可以是HM, CSS，Javascript或者其它任何網頁運行所需要的文件。

2、拖拽功能

HTML 5提供了可以用來設計交互應用程序的本地拖拽功能，通過這個特性你可以拖動任何元素然后把它放到你想放到地方。

3、地理位置定位技術

HTML 5的地理位置定位API可以讓你與所信任的網站分享你當前的位置信息，當然，隱私問題是這特性所主要考慮的，W3. org聲明：瀏覽器在沒有用戶許可的情況下不允許私自向網站發(fā)送用戶的地理位置信息。

比如一位用戶使用Firefox瀏覽器訪問了一個實現(xiàn)地理位置定位技術的網頁，瀏覽器會向用戶詢問是否共享他的地理位置信息，如果用戶同意，F(xiàn)irefox會收集附近無線接入點和訪問者IP地址信息，并把這些信息發(fā)送到默認設定的Google地理位置服務，處理之后的位置信息將會發(fā)送給用戶訪問的這個網站。

4、音頻和視頻

當前的HML缺少在頁面中嵌入多媒體文件的特性，因此多媒體文件的嵌入需要使用各種的插件。比如FLASH被廣泛地用來嵌入音頻和視頻文件?，F(xiàn)在可以非常方便地使用HTML5提供的audio和video標簽，而不用任何插件。

5、表單輸入

HTML5提供了幾個新的表單input類型，像彈出日歷，調色板，數字輸入框等等。這些可以創(chuàng)建擁有更好的輸入控制和驗證的高效表單。

如何深入學習Html5？

隨著移動互聯(lián)網的發(fā)展，web前端逐漸受到企業(yè)的重視，前端開發(fā)人員的薪資也水漲船高，越來越多的人看好前端行業(yè)的發(fā)展，想要轉行加入。下面，給大家分享一份web前端學習路線圖，希望對初學者有所幫助。Web前端行業(yè)的發(fā)展，讓前端人員能完成比以前更多的職責范圍，所以未來前端可以寬口徑就業(yè)，前景非常好。

對于零基礎的人而言，要怎么學習web前端呢?

1、 前端頁面重構。主要內容為PC端網站布局、Photoshop 工具及切圖、H5移動端網頁布局、HTML5+CSS3新特性與交互。學習目標是完成PC端網站布局，可實現(xiàn)響應式布局，一套代碼適配 PC 端、移動端、平板設備等。

2、 前后端網頁交互。主要內容為JavaScript語法全面進階、ES6 到 ES10 新語法實踐、jQuery 應用及插件使用、設計模式及插件編寫、封裝JS工具庫及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化與模塊化應用以及PC 端全棧開發(fā)項目等。學習目標是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建項目及開發(fā)項目。

3、 Node.js + 前端框架。主要內容為Node.js 全面進階、Koa2+MongoDB搭建服務、Vue.js 框架、React.js 框架、小程序云開發(fā)與小程序框架、原生APP與混合APP、數據可視化與桌面應用等。學習目標是掌握桌面應用及可視化大數據，實現(xiàn)復雜數據展示類項目，能夠獨立完成前后臺相關功能，勝任HTML5全棧開發(fā)工程師職位。很多學習web前端的朋友都希望在學成后能找到一份滿意的工作，所以我們在學習過程中一定要注意實戰(zhàn)經驗的積累，如果你所學的東西對企業(yè)沒有用，那你所做的一切都是無用功

如何用HTML5制作網頁

現(xiàn)在以HBuilder工具編寫為例：

1. 打開此工具，在項目管理器中右鍵單擊創(chuàng)建一個web 項目

2.右鍵單擊項目名稱，新建一個HTML文件----form01.html

!DOCTYPE html

!--

作者：offline

時間：2017-01-06

描述：form表單

在form標簽中，有兩個經常使用的屬性

action：表單提交服務器地址

method: 表單提交的方法/方式----get/post

其他提交方式---put delete

提交方式----get（默認的提交方式）

1.請求的參數放到地址欄中

2.不安全

3.存在緩存

4.傳輸數據的大小收到限制

提交方式----post

1.請求的參數放到http協(xié)議中

2.相對安全---賬號密碼等信息不會放到地址欄中

3.沒有緩存

4.傳輸數據的大小限制較小

修改成post之后，可能會出現(xiàn)錯誤信息。

input標簽：定義輸入字段，用戶可在其中輸入數據。

屬性：

type 指示 input標簽的類型，默認的是text

按鈕類型： 普通按鈕 button 重置按鈕 Reset? 提交按鈕 submit

value 定義要顯示的文本。

--

html

head

meta charset="utf-8"

titleform表單1/title

/head

body

form action="" method="post"

?? ?input type="text" name="username" value="zhangsan" /

?? ?input type="submit" value="提交" /

/form

/body

/html

3.查看此網頁是不是HTML5，主要看表頭

4.HTML5新增了很多新內容，具體可以查看API，例如：在網頁中嵌套音頻/視頻文件的格式