網頁開發HTML5入門內容，一起來學習吧

么是 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 是如何創建的？

HTML5 是 W3C 與 WHATWG 合作的結果。W3C 致的是World Wide Web Consortium，也就是萬維網聯盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表單和應用程序，而 W3C 專注于 XHTML 2.0。在 2006 年的時候，雙方決定進行合作，來創建一個新版本的 HTML。

為 HTML5 建立的一些新規則

新特性基于 HTML、CSS、DOM 以及 JavaScript；減少對外部插件的需求（比如 Flash）；更優秀的錯誤處理；更多取代腳本的標記；HTML5 應該獨立于設備；開發進程應對公眾透明。

為 HTML5 建立的一些新特性

用于繪畫的 canvas 元素；用于媒介回放的 video 和 audio 元素；對本地離線存儲得更好地支持；新的特殊內容元素，比如 article、footer、header、nav、section新的表單控件，比如 calendar、date、time、email、url、search。

HTML 編輯器

專業的 HTML 編輯器來編輯 HTML：Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不過，我們同時推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學習 HTML 的好方法，高手們都是用記事本寫的~~~~

而本人使用的是Adobe Dreamweaver（下文中提到簡稱DW），大家可以自己嘗試各種編輯器，再選擇自己喜歡的。本教程是實用性類，不會長篇大論闡述理論，會留一些問題供大家去理解，不了解的話百度谷歌。

還需要的軟件就是瀏覽器的準備，大家肯定知道什么是瀏覽器啦，現在谷歌，微軟新版瀏覽器以及360等眾多瀏覽器都是支持查看網頁源代碼的。鼠標右鍵選擇查看源代碼即可。

學習資料推薦：

在本文中，需要理解的點，在下面講解中可能會混著講，所以大家要看完教程之后自己去總結。

HTML文檔是什么樣
如何新建一個HTML文檔
怎么打開HTML文檔

首先打開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 標題

在 HTML 文檔中，標題很重要。

標題是通過 <h1> - <h6> 標簽進行定義的.

<h1> 定義最大的標題。 <h6> 定義最小的標題。

看看實例效果

關于查看文件的效果，大家可以保持瀏覽器打開，當DW中保存過文件以后，在瀏覽器中刷新一下，就可以看到效果。

HTML 段落

HTML 可以將文檔分割為若干段落。段落是通過 <p> 標簽定義的。在<p> </p>中輸入如下內容，并在瀏覽器打開看一下效果。

如果我縮小瀏覽器的寬度，效果如下。

現在大家可以發現，html語言是一種排版語言，他會保證你可以看到內容的全部，隨著瀏覽器的變化，文字排版也會跟著變化。你自己敲的空行，是不會顯示出來。那么如何自己定義斷行呢？介紹一個新的標簽<br/>

<br/>標簽

英文brake的縮寫，很顯然，就是打斷的意思。因為這個標簽是放在內容的結尾的，所以它的開始就是結束，因此他沒有結束標簽，所以沒有</br>,只有<br/>,大家要記清楚~

這時就能看到斷行啦。

HTML 水平線

<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>

<dd>用來計算的儀器 ... ...</dd>

<dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>

瀏覽器中的效果如下：

table 標簽 -- 代表HTML表格

table標簽是成對出現的,以<table>開始,以</table>結束
引用網址:http://www.dreamdu.com/xhtml/tag_table/
屬性

Common -- 一般屬性

summary -- 代表表格的摘要說明

width-- 代表表格的寬度

border -- 代表表格邊框(此屬性應該使用CSS實現)

cellspacing -- 代表表格邊框與表格內容填充的距離,也是內容填充之間的距離(此屬性應該使用CSS實現)

cellpadding -- 代表內容填充的寬度(此屬性應該使用CSS實現)

table，中文"表格"的意思

示例

<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>

HTML表格示例 -- 可以嘗試編輯

HTML table 標簽示例
HTML th 標簽示例
HTML cellpadding cellspacing 屬性示例
HTML rowspan 屬性示例
HTML colspan 屬性示例
HTML colgroup col示例

說明

width-- 是表格的寬度,可以使用象素px或者百分比
border-- 是表格的邊框的寬度,使用px表示,此屬性應該使用CSS實現
tr -- 代表一行
th -- 代表表格頭
td -- 代表一個單元格

由于篇幅有限，今天的內容就介紹這么多。如果你有什么想法或者建議，歡迎評論交流！

事Web前端開發，HTML5語言是繞不開的話題，學好HTML5語言對于從事Web前端開發的人非常重要。那么，在廣州Web前端培訓班學習的人要如何學好HTML5語言呢?下面，小編就給大家分享一下。

1、基礎

如果之前接觸HTML4，可以嘗試著去學習HTML5，如果沒有基礎建議去w3cshool官網了解一下HTML、css(css3)及JavaScript等知識。

2、建立邏輯思維

HTML5基礎打好后，邏輯思維是下一步晉級必須面對的問題，這個階段也許新手會感到復雜和棘手，但是如果你能迎難而上堅持下來不斷自我總結，這是成為大牛必須經歷的過程。

3、多跟后端交流

了解一下服務器開發，做前端總是要跟服務器配合的，你要是完全不懂后端，我可以說你的工作會遇到很多問題而且這些問題是完全無法避免的。

4、多實踐

你跟大牛的其實不是技術的差別，而是一個項目和一百個項目經驗的差別，每做一個項目比你單純去看一本書實用得多，有機會要多嘗試各種類型的開發，不斷打破自己的舒適區。

對于零基礎的學員如何才能在短時間內成為一名合格的Web前端開發?參加培訓班無疑是最高效便捷的方式，千鋒廣州Web前端開發培訓課程結合時下流行技術，三大階段幫助學員從基礎到進階：

1、前端頁面重構。主要內容為PC端網站布局、HTML5+CSS3基礎、WebApp頁面布局。學習目標是完成PC端網站布局，WebApp頁面布局，還要可以通過HTML5+CSS3的2D、3D等屬性實現一些精美的動畫效果。

2、JavaScript高級課程、PC端全棧項目開發。主要內容為原生JavaScript、面向對象進階與ES5/ES6應用、JavaScript工具庫自主研發、JQuery經典交互特效開發、HTTP協議、Ajax進階與后端開發、前端工程化與模塊化應用以及AngularJS等。學習目標是可以通過原生JavaScript開發交互功能，實現網站上的交互效果，以及模塊化應用等，實現完整的前端工程。

3、Web前端框架、混合開發(Hybrid，RN)、大數據可視化。主要內容為Node.js后端開發、Vue.js前端框架、React前端框架、混合開發(Hybrid，RN)、Angular前端框架、大數據可視化等。學習目標是可以獨立完成相應的項目，如微信場景，應用Vue.js/Ionic/React.js等框架開發WebApp，微信小程序項目開發，以及各類混合應用項目開發等。

TML5 是一個新的web標準的集合，它包括全新定義的HTML標簽和更為規范化的HTML標簽，CSS3以及全新的javascript API接口。這些接口既能操作前端所見所得，也能操作后臺輸送到前臺的數據，比如離線存儲功能。【推薦教程：Html5視頻教程】

HTML5技術主要用來做Web應用、WebAPP的開發，網頁、網站的開發和維護等工作。HTML5技術開發的應用可以運行在PC端和移動端，iOS端和Android端。

HTML5都能做什么？

第一：剛出現不久的小程序，很流行，在開發的過程，HTML5技術就會應用的很多。

第二：移動端是HTML5不可缺少的技術，現在都是移動端的市場，人們手機的一些功能，緩存，音樂，視頻，地位，Canvas繪圖還有大量的特效，好看的效果，都是不可能離開HTML5技術。

第三：現手游的火爆程度，PC端游戲受到了沖擊，比如LOL被王者榮耀沖擊，這是時代的變化，HTML5可以做手機游戲，前景光明。

第四：互聯網的各種應用，在如今變化多端的互聯網，好像任何東西都仿佛離不開了HTML5的技術。

HTML5的設計目的是為了在移動設備上支持多媒體。新的語法特征被引進以支持這一點，如video、audio和canvas 標記。HTML5還引進了新的功能，可以真正改變用戶與文檔的交互方式，包括：

· 新的解析規則增強了靈活性

· 新屬性

· 淘汰過時的或冗余的屬性

· 一個HTML5文檔到另一個文檔間的拖放功能

· 離線編輯

· 信息傳遞的增強

· 詳細的解析規則

· 多用途互聯網郵件擴展（MIME）和協議處理程序注冊

· 在SQL數據庫中存儲數據的通用標準（Web SQL）

以上就是html5能做什么的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

在線咨詢

上一篇：html亂碼-解決gb2312編碼導致亂碼問題
下一篇：如何在 Web 服務器文檔根目錄上設置只讀文件權限

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商