1.結(jié)構(gòu)標(biāo)準(zhǔn)
1.1.什么是html（結(jié)構(gòu)標(biāo)準(zhǔn)）
html是超文本標(biāo)記語(yǔ)言
超文本 - 除了文字以外肮之，還可以對(duì)圖片、視頻衣摩、音頻麦备、超鏈接、按鈕昭娩、輸入框等進(jìn)行標(biāo)記
標(biāo)記語(yǔ)言 - 不是編程語(yǔ)言，和macdown一樣黍匾，只是通過(guò)不同的標(biāo)記讓內(nèi)容以不一樣的形式顯示出來(lái)栏渺，如果語(yǔ)法出錯(cuò)不會(huì)影響其他正確的標(biāo)記的效果
2.什么是html文件
文件后綴是.html的文件，可以通過(guò)瀏覽器打開(kāi)锐涯，一般情況下html代碼就寫(xiě)在html文件中
3.html版本
狹義的h5 - html第五個(gè)大版本(支持移動(dòng)網(wǎng)頁(yè)開(kāi)發(fā))
廣義的h5 - html5 + css3 + js
4.html結(jié)構(gòu)（網(wǎng)頁(yè)結(jié)構(gòu)）- 樹(shù)
整個(gè)網(wǎng)頁(yè)是有一個(gè)html標(biāo)簽磕诊，html中直接包含head標(biāo)簽和body標(biāo)簽
5.標(biāo)簽（標(biāo)記）
html就是通過(guò)不同的標(biāo)簽對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行標(biāo)記
a.結(jié)構(gòu)
雙標(biāo)簽:<標(biāo)簽名 屬性名1=屬性值1 屬性名2=屬性值2...>標(biāo)簽內(nèi)容</標(biāo)簽名>
單標(biāo)簽:<標(biāo)簽名 屬性名1=屬性值1 屬性名2=屬性值2...>或<標(biāo)簽名 屬性名1=屬性值1 屬性名2=屬性值2.../>
b.說(shuō)明
標(biāo)簽名 - 只能寫(xiě)html提供的標(biāo)簽名，不能隨便命名纹腌；標(biāo)簽名前不能隨便加空格
屬性 - 屬性放在單標(biāo)簽或者雙標(biāo)簽的開(kāi)始標(biāo)簽中霎终，以"屬性名=值"的形式出現(xiàn)，多個(gè)屬性之間用空格隔開(kāi)升薯；屬性的順序不會(huì)影響最終效果
標(biāo)簽內(nèi)容 - 雙標(biāo)簽的的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的標(biāo)簽內(nèi)容莱褒，標(biāo)簽內(nèi)容可以是任何內(nèi)容，可以寫(xiě)文字涎劈，也可以放其他的標(biāo)簽
注意：未做特殊申明均指雙標(biāo)簽
6.head標(biāo)簽
head標(biāo)簽中主要包含以下內(nèi)容
meta標(biāo)簽 - 元標(biāo)簽(單標(biāo)簽)<meta charset="UTF-8"> - 設(shè)置編碼方式
title標(biāo)簽 - 設(shè)置網(wǎng)絡(luò)標(biāo)題
link標(biāo)簽 - 導(dǎo)入外部文件(設(shè)置圖標(biāo)广凸， 導(dǎo)入css文件)
style標(biāo)簽 - 導(dǎo)入css代碼
script標(biāo)簽 - 導(dǎo)入js文件和導(dǎo)入js代碼
base標(biāo)簽 - 設(shè)置網(wǎng)頁(yè)中的基本url
<!--
DOCTYPE - 對(duì)html版本進(jìn)行說(shuō)明
html - 當(dāng)前使用的是html5
注意：html語(yǔ)法中不區(qū)分大小寫(xiě)，html == HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> - 代表當(dāng)前的是html4.01
-->
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--網(wǎng)頁(yè)基本結(jié)構(gòu)-->
<html>
<!--head標(biāo)簽中除了標(biāo)題和圖片其他都不可見(jiàn)-->
<head>
<!--設(shè)置網(wǎng)頁(yè)中文本的編碼方式-->
<meta charset="UTF-8">
<!--設(shè)置網(wǎng)頁(yè)標(biāo)題-->
<title>千峰教育-做真實(shí)的自己蛛枚，用良心做教育</title>
</head>
<!--網(wǎng)頁(yè)內(nèi)容部分谅海，可見(jiàn)的-->
<body>
python
</body>
</html>
2.body標(biāo)簽
2.1.標(biāo)題標(biāo)簽（h1-h6）
雙標(biāo)簽，網(wǎng)頁(yè)中標(biāo)題的部分使用標(biāo)題標(biāo)簽
2.2.段落標(biāo)簽(p)
雙標(biāo)簽,網(wǎng)頁(yè)中一個(gè)段落文字就用一個(gè)p標(biāo)簽蹦浦，一個(gè)p標(biāo)簽的內(nèi)容在一個(gè)段落顯示扭吁，如果有多個(gè)段落用多個(gè)p標(biāo)簽
注意：html中，在文本內(nèi)容中輸入回車(chē)盲镶，換行無(wú)效(網(wǎng)頁(yè)顯示的時(shí)候)
2.3.文本符號(hào)和強(qiáng)制換行標(biāo)簽
空格符號(hào):  ; - 空一個(gè)像素;&emsp ;- 一個(gè)空格鍵
換行標(biāo)簽：br,單標(biāo)簽
2.4.文字效果標(biāo)簽
a.文字加粗
b標(biāo)簽 - 雙標(biāo)簽侥袜，單純的對(duì)文字進(jìn)行加粗
strong標(biāo)簽 - 雙標(biāo)簽，除了對(duì)文字進(jìn)行加粗徒河，還有強(qiáng)調(diào)的意思
b.傾斜
i標(biāo)簽 - 單純對(duì)文字進(jìn)行傾斜系馆，雙標(biāo)簽
em標(biāo)簽 - 除了對(duì)文字進(jìn)行傾斜，還有強(qiáng)調(diào)的意思顽照，雙標(biāo)簽
c.水平線標(biāo)簽(hr/)
單標(biāo)簽,hr標(biāo)簽 - hr所在的位置設(shè)置一個(gè)水平線
d.font標(biāo)簽 - 單純的顯示一段文字由蘑，可以當(dāng)成p標(biāo)簽來(lái)用闽寡，多個(gè)font之間不會(huì)自動(dòng)換行，多個(gè)p之間會(huì)自動(dòng)換行
3.列表標(biāo)簽
如果網(wǎng)頁(yè)中的多個(gè)內(nèi)容尼酿，他們屬于具有相同意義的內(nèi)容就可以用一個(gè)列表標(biāo)簽將他們放在一起
3.1.無(wú)序列表
ul-li標(biāo)簽
ul標(biāo)簽 - 代表整個(gè)列表
li標(biāo)簽 - 表示列表中的元素
<p>高考學(xué)科:</p>
<ul>
<li>數(shù)學(xué)</li>
<font>數(shù)學(xué)是最難的</font>
<li>語(yǔ)文</li>
<li>英語(yǔ)</li>
<li>物理</li>
<li>化學(xué)</li>
<li>生物</li>
</ul>
3.2.有序列表
ol - li
ol - 代表整個(gè)列表
li - 表示列表中的元素
<p>香椒牛肉做法:</p>
<ol>
<li>將牛肉放水里煮熟爷狈，煮的時(shí)候加點(diǎn)兒鹽</li>
<li>撈起來(lái)，切片裳擎；再放油鍋里炸</li>
<li>把牛肉從油鍋里面撈起來(lái)涎永，留一份油炒料</li>
</ol>
3.3.自定義列表
dl標(biāo)簽 - 代表整個(gè)列表
dt標(biāo)簽 - 列表中的分組
dd標(biāo)簽 - 每個(gè)分組下的元素
<dl>
<dt>四川省
<dd>成都市</dd>
<dd>宜賓</dd>
<dd>綿陽(yáng)</dd>
<dd>德陽(yáng)</dd>
</dt>
<dt>遼寧省
<dd>大連</dd>
<dd>沈陽(yáng)</dd>
</dt>
</dl>
4.img標(biāo)簽
網(wǎng)頁(yè)上幾乎所有的圖片都是使用img標(biāo)簽直接或者間接顯示的
單標(biāo)簽
src屬性 - 設(shè)置圖片地址
a.本地圖片 - 設(shè)置為本地圖片的路徑，可以是相對(duì)路徑鹿响，也可以是絕對(duì)路徑
b.網(wǎng)絡(luò)圖片 - 值為網(wǎng)絡(luò)圖片的URL
title屬性 - 設(shè)置圖片標(biāo)題
當(dāng)鼠標(biāo)停留在圖片上羡微，才會(huì)顯示出來(lái)
alt屬性 - 設(shè)置圖片加載失敗的提示信息
只有在圖片加載失敗的時(shí)候才會(huì)顯示
<img src="img/HBuilder.png" title="工具" alt="加載失敗" />
<img src="https://www.baidu.com/img/bd_logo1.png?qua=high" title="百度一下" alt="加載失敗" />
5.超鏈接
點(diǎn)擊可以跳轉(zhuǎn)到其他頁(yè)面的內(nèi)容就是超鏈接,是一個(gè)單標(biāo)簽
5.1.內(nèi)容
超鏈接在網(wǎng)頁(yè)中可見(jiàn)并且可以點(diǎn)擊的部分，可以是文字惶我，也可以是圖片
5.2.href屬性 - 超鏈接點(diǎn)擊后跳轉(zhuǎn)的目標(biāo)地址
a.設(shè)置另外一個(gè)網(wǎng)頁(yè)地址 - 跳轉(zhuǎn)到指定的網(wǎng)頁(yè)
b.設(shè)置成另一個(gè)本地html文件路徑 - 跳轉(zhuǎn)到本地的網(wǎng)頁(yè)中
c.設(shè)置成當(dāng)前頁(yè)面的標(biāo)簽對(duì)應(yīng)的選擇器 - 讓當(dāng)前網(wǎng)頁(yè)滾動(dòng)到指定的位置
d.設(shè)置為空 - 刷新網(wǎng)頁(yè)妈倔，會(huì)重新請(qǐng)求數(shù)據(jù)
5.3.target屬性
_self(默認(rèn)值) - 在當(dāng)前頁(yè)面中顯示新的網(wǎng)頁(yè)
_blank - 在新的頁(yè)面中顯示新的網(wǎng)頁(yè)
<!--文字超鏈接-->
<a >百度一下</a>
<!--圖片超鏈接-->
<a href=""><img src="img/HBuilder.png" alt="" /></a>
<hr />
<a href="img/HBuilder.png">圖片標(biāo)簽</a>
<a href="#img1">圖1</a>
<a href="">刷新</a>
<hr />
<a target="_blark">百度一下</a>
6.表格標(biāo)簽
table標(biāo)簽 - 代表整個(gè)表格
tr標(biāo)簽 - 代表表格中的每一行
td標(biāo)簽 - 代表表格中的每一個(gè)單元格
6.1.border屬性 - 設(shè)置邊框?qū)挾?單位是像素)
設(shè)置整個(gè)表格的邊框?qū)挾葹閎order，同時(shí)設(shè)置每個(gè)單元格之間的邊框?qū)挾葹?
6.2.bordercolor - 設(shè)置邊框顏色
html的顏色值:
a.顏色的英語(yǔ)單詞 ,例如red,blue,yellow,green,pink
b. rgb對(duì)應(yīng)的二進(jìn)制值绸贡，前面要加#,例如#ff0000(red),#00ff00(green),#0000ff(blue)
6.3.cellspacing - 設(shè)置表格中單元格和單元格之間盯蝴，以及單元格和邊框之間的間距
注意:html中所有的屬性值都是寫(xiě)在雙引號(hào)里面
6.4.cellpadding - 設(shè)置表格中的內(nèi)容到單元格邊框之間的間距
默認(rèn)情況下，單元格的大小跟這一列中的內(nèi)容的大小有關(guān)
6.5.bgcolor - 設(shè)置背景顏色
作為table屬性 - 設(shè)置整個(gè)表格的背景顏色
作為tr屬性 - 設(shè)置一行的背景顏色
作為td屬性 - 設(shè)置一個(gè)單元格的背景顏色
6.6.width屬性
作為table屬性 - 設(shè)置整個(gè)表格的寬度
作為td屬性 - 設(shè)置一個(gè)單元格所在列的寬度
6.7.height屬性
作為table屬性 - 設(shè)置整個(gè)表格的高度
作為tr屬性 - 設(shè)置一行的高度
6.8.align - 設(shè)置水平對(duì)齊方式
left(默認(rèn)) - 左對(duì)齊
right - 右對(duì)齊
center - 居中
作為table屬性 - 讓整個(gè)表格在網(wǎng)頁(yè)中左對(duì)齊听怕、右對(duì)齊捧挺、居中
作為tr屬性 - 讓一行中所有的單元格中的內(nèi)容，在單元格中左對(duì)齊尿瞭、右對(duì)齊闽烙、居中
作為td屬性 - 讓一個(gè)單元格中的內(nèi)容，在單元格中左對(duì)齊声搁、右對(duì)齊鸣峭、居中
6.9 colspan - 列合并
6.10 rowspan - 行合并
<table width="500" border="1" bordercolor="black" cellspacing="0" cellpadding="30" bgcolor="red">
<tr height="100" bgcolor="green" align="center">
<td >姓名</td>
<td>成績(jī)</td>
<td>是否留級(jí)</td>
</tr>
<tr bgcolor="blue">
<td>2-1</td>
<td><img src="img/HBuilder.png"/></td>
<td align="right" width="500">2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td bgcolor="pink">3-3</td>
</tr>
