head
head中主要有以下的標(biāo)簽：
meta - 元，定義了HTML文檔中的元數(shù)據(jù)(設(shè)置網(wǎng)頁的基本設(shè)置)
title - 設(shè)置網(wǎng)頁標(biāo)題
seyle - 在html中提供CSS代碼對應(yīng)的標(biāo)簽
link - 導(dǎo)入圖標(biāo)/CSS文件的標(biāo)簽
script - 導(dǎo)入js代碼哲虾、文件的標(biāo)簽
base - url基本地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--設(shè)置網(wǎng)頁中文本的編碼方式-->
<title>狗神sb</title>
<!--設(shè)置網(wǎng)頁標(biāo)題-->
<link rel="icon" type="image/ico" href="img/aaa.ico"/>
<!--設(shè)置網(wǎng)頁圖標(biāo)
rel - 設(shè)置文件作用果正，stylesheet:樣式表侥涵，icon:圖標(biāo)
type - 設(shè)置文件類型涌献，文件類型/文件后綴；text/css:文本/后綴是css驶睦；image/ico:圖片/后綴是ico
href - 設(shè)置文件路徑
-->
</head>
<body>
<h1>狗神是個sb</h1>
</body>
</html>
body
<!--
如果需要在網(wǎng)頁中顯示文字杯缺，一般不直接將文字寫在body中蒸播；而是根據(jù)這個文字的功能找到對應(yīng)的標(biāo)簽
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.標(biāo)題標(biāo)簽(h1-h6)-->
<h1>content</h1>
<p>
n.所容納之物;所含之物;內(nèi)容;(書的)目錄，目次;(書萍肆、講話袍榆、節(jié)目等的)主題，主要內(nèi)容<br/>
adj.滿意;滿足;愿意<br/>
v.滿足;滿意;知足;使?jié)M意;使?jié)M足
</p>
<h2>context</h2>
<p>n.背景塘揣，環(huán)境包雀，來龍去脈;上下文;語境</p>
<h3>contest</h3>
<p>n.比賽;競賽;(控制權(quán)或權(quán)力的)爭奪，競爭</p>
<p>v.爭取贏得(比賽勿负、選舉等);爭辯;就…提出異議</p>
<h4>contact</h4>
<p>n.(尤指經(jīng)常的)聯(lián)系馏艾，聯(lián)絡(luò);觸摸;接觸;遇見(某人);碰上(要處理的事)</p>
<p>v.聯(lián)系劳曹，聯(lián)絡(luò)(如用電話或信件)</p>
<h5>contract</h5>
<p>n.合同;合約;契約;(雇用殺人的)協(xié)議</p>
<p>v.(使)收縮奴愉，縮小;感染(疾病);得(病);與…訂立合同(或契約)</p>
<h6>contrast</h6>
<p>n.明顯的差異;對比;對照;明顯不同的人(或事物);(攝影或繪畫中的)顏色反差，明暗對比</p>
<p>v.對比;對照;(靠近或作比較時)顯出明顯的差異铁孵，形成對比</p>
<!--2.段落標(biāo)簽(p標(biāo)簽)
雙標(biāo)簽锭硼，保證一個段落對應(yīng)一個p標(biāo)簽
一個標(biāo)簽占一行
-->
<p>======啦啦啦========</p>
<!--3.font標(biāo)簽
雙標(biāo)簽
一行可以有多個
-->
<font>性別 </font>
<font>男</font>
<font>女</font>
<!--4.文字效果相關(guān)標(biāo)簽
在HTML中直接敲或者空格、縮進是無效的蜕劝。
<br/> - 單標(biāo)簽檀头，讓網(wǎng)頁中的內(nèi)容強制換行
- 一個像素(一個" "代表空一個像素)
  - 一個空格
<b></b> - 加粗
<strong></strong> - 加粗(有強調(diào)意義)
<i></i> - 傾斜
<em></em> - 傾斜(有強調(diào)意義)
-->
<b>promote</b>
<strong>emphasize</strong>
<i>alongside</i>
<em>playground</em>
</body>
</html>
label_of_list
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.無序列表(ul)
ul標(biāo)簽 - 代表列表容器轰异，是一個整體
li標(biāo)簽 - 列表中的元素
-->
<ul>
<li>Python</li>
<li>java</li>
<li>html5</li>
<li>C++</li>
</ul>
<!--2.有序列表(ol)
ol標(biāo)簽 - 代表列表容器，是一個整體
li標(biāo)簽 - 列表中的元素
-->
<ol>
<li><a href="02_textlabel_in_body.html">open the door</a></li>
<li>put it in</li>
<li>close the door</li>
</ol>
<!--3.自定義列表(dl)
dl標(biāo)簽 - 代表列表容器暑始，是一個整體
dt標(biāo)簽 - 小分類標(biāo)簽(名詞)
dd標(biāo)簽 - 小分類下面的元素(解釋)
-->
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>綿陽</dd>
<dd>遂寧</dd>
<dd>眉山</dd>
</dl>
</body>
</html>
Hyperlink&Image
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片和超鏈接</title>
</head>
<body>
<!--1.圖片標(biāo)簽(img)
單標(biāo)簽
默認情況下一行可以顯示多張圖片
src屬性:設(shè)置圖片地址搭独、路徑；可以是本地路徑也可以是網(wǎng)絡(luò)地址
title屬性:設(shè)置圖片標(biāo)題(當(dāng)鼠標(biāo)停留在圖片上才會顯示出來)
alt屬性:圖片加載失敗的時候的提示信息
-->
<img src="img/aaa123.ico" title="luffy" alt="圖片不存在"/>
<br/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557739007443&di=c0a97654926874356cdc2434de850222&imgtype=0&src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F04%2F13%2FFsvJLLQDuskatmrjMK0yDCixiy7L.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg" title="nevermore"/>
<!--2.超鏈接(a)
雙標(biāo)簽
1)href屬性:跳轉(zhuǎn)的目的地
網(wǎng)址 - 點擊超鏈接直接加載網(wǎng)址對應(yīng)的網(wǎng)頁
本地html文件地址 - 點擊超鏈接直接加載本地html文件對應(yīng)的網(wǎng)頁
# - 刷新
選擇器 - 讓當(dāng)前頁面滾動到指定的位置
2)target屬性：跳轉(zhuǎn)方式
_self - 在當(dāng)前頁面中加載新的網(wǎng)頁(默認值)
_blank - 在新的頁面中加載新的網(wǎng)頁
-->
<a href="#num1" id="top">第一組</a>
<!--加載網(wǎng)頁-->
<p id="num1">1.加載網(wǎng)頁</p>
<a target="_blank">百度一下</a>
<br />
<!--加載本地html文件-->
<a href="01_label_in_head.html">01_label_in_head</a>
<a href="03_list_of_label.html"><img src="img/luffy1.png"/ title="luffy"></a>
<br />
<!--刷新當(dāng)前網(wǎng)頁-->
<a href="#">刷新</a>
<br />
<!--頁面內(nèi)跳轉(zhuǎn)-->
<a href="#top">回到頂部</a>
<br />
<h1>---------分割線-----------</h1>
<font><img src="img/aaa.ico" />為保障您的賬戶安全和正常使用廊镜，請盡快完成手機驗證牙肝！新版<a >《京東隱私政策》</a>已上線</font>
</body>
</html>
label_of_table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標(biāo)簽</title>
</head>
<body>
<!--表格
1.table標(biāo)簽 - 代表表格整體
cellspacing屬性:設(shè)置表格中單元格和單元格以及單元格和表格邊框的間距
bgcolor屬性:設(shè)置整個表格的背景顏色
cellpadding:設(shè)置單元格中的內(nèi)容到邊框上下左右的距離
width屬性:設(shè)置整個表格的寬度
height屬性:設(shè)置整個表格的高度
align屬性:center(居中)，left(左對齊)嗤朴，right(右對齊)配椭；讓整個表格在它的父標(biāo)簽里面居中、居左或者具右
2.tr - 代表表格中的一行
bgcolor屬性:設(shè)置一行中所有單元格的背景顏色
height屬性:設(shè)置一行的高度
align屬性:控制一行中的內(nèi)容在單元格里的位置
3.td - 代表表格中的一個單元格
bgcolor屬性:設(shè)置一個單元格的背景顏色
width屬性:設(shè)置td所在的列的寬度
align屬性:控制一個單元格中的內(nèi)容在單元格里的位置
補充:細線表格
1)設(shè)置整個的table的背景顏色是邊框線的顏色
2)設(shè)置每個單元格的顏色和邊框線的顏色不一樣
3)設(shè)置單元格和單元格之間的間距(cellspacing)為1
-->
<table cellspacing="5" border="5" bordercolor="black" bgcolor="white" cellpadding="10" align="center">
<!--第一行-->
<tr height="200px">
<td width="450px" align="center" >四川</td>
<td width="450px">在編人數(shù)</td>
<td>有效人數(shù)</td>
</tr>
<!--第二行-->
<tr bgcolor="aqua">
<td>成都本部</td>
<td>1200</td>
<td>250</td>
</tr>
<!--第三行-->
<tr>
<td>金牛</td>
<td>2000</td>
<td>450</td>
</tr>
<!--第四行-->
<tr>
<td>青羊</td>
<td>1700</td>
<td>350</td>
</tr>
</table>
<br />
<table cellspacing="0" border="1" bordercolor="gray">
<!--第一行-->
<tr height="50">
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100" colspan="2"></td>
</tr>
<!--第二行-->
<tr height="50">
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第三行-->
<tr height="50">
<td></td>
<td colspan="2"></td>
<td rowspan="3"></td>
<td rowspan="3" colspan="2"></td>
</tr>
<!--第四行-->
<tr height="50">
<td></td>
<td colspan="2"></td>
</tr>
<!--第五行-->
<tr height="50">
<td></td>
<td></td>
<td></td>
</tr>
<!--第六行-->
<tr height="50">
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!--第七行-->
<tr height="50">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
