html理論基礎

一、 HTML學習記錄

0. 前言：

web标準的介紹

w3c: 網際網路聯盟組織，用來指定Web标準的組織
web标準：制作網頁要遵循的規範
結構：html ; 表現：css ; 行為：JavaScript

1. HTML介紹：

1.1 什麼是HTML?

全稱是hypertext markup language, 超文本标記語言，不是一種程式設計語言，是一種标記語言。由一系列的元素組成。
作用：主要作用是負責描述文檔語義的語言。
注意：HTML不是一個程式設計語言，是一個标記語言，是沒有編譯過程的，HTML頁面直接由浏覽器解析執行。

1.2 計算機編碼介紹

1.2.1 基本知識

bit：計算機存儲的最小機關。以 0 或 1 來表示比特位的值。網絡資訊傳輸的基本機關。
位元組：8 個比特位表示一個位元組。
字元：字元是可使用多種不同字元方案或代碼頁來表示的抽象實體。

1.2.2 字元編碼

ASCII：用一個位元組表示一個字元，隻能表示英語字母，特殊符号，數字。
GB2312 : 對ASCII的中文拓展
GBK: 融合GB2312并新增 20000 個新的漢字（包括繁體字）和符号
unicode編碼（統一編碼）utf-32：四個位元組表示一個字元，32個bit，效率太低
utf-16 : 兩個位元組/四個位元組表示一個字元
utf-8 : 根據字元的不同選擇編碼的長度，ascII編碼中的符号仍然采用一個位元組來編碼，格式0XXXXXXX。中文采用2個位元組來表示，格式110XXXXX 10XXXXXX

1.3 顔色介紹 3個位元組

純單詞表示：gray，green，red
10進制表示：rgb(255, 0, 0), rgb(0, 255, 0) 順序是紅、綠、藍；如果有第四個值，代表透明度
16進制表示：#FF0000 , #00FF00

1.4 什麼是元素？

元素的主要部分如下圖所示：元素 = 開頭标簽 + 内容 + 結束标簽

html理論基礎

1.5 什麼是屬性：包括布爾屬性，可以沒有屬性值，比如checked等

html理論基礎

2. HTML規範: （HTML不區分大小寫）

2.1 XHTML：

什麼是XHMTL：

指的是可擴充的超文本标記語言，是一個更嚴格/更純淨的HTML版本，以XML應用的方式定義的HTML

編寫XHTML的文法：

序号	規則
1	必須正确嵌套，不能交叉嵌套
2	标簽必須小寫且必須關閉
3	所有的屬性必須加引号
4	所有的屬性必須加引号
5	必須要有DTD文檔類型定義

2.2 HTML文檔剖析

1. <!DCOTYPE html>：文檔類型。是一個聲明，在文檔的最前面，主要作用是告訴浏覽器按着哪種規範解析頁面

2. <html></html>：html元素，該元素将所有内容包裝在整個頁面上，也稱為根元素

3. <head></head>：是所有頭部元素的容器

4. <body></body>：使用者通路吧頁面時要顯示的所有内容

3. HTML結構詳解

3.1 文檔聲明頭：

doctype definition，簡稱DTD, 告訴在文檔的最前面，主要作用是告訴浏覽器按着哪種規範解析頁面

具體的聲明頭：

版本	聲明頭	介紹
html1-html3	美國軍方及高等研究所用	無
html4.01 strict	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`	不允許使用架構樣式相關标簽屬性不允許使用等
html4.01 Transitional	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`	不允許使用架構
html4.01 framset	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">`	允許使用架構
xhtml4.10- strict	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`	必須以正确的xml格式标記
xhtml4.10 Transitional	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`	必須以正确的xml格式标記
xhtml4.10 framset	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">`	必須以正确的xml格式标記
html5	`<!DOCTYPE html>`

為什麼5中隻需要寫!DOCTYPE html？

HTML4.01中基于SGML，是以需要引用DTD, DTD 規定了标記語言的規則

HTML5 不基于 SGML，是以不需要引用 DTD。

3.2 HTML head

meta标簽

name	description
charset	允許該文檔使用的字元集
name = author	content = 作者資訊
name = description	content = 描述資訊做到SEO(搜尋引擎優化)
name=“Keywords”	content=網頁關鍵字有助于SEO
name=“viewpoint”	content=width=device-width, initial-scale=1.0 表示視口寬度等于螢幕寬度
HTTP－EQUIV=refresh	content=3;url 指定時間後跳到指定頁面

除了上面的refresh屬性規定重定向外, 還可以設定location：

res.statusCode = 301/302;
res.setHeader("Location", "url")

title标簽：設定網頁題目, 也有助于SEO
link外部資源連結元素

name	description
rel	規定目前文檔與連結文檔的關系常用icon/stylesheet
url	屬性指定連結資源的url
type	定義連結到的内容的類型 mime類型
sizes	定義圖示大小
media	指定适用的媒體

引用樣式的三種方式

名字	方式	具體代碼	位置
外部樣式表	link引用	`<link rel="stylesheet" href="css/demo.css" target="_blank" rel="external nofollow" >`	外部
内部樣式表	style标簽内部寫css	`<style type="text/css">p{color: blueviolet;}</style>`	head
内聯樣式表	直接在标簽内部加style屬性	`<div class="example-paragraphs" style="color: aqua;">`	body

引用js腳本的兩種方式

1 、第一種方式：直接放在script标簽中

javascript腳本的執行會阻塞它後面的html的解析
```
<script>
	var header = document.querySelector(".header");
	...
</script>
<div></div>
           
```
2、第二種方式：外鍊腳本

外鍊腳本的加載會阻塞它後面的html的解析
```
<script src="js/form.js"></script>
<input type="button" value="yz">
           
```
但是多個外鍊腳本他們之間是并行加載的
```
<script src="js/form.js"></script>
<script src="js/domo.js"></script>
<script src="js/snake.js"></script>
           
```
對于外鍊類型，如果在script後面加上async/defer，腳本的加載的過程都不會阻塞html的解析，async和defer不同的是：
- async。腳本加載後就會立刻開始腳本執行，并停止對html的解析，待腳本執行完再繼續html的解析
- defer。腳本加載後，會等到全部的html的文檔都解析完，腳本才開始執行

3.3 body中的标簽屬性

3.3.1 塊級元素VS内聯元素

塊級元素： 
 · 會在元素之前的内容上換行，在它之後的元素也會換行
 · 塊級元素不會嵌套在一個内聯元素中，内聯元素可以嵌套在一個塊級元素中
 · 常見的塊級元素包括：段落、清單、導航菜單等
 
 内聯元素：
 · 不會導緻新行的出現
 · 常見的内聯元素包括：超連結、強調元素、span等

3.3.2 字型标簽

預留字元要替換到字元實體，具體參考連結, 其中需要牢記背誦的見下表

轉義字元	字元	描述
	空格
`<`	<	小于号
`>`	>	大于号
`©`	©	商标

文字标簽清單 big在html5中已經删除

html理論基礎

3.3.3 body中非字型标簽

1⃣️ . a标簽

可以實作的功能包括：連結到絕對url ; 頁面内的跳轉（其中href = # -> 回到頁面頂部) ; 檔案的下載下傳等等

屬性	含義
download	提示使用者儲存連結的url 。若沒有值可能是從url路徑截取/從請求頭裡的content-disposition等位置
href	超連結指向的url
type	提示連結的url的格式 mime類型
target	_self: 目前浏覽上下文【預設】； _blank 新标簽頁； _parent 目前浏覽器父浏覽器上下文， _root在頂級視窗打開
name	錨的名稱
title	懸停文本

2⃣️ . img标簽

相容性比較好的圖檔格式png、svg、gif、bmp、（.jpg, .jpeg, .jfif, .pjpeg, .pjp）、ico

屬性	含義
src	圖檔路徑
alt	替代文本描述，在圖檔加載失敗時非常有必要
width	寬不帶機關整數
height	高不帶機關整數
loading	如何加載圖像 lazy延遲加載/eager立即加載
decoding	解碼提示同步/異步
title	提示性文本

3⃣️ . input标簽

名稱	類型	說明
button	按鈕	按鈕的值在value屬性中填寫
radio	單選框	一般和lable組合使用，name相同為一組，一組僅能有一個元素被選中
checkbox	複選框	一般和lable組合使用，name相同為一組，一組允許一個或多個元素被選中
text	文本類型	文本字段
password	密碼類型	遮蓋文本
submit	送出	使用者代理嘗試将表單送出給伺服器；

補充内容：

submit類型下支援屬性formenctype屬性，表示編碼類型。其中text/plain代表純文字，multipart/form-data代表formdata處理資料，application/x-www-form-urlencoded使用encodeURI() 之類的算法對文本進行加密，預設使用最後一種方式

4⃣️ . form标簽

屬性	說明
action	定義送出表單時應将表單的收集資料發送到的位置
method	定義了使用哪種HTTP方法發送資料

5⃣️ . ifame标簽

屬性	說明
src	要潛入頁面的url
sandbox	設定是否支援使用腳本，是否支援表單送出等

3.3.4 常見組合

1⃣️ . 有序/無序清單

标簽名	含義
ol	有序清單項可以嵌套，支援用start屬性改變第一個元素的序号
ul	無序清單項支援嵌套
li	清單條目有序清單中可以加入value屬性改變目前序号（加value僅在有序清單中有效）type=“circle”/square變為空心圓/方形（僅在無序清單中有效）

2⃣️ . table表格

标簽：

标簽名	含義
table	表格
tr	表格行元素
th	表格的頭部單元格
td	表格的單元格
caption	表格标題元素
thread	表頭元素
tbody	表主體元素
tfoot	定義表格的頁腳 ; tfoot、tbody、thread資料可以邊擷取邊顯示，不寫的話要等表格全部内容都取完才顯示出來

屬性：

屬性名	含義
table:border-collapse	是否合并邊框
tr:colspan	水準方向上合并單元格
tr:rowspan	垂直方向上合并單元格

3⃣️ . 下拉框/自動完成框

标簽名	含義
option	可選項
select	下拉框
datalist	自動完成框将input綁定到這個list來實作

3.3.5 多媒體相關标簽

标簽名	具體用法	解釋
bgsound	<bgsound src=“xxx.mp3”></bgsound^>	可以加入loop=-1來循環播放
marquee	behavior=slide隻移動一次；scrollamount移動速度；direction:right 移動的方向； loop：循環多少圈 ; scrolldelay移動一次休息多長時間	滾動字幕标簽

4 HTML5的介紹

4.1 什麼是HTML5?

HTML5制定了Web應用開發的一系列标準，是第一個将web作為應用開發平台的HTML語言；它定義了新語義标簽，新的多媒體标簽，新的javascipt api比如地理定位，重力感應。

4.2 新增語義和結構元素

4.2.1 新增标簽：

section: 表示文檔或應用程式的通用部分
aritcle: 表示文檔，頁面，應用程式或站點中的完整或獨立的組成
header: 頁眉，展示介紹性内容/輔助導航的實用元素
footer: 頁腳
nav: 提供導航連結
aside: 定義了一個部分，與main元素相關，但不屬于主流，比如廣告
time: 該元素用于以機器可讀格式顯示日期和時間

4.2.2 解決ie9下的不相容的問題

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

4.3 新表單元素

新增表單類型：包括time/date/time日期時間元件, color拾色器, range滑動條, url隻能輸入url格式, email校驗是否是郵箱， tel手機号碼， number隻能輸入數字
新增表單元素：datalist自動補充下拉框，keygen自動生成密鑰公鑰，meter度量器
新增屬性：placeholder提示文字，autofocus自動獲得焦點，form指定表單項屬于哪個表單，pattern自定義正則，required必填等

4.4 圖像

4.4.1 canvas

canvas是什麼？

canvas定義位圖畫布，可以用于動态繪制圖形
腳本繪畫

var canvas = document.getElementById("canvas"); //擷取元素
var cxt = canvas.getContext("2d");//建立context對象
/*畫矩形*/
cxt.fillStyle="#FF0000";  //設定填充顔色
cxt.strokeStyle="#00FF00";//設定邊框顔色
cxt.fillRect(0,0,10,10);//fillRect(x,y,width,height) 填充 設定的是起點x,y以及矩形的長、寬
cxt.strokeRect(0,0,10,10);//畫出邊框
cxt.clearRect(x,y,width,height)//清除指定區域(包括填充+邊框)
/*畫直線、n邊形等等*/
cxt.beginPath();  //開始路徑
cxt.moveTo(100, 100);//移動到某點
cxt.lineTo(200,200);//移動筆觸
cxt.closePath();//關閉路徑
cxt.stroke();//描邊
cxt.fill();//填充
/*畫圓*/
cxt.beginPath();
cxt.arc(20,20,5,10,30,true);//（圓心x,圓心y，半徑，起始角度，結束角度，是否順時針畫圓）
cxt.closePath();
cxt.fill();
/*寫字*/
cxt.font="30px Arial";
cxt.fillText("加油",100,100);
cxt.strokeText("加油",90,90);
/*線性漸變*/
var grd=cxt.createLinearGradient(0,0,200,0);// 建立漸變 (漸變開始節點x,漸變開始節點y,漸變結束節點x, 漸變結束節點y)
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
cxt.fillStyle=grd;// 填充漸變
cxt.fillRect(10,10,150,80);

畫圖的角度參考下圖：比如畫整個圓就是起始角0，結束角2*Math.PI

html理論基礎

4.4.1 svg

svg是什麼？

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)，圖像在放大或改變尺寸的情況下其圖形品質不會有損失，SVG 是網際網路聯盟的标準
代碼（僅介紹如何畫圓，其餘參考連結）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
      <circle cx="50" cy="50" r="49" stroke="black" stroke-width="2" fill="red" />
    </svg>

4.4.3 canvas VS svg

兩個元素都允許在浏覽器中建立圖形，但是有很大的不同：

canvas	svg
依賴于分辨率	不依賴分辨率
不支援事件處理器	支援事件處理器
适合圖像密集的遊戲	不适合遊戲
弱的文本渲染能力	适合大型渲染區域

4.5 多媒體

4.5.1 視訊格式

類型	介紹
AVI	由微軟開發的。所有運作 Windows 的計算機都支援 AVI 格式
WMV	indows Media 由微軟開發，但是如果未安裝額外元件，就無法播放 Windows Media 電影
MPEG	網際網路上最流行的格式。它是跨平台的，得到了所有最流行的浏覽器的支援
Mpeg-4 .mp4	是一種針對網際網路的新格式
QuickTime .mov	蘋果公司開發的,不能在沒有安裝額外的元件的 Windows 計算機上播放
RealVideo .rm/.ram	RealVideo 格式是由 Real Media 針對網際網路開發的。該格式允許低帶寬條件下（線上視訊、網絡電視）的視訊流。由于是低帶寬優先的，品質常會降低

4.5.3 audio音頻标簽

屬性	介紹
autoplay	自動播放
controls	控制條
loop	循環播放
preload	預加載
src	資源url 建議寫多個類型的src，來解決相容性問題 mp3/ogg/wav

4.5.4 video視訊标簽

屬性	介紹
autoplay	自動播放
controls	控制條
loop	循環播放
preload	預加載
src	資源url 建議寫多個類型的src，來解決相容性問題 mp4/ogg/webm

4.5 HTML5 api

4.5.1 可拖拽屬性

屬性：draggable：true （a超連結和圖檔的可拖拽是預設開啟的）
拖拽元素的監聽事件：

事件	介紹
ondragstart	當拖拽開始的時候
ondragend	當拖拽結束的時候
ondreagleave	被拖拽元素完全離開本來的元素的時候
ondrag	整個拖拽的過程中

目标元素的監聽事件：

事件	介紹
ondragenter	當有元素進入到目标元素時
ondragleave	當元素離開目标元素時
ondragover
ondrop	在目标元素上松開滑鼠時調用

4.5.2 地理位置

geolocation規範提供了一套保護使用者隐私的機制，必須得到使用者的明确許可才能獲得使用者的位置資訊。

如果成功會調用successCallback方法，并傳回一個包含位置資訊的對象position coords坐标

position.coords.latitude緯度
position.coords.longitude經度

如果失敗會調用errorCallback方法，并傳回一個error對象， error對象裡包括message錯誤資訊，code錯誤碼等

4.5.3 全屏

方法：

requestFullscreen() 元素開啟全屏顯示

document.fullscreen 判斷是否全屏

document.webkitCancelFullScreen() 退出全屏
僞類：

.content-left:fullscreen

.content-left:-webkit-full-screen

.content-left:-moz-full-screen
代碼：

// 相容性，相容webkit，moz核心的浏覽器
nav.onclick = function(){
  if(nav.requestFullscreen){
  	nav.requestFullscreen();
  }else if(nav.webkitRequestFullscreen){
  	nav.webkitRequestFullscreen();
  }else if(nav.mozkitRequestFullscreen){
  	nav.mozRequestFullscreen();
  }
}

4.5.4 存儲

傳統存在cookie，存儲在使用者本地，存在磁盤裡，可以持久化存儲一段時間（可以自己設定），但是其存儲大小隻有4k，解析也相對複雜。HTML5提出了解決的辦法：

window.sessionStorage會話存儲

1.儲存在記憶體中

2.生命周期在浏覽器關閉時資料銷毀

3.在同一個視窗下資料可以共享

4.可以存儲約5M

5.隻能存儲字元串

6.api：

window.sessionStorage.setItem(key, value) 插入或更新一個item

window.sessionStorage.getItem(key) 擷取存儲的内容

window.sessionStorage.removeItem(key) 删除指定内容

window.sessionStorage.clear() 清空所有存儲内容

7.代碼：

buttonList[0].onclick = function(){//插入按鈕
	  window.sessionStorage.setItem("userName", userName.value);
	  window.sessionStorage.setItem("password", password.value);
	  window.sessionStorage.setItem("age", 18);
	}
	buttonList[1].onclick = function(){//更新按鈕
	  window.sessionStorage.setItem("userName", userName.value);//更新
	  window.sessionStorage.setItem("password", password.value);
	}
	buttonList[2].onclick = function(){//擷取按鈕
	  userName.value = window.sessionStorage.getItem("userName");
	  password.value = window.sessionStorage.getItem("password");
	}
	buttonList[3].onclick = function(){//删除按鈕
	  window.sessionStorage.removeItem("age");
	}
	buttonList[4].onclick = function(){//清空按鈕
	  window.sessionStorage.clear();
	}

windows.localStorage本地存儲

1.有可能在記憶體，有可能硬碟裡

2.永久生效，除非手動删除

3.可以多個視窗共享

4.可以存儲約20M

5.隻能存儲字元串

6.api:

window.localStorage.setItem(key, value) 插入或更新一個item

window.localStorage.getItem(key) 擷取存儲的内容

window.localStorage.removeItem(key) 删除指定内容

window.localStorage.clear() 清空所有存儲内容

7.代碼：

buttonList[0].onclick = function(){
	  window.localStorage.setItem("userName", userName.value);
	  window.localStorage.setItem("password", password.value);
	  window.localStorage.setItem("age", 18);
	}
	buttonList[1].onclick = function(){
	  window.localStorage.setItem("userName", userName.value);
	  window.localStorage.setItem("password", password.value);
	}
	buttonList[2].onclick = function(){
	  userName.value = window.localStorage.getItem("userName");
	  password.value = window.localStorage.getItem("password");
	}
	buttonList[3].onclick = function(){
	  window.localStorage.removeItem("age");
	}
	buttonList[4].onclick = function(){
	  window.localStorage.clear();
	}

二、附錄

整體項目的檔案處理：标準的一個web項目的檔案目錄包括index.html, images檔案夾， styles檔案夾， scripts檔案夾

html理論基礎

html理論基礎

一、 HTML學習記錄

0. 前言：

1. HTML介紹：

1.1 什麼是HTML?

1.2 計算機編碼介紹

1.3 顔色介紹 3個位元組

1.4 什麼是元素？

1.5 什麼是屬性：包括布爾屬性，可以沒有屬性值，比如checked等

2. HTML規範: （HTML不區分大小寫）

2.1 XHTML：

2.2 HTML文檔剖析

3. HTML結構詳解

3.1 文檔聲明頭：

3.2 HTML head

3.3 body中的标簽屬性

4 HTML5的介紹

4.1 什麼是HTML5?

4.2 新增語義和結構元素

4.3 新表單元素

4.4 圖像

4.5 多媒體

4.5 HTML5 api

二、附錄

繼續閱讀

用 Canvas 編織璀璨星空圖

HTML5Canvas 酷炫效果

龍珠訓練營task04

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

layui多任務上傳添加進度條

html理論基礎

一、 HTML學習記錄

0. 前言：

1. HTML介紹：

1.1 什麼是HTML?

1.2 計算機編碼介紹

1.3 顔色介紹 3個位元組

1.4 什麼是元素？

1.5 什麼是屬性：包括布爾屬性，可以沒有屬性值，比如checked等

2. HTML規範: （HTML不區分大小寫）

2.1 XHTML：

2.2 HTML文檔剖析

3. HTML結構詳解

3.1 文檔聲明頭：

3.2 HTML head

3.3 body中的标簽屬性

4 HTML5的介紹

4.1 什麼是HTML5?

4.2 新增語義和結構元素

4.3 新表單元素

4.4 圖像

4.5 多媒體

4.5 HTML5 api

二、 附錄

繼續閱讀

二、附錄