HTML&CSS
現在開始進行WEB應用程式開發的課程。
第一個階段：前端開發技術（HTML，CSS，JAVASCRIPT）
HTML：一種超文字標記語言。一個頁面上有哪些內容。
CSS：一種樣式表。頁面上內容的外觀。
JAVASCRIPT：JS。一種指令碼語言。控制HTML頁面元素。
Jquery：一種框架。對js封裝。
JSON：現在很火。大資料。一個數據的表示格式。
第二個階段：伺服器端開發技術（JSP&Servlet）
Jquery：與ajax一起使用。
JSON：
什麼是HTML?
HTML是一種標記語言。
HTML是超文字標記語言。
超文字：超連結都是文字。做為超連結的文字就叫超文字。
標記：？？？
HTML是一種解釋型的語言。
使用HTML語言編寫的原始檔字尾。html或。htm。中文稱HTML頁面叫網頁。
一個網頁在哪裡執行？在IE（泛指瀏覽器）上執行。
HTML網頁是一個是文字檔案。
使用任意一個文字編輯軟體都可以編寫HTML頁面。
什麼叫標記？
標記也叫標籤。
<標記>。。。標記體。。。 標記的標準格式：雙標記格式。
標記也有單標記格式 <標記> 為了符合規範：<標記/>
標記都有屬性：
<標記 屬性名=“值” 屬性名=“值”>
有些屬性不需要賦值。
<標記 屬性名=“值” 屬性名>
一個HTML頁面的結構？
一個HTML頁面根標記叫
在標記中有二個標記：頭和體
頭
：關於網頁屬性的設定體
：關於網頁內容的設定網頁屬性的設定網頁內容的設定HEAD中子標記
title標題標記
作用設定當前頁面的標題
Meta元資料標記
用來設定當前頁面的屬性。
http-equiv屬性：取值是當前頁面的屬性。
content屬性：為http-equiv指定的頁面屬性賦值。
Content-Type ： 是當前頁面的一個屬性，表示當前頁面的型別。
text/html； charset=gb2312 ： 當前頁面型別的值，text/html表示是一個html頁面
refresh ： 自動重新整理
2；URL=demo1。html ： 2表示2秒。URL表示重新整理的的導航路徑
body標記
body是頁面內容的標記。
當前頁面的內容都在body標記裡。
常用屬性：
1 bgcolor ： 當前頁面的背景顏色
2 text ： 當前頁面的文字顏色
通用的顏色
計算機中只有三原色：RGB 紅綠藍
bgcolor = “#FF00FF” #紅綠藍 每一個種顏色都是二位的16進製表示方式
每一種顏色還有一個名稱。
bgcolor = “red” ；
p 段落標記
是可以是一個單標記也可以是一個雙標記。
這是段落的內容
這是另一個段落
這是再一個段落
在使用
單標記時，下一個
做為前一個自動的結束。
pre 格式預定義標記
在html語言中，在原始檔中進行回車操作不影響頁面的顯示。
就想讓我們在原始檔中編寫的格式在頁面上保持不變。
br 換行標記
這是段落的內容
這是
另一個
段落
div ，span 層標記
div塊級層，基本上所有標記都可以在div中使用。
在後面配置css一起做頁面佈局時再詳細說明。
span行級層，只能在這個層使用一些簡單的標記。
為了在一行的文字中突出某個漢字 。
今天是七夕情人節，所有禮品
5
折。
hr 水平線標記
寬和高的值
width =“值”
1 100px px畫素，是一個單位。
2 60% 百分比的方式。
對齊方式屬性
align = “水平對齊方式”
1 left 左
2 center 居中
3 right 右
center 居中對齊標記
文字以居中對齊方式顯示。
加粗和斜體 標記
<
br
>
<
strong
>
這是一個加粗
strong
>
<
br
>
<
em
>
這是一個斜體
em
>
<
br
>
<
b
>
這是一個加粗
b
>
<
br
>
<
i
>
這是一個斜體
i
>
h1-h6 標題標記
標題
最大標題
最小
列表標記
在HTML中列表分為二種：無序列表和有序列表
在HTML中列表的標記有三個。
但ul和ol都只是一個容器標記。
列表項標記在列表中每一個列表要使用一個li標記
建立一個無序列表
<
ul
>
<
li
>
宋林林
li
>
<
li
>
譚萌萌
li
>
<
li
>
李靜靜
li
>
ul
>
建立一個有序列表
<
ol
>
<
li
>
宋林林
li
>
<
li
>
譚萌萌
li
>
<
li
>
李靜靜
li
>
ol
>
列表的屬性
ul type=“指定無序列表的符號”
ol type=“1|a|A|i|I”
li value=“值” 表示當前列表項的在序列中的位置。
<
ol
type
=
“i”
>
<
li
value
=
“3”
>
宋林林
li
>
<
li
>
譚萌萌
li
>
<
li
>
李靜靜
li
>
ol
>
dl 定義列表
dl 是一個容器標記，表示了一個列表
dt 是一個名詞標記。
dd 是一個解釋標記。
<
dl
>
<
dt
>
html：
<
dd
>
超文字標記語言
dd
>
dt
>
<
dt
>
css：
<
dd
>
層疊樣式表
dd
>
dt
>
dl
>
特殊字元
在HTML頁面中文字直接顯示。
html = 標記 + 文字。
<標記> 在文字中使用<符號。
在HTML頁面中為一些特殊的符號設定一個替代符。
< <；
> >；
空格 ；
上標和下標標記
下標 h2o
上標32
img 圖片標記
src屬性：指明顯示的圖片的URL。
width屬性：寬，可以是px畫素，也可以是%。
height屬性：高
alt屬性：提示資訊，當圖片載入失敗時顯示的資訊。
超連結a
格式：
作用：
進行頁面之間的跳轉。
屬性：
1 href=“URL地址” ： 表示當前超連結跳轉的路徑。
超連結錨記
1 先要使用a標記建立一個錨記位置。
2 使用a標記跳轉到錨記的位置
如果當前跳轉的錨記是本頁面的，則在href=“#錨記名稱”
如果當前跳車的錨記不是本頁面時，則在href=“頁面名#錨記名稱”
在a1。html頁面定義錨記
<
p
><
a
name
=
“img1”
>
a
>
圖1
p
>
<
p
><
img
src
=
“webface1。jpg”
width
=
“766”
height
=
“660”
>
p
>
在a1。html頁面跳轉到錨記位置
<
p
>
<
a
href
=
“#img1”
>
圖1
a
>
； ；
<
a
href
=
“#img2”
>
圖2
a
>
； ；
<
a
href
=
“#img3”
>
圖3
a
>
； ；
p
>
在a2。html頁面跳轉到錨記位置
這是一個叫a2。htm頁面。
<
p
>
<
a
href
=
“a1。htm#img1”
>
圖1
a
>
； ；
<
a
href
=
“a1。htm#img2”
>
圖2
a
>
； ；
<
a
href
=
“a1。htm#img3”
>
圖3
a
>
； ；
p
>
超連結的目標位置
超連結a的target屬性：超連結開啟的位置
1 _blank 在一個新的頁面中開啟
2 _self 在當前頁面中開啟
表格table標記
在html中一個表格由多行組成 。一個行由多個單元格組成。
單元格就是一個儲存資料的容器。
tabel中常用的標記
| 單元格，儲存資料。 | 列標題 |
|---|
| 的跨行和跨列屬性。 | 跨2行，當前行的下一行少一個單元格。 | 跨2列， 當前行少一個單元格。 < table width = “60%” border = “0px” cellpadding = “3” cellspacing = “1” bgcolor = “#FF0000” > < caption > 商品資訊表 caption > < thead > < tr bgcolor = “#FFFFFF” > < th > 編號 th >< th > 商品名稱 th >< th > 價格 th >< th > 數量 th >< th > 小計 th > tr > thead > < tbody > < tr bgcolor = “#FFFFFF” > < td > 1 td >< td > 商品1 td >< td > 100 td >< td > 1 td >< td > 100 td > tr > < tr bgcolor = “#FFFFFF” > < td > 2 td >< td > 商品2 td >< td > 200 td >< td > 2 td >< td > 400 td > tr > < tr bgcolor = “#FFFFFF” > < td > 3 td >< td > 商品3 td >< td > 400 td >< td > 10 td >< td > 4000 td > tr > tbody > < tfoot > < tr bgcolor = “#FFFFFF” > < td colspan = “4” align = “right” > 總計： td > < td > 4500 td > tr > tfoot > table >
表單form 表單的作用是什麼 在客戶端進行資料採集，並提交到伺服器。 註冊，登入，使用者在表單中填寫自己的資訊，傳送到伺服器處理。 form標記 form是一個表單標記，是一個容器標記。 在一個表單中有很多的表單元素。 表單元素標記 action 屬性 提交的路徑。表示一個表單將資料提交到哪個位置。 表單提交的動作是由單擊提交按鈕觸發的。 method屬性 提交方式： 1 get 預設 將提交的資料在URL位址列中帶過去 doform。htm？name=peter 2 post 一般都使用post 將資料打包帶過去
表單元素標記 input 標記表示是一個表單的元素。但是表單元素有很多種型別。 type屬性 input標記使用type屬性來決定當前的表單元素是哪一種型別。 type屬性的值是固定。 name和value屬性 一個表單是要將表單元素的資料提交到伺服器上。資料格式是以map（key=value）格式為基礎。 一個表單元素的name屬性的值，是在提交時的關鍵字（key）。 一個表單元素的value屬性的值，是在提交時的值（value）。 文字框 input type="text" 文字框是input標記type屬性的預設值。 size ： 表示是文字框的大小， maxlength ： 文字框中可以輸入的最大字元數量 readonly ： 只讀。只要文件框設定了readonly屬性就是隻讀。 密碼框 input type="password" 單選按鈕 input type="radio" 多個單選按鈕可以組成一個單選按鈕組，在一個單選按鈕組中只有一個可以被選中 name屬性值相同的是一個單選按鈕組。 表單提交時只提交被選中的單選按鈕的value屬性。 男 checked 表示當前單選按鈕的狀態。 複選按鈕 input type="checkbox" 複選按鈕是一個可以同時選擇多個的按鈕組。 複選按鈕怎麼分組？name屬性值相同的為一組。 複選按鈕在提交時是一個name可以提交多個值value的表單元素。 checked 表示當前單選按鈕的狀態。 隱藏域 input type="hidden" 隱藏域，是一個在表單中使用者不可見的表單元素。但是在表單提交時可以將資料提交到伺服器。 檔案域 input type="file" 這個要小心 檔案域一般是在有檔案上傳時使用的。 當使用檔案域時，表單 < form action = “doform。htm” method = “post” enctype = “multipart/form-data” > < input type = “file” name = “” value = “” > form > enctype=“multipart/form-data” 在使用file表單元素時必須設定的form標記的屬性 三個按鈕 1 input type=“submit” 提交按鈕 單擊時表單提交。 2 input type=“reset” 重置按鈕 單擊時表單還原到初始狀態。 3 input type=“button” 普通按鈕 功能要由使用者透過js指令碼來指定。 多行文字域 textarea 對於textarea這個標記它的value屬性是寫在標記體的位置的。 rows：多行文字域，有幾行 cols：有幾列 下拉列表框 select 下拉列表框也是表單中常用的表單元素 select標記是一個容器標記。 在下拉列表框中增加內容要使用 下拉列表項標記 下拉列表框這個表單元素。name屬性和value屬性分別在不同的標記中。 下拉列表在提交時提交當前選中的 可以在多個option中設定一個為當前預設選中項： 使用表格格式化表單 表格 |
