一蜡秽、初識(shí)HTML
<!--
web基礎(chǔ)：
1.web標(biāo)準(zhǔn)(萬(wàn)維網(wǎng)-w3c)
結(jié)構(gòu)標(biāo)準(zhǔn)：HTML---決定網(wǎng)頁(yè)上有什么東西(能夠顯示什么內(nèi)容)
表現(xiàn)標(biāo)準(zhǔn)：CSS---決定內(nèi)容的布局和顯示方式
行為標(biāo)準(zhǔn)：JavaScript(js)---決定網(wǎng)頁(yè)上動(dòng)態(tài)的效果
2.認(rèn)識(shí)HTML
HTML是超文本標(biāo)記語(yǔ)言(可以用來(lái)標(biāo)記文本蚤氏、圖片代赁、視頻扰她、音頻、flash芭碍、按鈕徒役、輸入框等)
HTML不是編程語(yǔ)言，不會(huì)編譯執(zhí)行窖壕、語(yǔ)法錯(cuò)誤忧勿，也不會(huì)導(dǎo)致程序不能往后執(zhí)行
3.HTML版本
廣義H5：指HTML5+CSS3+Js
狹義的H5：HTML5
4.HTML編程
a.HTML標(biāo)記語(yǔ)言對(duì)應(yīng)的文件的后綴，一般都是html
b.HTML的結(jié)構(gòu)：整個(gè)HTML是通過(guò)不同的標(biāo)記來(lái)組成
5.標(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)簽名 屬性=屬性值 屬性=屬性值 >
說(shuō)明：
標(biāo)簽名：HTML標(biāo)準(zhǔn)中固定的
屬性：屬性和標(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)容(可以是字符串层释，<br/>
也可以是其他任何標(biāo)簽)
<a></a>---a標(biāo)簽
<p></p>---p標(biāo)簽
<input>---input標(biāo)簽
補(bǔ)充：HTML語(yǔ)法中，不區(qū)分大小寫(HTML\html\hTMl是一樣的)
6.網(wǎng)頁(yè)的結(jié)構(gòu)
-->
<!--DOCTYPE:來(lái)對(duì)當(dāng)前的html版本進(jìn)行說(shuō)明
HTML ---默認(rèn)版本 (HTML5)
-->
<!DOCTYPE HTML>
<!--html標(biāo)簽代表整個(gè)網(wǎng)頁(yè)-->
<html>
<!--head標(biāo)簽中的內(nèi)容一般都是看不見(jiàn)的快集，并且里面的子標(biāo)簽是固定的
title標(biāo)簽---設(shè)置標(biāo)題
meta標(biāo)簽
link標(biāo)簽
style標(biāo)簽
script標(biāo)簽
base標(biāo)簽
-->
<head>
<!--設(shè)置網(wǎng)頁(yè)標(biāo)題-->
<title>HTML基礎(chǔ)</title>
<!--charset：設(shè)置編碼方式-->
<meta charset="utf-8"/>
</head>
<!--body標(biāo)簽中的內(nèi)容贡羔，負(fù)責(zé)整個(gè)網(wǎng)頁(yè)的顯示部分-->
<body>
</body>
</html>
二、文本標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--標(biāo)題標(biāo)簽(h1--h6)-->
<h1>你s1kr嚶嚶怪</h1>
<h2>你s1kr嚶嚶怪</h2>
<h3>你s1kr嚶嚶怪</h3>
<h4>你s1kr嚶嚶怪</h4>
<h5>你s1kr嚶嚶怪</h5>
<h6>你s1kr嚶嚶怪</h6>
<!--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>詩(shī)詞个初，是指以古體詩(shī)乖寒、近體詩(shī)和格律詞為代表的中國(guó)古代傳統(tǒng)詩(shī)歌。</p>
<p>亦是漢字文化圈的特色之一院溺。通常認(rèn)為楣嘁，詩(shī)較為適合“言志”，<br />而詞則更為適合“抒情”珍逸。</p>
<!--3.文本符號(hào)
---空格
-->
<!--4.換行標(biāo)簽(br)-->
<!--5.超鏈接(a)-->
<a >百度一下</a>
<!--6.文字加粗(b/strong)
<b>加粗內(nèi)容</b>
<strong>加粗內(nèi)容</strong>---有強(qiáng)調(diào)作用
-->
<p>詩(shī)詞逐虚，是指以<b>古體詩(shī)</b>、<strong >近體詩(shī)和格律詞</strong>為代表的中國(guó)古代傳統(tǒng)詩(shī)歌谆膳。</p>
<!--7.文字傾斜(i/em)
<i>傾斜內(nèi)容</i>
<em>傾斜內(nèi)容</em>---有強(qiáng)調(diào)作用
-->
<p>詩(shī)詞叭爱，是指以<i>古體詩(shī)</i>、<em>近體詩(shī)和格律詞</em>為代表的中國(guó)古代傳統(tǒng)詩(shī)歌漱病。</p>
<!--8.水平線-->
<hr />
</body>
</html>
三买雾、列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--有序列表
ol
-->
<ol>
<li>語(yǔ)文</li>
<li>數(shù)學(xué)</li>
<li>英語(yǔ)</li>
</ol>
<!--無(wú)序列表-->
<ul>
<li>成都</li>
<li>重慶</li>
<li>北京</li>
</ul>
<!--自定義列表-->
<dl>
<dt>城市</dt>
<dd>成都</dd>
<dd>合肥</dd>
<dt>省份</dt>
<dd>四川省</dd>
<dd>安徽省</dd>
</dl>
</body>
</html>
四把曼、圖片和超鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.圖片標(biāo)簽(img)
a.src屬性：圖片的地址（本地圖片地址、網(wǎng)絡(luò)地址）
本地地址：相對(duì)路徑（相對(duì)于工程目錄）
· 注意：本地圖片需要放到工程目錄下的img文件夾下
b.title屬性：圖片的標(biāo)題(鼠標(biāo)停留在圖片上漓穿，隔一段時(shí)間才顯示出來(lái))
c.alt屬性：圖片加載失敗后會(huì)顯示的提示信息
-->
<img alt="圖片加載失敗" title="皮皮狗" src="img/timg.gif"/>
<!--2.超鏈接(a)
網(wǎng)頁(yè)上點(diǎn)擊后可以跳轉(zhuǎn)的標(biāo)簽都是超鏈接
href屬性：跳轉(zhuǎn)地址(網(wǎng)絡(luò)地址嗤军、本地地址)
網(wǎng)絡(luò)地址：跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)頁(yè)
本地地址：當(dāng)前工程的其他的html路徑
空串/#：刷新頁(yè)面回到網(wǎng)頁(yè)的頂部
選擇器：讓網(wǎng)頁(yè)滾動(dòng)到網(wǎng)頁(yè)上的任意的位置
target屬性：
_self:在當(dāng)前頁(yè)面中打開href的地址
_blank：在新的頁(yè)面中打開href的地址
a.點(diǎn)擊文字跳轉(zhuǎn)
-->
<a href="" target="_top">百度一下</a>
<a href="03-列表.html">列表</a>
<a href="03-列表.html" target="_parent">返回</a>
<!--b.點(diǎn)擊圖片跳轉(zhuǎn)-->
<a ><img src="img/timg1.jpg"/></a>
</body>
</html>
五、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
table標(biāo)簽代表整個(gè)表格
tr ---代表的是行
td ---代表的是列
一個(gè)表格中可以有多行晃危，一行有多列
table屬性：
border：設(shè)置整個(gè)表格中邊框的寬度
width：設(shè)置整個(gè)表格的寬度
height：設(shè)置整個(gè)表格的高度(每一行高度是一樣的)
align：center---讓整個(gè)表在其父標(biāo)簽中居中
bgcolor：背景顏色
cellpadding：設(shè)置內(nèi)容和單元格之間的間距(了解)
cellspacing：設(shè)置單元格和單元格之間的間隙
tr屬性：
height：設(shè)置單獨(dú)某一行的高度
align:center--讓當(dāng)前行里面的所有的單元格中的內(nèi)容居中
bgcolor：背景顏色
td屬性：
width：設(shè)置某一列的寬度
align：center---讓某一個(gè)單元格中的內(nèi)容居中
bgcolor：背景顏色
注意：所有的屬性的值都要用雙引號(hào)括起來(lái)
-->
<table border="1" width="300" align="center" bgcolor="coral" cellspacing="0"
>
<!--第一行-->
<tr height="20" align="center">
<!--第一行的第一列-->
<td width="80">姓名</td>
<!--第一行的第二列-->
<td width="120">成績(jī)</td>
<!--第一行的第三列-->
<td width="120">是否留級(jí)</td>
</tr>
<!--第二行-->
<tr height="50">
<td align="center">張三</td>
<td>80</td>
<td>否</td>
</tr>
<tr height="50">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
六叙赚、復(fù)雜的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復(fù)雜的表格</title>
</head>
<body>
<table border="1" width="300" height="100">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
