<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/zj.css" />
<style type="text/css">
a {
text-decoration: none;
}
a:link {
color: deepskyblue;
}
a:visited {
color: purple;
}
a:hover {
font-size: 25px;
color: red;
}
a:active {
background-color: yellow;
}
</style>
</head>
<body>
<h1>day30-總結(jié)</h1>
<ul>
<li><a href="#1">表單標(biāo)簽form</a></li>
<li><a href="#2">下拉菜單和多行文本</a></li>
<li><a href="#3">空白標(biāo)簽</a></li>
<li><a href="#4">初識css</a></li>
<li><a href="#5">css選擇器</a></li>
<li><a href="#6">偽類選擇器</a></li>
</ul>
<div id="1">
<div class="hf">
<strong>表單標(biāo)簽form</strong>
</div>
表單標(biāo)簽<br />
專門用來收集信息的標(biāo)簽宵荒，可以提交表單中收集的信息<br />
action屬性：設(shè)置提交信息的位置<br />
method屬性：提交方式 - post/get
<br />
<form action="" method="post"><br />
input type="submit" value=""/><br />
</form><br />
<br />
input標(biāo)簽 (單標(biāo)簽) <br />
1.是表單標(biāo)簽 <br />
2.type屬性：<br />
<table border="1">
<tr><td>text - 普通的文本輸入框</td></tr>
<tr><td>password - 密碼輸入框悠砚，輸入的值密文顯示</td></tr>
<tr><td>radio - 單選按鈕邑时，
同一類型對應(yīng)的name值必須一樣，
value設(shè)置按鈕提交的值索绪，
checked設(shè)置為checked使其處于選中狀態(tài)</td></tr>
<tr><td>checkbox - 多選按鈕崔赌，
同一類型對應(yīng)的name值必須一樣，
value設(shè)置按鈕提交的值还绘，
checked設(shè)置為checked使其處于選中狀態(tài)</td></tr>
<tr><td>button - 普通按鈕</td></tr>
<tr><td>reset - 重置按鈕铐望，
重置當(dāng)前所在的form的各標(biāo)簽的值</td></tr>
<tr><td>file - 文件選擇器</td></tr>
</table>
3.name屬性：必須設(shè)置(a.用于提交信息) <br />
4.value屬性：標(biāo)簽內(nèi)容 <br />
5.placeholder屬性：占位符(提示信息) <br />
6.maxlength屬性：限制最多輸入位數(shù) <br />
7.readonly：輸入框只讀 <br />
8.disabled屬性：按鈕不可點擊 disabled:disabledbr <br />
<br />
fieldset標(biāo)簽 <br />
一個fieldset標(biāo)簽對應(yīng)一個表單分組 <br />
legend屬性：設(shè)置分組名 <br /> <br />
<form action="" method="get">
<fieldset id="">
<legend>賬號信息</legend>
<p>用戶名：<input type="text" name="name" id="name" placeholder="請輸入姓名" /></p>
<p>密碼：<input type="password" name="pwd" id="pwd" placeholder="請輸入密碼" maxlength="8"/></p>
</fieldset>
<fieldset id="">
<legend>個人信息</legend>
<p>性別：<input type="radio" name="sex" id="sex" value="m" checked="checked"/>男
<input type="radio" name="sex" id="sex" value="f"/>女</p>
<p>愛好：<input type="checkbox" name="habbits" id="habbits" value="籃球"/>籃球
<input type="checkbox" name="habbits" id="habbits" value="足球"/>足球
<input type="checkbox" name="habbits" id="habbits" value="乒乓球"/>乒乓球 </p>
<p><input type="file" name="file" id="file" value="選擇文件" /></p>
</fieldset>
<input type="reset" value="重置"/> <input type="button" value="按鈕"/>
<input type="submit" value="提交信息"/>
</form>
</div>
<br />
<br />
<br />
<div id="2">
<div class="hf">
<strong>下拉菜單和多行文本</strong>
</div>
1.下拉菜單 <br />
selected="selected"表示默認選中 <br />
<select name="city"> <br />
<option selected="selected" style="display: none;">請選擇城市</option> <br />
<option value="無選項">無選擇</option> <br />
<option value="成都">成都</option> <br />
<option value="遂寧">遂寧</option> <br />
<option value="北京">北京</option><br />
<option value="青島">青島</option><br />
</select>
<br />
<select name="city">
<option selected="selected" style="display: none;">請選擇城市</option>
<option value="無選項">無選擇</option>
<option value="成都">成都</option>
<option value="遂寧">遂寧</option>
<option value="北京">北京</option>
<option value="青島">青島</option>
</select> <br />
<br />
2.多行文本 <br />
<textarea name="story" id="story" placeholder="請輸入你的故事" style="width: 300px;height: 150px;" maxlength="400"><"/textarea>
<textarea name="story" id="story" placeholder="請輸入你的故事" style="width: 300px;height: 150px;" maxlength="400"></textarea>
</div>
<br />
<br />
<br />
<div id="3">
<div class="hf">
<strong>空白標(biāo)簽</strong>
</div>
html中的標(biāo)簽分為2大類：<br />
塊級標(biāo)簽：一行只能有一個(不管標(biāo)簽的寬度是多少) <br />
h1-h6冈涧，p茂附，hr正蛙，ol，ul营曼，dl乒验，table，form蒂阱，div <br />
行內(nèi)標(biāo)簽：一行可以有多個 <br />
a锻全，image，input录煤，select鳄厌，textarea，span <br />
div和span標(biāo)簽妈踊，是空白標(biāo)簽了嚎，沒有任何特殊的意義(無語義標(biāo)簽) <br />
<br />
<div style="background-color: red; width: 100px; float: left;">
我是div
</div> <br />
<div style="background-color: yellow; width: 90px; float: left;">
我是div
</div> <br />
<div style="background-color: blue; width: 120px; float: left;">
我是div
</div> <br />
<span style="background-color: green;">
我是span
</span> <br />
<br />
<div style="background-color: red; width: 100px;">
我是div
</div>
<div style="background-color: yellow; width: 90px;">
我是div
</div>
<div style="background-color: blue; width: 120px;">
我是div
</div>
<span style="background-color: green;">
我是span
</span>
</div>
<br />
<br />
<br />
<div id="4">
<div class="hf">
<strong>初識css</strong>
</div>
1.什么是css <br />
CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，用來對網(wǎng)頁上標(biāo)簽的樣式進行設(shè)置(長什么樣，在哪) <br />
css代碼/css文件歪泳，稱其為樣式表 <br />
目前我們使用的是CSS3 <br />
<br />
2.寫在哪兒<br />
內(nèi)聯(lián)樣式表：將css代碼寫在標(biāo)簽的style屬性內(nèi) <br />
內(nèi)部樣式表：寫在head標(biāo)簽中的style標(biāo)簽的內(nèi)容中<br />
外部樣式表：寫在一個css文件中萝勤，通過head'中的link標(biāo)簽來關(guān)聯(lián)<br />
優(yōu)先級：內(nèi)聯(lián)的優(yōu)先級最高，內(nèi)部外部后加載優(yōu)先級高<br />
<br />
3.怎么寫<br />
選擇器{屬性：屬性值呐伞； 屬性：屬性值} <br />
選擇器：用來選中需要設(shè)置樣式的標(biāo)簽 <br />
屬性：css屬性 <br />
屬性值：數(shù)字且表示大小要加px或者% <br />
注意：屬性之間用敌卓；隔開 <br />
<br />
補充屬性：color：設(shè)置字體顏色 background-color：設(shè)置背景顏色 width：設(shè)置寬度 height：設(shè)置高度 <br /> <br />
1.關(guān)聯(lián)外部樣式表 <br />
<link rel="stylesheet" href="css/index.css" /><br />
2.style標(biāo)簽 <br /> <br />
<style type="text/css"> <br />
div{
background-color: yellowgreen;
} <br />
</style> <br />
</div>
<br />
<br />
<br />
<div id="5">
<div class="hf">
<strong>css選擇器</strong>
</div>
選擇器 <br />
0.元素選擇器(標(biāo)簽選擇器)：標(biāo)簽名 <br />
選中所有的標(biāo)簽名對應(yīng)的標(biāo)簽 <br />
1.id選擇器：#id屬性值 <br />
每個標(biāo)簽都有一個id屬性，整個html中伶氢，id的值必須唯一 <br />
2.class選擇器：.class名 <br />
給標(biāo)簽設(shè)置class屬性趟径，通過class屬性引用樣式 <br />
3.通配符：* - 選中所有的標(biāo)簽 <br />
4.層級選擇器：選擇器1 選擇器2...{} <br />
5.群組選擇器：選擇器,選擇器,...{} <br />
補充：css中的顏色值： <br /><br />
1.顏色的英文單詞<br />
2.16進制顏色值0-255 -- 00-ff(#ff0000-紅色)<br />
3.rgb值:rgb(紅,綠,藍) rgba(紅,綠,藍,透明度) 透明度 0-1<br /> <br />
<style type="text/css"> <br />
.c2 p{
color: blue;
} <br />
* {
font-size: 25px;
} <br />
.c1 {
background-color: green;
} <br />
a {
text-decoration: none;
background-color: yellow;
} <br />
#a1 {
color: rgb(255,0,0);
} <br />
h1,span {
color: gold;
} <br />
<"/style>
</div>
<br />
<br />
<br />
<div id="6">
<div class="hf">
<strong>偽類選擇器</strong>
</div>
偽類選擇器 <br />
選擇器:狀態(tài) <br />
:link - 超鏈接的初始狀態(tài) <br />
:visited - 超鏈接訪問后的狀態(tài) <br />
:hover - 鼠標(biāo)懸停到標(biāo)簽上的狀態(tài) <br />
:active - 鼠標(biāo)點擊時的狀態(tài) <br />
給同一個標(biāo)簽通過偽類選擇器給予不同狀態(tài)的樣式時要遵循 <br />
LoVe HAte <br />
<style type="text/css"> <br />
a {
text-decoration: none;
} <br />
a:link {
color: deepskyblue;
} <br />
a:visited {
color: purple;
} <br />
a:hover {
font-size: 25px;
color: red;
} <br />
a:active {
background-color: yellow;
} <br />
<"/style> <br />
<a target="_blank">百度一下</a>
</div>
</body>
</html>
效果圖
image.png
image.png
image.png
