基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div id="box">
<span class="red-text">你好我試試史蒂夫</span>
</div>
</body>
</html>
頁面基本交互標籤
- label標籤
-
- 如果你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）。
- 語法： <label for="控件id名稱">
- 注意：標籤的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。
- 輸入框
-
- name：爲文本框命名，以備後臺程序使用。
- value：爲文本輸入框設置默認值。(一般起到提示作用該值需要用戶手動清除)
- placeholder：爲文本輸入框設置默認值。(一般起到提示作用該值在用戶輸入時自動消失)
- 對錶單內部信息進行分組
<fieldset>
<legend>分組標題</legend>
<label>看書:</label>
<input type="checkbox" value="值" name="名稱2" "/>
</fieldset>
- form表單<form method="傳送方式" action="服務器文件">
-
- 表單可以接收用戶的輸入並提交給服務端、或者發起http請求 form[action=提交地址][methood=請求方法][enctype=multipart/form-date]
- action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
- method ： 數據傳送的方式（get/post）。
- 對radio/checkbox多個選項公用一個key,要求name相同
- input[type=password、tel、 email、 number
- input[type=submit、button、reset
- input[type=file、img
- input[type= radio、checkbox
<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密碼:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="確定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
text、password、radio、checkbox、select、select[multiple]、textarea input[type=submit|file|button|reset|image]
- 文本域 <textarea rows="行數" cols="列數">文本</textarea>
-
- cols ：多行輸入域的列數。
- rows ：多行輸入域的行數。
- 在<textarea></textarea>標籤之間可以輸入默認值。
舉例：
<form method="post" action="save.php">
<label>聯繫我們</label>
<textarea cols="50" rows="10" ></textarea>
</form>
- 使用單選框、複選框，讓用戶選擇
-
- 單選框中的選項用戶只能選擇一項（name的值要一樣才實現單選），請看下面的例子:
<form action="save.php" method="post" >
<label>愛好:</label>
<label>看書<input type="radio" value="看書 " name="愛好 "/> </label>
<label>旅遊<input type="radio" value="旅遊 " name="愛好 "/> </label>
<label>運動<input type="radio" value="運動 " name="愛好"/> </label>
</form>
-
- 而複選框中用戶可以任意選擇多項，甚至全選。（name的值要不一樣才實現多選）
-
-
- type: 當 type="radio" 時，控件爲單選框 當 type="checkbox" 時，控件爲複選框
- value：提交數據到服務器的值（後臺程序PHP使用）
- name：爲控件命名，以備後臺程序 ASP、PHP 使用
- checked：當設置 checked="checked" 時，該選項被默認選中
-
<form action="save.php" method="post" >
<label>愛好:</label>
<label>看書<input type="checkbox" value="看書 " name="愛好"/> </label>
<label>旅遊<input type="checkbox" value="旅遊 " name="愛好"/> </label>
<label>運動<input type="checkbox" value="運動 " name="愛好"/> </label>
</form>
- 使用下拉列表框，節省空間（單選)
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅遊" selected=“selected”> 旅遊 </option>
<option value="運動">運動 </option>
<option value="購物">購物 </option>
</select>
</form>
多選狀態只需要這樣
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple>
<option value="看書">看書</option>
<option value="旅遊" selected=“selected”> 旅遊 </option>
<option value="運動">運動 </option>
<option value="購物">購物 </option>
</select>
</form>
- 使用提交、重置按鈕，提交/重置表單中的數據
-
- <input type="submit" value="提交">
- <input type="reset" value="重置">
- type：只有當type值設置爲submit時，按鈕纔有提交作用
- value：按鈕上顯示的文字
- 網頁嵌入標籤<ifream>
在頁面中加載一個子頁面，指定加載的頁面，給ifream的name屬性賦值比如pagebox，然後在<a>的 target="pagebox"就行了
樣式表
- 導入樣式表文件（外聯樣式表）：
<link rel="staylsheet" href="樣式表的位置"> link標籤通常放置於head標籤中，否則頁面太大時可能會發生閃爍現象
- 書寫樣式表的語法
選擇器{
樣式字段：值；//全英文
}
- 標籤篩選器 格式：標籤名{ 屬性：值；}
html{
/*撐起頁面*/
height: 100%;
}
body{
/*去掉默認的邊距*/
margin: 0;
height: 100%;
}
- id篩選器 格式 #id { 屬性：值；}
#header ul{
/*清除原有邊框*/
margin: 0;
padding: 0;
/*清除列表樣式*/
list-style: none;
}
- 類篩選器 .classname{}
<div class="classname">控制這裏</div>
<div class="classname">和控制這裏</div>
<div class="classname">以及控制這裏</div>
- 控制標籤元素的顯示、隱藏、半透明
-
- 會讓出空間 display屬性值：none不顯示 block 塊 inline 行內 inline-block 行內塊;
- 不會讓出空間 visibility屬性值：visible hidden
- 透明度設置 opacity：0~1
- 超鏈接的樣式注意順序不可變
-
- :link 觸發
- :visited 訪問後
- :hover 鼠標移上去
- :active 鼠標按下
CSS佈局
- 流式佈局的侷限
-
- 適合圖文混排的頁面
- 自動佈局
- 要想調整大小和位置只能通過盒模型進行有限的調整 width、height、margin、padding、border
- 佈局的發展
-
- 流式佈局
- 浮動 float
-
- 清除浮動對旁邊標籤的影響 clear
- 定位 position
-
- relative （相對於當前位置，用於微調）
- fix固定
- z-index 三維座標的z軸位置
- absolute 絕對定位 ：參照物的確定是沿着標籤找能夠定位的標籤，找不到就以body爲參照物，比如把一個圖標放到div 的中間
h6{
position: absolute;
top: 200px;
left: 300px;
}
-
- 默認定位position：static；（流式佈局）
- 彈性（移動互聯網時代產生的一種佈局方式）
