Html相关知识点
web 基礎的課程
html
css
javascript--js
后續
服務器端技術
jquery.ajax
靜態頁面(客戶端技術)
html:頁面的內容用適當的元素顯示
CSS:設置頁面元素的外觀/樣式
Js:頁面元素添加動態的顯示效果
開發環境:記事本,文本編輯器
運行環境: 瀏覽器
動態頁面,服務器端技術:提交
JSP
PHP
ASP.NET
html課程
1/什么是html
hypertext markup language超(超級鏈接)文本標記語言,編寫網頁,后綴為.html/.htm的文件,用瀏覽器解釋運行
???解釋:如果錯誤,試圖解釋,帶來不可預料的結果
注意拼寫正確
2 html的基礎語法:用一對尖括號表示頁面內容
元素:<標記名稱>
有些是成對出現
有些是單標記
最早版本:有些標記可以沒有結束<br>
最新版本:要求必須有結束<br/>
屬性:<標記名稱 屬性名稱="值">
注釋:<!--注釋-->
?
<a href="a.html">click me</a>
<p1>xian</p1>
<table></table>
?
3 構建一個html 文件
保證頁面都能正常顯示,書寫標準規范的代碼
標準格式(掌握):
版本信息(了解)
<html>
<head>
包含整個文檔相關
</head>
<body>
顯示的內容
</body>
</html>
?
4 head中:整個文檔的定義
title:文檔的標題
meta:元數據--單標記
定期刷新:例如留言論壇
<meta http-equiv="refresh" content="5">--舊
<meta http-equiv="" content="" />--新
文檔的編碼定義
<meta http-equiv="content-type" content="text/html;charset=utf-8">
link:引入外部資源,如樣式等
style:定義樣式
script:定義腳本代碼
5 body:顯示的頁面的主體內容
文本標記
圖像和超級鏈接
表格
表單
列表
框架
?
6 關于瀏覽器:IE/Firefox/Chrome/Safari
?
7 文本標記:文本默認顯示
各級標題:<h1>-<h6>
段落:<p>段落文本</p>---行間距較大
換行:<br>--單標記,回車
練習2:實驗文本標記的使用,區別
分區/組元素:div/span
span:同一行元素中的分組,不影響其他元素的布局
div:多行元素的分組,分組后,前后換行
練習3:實驗span和div的使用,區別
aaa<span>aaaa</span>aaaaaaa
bbb<div>bbbb</div>bbbbbbb
?
<div>
<p>段落1</p>
<p>段落2</p>
</div>
<p>段落3</p>
?
8.超級鏈接a:點擊的文本/去往的url
href屬性用于指定路徑:相對/絕對
<a href="http://www.tarena.com.cn">click me</a>
<a href="images/other.html">click me</a>
target屬性:指定新頁面打開的方式
_self
_blank
<a href="http://bbs.baidu.com.cn" target="_blank">click me</a>
?
name屬性:定義錨點--頁面的不同的部分之間的跳轉
1.使用a元素帶有name屬性定義一個錨點---目標位置
2.使用a元素帶有href屬性定義點擊完去往某個位置---#錨點的名稱
<!--使用a元素定義錨點-->
<a name="Top"></a>
<a href="#Top">To Top</a>
練習4:實驗超級鏈接和錨點的使用
9.圖像
添加一個圖像:img元素--單標記
<img src="" width="" height="">
?
為整幅圖像添加鏈接
<a><img></a>
為一個圖像添加多個鏈接
<map name="MyMap">
<area shape="rect" coords="x1,y1,x2,y2" href="">--單標記
<area shape="circle" coords="x,y,r" href="">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,....">
</map>
?
<img src="cat.jpg" width="200" height="200" usemap="#MyMap">
練習5:一副圖像多個鏈接
?
?
?
10.表格
最初的目的用于顯示結構化的數據(網格),后期用于實現頁面的布局
基本結構:table/tr/td
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
常用屬性:
?table元素
:border/width/height/cellpadding(內邊距)/cellspacing(邊框之間的距離)
?
td元素
:width/height/align(left/right/center)/valign(top/middle/bottom)
?
表格的完整結構
caption:為表格定義標題,出現在table標記里,作為第一個子元素存在
行分組:thead/tbody/tfoot
?
練習6:定義一個2X2的表格,實驗常用屬性
?
不規則表格:td的屬性
rowspan
colspan
?
練習7:定義兩個不規則的表格
?
表格的嵌套
table元素只能嵌套在td里
屬性
練習8:表格的嵌套
?
11 表單:收集用戶錄入(選擇)的數據,提交給服務器
form元素:承載頁面的控件,以表單為單位,將當前表單中的數據提交給服務器
常用屬性:action method
<form action="login.jsp" method="post">
</form>
???form中可以包含控件:
input元素:單標記,根據type屬性的不同取值定義不同類型的輸入框
type屬性的取值:
text:文本框
password:密碼框
checkbox:多選/核選框
radio:單選框
按鈕相關
submit:提交型
reset:重置,恢復到初始值
button:普通按鈕,依靠onclick
另外兩種
file:文件
hidden:隱藏域,常用于記載那些不需要被用戶看見卻需要提交的關鍵信息
name屬性
對于checkbox和radio而言,用于實現分組
value 屬性
對于文本框和密碼框:設置初始文本
對于單選和多選框:設置關鍵數據,往往是id的數據
對于按鈕類型:定義按鈕上的文本
?
checked屬性:針對于單選和多選框
?
非input元素
textarea元素:多行文本框
rows/cols屬性
select元素:下拉框/列表框
size屬性:默認為1,下拉框;設置為其他值,列表框
包含option元素:代表每一個選項
fieldset:輸入域分組,結合legend元素定義組標題
legend:出現在fieldset里,作為第一個子元素
?
12 列表
有序列表:ol
無序列表:ul
列表項:li
王 wangcm@tarena.com.cn
13 框架
iframe:浮動框架,在一個html頁面上引入(嵌入)另一個html頁面,常用于實現廣告頁面的效果
<iframe src=""></iframe>
?
14 課后練習
tts的練習
不規則表格的練習
CSS的課程
1/什么是CSS
使用統一的方式定義頁面的外觀,實現頁面數據和顯示的分離
?
2/解決的問題:
各個元素關于樣式定義的屬性不統一
沒有實現數據和表現的分離,可維護度差
?
3/定義CSS
CSS的基本語法:將多對樣式的聲明(樣式名稱:值)用分號隔開
font-size:20pt;color:red;--統一定義的問題
選擇器{樣式聲明}--分離
?
4/使用css的方式:
內聯方式:將css的樣式定義寫在元素的style屬性中,沒有實現分離,難以重用和維護
內部樣式表:將css的樣式定義寫在 head 元素中的 style 元素中,樣式定義必須有選擇器---分離不夠徹底,只能當前頁面重用
外部樣式表:將樣式定義在單獨的 .css 的文件里,使用它時,頁面的head里使用link元素(href/type/rel)引入
?
5/三種方式的優先級----就近原則
可以共用,建議使用外部樣式表
內聯>內部/外部(取決于位置)
位置:相同的級別下,重復定義,以最后一次定義的優先
?
練習1:創建一個html頁面,實驗內聯方式/內部樣式表/外部樣式表,控制頁面的外觀
?
?
6/選擇器
元素選擇器:以html中元素的名稱作為選擇器,如h1 {color:red;}
使用方便,對于同一種元素實現定義;不能解決跨元素的統一定義,不能解決同一種元素里的細分
類選擇器:
定義 ?.className{}
使用 <元素 class="className"
?
分類選擇器:同一種元素里的細分
定義 元素名.className{}
使用 <元素名 class="className"
?
元素id選擇器:專屬于某個元素使用
定義 #名稱 {}
使用 <元素 id="名稱"
?
派生選擇器:根據元素的層次位置定義樣式,常用于對于一堆相同的元素實現統一定義
定義 ??選擇器1 選擇器2 選擇器3{}
使用 ?
?
群組選擇器:為多個選擇器定義相同的外觀部分
定義 ??選擇器1,選擇器2,選擇器3{}
使用
a,h1,input.textbox,#pageTitle {}
?
偽類:根據不同的狀態定義不同的外觀,常用于實現超級鏈接的效果,hover狀態除外,所有元素都可用
a:link---沒有點擊過的
a:active--激活,按下
a:hover--鼠標懸停
a:visited--訪問過的
?
?
練習2:創建一個html頁面,外部樣式表文件,使用類選擇器
<input type="text">
<input type="button">
?
input {}
7/各種樣式屬性--聲明樣式
尺寸的單位:pt(磅)/px(像素) ?cm mm in %
顏色的單位:單詞 #FFFFFF ?#FFF
尺寸的樣式:width height
?
8/邊框的屬性:
簡寫方式:寬度 線型 顏色
border:1px solid red;---4個
border-top:1px dashed blue
border-bottom
border-right
border-left
單一定義
border-width:1px;
border-style:solid;
border-color:red;
border-top-width:2px;
?
9/display屬性:設置元素的顯示方式,常和js一起,修改元素是否顯示
none:元素不可見,且不占用頁面的位置--常用于設計那些頁面剛初始化時不可見的元素
inline
block
?
行內元素:可以和其他元素位于同一行,如span/input/a;高度和寬度設置無效
塊級元素:獨占一行,如div/p/table/h1
?
10/position 屬性:默認用流模式顯示頁面,使用該屬性改變布局的方式(多層)
static
absolute:絕對定位,相對于父元素
relative:相對定位,相對于原有的位置
?
11/偏移屬性:設置元素左上角的坐標位置
left:50px;
top:20px;
bottom:
right:
?
12/堆疊順序:層的順序
z-index:
?
13/文本屬性:定義文本的字體相關的樣式
color
font-size
font-weight:normal/bold;
font-style:italic;
?
14/背景屬性
background-color:red;
background-image:url(a.jpg);
background-repeat:repeat/no-repeat/repeat-x/repeat-y;
background-position:left top;--背景圖像的偏移,小背景圖像的居中;截取背景圖像中的一部分
background-attachment:scroll(默認設置)/fixed(水印);---背景圖像的付著方式,常用于實現類似于水印的效果
?
15 邊距屬性
box模型
padding:內邊距
padding:10px;---4個方向,left和top優先(小);撐開(大)
padding-top/left/right/bottom:10px;
margin:外邊距,定義相同
?
16 浮動屬性:脫離原有的流模式的布局,左邊框向左浮動,直到遇到一個邊框停靠---將多個塊級元素位于同一行
float:left/right;
clear:left/right/both;--清除周圍浮動元素的影響,因為某個元素設置了浮動屬性后,可能會對后續的元素帶來影響
?
17 列表的樣式
list-style-type:none;
list-style-image:;
day03
html構建頁面的結構
CSS 美化頁面
js 添加動態的效果
jsp 服務器端的交互
?
web--瀏覽器--netscape---javascript
Microsoft---JScript
JS
?
1/什么是 JavaScript:一種基于對象和事件驅動的腳本語言,由瀏覽器軟件解釋運行,常用于為頁面添加一些客戶端的動態效果,嵌入到網頁
?
2/語言的特征
內置好了大量對象,數據的簡單封裝
?
3/哪些現象用js實現
驗證數據錄入的格式
動態效果
瀏覽器的交互
?
4/包含的內容
基礎語法和常用內置對象
DOM
BOM--browser object model
實現數據的封裝
5/如何書寫腳本代碼
直接定義:οnclick="alert();"
script代碼塊:
<head>
<script>
在元素的事件中調用
js文件
<input type="button" value="第二個按鈕" οnclick="SecondMethod();">
6/基礎語法--大小寫敏感
標識符:字母/數字/下劃線/$符號組成,不能以數字開頭
語句:以分號結束
注釋:// /**/
變量: ????var s1 = "mary";
var n1 = 123;
運算符:>> << ++ -- ??:
== 數值,內容
===嚴格相等 ?內容和類型
控制語句
if/else ?switch/case
for ??while
錯誤控制臺
?
7 數據類型
js是一種松散類型的語言:底層的數據存儲格式一樣的,代碼編寫過程,關心數據類型
內置數據類型
String/Number/Boolean/null/undefined
復雜數據類型
Object(Array/Math/Date/Regex..)
?
8/ 內置數據類型
聲明變量的時候,不能確認數據類型;以賦值為準
string:文本字符串
number:數值,不區分整數和小數
bool:true/false----1/0
?
9/ 數據類型之間的轉換
隱式
string + number---string
number + bool---number
string + bool---string
bool + bool ---number
顯式 (使用一些轉換方法)
轉換為數值類型:parseInt/parseFloat---如果有數字,轉換;NaN
轉換為字符串:toString
var n = 133;
n.toString().length
?
判斷string是否可以轉換為數值
isNaN()---is not a number
?
110 常用內置對象的用法
js提供了一些常用的對象,利用它們的成員實現功能
String/Array/Math/Date/Error/Regex/...
?
11 string對象:表示字符串
創建: ?var s = "content";
????????var s = new String("content");
特殊字符:特殊的字符按照字符本身的意義顯示---轉義符
\' \" \n \\
漢字:
s.length---長度
s.substring(start,end)--子字符串,end是結束位置的下一個
s.charAt(index)
s.indexOf("子字符")--第一次出現的位置>=0
s.lastIndexOf
s.toUpperCase/toLowerCase
s.split("拆分用的字符")
?
s.search("子字符"/正則表達式)---index
s.replace("子字符"/正則表達式,newstring)--result
s.match()---匹配的數組結果
?
正則表達式:結合string對象的方法實現對于字符串的操作
/表達式/匹配標識符(g/i)
?
12 數組對象
創建:可以沒有長度
var a = new Array();
賦值:
a[0] = "mary";
a[1] = 123;
a[2] = true;
簡寫方式:
var a = ["mary",123,true];
屬性
length
方法
toString()---1,2,3
join(";")---10;20;30
array1.concat(array2)--兩個數組加
array1.slice(start,end)--從數組中截取一部分,得到一個小數組
?
reverse--翻轉
sort--排序,默認按照字符串的大小比較
sort(排序的function對象)--自定義的排序規則
?
13 Math對象:提供數學計算用的常量和方法
常量:Math.PI
方法:max/min/round/pow(x,y)/ceil/floor/random--小數(0=< < 1)
1到10之間的整數(包含下限,不包含上限)
random() * 10---0=< 小數 < 10--floor---0--9
3到15之間的
floor( random() * 12) + 3
?
14 Date對象:獲取或者操作時間和日期...
?
15 Function對象
聲明方法 function Name(x,y,z){.. return ;}
調用方法 Name(12,34);
var r = Name(4,true);
局部變量和全局變量
方法的重載:沒有方法的重載
方法重名,即使參數不同,依然以最后一次定義的為準
arguments:代表當前方法的所有參數值組成的數組,實現類似于重載的效果
?
function M()
{
...
}
?
課后練習:
模擬機選一注雙色球彩票的號碼
6個紅球:6個1到33(都包含)之間的整數,不能重復(產生一個號碼,判斷是否出現過存入數組;否則繼續)
1個藍球:1個1到16(都包含)之間的整數
顯示在界面時(將產生的結果使用代碼寫在頁面):
機選一注
紅球為:1,3,6,23,25,32--排序,逗號隔開
藍球為:12
?
16 DOM--document object model
將html文檔作為一個節點樹的結構,查詢和修改,實現頁面的動態修改---document 代表整個文檔樹
常和正則表達式一起實現頁面輸入的驗證
?
a)找到節點
找到單個節點:document.getElementById()
找到一類(多個)節點:document.getElementsByTagName("input")
根據元素的相對位置找節點:
xxx.childNodes/parentNode/firstChild/lastChild
?
b)關心節點的信息:將html標記對象化---將標記中的屬性標記作為節點對象的屬性;將標記中間的文本內容,作為innerHTML
單個標記屬性,如value/href/src--class--className
集合屬性,如style,將集合屬性中的每個子內容作為style的子屬性存在 obj.style.color
如果修改的樣式屬性過多,單個修改將代碼難以維護,建議:將樣式聲明放到單獨的CSS文件中,用樣式類維護;js中,xx.className = "";
?
<input type="text" > ?文本框.value
<a href="">click me</a> ?a節點對象.innerHTML
???????a節點對象.href = "";
<img> ???圖像對象.src = "";
?
.value
.innerHTML
c)修改節點的信息;關心節點的信息
常用的實例:
頁簽
二級菜單
實現頁面的錄入驗證
正則表達式:實現對于文本的匹配,如\d{3}
?
在js環境下:
使用方式一:用在string對象的search/replace/match方法里,實現對于文本的操作
使用方式二:聲明正則表達式對象,調用 test 方法,測試string 是否符合表達式的聲明,bool
var reg = /^\d{3}$/;
reg.test(string)----bool
?
onxxxx = "return false;"---取消事件
?
d)添加新節點
???var o = document.createElement("input")--返回新創建的元素對象
???o.value = "dd";
???o.type = "text";
?
???XXX.appendChild(o);
<input value="dd" type="text">
?
???選擇性的將新節點放入某個位置
???XXX.insertBefore(newNode,refNode)---XXX是refNode的父節點,操作完畢后,newNode作為XXX的子節點
XXX.insertBefore(a,XXX.firstChild)
XXX.insertBefore(a,XXX.childNodes[1]);
?
e)刪除節點
XXX.removeChild(node)---node為XXX的子節點
//id="txt1"的節點
$("txt1").parentNode.removeChild($("txt1"));
-----是W3C的標準
-----第三方封裝,常用的標準操作封裝起來
-----表現為各種公開的js文件
-----有些常用的封裝,瀏覽器默認支持,比如:
<select>
<option>
</select>
createElement("option");
o.innerHTML = "";
o.value = "";
改建為: var o = new Option("text","value");
---這種封裝:HTML DOM
下拉框的聯動效果
onchange---當元素的值發生變化時
selectedIndex---當前所選中項的索引
封裝:selObj.options.length = 0;
??????var o = new Option(text,value);
??????selObj.options[i] = o;
?
表格的動態創建:js的客戶端技術/服務器端技術
動態的為表格添加新行,行中有單元格
<table border="1" id="t1">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
</table>
標準的dom操作
封裝的HTML DOM的操作:
tableObj.rows
tableObj.insertRow(index)---返回新產生的 tr 對象(行對象)
tableObj.deleteRow(index)
rowObj.insertCell(index)---返回新產生的 td 對象(單元格對象)
.deleteCell(index)
tdObj.innerHTML = "";
?
+++js中的對象
function checkPwd(){
var name = $("txtPwd").value;
var reg = /^\d{6}$/;
if(reg.test(name))
$("pwdInfo").innerHTML = "";
else
$("pwdInfo").innerHTML = "密碼格式錯誤";
//返回密碼驗證是否通過
return reg.test(name);
}
//驗證所有的錄入:返回true或者false
function checkData() {
//收集所有的驗證結果并返給調用方,以決定是否取消事件
var result = checkName() && checkPwd();
return result;
}
<input type="submit" value="登錄" οnclick="return checkData();">
++++
詳細見day02
<script src="second.js" language="javascript"></script>
<select id="sel1" οnchange="ShowClasses();">
<option>--請選擇--</option>
<option>java</option>
<option>php</option>
<option>.net</option>
</select>
?
?
*******
17 BOM--browser object model
將瀏覽器窗口中的各部分封裝為對象,樹形結構
???window
document ?location ?history ?screen navigator event
?
18 window對象:代表整個窗口,其他作為它的子對象
document.createXXX
window.document.createXXX
?
a)window.open(url)--打開多個,返回新窗口對象
??window.open(url,name)
??window.open(url,name,config)
?
b)window.focus()
?
c)window.alert()
??window.confirm(text)--確認對話框,返回值 bool
??window.prompt()--文本輸入的對話框
?
d)定時器的方法
周期性定時器
??window.setInterval(function,time)--time是ms單位,返回定時器對象
??window.clearInterval(定時器對象)
?
一次性定時器:實現類似于倒計時的效果
??window.setTimeout(function,time)--time是ms單位,返回定時器對象
??window.clearTimeout(定時器對象)
?
19 location 對象:瀏覽器窗口的地址欄
location.href = "url";---產生保留歷史記錄
location.replace(url);---不會保留頁面的歷史
相同點:舊窗口中顯示新的url
location.reload();//F5
?
去往新的url:
<a href=""></a>---靜態
window.open---打開新的窗口
頁面的重定向(跳轉):url替換舊的url
20 screen 對象
screen.width/height
screen.availWidth/availHeight
screen.color
?
21 navigator 對象:瀏覽器軟件及其所在操作系統的信息
遍歷該對象的所有屬性
對象的屬性本質是一個屬性的數組,如
location.href
location["href"]
navigator.aa
navigator.bb
for(var p in navigator)
{
navigator[p]
}
?
22 event 對象
a) 事件的分類
鍵盤事件 onkeydown/onkeyup
鼠標事件:onmouseover/onmouseout/onclick
狀態事件 onblur/onfocus/onchange/onload/onunload
?
b) 事件的定義
定義在HTML標記里: onxxx = "MM();"---寫死
代碼動態的為元素定義事件:
obj.onclick = function對象;
?
c) 事件的冒泡機制:父子元素上定義相同的事件,觸發事件時,冒泡機制(從最里層的元素開始觸發,層層向上)
???取消冒泡:event.cancelBubble = true;
???利用冒泡機制:
大量子元素有相同事件,為父元素定義事件
?
d) event 對象:只要頁面發生了事件,將當前事件相關的所有信息封裝到 event 對象中
???js代碼中使用event 對象
?
e) event 成員:屬性代表事件的某個信息
event.x/y/clientX/clientY
event.srcElement/target--元素對象
區分點擊的是哪個子元素
event.srcElement---得到引發當前事件的元素對象
信息:元素節點.nodeName--獲取元素的標記名稱,大寫形式
----在html中用event獲取事件對象,傳入方法里
ie/chrome/opera瀏覽器中:js或者html代碼中獲取事件對象,用event 關鍵字
event.srcElement
?
firefox 瀏覽器:只能在html里使用event關鍵字
event.target
?
瀏覽器兼容 ?event.srcElement || event.target
?
eval("1+2") --- 3:將參數作為計算表達式進行計算,得到結果
?
23 history:歷史訪問記錄
history.length
history.back()
history.forward()
?
24 js中OO編程
OO:封裝/繼承/多態
?
數據的封裝:數據結構---class
成員:數據(屬性)/行為(方法)
?
三種封裝方式:
a) 使用 Object 對象實現數據的封裝
???var s = new Object();
???s.name = "mary";
???s.age = 18;
???s.isGraduated = true;
???s.方法 = function對象;
優點:簡單
缺點:重用性差---簡單的數據封裝
?
b)自定義對象:封裝,重用
聲明自定義的對象,構造函數
function Student(n,a,i)
{
this.name = n;
this.age = a;
this.isGra = i;
this.introduceSelf = aaa;
}
?
function aaa()
{
this.name--獲取當前對象的成員
}
?
var s1 = new Student("mary",18,true);
var s2 = new Student("tom",45,false);
alert(s1.name);
alert(s2.name);
?
c) JSon 的語法
var s = {"name":"mary","age":18,"isGra":true};
alert(s.name);
?
練習:tts
??????走馬燈的效果
實現4個圖片每3s輪換(1,2,3,4,1,2,..)
下方1-4 4個數字,背景色也會變化(當前順序的數字的背景色高亮顯示)
鼠標移入圖片,停止輪換;移走,繼續輪換
?
???
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
總結
- 上一篇： password_hash/passwo
- 下一篇： java zip压缩解压_JAVA实现实