HTML
web基礎(chǔ)
<!--
web基礎(chǔ)：
1.web標(biāo)準(zhǔn)（萬維網(wǎng)-w3c）：
結(jié)構(gòu)標(biāo)準(zhǔn)：HTML---決定網(wǎng)頁上有什么東西（能顯示什么內(nèi)容）
表現(xiàn)標(biāo)準(zhǔn)：css---決定網(wǎng)頁上內(nèi)容的布局和顯示方式
行為標(biāo)準(zhǔn)：JavaScript（js）---決定網(wǎng)頁上的動(dòng)態(tài)效果
2.認(rèn)識(shí)HTML
HTML是超文本標(biāo)記語言（可以用來標(biāo)記文本胸懈、圖片首有、視頻您旁、flash驼鞭、按鈕译隘、輸入框等內(nèi)容）
HTML不是編程語言，不會(huì)編譯執(zhí)行穴张，語法錯(cuò)誤也不會(huì)報(bào)錯(cuò)導(dǎo)致程序不能往后運(yùn)行
3.HTML版本
廣義的H5：指HTML5+CSS3+js
狹義的H5：指HTML5
4.HTML編程
a细燎。HTML標(biāo)記語言對(duì)應(yīng)的文件的后綴，一般都是html
b.HTML的結(jié)果：整個(gè)html是通過不同的標(biāo)記來組成
5.標(biāo)簽/標(biāo)記
a皂甘。雙標(biāo)簽
<標(biāo)簽名 屬性=屬性值 屬性=屬性值>標(biāo)簽內(nèi)容</標(biāo)簽名>
b玻驻。單標(biāo)簽（自閉合標(biāo)簽）
<標(biāo)簽名 屬性=屬性值 屬性=屬性值 />
<標(biāo)簽名 屬性=屬性值 屬性=屬性值>
說明：
標(biāo)簽名：HTML標(biāo)準(zhǔn)中固定的（標(biāo)簽名和尖括號(hào)之間不能有空白）
屬性：屬性和標(biāo)簽名之間用空格隔開，以屬性=屬性值的形式存在偿枕，多個(gè)屬性之間也用空格隔開
（屬性可以是HTML標(biāo)準(zhǔn)中的屬性璧瞬，也可以是自定義的屬性）
標(biāo)簽內(nèi)容：是指開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容。標(biāo)簽的內(nèi)容可以是任何內(nèi)容（可以是字符串渐夸，也可以是其他任何標(biāo)簽）
<a></a>---a標(biāo)簽
<b></b>---b標(biāo)簽
<input>---input標(biāo)簽
HTML語法中不區(qū)分大小寫
6.網(wǎng)頁的結(jié)構(gòu)：
<!Doctype HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
-->
<!Doctype HTML>
<!--Doctype：來對(duì)當(dāng)前的html版本進(jìn)行說明
HTML代表的默認(rèn)版本（HTML5）
-->
<!--html標(biāo)簽代表整個(gè)網(wǎng)頁-->
<html>
<!--head標(biāo)簽中的內(nèi)容一般都是看不見的嗤锉，并且里面的子標(biāo)簽是固定的
title標(biāo)簽
meta標(biāo)簽
link標(biāo)簽
style標(biāo)簽
script標(biāo)簽
base標(biāo)簽
-->
<head>
<!--設(shè)置網(wǎng)頁標(biāo)題（可見）-->
<title>HTML基礎(chǔ)</title>
<!--charest:設(shè)置編碼方式-->
<meta charset="utf-8"/>
</head>
<!--body標(biāo)簽中的內(nèi)容，負(fù)責(zé)整個(gè)網(wǎng)頁的顯示部分-->
<body>
</body>
</html>
添加文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--標(biāo)題標(biāo)簽（h1-h6）-->
<h1>我是標(biāo)題1墓塌，<br />哼哼瘟忱，世界和平</h1>
<h2>我是標(biāo)題2</h2>
<h3> 呵呵</h3>
<!--2.段落標(biāo)簽（p）
a。一個(gè)p標(biāo)簽對(duì)應(yīng)一個(gè)段落
b苫幢。p標(biāo)簽的內(nèi)容結(jié)束后會(huì)和其他內(nèi)容之間默認(rèn)有一個(gè)空行
-->
<p> 我是大魔王访诱，不服就來戰(zhàn)<br />大愛的打打啊打啊啊啊啊打啊ad啊啊打打啊</p>
<p>可惜了</p>
<!--3.文本符號(hào)
 ；---空格
-->
<!--4.換行標(biāo)簽（br）-->
<!--5.超鏈接（a）-->
<a >百度一下</a>
<!--6.文字加粗（strong/b）
<b>加粗文字</b>
<strong>加粗文字</strong>---有強(qiáng)調(diào)作用
-->
<p>一起去看流星雨?<strong>不存在的</strong></p>
<!--7.文字傾斜（i/em）
em標(biāo)簽有強(qiáng)調(diào)作用
-->
<p><em><strong>快樂風(fēng)男</strong></em></p>
<!--8.水平線（hr）-->
<hr />
<a >淘寶網(wǎng)</a>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.有序列表
ol
-->
<ol>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ol>
<!--2.無序列表（ul）-->
<ul>
<li>成都</li>
<li>重慶</li>
<li>上海</li>
</ul>
<!--3韩肝。自定義列表（dl）-->
<dl>
<dt>城市</dt>
<dd>成都</dd>
</dl>
</body>
</html>
圖片和超鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.圖片標(biāo)簽（img）
src屬性：圖片的地址（本地地址触菜、網(wǎng)絡(luò)地址）
本地地址：絕對(duì)路徑和相對(duì)路徑（相對(duì)于工程目錄）
title屬性：圖片的標(biāo)題（鼠標(biāo)停留在圖片上，隔一段時(shí)間才會(huì)顯示）
alt屬性：圖片加載失敗后顯示的提示信息（只有在失敗的時(shí)候顯示）
-->
<img src="img/09JRZ(YZ8N}U}ID1_PE@{S0.png"/>
<hr />
<img title="女神" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=50331453,2700563884&fm=27&gp=0.jpg"/>
<h1>圖片1</h1>
<img id="image1" alt="圖片加載失敗" title="洪門守護(hù)者" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2825970519,1486085087&fm=27&gp=0.jpg"/>
<h1>圖片2</h1>
<img alt="圖片加載失敗" title="洪門守護(hù)者" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2825970519,1486085087&fm=27&gp=0.jpg"/>
<h1>圖片3</h1>
<img alt="圖片加載失敗" title="洪門守護(hù)者" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2825970519,1486085087&fm=27&gp=0.jpg"/>
<!--2.超鏈接（a）
網(wǎng)頁上點(diǎn)擊后可以跳轉(zhuǎn)的標(biāo)簽都是超鏈接
href屬性：跳轉(zhuǎn)的地址（可以是網(wǎng)頁地址也可以是本地地址）
空串和#：刷新一下回到網(wǎng)頁頂部
本地地址：當(dāng)前工程的其他html文件路徑
選擇器：讓網(wǎng)頁滾動(dòng)到網(wǎng)頁上的任意的位置
target屬性：
_self:在當(dāng)前頁面打開href地址
_blank：在新的頁面中打開href的地址
a哀峻。點(diǎn)擊文字跳轉(zhuǎn)
-->
<a target="_blank">百度一下</a>
<a href="列表.html" target="_blank">列表</a>
<a href="#image1">圖片1</a>
<a >
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=50331453,2700563884&fm=27&gp=0.jpg"/>
</a>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
table標(biāo)簽代表整個(gè)表格
tr--代表一行
td--代表一列（一個(gè)td對(duì)應(yīng)一個(gè)單元格）
一個(gè)表格中可以有多行涡相，一行有一列
屬性：
border：設(shè)置整個(gè)表格中邊框的寬度
width：設(shè)置整個(gè)表格的寬度
height：設(shè)置整個(gè)表格的高度（每一行高度是一樣的）
width和height也可以用在設(shè)置每一列每一行的寬度高度
align：center--讓整個(gè)表格在網(wǎng)頁中居中（也可運(yùn)用到指定的某一行某一列，讓其中的數(shù)據(jù)在表格中居中）
bgcolor：背景顏色設(shè)置
cellspacing：設(shè)置有無邊框
cellpadding：設(shè)置表格中的數(shù)據(jù)到邊框的距離
bordercolor：邊框顏色
注意：所有的值都要用雙引號(hào)括起來
-->
<table border="1" width="300" height="100"align="center" bgcolor="azure" cellspacing="0">
<!--2*3表格-->
<tr align="center">
<!--第一行第一列-->
<td>姓名</td>
<!--第一行第二列-->
<td>年齡</td>
<!--第一行第三列-->
<td>性別</td>
</tr>
<tr align="center">
<td>張飛</td>
<td>28</td>
<td>男</td>
</tr>
</table>
<hr />
<table border="1" cellpadding="30" cellspacing="0" bgcolor="bisque" bordercolor="azure">
<!--用width和height來設(shè)置每一列每一行的高度和寬度-->
<tr height="50">
<td width="200">1</td>
<td width="300">2</td>
<td width="300">3</td>
</tr>
<tr height="120">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
復(fù)雜表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格2.0</title>
</head>
<body>
<!--
復(fù)雜表格中的合并單元格
rowspan：合并行
colspan：合并列
-->
<table border="1" cellspacing="0" cellpadding="30">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
<hr />
<table border="1" cellspacing="0" cellpadding="30">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
