- A+
很多企業在2018年建設企業網站的時候，就開始使用html5作為企業網站的建設語言，今天嘉藝網絡就來說下企業網站用html5建設有什么好處
1 HTML5介紹
HTML5是一種WEB標記語言, 主要用于開發網頁使用。HTML5是WEB應用中一種“超文本標記語言 (HTML) ”的第五次重大修改, 我們將這次修改后的HTML標準, 稱之為“HTML5”。
HTML5就是包括HTML、CSS和Java Script在內的一套技術組合, 進一步加強了頁面的表現性能。所以說未來HTML5將成為HTML、XHTML以及HTML DOM的新標準。
2 HTML5與HTML4區別
2.1 語法的改變
HTML5中的DOCTYPE聲明方法 (不區分大小寫) 如下:<!DOCTYPE html>。和早期版本相比聲明更簡潔, 早期版本需要很長的語句。
2.2 新增部分標簽
在HTML5中, 還新增了一些新的標簽, 以下列出部分新標簽。
HTML5新增了<header>、<footer>、<section>、<article>等結構標簽, 以便明確表示網頁的結構和更好的體現網站的語義性;新增<figure>、<figurecaption>和<hgroup>元素用于對頁面的內容進行分組;新增<audio>和<video>標簽, 用于實現在網頁中插入音頻和視頻文件。新增了<details>、<summary>、<progress>和<meter>元素用于給頁面增加交互體驗元素。
下面以網頁結構布局標簽為例詳細說明在網頁布局方面HTML5和HTML4的區別。某網頁網頁布局結構如圖1所示。
圖1 網頁布局結構圖
在上述布局結構中, 如果使用HTML4中的標簽<div>來進行布局, 如圖2所示。源文件代碼如下:
圖2 HTML4布局標簽 ??
圖3 HTML5布局標簽 ??
<style type="text/css">
#header{}
#nav{}
#article{}
#aside{}
#footer{}
</style>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="article"></div>
<div id="aside"></div>
<div id="footer"></div>
</body>
上述代碼結構復雜并且不直觀易懂。在新的HTML5標準中, 新增了一些標簽, 這些標簽都是有結構性的, 且這些標簽的作用與塊元素非常相似且能夠更語義化的定義頁面層次和邏輯。代碼如下:
<style type="text/css">
header{}
nav{}
article{}
aside{}
footer{}
</style>
<body>
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer></footer>
</body>
header元素、nav元素、article元素、aside元素、section元素以及footer元素都是用于搭建頁面結構的元素, 具體含義如下:
header元素是一種具有引導和導航作用的結構元素, 該元素可以包含所有通常放在頁面頭部的內容。header元素內可以放置內容的標題, 也可以放置Logo圖片、搜索表單或者其他相關內容。
nav元素用于定義導航鏈接, 該元素可以將具有導航性質的鏈接歸納在一個區域中, 使頁面元素的語義更加明確。其中的導航元素可以鏈接到站點的其他頁面, 或者當前頁的其他部分。
article元素主要定義與上下文不相關的獨立部分。該元素經常被用于定義一篇日志、一條新聞或用戶評論等。article元素通常使用多個section元素進行劃分, 一個頁面中article元素可以出現多次。
aside元素主要包含有別于主要內容部分的信息, 如導航條、相關引用、廣告等。主要用于定義一些相關附屬信息部分。
footer元素用于定義一個頁面或者區域的底部, 它可以包含所有通常放在頁面底部的內容。
2.3 刪除部分標簽
HTML5刪除了一些對可用性產生負面影響的元素、純表現元素和只有少數瀏覽器支持的元素。
(1) frame元素
由于HTML5只支持iframe框架, 不支持frame框架, 所有刪除了frameset、frame、noframes元素。
(2) 純表現元素
在HTML4中, 有一些元素作用只是為了展示頁面, 而實現由CSS完成, 如tt、u、s、strike、big、center、basefont和font。
(3) 少數瀏覽器支持的元素
有一些元素只有少數瀏覽器支持。如blink、marquee、applet、bgsound等元素。
3 HTML5的優勢
(1) 解決了跨瀏覽器問題
在HTML5之前, 各大瀏覽器廠商為了爭奪市場占有率, 會在各自的瀏覽器中增加各種各樣的功能, 并且不具有統一的標準。使用不同的瀏覽器, 常?？吹讲煌捻撁嫘Ч?。在HTML5中, 納入了所有合理的擴展功能, 具備很好的跨平臺性能。
(2) 更低的開發成本, 更精美的動畫效果
使用HTML5標簽和CSS層疊樣式所實現的動畫效果應用到網頁中會使人眼前一亮, 并且HTML5技術能夠實現開發一次, 可同時應用到手機、網頁平臺, 實現“一次設計, 普遍適用, 從而降低企業開發成本。
(3) 化繁為簡的優勢
新的簡化的字符集聲明、新的簡化的DOCTYPE、簡單而強大的HTML5 API, 以瀏覽器原生能力替代復雜的Java Script代碼。為了實現這些簡化操作, HTML5規范需要比以前更加細致、精確。為了避免造成誤解, HTML5對每一個細節都有著非常明確的規范說明, 不允許有任何的歧義和模糊出現。
4 結束語
WEB技術發展越來越迅速, HTML5的到來更是把WEB技術推向了巔峰, 目前HTML5技術已經日趨成熟, 不僅在PC端, HTML5更是在移動終端上也有廣泛的應用, HTML5的未來十分光明, 值得我們去學習。
