1 基本結(jié)構(gòu)
- head
- title
- meta
- body
2 head標簽
- meta
元標簽聂喇，定義了html文檔中的元數(shù)據(jù)（設(shè)置了網(wǎng)頁的基本設(shè)置）;charset屬性設(shè)置網(wǎng)頁的文本編碼方式推沸。 - title
設(shè)置網(wǎng)頁標題，不設(shè)置標題則默認顯示ip - style
在html提供css代碼對應(yīng)的標簽 - link
導(dǎo)入圖標/css文件的標簽
<!DOCTYPE html>
<html>
<head>
<!--charset設(shè)置網(wǎng)頁的文本編碼方式-->
<meta charset="UTF-8">
<!--設(shè)置網(wǎng)頁標題-->
<title>head中的標簽</title>
<!--
rel - 設(shè)置文件作用嚼贡，stylessgeet：樣式表，icon:圖標
type - 設(shè)置文件類型同诫，文件類型/文件后綴编曼；text/css：文本文件/后綴是css,image/ico:圖片/后綴ico
href - 設(shè)置文件路徑；可以是絕對路徑也可以是相對路徑剩辟，與python用法相同
-->
<link rel="icon" type="image/ico" href="./img/jd_logo.ico" />
</head>
<body>
111
</body>
</html>
3 文本標簽
如果需要在網(wǎng)頁中顯示文在，一般不直接將文字寫在body中往扔，而是根據(jù)文字的功能找到對應(yīng)的標簽贩猎。
- 標題標簽
標題標簽（h1-h6）,雙標簽，一個標簽占一行 - 段落標簽（p標簽）
雙標簽萍膛，保證一個段落對應(yīng)一個p標簽吭服，一個標簽占一行 - font標簽
雙標簽，一行可以顯示多個 - 文字效果相關(guān)標簽
在html中直接敲空格蝗罗、縮進是無效的艇棕。
- 單標簽，在網(wǎng)頁中的內(nèi)容強制換行串塑，也可以讓標簽換行
  - 一個像素（一個 代表空一個像素）
&emsp - 一個空格
<b></b> - 加粗
<strong></strong> - 加粗,有強調(diào)意義
<i><i/> - 傾斜
<em></em> - 傾斜沼琉，有強調(diào)意義
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1、標題標簽（h1-h6）,雙標簽桩匪，一個標簽占一行
-->
<h1>我是標題1</h1>
<h2>我是標題1</h2>
<h3>我是標題1</h3>
<h4>我是標題1</h4>
<h5>我是標題1</h5>
<h6>我是標題1</h6>
<!--
2打瘪、段落標簽（p標簽）
雙標簽，保證一個段落對應(yīng)一個p標簽傻昙，一個標簽占一行
-->
<p>hello</p>
<p>world</p>
<!--
3闺骚、font標簽
雙標簽，一行可以顯示多個
-->
<font>性別</font>
<font>男</font>
<font>女</font>
<!--
4妆档、文字效果相關(guān)標簽
在html中直接敲空格僻爽、縮進是無效的。
<br/> - 單標簽贾惦，在網(wǎng)頁中的內(nèi)容強制換行胸梆，也可以讓標簽換行
  - 一個像素（一個 代表空一個像素）
&emsp - 一個空格
<b></b> - 加粗
<strong></strong> - 加粗,有強調(diào)意義
<i><i/> - 傾斜
<em></em> - 傾斜，有強調(diào)意義
-->
<p>
<i>床前</i>明月光须板，<br />
疑是地上霜乳绕；<br />
 <b>舉頭</b>望<strong>明月</strong>；
</p>
</body>
</html>
4 列表標簽
- 無序列表
ul標簽 - 代表列表容器逼纸，是一個整體
li標簽 - 列表中的元素 - 有序列表
ol標簽 - 代表列表容器洋措，是一個整體
li標簽 - 列表中的元素 - 自定義列表
dl標簽 - 代表列表容器，是一個整體
dt標簽 - 小分類標簽（名詞）
dd標簽 - 小分類下面的元素（解釋）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1杰刽、無序劣列表（ul）
ul標簽 - 代表列表容器菠发，是一個整體
li標簽 - 列表中的元素
-->
<ul>
<li>python</li>
<li>h5</li>
<li>java</li>
<li>testing</li>
</ul>
<!--
2王滤、有序列表（ol）
ol標簽 - 代表列表容器，是一個整體
li標簽 - 列表中的元素
-->
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ol>
<!--
3滓鸠、自定義列表（dl）
dl標簽 - 代表列表容器雁乡，是一個整體
dt標簽 - 小分類標簽（名詞）
dd標簽 - 小分類下面的元素（解釋）
-->
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>綿陽</dd>
<dd>南充</dd>
<dt>遼寧</dt>
<dd>沈陽</dd>
<dd>大連</dd>
<dd>盤錦</dd>
</dl>
</body>
</html>
5 圖片和超鏈接
- 圖片標簽（img）
單標簽，默認一行顯示多張圖片
a. src屬性：設(shè)置圖片地址/路徑糜俗；可以是本地路徑踱稍，也可以是網(wǎng)絡(luò)地址
b. title屬性：設(shè)置圖片標題，鼠標停留在圖片上才會顯示出來
c. alt屬性：圖片加載失敗時的提示信息 - 超鏈接（a）
雙標簽
a. href屬性：跳轉(zhuǎn)的目的地
網(wǎng)址 - 點擊超鏈接直接加載網(wǎng)址對應(yīng)的網(wǎng)頁
本地html文件地址 - 點擊超鏈接直接加載本地html文件對應(yīng)的網(wǎng)頁
# - 刷新
選擇器 - 讓當前頁面滾動到指定的位置
b. target屬性：設(shè)置跳轉(zhuǎn)方式
_self - 在當前頁面中加載新的內(nèi)容
_blank - 在新的頁面中加載新的網(wǎng)頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片和超鏈接</title>
</head>
<body>
<!--
1悠抹、圖片標簽（img）
單標簽珠月，默認一行顯示多張圖片
a. src屬性：設(shè)置圖片地址/路徑；可以是本地路徑楔敌，也可以是網(wǎng)絡(luò)地址
b. title屬性：設(shè)置圖片標題啤挎，鼠標停留在圖片上才會顯示出來
c. alt屬性：圖片加載失敗時的提示信息
-->
<img src="img/luffy.jpg" title="路飛" alt="圖片不存在"><br />
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" title="百度"><br />
<!--
2、超鏈接（a）
雙標簽
a. href屬性：跳轉(zhuǎn)的目的地
網(wǎng)址 - 點擊超鏈接直接加載網(wǎng)址對應(yīng)的網(wǎng)頁
本地html文件地址 - 點擊超鏈接直接加載本地html文件對應(yīng)的網(wǎng)頁
# - 刷新
選擇器 - 讓當前頁面滾動到指定的位置
b. target屬性：設(shè)置跳轉(zhuǎn)方式
_self - 在當前頁面中加載新的內(nèi)容
_blank - 在新的頁面中加載新的網(wǎng)頁
-->
<!--加載網(wǎng)頁-->
<a target="_self">百度一下卵凑，你就知道</a><br />
<a target="_blank"><img src="https://www.baidu.com/img/bd_logo1.png?where=super"/></a><br / >
<br />
<!--接在本地html文件-->
<a href="03-列表標簽.html">列表</a>
<br />
<!--刷新當前網(wǎng)頁-->
<a href="#">刷新</a>
<br / >
<!--頁面內(nèi)跳轉(zhuǎn)：需要用到選擇器-->
<a href="02-文本標簽.html">文本標簽</a>
<a ><img src="img/aaa.ico" title="淘寶"/></a><br />
<br />
<img src="img/aaa.ico"/>依據(jù)《網(wǎng)絡(luò)安全法》庆聘，為保障您的賬戶安全和正常使用，請盡快完成手機號驗證勺卢！ 新版<a target="_blank">《京東隱私政策》</a>已上線伙判，將更有利于保護您的個人隱私
</body>
</html>
6 表格標簽
表格
1. table標簽 - 代表表格整體
2. tr - 代表表格中的一行
3. td - 代表表格中的一個單元格
屬性：
cellsapacing - 設(shè)置表格中單元格與單元格及表格邊框的間距
bgcolor - 設(shè)置整個表格、某一行或者某個單元格的背景顏色
border - 設(shè)置單元格邊框的寬度
bordercolor - 設(shè)置邊框的顏色
cellpadding - 設(shè)置單元格中的內(nèi)容到單元格邊框（上下左右）之間的距離
width - 設(shè)置整個表格或一列的寬度
height - 設(shè)置整個表格或一行的高度
align - center(居中)黑忱，left(左對齊)澳腹，right(右對齊)
讓表格在整個瀏覽器中居中（左，右）
或讓單元格在表格中居中（左杨何，右）
補充：細線表格
1）設(shè)置整個的table的背景顏色是邊框線的顏色
2）設(shè)置每個單元格的顏色和邊框線的顏色不一樣
3）設(shè)置單元格和單元格的間距（cellspacing為1）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表格
1. table標簽 - 代表表格整體
2. tr - 代表表格中的一行
3. td - 代表表格中的一個單元格
屬性：
cellsapacing - 設(shè)置表格中單元格與單元格及表格邊框的間距
bgcolor - 設(shè)置整個表格酱塔、某一行或者某個單元格的背景顏色
border - 設(shè)置單元格邊框的寬度
bordercolor - 設(shè)置邊框的顏色
cellpadding - 設(shè)置單元格中的內(nèi)容到單元格邊框（上下左右）之間的距離
width - 設(shè)置整個表格或一列的寬度
height - 設(shè)置整個表格或一行的高度
align - center(居中)，left(左對齊)危虱，right(右對齊)
讓表格在整個瀏覽器中居中（左羊娃，右）
或讓單元格在表格中居中（左，右）
補充：細線表格
1）設(shè)置整個的table的背景顏色是邊框線的顏色
2）設(shè)置每個單元格的顏色和邊框線的顏色不一樣
3）設(shè)置單元格和單元格的間距（cellspacing為1）
-->
<table cellspacing="1" cellpadding="10" bgcolor="red" align="center">
<!--第一行-->
<tr bgcolor="white" align="center" height="100">
<td align="left">姓名</td>
<td>成績</td>
<td align="left">學(xué)員評價</td>
</tr>
<!--第二行-->
<tr bgcolor="chartreuse">
<td bgcolor="aqua">張三</td>
<td>60</td>
<td>不留級</td>
</tr>
<!--第三行-->
<tr bgcolor="white">
<td>李四</td>
<td>80</td>
<td>不留級</td>
</tr>
<!--第四行-->
<tr bgcolor="white">
<td>王麻子</td>
<td>55</td>
<td>留級</td>
</tr>
</table>
</body>
</html>
7 復(fù)雜表格
colspan屬性：列合并
rowspan屬性：行合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
colspan屬性：列合并
rowspan屬性：行合并
-->
<table border="1" bordercolor="black" cellspacing="0" width="1000" height="1000">
<!--第一行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第二行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第三行-->
<tr>
<td></td>
<td colspan="2"></td>
<td rowspan="3"></td>
<td rowspan="3" colspan="2"></td>
</tr>
<!--第四行-->
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<!--第五行-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!--第六行-->
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!--第七行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br />
<br />
<!--練習(xí)-->
<table border="1" bordercolor="black" cellspacing="0" width="1200" height="1200">
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
