html叫做超本文標記語言，注意它只是標記語言，不是編程語言。
編寫規範：
-
由標記（html, div, p, h1等）組成
-
標記成對出現（<html>...</html>），也有例外，比如<img src=""/>、<br/>
- 標記有層級關係
<html>
<head>
</head>
<body>
</body><html>- 標記有內容文本或屬性
<title>這是一個標籤</title><meta name="" content=""></meta>注意：
-
html不區分大小寫
- 建議大家用雙引號
當然單引號也可以，但是雙引號纔是professional的表現
html基本結構
<!DOCTYPE html><html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> </head> <body> </body></html>-
doctype：必須這樣寫
-
html：其實不寫也可以，爲了規範，還是寫上吧
-
head：用來設置網頁的信息，比如標題、小圖標等
- body：網頁內容（可視化標籤）
特殊符號
- 空格： 【分號是必須寫的】
注意，空格這裏寫一個 表示添加了一個空格，寫多個也只會有一個空格
好，現在我們新建一個名爲index.html的文件，你可以在桌面建一個txt文件，然後修改擴展名爲HTML，然後打開方式選擇sublime，或者其他編輯器。船長這裏是建了一個flask項目，然後在templates文件夾下新建了一個。這裏提醒大家的是，以後大家能用英文的地方儘量用英文，比如文件夾名、文件名等，不然會有各種問題等着你。
用pycharm這種IDE的話發現它會幫你寫好模板，這裏建議大家清空然後自己寫一遍加深印象：
<!DOCTYPE html><html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
</head>
<body>
Hello World! </body></html>寫了Hello World!你就開始了HTML學習啦~
先和大家說一下什麼是可視化標籤，一句話：可以在<body>中看到的標籤就是可視化標籤，比如<p>、<body>、<div>等這些都是可以看到的，所以是可視化標籤；而<style>、<meta>等在<body>中不能看到的標籤，就是非可視化標籤。注意：只有可視化標籤，才能用css改變它的樣式。
常用的可視化標籤
這裏只說幾個有代表性的，其實所有標籤都差不多，就像鋼筆和鉛筆一樣，都是寫字用的，只是作用不一樣。
- div
<!DOCTYPE html>
<html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
<style>
div{
border:1px solid green;
}
span{
border:1px solid red;
}
</style>
</head>
<body>
<div>This is a div</div>
<span>This is a span</span>
</body>
</html>上面代碼頁面沒講的內容大家不要急，後面會講。顯示：
發現上面那個框比較長，下面的和文字長度一樣，這是因爲有一個display屬性，div標籤display默認值是block，span標籤display默認值是inline，所以如果我把span標籤的display值改爲block，那麼兩個顯示就會相同了：
<!DOCTYPE html><html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
<style>
div{ border:1px solid green; display: block; }
span{ border:1px solid red; display: block; }
</style>
</head>
<body>
<div>This is a div</div>
<span>This is a span</span>
</body></html>顯示：
（代碼裏style標籤裏的內容就是css修改可視化標籤的方式。）
我們再加一個p標籤：
<!DOCTYPE html><html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
<style>
div{ border:1px solid green; display: block; }
span{ border:1px solid red; display: block; }
p{ border: 1px solid palevioletred; }
</style>
</head>
<body>
<div>This is a div</div>
<span>This is a span</span>
<p>This is a p</p>
</body></html>發現p標籤和上面的內容空了一行，這是因爲p標籤的margin屬性默認值不是0，所以如果想去掉空行，只需要在style中修改p標籤margin值爲0：
<!DOCTYPE html><html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
<style>
div{ border:1px solid green; display: block; }
span{ border:1px solid red; display: block; }
p{ border: 1px solid palevioletred; margin: 0px; }
</style>
</head>
<body>
<div>This is a div</div>
<span>This is a span</span>
<p>This is a p</p>
</body></html>看到頁面樣式變成了這樣：
- a標籤
a標籤因爲有一個href屬性，才變成了一個超鏈接，而div標籤就沒有href屬性，以後我們遇到**頁面跳轉或表單提交的的文字，都用a標籤**：
<!DOCTYPE html><html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
<style>
div{ border:1px solid green; display: block; }
span{ border:1px solid red; display: block; }
p{ border: 1px solid palevioletred; margin: 0px; }
</style>
</head>
<body>
<div>This is a div</div>
<span>This is a span</span>
<p>This is a p</p>
<a href="https://www.baidu.com">百度</a>
</body></html>這裏要注意的是，href屬性的地址寫的時候必須加協議，就是http或https或file等，如果不加就會頁面跳轉錯誤。
此外，大家看到這樣寫頁面是在當前頁面進行，跳轉，很多時候頁面跳轉需要新開標籤頁，那麼我們就要給a標籤增加一個target屬性，值爲_blank：
<a href="https://www.baidu.com" target="_blank">百度</a>這個target默認值爲_self。
- img標籤
我們先看一下文檔結構：
這裏我們文件當前位置就是lesson.html，所以現在我們img屬性src給的值要進入imgs文件夾，所以我們可以用相對路徑來表示，看代碼：
<!DOCTYPE html><html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<img src="imgs/0.png">
</body></html>上面src後面跟的就是相對路徑。
頁面顯示：
src除了用來設置圖片路徑以外，還用來設置alt屬性，alt屬性是用來給搜索引擎用的，以便你寫的頁面可以被搜索引擎搜索到。此外它還有width和height屬性，比如剛纔的圖片比較大，我們現在修改圖片的大小，只需要：
<img src="imgs/0.png" width="5%" height="5%">如果你希望自己的圖片是網絡上的圖片，那只需要粘貼你希望放上去的圖片地址，比如，放百度的背景，那麼只需要看一下百度的地址：
然後複製這個地址，粘貼到你的src路徑裏：
<img src="https://www.baidu.com/img/bd_logo1.png" width="50%" height="50%">但是要注意，如果圖片寫的是網絡上的圖片，要必須確定有網，不然圖片是不顯示的。
- ul li標籤
這兩個標籤是列表。
<!DOCTYPE html><html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body></html>顯示：
你可能會說除了ul li還有ol li，不用管那麼多，記住這個就夠了。
記住，只要頁面中有固定樣式的列表，那就用ul li，比如：
不信大家就去天貓看一下。
- table
表格。之前說過了，以今天的爲準。tr代表行，td代表列。
<table>
<tr>
<td>第1行1列</td>
<td>第1行2列</td>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
</tr></table>顯示：
如果想顯示邊框，可以加個border屬性：
<table border="1">...</table>
還要知道，table已經用的很少了，因爲存在瀏覽器的兼容性，很多時候都被ul li代替了。大家會想到上次還說的tbody現在卻沒有寫，其實即使我們不寫瀏覽器也會幫我們加上：
上圖中的tbody就是瀏覽器默認給我們加上的。此外，如果是表的第一行，需要加粗顯示的話，可以將tr改爲th：
<table border="1">
<tr>
<th>第1行1列</th>
<th>第1行2列</th>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
</tr></table>
th用來做表頭，默認字體居中顯示。
還有caption作爲表格的標題：
<table border="1">
<caption>表格標題</caption>
<tr>
<th>第1行1列</th>
<th>第1行2列</th>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
</tr></table>
tbody和caption等這些都不用記。
合併表格：
<table border="1">
<caption>表格標題</caption>
<tr>
<th>第1行1列</th>
<th>第1行2列</th>
<th>分數</th>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
<td>10</td>
</tr>
<tr>
<td colspan="2">總成績</td>
<td>20</td>
</tr></table>我們給td標籤加了colspan="2"，就可以合併兩行了：
最後給大家看一個例子，圖片來自https://nba.hupu.com/teams：
<!DOCTYPE html><html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<table border="1">
<caption>表格標題</caption>
<tr>
<th>第1行1列</th>
<th>第1行2列</th>
<th>分數</th>
<th>一整行</th>
</tr>
<tr>
<td><img src="imgs/0.png"></td>
<td><img src="imgs/1.png"></td>
<td><img src="imgs/2.png"></td>
<td rowspan="3"><img src="imgs/logo.png"></td>
</tr>
<tr>
<td><img src="imgs/3.png"></td>
<td><img src="imgs/4.png"></td>
<td><img src="imgs/5.png"></td>
</tr>
<tr>
<td><img src="imgs/6.png"></td>
<td><img src="imgs/7.png"></td>
<td><img src="imgs/8.png"></td>
</tr>
</table>
</body></html>如果對軟件測試、接口測試、自動化測試、面試經驗交流。感興趣可以加軟件測試交流：1085991341，還會有同行一起技術交流。
顯示：
寫會了上面這個例子，table這裏就沒什麼問題了。
大家想學就得加把勁，自己不努力誰也教不會。
以上內容希望對你有幫助，有被幫助到的朋友歡迎點贊，評論。