1. HTML標籤之表單標籤: <form>
概述: 就是將現實生活中的表單變爲"頁面形式"的表單.
記憶:
A: 表單標籤是<form>標籤, 寫在<form>標籤中的標籤是: 表單項.
B: 表單項必須放在<form>標籤中才能提交.
表單項分類:
輸入項: //輸入項都是<input>標籤, 根據輸入項的類型不同, 輸入項也不同.
//格式: <input type="輸入項的類型"/>
text: 文本框
password: 密碼框
radio: 單選框 //根據name屬性區分是否是同一組數據.
checkbox: 複選框 //根據name屬性區分是否是同一組數據.
file: 文件框(就是讓你選擇文件的路徑的)
submit: 提交按鈕
reset: 重置按鈕
image: 圖片按鈕
button: 普通按鈕, 沒有任何自帶的功能, 功能需要用戶自定義.
hidden: 隱藏域, 例如: 某些信息是指向給後臺(程序員)看, 不想提示給用戶, 就可以用該輸入項.
下拉列表: <select>#<option>
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
</select>
文本輸入域: <textarea>
屬性: rows:設置行數 cols:設置列數
2. 表單項的屬性:
name: 表單項的名稱(用於接收數據)
value: 表單項的值.
readonly:只讀
默認被選中:
單選框和複選框: checked
下拉列表: selected
3. 表單標籤的屬性:
action: 要提交數據到哪個頁面, 默認是提交到當前頁面.
路徑的劃分:
絕對路徑: 網站外部的頁面, 必須寫http://
相對路徑: 網站內部的頁面.
method: 提交方式
get: 提交方式不安全, 數據會顯示在地址欄中.
提交的數據有大小限制.
post: 提交方式相對安全, 數據封裝在"請求體".
提交的數據沒有大小限制.
4. CSS的簡介
概述: Cascading Style Sheets, 層疊樣式表.
作用:
用來美化頁面的.
//html相當於人的骨骼, css是給人化妝, js是讓人(局部)動起來.
分類:
行內樣式: //直接寫在元素(html的標籤)中的樣式.
內部樣式: //寫在<head>標籤的,<style>標籤中.
外部樣式: //寫在後綴名爲.css的文件中.
5. CSS的引入方式之: 行內樣式.
格式:
<div style="屬性名:屬性值; 屬性名:屬性值"></div>
作用: 只針對於當前元素有效.
6. CSS的引入方式之: 內部樣式.
格式: //寫在<head>標籤的,<style>標籤中.
選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
作用: 針對於當前頁面內的部分元素有效.
7. CSS的引入方式之: 外部樣式. <link rel="stylesheet" href="xx.css"/>
格式: //後綴名爲.css的文件中
選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
作用: 可以用來統一整個網站的風格.
8. CSS中的選擇器:
//記憶: 後邊我們學習JQuery的時候, 選擇器和現在講的這三種是一樣的, 早晚都得記憶, 要求現在記.
//後邊學JQuery的時候會輕鬆一點.
元素選擇器:
格式:
元素名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 針對於該類元素有效.
id選擇器:
格式:
#選擇器名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 給指定id(id名和選擇器名一樣的元素)設置樣式的.
//記憶: 每個標籤都有id屬性, id屬性儘量保證唯一.
類選擇器:
格式:
.選擇器名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 用來設置某類元素(class屬性的值爲 選擇器名的元素)的樣式的.
後代選擇器: //理解
(元素,id,類)選擇器 元素名{
//樣式
}
作用: 設置指定的元素內的 指定的"子標籤"的樣式的.
僞類選擇器: //理解
a:link{} //未選中連接
a:visited{} //已訪問的鏈接
a:hover{} //鼠標移動到鏈接上
a:active{} //選定的鏈接(還未鬆開)
作用: 主要用來操作超鏈接的.
9. CSS的樣式
背景:
background-color: 設置背景色
字體:
font-size: 設置字體大小
文本:
text-decoration:將其值設置爲:none,可以取消超鏈接字體的下劃線.
color: 設置字體的顏色
邊框:
border: 1px solid blue; //1像素, 藍色實線
//solid: 單實線, double:雙實線 dotted:(點)虛線 dashed:(-)虛線
width: 設置標籤的寬度
height: 設置標籤的高度
10. CSS的浮動
概述: 通常情況下頁面的佈局: 從上往下逐行分佈. 有些時候我們需要頁面中的佈局方式是從左往右, 或者從右往左之類的自定義頁面佈局, 就需要用到: 窗體浮動.
float: //設置浮動.
屬性值: left, right
clear: //清除浮動.
屬性值: both
11. CSS的盒子模型
概述: 也是用於佈局的. 正常的一個頁面可能有多個div, 每個div的裏邊可能有其他元素(元素和div之間的間距叫內邊距), div與div之間有可能也是有間隙的(外邊距).
外邊距: margin
內邊距: padding
margin: 值1 值2 值3 值4; //離上,右,下,左的間距分別是: 值1 值2 值3 值4;
margin: 值1(上下) 值2(左右); //離上,右,下,左的間距分別是: 值1 值2 值1 值2;
margin: 值1; //離上,右,下,左的間距分別是: 值1 值1 值1 值1;
如果說不足以滿足四個邊距的值, 參考: 上,左.
HTML中_之CSS
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章