1.index
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òu)：整個(gè)html是通過不同的標(biāo)記來組成
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)簽名 屬性=屬性值 屬性=屬性值>
說明：
標(biāo)簽名：HTML標(biāo)準(zhǔn)中固定的（注意:<和標(biā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)簽
<p></p> --- p標(biāo)簽
<input> --- input標(biāo)簽
補(bǔ)充: HTML語法中渔扎，不區(qū)分大小寫(HTML\html\HtMl是一樣的)
6.網(wǎng)頁的結(jié)構(gòu)
<!Doctype HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
-->
<!--
Doctype:來對(duì)當(dāng)前的html版本進(jìn)行說明
HTML --- 默認(rèn)版本（HTML5）
-->
<!Doctype HTML>
<!--<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">-->
<!--html標(biāo)簽代表整個(gè)網(wǎng)頁-->
<html>
<!--
head標(biāo)簽中的內(nèi)容一般都是看不見，并且里面的子標(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)頁標(biāo)題（可見）-->
<title>HTML基礎(chǔ)</title>
<!--charset：設(shè)置編碼方式-->
<meta charset="utf-8"/>
</head>
<!--body標(biāo)簽中的內(nèi)容信轿，負(fù)責(zé)整個(gè)網(wǎng)頁的顯示部分-->
<body>
</body>
</html>
2.文本標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.標(biāo)題標(biāo)簽(h1-h6)-->
<h1>我是標(biāo)題1</h1>
<h2>我是標(biāo)題2</h2>
<h3>我是標(biāo)題3</h3>
<h4>我是標(biāo)題4</h4>
<h5>我是標(biāo)題4</h5>
<h6>我是標(biāo)題4</h6>
<!--<h7>我是錯(cuò)誤的標(biāo)題格式</h7>-->
<!--
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>
世界經(jīng)濟(jì)長(zhǎng)遠(yuǎn)發(fā)展的動(dòng)力源自創(chuàng)新晃痴〔蟹裕總結(jié)歷史經(jīng)驗(yàn)，
我們會(huì)發(fā)現(xiàn)倘核，體制機(jī)制變革釋放出的活力和創(chuàng)造力泣侮，科技進(jìn)步造就的新產(chǎn)業(yè)和新產(chǎn)品，
是歷次重大危機(jī)后世界經(jīng)濟(jì)走出困境紧唱、實(shí)現(xiàn)復(fù)蘇的根本活尊。
</p>
<p >
面向未來，增強(qiáng)自主創(chuàng)新能力漏益，最重要 的就是要堅(jiān)定不移走中國(guó)特色自主創(chuàng)新道路蛹锰，
堅(jiān)持自主創(chuàng)新、重點(diǎn)跨越绰疤、支撐發(fā)展铜犬、引領(lǐng)未來的方針，
加快創(chuàng)新型國(guó)家建設(shè)步伐轻庆。½</p>
<!--3.文本符號(hào)
--- 空格
其他的查手冊(cè)
-->
<p>
世界經(jīng)濟(jì)長(zhǎng)遠(yuǎn)發(fā)展的動(dòng)力源自創(chuàng)新癣猾。總結(jié)歷史經(jīng)驗(yàn)榨了，
我們會(huì)發(fā)現(xiàn)煎谍，體制機(jī)制變革釋放出的活力和創(chuàng)造力，科技進(jìn)步造就的新產(chǎn)業(yè)和新產(chǎn)品龙屉，
是歷次重大危機(jī)后世界經(jīng)濟(jì)走出困境呐粘、實(shí)現(xiàn)復(fù)蘇的根本。
</p>
<!--4.換行標(biāo)簽(br)-->
<p>
世界經(jīng)濟(jì)長(zhǎng)遠(yuǎn)發(fā)展的動(dòng)力源自創(chuàng)新转捕∽麽總結(jié)歷史經(jīng)驗(yàn)，<br />
我們會(huì)發(fā)現(xiàn)五芝，體制機(jī)制變革釋放出的活力和創(chuàng)造力痘儡，科技進(jìn)步造就的新產(chǎn)業(yè)和新產(chǎn)品，<br />
是歷次重大危機(jī)后世界經(jīng)濟(jì)走出困境枢步、實(shí)現(xiàn)復(fù)蘇的根本沉删。
</p>
<!--5.超鏈接(a)-->
<a >百度一下</a>
<!--6.文字加粗(b/strong)
<b>加粗文字</b>
<strong>加粗文字</strong> -- 有強(qiáng)調(diào)的作用
-->
<p>
世界經(jīng)濟(jì)長(zhǎng)遠(yuǎn)發(fā)展的動(dòng)力源自創(chuàng)新。<hr />總結(jié)歷史經(jīng)驗(yàn)醉途，<br />
我們會(huì)發(fā)現(xiàn)矾瑰，<b>體制機(jī)制</b>變革釋放出的活力和<strong>創(chuàng)造力</strong>，科技進(jìn)步造就的新產(chǎn)業(yè)和新產(chǎn)品隘擎，<br />
是歷次重大危機(jī)后世界經(jīng)濟(jì)走出困境殴穴、實(shí)現(xiàn)復(fù)蘇的根本。
</p>
<hr />
<!--7.文字傾斜(i/em)
<i>傾斜文字</i>
<em>傾斜文字</em> -- 有強(qiáng)調(diào)的作用
-->
<p>
世界經(jīng)濟(jì)<i>長(zhǎng)遠(yuǎn)發(fā)展</i>的動(dòng)力源自創(chuàng)新〔苫希總結(jié)<em>歷史</em>經(jīng)驗(yàn)劲够，<br />
我們會(huì)發(fā)現(xiàn)，<b><i>體制機(jī)制</i></b>變革釋放出的活力和<strong>創(chuàng)造力</strong>休傍，科技進(jìn)步造就的新產(chǎn)業(yè)和新產(chǎn)品征绎，<br />
是歷次重大危機(jī)后世界經(jīng)濟(jì)走出困境、實(shí)現(xiàn)復(fù)蘇的根本尊残。
</p>
<!--8.水平線-->
<hr />
</body>
</html>
3.列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--有序列表-->
<ol>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ol>
<!--無序列表-->
<ul>
<li>成都</li>
<li>重慶</li>
<li>北京</li>
</ul>
<!--自定義列表-->
<dl>
<dt>城市:</dt>
<dd>成都</dd>
<dd>重慶</dd>
<dd>合肥</dd>
<dt>省份:</dt>
<dd>四川</dd>
<dd>安徽</dd>
<dd>湖南</dd>
</dl>
</body>
</html>
4.圖片和超鏈接
<!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í)間才顯示出來)
c.alt屬性：圖片加載失敗后顯示的提示信息
-->
<h1>圖片1</h1>
<img src="img/luffy.png"/>
<img id="image1" alt="圖片加載失敗" title="山治" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534152944837&di=6f15150dbd694d66d199f66c6b0c6612&imgtype=0&src=http%3A%2F%2Fp6.qhimg.com%2Ft01764dfada8dc1af26.jpg"/>
<h1 id="imge2">圖片2</h1>
<img src="img/luffy.png"/>
<h1>圖片3</h1>
<img src="img/luffy.png"/>
<!--2.超鏈接（a）
網(wǎng)頁上點(diǎn)擊后可以跳轉(zhuǎn)的標(biāo)簽都是超鏈接
href屬性:跳轉(zhuǎn)地址(本地地址寝衫，網(wǎng)絡(luò)地址)
網(wǎng)絡(luò)地址：跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)頁
本地地址: 當(dāng)前工程的其他的html文件路徑
空串/#: 刷新頁面回到網(wǎng)頁的頂部
選擇器：讓網(wǎng)頁滾動(dòng)到網(wǎng)頁上的任意的位置
target屬性：
_self(默認(rèn)的): 在當(dāng)前頁面中打開href的地址
_blank: 在新的頁面中打開href的地址
a. 點(diǎn)擊文字跳轉(zhuǎn)
-->
<a href="#">百度一下</a>
<a href="03-列表.html" target="_blank">列表</a>
<a href="#imge2">圖片2</a>
<a href="#image1">圖片11111</a>
<!--b.點(diǎn)擊圖片跳轉(zhuǎn)-->
<a >
<img src="img/luffy2.png"/>
</a>
</body>
</html>
5.表格
<!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è)表格中可以有多行，一行有多列
table屬性:
1.border:設(shè)置整個(gè)表格中邊框的寬度
2.width:設(shè)置整個(gè)表格的寬度
3.heigt:設(shè)置整個(gè)表格的高度（每一行的高度是一樣的）
4.align：center -- 讓整個(gè)表在其父標(biāo)簽中居中
5.bgcolor: 背景顏色
6.cellpadding="100": 設(shè)置內(nèi)容和單元格之間的間距(了解)
7.cellspacing: 設(shè)置 單元格和單元格之間的間隙
tr屬性:
1.height: 設(shè)置單獨(dú)的某一行的高度
2.align:center -- 讓當(dāng)前行里面的所有的單元格中的內(nèi)容居中
3.bgcolor: 背景顏色
td屬性:
1.width： 設(shè)置某一列的寬度
2.align:center -- 讓某一個(gè)單元格中的內(nèi)容居中
3.bgcolor: 背景顏色
注意:所有的屬性的值都要用雙引號(hào)括起來
-->
<!--創(chuàng)建一個(gè)2*3的表格-->
<table border="1" bgcolor='pink' cellspacing="0" bordercolor='purple'>
<!--第一行-->
<tr height="50" align="center">
<!--第一行的第一列-->
<td width="80">姓名</td>
<!--第一行的第二列-->
<td width="120">成績(jī)</td>
<!--第一行的第三列-->
<td width="120">是否留級(jí)</td>
</tr>
<!--第二行-->
<tr height="100">
<td align="center">古雙全</td>
<td bgcolor="brown">90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr height="100" bgcolor='bisque'>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<table border="" cellspacing="" cellpadding="100">
<tr>
<td>Data</td>
<td>100</td>
</tr>
</table>
</body>
</html>
6.復(fù)雜的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復(fù)雜表格</title>
</head>
<body>
<!--
rowspan:合并行
-->
<!--表格1-->
<table border="1" width="300" height="200">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table border="1" width="400" height="300">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
