H5和HTML的差別是什麼-前端問答-PHP中文網

首頁

web前端

前端問答

H5和HTML的差別是什麼

醉折花枝作酒筹

Jun 07, 2021 pm 05:17 PM

h5html

h5和html的區別是：1、文檔類型聲明上，html有很長的一段程式碼很難記住，而html5只有簡單的聲明，方便人們記憶；2、在結構語義上， html4.0沒有體現結構語意化的標籤，html5在語意上卻有很大的優勢。

H5和HTML的差別是什麼

本教學操作環境：windows7系統、html&&HTML5版、Dell G3電腦。

html5最早由WHATWG(Web 超文本應用技術工作組)命名的一種超文本標記語言，隨後和W3C的xhtml2.0(標準)結合，產生現在最新一代的超文本標記語言。可以簡單點理解成：HTML 5 ≈ HTML4.0 CSS3 JS API。

1.在文件類型聲明上

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html  xmlns = "http://www.w3.org/1999/xhtml" >

html5：

<!DOCTYPE html>

由這兩者對比可見：在文件聲明上，html有很長的一段程式碼，很難記住這段程式碼，想必很多人都是靠工具直接產生的吧？而html5卻是不同，只有簡單單的聲明，這也方便人們的記憶，更精簡。

2.在結構語意上

html4.0：沒有體現結構語意化的標籤，我們通常都是這樣來命名的

< divid = "header" ></ div >

這樣表示網站的頭部。

html5：在語意上卻有很大的優勢。提供了一些新的html5標籤，例如:

< header > 、< nav >、< article >、< aside >、< footer >..

3.強大的HTML5的新功能

（1）強大的繪圖功能

可能有些動畫，或圖片，在html5可以透過強大的繪畫功能，加上JS可以實現。而在html4.0卻不行。

在HTML5中，有兩個東西，是可以進行繪圖的，我們一起來看看是哪兩個神奇的玩意。

1.Canvas標籤

Canvas 透過 JavaScript 來繪製 2D 圖形，Canvas 是逐像素進行渲染的。

在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的物件。

2.SVG

SVG 是一種使用 XML 來描述 2D 圖形的語言，SVG 是基於 XML，這表示 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪製的圖形被視為物件。如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

與其他圖像格式相比（例如JPEG 和GIF），使用SVG 的優勢在於：

（1）SVG 圖像可透過文字編輯器來建立和修改

（2）SVG 影像可被搜尋、索引、腳本化或壓縮

（3）SVG 是可伸縮的

（4）SVG 影像可在任何的解析度下被高品質地列印

（5）SVG 可在影像品質不下降的情況下放大

那麼都可以用於繪圖，我們一起來看看他們之間有何區別：

Canvas

1.依賴解析度

2.不支援事件處理器

3.弱的文字渲染能力

4.能夠以.png 或.jpg 格式儲存結果圖片

5.最適合圖片密集的遊戲，其中的許多物件會被頻繁重繪

SVG

1.不依賴解析度

2.支援事件處理器

3.最適合有大型渲染區域的應用程式（如Google地圖）

4.複雜度高會減慢渲染速度（任何過度使用DOM 的應用都不快）

5.不適合遊戲應用

#（2）新增視訊標籤

可能在html4.0的時候，我們想要插入一段視頻，我們還需要引用一長段的程式碼。但是在html5的情況下。我們只需要用於一個video標籤。

 < videosrc = "视频地址" ></ video >//详细属性可以见下图

4、好處

第一：節省程式設計師寫程式碼的時間。

第二：我覺得最主要還是在SEO的優化上。

不管是我們自己來對網頁模組命名，還是有這樣的標籤。因為做網站最終的目的只有一個，就是獲利。想獲利的話，就只有透過SEO優化的技術，把你網站排名做上來，這樣你的網站才有價值，且正是這一點，html5符合了這一點。為什麼這麼說呢？因為他定義的這些標籤，更有利於優化，蜘蛛能辨識你。

推薦學習：html影片教學

以上是H5和HTML的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

h5是指什么Aug 02, 2023 pm 01:52 PM

H5是指HTML5，是HTML的最新版本，H5是一个功能强大的标记语言，为开发者提供了更多的选择和创造空间，它的出现推动了Web技术的发展，使得网页的交互和效果更加出色，随着H5技术的逐渐成熟和普及，相信它将会在互联网的世界中发挥越来越重要的作用。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

如何区分H5,WEB前端,大前端,WEB全栈?Aug 03, 2022 pm 04:00 PM

本文带你快速区分H5、WEB前端、大前端、WEB全栈，希望对需要的朋友有所帮助！

h5如何使用positionDec 26, 2023 pm 01:39 PM

在H5中使用position属性可以通过CSS来控制元素的定位方式：1、相对定位relative，语法为“style="position: relative;”；2、绝对定位absolute，语法为“style="position: absolute;”；3、固定定位fixed，语法为“style="position: fixed;”等等。