html和html5語言的區別 | 程式專案

{"id":238430,"student_id":6526,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003ehtml和html5語言的區別\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody lang=\\\"zh-Hans-TW \\\"\u003e\\n    \u003cdiv class=\\\"body\\\" id=\\\"home\\\"\u003e\\n\u003c!--在螢幕上顯示R.jpg並設定寬高 --\u003e\\n\u003cimg src=\\\"R.jpg\\\" width=\\\"70px\\\" height=\\\"70pxpx\\\"\u003e    \\n\u003c!--粗體--\u003e    \\n\u003cb\u003e\\n\\n    \u003c!--設定[html和html5語言的區別?]的字體--\u003e\\n   \u003cp align=\\\"center\\\"\u003e\u003cfont size=\\\"6\\\"\u003e\u003cfont id=\\\"html\\\" font color=#fffff face=\\\"微軟正黑體\\\"\u003ehtml和html5語言的區別\u003c/font\u003e\\t\\n   \u003cbr\u003e\\n\\n    \\n\u003cnav\u003e\\n    \u003cfont size=\\\"4\\\"\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--新增分頁(https://zh.wikipedia.org/wiki/HTML)--\u003e\\n\u003ca href=\\\"https://zh.wikipedia.org/wiki/HTML\\\" style=\\\"color:#005ed5;\\\" target=\\\"_blank\\\"\u003e維基百科:HTML\\n\u003c/a\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--新增分頁(https://zh.wikipedia.org/wiki/HTML5)--\u003e\\n\u003ca href=\\\"https://zh.wikipedia.org/wiki/HTML5\\\" style=\\\"color:#005ed5;\\\" target=\\\"_blank\\\"\u003e維基百科:HTML5\\n\u003c/a\u003e\\n\u003c!--水平線--\u003e\\n\u003chr\u003e\\n\u003c!--跳轉至區塊一、什麼是html呢--\u003e\\n\u003ca href=\\\"#P1\\\" style=\\\"color:#27271a;\\\"\u003e跳至一、什麼是html呢\u003c/a\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--跳轉至區塊二、什麼是HTML5--\u003e\\n\u003ca href=\\\"#P2\\\" style=\\\"color:#27271a;\\\"\u003e跳至二、什麼是HTML5\u003c/a\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--跳轉至區塊三、HTML5特性--\u003e\\n\u003ca href=\\\"#P3\\\" style=\\\"color:#27271a;\\\"\u003e跳至三、HTML5特性\u003c/a\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--跳轉至區塊四、HTML5的優勢有哪些?--\u003e\\n\u003ca href=\\\"#P4\\\" style=\\\"color:#27271a;\\\"\u003e跳至四、HTML5的優勢有哪些?\u003c/a\u003e\\n\u003c!--水平線--\u003e\\n\u003chr\u003e\\n\u003c/nav\u003e\\n\u003c!--開始新的section並且設定ID--\u003e\\n\u003csection id=\\\"P1\\\"\u003e\\n\u003c!--標題--\u003e    \\n\u003ch2\u003e一、什麼是html呢？\u003c/h2\u003e\\n\u003c!--內文--\u003e\\n\u003cp\u003e\\n在瞭解html5之前，首先要說一下html語言，儘管是更新後的5，但很多的地方還是保留了html的優勢。\\n\\nHTML是HyperText Markup Language超級文字標記語言的縮寫，是標準通用標記語言下的一個應用，也是一種規範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。從第一版的出現到現在，html已經經歷了5次的改版，從HTML 2.0到HTML 5，html用自身的優勢證明了其在網站中的優勢，以至於替代了古老的C語言程式設計來架構部分網站。\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\nHTML有以下特點 ：\\n1、簡易性：超級文字標記語言版本升級採用超集方式，從而更加靈活方便。\\n2、可擴充套件性：超級文字標記語言的廣泛應用帶來了加強功能，增加識別符號等要求，超級文字標記語言採取子類元素的方式，為系統擴充套件帶來保證。\\n3、平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文字標記語言可以使用在廣泛的平臺上，這也是全球資訊網（WWW）盛行的另一個原因。\\n4、通用性：另外，HTML是網路的通用語言,一種簡單、通用的全置標記語言。它允許網頁製作人建立文字與圖片相結合的複雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什麼型別的電腦或瀏覽器。\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--跳轉至首頁--\u003e\\n\u003ca href=\\\"#home\\\" style=\\\"color:#27271a;\\\" \u003e回首頁\u003c/a\u003e\\n\u003c!--在螢幕上顯示2.png--\u003e\\n\u003cimg src=2.png\u003e\\n\u003c!--下載2.png--\u003e\\n\u003ca download href=\\\"2.png\\\" style=\\\"color:#005ed5;\\\"\u003e下載\u003c/a\u003e\\n\u003c!--結束這一個Section--\u003e\\n\u003c/section\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--開始新的section並且設定ID--\u003e\\n\u003csection id=\\\"P2\\\"\u003e\\n\u003c!--標題--\u003e \\n\u003ch2\u003e二、什麼是HTML5\u003c/h2\u003e\\n\u003c!--內文--\u003e\\n\u003cp\u003eHTML5是HTML（超文字標記語言）的第五次更新的產品，這是一種解釋型的語言，檔案的副檔名的字尾為.htm或者.html的形式，這是眾多廠商聯合開發出來的產品，據說W3C將會在2022年推出標準版。雖然現在仍處於不斷的完善中，但新增的新特性，新功能，不僅能節約Web開發者的時間和週期，還能提升使用者的體驗，更好的為開發者服務。\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n在HTML的時代，滿屏的都是div元素，結構混亂，不易閱讀，程式碼臃腫。在HTML5中，新增了許多語義化的佈局標籤，比如nav，header，footer，article等，使佈局的網頁結構清晰明瞭。還新增了音訊，視訊，影象，繪圖，動畫等功能，在以前，這些都是要用flash才能完成的。使用HTML5新增的功能能做出許多酷炫的效果。\u003c/p\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--跳轉至首頁--\u003e\\n\u003ca href=\\\"#home\\\" style=\\\"color:#27271a;\\\"\u003e回首頁\u003c/a\u003e\\n\u003c!--在螢幕上顯示4.png--\u003e\\n\u003cimg src=4.png\u003e\\n\u003c!--下載4.png--\u003e\\n\u003ca download href=\\\"4.png\\\" style=\\\"color:#005ed5;\\\"\u003e下載\u003c/a\u003e\\n\u003c!--結束這一個Section--\u003e\\n\u003c/section\u003e\\n\u003c!--開始新的section並且設定ID--\u003e\\n\u003csection id=\\\"P3\\\"\u003e\\n\u003c!--標題--\u003e \\n\u003ch2\u003e三、HTML5特性\u003c/h2\u003e\\n\u003c!--內文--\u003e\\n\u003cp\u003e1、語義特性(Class：Semantic)\\nHTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨著對RDFa的，微資料與微格式等方面的支援，構建對程式、對使用者都更有價值的資料驅動的Web。\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n2、本地儲存特性(Class: OFFLINE \u0026 STORAGE)\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n基於HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地儲存功能。Indexed DB(html5本地儲存最重要的技術之一)和API說明文件。\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n3、裝置相容特性 (Class: DEVICE ACCESS)\\n\\n從Geolocation功能的API文件公開以來，HTML5為網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的資料與應用接入開放介面。使外部應用可以直接與瀏覽器內部的資料直接相連，例如視訊影音可直接與microphones及攝像頭相聯。\\n\u003cbr\u003e\u003cbr\u003e\\n4、連線特性(Class: CONNECTIVITY)\\n\\n更有效的連線工作效率，使得基於頁面的實時聊天，更快速的網頁遊戲體驗，更優化的線上交流得到了實現。HTML5擁有更有效的伺服器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特效能夠幫助我們實現伺服器將資料“推送”到客戶端的功能。\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n5、網頁多媒體特性(Class: MULTIMEDIA)\\n\\n支援網頁端的Audio、Video等多媒體功能， 與網站自帶的APPS，攝像頭，影音功能相得益彰。\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n6、三維、圖形及特效特性(Class: 3D, Graphics \u0026 Effects)\\n\\n基於SVG、Canvas、WebGL及CSS3的3D功能，使用者會驚歎於在瀏覽器中，所呈現的驚人視覺效果。\\n\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n7、效能與整合特性(Class: Performance \u0026 Integration)\\n\\n沒有使用者會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術，解決以前的跨域等問題，幫助您的Web應用和網站在多樣化的環境中更快速的工作。\\n\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n8、CSS3特性(Class: CSS3)\\n\\n在不犧牲效能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字型格式(WOFF)也提供了更高的靈活性和控制性。\u003c/p\u003e\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\\n\u003c!--跳轉至首頁--\u003e\\n\u003ca href=\\\"#home\\\" style=\\\"color:#27271a;\\\"\u003e回首頁\u003c/a\u003e\\n\\n\u003c!--結束這一個Section--\u003e\\n\u003c/section\u003e\\n\u003c!--開始新的section並且設定ID--\u003e\\n\u003csection id=\\\"P4\\\"\u003e\\n\u003c!--標題--\u003e\\n\u003ch2\u003e四、HTML5的優勢有哪些?\u003c/h2\u003e\\n\u003c!--內文--\u003e\\n\u003cp\u003e1，跨平臺性\\n\\n在HTML5到來之前，由於平臺的多樣性，導致每開發一套產品，就要針對不同的平臺開發多套版本，耗費大量的時間和精力，而且還增加了大量的開發成本，而HTML5技術的出現卻能很好的解決這個問題，開發者只要使用一套程式，就能夠很容易的實現多個平臺的展現功能，降低了開發難度，節約了開發時間和成本的投入。\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n2，即時更新\\n\\n之前原生應用上線Appstore，都需要等待很長的稽核時間，一旦出現問題需要更新，則還要重新稽核，無形中浪費了大量的時間。而HTML5是通過瀏覽器進行載入的，所以不存在這樣的問題，如果出現什麼問題，可以及時的更新上線，不需要等待稽核時間。\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n3，離線快取功能\\nHTML5中最酷的特性就是離線快取。通過JavaScript提供了數種不同的離線儲存功能，相對於傳統的Cookie而言有更好的彈性以及架構，並且可以儲存更多的內容。它擁有更好的安全和效能，即使瀏覽器關閉後也可以儲存。\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n4，視訊和音訊的支援\\n\\n之前在實現播放媒體功能時，一直是開發者比較痛苦的事情，需要讓你的視訊和音訊通過HTML5標籤和來訪問資源。並且為了它們能正確播放必須賦予一大堆的引數。這樣你就要不斷的重複標籤，你的程式碼也會變得十分繁瑣。現在，這一切都將變的非常簡單。\\n\u003c!--下一行--\u003e\u003c!--下一行--\u003e\\n\u003cbr\u003e\u003cbr\u003e\\n5，清晰的程式碼\\n\\nHTML5可以讓你寫出簡單清晰的程式碼。使用HTML5你可以通過使用語義學的HTML header標籤描述內容來最後解決你的div及其class定義問題。讓你的程式碼更加清晰易於理解。\\n\u003c!--下一行--\u003e\\n\u003cbr\u003e\\n\u003c!--跳轉至首頁--\u003e\\n\u003ca href=\\\"#home\\\" style=\\\"color:#27271a;\\\"\u003e回首頁\u003c/a\u003e\\n\u003c!--結束這一個Section--\u003e\\n\u003c/section\u003e\\n\u003c!--水平線--\u003e\\n\u003chr\u003e\\n\u003c!--寄email to--\u003e\\n\u003ca href=\\\"mailto:nickkool0319@gmail.com\\\" style=\\\"color:#a0a52d;\\\"\u003e我的Gmail \u003c/a\u003e\\n\u003cform\u003e\\n\u003cmeta http-equiv=\\\"Content-Language\\\" content=\\\"zh-TW\\\"\u003e\\n\u003cmeta http-equiv=\\\"Refresh\\\" content=\\\"time\\\"\u003e\\n\\n\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\" .body { background: #1f418a;}\\n\",\"js\":\"var gh =\\\"546\\\"\\n\"}","created_at":"2021-03-26T21:54:25.314+08:00","updated_at":"2021-04-24T23:38:47.008+08:00","name":"html和html5語言的區別","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/238430/fad4c1c6335e4ecc61262c028edfba36.jpg"},"parent_id":3,"plugin":"","description":"","note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":20,"hashid":"4y3sg38qv","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}