HTML概述
HTML:Hyper Text Markup language 超文本標(biāo)記語(yǔ)言
超文本：比普通文本功能更加強(qiáng)大，可以添加各種樣式
標(biāo)記語(yǔ)言：通過一組標(biāo)簽腺律，來對(duì)內(nèi)容進(jìn)行描述.<關(guān)鍵字>
<h1>清明</h1>
<b> <i>--杜牧</i></b><br/>
<p>清明時(shí)節(jié)雨紛紛，</p>
<p>路上行人欲斷魂。</p>
<p>借問酒家何處有举农，</p>
<p>牧童遙指杏花村。</p>
HTML語(yǔ)法規(guī)范
<!DOCTYPE html>
<!--
1.上面一個(gè)是文檔聲明
2.根標(biāo)簽是 html
3.html文件主要包含兩部分.頭部分和體部分
頭部分： 主要是用來放置一些頁(yè)面信息
體部分：主要來放置我們的HTML頁(yè)面內(nèi)容
4.通過標(biāo)簽來對(duì)內(nèi)容進(jìn)行描述敞嗡，標(biāo)簽通常都是由開始標(biāo)簽和結(jié)束標(biāo)簽組成
5.標(biāo)簽不區(qū)分大小寫
-->
<html>
<head>
<!--meta 網(wǎng)站配置信息-->
<!--指定瀏覽器打開頁(yè)面的編碼方式-->
<meta charset="utf-8" />
<!--指定網(wǎng)站標(biāo)題-->
<title>入門案例</title>
</head>
<body>
Hellow world
</body>
</html>
標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo1</title>
</head>
<body>
<!--
h1標(biāo)題：
h后面數(shù)字的取值范圍：1~6
-->
<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>
</body>
</html>
表格以及輸入框?qū)傩?/h4>
<form action="#" method=post>
<table width="60%" >
<tr>
<td align="right"><p>注冊(cè)郵箱：</p></td>
<td >
<input type="text" name="email" />
</td>
</tr>
<tr>
<td align="right"><p>創(chuàng)建密碼：</p></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right"><p> 真實(shí)姓名：</p></td>
<td><input type="username" name="username" /></td>
</tr>
<tr>
<td align="right"><p>性別：</p></td>
<td><input type="radio" name="sex" value="男" checked="checked">男</input>
<input type="radio" name="sex" value="女" >女</input>
</td>
</tr>
<tr>
<td align="right">愛好：</td>
<td>
<input type="checkbox" name="hobby" value="籃球" checked="checked" />籃球
<input type="checkbox" name="hobby" value="足球 " />足球
<input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
<input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
</td>
</tr>
<tr>
<td align="right"><p>生日：</p></td>
<td>
<select name="year">
<option value="1990">1990</option>
<option value="1991" selected="selected">1991</option>
<option value="1992">1992</option>
</select> 年
<select name="month">
<option value="12">12</option>
<option value="11">11</option>
<option value="10"selected="selected">10</option>
</select>月
<select name="day">
<option value="31">31</option>
<option value="30" selected="selected">30</option>
<option value="29">29</option>
</select>日
</td>
</tr>
<tr>
<td align="right"><p>我現(xiàn)在：</p></td>
<td>
<select name="doing">
<option value="正在上學(xué)">正在上學(xué)</option>
<option value="已畢業(yè)">已畢業(yè)</option>
</select>
</td>
</tr>
<tr>
<td class="me">問題詳細(xì)描述</td>
<td><textarea cols="45" rows="5" name="detail" ></textarea>*必填 </td>
</tr>
</table>
</form>
文本格式化標(biāo)簽
<b> 定義粗體文本颁糟。
<big> 定義大號(hào)字航背。
<em> 定義著重文字。
<i> 定義斜體字棱貌。
<small> 定義小號(hào)字玖媚。
<strong> 定義加重語(yǔ)氣。
<sub> 定義下標(biāo)字键畴。
<sup> 定義上標(biāo)字最盅。
<ins> 定義插入字突雪。
<del> 定義刪除字起惕。
html框架標(biāo)簽
<form action="#" method=post>
<table width="60%" >
<tr>
<td align="right"><p>注冊(cè)郵箱：</p></td>
<td >
<input type="text" name="email" />
</td>
</tr>
<tr>
<td align="right"><p>創(chuàng)建密碼：</p></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right"><p> 真實(shí)姓名：</p></td>
<td><input type="username" name="username" /></td>
</tr>
<tr>
<td align="right"><p>性別：</p></td>
<td><input type="radio" name="sex" value="男" checked="checked">男</input>
<input type="radio" name="sex" value="女" >女</input>
</td>
</tr>
<tr>
<td align="right">愛好：</td>
<td>
<input type="checkbox" name="hobby" value="籃球" checked="checked" />籃球
<input type="checkbox" name="hobby" value="足球 " />足球
<input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
<input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
</td>
</tr>
<tr>
<td align="right"><p>生日：</p></td>
<td>
<select name="year">
<option value="1990">1990</option>
<option value="1991" selected="selected">1991</option>
<option value="1992">1992</option>
</select> 年
<select name="month">
<option value="12">12</option>
<option value="11">11</option>
<option value="10"selected="selected">10</option>
</select>月
<select name="day">
<option value="31">31</option>
<option value="30" selected="selected">30</option>
<option value="29">29</option>
</select>日
</td>
</tr>
<tr>
<td align="right"><p>我現(xiàn)在：</p></td>
<td>
<select name="doing">
<option value="正在上學(xué)">正在上學(xué)</option>
<option value="已畢業(yè)">已畢業(yè)</option>
</select>
</td>
</tr>
<tr>
<td class="me">問題詳細(xì)描述</td>
<td><textarea cols="45" rows="5" name="detail" ></textarea>*必填 </td>
</tr>
</table>
</form>
<b> 定義粗體文本颁糟。
<big> 定義大號(hào)字航背。
<em> 定義著重文字。
<i> 定義斜體字棱貌。
<small> 定義小號(hào)字玖媚。
<strong> 定義加重語(yǔ)氣。
<sub> 定義下標(biāo)字键畴。
<sup> 定義上標(biāo)字最盅。
<ins> 定義插入字突雪。
<del> 定義刪除字起惕。
1.框架標(biāo)簽不能和body同時(shí)出現(xiàn)
2.frameset: border去除框架標(biāo)簽的框 ，示例：border="0"
border="10px" bordercolor="yellow"
3.frame框大小不變：兩種情況:
第一種：border ="0"
第二種： noresize="noresize" 不改變大小
備注:scrolling是否顯示滾動(dòng)條
yes 顯示
no 不顯示
auto 如果內(nèi)容高度超過屏幕高度直接顯示滾動(dòng)咏删，
4. frame 是框惹想，內(nèi)容使用src來填充，
定位顯示到指定位置： 使用name屬性
例如：
點(diǎn)擊left.html的標(biāo)簽跳轉(zhuǎn)內(nèi)容顯示在right.html
1.給right.html的frame添加name屬性督函，方便定位嘀粱。
2.在left.html中使用target目標(biāo)定位，根據(jù)name名查找
<frameset rows="200,*" border="10px" bordercolor="yellow">
<frame src="top.html" scrolling="yes" noresize="noresize" />
<frameset cols="200,*">
<frame src="left.html" scrolling="yes" noresize="noresize" />
<frame src="right.html" name="content" scrolling="yes" />
</frameset>
</frameset>
其他標(biāo)簽
<!--該網(wǎng)頁(yè)的關(guān)鍵字-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--該網(wǎng)頁(yè)的描述-->
<meta http-equiv="description" content="this is my page">
<!--該網(wǎng)頁(yè)的編碼-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
CSS概述：
Cascading Style Sheets:層疊樣式表
作用：
用來美化我們的HTML頁(yè)面的
HTML 決定網(wǎng)頁(yè)的骨架
CSS 化妝
CSS的簡(jiǎn)單語(yǔ)法：
在一個(gè)style標(biāo)簽中辰狡，去編寫CSS 內(nèi)容锋叨，最好將style標(biāo)簽寫在這個(gè)head標(biāo)簽中
<style>
選擇器{
屬性名稱：屬性的值；
屬性名稱2：屬性的值2宛篇；
}
<\style>
CSS選擇器：幫助我們找到我們要修飾的標(biāo)簽或者元素
元素選擇：
元素的名稱{
屬性名稱：屬性的值娃磺；
屬性名稱：屬性的值；
}
ID選擇器：
以#號(hào)開頭
#ID的名稱{
屬性名稱：屬性的值叫倍；
屬性名稱：屬性的值偷卧；
}
類選擇器：
以 . 開頭
.類的名稱{
屬性名稱：屬性的值；
屬性名稱：屬性的值吆倦；
}
類和ID選擇器的異同點(diǎn)
同：都可以應(yīng)用于任何元素
異：1. ID選擇器在文檔中只能使用一次听诸，類選擇器可以使用多次
- 可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)使用多個(gè)樣式
子選擇器
用于選擇指定標(biāo)簽元素的第一代子元素
例如： .food>li{border:1px solid red;} 這行代碼會(huì)使class名為food下的子元素li加入紅色實(shí)線邊框
后代選擇器
加入空格用來指定標(biāo)簽元素下的后輩元素
.first span{color:red;}
子選擇器與后代選擇器的區(qū)別
子選擇器僅指它的直接后代或者說是第一代后代，而后代選擇器是作用于所有子后代元素 后代選擇器通過空格來進(jìn)行選擇 而子選擇器是通過 > 來選擇
特殊性
為同一個(gè)元素設(shè)置了不同的樣式蚕泽，瀏覽器會(huì)根據(jù)權(quán)值來判斷使用哪種樣式晌梨。使用權(quán)值高的。
權(quán)值規(guī)則：標(biāo)簽的權(quán)值為1须妻；類選擇符權(quán)值為10仔蝌； ID選擇符的權(quán)值最高是100，還有一個(gè)比較特殊的權(quán)值--繼承璧南，有些文獻(xiàn)顯示它只有0.1
層疊
在HTML中對(duì)于同一個(gè)元素有多個(gè)CSS樣式存在掌逛，而且有相同的權(quán)重，會(huì)根據(jù)這些CSS樣式的前后順序來決定司倚，處于最后面的樣式將被應(yīng)用（后面的會(huì)覆蓋前面的樣式）
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）
CSS的引入方式：
外部樣式：通過link標(biāo)簽引入一個(gè)外部的CSS文件
內(nèi)部樣式：直接再style標(biāo)簽內(nèi)編寫CSS代碼
行內(nèi)樣式：直接在標(biāo)簽中添加一個(gè)style屬性豆混，編寫CSS樣式
CSS首頁(yè)優(yōu)化（LOGO部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>
</head>
<body>
<!--
1. 創(chuàng)一個(gè)最外層div
2. 第一部份: LOGO部分: 嵌套三個(gè)div
3. 第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接
4. 第三部分: 輪播圖
5. 第四部分:
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接
-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三個(gè)div-->
<div>
<div class="logo">
<img src="../img/logo2.png"/>
</div>
<div class="logo">
<img src="../img/header.png"/>
</div>
<div class="logo">
<a href="#">登錄</a>
<a href="#">注冊(cè)</a>
<a href="#">購(gòu)物車</a>
</div>
</div>
<!--清除浮動(dòng)-->
<div style="clear: both;"></div>
<!--3. 第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁(yè)</a>
<a href="#" class="amenu">手機(jī)數(shù)碼</a>
<a href="#" class="amenu">電腦辦公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香煙酒水</a>
</div>
<!--4. 第三部分: 輪播圖-->
<div>
<img src="../img/1.jpg" width="100%"/>
</div>
<!--5. 第四部分:-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左側(cè)廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側(cè)商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--6. 第五部分: 直接放一張圖片-->
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
</div>
<!--7. 第六部分: 抄第四部分的-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左側(cè)廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側(cè)商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--8. 第七部分: 放置一張圖片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第八部分: 放一堆超鏈接-->
<div style="text-align: center;">
<a href="#">關(guān)于我們</a>
<a href="#">聯(lián)系我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務(wù)聲明</a>
<a href="#">廣告聲明</a>
<br />
Copyright ? 2005-2016 傳智商城 版權(quán)所有
</div>
</div>
</body>
</html>
CSS的盒子模型
萬物皆盒子
內(nèi)邊距：
padding-top:
padding-right:
padding-bottom:
padding-left:
padding: 10px; 上下左右都是10px
padding: 10px 20px; 上下都是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右 20px 下 30px 左 20px
padding: 10px 20px 30px 40px; 上右下左篓像，順時(shí)針方向
外邊距:
margin-top:
margin-right:
margin-bottom:
margin-left:
CSS絕對(duì)定位：
position: absulte
top:控制距離頂部的位置
left:控制距離左邊的位置
步驟分析：
1.總共5部分
2.第一部分是LOGO部分
3.第二部分是導(dǎo)航菜單
4.第三部分是注冊(cè)部分
5.第四部分是FOOTER圖片
6.第五部分是一堆超鏈接
代碼實(shí)現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<!--
1. 總共是5部分
2. 第一部分是LOGO部分
3. 第二部分是導(dǎo)航菜單
4. 第三部分是注冊(cè)部分
5. 第四部分是FOOTER圖片
6. 第五部分是一堆超鏈接
-->
<div>
<!--2. 第一部分是LOGO部分-->
<div>
<div class="logo">
<img src="../img/logo2.png" />
</div>
<div class="logo">
<img src="../img/header.png" />
</div>
<div class="logo">
<a href="#">登錄</a>
<a href="#">注冊(cè)</a>
<a href="#">購(gòu)物車</a>
</div>
</div>
<!--清除浮動(dòng)-->
<div style="clear: both;"></div>
<!--3. 第二部分是導(dǎo)航菜單-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁(yè)</a>
<a href="#" class="amenu">手機(jī)數(shù)碼</a>
<a href="#" class="amenu">電腦辦公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香煙酒水</a>
</div>
<!--4. 第三部分是注冊(cè)部分-->
<div style="background: url(../image/regist_bg.jpg);height: 500px;">
<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">會(huì)員注冊(cè)</font>USER REGISTER</td>
</tr>
<tr>
<td>用戶名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>確認(rèn)密碼:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email:</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>性別:</td>
<td><input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女
<input type="radio" name="sex"/> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="date"/></td>
</tr>
<tr>
<td>驗(yàn)證碼:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注冊(cè)"/></td>
</tr>
</table>
</div>
</div>
<!--5. 第四部分是FOOTER圖片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第四部分: 放一堆超鏈接-->
<div style="text-align: center;">
<a href="#">關(guān)于我們</a>
<a href="#">聯(lián)系我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務(wù)聲明</a>
<a href="#">廣告聲明</a>
<br />
</div>
</div>
</body>
</html>
