1.認(rèn)識(shí)網(wǎng)頁(yè)
1.1. web標(biāo)準(zhǔn)： 是w3c組織制定的網(wǎng)頁(yè)代碼規(guī)范
結(jié)構(gòu)標(biāo)準(zhǔn)：html - 決定網(wǎng)頁(yè)上有哪些內(nèi)容
表現(xiàn)標(biāo)準(zhǔn)：css - 決定網(wǎng)頁(yè)上的內(nèi)容和布局
行為標(biāo)準(zhǔn)：javascript - 決定網(wǎng)頁(yè)的動(dòng)態(tài)變化
2.認(rèn)識(shí)html
2.1. 說明是html(結(jié)構(gòu)標(biāo)準(zhǔn))
超文本 - 除了文字以外，還可以對(duì)圖片、視頻、音頻、超鏈接、按鈕、輸入框等進(jìn)行標(biāo)記。
標(biāo)記語(yǔ)言 - 不是編程語(yǔ)言,和MacDown語(yǔ)法一樣，只是通過不同的標(biāo)記讓內(nèi)容以不一樣的形式顯示出來。如果語(yǔ)法出錯(cuò)不會(huì)影響其他正確的標(biāo)記的效果
2.2. 什么是html文件
文件后綴.html的文件；可以直接通過瀏覽器打開。一般情況下，html代碼就寫在html文件中
2.3. html版本
狹義的h5 - html第5個(gè)大版本(支持移動(dòng)網(wǎng)頁(yè)開發(fā))
廣義的h5 - html5+css3+js
2.4. 網(wǎng)頁(yè)結(jié)構(gòu) - 樹
整個(gè)網(wǎng)頁(yè)是一個(gè)html標(biāo)簽，html中直接包含head標(biāo)簽和body標(biāo)簽。
2.5. 標(biāo)簽(標(biāo)記)
html就是通過不同的標(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.說明
標(biāo)簽名 - 只能寫html提供的標(biāo)簽，不能隨便命名; 標(biāo)簽名前不能加空格
屬性 - 屬性放在單標(biāo)簽或者雙標(biāo)簽的開始標(biāo)簽中，以‘屬性名=值’的形式出現(xiàn)，多個(gè)屬性之間用空格隔開;
屬性順序隨意，不會(huì)影響最終的效果；
標(biāo)簽內(nèi)容 - 雙標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間是標(biāo)簽內(nèi)容；標(biāo)簽內(nèi)容可以是任何內(nèi)容(可以寫文字，也可以放其他的標(biāo)簽)
2.6 head標(biāo)簽
head標(biāo)簽中主要包含以下內(nèi)容：
meta標(biāo)簽 - 元標(biāo)簽(單標(biāo)簽) charset="UTF-8" -設(shè)置編碼方式
title標(biāo)簽 - 設(shè)置網(wǎng)頁(yè)標(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
注意：html語(yǔ)法中不區(qū)分大小寫， html == HTML == HtmL
DOCTYPE - 對(duì)html版本進(jìn)行說明
html - 當(dāng)前使用的是html5
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" - 當(dāng)前使用的是html4.01
<!DOCTYPE html>
<!--網(wǎng)頁(yè)基本結(jié)構(gòu)-->
<html>
<!--head標(biāo)簽中的內(nèi)容除了標(biāo)題和圖片其他都不可見-->
<head>
<!--設(shè)置網(wǎng)頁(yè)中文本的編碼方式-->
<meta charset="UTF-8">
<!--設(shè)置網(wǎng)頁(yè)標(biāo)題-->
<title>千鋒教育-做真實(shí)的自己，用良心做教育</title>
</head>
<!--網(wǎng)頁(yè)內(nèi)容部分（可見的）-->
<body>
python
</body>
</html>
3.文本標(biāo)簽
3.1.標(biāo)題標(biāo)簽(h1~h6)
雙標(biāo)簽
網(wǎng)頁(yè)中標(biāo)題的部分使用標(biāo)題標(biāo)簽
<h1>我是標(biāo)題1</h1>
<h2>我是標(biāo)題2</h2>
<h3>我是標(biāo)題3</h3>
<h4>我是標(biāo)題4</h4>
<h5>我是標(biāo)題5</h5>
<h6>我是標(biāo)題6</h6>
3.2.段落標(biāo)簽(p)\
雙標(biāo)簽
網(wǎng)頁(yè)中一段文字就用一個(gè)p標(biāo)簽；一個(gè)p標(biāo)簽的內(nèi)容在一個(gè)段落顯示，如果有多個(gè)段落需要多個(gè)p標(biāo)簽
<p> </p>
注意：html中，在文本內(nèi)容中輸入回車，換行無(wú)效(在網(wǎng)頁(yè)上顯示的時(shí)候)
3.3.文本符號(hào)和強(qiáng)制換行標(biāo)簽
a.空格符號(hào)：
- 空一個(gè)像素
  - 一個(gè)空格
b.換行標(biāo)簽(br)
單標(biāo)簽
3.4.文字效果標(biāo)簽
a.文字加粗
b標(biāo)簽 - 單純的對(duì)文字進(jìn)行加粗
strong標(biāo)簽 - 除了對(duì)文字進(jìn)行加粗，還有強(qiáng)調(diào)的意思
b.文字傾斜
i標(biāo)簽 - 單純的對(duì)文字進(jìn)行傾斜
em標(biāo)簽 - 除了對(duì)文字進(jìn)行傾斜，還有強(qiáng)調(diào)的意思
c.水平線(hr)
單標(biāo)簽
hr標(biāo)簽 - hr所在的位置設(shè)置一個(gè)水平線
3.5.文字標(biāo)簽(font）
單純的顯示一段文字，多個(gè)font標(biāo)簽之間不會(huì)自動(dòng)換行（多個(gè)p標(biāo)簽之間會(huì)自動(dòng)換行）
<font>
新黨目前在臺(tái)北市議會(huì)中有兩席，<b>潘懷宗</b>、<em><strong>陳彥伯</strong></em>，在此次臺(tái)北市議員選舉總共推出7名參選人。<br />
3名青年軍參選，包括中山大同的蘇恒、松山信義的林明正和士林北投的侯漢廷，<br />
組成“很震撼（<i>恒正漢</i>）”連線，期望青年軍能替<em>新黨</em>在臺(tái)北市議會(huì)取得更多席次。
</font>
4. 標(biāo)簽列表
如果網(wǎng)頁(yè)中的多個(gè)內(nèi)容，他們屬于具有相同意義的內(nèi)容，就可以用一個(gè)列表標(biāo)簽將他們放在一起
4.1 1.無(wú)序列表(ul-li)
<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>
ul標(biāo)簽 - 代表整個(gè)列表
li - 表示列表中的元素
4.2. 有序列表(ol-li)
ol標(biāo)簽 - 代表整個(gè)列表
li - 表示列表中的元素
<p>香椒牛肉做法:</p>
<ol>
<li><img src="img/luffy2.png"/>將牛肉放水里煮熟，煮的時(shí)候加點(diǎn)兒鹽</li>
<li>撈起來，切片；再放油鍋里炸</li>
<li>把牛肉從油鍋里面撈起來。留一部分油炒料</li>
<li>炒料的時(shí)候先放姜，再放花椒和干海椒，再放點(diǎn)鹽。注意不要炒糊了。炒香后放牛肉。最后在要起鍋的時(shí)候放糖和雞精</li>
</ol>
4.3 自定義列表
自定義列表(dl-dt-dd)
dl - 代表整個(gè)列表
dt - 列表中的分組
dd - 每個(gè)分組下面的元素
<dl>
<dt>四川省</dt>
<dd>成都市</dd>
<dd>宜賓市</dd>
<dd>綿陽(yáng)市</dd>
<dd>德陽(yáng)市</dd>
<dt>遼寧省</dt>
<dd>大連</dd>
<dd>沈陽(yáng)</dd>
<dd>盤錦</dd>
</dl>
5.圖片標(biāo)簽
片標(biāo)簽(img) - 單標(biāo)簽
網(wǎng)頁(yè)上幾乎所有的圖片都是使用img標(biāo)簽直接或者間接的顯示的
1.src屬性 - 設(shè)置圖片地址
a.本地圖片 - 值為本地圖片的路徑(可以是相對(duì)路徑，也可以是絕對(duì)路徑;一般使用相對(duì)路徑)
b.網(wǎng)絡(luò)圖片 - 值為網(wǎng)絡(luò)圖片的url
2.title屬性 - 設(shè)置圖片標(biāo)題
當(dāng)鼠標(biāo)停留在圖片上才會(huì)顯示出來
3.alt屬性 - 設(shè)置圖片加載失敗的提示信息
只有在圖片加載失敗的時(shí)候才會(huì)顯示
6. 表格標(biāo)簽(table-tr-td)
table標(biāo)簽 - 代表整個(gè)表格
tr標(biāo)簽 - 代表表格中的每一行
td - 代表表格中的每一個(gè)單元格
1.border - 設(shè)置邊框?qū)挾?單位是像素)
設(shè)置整個(gè)表格的邊框?qū)挾葹閎order，同時(shí)設(shè)置每個(gè)單元的邊框?qū)挾葹?
2.bordercolor - 設(shè)置邊框顏色
html中的顏色值：
a.顏色的英語(yǔ)單詞，例如：red, yellow, green, pink
b.rgb對(duì)應(yīng)的16進(jìn)制值,前加#, 例如：#ff0000(紅色) #00ff00(綠色)
3.cellspacing - 設(shè)置表格中單元格和單元格之間，以及單元格和邊框之間的間距
4.cellpadding - 設(shè)置表格中的內(nèi)容到單元格邊框之間的間距
默認(rèn)情況下，單元格的大小跟內(nèi)容的大小有關(guān)
5.bgcolor - 設(shè)置背景顏色
作為table屬性 - 設(shè)置整個(gè)表格的背景顏色
作為tr屬性 - 設(shè)置一行的背景顏色
作為td屬性 - 設(shè)置一個(gè)單元格的背景顏色
6.width - 設(shè)置寬度
作為table屬性 - 設(shè)置整個(gè)列表的寬度
作為td屬性 - 設(shè)置當(dāng)前td所在的列的寬度
7.height - 設(shè)置高度
作為table屬性 - 設(shè)置整個(gè)列表的高度
作為tr屬性 - 設(shè)置一行的高度
8.align - 設(shè)置水平對(duì)齊方式
letf(默認(rèn)) - 左對(duì)齊
right - 右對(duì)齊
center - 居中
作為table屬性 - 讓整個(gè)表格在網(wǎng)頁(yè)中左對(duì)齊、右對(duì)齊、居中
作為tr屬性 - 讓一行中所有的單元格中的內(nèi)容，在單元格中左對(duì)齊、右對(duì)齊、居中
作為td屬性 - 讓一個(gè)單元格中的內(nèi)容，在單元格中左對(duì)齊、右對(duì)齊、居中
注意：html中所有的屬性值都是寫在雙引號(hào)里面
-->
<table align="center" height="600" width="1000" border="1" bordercolor="#0000ff" cellspacing="0" cellpadding="20" bgcolor="bisque">
<!--第一行-->
<tr align="center" height="50" bgcolor="salmon">
<td width="100">姓名</td>
<td>成績(jī)</td>
<td>是否留級(jí)</td>
</tr>
<!--第二行-->
<tr>
<td><img src="img/luffy2.png"/></td>
<td bgcolor="seagreen">第二行第二列</td>
<td>第二行第三列</td>
</tr>
<!--第三行-->
<tr>
<td>第三行第一列</td>
<td align="right">第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
</body>
</html>
