今天又是周一嘍，我們開始啦又一周的學習啦，想一想，在這里學習已經一個月啦，不知什么時間已經習慣啦這種生活，我應該是一個很難適應環境的人啊，但是現在在這里感覺還可以哦，可能是來到這里有自己的目標吧，所以自己的壞習慣就沒有暴漏啦，這樣挺好的，我只是想通過自己的努力去做自己想做的事情，或許很多人不能理解我現在的選擇，或許今天的我應該呆在家里面足不出戶，或許今天的我應該選擇一個穩定的工作，但是我沒有，我不想這樣，一點都不想，我不知道選擇這個要走多遠，或許我學習了這個但是未來的工作卻沒有選擇這個方向，但現在我樂意學習，我的興趣告訴我，此刻不論我面對的是什么，我都要努力學習···接下來的三個月無論怎么樣都要堅持。好啦下面就來總結一下今天學習的內容吧。
一.html中的表單元素
舉例說明Form表單的元素吧，
- 用戶名一般為一個文本框，所以把type設置為text即可；
- type為password則為“密文型的文本框”；
- 性別一般為單選按鈕，type為radio,但是在這里需要注意的是，在添加兩個單選按鈕時間需要把他們的值設置為一樣的這樣才能陳文給單選；
- 個人愛好一般為多選框，所以在這里用的checkbox來設置，則輸出的為多選框的樣式；
- 下面還有一個選擇國籍，則選擇的是下拉列表，type為select；
- 當type為file時間，則為我們往常看到的文件的上傳下載格式，在這里textarea即設置上傳文件的文本框的行和列；
- 接下來就是按鈕，當type為重置時間一般設置type為reset，當為注冊時間一般為submit，登錄時間就用button，雖然它不是Form中的元素，但是可以顯示，而其設置的值就是按鈕上面顯示的字體；
- 還有一個是圖片按鈕，設置type為image，屬性src為圖片路徑，然后是圖片的寬度和高度。
如下代碼所示以及在瀏覽器中瀏覽顯示的格式：
<body>
<form action="http://www.baidu.com" method="post">
<label>用戶名:</label><input type="text" name="txtUserName" maxlength="4" value="劉德華" size="100"/><br />
<label>密 碼:</label><input type="password" name="txtUserPwd" maxlength="6" value="123456" size="100" /><br />
<label>性 別:</label><label>男</label><input type="radio" name="txtGender" /><label>女</label>
<input type="radio" name="txtGender" /><br />
<label>個人愛好:</label><input type="checkbox" name="txtMusic" checked /><label>音樂</label>
<input type="checkbox" name="txtsport"/><label>體育</label><input type="checkbox" name="txtmovie" value=" " />
<label>電影</label><br />
<label>選擇您的國籍</label>
<select name="select" multiple>
<option value="china">中國</option>
<option value="koren">韓國</option>
<option value="japan">日本</option>
</select><br />
<input type="file" name="upload" value="uploadimage" /><br/>
<textarea rows="20" cols="20"></textarea><br />
<input type="submit" name="name" value="注冊 " />
<input type="button" name="name" value="登錄" /> <button>登錄</button>
<input type="reset" name="reset" value="重置" />
<input type="image" src="7.jpg" size="100" height="20" width="20" />
</form>
</body>
另外還有一些設置，如下面代碼和圖片可以看出來其代碼實現的功能。
<body>
<center>
<form action="/" method="post">
<table>
<tr>
<td>數字：</td>
<td><input type="number" name="txtNumber" value=" " step="2" /></td>
</tr>
<tr>
<td>顏色輸入框：</td>
<td><input type="color" name="txtColor" value=" " /></td>
</tr>
<tr>
<td>郵箱地址:</td>
<td><input type="email" name="txtEmail" value=" " /></td>
</tr>
<tr>
<td>電話號碼:</td>
<td><input type="tel" name="txttel" value=" " /></td>
</tr>
<tr><td>范圍:</td>
<td><input type="range" name="txtrange" /></td>
</tr>
<tr>
<td>日期:</td>
<td><input type="date" name="txtdate" value=" " /></td>
</tr>
<tr>
<td>日期時間:</td>
<td><input type="datetime" name="txtdate" value=" " /></td>
</tr>
<tr>
<td>月:</td>
<td><input type="month" name="txtMonth" value=" " /></td>
</tr>
<tr>
<td>周:</td>
<td><input type="week" name="txtWeek" value=" " /></td>
</tr>
<tr>
<td>時間:</td>
<td><input type="time" name="txttimer" value=" " /></td>
</tr>
<tr>
<td>Url:</td>
<td><input type="url" name="txtUrl" value=" " /></td>
</tr>
<tr>
<td>隱藏:</td>
<td><input type="hidden" name=" txtHidden" value="雲和學院 " /></td>
</tr>
<tr>
<td>搜索框:</td>
<td><input type="search" name="txtSearch" value=" " /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="name" value="提交 " /></td>
</tr>
</table>
</form>
</center>
</body>
上面的設置我想通過標簽的顯示就能看出其格式的設置啦吧，所以以上這些就是html中的From表單。
二.html的框架
在這里創建一個Html靜態頁面，然后刪除<body></body>標簽，添加<frameset></frameset>，其格式就是這樣的，如下代碼所示：
在這里可以看到在標簽<frameset></frameset>中有一個rows屬性，他的值為25%和*，在這里25%表示搜狐網頁占25%，下面一個網站占剩下的部分，這里僅僅是一個舉例，對比下框架的分配以及各式的顯示，大體上面分為三部分，如下圖所示：
三.CSS層疊樣式表
1. 下面舉例說一下css的優點，為什么我們要用css樣式那？
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> p { font-size:xx-large; font-family:隸書; color:green } </style> </head> <body> <p><font face="隸書" color="yellow" size="10">大家好！歡迎在雲和學院學習Net開發</font> </p> <p><font face="隸書" color="yellow" size="10"> 大家好！歡迎在雲和學院學習Net開發</font></p> <p>大家好！歡迎在雲和學院學習Net開發</p> <P>大家好！歡迎在雲和學院學習Net開發。</P> <p>大家好！歡迎在雲和學院學習Net開發。</p> </body> </html>
上面的代碼運行的結果如下所示：
在這里，前兩行的字體都要在<p>標簽中設置，感覺很麻煩，而最后三行的字體就是把p標簽給提取出來放在head里面，但是要用標簽stytle，格式如上面所示，在p標簽里面設置字體的屬性，從而使在p標簽中的元素都可以顯示其屬性，這樣就是簡單多啦。而前兩個內容也是在p標簽中，但是他們設置的有自己的屬性，在css中有一個特性就是就近一致原則，因此前兩行就顯示了其自己的行內的屬性，像這樣在行內設置其css樣式的就叫做行內樣式；想下面的那種把p標簽提取出來的就叫做標簽選擇器。
2.下面說一下css中的類選擇器和id選擇器
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> p { color:blue; font-size:x-small; font-family:'Agency FB'； } .label { color:silver; font-size:1.5em; font-family:KaiTi } #label { color: azure; font-size: 1.5em; font-family: KaiTi; } </style> </head> <body> <p style="font-family:仿宋; font-size:xx-large;color:pink">大家好！歡迎在雲和學院學習Net開發</p> <!--行內樣式--> <p>大家好！歡迎在雲和學院學習Net開發</p> <p class="label">大家好！歡迎在雲和學院學習Net開發</p> <p id="label">大家好！歡迎在雲和學院學習Net開發</p> </body>
上面所示，在p標簽中僅僅需要寫一個 class=”label“,class可以任意取名字，然后像上面的方法一樣，把其p標簽中的屬性提取出來，即.class的值,然后在花括號里面設置其屬性，像這樣的方法就是類選擇器；而在p標簽中僅僅需要寫一個id=”id“，id的值也可以任曦選取名字，然后#id的值加上花括號，並在花括號內設置其屬性，這樣的方法叫去哦id選擇器。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> p { color:blue; } p.color { color:green; } #id { color:red; } </style> </head> <body> <p>歡迎來到雲何學院學習.net</p> <!--<p style="color:green">風急天高猿嘯哀，尚思為國樹輪台</p--> <p class="color">歡迎來到雲何學院學習.net</p> <p>歡迎來到雲何學院學習.net</p> <div class="color"> 歡迎來到雲何學院學習.net </div> <span class="color"> 歡迎來到雲何學院學習.net </span> <p id="id">歡迎來到雲何學院學習.net</p> </body> </html>
前面說過啦標簽選擇器和id選擇器，而在上面例題中還有一個p.color，其實上面這個就是對其中一個設置了class的p標簽設置其屬性，而只想讓其設置了class的顯示其屬相，只需要用p.class的值加上花括號，在花括號內設置其屬性即可。
3.多選擇器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="css005.css" rel="stylesheet" /> </head> <body> <p class="c1">還記得家鄉的味道</p> <div class="c2">還記得家鄉的味道</div> <span class="c3">還記得家鄉的味道</span> </body> </html>
.c1, .c2, .c3 {
color:bisque
}
像上面所示，把css添加在樣式表中，在html頁面中調用css樣式表，格式如上面所示，即在head標簽中用link標簽即可，而在p標簽，div標簽和span標簽都設置了class的值，然后分別設置值為c1，c2，c3，然后再樣式表中用逗號（，）隔開，加上花括號即可，在花括號內設置其屬性，這樣的方法就叫做多選擇器。
4.需要注意的是，在css樣式表中設置字體時間可以設置任意幾種字體格式，如下所示：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> p { color:blue; font-size:100px; font-family:Algerian,Andalus,AngsanaUPC,'Agency FB'; font-style:italic; font-weight:bolder; } </style> </head> <body> <p>天青色等煙雨，而我在等你</p> </body> </html>
上面的p標簽中在設置字體時間就是設置了多種格式，這個是由於可以根據瀏覽器的不同，自動選擇不同的字體樣式，更加方便。
總結一下css中字體的屬性：
color：字體顏色；
font-size:字體大小；
font-fanily：字體格式；
font-weight：加粗。
圖片的屬性：border：圖片邊框。如下所示：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="001.css" rel="stylesheet" /> <link href="002.css" rel="stylesheet" /> <link href="003.css" rel="stylesheet" /> <link href="004.css" rel="stylesheet" /> <link href="005.css" rel="stylesheet" /> <link href="006.css" rel="stylesheet" /> <link href="007.css" rel="stylesheet" /> <link href="008.css" rel="stylesheet" /> <link href="009.css" rel="stylesheet" /> <link href="010.css" rel="stylesheet" /> <link href="011.css" rel="stylesheet" /> </head> <body> <h1 class="class"><center>旋轉音樂盒</center></h1> <p class="c1">作詞：阿悄 aa</p> <p class="c2">作曲：阿悄</p> <p class="c2">演唱：阿悄,童可可</p> <p class="c3">在身邊呀 很耀眼</p> <p class="c3" >愛神秘密地出現</p> <p class="c3">那光圈 太遙遠</p> <p class="c3">好幾光年</p> <p class="c3">雲朵在冒煙 又再見面</p> <p id="id">原來是你的視線</p> <p class="c3">不停回旋 不停轉圈</p> <p class="c3">好想念</p> <p class="c4">像幻覺</p> <p class="c5">我在他身邊</p> <p class="c6">他身邊</p> <p class="c7">我願跳舞直到深夜</p> <p class="c8">願望會實現</p> <pre>音樂旋轉旋轉不停歇</pre> <pre>愛着那天那天不終結</pre> <pre>盒子旋轉旋轉不停歇</pre> <pre>愛你永遠永遠不終結</pre> <p class="c9">在身邊呀 很耀眼</p> <p class="c9">愛神秘密地出現</p> <p class="c10">那光圈 太遙遠Hello World</p> <p class="c11">好幾光年HeLLo WoRLd</p> <p class="c12">愛你永遠永遠不終結Hello World</p> </body>
p { text-align:center; }
.class { font-family:華文彩雲; /*字體*/ color:green; /*字體顏色*/ font-size:large; /*字體大小*/ font-weight:900; /*加粗程度*/ }
.c1 { font-variant:small-caps /*小寫轉大寫形式*/ }
.c2 { font-family:微軟雅黑; font-weight:bolder; }
.c3{ font:italic bold small-caps 19px 宋體; /*五個*/ }
#id { font-family:宋體; color:red; }
.c4 { text-decoration:underline; } .c5 { text-decoration:overline; } .c6 { text-decoration:line-through; }
.c7{ text-align:left; } .c8 { text-align:right; }
pre { text-indent:2%; }
.c9{ line-height:20; }
.c10 { text-transform:uppercase; } .c11 { text-transform:lowercase; } .c12 { text-transform:capitalize; }
如下所示：
另外還學習了a標簽和list標簽的屬性以及盒子模型，明天我再寫吧，嘿嘿，可能是html和css這個東西比較碎吧，但是總體上東西還是比較容易學習的啦，可能是因為我們僅僅了解一下吧，畢竟我們是寫后台程序的，嘿嘿，就寫到這里啦。