HTML5主要學(xué)習(xí)內(nèi)容有哪些

Html5開發(fā)可謂是這幾年來特別“受寵”的軟件開發(fā)了，html5不僅入行門檻低、薪資高，發(fā)展前景更是可觀，所以得到大家的追捧和青睞也是實(shí)至名歸的，那么想要從事html5開發(fā)學(xué)習(xí)要掌握哪些必備的知識呢？

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、興寧網(wǎng)絡(luò)推廣、小程序制作、興寧網(wǎng)絡(luò)營銷、興寧企業(yè)策劃、興寧品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供興寧建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：chinadenli.net

那么想要學(xué)好html5開發(fā)，那么需要掌握的專業(yè)技術(shù)有：

第1階段：前端頁面重構(gòu)：PC端網(wǎng)站布局、HTML5+CSS3基礎(chǔ)項(xiàng)目、WebAPP頁面布局；

第2階段：JavaScript高級程序設(shè)計(jì)：原生JavaScript交互功能開發(fā)、面向?qū)ο箝_發(fā)與ES5/ES6、JavaScript工具庫自主研發(fā)；

第3階段：PC端全棧項(xiàng)目開發(fā)：jQuery經(jīng)典特效交互開發(fā)、HTTP協(xié)議，Ajxa進(jìn)階與后端開發(fā)、前端工程化與模塊化應(yīng)用、PC端網(wǎng)站開發(fā)、PC端管理信息系統(tǒng)前端開發(fā)；

第4階段：移動端webAPP開發(fā)：Touch端項(xiàng)目、微信場景項(xiàng)目、應(yīng)用Vue.js開發(fā)WebApp項(xiàng)目、應(yīng)用Ionic開發(fā)WebApp項(xiàng)目、應(yīng)用React.js開發(fā)WebApp；

第5階段：混合（Hybrid）開發(fā)：各類混合應(yīng)用開發(fā)；

第6階段：NodeJS全棧開發(fā)：WebApp后端系統(tǒng)開發(fā)；

第7階段：大數(shù)據(jù)可視化：數(shù)據(jù)可視化入門、D3.jS詳解及項(xiàng)目實(shí)戰(zhàn)。

如今移動互聯(lián)網(wǎng)發(fā)展迅速，技術(shù)不斷的更新迭代，所學(xué)知識也需與時(shí)俱進(jìn)。現(xiàn)在市場上的主流互聯(lián)網(wǎng)網(wǎng)站，需要打造的是一流用戶交互體驗(yàn)。對于前端開發(fā)者的要求，不再是簡單的頁面展示，而是需要全棧式的前端開發(fā)工程師。

html5基本知識點(diǎ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標(biāo)記的里面

body? ? 網(wǎng)頁的內(nèi)容，寫在html標(biāo)記的里面

具體描述：

1、DOCTYPE? 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。

網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標(biāo)記，每個版本的DTD版本均有不同

使用例子

HTML4的例子

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

HTML5的例子

2、html/html?網(wǎng)頁文檔中的根標(biāo)記

html 標(biāo)簽有三個特殊的屬性

manifest? ?指定網(wǎng)頁緩存文件，可以讓用戶離線的時(shí)候也可以訪問文件。

xmlns? ?設(shè)置html名空間，比如把網(wǎng)頁設(shè)置成xhml的時(shí)候可以使用這個值。

lang? ?設(shè)置網(wǎng)頁的描述語言，比如中文是zh；英文是en。

3、head/head頭部標(biāo)簽在網(wǎng)頁中只能有一個，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會在頁面中顯示出來·。

head里面的標(biāo)記

meta 標(biāo)記

title定義網(wǎng)頁的標(biāo)題

link 鏈接

script? 標(biāo)記JavaScript腳本的內(nèi)容

style? 標(biāo)記css樣式

meta? 標(biāo)記

4、body/body只能有一個，顯示網(wǎng)頁的主體內(nèi)容。

代碼示例：

請點(diǎn)擊輸入圖片描述

1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="description" content="網(wǎng)頁內(nèi)容的簡單描述" 7 ? ? meta name="keywords" content="網(wǎng)頁關(guān)鍵詞" 8 ? ? link rel="/css/style.css" 9 ? ? script src="/js/script.js"/script10 /head11 body12 ? ? header網(wǎng)頁頭部內(nèi)容/header13 ? ? main網(wǎng)頁主要內(nèi)容/main14 ? ? nav網(wǎng)頁的導(dǎo)航內(nèi)容/nav15 ? ? footer網(wǎng)頁的頁腳內(nèi)容/footer16 /body17 /html

請點(diǎn)擊輸入圖片描述

請點(diǎn)擊輸入圖片描述

三、寫在head中的標(biāo)簽

（一）、meta標(biāo)簽

meta元素的屬性：

name?描述信息的名稱，來標(biāo)記這是一個什么樣的信息

http-equiv? 描述行為

content? 描述的內(nèi)容

charset? ?指定網(wǎng)頁的編碼

1、name 屬性

1 meta name="author" content="nyw"2 ? ? !--作者， 定義網(wǎng)頁的作者 --3 meta name="description" content="meta標(biāo)記學(xué)習(xí)"4 ? ? !-- 描述，描述網(wǎng)頁的實(shí)際內(nèi)容 --5 meta name="keywords" content="HTML,meta"6 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 --

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秒后跳轉(zhuǎn)到dom.html文檔 --

meta http-equiv="refresh" content="5,url=dom.html"

http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個文檔。

3、content 屬性

特殊屬性

content-type???指定http頭部信息的文字編碼（最為常用）

default-style? ?指定優(yōu)先使用的樣式單（stylesheet）

refresh? ? 用于網(wǎng)頁的自動刷新或是頁面跳轉(zhuǎn)

set-cookie???設(shè)置頁面的cookie（現(xiàn)在已經(jīng)不再推薦使用）

4、charset屬性

指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。

代碼實(shí)例：

為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息

這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。

meta name="robots" content="noindex,nofollow"

!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --

代碼實(shí)例：

請點(diǎn)擊輸入圖片描述

1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="author" content="nyw" 7 ? ? !--作者， 定義網(wǎng)頁的作者 -- 8 ? ? meta name="description" content="meta標(biāo)記學(xué)習(xí)" 9 ? ? !-- 描述，描述網(wǎng)頁的實(shí)際內(nèi)容 --10 ? ? meta name="keywords" content="HTML,meta"11 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 --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秒后跳轉(zhuǎn)到dom.html文檔 --16 ? ? meta name="robots" content="noindex,nofollow"17 ? ? !-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --18 /head19 body20 /body21 /html

請點(diǎn)擊輸入圖片描述

（二）、title、base標(biāo)記

title和base標(biāo)記都是寫在head標(biāo)簽中

title：設(shè)置網(wǎng)頁的標(biāo)題

寫法：title內(nèi)容/title。

base：指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

寫法：base href=""

base屬性值：

href? 指定網(wǎng)頁跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

base href=""??這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。

target? 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁面中跳轉(zhuǎn)。

base target="_blank"?網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。

terget屬性值：

_blank? 在新窗口中打開被鏈接的文檔

_self? ?默認(rèn)值，在相同框架中打開被鏈接的文檔

_parent? ?在父框架集中

_top? ?在整個窗口中打開被鏈接文檔·

framename? ?在指定框架中打開被鏈接文檔

（三）、link標(biāo)記

link標(biāo)記：鏈接外部文件時(shí)使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實(shí)現(xiàn)更多的功能。

link屬性：

href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/p>

rel：引用文件，引用資源的類型定義

我們在使用link標(biāo)簽引用外部文件的時(shí)候，外部文件的類型是多種多樣的。

alternate? ?代替文檔（種子，其他語言版本，其他格式等等）

author? ?網(wǎng)頁的作者

help? 幫助文件的鏈接

icon? 網(wǎng)頁的圖標(biāo)

next? 如果是連續(xù)網(wǎng)頁的時(shí)候，指定下一個網(wǎng)頁

prefetch? ?把鏈接外部資源時(shí)提前緩存起來。

prev? ?如果是連續(xù)網(wǎng)頁

media? 鏈接文件或是資源屬于哪一種資源。

hreflang? ?鏈接文件的語言種類

type? 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）

sizes? 根據(jù)link鏈接文件的類型，來指定文件的大小

代碼示例：

鏈接網(wǎng)頁圖標(biāo)：

網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾

1 !-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 --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標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上

鏈接外部樣式單

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 會在瀏覽器中會彈出一個對話框，供用戶可以進(jìn)行選擇

media? 表示媒體類型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀

title? 對這個link進(jìn)行簡單的說明

網(wǎng)站RSS種子指定

!-- 網(wǎng)站RSS種子指定 --

link rel="alternate" type="application/rss+xml"

為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL

!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL --

link rel="canonical"

link rel="canonical" href=""

HTML5從入門到精通的內(nèi)容介紹

《HTML5從入門到精通》系統(tǒng)、全面地講解了HTML語言及其最新版本HTML5的新功能與新特性，技術(shù)新穎實(shí)用。

目 錄

第1篇 HTML基礎(chǔ)

第1章 HTML基礎(chǔ) 3

教學(xué)錄像：22分鐘

1.1 HTML的基本概念 4

1.2 HTML發(fā)展史 4

1.3 HTML的基本結(jié)構(gòu) 5

1.3.1 HTML文件的編寫方法 5

1.3.2 文件開始標(biāo)簽html 7

1.3.3 文件頭部標(biāo)簽head 7

1.3.4 文件標(biāo)題標(biāo)簽title 7

1.3.5 文件主體標(biāo)簽body 7

1.3.6 編寫文件的注意事項(xiàng) 8

1.4 編寫第一個HTML文件 8

1.4.1 HTML文件的編寫方法 8

1.4.2 手工編寫頁面 9

1.4.3 使用可視化軟件制作頁面 10

1.4.4 使用瀏覽器瀏覽HTML文件 14

1.4.5 使用HTML開發(fā)的明日圖書網(wǎng) 14

1.5 小結(jié) 15

1.6 習(xí)題 16

第2章 HTML文件基本標(biāo)記 17

教學(xué)錄像：44分鐘

2.1 HTML頭部標(biāo)記 18

2.2 標(biāo)題標(biāo)記title 18

2.3 元信息標(biāo)記meta 19

2.3.1 設(shè)置頁面關(guān)鍵字 19

2.3.2 設(shè)置頁面描述 20

2.3.3 設(shè)置編輯工具 20

2.3.4 設(shè)定作者信息 21

2.3.5 限制搜索方式 22

2.3.6 設(shè)置網(wǎng)頁文字及語言 22

2.3.7 設(shè)置網(wǎng)頁的定時(shí)跳轉(zhuǎn) 23

2.3.8 設(shè)定有效期限 24

2.3.9 禁止從緩存中調(diào)用 24

2.3.10 刪除過期的cookie 25

2.3.11 強(qiáng)制打開新窗口 25

2.3.12 設(shè)置網(wǎng)頁的過渡效果 26

2.4 基底網(wǎng)址標(biāo)記base 29

2.5 頁面的主體標(biāo)記body 30

2.5.1 設(shè)置文字顏色——text 31

2.5.2 背景顏色屬性——bgcolor 32

2.5.3 背景圖像屬性——background 32

2.5.4 設(shè)置鏈接文字屬性——link 35

2.5.5 設(shè)置邊距——margin 37

2.6 頁面的注釋標(biāo)記 38

2.7 實(shí)例演練——創(chuàng)建基本的HTML網(wǎng)頁 38

2.8 小結(jié) 39

2.9 習(xí)題 40

第3章 設(shè)計(jì)網(wǎng)頁文本內(nèi)容 41

教學(xué)錄像：29分鐘

3.1 標(biāo)題文字的建立 42

3.1.1 標(biāo)題文字標(biāo)記h 42

3.1.2 標(biāo)題文字的對齊方式——align 43

3.2 設(shè)置文字格式 44

3.2.1 設(shè)置文字字體——face 44

3.2.2 設(shè)置字號——size 45

3.2.3 設(shè)置文字顏色——color 46

3.2.4 粗體、斜體、下劃線——strong、em、u 46

3.2.5 上標(biāo)與下標(biāo)——sup、sub 47

3.2.6 設(shè)置刪除線——strike 48

3.2.7 等寬文字標(biāo)記——code 49

3.2.8 空格——nbsp; 49

3.2.9 其他特殊符號 50

3.3 設(shè)置段落格式 51

3.3.1 段落標(biāo)記——p 51

3.3.2 取消文字換行標(biāo)記——nobr 52

3.3.3 換行標(biāo)記——br 53

3.3.4 保留原始排版方式標(biāo)記——pre 53

3.3.5 居中對齊標(biāo)記——center 54

3.3.6 向右縮進(jìn)標(biāo)記——blockquote 55

3.4 水平線標(biāo)記 56

3.4.1 添加水平線——hr 56

3.4.2 設(shè)置水平線的寬度與高度

——width、height 57

3.4.3 設(shè)置水平線的顏色——color 58

3.4.4 設(shè)置水平線的對齊方式——align 59

3.4.5 去掉水平線陰影——noshade 60

3.5 其他文字標(biāo)記 60

3.5.1 文字標(biāo)注標(biāo)記——ruby 60

3.5.2 聲明變量標(biāo)記——var 61

3.5.3 忽視HTML標(biāo)記

——plaintext、xmp 62

3.6 小結(jié) 63

3.7 習(xí)題 63

第4章 使用列表 65

教學(xué)錄像：35分鐘

4.1 列表的標(biāo)記 66

4.2 使用無序列表 66

4.2.1 無序列表標(biāo)記——ul 66

4.2.2 無序列表的符號類型——type 67

4.3 使用有序列表 69

4.3.1　有序列表標(biāo)記——ol 69

4.3.2　有序列表的屬性——type 70

4.3.3　有序列表的起始數(shù)值——start 72

4.4 定義列表標(biāo)記——dl 73

4.5 菜單列表標(biāo)記——menu 74

4.6 目錄列表——dir 75

4.7 使用嵌套列表 76

4.7.1　定義列表的嵌套 77

4.7.2　無序列表和有序列表的嵌套 78

4.8 小結(jié) 79

4.9 習(xí)題 80

第5章 超鏈接 81

教學(xué)錄像：22分鐘

5.1 超鏈接的基本知識 82

5.1.1 超鏈接 82

5.1.2 絕對路徑 82

5.1.3 相對路徑 82

5.2 超鏈接的建立 83

5.2.1 超鏈接標(biāo)記的基本語法 83

5.2.2 建立文本超鏈接 83

5.2.3 設(shè)置超鏈接的目標(biāo)窗口 85

5.3 內(nèi)部鏈接 87

5.4 書簽鏈接 89

5.4.1 建立書簽 89

5.4.2 鏈接到同一頁面的書簽 91

5.4.3 鏈接到不同頁面的書簽 92

5.5 外部鏈接 93

5.5.1 通過HTTP協(xié)議 94

5.5.2 通過FTP 94

5.5.3 發(fā)送E-mail 95

5.5.4 下載文件 96

5.6 其他鏈接 98

5.6.1 腳本鏈接 98

5.6.2 空鏈接 99

5.7 小結(jié) 99

5.8 習(xí)題 100

第6章 使用圖像 101

教學(xué)錄像：35分鐘

6.1 圖像的基本格式 102

6.2 添加圖像——img 102

6.3 設(shè)置圖像屬性 103

6.3.1 圖像高度——height 103

6.3.2 圖像寬度——width 104

6.3.3 圖像邊框——border 105

6.3.4 圖像水平間距——hspace 107

6.3.5 圖像垂直間距——vspace 108

6.3.6 圖像相對于文字基準(zhǔn)線的對齊方式

——align 108

6.3.7 圖像的提示文字——alt 110

6.4 圖像的超鏈接 111

6.4.1　設(shè)置圖像的超鏈接 111

6.4.2　設(shè)置圖像熱區(qū)鏈接 112

6.5 小結(jié) 116

6.6 習(xí)題 116

第7章 表格的應(yīng)用 118

教學(xué)錄像：48分鐘

7.1　創(chuàng)建表格 119

7.1.1　表格的基本構(gòu)成——table、tr、td 119

7.1.2　表格的標(biāo)題——caption 120

7.1.3　表格的表頭——th 121

7.2　設(shè)置表格基本屬性 123

7.2.1　表格的寬度——width 123

7.2.2　表格的高度——height 125

7.2.3　表格的對齊方式——align 126

7.3　設(shè)置表格的邊框 127

7.3.1　表格邊框的寬度——border 127

7.3.2　表格邊框的顏色——bordercolor 128

7.3.3　表格內(nèi)框的寬度——cellspacing 130

7.3.4　表格內(nèi)文字與邊框的間距

——cellpadding 131

7.4　設(shè)置表格背景 132

7.4.1　表格的背景顏色——bgcolor 132

7.4.2　表格的背景圖像——background 133

7.5　設(shè)置表格的行屬性 134

7.5.1　高度的控制——height 134

7.5.2　行的邊框顏色——bordercolor 135

7.5.3　行的背景顏色——bgcolor、background 136

7.5.4　行文字的水平對齊方式——align 137

7.5.5　行文字的垂直對齊方式——valign 139

7.5.6 表格標(biāo)題的垂直對齊方式——align 140

7.6　調(diào)整單元格屬性 141

7.6.1　單元格大小——width、height 141

7.6.2　單元格水平跨度——colspan 142

7.6.3　單元格垂直跨度——rowspan 143

7.6.4　單元格對齊方式——align、valign 144

7.6.5　單元格的背景色 146

7.6.6　單元格的邊框顏色——bordercolor 147

7.6.7　單元格的亮邊框——bordercolorlight 148

7.6.8　單元格的暗邊框——bordercolordark 150

7.6.9　單元格的背景圖像——background 151

7.7　表格的結(jié)構(gòu) 152

7.7.1　表格的表頭標(biāo)記——thead 153

7.7.2　表格的表主體標(biāo)記——tbody 154

7.7.3　表格的表尾標(biāo)記——tfoot 156

7.8 表格的嵌套 157

7.9 小結(jié) 159

7.10 習(xí)題 159

第8章 層標(biāo)記——div 161

教學(xué)錄像：33分鐘

8.1 層 162

8.1.1 層的分類 162

8.1.2 定義數(shù)據(jù)塊 162

8.2 div標(biāo)簽 163

8.2.1 div標(biāo)簽的簡介 163

8.2.2 div標(biāo)簽的屬性 164

8.2.3 span標(biāo)簽與div標(biāo)簽 170

8.3 iframe標(biāo)簽 172

8.3.1 iframe標(biāo)簽的簡介 172

8.3.2 iframe標(biāo)簽的屬性 172

8.4 layer標(biāo)簽和ilayer標(biāo)簽 174

8.4.1 標(biāo)簽層的使用 175

8.4.2 layer標(biāo)簽和ilayer標(biāo)簽的區(qū)別 176

8.5 應(yīng)用div制作下拉菜單導(dǎo)航條 176

8.6 小結(jié) 179

8.7 習(xí)題 179

第9章 編輯表單 181

教學(xué)錄像：26分鐘

9.1　使用表單標(biāo)簽——form 182

9.1.1　處理動作——action 182

9.1.2　表單名稱——name 183

9.1.3　傳送方法——method 183

9.1.4　編碼方式——enctype 184

9.1.5　目標(biāo)顯示方式——target 185

9.2 添加控件 185

9.3　輸入類的控件 186

9.3.1　文字字段——text 186

9.3.2　密碼域——password 187

9.3.3　單選按鈕——radio 188

9.3.4　復(fù)選框——checkbox 189

9.3.5　普通按鈕——button 190

9.3.6　提交按鈕——submit 191

9.3.7　重置按鈕——reset 192

9.3.8　圖像域——image 193

9.3.9　隱藏域——hidden 195

9.3.10　文件域——file 195

9.4　列表/菜單標(biāo)記 197

9.5　文本域標(biāo)記——textarea 198

9.6　id標(biāo)記 199

9.7　小結(jié) 200

9.8　習(xí)題 200

第10章 多媒體頁面 202

視頻講解：18分鐘

10.1 設(shè)置滾動文字 203

10.1.1 滾動文字標(biāo)簽——marquee 203

10.1.2 滾動方向?qū)傩浴猟irection 203

10.1.3 滾動方式屬性——behavior 204

10.1.4 滾動速度屬性——scrollamount 205

10.1.5 滾動延遲屬性——scrolldelay 206

10.1.6 滾動循環(huán)屬性——loop 207

10.1.7 滾動范圍屬性——width、height 208

10.1.8 滾動背景顏色屬性——bgcolor 209

10.1.9 滾動空間屬性——hspace、vspace 209

10.2 添加背景音樂 211

10.2.1　設(shè)置背景音樂——bgsound 211

10.2.2　設(shè)置循環(huán)播放次數(shù)——loop 212

10.3 添加多媒體文件 213

10.3.1 添加多媒體文件標(biāo)記——embed 213

10.3.2 設(shè)置自動運(yùn)行——autostart 214

10.3.3 設(shè)置媒體文件的循環(huán)播放——loop 215

10.3.4 隱藏面板——hidden 216

10.3.5 添加其他類型的媒體文件 217

10.4 小結(jié) 217

10.5 習(xí)題 218

第2篇 HTML 5高級應(yīng)用

第11章 HTML 5的新特性 221

視頻講解：6分鐘

11.1 誰在開發(fā)HTML 5 222

11.2 HTML 5的新認(rèn)識 222

11.2.1 兼容性 222

11.2.2 實(shí)用性和用戶優(yōu)先 222

11.2.3 化繁為簡 223

11.3 無插件范式 223

11.4 HTML 5的新特性 224

11.5 小結(jié) 224

第12章 HTML 5與HTML 4的區(qū)別 225

視頻講解：51分鐘

12.1 語法的改變 226

12.1.1 HTML 5的語法變化 226

12.1.2 HTML 5中的標(biāo)記方法 226

12.1.3 HTML 5語法中的3個要點(diǎn) 227

12.1.4 標(biāo)簽實(shí)例 228

12.2 新增的元素和廢除的元素 228

12.2.1 新增的結(jié)構(gòu)元素 228

12.2.2 新增的塊級的語義元素 230

12.2.3 新增的行內(nèi)的語義元素 231

12.2.4 新增的嵌入多媒體元素與交互性元素 231

12.2.5 新增的input元素的類型 232

12.2.6 廢除的元素 233

12.3 新增的屬性和廢除的屬性 234

12.3.1 新增的屬性 234

12.3.2 廢除的屬性 236

12.4 全局屬性 237

12.4.1 contentEditable屬性 237

12.4.2 designMode屬性 238

12.4.3 hidden屬性 239

12.4.4 spellcheck屬性 239

12.4.5 tabindex屬性 240

12.5 小結(jié) 240

12.6 習(xí)題 240

第13章 HTML 5的結(jié)構(gòu) 242

視頻講解：20分鐘

13.1 新增的主體結(jié)構(gòu)元素 243

13.1.1 article元素 243

13.1.2 section元素 245

13.1.3 nav元素 247

13.1.4 aside元素 248

13.1.5 time元素 250

13.1.6 pubdate屬性 250

13.2 新增的非主體結(jié)構(gòu)元素 251

13.2.1 header元素 251

13.2.2 hgroup元素 252

13.2.3 footer元素 252

13.2.4 address元素 253

13.3 小結(jié) 253

13.4 習(xí)題 254

第14章 HTML 5中的表單 255

視頻講解：50分鐘

14.1 新增表單元素與屬性 256

14.1.1 新增的屬性 256

14.1.2 增加與改良的input元素的種類 259

14.1.3 output元素的添加 264

14.1.4 應(yīng)用新增元素制作注冊表單 264

14.2 對表單的驗(yàn)證 266

14.2.1 自動驗(yàn)證 266

14.2.2 checkValidity顯式驗(yàn)證法 267

14.2.3 避免驗(yàn)證 268

14.2.4 使用setCustomValidity方法自定義

錯誤信息 268

14.3 增加的頁面元素 269

14.3.1 新增的figure元素 270

14.3.2 新增的details元素 271

14.3.3 新增的mark元素 272

14.3.4 新增的progress元素 274

14.3.5 新增的meter元素 275

14.3.6 改良的ol列表 276

14.3.7 改良的dl列表 276

14.3.8 加以嚴(yán)格限制的cite元素 277

14.3.9 重新定義的small元素 278

14.4 小結(jié) 278

14.5 習(xí)題 279

第15章 HTML 5中的文件與拖放 280

視頻講解：40分鐘

15.1 選擇文件 281

15.1.1 通過file對象選擇文件 281

15.1.2 使用blob接口獲取文件的類型與大小 282

15.1.3 通過類型過濾選擇的文件 283

15.2　使用FileReader接口讀取文件 285

15.2.1 檢測瀏覽器是否支持FileReader接口 285

15.2.2　FileReader接口的方法 285

15.2.3 使用readAsDataURL方法預(yù)覽圖片 286

15.2.4　使用readAsText方法讀取文本文件 287

15.2.5　FileReader接口中的事件 288

15.3 拖放API 290

15.3.1 實(shí)現(xiàn)拖放的步驟 290

15.3.2 通過拖放顯示歡迎信息 291

15.4 dataTransfer對象應(yīng)用詳解 293

15.4.1 使用effectAllowed和dropEffect屬性

設(shè)置拖放效果 293

15.4.2 使用setDragImage方法設(shè)置拖放圖標(biāo) 294

15.5 小結(jié) 295

15.6 習(xí)題 295

第16章 多媒體播放 296

視頻講解：35分鐘

16.1 HTML 5多媒體的簡述 297

16.1.1 HTML 4中多媒體的應(yīng)用 297

16.1.2 HTML 5頁面中的多媒體 297

16.2 多媒體元素基本屬性 298

16.3 多媒體元素常用方法 302

16.3.1 媒體播放時(shí)的方法 302

16.3.2 canPlayType(type)方法 304

16.4 多媒體元素重要事件 304

16.4.1 事件處理方式 304

16.4.2 事件介紹 305

16.4.3 事件實(shí)例 306

16.5 小結(jié) 308

16.6 習(xí)題 309

第17章 繪制圖形 310

視頻講解：1小時(shí)32分鐘

17.1 canvas的基礎(chǔ)知識 311

17.1.1 canvas是什么 311

17.1.2 在頁面中放置canvas元素 311

17.1.3 繪制帶邊框的矩形 312

17.2 在畫布中使用路徑 314

17.2.1 使用arc方法繪制圓形 314

17.2.2 使用moveTo與lineTo路徑繪制火柴人 316

17.2.3 貝塞爾和二次方曲線 317

17.3 運(yùn)用樣式與顏色 319

17.3.1 fillStyle 和 strokeStyle屬性 319

17.3.2 透明度 globalAlpha 321

17.3.3 線型 Line styles 323

17.4 繪制漸變圖形 325

17.4.1 繪制線性漸變 325

17.4.2 繪制徑向漸變 326

17.5 繪制變形圖形 328

17.5.1 坐標(biāo)的變換 328

17.5.2 矩陣變換 330

17.6 組合多個圖形 333

17.7 給圖形繪制陰影 335

17.8 應(yīng)用圖像 336

17.8.1 繪制圖像 336

17.8.2 圖像的局部放大 338

17.8.3 圖像平鋪 339

17.8.4 圖像裁剪 341

17.8.5 像素的處理 342

17.9 繪制文字 344

17.10 保存與恢復(fù)狀態(tài) 345

17.11 文件的保存 346

17.12 對畫布繪制實(shí)現(xiàn)動畫 347

17.13 綜合實(shí)例——桌面時(shí)鐘 348

17.14 小結(jié) 350

17.15 習(xí)題 351

第18章 數(shù)據(jù)存儲 352

視頻講解：50分鐘

18.1 初識Web Storage 353

18.1.1 什么是Web Storage 353

18.1.2 使用Web Storage中的API 353

18.1.3 sessionStorage和localStorage的實(shí)例

——計(jì)數(shù)器 355

18.1.4 Web Storage綜合實(shí)例——留言本 357

18.1.5 JSON對象的存數(shù)實(shí)例——用戶信息卡 359

18.2 本地?cái)?shù)據(jù)庫 361

18.2.1 Web SQL數(shù)據(jù)庫簡介 361

18.2.2 使用Web SQL Database API 362

18.2.3 本地?cái)?shù)據(jù)庫實(shí)例——用戶登錄 363

18.3 小結(jié) 367

18.4 習(xí)題 367

第19章 離線應(yīng)用程序 368

視頻講解：13分鐘

19.1 HTML 5離線Web應(yīng)用概述 369

19.1.1 離線Web應(yīng)用概述 369

19.1.2 本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別 370

19.2 創(chuàng)建HTML 5離線應(yīng)用 370

19.2.1 緩存清單（manifest） 370

19.2.2 配置IIS服務(wù)器 372

19.2.3 瀏覽緩存清單 372

19.3 瀏覽器與服務(wù)器的交互過程 373

19.4 applicationCache對象 374

19.4.1 swapCache方法 375

19.4.2 applicationCache對象的事件 376

19.5 小結(jié) 379

19.6 習(xí)題 379

第20章 使用Web Worker處理線程 380

視頻講解：25分鐘

20.1 Web Worker概述 381

20.1.1 創(chuàng)建和使用Worker 381

20.1.2 Web Worker應(yīng)用實(shí)例——求和運(yùn)算 382

20.2 在Worker內(nèi)部能做什么 383

20.3 多個JavaScript文件的加載與執(zhí)行 384

20.4 線程嵌套 384

20.4.1 單層嵌套 385

20.4.2 在多個子線程中進(jìn)行數(shù)據(jù)的交互 387

20.5 小結(jié) 390

20.6 習(xí)題 390

第21章 通信API 391

視頻講解：4分鐘

21.1 跨文檔消息通信 392

21.1.1 使用postMessageAPI 392

21.1.2 跨文檔消息傳輸 392

21.2 小結(jié) 394

第22章 獲取地理位置信息 395

視頻講解：12分鐘

22.1 Geolocation API的概述 396

22.1.1 使用getCurrentPosition方法獲取

當(dāng)前地理位置 396

22.1.2 持續(xù)監(jiān)視當(dāng)前地理位置的信息 398

22.1.3 停止獲取當(dāng)前用戶的地理位置信息 398

22.2 position對象 398

22.3 在google地圖上顯示“我在這里” 399

22.4 小結(jié) 401

22.5 習(xí)題 401

第3篇 HTML 5項(xiàng)目實(shí)戰(zhàn)

第23章 旅游信息網(wǎng)前臺頁面 405

視頻講解：20分鐘

html5入門教程（八）history詳解

HTML5新添加了對歷史的管理，用戶可以通過”前進(jìn)”和”后退”按鈕進(jìn)行歷史頁面的切換。這讓一些不在新頁面中打開的新頁面前進(jìn)后退自如，提高了用戶體驗(yàn)。

通過haschange事件，可以知道URL的參數(shù)什么時(shí)候發(fā)生了變化，也就是什么時(shí)候該有所反應(yīng)。通過狀態(tài)管理的API，能夠在不加載新頁面的情況下改變?yōu)g覽器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三個參數(shù)：1.要存的內(nèi)容 2.標(biāo)題(一般寫個空的字符串) 3.地址(可選)。小例子如下

執(zhí)行了history.pushState()方法后，新的狀態(tài)信息就會被加入到歷史狀態(tài)棧，而瀏覽器地址欄也會變成新的相對URL。但是，瀏覽器并不會想服務(wù)器發(fā)送請求，即使歷史狀態(tài)改變之后查新location.href也會返回與地址欄中相同的地址。另外，第二個參數(shù)目前還沒有瀏覽器實(shí)現(xiàn)，所以完全可以只傳入一個空字符串即可，或者一個短標(biāo)題也可以。第一個參數(shù)則應(yīng)該盡可能提供初始化頁面狀態(tài)所需的各種信息。

因?yàn)閔istory.pushState()方法會創(chuàng)建新的歷史狀態(tài)，所以會發(fā)現(xiàn)”后退”按鈕也可以使用了。按下”后退”按鈕，會觸發(fā)window對象的popstate事件。Popstate事件的事件對象有一個state屬性，這個屬性就包含著當(dāng)初以第一個參數(shù)傳遞給pushState()的狀態(tài)對象。小例子如下

更新狀態(tài)直接更新當(dāng)前地址欄的內(nèi)容，他不會產(chǎn)生后退操作，只是單純修改當(dāng)前地址。

要更新當(dāng)前歷史狀態(tài)，可以調(diào)用replaceState()，傳入的參數(shù)與pushState()方法的前兩個參數(shù)相同。調(diào)用replaceState()不會在歷史狀態(tài)棧中創(chuàng)建新狀態(tài)，只會重寫當(dāng)前狀態(tài)。小例子如下

網(wǎng)上例子：

他這個還是創(chuàng)建了一個數(shù)組，然后把生成的內(nèi)容存到數(shù)組中，在根據(jù)傳的值

把數(shù)組對應(yīng)的內(nèi)容給讀出來。

history有個問題是第一次點(diǎn)擊是無效的，只有第二次才能起作用。這就非常的不爽了。

通常我們也不會需要他執(zhí)行特別復(fù)雜的操作，反而是hash非常的好用。

hash是直接在url后面加一個#，然后立即可以被onpopstate事件檢測到。

于是我們可以這樣去做：

作為一名前端開發(fā)工程師,需要掌握html5哪些知識?

隨著移動互聯(lián)網(wǎng)的發(fā)展，web前端逐漸受到企業(yè)的重視，前端開發(fā)人員的薪資也水漲船高，越來越多的人看好前端行業(yè)的發(fā)展，想要轉(zhuǎn)行加入。下面，給大家分享一份web前端學(xué)習(xí)路線圖，希望對初學(xué)者有所幫助。Web前端行業(yè)的發(fā)展，讓前端人員能完成比以前更多的職責(zé)范圍，所以未來前端可以寬口徑就業(yè)，前景非常好。

對于零基礎(chǔ)的人而言，要怎么學(xué)習(xí)web前端呢?

1、 前端頁面重構(gòu)。主要內(nèi)容為PC端網(wǎng)站布局、Photoshop 工具及切圖、H5移動端網(wǎng)頁布局、HTML5+CSS3新特性與交互。學(xué)習(xí)目標(biāo)是完成PC端網(wǎng)站布局，可實(shí)現(xiàn)響應(yīng)式布局，一套代碼適配 PC 端、移動端、平板設(shè)備等。

2、 前后端網(wǎng)頁交互。主要內(nèi)容為JavaScript語法全面進(jìn)階、ES6 到 ES10 新語法實(shí)踐、jQuery 應(yīng)用及插件使用、設(shè)計(jì)模式及插件編寫、封裝JS工具庫及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化與模塊化應(yīng)用以及PC 端全棧開發(fā)項(xiàng)目等。學(xué)習(xí)目標(biāo)是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建項(xiàng)目及開發(fā)項(xiàng)目。

3、 Node.js + 前端框架。主要內(nèi)容為Node.js 全面進(jìn)階、Koa2+MongoDB搭建服務(wù)、Vue.js 框架、React.js 框架、小程序云開發(fā)與小程序框架、原生APP與混合APP、數(shù)據(jù)可視化與桌面應(yīng)用等。學(xué)習(xí)目標(biāo)是掌握桌面應(yīng)用及可視化大數(shù)據(jù)，實(shí)現(xiàn)復(fù)雜數(shù)據(jù)展示類項(xiàng)目，能夠獨(dú)立完成前后臺相關(guān)功能，勝任HTML5全棧開發(fā)工程師職位。很多學(xué)習(xí)web前端的朋友都希望在學(xué)成后能找到一份滿意的工作，所以我們在學(xué)習(xí)過程中一定要注意實(shí)戰(zhàn)經(jīng)驗(yàn)的積累，如果你所學(xué)的東西對企業(yè)沒有用，那你所做的一切都是無用功

html5零基礎(chǔ)入門教程

1、離線存儲

HTML 5可以讓你的WEB應(yīng)用程序離線也能運(yùn)行，它提供了一個稱作“應(yīng)用程序緩存”的離線存儲功能，因此即使當(dāng)用戶離線，瀏覽器仍然能夠訪問到它所需的文件。這些文件可以是HM, CSS，Javascript或者其它任何網(wǎng)頁運(yùn)行所需要的文件。

2、拖拽功能

HTML 5提供了可以用來設(shè)計(jì)交互應(yīng)用程序的本地拖拽功能，通過這個特性你可以拖動任何元素然后把它放到你想放到地方。

3、地理位置定位技術(shù)

HTML 5的地理位置定位API可以讓你與所信任的網(wǎng)站分享你當(dāng)前的位置信息，當(dāng)然，隱私問題是這特性所主要考慮的，W3. org聲明：瀏覽器在沒有用戶許可的情況下不允許私自向網(wǎng)站發(fā)送用戶的地理位置信息。

比如一位用戶使用Firefox瀏覽器訪問了一個實(shí)現(xiàn)地理位置定位技術(shù)的網(wǎng)頁，瀏覽器會向用戶詢問是否共享他的地理位置信息，如果用戶同意，F(xiàn)irefox會收集附近無線接入點(diǎn)和訪問者IP地址信息，并把這些信息發(fā)送到默認(rèn)設(shè)定的Google地理位置服務(wù)，處理之后的位置信息將會發(fā)送給用戶訪問的這個網(wǎng)站。

4、音頻和視頻

當(dāng)前的HML缺少在頁面中嵌入多媒體文件的特性，因此多媒體文件的嵌入需要使用各種的插件。比如FLASH被廣泛地用來嵌入音頻和視頻文件。現(xiàn)在可以非常方便地使用HTML5提供的audio和video標(biāo)簽，而不用任何插件。

5、表單輸入

HTML5提供了幾個新的表單input類型，像彈出日歷，調(diào)色板，數(shù)字輸入框等等。這些可以創(chuàng)建擁有更好的輸入控制和驗(yàn)證的高效表單。

本文題目：html5基礎(chǔ)知識的簡單介紹
標(biāo)題路徑：http://chinadenli.net/article19/dsgpgdh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、企業(yè)建站、ChatGPT、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營銷、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)