标簽 ： 前端技術
HTML(Hypertext Marked Language), 即超文本标記語言,能夠獨立于各種作業系統平台(如UNIX/Linux/Windows等)進行資訊展示.HTML由WEB發明者Tim Berners-Lee和同僚Daniel W.Connolly于1990年創立. 所謂超文本:是因為它可以加入圖檔/聲音/動畫/視訊等内容(超越了文本的範疇); 所謂标記:是因為HTML所有的操作都是通過标記實作, 每一個HTML文檔都是靜态的網頁檔案,這個檔案裡面包含了HTML指令代碼,這些指令代碼并不是一種程式語言,它隻是一種排版資料顯示位置的标記結構語言, 如:<code><标簽名稱>标簽内容</标簽名稱></code>
一個HTML檔案必須有開始标簽和結束标簽<code><html></html></code>;
HTML包含head/body兩部分内容:
<code><head>頁面設定資訊</head></code>
<code><body>頁面顯示内容</body></code>
HTML标簽要有始有終(如<code><table></table></code>), 空元素标簽需要在标簽内結束(如<code><hr/></code> <code><br/></code>);
HTML代碼不區分大小寫;
一個網頁中可能會有很多資料, 不同的資料需要不同的顯示效果,此時就使用标簽把需要展示的資料封裝起來,通過修改标簽屬性值以實作标簽内資料樣式的變化;
一個标簽相當于一個容器,想要修改容器内資料樣式,隻需要修改容器屬性值.
注釋标簽
<code><!-- HTML的注釋 --></code>
注意: 浏覽器不展示,但檢視源代碼時可看到.
文字标簽 : 修改文字樣式
<code><font></font></code>
屬性
描述
size
文字的大小(取值範圍1-7)
color
文字顔色[兩種表示方式:英文單詞(red/green/blue)/十六進制數(#ffffff:RGB)
标題标簽
<code><h1></h1></code> -> <code><h6></h6></code> : 依次變小
水準線标簽
<code><hr/></code>
水準線粗細 取值範圍 1-7
顔色
特殊字元: 需要對特殊字元進行轉義才能在網頁上顯示:
字元
轉義
<code><</code>
<code>&lt;</code>
<code>></code>
<code>&gt;</code>
<code>空格</code>
<code>&nbsp;</code>
<code>&</code>
<code>&amp;</code>
<code>注冊符®</code>
<code>&reg;</code>
<code>版權符©</code>
<code>&copy;</code>
圖像标簽
<code><img src="圖檔的路徑"/></code>
src
圖檔路徑
width
圖檔寬度
height
圖檔高度
alt
圖檔出錯時顯示的文字
超連結标簽
<code><a href="資源位址">說明</a></code>
href
連結資源位址,當超連結不需要跳轉時,設為<code>#</code>
target
設定打開的方式[<code>_blank</code>新視窗打開/<code>_self</code>目前頁打開(預設)]
層次清單
<code><dl></dl></code>: 層次清單
<code><dt></dt></code>: 上層内容
<code><dd></dd></code>: 下層内容
有序清單
<code><ol></ol></code>: 有序清單
type
排序方式[1(預設)/a/i]
<code><li></li></code>: 清單内容
無序清單
<code><ul></ul></code>: 無序清單
實心圓disc(預設)/空心圓circle/實心方塊square
<code><table></table></code>: 用于對資料進行格式化, 使顯示更加清晰
border
表格線
bordercolor
表格線顔色
cellspacing
單元格距離
表格寬度
表格高度
<code><caption></caption></code>: 表格标題
<code><tr></tr></code>: 行
align
設定内容對其方式[left/center/right]
<code><th></th></code>: 表格首行列
<code><td></td></code>: 表格内容列
合并單元格
<code>rowspan</code>：跨行
<code><td rowspan="行數"></td></code>
<code>colspan</code>：跨列
<code><td colspan="列數"></td></code>
如果單元格内沒有内容, 需要使用空格符<code>&nbsp;</code>占位.
<code><form></form></code>: 用于向服務端送出資料
<code>action</code>
送出位址,預設送出到目前頁面
<code>method</code>
送出方式[GET/POST]
<code>enctype</code>
指定發送到伺服器資料的編碼格式[<code>application/x-www-form-urlencoded</code>: 表單資料/ <code>multipart/form-data</code>: 檔案上傳]
每個輸入項中必須要有一個<code>name</code>屬性, 以辨別該輸入項的<code>key</code>,服務端擷取表單資料時用.
文字輸入項：<code><input type="text"/></code>
密碼輸入項：<code><input type="password"/></code>
單選按鈕：<code><input type="radio"/></code>
兩個按鈕name屬性值相同,且必須有value值,實作預設選中:<code>checked="checked"</code>.
複選按鈕：<code><input type="checkbox"/></code>
屬性描述同radio.
檔案上傳: <code><input type="file"/></code>
下拉菜單:
預設選擇<code>selected="selected"</code>
文本域<code><textarea cols="10" rows="10"></textarea></code>
隐藏項 <code><input type="hidden" /></code>
不會顯示在頁面上, 但會存在于HTML代碼裡面.
送出按鈕 <code><input type="submit"/></code>
圖檔送出 <code><input type="image" src="圖檔路徑"/></code>
重置按鈕 <code><input type="reset"/></code>
普通按鈕 <code><input type="button" value=""/></code>
需要同JS一起使用.
标簽
作用
<code><b/></code>
<b>加粗</b>
<code><s/></code>
删除線
<code><u/></code>
下劃線
<code><i/></code>
斜體
<code><pre/></code>
原樣輸出
<code><sub/></code>
下标下标
<code><sup/></code>
上标上标
<code><p/></code>
段落标簽(比br标簽多一行)
<code><div/></code>
自動換行(結合CSS)
<code><span/></code>
不自動換行(結合CSS)
<code><title></code>: 網頁顯示标題
<code><meta></code>: 頁面設定
<code><meta name="keywords" content=""></code>
<code><meta http-equiv="refresh" content="3;url=current.html" /></code>
<code><base/></code>: 設定目前頁面所有連結預設位址
<code><base target="_blank"/></code>: 統一設定超連結打開方式
<code><link/></code>：引入外部檔案,如CSS等
![Docker：安裝Docker Compose[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)