HTML 詳解
1.HTML介紹 & 規范
1.1 介紹
HTML 指的是超文本標記/標簽語言 (Hyper Text Markup Language)
專門制作網頁的計算機語言
普通的文本就是英文單詞，英文字母一樣的存在。
超文本的意思是有一些單詞或字母，在網頁瀏覽器的世界中被賦予了特殊的權利。
比如：我們都是普通人，但是有些人經過國家的選拔，穿上警服之后，他就被賦予了執法的特殊權利，
普通人是沒有執法權的。
字母img只是普通的字母，沒什么特殊的含義。而<img>被加上尖括號后，在網頁的世界中，就具備了
顯示圖片的作用。
1.2 使用記事本開發第一個網頁
在計算機任意的位置，創建一個空白的記事本
重點：文件的后綴名必須是 "htm" 或 "html"
鼠標右鍵文件，選擇打開方式為"記事本"，輸入下面代碼
<html> <head> <title>拉鈎有我</title> </head> <body> 必須火！ </body> </html>
保存文件，雙擊文件會以計算機默認的瀏覽器運行，你的第一個網頁就制作完成了！
注意：
- 1.<html>標簽它代表當前頁面是一個HTML
- 2.<head>標簽中可以聲明HTML頁面的相關信息
- 3.<body>標簽中它主要是用於顯示頁面信息
- 4.標簽要有開始，有結束，成雙成對
- 4.開始標簽與結束標簽中的內容是標簽的內容，如果沒有標簽內容，可以讓標簽自關閉<br/>
- 5.大多數標簽它具有屬性,屬性值要使用引號引起來。
- 6.HTML它本身是不區分大小寫的。
1.3 下載和安裝 VSCode
記事本編寫網頁太難了，我們推薦一款編寫網頁的神器！
1.3.1 下載地址
https://code.visualstudio.com/
1.3.2 初始中文設置
安裝vscode之后，在界面的左側，選擇安裝中文插件。
點擊安裝后，右下角會彈出重啟的窗口
重啟之后，界面就是偉大的中文了。
1.3.3 創建項目
vscode本身沒有新建項目的選項，所以要先創建一個空的文件夾，如: vscode目錄
然后打開vscode軟件，在vscode軟件中選擇 File -> Open Folder 打開剛才創建的文件夾
右鍵目錄，創建子目錄lagou-html，在lagou-html目錄下創建文件，輸入Test1.html
在代碼編輯區，最上面輸入！回車，就是見證奇跡的時刻
1.3.4 運行頁面
需要安裝插件 “open in browser ”
安裝完插件，右鍵想要運行的頁面文件，或者 使用快捷鍵 alt+b
這里推薦使用chrome谷歌瀏覽器，精簡，速度快。
先安裝好chrome瀏覽器
修改默認的瀏覽器：首頁的設置
添加代碼
"open-in-browser.default":"chrome"
保存成功后，使用默認瀏覽器打開頁面就是chrome了，當然你也可以修改成自己喜歡的瀏覽器，比如
火狐等
1.3.5 修改軟件主題顏色
文件 -> 首選項 -> 顏色主題
字體大小：文件 -> 首選項 -> 設置 -> 文本編輯器 -> 字體
2.HTML的使用
2.1 文件標簽
<html> 標簽： 代表當前書寫的是一個HTML文檔
<head>標簽：存儲的本頁面的一些重要的信息，它不會顯示
<head>標簽：有一個子標簽<title>它是用於定義頁面的標題的
<body>標簽：書寫的內容會顯示出來
<body>標簽的屬性
- 1. text 用於設置文字顏色
- 2. bgcolor 用於設置頁面的背景色
- 3. background 用於設置頁面的背景圖片
2.2 排版標簽
2.2.1 HTML注釋
2.2.2 換行標簽
<br/> 標簽就是一個換行（回車）功能標簽，標簽中的 / 可有可無的。
有/是html語言的標准化，但是html語言是一門不那么嚴謹的語言
2.2.3 段落標簽
在<p>標簽中的內容,會在開始與結束之間產生一個空白行，並且它會自動換行.
常用屬性 align 它的作用是設置段落中的內容對齊方式 可取值有 left right center
2.2.4 水平線標簽
<hr>標簽會在頁面上產生一個水平線
對於hr標簽它有常用屬性:
- align：可取值有left right center 代表水平線位置
- size：代表水平線厚度（粗細）
- width：代表水平線寬度
- color：水平線的顏色
單位：size="5"，5是默認的單位，為"像素"/"像素點"，像素就是構成計算機圖片的最小單位！
也可以使用百分比，size="50%"
2.2.5 分區標簽
div是一個塊標簽，用來進行布局的
普通的div並沒有什么效果，肉眼也看不見，但div與CSS結合，就會更好對頁面進行排版
div與span都是“容器”的作用，具體區別:
- div會自動換行，我們也叫這樣的標簽為塊級元素
- span標簽它不會自動換行，我們也叫它為行內元素
- div：整體划分區塊
- span：局部划分
上圖，兩個div的區別是顯而易見的，后面我們再具體學習css語法
2.3 字體標簽
2.3.1 字體標簽
<font>標簽可以設置字體，字的大小及顏色，常用屬性：
- face:用於設置字體，例如 宋體 隸書 楷體
- size:用於設置字的大小（大小默認設置1-7，7最大，想更大，往后學css即可）
- color:用於設置字的顏色
注：
我們所看到的屏幕上所有的顏色都是由紅、綠、藍這三種基色調混合而成的。
每一種顏色的飽和度和透明度都是可以變化的，用0～255的數值來表示。如純紅色表示為（255，0，
0），十六進制表示為#FF0000。
按這種表達方式，理論上我們可以得到256 * 256 * 256 = 16777216種顏色。
1. 使用十六進制方式，取值范圍 #000000 ~ #FFFFFF （黑色到白色）。當顏色值為#cc3300 時，可
簡化成 #c30 這種方式
<body bgcolor="#666">
2. RGB顏色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之間的整數。rgb字母大小寫無所謂
<body bgcolor="rgb(11,11,11)">
（在線顏色選擇器： http://www.86y.org/code/colorpicker/color.html ）
百度搜索：字魂網，下載一個免費的字體，並安裝到計算機中。在我們的網頁中顯示出來！
2.3.2 標題標記
給一段文字起一個標題
<h1> ----- <h6>
h1最大 h6最小，它們代表的是標題，
自動換行，字體加粗，標題與標題之間產生一定的距離
注意:在HTML中允許標簽進行嵌套的，但是一般都包裹嵌套，而不可以進行交叉嵌套
<body bgcolor="#666">
2.3.3 格式化標簽
- <b>：字體加粗
- <i>：字體傾斜
- <del>：刪除線
- <u>：下划線
2.4 列表標記
- ol：有序列表
- type='A'：字母排序
- type='I'：羅馬排序
- start=“3” 序列從幾開始
- ul：無序列表
- type="disc"：默認，實心圓
- type="square"：方塊
- type="circle"：空心圓
2.5 圖像標簽
<img>它可以讓我們在網頁引入一張圖片，常用屬性：
- 1. src 代表的圖片的路徑
- 2. width 圖片的寬度
- 3. height 圖片的高度
- 4. border 用於設置圖片的邊框
- 5. alt 如果圖片不可以顯示時，默認顯示的文本信息
- 6. title鼠標懸停圖片上，默認顯示的文本信息
- 7. align 圖片附件文字的對齊方式，可取值有
- left：把圖像對齊到左邊
- right：把圖像對齊到右邊
- middle：把圖像與中央對齊
- top：把圖像與頂部對齊
- bottom：把圖像與底部對齊（默認）
2.6 超連接標簽
<a>標簽,可以實現跳轉到其它頁面操作.
超鏈接內容不僅可以是文本，也可以是圖片等信息
常用屬性:
- 1. href 代表的我們要跳轉的路徑
- 2. target 這個屬性規定在何處打開這個鏈接文檔，可取值：
- _ blank 在新窗口中打開頁面
- _ self 默認。在本窗口打開頁面
功能性連接：
1.發郵件
<a href="mailto:sunguoan@163.com">聯系站長</a>
2.QQ聊天窗口
<a href="tencent://message/?uin=19998539&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/> </a>
2.7 表格
- <table>：定義一個表格
- border：邊框，取值是像素為單位
- width 代表的表格的寬度
- align 代表表格的對齊方式；取值
- left 左對齊表格
- right 右對齊表格
- center 居中對齊表格
- cellspacing：單元格間距（通常設置0表示單線表格）
- <tr>：表格中的行 （Table Row）
- align 代表表格的對齊方式；取值
- left 左對齊內容（默認值）
- right 右對齊內容
- center 居中對齊內容（th 元素的默認值）
- align 代表表格的對齊方式；取值
- <td>：表格中的數據單元格 （Table DataCell）
- colspan 指示列的合並
- rowspan 指示行的合並
<table border="1" width="400px" align="center" cellspacing="0"> <tr align="center"> <td colspan="3">計划統計表</td> </tr> <tr> <td rowspan="3">收入金額</td> <td>5</td> <td>6</td> </tr> <tr> <td>8</td> <td>9</td> </tr> <tr> <td>11</td> <td>12</td> </tr> </table>
2.8 表單標簽
表單可以讓我們將錄入信息攜帶到服務器端。
簡單說，通過表單可以將要提交的數據提交到指定的位置。
但一個一個的提交，不方便。表單正好解決了這個問題，將所有的數據形成一個整體，一起提交給服務
器。
常見的 登錄頁面、注冊頁面 都離不開表單的應用
2.8.1 form屬性
action：整個表單提交的目的地
method：表單提交的方式
- get：提交時，傳輸數據量少（傳遞普通文字信息，傳遞照片會失敗），明文提交（在瀏覽器的url后面會顯示提交的數據，不適合用於登錄）
- post：提交時，傳輸數據量大（傳遞文字和圖片都行），密文提交（瀏覽器的url后面看不到提交的數據）
2.8.2 表單中的元素(控件)
- <input>元素的type屬性
- text：默認值，普通的文本輸入框
- placeholder屬性：提示文本
- maxlength屬性：最多能輸入字符數量
- password：密碼輸入框
- checkbox：多選框/復選框
- checked：被選中
- radio：單選按鈕
- file：上傳文件
- reset：重置按鈕
- submit：提交按鈕
- button：普通按鈕
- text：默認值，普通的文本輸入框
- <select>：下拉列表/下拉框
- <option>：列表中的項
- selected：被選中
- <textarea>：文本域（多行文本框）
- 可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的height和 width 屬性。
- <button>：按鈕
- 在form表單中，作用和submit一樣
- 不在form表單中，就是普通按鈕（配合后期的javascript，可擴展性更高）
<form action="baidu" method="GET"> <p>帳號：<input name="a" type="text" placeholder="請輸入帳號..." maxlength="5" ></p> <p>密碼：<input name="b" type="password"></p> <p>愛好： <input name="hobby" type="checkbox"> 抽煙 <input name="hobby" type="checkbox" checked="checked"> 喝酒 <input name="hobby" type="checkbox"> 燙頭 <input name="hobby" type="checkbox"> 泡澡 </p> <p>性別： <input type="radio" name="sex"> 男 <input type="radio" name="sex" checked="checked"> 女 </p> <p>身份： <input type="radio" name="role"> ceo <input type="radio" name="role"> cto <input type="radio" name="role"> coo <input type="radio" name="role" checked="checked"> ufo </p> <p>頭像： <input type="file"> </p> <p>血型： <select> <option>A型</option> <option>B型</option> <option>C型</option> <option selected="selected">O型</option> </select> </p> <p>個人簡介： <textarea cols="10" rows="5"></textarea> </p> <p> <input type="reset" value="清空"> <input type="submit" value="提交"> <input type="button" value="取消"> <button>保存</button> </p> </form> <button>測試</button>
注意事項：
- 1. 所有表單中的元素都要具有名稱（否則提交到服務器之后，服務器無法區識別多個元素之間的不同）
- 2. 單選框要想可以一次只選擇一個，要具有相同的name值
- 3. 所有的復選框以組為單位，組內的每個復選框都應該具有相同的name值
2.9 框架標簽
通過<frameset>和<frame>框架標簽可以定制HTML頁面布局。可以理解為：用多個頁面拼裝成一個頁
面。
注意，框架標簽和body標簽不共存。“有你沒我，有我沒你”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <frameset rows="10%,*,13%"> <frame src="top.html"></frame> <frameset cols="15%,*"> <frame src="left.html"></frame> <frame src="right.html"></frame> </frameset> <frame src="foot.html"></frame> </frameset> </html>
top.html、left.html、right.html、foot.html 四個頁面內容一樣，稍微改下文字而已，以top.html為例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <h1>頂部導航區域</h1> </body> </html>
2.10 其它標簽與特殊字符
2.10.1<meta>標簽
<meta>標簽必須寫在<head>標簽之間.
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
1. 當前頁面的字符編碼 gbk：中文簡體
2. 這里 的 名字 是 viewport （顯示窗口）
數據 是 文本 內容 content="width=device-width, initial-scale=1.0"
也就是 顯示窗口 寬度 是 客戶端的 屏幕 寬度 （就是 滿屏 ！），顯示的文字和圖形的初始比例 是
1.0
3. 每個電腦內置的IE版本是不一樣的，為了兼容所有的版本以最高級模式渲染文檔，也就是任何IE版
本都以當前版本所支持的最高級標准模式渲染
- 通過meta標簽來設置頁面加載后在指定的時間后跳轉到指定的頁面
注意：在html中如果跳轉的互聯網上的網站資源，那么我們在書寫路徑時，一定要帶協議的路徑。
2.10.2 <link>標簽
后面我們會使用link標簽來導入css
注意:link標簽也必須寫在<head>標簽中。
2.10.3 特殊字符
3. HTML5新特性
3.1 HTML4與HTML5的區別
H5包含h4
1. 大小寫不敏感
- (1) 標簽
- (2) 屬性
- (3) 屬性的值
-
<inPUT tYPe="pasSWord"/>
2. 引號可省略
<input type="password"> <input type=password>
3. 省略了結尾標簽
<p>哈哈哈哈哈哈哈 <p>哈哈哈哈哈哈哈
說是省略，其實運行起來，查看源代碼，html是自動幫我們補全了
3.2 新增語義化標簽
html4中，所有的容器標簽95%都會使用div，div過多的話，很難區分彼此
新增許多語義化標簽，讓div“見名知意”
- section標簽：表示頁面中的內容區域，部分，頁面的主體部分
- article標簽：文章
- aside標簽：文章內容之外的，標題
- header標簽：頭部，頁眉，頁面的頂部
- hgroup標簽：內容與標題的組合
- nav標簽：導航
- figure標簽：圖文並茂
- foot：頁腳，頁面的底部
3.3 媒體標簽
想在網頁上播放視頻，就要使用<video>，屬性有：
- src：媒體資源文件的位置
- controls：控制面板
- autoplay：自動播放（谷歌失效，360瀏覽器可以）
- loop：循環播放
-
<video src="img/html-css-js之間的關系.mp4" controls loop autoplay></video>
3.4 新增表單控件
表單的控件更加豐富了
- <input>，修改type屬性：
- color：調色板
- date：日歷
- month：月歷
- week：周歷
- number：數值域
- min：最小值（默認值是1）
- max：最大值（默認值無上限）
- step：遞增量
- range：滑塊
- search：搜索框（帶×號，可一鍵刪除框中內容）
- 進度條<progress/>
- 高亮<mark>
- 聯想輸入框<datalist> （模糊查詢）
- 選項<option>