JS筆記02
回顧:
html: 超文本標記語言
後綴名: *.html 或 *.htm
標簽分類:
圍堵標簽: 雙標簽
<html>標簽體</html>
空標簽: 單標簽
<br/>
標簽上的屬性:
<xxx 屬性名="值" 屬性名="值"></xxx>
html結構:
html:
head:
title
meta
link
style
body:
常見的標簽:
<a href="跳向指定的路徑" target="_blank" >標簽體</a>
<img src="路徑" alt="提示信息" title="鼠標移上時的提示信息" />
相對路徑:
./
../
絕對路徑:
盤符
www.itcast.cn
table:
tr
td | th
thead , tbody , tfoot
table:
thead:
th
tbody:
td...
tfoot:
td
h1-h6
font
b i strong
p br hr
ul 無序
ol 有序
li
frameset:
屬性:
cols:
rows:
子標簽:
frame:
屬性:
src:
name
///////////////////////////////
html:
表單
css:
///////////////////////////////
案例-完成註冊頁面
需求分析:
有一個頁面,頁面上有很多圖片和文字,且格式不一(表單).
技術分析:
html:
表單:form ★★★
div + css
步驟分析:
創建一個頁面,添加5個div
1.嵌套3個div,讓div在一行顯示
2.給div添加背景顏色,添加超鏈接
3.添加背景圖片,嵌套一個div
添加一個表單
4.一張圖片
5.兩個p標簽
//////////////////////
day02html&css
- form★★★
"表單
格式:<form></form>"
- 作用
- 用來收集用戶的數據,將數據提交到指定的服務器
- 常用子標簽:
- input :輸入框
- 常用屬性type
- text 默認
"文本輸入框"
- password
"密碼輸入框"
- radio
"單選框"
- checkbox
"復選框"
- button
"普通按鈕"
- submit
"提交按鈕"
- reset
"重置按鈕"
- image:必須和src屬性連用
"圖片提交"
- file
"文件輸入框"
- hidden
"隱藏"
- select <select></select>
"下拉選,需要和option子標簽連用"
- 子標簽
- <option></option>
"value需要定義在option上"
- 常用屬性
- mutiple
"設置可以多選"
- size
"展示多個"
- textarea <textarea></textarea>
"文本域"
- 常用屬性
- rows
"設置行"
- cols
"設置列"
- 通用屬性:
- name
- 將若幹個單選框或復選框設置為一組
- 若用戶輸入的值要想提交到服務器,必須有name屬性★★★
- value
- 給按鈕起名字
- 設置提交到服務器的值
- disabled:(擴展-了解)
"設置標簽不可用"
- readonly:(了解)
"設置文本框為只讀"
- 給表單中的標簽設置默認值
- text password
- 通過value屬性設置默認值
- radio checkbox
- 通過checked屬性設置默認值
- select
- 通過selected設置默認值
- textarea
- 直接在文本域中編寫內容即可設置默認值
- 常用屬性:
- action
"設置表單的提交路徑"
- method★
"設置提交方式"
- get:(默認)
"提交內容在地址欄中顯示,不安全,傳輸數據大小有限,
get提交方式:
要提交的數據直接拼在提交路徑的後面格式如下:
url?name=值&name=值"
- post
"提交內容不在地址欄中顯示,相對安全,傳輸數據大小不受限制"
- div+css(渲染)
- css概述和語法
- css概述(層疊樣式表)
"層疊:給同一個標簽添加不同的屬性,最後所有的屬性都作用於這個標簽
樣式表:給html的標簽添加指定的效果"
- css語法格式
"選擇器{css屬性:屬性值; css屬性:屬性值}"
- 作用:
"渲染頁面"
- 入門案例
- css和html整合
- 行內樣式:
" 通過標簽的style屬性
例如:<xxx style="css屬性:‘屬性值‘;css屬性:‘屬性值‘""
- 內部樣式:
" 通過head的子標簽style標簽實現"
- 外部樣式
" 編寫外部的css文件,通過head的子標簽link的href屬性引入"
- div標簽
- 單獨占一行(行級)
- 註意:
"行內樣式 > 內部樣式 和 外部樣式(誰離標簽近標簽聽誰的)"
- 選擇器
- id選擇器(★)
"選中一個標簽,id唯一,在一個html頁面中不能出現兩個相同id
格式:
html中:給標簽添加id屬性 <xxx id="a"></xxx>
css中:通過#id的值選中這個標簽 #a{.....} "
- class選擇器(★)
"給一類標簽設置相同的樣式
選中一類標簽
格式:
html中:給html的標簽添加class屬性 <xxx class="cla"></xxx>
css中:通過.class的名稱選中這類標簽 .cla{}"
- 標簽選擇器(★)
"選擇一種標簽
格式:html中不需要做任何操作
css中:直接通過標簽名選中即可 a{}"
- 屬性選擇器(知道會用)
"選中屬性為...的標簽
格式:
html中:給標簽添加屬性 <xxx zz="zz"></xxx>
css中:通過屬性選中標簽 [zz="zz"]{...}"
- 派生選擇器(知道會用)
- 多個選擇器
"通過不同的選擇器選中標簽,給這些標簽添加相同的樣式,多個選擇器之間使用逗號分割
格式:選擇器1,選擇器2{}"
- 後代選擇器(層級選擇器)
"更近一層的選擇,選擇器之間使用空格分割
格式:選擇器1 選擇器2{}"
- 偽類選擇器(了解)
" 錨偽類:
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */"
- 選擇器優先級
- 越特殊優先級越高
- id > 類 > 標簽
- css的樣式
- 字體
"設置字體的大小,風格,系列"
- font-size:字體大小
- font-style:字體風格
- italic:斜體
- font-family:字體系列
- 文本
"設置文本的顏色,對其方式,超鏈接是否有下劃線"
- color:文本的顏色
- text-align:對齊方式
- text-decoration:向文本添加修飾
- none:沒有任何修飾
- line-through: 貫穿線
- overline:上劃線
- 背景
"設置背景顏色,背景圖片"
-
- background-repeat:設置背景圖像是否及如何重復
- repeat-x 橫向重復
- repeat-y 縱向重復
- no-repeat 不重復
- 邊框
"給標簽設置邊框"
- width:寬
- height:高
- border: 大小 邊框樣式 顏色
"設置邊框大小,樣式,顏色"
- 高級
- 浮動
- float:浮動
- 值:left right
- 清除浮動
- clear:清除浮動
- 值:left rigth both(清除所有浮動)
- 顯示類型
"定義元素顯示的類型"
- display
- 屬性值:
- none:不顯示(隱藏)
- inline:在一行(可以將塊級標簽轉化為行內)
- block:塊(單獨占一行)
- 框模型
- 內邊距
"邊框和內容之間的距離"
- padding:(順時針 上右下左)
"padding:20px; 上下左右
padding:20px 30px;上下 左右
padding:20px 30px 40px;"
- 外邊距
"邊框和相鄰邊框的距離"
- margin:(順時針 上右下左)
JS筆記02