一、web基礎(chǔ)：
- web標(biāo)準(zhǔn):（萬維網(wǎng)-W3C）
機(jī)構(gòu)標(biāo)準(zhǔn)：HTML ---決定網(wǎng)頁(yè)上有什么東西（能夠顯示什么內(nèi)容），給網(wǎng)頁(yè)提供內(nèi)容
邊線標(biāo)準(zhǔn)：CSS ----決定網(wǎng)頁(yè)上內(nèi)容的布局和顯示樣式
行為標(biāo)準(zhǔn)：javascript(js)--決定網(wǎng)頁(yè)動(dòng)態(tài)的效果或者變化的頁(yè)面效果
- 認(rèn)識(shí)HTNL
HTML是超文本標(biāo)記語言（可以用來標(biāo)記文本、圖片、視頻、音頻、flash、按鈕、輸入框等內(nèi)容）。
HTNL 不是編程語言，不會(huì)編譯執(zhí)行，語法錯(cuò)誤也不會(huì)報(bào)錯(cuò)導(dǎo)致程序不能往后運(yùn)行。
- HTNL版本
廣義的H5：指HTNL5+CSS3+js
狹義的H5：HTNL5
- HTNL編程
a. HTNL標(biāo)記語言對(duì)應(yīng)的文件后綴，一般都是html
b. HTNL的結(jié)構(gòu)：整個(gè)網(wǎng)頁(yè)通過不同的標(biāo)簽來組成。
- 標(biāo)記/標(biāo)簽
a. 雙標(biāo)簽（常規(guī)標(biāo)簽）
<標(biāo)簽名 屬性=屬性值 屬性=屬性值>標(biāo)簽內(nèi)容</標(biāo)簽名>
b. 單標(biāo)簽（自閉合標(biāo)簽）
<標(biāo)簽名 屬性=屬性值 屬性=屬性值 />
<標(biāo)簽名 屬性=屬性值 屬性=屬性值 >
說明：
標(biāo)簽名：HTNL標(biāo)準(zhǔn)中固定的（注意：和標(biāo)簽名之間不能有空白）
屬 性 ：屬性和標(biāo)簽名之間用空格隔開，以屬性=屬性值的形式存在，多個(gè)屬性之間也用空格隔開，
（屬性可以是HTNL中的屬性，也可以是自定義的屬性）
標(biāo)簽內(nèi)容：是指開始標(biāo)簽和結(jié)束表標(biāo)簽之間的內(nèi)容（單標(biāo)簽沒有）。標(biāo)簽的內(nèi)容可以任何內(nèi)容（可以是字符串，也可以是其他任何標(biāo)簽）
<a></a> --- a標(biāo)簽
<p></p> --- p標(biāo)簽
<input> --- input標(biāo)簽
補(bǔ)充：
HTML 中不區(qū)分大小寫 (HTML html 或者 HTml都是一樣的）
- 網(wǎng)頁(yè)的機(jī)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>你是我的頁(yè)</title>
</head>
<body>
</body>
</html>
<!--對(duì)當(dāng)前的版本進(jìn)行說明,默認(rèn)版本html（HTML5）-->
<!DOCTYPE html>
<!--html標(biāo)簽代表整個(gè)網(wǎng)頁(yè)-->
<html>
<!--
head標(biāo)簽中的內(nèi)容一般都是看不見的，并且里面的子標(biāo)簽是固定的，功能是對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置性的設(shè)置：
title標(biāo)簽
meta標(biāo)簽---charset屬性
link標(biāo)簽
style標(biāo)簽
script標(biāo)簽
base標(biāo)簽
-->
<head>
<meta charset="utf-8" />
<!--設(shè)置網(wǎng)頁(yè)標(biāo)題（可見標(biāo)簽）-->
<title>HTML基礎(chǔ)</title>
</head>
<!--描述：body標(biāo)簽中的內(nèi)容，負(fù)責(zé)整個(gè)網(wǎng)頁(yè)的顯示內(nèi)容。-->
<body>
</body>
</html>
二、文本標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本標(biāo)簽學(xué)習(xí)</title>
</head>
<body>
<!--1. 標(biāo)題標(biāo)簽-->
<h1>我是一級(jí)標(biāo)題</h1>
<h2>我是二級(jí)標(biāo)題</h2>
<h3>我是三級(jí)標(biāo)題</h3>
<h4>我是四級(jí)標(biāo)題</h4>
<h5>我是五極標(biāo)題</h5>
<h6>我是六級(jí)標(biāo)題</h6>
<!--
2. 段落標(biāo)簽p
a. 一個(gè)p標(biāo)簽對(duì)應(yīng)一個(gè)段落
b. p標(biāo)簽的內(nèi)容結(jié)束后和其他的內(nèi)容之間默認(rèn)有一個(gè)空行。
-->
<p>這是第一個(gè)段落\nhahh</p>
<p>這是第二個(gè)段落\nhahh</p>
<p>
簡(jiǎn)書筆記是定位于寫作者的一款寫作軟件，界面非常簡(jiǎn)潔，其最大的特色是支持 Markdown 功能，希望為作者制造出一種沉浸式的寫作氛圍，進(jìn)而可以專注于寫作。
簡(jiǎn)書還支持寫作模式，在簡(jiǎn)書·筆記中打開寫作模式即可讓撰寫窗全屏化，再配合 Chrome 等瀏覽器的全屏瀏覽功能。簡(jiǎn)書·筆記能夠達(dá)到與 Q10、MTW 之類的專心致志寫作軟件同樣的效果。
</p>
<!--
3. 文本符號(hào)
----空格,以分號(hào)結(jié)束。
½---表示分?jǐn)?shù)，1/2,二分之一
-->
½
<!--
4. 換行標(biāo)簽<br>
-->
<!--
5. 超鏈接標(biāo)簽<a>
-->
<a >百度一下</a>
<!--
6. 加粗標(biāo)簽
<b>加粗內(nèi)容</b>
<strong>加粗內(nèi)容（有強(qiáng)調(diào)作用）</strong>
-->
<p>
簡(jiǎn)書筆記是定位于寫作者的一款寫作軟件，界面非常簡(jiǎn)潔，其最大的特色是支持 Markdown 功能，希望為作者制造出一種沉浸式的寫作氛圍，進(jìn)而可以專注于寫作。
簡(jiǎn)書還支持寫作模式，在簡(jiǎn)書·筆記中打開寫作模式即可讓撰寫窗全屏化，再配合 Chrome 等瀏覽器的全屏瀏覽功能。簡(jiǎn)書·筆記能夠達(dá)到與 Q10、MTW 之類的專心致志寫作軟件同樣的效果。
</p>
<p>
簡(jiǎn)書筆記是定位于寫作者的一款寫作軟件，界面非常簡(jiǎn)潔，其最大的特色是支持 Markdown 功能，希望為作者制造出一種沉浸式的寫作氛圍，進(jìn)而可以專注于寫作。
簡(jiǎn)書還支持寫作模式，在<strong>簡(jiǎn)書·筆記中</strong>打開<b>寫作模式即可讓撰寫窗全屏化</b>，再配合 Chrome 等瀏覽器的全屏瀏覽功能。簡(jiǎn)書·筆記能夠達(dá)到與 Q10、MTW 之類的專心致志寫作軟件同樣的效果。
</p>
<!--
7. 文字傾斜（i/em）
<i>傾斜內(nèi)容</i>
<em>傾斜內(nèi)容</em>
-->
<p>
簡(jiǎn)書筆記是定位于寫作者的一款寫作軟件，
界面非常簡(jiǎn)潔，其最大的特色是支持 Markdown 功能，
希望為<i>作者制造出一種沉浸式的寫作氛圍</i>，進(jìn)而可以專注于寫作。
簡(jiǎn)書還支持寫作模式，在簡(jiǎn)書·筆記中打開寫作模式即可讓撰寫窗全屏化，
再配合 Chrome 等<em><b>瀏覽器的全屏瀏覽</b></em>功能。簡(jiǎn)書·筆記能夠達(dá)到與 Q10、MTW 之類的專心致志寫作軟件同樣的效果。
</p>
<!--
8. 水平線
<hr />>
-->
<hr />
</body>
</html>
三、列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表
ol
-->
<ol>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ol>
<!--無序列表
ul
-->
<ul>
<li>成都</li>
<li>重慶</li>
<li>北京</li>
</ul>
<!--自定義列表dl
dt
dd
-->
<dl>
<dt>城市</dt>
<dd>成都</dd>
<dd>合肥</dd>
</dl>
<a href="04-圖片和超鏈接.html" >返回</a>
</body>
</html>
四、圖片與超鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1. 圖片標(biāo)簽
a. src屬性：圖片的地址（本地地址，網(wǎng)絡(luò)地址）
本地路徑：絕對(duì)路徑和相對(duì)路徑（相對(duì)于工程目錄）
注意：本地圖片需要放到工程目錄下的img文件中
b. title屬性：圖片的標(biāo)題（鼠標(biāo)停留在圖片上，隔一段啊時(shí)間才會(huì)顯示出來。
c. alt屬性：圖片加載失敗后顯示的提示信息。
網(wǎng)絡(luò)地址：超鏈接
-->
<h2>圖片1</h2>
<img src="img/001.jpg" title="保時(shí)捷"/><br />
<img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" alt="出錯(cuò)了" /><br />
<!--2. 超鏈接（a）
網(wǎng)頁(yè)上點(diǎn)擊后可以跳轉(zhuǎn)的標(biāo)簽
href屬性：跳轉(zhuǎn)的地址（本地地址，網(wǎng)絡(luò)地址）
本地地址：當(dāng)前工程的其他的.htnl文件路徑
網(wǎng)絡(luò)地址：跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)頁(yè)
空串或者#：刷新頁(yè)面會(huì)回到頂部
選擇器：讓當(dāng)前網(wǎng)頁(yè)滾動(dòng)到網(wǎng)頁(yè)的任意位置。
target屬性：
_self（默認(rèn)的）:在當(dāng)前頁(yè)面中打開href的地址
_blank:在新的頁(yè)面打開href的地址
_top:
_parent:跳轉(zhuǎn)頁(yè)面時(shí)，從其他頁(yè)面返回本頁(yè)面的值
a. 點(diǎn)擊文字跳轉(zhuǎn)
-->
<h1>圖片2</h1>
<a target="_blank">百度一下</a>
<a href="03-列表.html" target="_parent">列表標(biāo)簽</a>
</body>
</html>
五、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--table -- 標(biāo)簽代表這個(gè)表格
tr ---代表的是一行
td ---代表的是一列
一個(gè)表格中可以有多行，一行有多列
table屬性：
1. border：設(shè)置整個(gè)表格的邊框的寬度
2. width：設(shè)置整個(gè)表格的寬度
3. height：設(shè)置整個(gè)表格的高度
4. align:center --讓整個(gè)表格在其父標(biāo)簽中居中
5. bgcolor:背景顏色
6. cellspacing：?jiǎn)卧衽c單元格之間的間距，0表示沒有間距
7. cellpadding：?jiǎn)卧窈蛢?nèi)容之間的空隙，左上右下 0,0,0,0
8. bordercolor:邊框的顏色
9. 合并單元格：
注意：所有的值都要用引號(hào)括起來
tr屬性：
1. height：設(shè)置單獨(dú)的某一行的高度
2. align：center -- 讓當(dāng)前行里的所有內(nèi)容居中
3. bgcolor:背景顏色
td屬性：
1. width：設(shè)置單獨(dú)某一列的寬度
2. align：center-- 讓某一個(gè)單元格中的內(nèi)容居中
3. bgcolor:背景顏色
-->
<table border="1" width="500" height="40" cellspacing="0" cellpadding="20" align="center" >
<tr align="center">
<td>姓名</td>
<td>成績(jī)</td>
<td>是否留級(jí)</td>
<td>是否留級(jí)</td>
<td>是否留級(jí)</td>
<td>是否留級(jí)</td>
</tr>
<tr align="center">
<td>張飛</td>
<td>89</td>
<td>否</td>
<td>否</td>
<td>否</td>
<td><center>否</center></td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="30,0,30,30">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
</html>
六、復(fù)雜的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復(fù)雜的表格</title>
</head>
<body>
<table width="400" height="100" border="1" cellspacing="0" cellpadding="">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td><!--//rowspan:行合并-->
<td></td>
</tr>
<tr>
<td></td> <!--//colspan:列合并-->
</tr>
</table>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
