2.1 細(xì)線表格
- 細(xì)線表格
1.不設(shè)置boder，設(shè)置cellspacing為1
2.設(shè)置整個(gè)表格背景色為表格線顏色，然后再設(shè)置每個(gè)單元格背景色和整個(gè)表格不一樣。
或者：(css)
style="border-collapse: collapse;"
在table屬性中添加以上屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)歷表格</title>
</head>
<body>
<!--細(xì)線表格
1.不設(shè)置boder，設(shè)置cellspacing為1
2.設(shè)置整個(gè)表格背景色為表格線顏色，然后再設(shè)置每個(gè)單元格背景色和整個(gè)表格不一樣。
或者：
style="border-collapse: collapse;"
在table屬性中添加以上屬性
-->
<table border="0" cellspacing="1" cellpadding="5"
height="220" bgcolor="black">
<tr bgcolor="white">
<td width="50">11</td>
<td width="100">12</td>
<td width="50">13</td>
<td colspan="2" width="100">14</td>
<td rowspan="5" width="120">15</td>
</tr >
<tr bgcolor="white">
<td>21</td>
<td>22</td>
<td>23</td>
<td colspan="2">24</td>
</tr>
<tr bgcolor="white">
<td>31</td>
<td>32</td>
<td>33</td>
<td colspan="2">34</td>
</tr>
<tr bgcolor="white">
<td>41</td>
<td>42</td>
<td>43</td>
<td colspan="2">44</td>
</tr>
<tr bgcolor="white">
<td>51</td>
<td>52</td>
<td>53</td>
<td colspan="2">54</td>
</tr>
<tr bgcolor="white">
<td>61</td>
<td>62</td>
<td>63</td>
<td colspan="3">64</td>
</tr>
<tr bgcolor="white">
<td rowspan="2">71</td>
<td>72</td>
<td colspan="2">73</td>
<td colspan="2">74</td>
</tr>
<tr bgcolor="white">
<td>81</td>
<td colspan="2">82</td>
<td colspan="2">83</td>
</tr>
<tr bgcolor="white">
<td>91</td>
<td colspan="5">92</td>
</tr>
<tr height="60" bgcolor="white">
<td >101</td>
<td colspan="5">102</td>
</tr>
<tr height="40" bgcolor="white">
<td>111</td>
<td colspan="5">112</td>
</tr>
<tr height="80" bgcolor="white">
<td>121</td>
<td colspan="5">122</td>
</tr>
<tr bgcolor="white">
<td>131</td>
<td colspan="5">132</td>
</tr>
<tr bgcolor="white">
<td>141</td>
<td colspan="5">142</td>
</tr>
<tr bgcolor="white">
<td>151</td>
<td colspan="5">152</td>
</tr>
<tr bgcolor="white">
<td>161</td>
<td colspan="5">162</td>
</tr>
</table>
</body>
</html>
2.2 表單標(biāo)簽和input標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
- 1.表單標(biāo)簽（form）
表單標(biāo)簽的作用：用于收集用戶信息，實(shí)質(zhì)是將表單標(biāo)簽作為容器來(lái)收集表單標(biāo)簽中其它標(biāo)簽的信息。它自身無(wú)任何顯示效果。
action屬性：設(shè)置提交地址
method屬性：設(shè)置提交方式（post/get）
點(diǎn)提交按鈕提交的時(shí)候，將表單中所有相關(guān)標(biāo)簽以name-value的形式，按method屬性提供的方式，提交給action屬性對(duì)應(yīng)的接口。
form標(biāo)簽提供兩大功能：
a.統(tǒng)一提交
b.重置（清除輸入信息）
<form action="#" method="get">
a.type="text"
普通文本輸入框
name屬性：專門用來(lái)區(qū)分不同的信息，相當(dāng)于字典的key
<font>賬號(hào)</font><input type="text" name="tel" value="1607470930"
placeholder="qq號(hào)，哈哈" maxlength="10" id=""/><br />
<font>郵箱</font><input type="text" name="email" value=""
placeholder="別輸了，輸了也沒(méi)有！" id=""
maxlength="10"/><br />
<!--<input type="submit" name="" id="" value="提交" />-->
2.input標(biāo)簽 -單標(biāo)簽
屬于表單標(biāo)簽，既可以放在form標(biāo)簽中，也可以放form標(biāo)簽外面單獨(dú)使用。
type屬性：type對(duì)應(yīng)的值不一樣，input標(biāo)簽體現(xiàn)的功能不一樣
name屬性：專門用來(lái)區(qū)分不同的信息，相當(dāng)于字典的key
value屬性：標(biāo)簽內(nèi)容；指向輸入框中的內(nèi)容;設(shè)置其實(shí)是設(shè)輸入框中默認(rèn)值。（記錄賬號(hào)密碼）
placeholders屬性：當(dāng)輸入框中無(wú)內(nèi)容時(shí)顯示的提示信息
maxlength屬性：設(shè)置輸入框最大能輸入的字符個(gè)數(shù)
b.type="password"：密碼輸入框
普通文本輸入框
<font>密碼</font><input type="password" name="password" value="password"
placeholder="密碼" /><br />
<input type="submit" name="" id="" value="提交" />
<br />
<hr />
c.type="radio"：?jiǎn)芜x按鈕
name屬性：同一組選擇，需要設(shè)置它們name屬性值一樣，才能單選
value屬性：不可見(jiàn)；專門用于對(duì)提交數(shù)據(jù)的區(qū)分，因?yàn)樵趩芜x按鈕模式中兩者屬性是一樣的
checked="checked":讓單選按鈕處于選擇狀態(tài)。
<input type="radio" name="sex" id="" value="boy"
checked="checked"/><font>男</font>
<input type="radio" name="sex" id="" value="girl" /><font>女</font>
<br />
<input type="radio" name="marry" id="" value="未婚"
checked="checked"/><font>未婚</font>
<input type="radio" name="marry" id="" value="已婚" /><font>已婚</font>
<br />
<hr />
d.type="checkbox"：復(fù)選按鈕
name屬性：同一組選擇，需要設(shè)置它們name屬性值一樣，才能復(fù)選
<input type="checkbox" name="hobby" id="" value="籃球"/><font>籃球</font>
<br />
<input type="checkbox" name="hobby" id="" value="足球"/><font>足球</font>
<br />
<input type="checkbox" name="hobby" id="" value="排球"/><font>排球</font>
<br />
<input type="checkbox" name="hobby" id="" value="乒乓球"/><font>乒乓球</font>
<br />
<hr />
e.type="button"：普通按鈕
value屬性：決定按鈕上顯示的信息
<input type="button" id="" value="input按鈕"/>
<br />
<hr />
f.type="submit"：提交按鈕
點(diǎn)擊提交按鈕后，會(huì)自動(dòng)提交當(dāng)前form中所有設(shè)置了name屬性的相關(guān)標(biāo)簽的值，放在form標(biāo)簽外無(wú)意義，以name=value的方式提交。
<input type="submit" name="" id="" value="提交" />
<br />
<hr />
g：type="reset"：重置按鈕
將當(dāng)前form標(biāo)簽中所有的標(biāo)簽狀態(tài)設(shè)置為初始狀態(tài)
<input type="reset" value="重置" />
<hr />
<input type="email" name="" id="" value="" />
<input type="color" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="datetime" name="" id="" value="" />
<hr />
</form>
3.按鈕標(biāo)簽（button）
雙標(biāo)簽，通過(guò)input->type="button"生成的按鈕是單標(biāo)簽，按鈕不能為圖片。
中間內(nèi)容部分更靈活
<!--文字按鈕-->
<button>普通按鈕</button>
<!--圖片按鈕-->
<button><font>圖片按鈕</font><img src="img/校長(zhǎng).jpg" alt="莫得了" /></button>
</body>
</html>
2.3 下拉菜單和多行文本標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
- 1.下拉菜單
a.select標(biāo)簽：代表整個(gè)下拉菜單
name屬性：區(qū)分和提交
b.option標(biāo)簽：下拉菜單中的選項(xiàng)
value屬性：提交的內(nèi)容
selected="selected"屬性：設(shè)置為默認(rèn)選中。
c.optgroup標(biāo)簽：
label屬性：給分組取名字
<font>考試科目</font><select name="學(xué)科">
<optgroup label="理科">理科</optgroup>
<option value="">語(yǔ)文</option>
<optgroup label="文科">文科</optgroup>
<option value="">歷史</option>
</select>
<br />
<font>省份</font><select name="province">
<option value="四川">四川省</option>
<option value="廣西">廣西省</option>
<option value="廣東">廣東省</option>
<option value="湖南">湖南省</option>
<option value="湖北">湖北省</option>
<option selected="selected" value="云南">云南省</option>
<option value="遼寧">遼寧省</option>
<option value="吉林">吉林省</option>
<option value="黑龍江">黑龍江省</option>
</select>
<br />
<font>城市</font><select name="city">
<option value="">成都市</option>
<option value="">南寧市</option>
<option value="">深圳市</option>
<option value="">長(zhǎng)沙市</option>
<option value="">武漢市</option>
<option value="">昆明市</option>
<option value="">沈陽(yáng)市</option>
<option value="">長(zhǎng)春市</option>
<option value="">哈爾濱市</option>
</select>
<br />
<input type="submit" name="" id="" value="提交" />
<hr />
- 2.多行文本輸入框
可以輸入多行內(nèi)容，內(nèi)容超出范圍可以上下滾動(dòng)
name屬性：提交和區(qū)分
rows屬性：一次性可以顯示的行數(shù)，決定高度
cols屬性：列數(shù)；一行最多可以顯示多少個(gè)文字，決定寬度
placeholder
內(nèi)容:相當(dāng)于單標(biāo)簽中的value功能，提交的也是這個(gè)。
maxlength屬性：最多多少字
<textarea name="" rows="4" cols="10" placeholder="一劍光寒十九州"
maxlength="5">
默認(rèn)值
</textarea>
</form>
</body>
</html>
2.4 div和span標(biāo)簽
div和span都是無(wú)語(yǔ)義標(biāo)簽：一般用來(lái)將網(wǎng)頁(yè)中的標(biāo)簽進(jìn)行分組和分模塊使用。
2.5 css基礎(chǔ)
- 1.什么是css
css是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，專門負(fù)責(zé)網(wǎng)頁(yè)中內(nèi)容的布局和樣式。
目前使用的是css3
css代碼又叫樣式表
2.css語(yǔ)法（怎么寫(xiě)？）
a.基本結(jié)構(gòu)
選擇器{屬性名1：屬性值1；屬性名2：屬性值2。。。}
b.說(shuō)明
選擇器{}：通過(guò)選擇器來(lái)決定樣式是針對(duì)哪個(gè)標(biāo)簽寫(xiě)的（在內(nèi)聯(lián)樣式表中沒(méi)有這個(gè)結(jié)構(gòu)）。
屬性：屬性名不是隨便寫(xiě)的，必須是css提供的兩百多個(gè)屬性中的一個(gè)；屬性名和屬性值之間用冒號(hào)連接；
多個(gè)屬性之間用分號(hào)隔開(kāi)（如果沒(méi)有分號(hào)，會(huì)導(dǎo)致后邊所有的屬性無(wú)效。）。
3.css代碼寫(xiě)在哪
a.內(nèi)聯(lián)樣式表
將樣式表作為HTML標(biāo)簽的style屬性值
只針對(duì)一個(gè)標(biāo)簽有效
b.內(nèi)部樣式表
將樣式表作為style標(biāo)簽的內(nèi)容,head或body中。（注意是標(biāo)簽）
可以針對(duì)當(dāng)前html中所有的標(biāo)簽
c.外部樣式表
將樣式表寫(xiě)在一個(gè)css文件中，再通過(guò)link導(dǎo)入
css文件：后綴是css的文件
可以針對(duì)所有的html中的所有標(biāo)簽，前提是要導(dǎo)入。
常用屬性補(bǔ)充：
color：文字顏色
font-size:字體大小
background-color：背景顏色
width：寬度
height：高度
css中顏色：
a.顏色英語(yǔ)單詞
b.rgb的十六進(jìn)制值：如#ff0000(紅色)
c.直接使用rgb值，如rgb(255,0,0)紅 ；
rgba(R,G,B,Alpha):Alpha(0完全透明-1不透明)
css中數(shù)字：如果數(shù)字表示大小，必須加單位：
px：像素
em：空格
3者優(yōu)先級(jí)：
內(nèi)聯(lián)樣式表優(yōu)先級(jí)最高，內(nèi)部和外部的樣式表看執(zhí)行順序，寫(xiě)在后面的優(yōu)先級(jí)高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css基礎(chǔ)</title>
<!--2.內(nèi)部樣式表
style標(biāo)簽中的內(nèi)容，必須也只能是css代碼
-->
<style type="text/css">
/*內(nèi)部樣式可以同時(shí)寫(xiě)多個(gè)樣式表*/
a{
color:yellowgreen;
background-color: blue;
}
/*對(duì)所有div標(biāo)簽設(shè)置顏色*/
div{
color:saddlebrown;
}
</style>
<style type="text/css">
div{
background-color: red;
}
</style>
<!--3.外部樣式表
a.link標(biāo)簽：
rel屬性：確定導(dǎo)入的文件功能
rel="stylesheet"(樣式表)；
rel="icon"：設(shè)置網(wǎng)頁(yè)圖標(biāo)
type屬性：確定文件類型；文件類型/文件后綴；text/css文本/文件后綴是css
href屬性：需要導(dǎo)入的文件的文件路徑
-->
<link rel="stylesheet" href="css/css基礎(chǔ).css" type="text/css"/>
<!--設(shè)置網(wǎng)頁(yè)圖標(biāo)-->
<link rel="icon" href="img/jd.jpg" type="img/jpg"/>
</head>
<body>
<!--1.內(nèi)聯(lián)樣式表
body中每個(gè)有顯示效果的標(biāo)簽都有style屬性，用于設(shè)置當(dāng)前標(biāo)簽樣式
style屬性值""中寫(xiě)的就是css代碼。
-->
<p style="color: red;font-size:10px;">一劍光寒十九州！</p>
<p style="color: #0000ff;font-size:1em;">一劍光寒十九州！</p>
<p style="color: rgba(0,255,0,0.5);font-size:50px">一劍光寒十九州！</p>
<a >百度一下</a>
<div id="">
我是div
</div>
<h1>我是標(biāo)題一</h1>
</body>
</html>
2.6 選擇器
style標(biāo)簽實(shí)質(zhì)可以寫(xiě)在html文件中的任意位置
選擇器{屬性名1：屬性值1；。。。；}
css提供的選擇器寫(xiě)法大概也就10幾種，常見(jiàn)的：
1.標(biāo)簽選擇器：直接將標(biāo)簽名作為選擇器，選中當(dāng)前html中所有指定的標(biāo)簽
如：a{}：選中當(dāng)前html中所有的a標(biāo)簽
2.id選擇器：將標(biāo)簽的id屬性值前加#作選擇器，選擇所有id是指定值的標(biāo)簽。
如：#text：選中當(dāng)前html中id屬性值為text的所有標(biāo)簽。
3.class選擇器(類型選擇器):將標(biāo)簽的class屬性值前加.作為選擇器，選中所有class是指定值的標(biāo)簽。
如：.test：選中當(dāng)前html中class屬性值是test的所有標(biāo)簽。
4.群組選擇器：將多個(gè)選擇器之間用逗號(hào)隔開(kāi)，然后作為一個(gè)選擇器，同時(shí)選中每個(gè)單獨(dú)選擇器選中的所有標(biāo)簽。
如：p,a,.test,#text{}:選中所有的p標(biāo)簽，a標(biāo)簽，class只是test以及id值
是text的標(biāo)簽。
5.后代選擇器：將多個(gè)選擇器用空格隔開(kāi)作為一個(gè)選擇器，從前往后一層一層的找，找到最后一個(gè)選擇器對(duì)應(yīng)的標(biāo)簽。
如：div .test #text{}：選中div標(biāo)簽中class值是test的標(biāo)簽中id值是text
的標(biāo)簽。
div div p{}：選中div中的div中的p標(biāo)簽
6.通配符：將作為選擇器，選中當(dāng)前頁(yè)面中所有的標(biāo)簽。
如：{}：選中所有標(biāo)簽
<style type="text/css">
/*標(biāo)簽選擇器*/
div{
color:red;
}
/*id選擇器*/
#text{
background-color: yellow;
}
/*類型選擇器*/
.test{
width:300px;
height: 200px;
background-color: bisque;
}
/*群組選擇器*/
font,h2{
font-size: 60px;
}
/*后代選擇器*/
div div p{
}
/*通配符*/
*{
/*設(shè)置文字裝飾效果
underline：添加下劃線
overline：添加上劃線
line-through：添加刪除線，會(huì)重置掉前兩個(gè)
none：去掉下劃線
*/
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration:none;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>我是段落1，我是body p</p>
<div>
<div id="text">
div1
</div>
<div class="test">
div2
<p>我是段落2，也是div div p</p>
</div>
</div>
<p id="text">我是段落3</p>
<h1 class="test">我是標(biāo)題1，我的class是test</h1>
<h2>我是標(biāo)題2</h2>
<font class="font">我是font</font>
</body>
</html>
2.7 偽類選擇器
- 偽類選擇器
用于給標(biāo)簽不同的狀態(tài)設(shè)置不同的樣式
1.基本格式
普通選擇器：偽類選擇器
2.偽類選擇器
- link：標(biāo)簽的初始狀態(tài);一般作用于a標(biāo)簽，表示a標(biāo)簽中的鏈接沒(méi)有成功訪問(wèn)過(guò)對(duì)應(yīng)的狀態(tài)，即初始狀態(tài)。(如：讀過(guò)的小說(shuō)章節(jié)與未讀過(guò)的章節(jié)不一樣)
標(biāo)簽:link{}:此處的標(biāo)簽可以是任何選擇器選中的標(biāo)簽。- visited：超鏈接被訪問(wèn)后的狀態(tài)(如：讀過(guò)的小說(shuō)章節(jié)的狀態(tài))一般作用于a標(biāo)簽.
- hover：鼠標(biāo)懸停在標(biāo)簽上時(shí)對(duì)應(yīng)的狀態(tài)。適用于所有標(biāo)簽。
- active:激活狀態(tài)；鼠標(biāo)按下但是還沒(méi)有彈起時(shí)對(duì)應(yīng)的狀態(tài)。不是僅作用于a標(biāo)簽。
- 愛(ài)恨原則：當(dāng)同一個(gè)標(biāo)簽需要同時(shí)給多個(gè)狀態(tài)添加狀態(tài)時(shí)，需要遵循愛(ài)恨原則：
link,visited,hover,active
LoVeHAte
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color:red;
}
a:visited{
color:black;
}
a:hover{
/*去掉下劃線*/
text-decoration: none;
}
a:active{
color: blue;
}
p:hover{
color: red;
font-size: 10em;
}
</style>
</head>
<body>
<a >錯(cuò)誤的鏈接</a>
<p>一劍光寒十九州！</p>
</body>
</html>
