作者：凌逆戰
地址：https://www.cnblogs.com/LXP-Never/p/11229886.html
HTML稱為超文本標記語言，不屬於編程語言的范疇，HTML使用標記標簽來描述網頁。HTML運行在瀏覽器上，由瀏覽器來解析。網頁運行在瀏覽器上，是數據展示的載體。網頁由瀏覽器、服務器和協議組成。
- 服務器：向服務器發送用戶請求指令並接收和解析數據展示給用戶。
- 服務器：存儲數據，處理並響應請求。
- 協議：規范數據在傳輸過程中的打包方式
網頁有兩大優勢即時響應和無需安裝和更新。
- 即時響應：更新服務端頁面即完成更新，客戶端重新加載即兌現內容。
- 無需安裝和更新：無需安裝任何應用軟件，只需要一個瀏覽器執行即可。
開發前的准備
- 運行環境：瀏覽器，默認選擇chrome瀏覽器，作為網頁文件的運行環境。
- 調試工具：瀏覽器自帶的調試工具，使用快捷鍵"F12"或右鍵"檢查"打開。
- 開發工具：不限，選用個人習慣的即可。（Sublime、VSCode、pycharm、EditPlus、Webstrom等）
語法介紹
HTML又稱為超文本標記語言，超文本標記語言能夠讓瀏覽器識別和解析的語言，通過標簽的形式構建頁面結構和填充內容。HTML書寫的網頁文件使用.html或.htm作為文件后綴。
代碼基本結構
每個網頁基本的代碼結構，都是由以下代碼結構組成的。通過下面的代碼可知，每個網頁都是由HTML標簽代碼 + JS代碼 + CSS樣式代碼 組成的。HTML代碼不區分大小寫，建議都小寫。CSS、JS、HTML的注釋語法都不同，其實注釋語法不需要特別記憶，只需要ctrl+/ 快捷鍵就能自動注釋(pycharm默認編輯器，點setting>Languages&Frameworks>python Template Languages>HTML>Template Languages>none)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*網頁CSS樣式代碼*/ </style> </head> <body> <!-- HTML標簽結構--> <script> // 網頁事件,JS代碼 </script> </body> </html>
代碼解析：
<!DOCTYPE html>：這句話告訴瀏覽器，使用HTML5標准來解析這個網頁
<html>：HTML文檔開始的標志和文檔結束標記
<head>：網頁的頭部，可在head中設置網頁標題，還可以引入外部的資源文件
<title>：包含文檔的標題
<body>：網頁的身體，包含可見的頁面內容
<!--注釋-->：注釋
<script>：網頁的事件，包含Java Script代碼
<style>：網頁的樣式，包含css代碼
HTML標簽
HTML標簽也會成為標記或元素，用於網頁中標記內容，是由< >包圍的關鍵詞成對出現的，標簽名不區分大小寫，推薦小寫表示。標簽對中第一個標簽是開始標簽，第二個標簽是結束標簽。
<標簽>內容</標簽>
標簽分為行內標簽（inline）和塊標簽（block）
- 行內元素：每個行內元素獨占一行，高和外邊距不可改變；寬度就是他的文字和圖片寬度；內聯元素只能容納文本或者其他的內聯元素。常用的行內元素有：<span>、<a>、<br>、<input>、<img>
- 塊元素：塊元素總是在新的一行上開始，且多個塊元素能同時在一行；高度、行高以及內外邊距都可以設置；寬度缺省是他的容器的100%，除非設定一個寬度。塊元素可以容納其他塊元素和內聯元素，p元素除外，段落標簽只能嵌套行內元素,不能嵌套塊元素。常用的塊元素有：<div>、<h1>~<h6>、<form>、<hn>、<ul>、<table>
HTML標簽分為雙標簽和單標簽
- 雙標簽：成對出現，包含開始標簽和結束標簽 <html></html>
- 單標簽：只有開始標簽，沒有結束標簽，可以手動添加“/”表示閉合，也可以不加“/”。<br>或者<br/>都可以
標簽的屬性：標簽屬性書寫在開始標簽中，使用空格與標簽名隔開，用於設置當前標簽的顯示內容或者修飾顯示效果。由屬性名和屬性值組成，屬性值使用雙引號表示。
同一個標簽中可以添加若干組標簽屬性，使用空格間隔。
<img src="imgs/img01.jpg" width="200px" height="200px">
嵌套結構中，外層元素稱為父元素，內層元素稱為子元素；多層嵌套結構中，所有外層元素統稱為祖先元素，內層元素統稱為后代元素；平級結構互為兄弟元素
<!doctype html>：
<!doctype html>
<html> </html>：HTML文檔開始的標志和文檔結束標記
<html> </html>
<head>頭部元素
頭部設置，可在head中設置網頁標題，引入外部的資源文件
<head>元素中可以插入 <title>、<script>、<style>、<meta>、<link>、 <noscript>、<base>
<base> </base>：設置網頁的默認URL，因此該網頁的其他 src 可以使用相對路徑。案例。
<head> <base href="http://www.runoob.com/images/" target="_blank"> </head>
<link> </link>：定義了一個文檔和外部資源之間的關系。通常用來鏈接樣式
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<style> </style>：可以定義文檔樣式文件引用地址；也可以直接在<style>中添加樣式
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
<meta>元素：定義基本的元數據，以供瀏覽器解析。
<meta>標簽有以下作用：
為搜索引擎定義關鍵詞：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容
<meta name="description" content="免費 Web & 編程 教程">
定義網頁作者
<meta name="author" content="Runoob">
每30秒刷新當前頁面
<meta http-equiv="refresh" content="30">
設置網頁字符編碼，如果中文出現亂碼，可以設置編碼格式為utf-8，或者gbk。
<meta charset="utf-8">
<script> </script>：定義JavaScript腳本文件，或者寫JS代碼
通過 JavaScript 輸出 "Hello world"：
<head> <script> document.write("Hello World!") </script> </head>
<title> </title>：設置網頁標題，顯示在網頁選項卡上方
<title>網頁標題</title>
<body>主體元素
</body>網頁主體部分，顯示網頁主要內容
<body> 網頁主體內容 </body>
接下來連在一起窺探一下網頁的基本結構框架。
<!-- HTML文檔開始的標志 --> <html> <!-- 頭部設置，可在head中設置網頁標題，引入外部的資源文件 --> <head> <!-- 設置網頁標題，顯示在網頁選項卡上方 --> <title>網頁標題</title> <!-- 設置網頁字符編碼 --> <meta charset="utf-8"> </head> <!-- 網頁主體部分，顯示網頁主要內容 --> <body> 網頁主體內容 </body> </html><!-- 文檔結束-->
標題標簽
自帶加粗效果，從h1~h6字體大小逐級遞減
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>
<p>段落文本</p>
屬性:
- title="文字"：鼠標移上去顯示的文字
- style="text-align:center"：文本居中
文本格式化標簽
<b>或<strong>：加粗文本
<i>或<em>：定義斜體文本
<u>或<del>：刪除線
<ins>：下划線
<big> & <small>：放大字體 & 縮小字體
<sub> & <sup>：下標(塊元素) & 上標(塊元素)
<pre>：定義預格式文本，被包裹的文本 是什么格式就以什么格式輸出
<address>：定義地址
<bdo>：定義文字方向，rtl：從右向左，ltr：從左向右
<span>：行分區，用於對特殊文本進行特殊處理
<br>：換行，單標簽
<hr>：水平線，單標簽
使用 < 在頁面中呈現 "<" 使用 > 在頁面中呈現 ">" 使用 在頁面中呈現一個空格 使用 © 在頁面中呈現版權符號"©" 使用 ¥ 在頁面中呈現人民幣符號"￥"
div#top
<div id="main">頁面主體區域</div> <div id="bottom">頁面底部區域</div>
行內容器 <span> </span>
<span>元素沒有特定的含義，由於它是內聯元素，因此可以在同一行顯示。
媒體標簽
<img href="#top" src="" width="" height="" title="鼠標停留時顯示" alt="圖片加載失敗">
屬性：
- href：錨, 可以快速定位到錨所對應的位置.
- src：用於給出圖片的URL，必填。
- alt：用於設置圖片加載失敗后的提示文本
- width/height：用於設置圖片尺寸，取像素值，默認按照圖片的原始尺寸顯示。
- title：用於設置圖片標題，鼠標懸停在圖片上時顯示
<map name=""></map>：定義圖像地圖，name值要等於<img>的usemap屬性值。
<area></area>：定義圖像地圖中可點擊的區域
屬性
如果規定的區域是矩形：(左上角頂點坐標為(x1,y1)，右下角頂點坐標為(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
如果規定的區域是園：(圓心坐標為(X1,y1)，半徑為r)
<area shape="circle" coords="x1,y1,r" href=url>
合在一起使用
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>
音頻標簽<audio>
<audio controls> <source src="horse.mp3" type="audio/mpeg"> </audio>
<audio> 元素支持的3種文件格式：MP3、Wav、Ogg。
屬性：
視頻 <video>
<video> 元素提供了 播放、暫停和音量控件來控制視頻。<video>分別支持MP4、WebM、Ogg格式的音頻。<video> 元素支持多個 <source> 元素，<source> 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
<video width="320" height="240" controls> <!--瀏覽器將使用第一個可識別的格式--> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <!--提供給不支持 video 元素的瀏覽器顯示的--> 您的瀏覽器不支持 HTML5 video 標簽。 </video>
圖形標簽 <canvas> </canvas>
<canvas>標簽用來定義圖形容器，必須通過腳本(JavaScript)來繪制圖形。
繪制畫布
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
Canvas 坐標
繪制正方形fillRect(x1,y1,x2,y2)，使用JavaScript來繪制圖像
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <script> var c = document.getElementById("myCanvas"); //找到 <canvas> 元素對象 var ctx = c.getContext("2d"); //創建 context 對象 ctx.fillStyle = "#FF0000"; // ctx對象填充紅色樣式 ctx.fillRect(0, 0, 150, 75); //ctx對象填充正方形(x1,y1,x2,y2) </script>
注意：getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
Canvas 路徑
- moveTo(x,y) 定義線條開始坐標
- lineTo(x,y) 定義線條結束坐標
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <script> var c = document.getElementById("myCanvas");//找到 <canvas> 元素對象 var ctx = c.getContext("2d");//創建 context("2d") 對象 ctx.moveTo(0, 0); //定義線條開始坐標 ctx.lineTo(200, 100); //定義線條結束坐標 ctx.stroke(); //使用stroke()方法來繪制線條 </script>
Canvas 圓形
arc(x,y,r,start,stop)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas 文本
- font - 定義字體
- fillText(text,x,y) - 在 canvas 上繪制實心的文本
- strokeText(text,x,y) - 在 canvas 上繪制空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canvas - 漸變
漸變可以填充在矩形, 圓形, 線條, 文本等，各種形狀可以自己定義不同的顏色
- createLinearGradient(x, y, x1, y1) - 創建線條漸變
- createRadialGradient(x, y, r, x1, y1, r1) - 創建一個徑向/圓漸變
- addColorStop()方法指定停止顏色，必須使用兩種或兩種以上停止顏色，參數使用坐標來描述，可以是0至1.
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // 創建漸變 var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // 填充漸變 ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script>
Canvas - 圖像
drawImage(image, x, y)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
超鏈接標簽
用戶可以點擊超鏈接實現跳轉至其他頁面，默認情況下，鏈接將以以下形式出現在瀏覽器中：
- 一個未訪問過的鏈接顯示為藍色字體並帶有下划線。
- 訪問過的鏈接顯示為紫色並帶有下划線。
- 點擊鏈接時，鏈接顯示為紅色並帶有下划線。
<a href="http://www.taobao.com" target="_self">淘寶</a> <a href="http://www.baidu.com" target="_blank">百度</a>
屬性：
- href：錨，用於設置目標文件的URL，也可以指向某個id號屬性的元素，必填。
- target：用於設置目標文件的打開方式，默認在當前窗口打開。
- target="_self"：當前窗口打開
- target="_blank"：新建窗口打開
- target="_top"：回到網站首頁
- target="_parent"：回到上一界面
無序列表 ul>li
默認用實心圓點標識列表項
快捷鍵: ul>li*3
<ul> <li>列表項 1</li> <li>列表項 2</li> <li>列表項 3</li> </ul>
默認使使用阿拉伯數字標識每條數據，可以使用start屬性設置起始的值，默認為1
<ol> <li>列表項</li> <li>列表項</li> <li>列表項</li> </ol>
在已有列表中嵌套添加另一個列表
<ol> <li> 西游記 <ul> <li>孫悟空</li> <li>豬八戒</li> <li>沙和尚</li> </ul> </li> </ol>
表格由行和單元格組成，常用於直接的數據展示或輔助排版，基本結構如下：
<table></table>：創建表格
屬性：
- border：規定單元格邊框
<caption>表名</caption>：表名
<tr></tr>：行標簽，創建一行
<td></td>：列標簽，創建一列
<!-- 創建表格標簽,寬度200個像素,表框1,表格間距0 --> <table width="200px" border="1" cellspacing="0">
<caption>表名</caption>
<!-- 創建行標簽 --> <tr> <!-- 行中創建單元格以顯示數據 --> <td>姓名</td> <td>年齡</td> <td>班級</td> </tr> <tr> <td>張三</td> <td>20</td> <td>一(1)班</td> </tr> </table>
單元格合並
用於調整表格結構，分為跨行合並 和 跨列合並，合並之后需要刪除被合並的單元格，保證表格結構完整。
| 單元格屬性 | 作用 | 取值 |
|---|---|---|
| colspan | 跨列合並單元格 | 無單位數值 |
| rowspan | 跨行合並單元格 | 無單位數值 |
<table border="1"> <tr> <th>姓名</th> <td>李小明</td> </tr> <tr> <th rowspan="2">電話</th> <td>010-1234567</td> </tr> <tr> <td>13912321213</td> </tr> </table>
<table border="1"> <tr> <th>姓名</th> <th colspan="2">電話</th> <!--跨越兩列--> </tr> <tr> <td>李小明</td> <td>010-1234567</td> <td>13912321213</td> </tr> </table>
表單標簽 <form> </form>
表單用於收集數據並提交給服務器，由表單元素和表單控件組成。表單元素允許用戶在表單中輸入內容，比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。
表單標簽 使用<form> </from>來設置
屬性：
- action：設置數據的提交地址
- method：設置數據的提交方式，默認為get方式，可以設置為post
- onsubmit：設置表單數據提交時的觸發事件的執行函數（事件綁定中詳細介紹）
<form action="" method="" onsubmit=""> <!--此處為表單控件--> </form>
輸入元素 input
輸入類型是由類型屬性type定義。文本域的默認寬度是 20 個字符。
屬性
- type：設置控件類型，如果值為"password"則表示密碼不可見，如果為“text”則為普通文本
- text：普通文本
- password：密碼，不可見
- radio：單選按鈕
- checkbox：復選按鈕
- submit / reset：提交和重置
- button：按鈕
- color：選擇顏色
- data：選擇日期
- name：設置控件名稱，最終與值一並發送給服務器
- value：設置控件的值
- placeholder：設置輸入框中的提示文本
- maxlength：設置輸入框中可輸入的最大字符數
- checked：設置單選按鈕或復選按鈕的默認選中
- selected：設置下拉菜單的默認選中
- readonly：只讀,就是不讓輸入
普通文本 type="text"
<label for="name">姓名：</label> <input type="text" id="name" readonly placeholder="請輸入用戶名" name="name">
密碼 type="password"
<div> <label for="pass">密碼：</label> <input type="password" id="pass" placeholder="請輸入密碼" name="pass"> </div>
單選按鈕 type="radio"
<input type="radio" name="sex" value="1" checked readonly />男 <input type="radio" readonly name="sex" value="2" />女
復選按鈕 type="checkbox"
<input type="checkbox" name="like" />編程 <input type="checkbox" name="like2" checked />游戲 <input type="checkbox" name="like3" />閱讀
提交和重置 type="submit \ reset"
<input type="submit" value="注冊" /> <input type="reset" disabled value="重置" />
按鈕 type="button"
<input type="button" value="Hello world!">
輸入多行文本內容
<textarea name="demo" id="demo" cols="30" rows="10"> 默認文本 </textarea>
下拉列表
下拉列表select，id要對應label的值
<option>中如果定義了selected屬性，則會默認先選中它。
<select name="xl" id="xl"> <option value="1">大學</option> <option value="2">中學</option> <option value="3" selected>小學</option> </select>
最后融會貫通的運用一下表單元素
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action="#"> <div> <label for="name">姓名：</label> <!-- 占位符 --> <input type="text" id="name" readonly placeholder="請輸入用戶名" name="name"> </div> <div> <label for="pass">密碼：</label> <input type="password" id="pass" placeholder="請輸入密碼" name="pass"> </div> <div> <label for="xl">學歷：</label> <!-- 下拉列表框元素 使用 option 設置列表項 value 是列表的值--> <select name="xl" id="xl"> <option value="1">大學</option> <option value="2">中學</option> <option value="3">小學</option> </select> </div> <div> <label for="sex">性別：</label> <!-- 單選按鈕元素 相互排斥時，將 name 屬性值設置為同一個--> <input type="radio" name="sex" value="1" checked readonly />男 <input type="radio" readonly name="sex" value="2" />女 </div> <div> <label for="like">愛好：</label> <input type="checkbox" name="like" />編程 <input type="checkbox" name="like2" checked />游戲 <input type="checkbox" name="like3" />閱讀 </div> <div> <label for="demo">簡介：</label> <!-- 輸入多行多列文本內容 --> <textarea name="demo" id="demo" cols="30" rows="10"> </textarea> </div> <div> <input type="submit" value="注冊" /> <input type="reset" disabled value="重置" /> </div> </form> </body> </html>
HTML屬性
HTML可以設置屬性，一般在開始標簽中添加標簽屬性信息，屬性總是以名稱/值對的形式出現，比如：name="value"。
由於HTML每個標簽都包含很多屬性，菜鳥教程總結了常用標元素的屬性 HTML 標簽參考手冊
在此列出用的最多的幾個屬性：
| 屬性 | 描述 |
| class | 為html元素定義一個或多個類名(classname)（類名從樣式文件引入） |
| id | 定義元素的唯一id |
| style | 規定元素的行內樣式（style） |
| title | 描述了元素的額外信息（作為工具條使用） |
語義元素
語義元素能夠清楚的描述其意義給瀏覽器和開發者。
許多現有網站都包含以下HTML代碼： <div id="nav">，<div class="header">，或者 <div id="footer">，來指明導航鏈接，頭部，以及尾部。
HTML5 提供了新的語義元素來明確一個Web頁面的不同部分:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
<header>元素：描述了文檔的頭部區域，在頁面中可以使用多個<header>元素。
<nav>元素：定義頁面導航鏈接
<article>元素：定義獨立的內容，
<section>元素：定義文檔中的節，比如章節、頁眉、頁腳或文檔的其他部分。
<aside>元素：定義頁面主區域之外的內容（比如側邊欄）
<footer>元素：描述了文檔的底部區域