Day2:html和css
阿新 • • 發佈：2018-12-23
Day2:
html和css
表格是一種常用的標籤,表格結構,做到能夠合併單元格.
表格的屬性:
| 屬性名 | 說明 |
|---|---|
border |
設定表格的邊框 |
cellspacing |
設定單元格與單元格邊框之間的空白間距 |
cellpadding |
設定單元格內容與單元格邊框之間的空白間距 |
align |
設定表格在網頁中的水平對齊方式 |
width |
設定表格的寬度 |
height |
設定表格的高度 |
如何建立表格:
<table>
<tr>
<td></td>
</tr>
</table>表格用table,tr代表表格中的一行,必須在table標籤中,td用於表示表格中的單元格,<tr></tr>表格中的一行.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <table width="500" border="1" align="center" cellspacing="0" cellpadding="0"> <caption>個人資訊表</caption> 表格標題 <tr> <th>姓名</th> <th>性別</th> <th>電話</th> </tr> <tr> <td>dashu</td> <td>男</td> <td>123</td> </tr> <tr> <td>dashucoding</td> <td>男</td> <td>123456</td> </tr> </table> </body> </html>
<thead></thead>用於定義表格的頭部
<tbody></tbody>用於定義表格的主體表格:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <style> /*選擇器 { 屬性: 值; } */ th { color: blue; } td { font-size: 14px; } tr { height: 30px; } </style> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="550" align="center"> <caption> <h3></h3> </caption> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td>1</td> </tr> <tr> <td>1</td> </tr> <tr> <td>1</td> </tr> <tr> <td>1</td> </tr> <tr> <td>1</td> </tr> <tr> <td>1</td> </tr> <tr> <td>1</td> </tr> </tbody> </table> </body> </html>
合併單元格:
跨行合併:rowspan
跨列合併:colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="400" height="100" border="1">
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td colspan="2">123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
<table width="400" height="100" border="1">
<tr>
<td>123</td>
<td>abc</td>
<td rowspan="3">abc</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
</table>
</body>
</html>在表格中由行中的單元格組成,沒有列元素.表示式由表單控制元件,提示資訊,表單域組成.
input輸入控制元件:</input/>但標籤
// 表單
性別,生日,年月日,所在地區,婚姻狀況,學歷,月薪,手機號,暱稱,喜歡型別,掌握介紹等.| 屬性 | 屬性值 | 說明 |
|---|---|---|
type |
text |
單行文字輸入框 |
type |
password |
密碼輸入框 |
type |
radio |
單選按鈕 |
type |
checkbox |
複選框 |
type |
button |
普通按鈕 |
type |
submit |
提交按鈕 |
type |
reset |
過載按鈕 |
type |
image |
圖形形式的提交按鈕 |
type |
file |
檔案域 |
name |
使用者自定義 | 控制元件名稱 |
size |
正整數 | input控制元件在頁面中顯示的寬度 |
value |
使用者自定義 | 控制元件的預設文字值 |
checked |
checked |
定義選擇控制價預設被選擇的項 |
| 'maxlength` | 正整數 | 控制元件允許輸入的最多字元數 |
label標籤為input標籤元素定義的標註.
<label for="id"> id </label>
<input type="radio" name="sex" id="me" value="id">textarea控制元件-文字域
<textarea cols="每行中的字元數" rows="顯示的行數">
文字內容
</textarea><textarea name="textarea" id="" cols="30" rows="10">
</textarea>下拉選單
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
</select><select></select>至少應包含一對<option></option>
在option中定義selected="selected"時,代表已經為選中項建立表格
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>表格的標題： caption
表單域 - 實現使用者資訊的收集和傳遞
form標籤被用於定義表單域<form action="url地址" method="提交方式" name="表單名稱">
各種表單控制元件
</form>action為在表單收集到資訊後,將資訊傳遞給伺服器進行處理,action屬性是指定接收並處理表單資料的伺服器的url地址.
method用於設定提交的方式,為get或post兩種
name為指定的名稱input控制元件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dome</title>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<caption><h4 style="color: pink; font-size:25px;"></h4></caption>
<tr height="60">
<td>地區</td>
<td><input type="text" value="北京" style="color: #ccc;" /></td>
</tr>
<tr height="60">
<td>使用者名稱</td>
<td><input type="text" value="dashu" /></td>
</tr>
<tr height="60">
<td>
<label for="da">密碼</label>
</td>
<td><input type="password" value="123" maxlength="6" id="da" /></td>
</tr>
<tr height="60">
<td>年齡</td>
<td>
<select name="" id="">
<option value="">選擇年份</option>
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
</select>
<select name="" id="">
<option value="">選擇月份</option>
<option value="">1月份</option>
<option value="">2月份</option>
<option value="">3月份</option>
<option value="">4月份</option>
<option value="">5月份</option>
</select>
</td>
</tr>
<tr height="60">
<td>年齡</td>
<td>
<select name="" id="">
<option value="">籍貫</option>
<option value="" selected="selected">北京</option>
<option value="">哈爾濱</option>
<option value="">青島</option>
<option value="">大連</option>
</select>
</td>
</tr>
<tr height="60">
<td>性別</td>
<td style="color: blue;">
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex" checked="checked" />
妖 <input type="radio" name="sex"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="註冊">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="image" src="btn.png" />
</td>
</tr>
<tr>
<td>上傳頭像</td>
<td>
<input type="file" >
</td>
</tr>
<tr>
<td>給我留言</td>
<td>
<textarea name="" id="" cols="50" rows="10" style="color: #ccc;">不支援富文字
</textarea>
</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<label> 使用者名稱：<input type="text"> </label>
<hr>
<label for="pwd">
123
</label>
使用者名稱：<input type="text">
密碼：<input type="password" id="pwd">
</body>
</html>表單域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<form action="" method="post">
使用者名稱: <input type="text" name="User" value="使用者名稱"> <br /> <br />
密 碼: <input type="password" name="psd"><br /> <br />
密 碼: <input type="password" name="psd2"><br /> <br />
性別： <input type="radio" name="sex">
<input type="submit" value="提交所填">
<input type="reset" value="重新填寫">
</form>
</body>
</html>樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<hr>
<p color="blue">文字</p>
</body>
</html>
html樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>css
- 內部樣式表
- 外部樣式表
- 內聯樣式
內部樣式表
<head>
<style type="text/css">
選擇器{屬性:屬性值;}
</style>
</head>行內式
<標籤名 style="屬性:屬性值;"> 內容 </標籤名>外部樣式表
<head>
<link href="" type="text/css" rel="stylesheet"/>
</head>css基礎選擇器
- 標籤選擇器
- 類選擇器
- 多類名選擇器
- id選擇器
- id選擇器和類選擇器的區別
6.萬用字元選擇器
標籤選擇器:
標籤名{屬性:屬性值;}
元素名{屬性:屬性值;}類選擇器:
.類名{屬性:屬性值;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.ide {
color: blue;
}
</style>
</head>
<body>
<div class="ide">我是類選擇器</div>
<div>我是類選擇器</div>
<div>我是類選擇器</div>
<div>我是類選擇器</div>
<div>我是類選擇器</div>
<div class="ide">我是類選擇器</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dome</title>
<style>
span {
font-size: 150px;
}
.g {
color: blue;
}
.o {
color: red;
}
.oo {
color: orange;
}
.l {
color: green;
}
</style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o">e</span>
<div class="nav"></div>
<div class="ban"></div>
</body>
</html>總結
id用#class用.
達叔小生：往後餘生，唯獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： 達叔小生
https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊