Day2:html和css

達叔小生發表於2018-12-23
HTMLCSS

標題圖

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 />
		密&emsp;碼: <input type="password" name="psd"><br /> <br />
		密&emsp;碼: <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

  1. 內部樣式表
  2. 外部樣式表
  3. 內聯樣式

內部樣式表

<head>
 <style type="text/css">
  選擇器{屬性:屬性值;}
 </style>
</head>
複製程式碼
行內式
<標籤名 style="屬性:屬性值;"> 內容 </標籤名>
複製程式碼

外部樣式表

<head>
 <link href="" type="text/css" rel="stylesheet"/>
</head>
複製程式碼

css基礎選擇器

  1. 標籤選擇器
  2. 類選擇器
  3. 多類名選擇器
  4. id選擇器
  5. 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>
複製程式碼

總結

  1. id用#
  2. class用.

達叔小生：往後餘生，唯獨有你 You and me, we are family ! 90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通 簡書部落格： 達叔小生 www.jianshu.com/u/c785ece60…

結語

  • 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
  • 小禮物走一走 or 點贊

相關文章