HTML5基礎知識網(wǎng)站
成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,赤坎企業(yè)網(wǎng)站建設,赤坎品牌網(wǎng)站建設,網(wǎng)站定制,赤坎網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,赤坎網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
1.W3C
全稱“W3School”，簡直是學習網(wǎng)站中的“戰(zhàn)斗機”，每一節(jié)都有學生時代老師般的“板書”，豐富的實例展示，還有工具書、小測驗等提升工具，私教般的存在!
2.Dive into HTML5
這個網(wǎng)站幾乎都是關于HTML5的文檔，講一些很基礎的知識，簡潔清新。如果想學習HTML5的同時提高英語閱讀能力，這個網(wǎng)站是極好的。類似的英文網(wǎng)站還有woorkup。
3.h5之家
除了豐富且與時俱進的教程，這個網(wǎng)站還有很多關于HTML5業(yè)界的獨特見解，閑暇時候看看，拓展知識又能在人前裝X，這樣的網(wǎng)站哪里找!
HTML5案例網(wǎng)站
1.HTML5xCSS3
擁有超豐富的HTML5案例和模板，隨便點開一個案例都好看到讓人震驚。里面的全部都是HTML5響應式網(wǎng)站喲!
2.360html5基地
350旗下的HTML5作品展示網(wǎng)站，大部分是HTML5游戲展示，可愛有趣。比如打開一個割繩子的HTML5展示：
3.HTML5 Games
相對360來說更豐富的HTML5游戲資源，玩著玩著技能激發(fā)設計靈感呢!
HTML5技術網(wǎng)站
1.whatwg
網(wǎng)絡超文本應用技術工作小組(Web Hypertext Application Technology Working Group)的博客，里面一些文章能讓人受益匪淺。
2.HTML5醫(yī)生
一些關于html5語義及如何使用它們的文章，醫(yī)生會定時回答網(wǎng)友們的問題。
3.HTML5中國
一個真的能手把手教你6小時做一個HTML5坦克大戰(zhàn)游戲的網(wǎng)站，還有各類HTML5的資訊、溝通交流論壇等。
HTML5測試網(wǎng)站
1.HTMLDemos
測試HTML5標簽在各瀏覽器的兼容性，還能查看各種HTML5的標準Demo演示。
2.html5 test
能為瀏覽器對HTML5的兼容性打分，可以知道你當前的瀏覽器對HTML5的支持情況如何，各種標簽和組件的支持情況。
所以，網(wǎng)站已經(jīng)分享給你們了，如果真心要學習此項技能，快去實踐吧!
HTML5（WEB前端）的技術組成
HTML5（WEB前端）技術由HTML（結構）、CSS（樣式）、JavaScript（行為）組成。
如何理解結構、樣式與行為
簡單來說，HTML5（WEB前端）是“將設計圖轉換為用戶查看的網(wǎng)頁”所需要的技術。
結構實現(xiàn)的是網(wǎng)頁中的標題、列表、圖片等標簽。
樣式處理的是標題文字的字體大小、顏色，圖片尺寸，某個標簽的背景等。
行為可以實現(xiàn)網(wǎng)頁中的時間，電商網(wǎng)站當中的倒計時效果，在注冊表單時用戶名是否重復的檢測，網(wǎng)站當中頂部圖片的切換特效等等。
簡單的理解結構樣式和行為：將網(wǎng)頁看做一個裝修好的功能完備的房子，那么結構實現(xiàn)的是房間以及家具的位置布局，樣式則是針對房間進行裝飾，行為是為房間添加“開門”等功能。
一、HTML的開發(fā)工具和使用的瀏覽器
開發(fā)工具：記事本等文本編輯器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。
瀏覽器：Chrome、Firefox、IE、Safari、IPhone、Android。
二、HTML的基本要素
DOCTYPE? 描述文檔的類型
html? ? ?網(wǎng)頁的根元素，寫在網(wǎng)頁的在外面
head??? 網(wǎng)頁的頭部信息，寫在html標記的里面
body? ? 網(wǎng)頁的內容，寫在html標記的里面
具體描述：
1、DOCTYPE? 描述文檔的類型，規(guī)定web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標記，每個版本的DTD版本均有不同
使用例子
HTML4的例子
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
HTML5的例子
2、html/html?網(wǎng)頁文檔中的根標記
html 標簽有三個特殊的屬性
manifest? ?指定網(wǎng)頁緩存文件，可以讓用戶離線的時候也可以訪問文件。
xmlns? ?設置html名空間，比如把網(wǎng)頁設置成xhml的時候可以使用這個值。
lang? ?設置網(wǎng)頁的描述語言，比如中文是zh；英文是en。
3、head/head頭部標簽在網(wǎng)頁中只能有一個，設置HTML文檔的頭部信息，里面內容不會在頁面中顯示出來·。
head里面的標記
meta 標記
title定義網(wǎng)頁的標題
link 鏈接
script? 標記JavaScript腳本的內容
style? 標記css樣式
meta? 標記
4、body/body只能有一個，顯示網(wǎng)頁的主體內容。
代碼示例：
請點擊輸入圖片描述
1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標題(顯示在瀏覽器上)/title 6 ? ? meta name="description" content="網(wǎng)頁內容的簡單描述" 7 ? ? meta name="keywords" content="網(wǎng)頁關鍵詞" 8 ? ? link rel="/css/style.css" 9 ? ? script src="/js/script.js"/script10 /head11 body12 ? ? header網(wǎng)頁頭部內容/header13 ? ? main網(wǎng)頁主要內容/main14 ? ? nav網(wǎng)頁的導航內容/nav15 ? ? footer網(wǎng)頁的頁腳內容/footer16 /body17 /html
請點擊輸入圖片描述
請點擊輸入圖片描述
三、寫在head中的標簽
（一）、meta標簽
meta元素的屬性：
name?描述信息的名稱，來標記這是一個什么樣的信息
http-equiv? 描述行為
content? 描述的內容
charset? ?指定網(wǎng)頁的編碼
1、name 屬性
1 meta name="author" content="nyw"2 ? ? !--作者， 定義網(wǎng)頁的作者 --3 meta name="description" content="meta標記學習"4 ? ? !-- 描述，描述網(wǎng)頁的實際內容 --5 meta name="keywords" content="HTML,meta"6 ? ? !-- 關鍵字，定義網(wǎng)頁關鍵字 --
2、http-equiv屬性
1 meta http-equiv="refresh" content="30"2 ? ? !-- 網(wǎng)頁30s后自動刷新 --3 meta http-equiv="refresh" content="5,url=dom.html"4 ? ? !-- 網(wǎng)頁30秒后跳轉到dom.html文檔 --
meta http-equiv="refresh" content="5,url=dom.html"
http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內容為5，表示5秒后跳轉到 dom.html這個文檔。
3、content 屬性
特殊屬性
content-type???指定http頭部信息的文字編碼（最為常用）
default-style? ?指定優(yōu)先使用的樣式單（stylesheet）
refresh? ? 用于網(wǎng)頁的自動刷新或是頁面跳轉
set-cookie???設置頁面的cookie（現(xiàn)在已經(jīng)不再推薦使用）
4、charset屬性
指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。
代碼實例：
為搜索引擎抓取機器人準備一些信息
這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。
meta name="robots" content="noindex,nofollow"
!-- name定義的是機器人，內容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --
代碼實例：
請點擊輸入圖片描述
1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標題(顯示在瀏覽器上)/title 6 ? ? meta name="author" content="nyw" 7 ? ? !--作者， 定義網(wǎng)頁的作者 -- 8 ? ? meta name="description" content="meta標記學習" 9 ? ? !-- 描述，描述網(wǎng)頁的實際內容 --10 ? ? meta name="keywords" content="HTML,meta"11 ? ? !-- 關鍵字，定義網(wǎng)頁關鍵字 --12 ? ? meta http-equiv="refresh" content="30"13 ? ? !-- 網(wǎng)頁30s后自動刷新 --14 ? ? meta http-equiv="refresh" content="5,url=dom.html"15 ? ? !-- 網(wǎng)頁30秒后跳轉到dom.html文檔 --16 ? ? meta name="robots" content="noindex,nofollow"17 ? ? !-- name定義的是機器人，內容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --18 /head19 body20 /body21 /html
請點擊輸入圖片描述
（二）、title、base標記
title和base標記都是寫在head標簽中
title：設置網(wǎng)頁的標題
寫法：title內容/title。
base：指定網(wǎng)頁跳轉基準URL，如果不指定的話默認為當前網(wǎng)站的當前路徑。
寫法：base href=""
base屬性值：
href? 指定網(wǎng)頁跳轉到基準URL，如果不指定的話則默認為當前網(wǎng)站的當前路徑。
base href=""??這是將頁面跳轉到百度的網(wǎng)站打開。
target? 指定鏈接的跳轉幀如果不指定的話，則是在當前頁面中跳轉。
base target="_blank"?網(wǎng)頁中的鏈接都應該在新的窗口中打開。
terget屬性值：
_blank? 在新窗口中打開被鏈接的文檔
_self? ?默認值，在相同框架中打開被鏈接的文檔
_parent? ?在父框架集中
_top? ?在整個窗口中打開被鏈接文檔·
framename? ?在指定框架中打開被鏈接文檔
（三）、link標記
link標記：鏈接外部文件時使用的標記，可以把外部文件的內容引入到當前文件中來，使當前網(wǎng)頁實現(xiàn)更多的功能。
link屬性：
href：指定鏈接外部路徑的路徑和文件名，要設置全路徑并且?guī)募?/p>
rel：引用文件，引用資源的類型定義
我們在使用link標簽引用外部文件的時候，外部文件的類型是多種多樣的。
alternate? ?代替文檔（種子，其他語言版本，其他格式等等）
author? ?網(wǎng)頁的作者
help? 幫助文件的鏈接
icon? 網(wǎng)頁的圖標
next? 如果是連續(xù)網(wǎng)頁的時候，指定下一個網(wǎng)頁
prefetch? ?把鏈接外部資源時提前緩存起來。
prev? ?如果是連續(xù)網(wǎng)頁
media? 鏈接文件或是資源屬于哪一種資源。
hreflang? ?鏈接文件的語言種類
type? 鏈接文件的mi/me類型（比如說，圖片圖標文本）
sizes? 根據(jù)link鏈接文件的類型，來指定文件的大小
代碼示例：
鏈接網(wǎng)頁圖標：
網(wǎng)站的圖標指定，可以顯示在瀏覽器的圖標欄，也可以被手機讀取作為網(wǎng)站的圖標存入收藏夾
1 !-- 網(wǎng)站的圖標指定，可以顯示在瀏覽器的圖標欄，也可以被手機讀取作為網(wǎng)站的圖標存入收藏夾 --2 ? ? link rel="icon"3 ? ? !-- 示例 --4 ? ? link rel="icon" href="img/favicon.png" type="image/png"5 ? ? link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"6 ? ? link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png"
注意：后面的href和前面type標注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機上
鏈接外部樣式單
1 link rel="stylesheet"2 ? ? link rel="stylesheet" href="style1.css" media="screen"3 ? ? link rel="stylesheet" href="style2.css" title="主題樣式文件"4 ? ? link rel=" alternate stylesheet" href="style3.css" title="可選樣式單"
說明：
alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進行選擇
media? 表示媒體類型為屏幕，可以是手機，但不包括打印機和投影儀
title? 對這個link進行簡單的說明
網(wǎng)站RSS種子指定
!-- 網(wǎng)站RSS種子指定 --
link rel="alternate" type="application/rss+xml"
為搜索引擎的準備的網(wǎng)頁的URL
!-- 為搜索引擎的準備的網(wǎng)頁的URL --
link rel="canonical"
link rel="canonical" href=""
HTML5是一種web標記語言，用于開發(fā)網(wǎng)頁使用。HTML是web應用中一種”超文本標記語言（HTML）“的第五次重大修改，我們將這次修改后的HTML標準，稱之為"HTML5"。
html5就是包括HTML、CSS和JavaScript在內的一套技術組合，強化了Web網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等 Web 應用的功能。所以說未來HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。但是HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
拓展資料：
萬維網(wǎng)的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。
2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過接近8年的艱苦努力，該標準規(guī)范終于制定完成。
標準通用標記語言下的一個應用HTML標準自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標準被束之高閣，為了推動Web標準化運動的發(fā)展，一些公司聯(lián)合起來，成立了一個叫做 Web Hypertext Application Technology Working Group （Web超文本應用技術工作組 -WHATWG） 的組織。
WHATWG 致力于 Web 表單和應用程序，而W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟） 專注于XHTML2.0。
在 2006 年，雙方?jīng)Q定進行合作，來創(chuàng)建一個新版本的 HTML。
百度百科_html5
重慶分公司
重慶分公司
