黑馬程式設計師_HTML、JavaScrip、DOM
一、 HTML
1.超文字標記語言不是一種程式語言，是一種描述性的標記語言,用於描述超文字中內容的顯示方式（副檔名為.html或.htm）
基本格式：
<html>
<head><title></title></head>
<body></body>
</html>
html: 放在html檔案的開頭，但沒有實質性的功能，即使沒有這個標記，
瀏覽器在碰到其他的html標記時也一樣會進行解析。瀏覽器內建了html語言 的解析器.可以設定預設開啟瀏覽器:工具—資料夾選項-檔案型別
head:頭標記，放置關於此html檔案的資訊，如提供索引，定義css等。
title:標題標記，包含在head標記內，它的作用是設定網頁的標題。
body:主體標記，網頁所需要顯示的內容都放在這個標記內。
2. HTML中常見的標籤
註釋標籤：<!-- -->
標題標籤： <hx> hx的取值是從h1-h6,字型從大到小
文字粗體標籤： <b>
文字斜體標籤： <i>
下劃線標籤： <u>
換行標籤： <br> 換行標籤是單個使用的標記
段落標籤： <p> 段落標籤除換行外，還會增加一行空白
空格標籤：
font:設定字型的color顏色size文字大小(1-7)7種層次的大小，face 設定字型。
特殊字元
如果要在網頁上顯示一些特殊符號,比如 <,>,&等.
因為這些符號在程式碼中會被瀏覽器識別並解釋.所以用特殊方式表示
< : < > :> & : &
nbsp是空格字元 sup:為上標標記 sub:為下標標記
<marquee></marquee> 滾動標籤
bgcolor 背景顏色
Direction 滾動方向 left、right、up、down
Behavior 滾動方式scroll滾動、silde滑動、alternate擺動
loop設定滾動次數，-1為一直滾動。
注意：<marquee></marquee>內只能用<br>換行，不能用<p>
dl,dt,dd,ul,li的用法
如下例子：
<dl>
<dt>學科名稱 </dt>
<dd> 語文</dd>
<dd>數學</dd>
<dt>部門名稱</dt>
<dd>技術部</dd>
<dd>人事部</dd>
</dl>
a標籤：
例如：<a href=”http://sina.com.cn”>
注意：當沒有指定具體的協議時，瀏覽器會啟動預設的file協議引擎來解析href的值
<ahref=”mailto:abc:@sina.com”>聯絡我們</a>
當你點選時，會彈出一個郵件對話方塊。
<aname=”top”>頂部位置</a>
<ahref=”#top”>回到頂部</a>
<ahref=”javascript:alert(‘sdfd’)”>一個對話方塊</a>
表格：
如下例子：
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>表格巢狀頁面</title>
</head>
<body>
<table bordercolor="#666666"cellpadding="0"cellspacing="0" border="1" width="500px"height="300px" >
<tr >
<td colspan="4"align="center">
1
</td>
</tr>
<tr>
<td align="center"width="40px">
2
</td>
<td align="center"width="40px" >
3
</td>
<tdalign="center" width="40px">
4
</td>
<tdalign="center" width="90px">
5
</td>
</tr>
<tr >
<td colspan="4">
<table border="1" cellpadding="0"cellspacing="0" width="470px" height="100px" align="center"bordercolor="#666666">
<tr height="53px">
<td colspan="3"align="center">
1
</td>
</tr>
<tr>
<tdalign="center">
2
</td>
<tdrowspan="2" align="center" >
3
</td>
<tdalign="center">
4
</td>
</tr>
<tr>
<tdalign="center">
5
</td>
<tdalign="center">
6
</td>
</table>
<br/>
<table bordercolor="#666666"align="center"cellpadding="0" cellspacing="0" border="1" height="42px"width="470px">
<tr>
<tdwidth="70" align="center">
1
</td>
<td width="70"align="center">
2
</td>
<tdwidth="70" align="center">
3
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>執行效果圖為：
注意的是：當你想要合併單元格時：可以設定：colspan=”2”,或rowspan=”2”;
框架：<frameset></frameset>
<framesetrows="30%" name="top" noresize="noresize"border="yes">
<frameset cols="30%">
<frame src="1.html"name="left" noresize="noresize"/>
<frame src="2.html" name="right"noresize="noresize"/>
</frameset>
</frameset>
這裡面的1.html表示連線的一個頁面，2.html連線的另外一個頁面
注意：要想讓框線不可以隨意拖動的話，加上noresize="noresize"屬性。
表單的使用：
如下例子是表單中的各個標籤的使用：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>表格</title>
</head>
<body>
<table border="1"width="450px" cellpadding="0" cellspacing="0" >
<tr height="150px">
<td align="center"width="150px" >
<inputtype="submit" value="提交" name="sub"/>
</td>
<td bgcolor="#FF0000"align="center" width="150px" >
<textareacols="20px" rows="10px">...............</textarea>
<br/>
<input type="button" value="清除" name="res"/>
</td>
<tdalign="center" >
<inputtype="image" src="image/1.GIF" width="150px" >
</td>
</tr>
<tr>
<tdbgcolor="#66FFCC" width="175px" height="60px"align="center">
<inputtype="radio" name="date1"/>1<input type="radio"name="date1"/>2<input type="radio"name="date1">3
</td>
<td bgcolor="#66FFCC"width="175px" height="60px" align="center">
<inputtype="checkbox" name="date2"/>1<inputtype="checkbox"name="date2"/>2<inputtype="checkbox" name="date2">3
</td>
<td>
<selectmultiple="multiple" size="3">
<optionvalue="1"> 1</option>
<option value="2"> 2</option>
<optionvalue="3"> 3</option>
<option value="4"selected="selected"> 4</option>
</select>
<select size="1">
<optionvalue="1">1</option>
<option value="2"selected="selected">2</option>
</select>
<selectmultiple="multiple" size="2">
<optionvalue="1">1</option>
<optionselected="selected" value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>
<inputtype="text" size="5"width="50px" name="text1" maxlength="2"disabled=" " ><br/>maxlength值為2所以只能輸入2個字元,因為disable所以文字無法輸入<br/>
<inputtype="passwrod" name="password1" value="" size="5"maxlength="2">passwoed密碼輸入功能<br/>
<input type="hidden"name="hidden1" value="sdf" size="5"maxlength="2">1
<input type="hidden"name="hidden2" value="sdf" size="5"maxlength="2">11
</td>
<td width="150px">
8
</td>
<td>
<ahref="http://www.sina.com.cn">新浪</a><br/>
<ahref="http://www.baidu.com.cn">百度</a><br/>
<ahref="http://www.tengxun.com.cn">騰訊</a><br/>
</td>
</tr>
<tr>
<td>
<fontcolor="#00CC00" face="宋體">字型設定</font>
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
</table>
</body>
</html>結果如下：
注意：form表單的兩種提交方式的區別
get：會將提交的資訊顯示在位址列上。對於敏感資訊不安全。因為顯示在位址列。因為顯示在位址列，而位址列的資訊資料量是有限的，所以不可以提交大資料。會將資訊封裝到請求行，也就是http請求訊息頭之前
post: 不會將提交的資訊顯示在位址列。對於敏感資訊保安。因為不顯示會將資訊封裝到請求體，也就是http請求訊息頭之後。請求體和請求頭之間是通過空行來進行分隔的可以提交大體積的資料
以後在進行表單 提交時：建議使用post提交。
Meta標籤
例如：<metahttp-equiv="refresh" content="3;url=http://www.sina.com.cn"/>
表示開啟此頁面3秒後自動轉到新浪頁面。
3.基本架構
C/S結構 Client /Server
(1) 開發者需要編寫兩個端點，一個是客戶端程式，一個是服務端程式。舉例：QQ,360.
(2) 需要在客戶機安裝客戶端的部分。
(3) 弊端：客戶端維護較為麻煩。機器只要一重灌，就需要重新安裝該軟體。
升級也比較麻煩。後期有了一個解決方案：對於升級，可以通過網路升級的形式完成。
(4) 好處：客戶端的出現，可以減輕服務端的運算壓力。
B/S結構 Browser /Server
(1) 這種結構，程式設計師只需要編寫服務端。而客戶端只需要有瀏覽器即可，
只要裝有作業系統的機器都自帶瀏覽器。
這是web技術的流行。導致這種結果的流行。
(2) 不用開發客戶端，相對省事很多。而且操作也比較簡單，只要能上網，
就可以進行象瀏覽網頁一樣進行功能的使用。
(3) b/s執行全在服務端。
對於大資料量的運算就會很慢。雖然現在也有網頁網遊，但是使用flash完成的。它的資料量相對較小。而且flash也是在客戶端由瀏覽器啟動
練習：登錄檔單
<HTML>
<HEAD>
<TITLE> 註冊頁面 </TITLE>
</HEAD>
<BODY>
<form method="post">
<table border="1"cellpadding="0" cellspacing="0" width="598px"height="548px" align="center">
<tr>
<th colspan="2" align="center">
<font size="+7" face="宋體">註冊頁面
</th>
</tr>
<tr>
<td align="right">
使用者名稱：
</td>
<td>
<inputtype="text" name="name">
<fontcolor="#FF0000">*</font>
</td>
</tr>
<tr>
<td align="right">
密碼：
</td>
<td>
<input type="password" name="psw">
<fontcolor="#FF0000">*</font>
</td>
</tr>
<tr>
<td align="right">
性別：
</td>
<td>
<inputtype="radio" name="sex">男<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td align="right">
出生日期：
</td>
<td>
<selectname="birthDate">
<option>1990</option>
<option>1991</option>
<option>19D92</option>
<option>1989</option>
<option>1987</option>
<option>1988</option>
</select>年
<select name="birthDate">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>月
<select name="birthDate">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
</select>日
</td>
</tr>
<tr>
<td align="right">
愛好：
</td>
<td>
<inputtype="checkbox"/>足球<input type="checkbox"/>籃球<inputtype="checkbox"/>游泳<inputtype="checkbox"/>跑步
</td>
</tr>
<tr>
<td align="right">
籍貫：
</td>
<td>
<select name="contry">
<option>江蘇</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>河北省</option>
</select>省
<select name="contry">
<option>無錫</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>滄州</option>
</select>市
</td>
</tr>
<tr>
<td align="right">
個人介紹：
</td>
<td>
<textareacols="20" rows="10"></textarea>
</td>
</tr>
<tr>
<td align="right">
公司網址：
</td>
<td>
<ahref="http://www.daiwenjuan.com">http://www.daiwenjuan.com</a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>執行效果：
4.CSS
其實是CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。並且提供了更多的 屬性的設定
CSS和HTML結合的方式
style屬性方式：利用標籤中style屬性來改變每個標籤的顯示樣式。
例：<pstyle="background-color:#FF0000; color:#FFFFFF">
p標籤段落內容。</p>
該方式比較靈活，但是對於多個相同標籤的同一樣式定義比較麻煩，適合區域性修改。
style標籤方式：（內嵌方式）
在head標籤中加入style標籤，對多個標籤進行統一修改。
<head> <style type=”text/css”> p {color:#FF0000;} </style> </head>
該方式可以對單個頁面的樣式進行統一設定，但對於區域性不夠靈活。
匯入方式：前提是已經存在一個定義好的CSS檔案。網頁的一部分樣式需要用到，
那麼就用到這種方式。例：<styletype="text/css"> @import url(css_3.css);
div { color:#FF0000;} </style>
注意：url括號後面必須要用分號結束。如果匯入進來的樣式與本頁面定義的樣式重複，以本頁定義樣式為準。
連結方式：通過head標籤中link標籤來實現,前提也是先要有一個已定好的CSS檔案。
例：<linkrel="stylesheet" type="text/css" href="css_3.css"/>
注：可以通過多個link標籤連結進來多個CSS檔案。
CSS選擇器
CSS選擇器的型別
html標籤名選擇器。使用的就是html的標籤名
class選擇器。其實使用的標籤中的class屬性
id選擇器。其實使用的是標籤的中的id屬性。
每一個標籤都定義了class屬性和id屬性。用於對標籤進行標識，
方便對標籤進行操作。在定義的中，多個標籤的class屬性值可以相同，
而id值要唯一，因為JavaScript中經常用。
class選擇器：
在標籤中定義class屬性並賦值.通過 標籤名.class值 對該標籤進行樣 式設定。
id選擇器：
與class選擇器類似，但格式不同，選擇器的名稱為：#id值。
一般情況下id都定義成唯一的。
CSS擴充套件選擇器
關聯選擇器
標籤是可以巢狀的，要讓相同標籤中的不同標籤顯示不同樣式，就可以用此選擇器。
組合選擇器
對多個不同選擇器進行相同樣式設定的時候應用此選擇器。
注：多個不同選擇器要用逗號分隔開。
偽元素選擇器
其實就在html中預先定義好的一些選擇器。稱為偽元素。是因為CSS的術語。
格式：標籤名：偽元素。類名 標籤名。類名：偽元素。都可以。
a:link 超連結未點選狀態。
a:visited 被訪問後的狀態。
a:hover 游標移到超連結上的狀態（未點選）。
a:active 點選超連結時的狀態。
使用順序 L – V – H – A
5.JavaScript
JavaScript程式碼和HTML的結合
JS程式碼存放在標籤對 <script></script>中。
當有多個html頁面使用到相同的JS指令碼時，可以將js程式碼封裝到一個檔案中，
只要在script標籤的src屬性,引入一個js檔案。（方便後期維護，擴充套件）
javascript和html的結合方式
想要將其他程式碼融入到Html中，都是以標籤的形式。
當有多個html頁面使用到相同的JS指令碼時，可以將js程式碼封裝到一個檔案中，
只要在script標籤的src屬性引入一個js檔案。（方便後期維護，擴充套件）
注意：如果在script標籤中定義了src屬性，那麼標籤中的內容不會被執行。
例：<scriptsrc=”test.js” type=”text/javascript”></script>
JS彈出框
(1) 警告框 用法：alert(...);
(2) 確認框 用法：confirm(...);
(3) 提示框 用法：prompt("",""); 前者為提示資訊，後者為預設值
JavaScript語法-變數
JavaScript是一種弱型別語言。
通過關鍵字var來定義
注：JS中特殊的常量值：undefined，當變數沒有初始化就被使用，
該變數的值就是undefined（未定義）。
注意：Javascript的語句在結尾處是可以不用分號結束的，非嚴謹語言的特 點。
而且有些情況是必須寫分號的，如：var x =3 ; var y =5
如果兩條語句寫在同一行，就需要分號隔開。
JavaScript語法-運算子
Javascript中的運算子和Java大致相同。只是運算過程中需要注意幾點：
var x = 3120/1000; x = 3
var x = 2.4+3.6 ; x=6
var x = “12” + 1; x=13
特殊運算子 typeof : 返回一個操作表示式的資料型別的字串。
JavaScript語法-語句
判斷結構(if語句) 注：var x = 3;
if(x==4)//可以進行比較運算。
if(x=4)//可以進行賦值運算，而且可以同樣進行判斷。不報錯。
因為在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)結果是true；
可以通過if(4==y)來解決該問題。因為4=y不會進行判斷，而是會報錯。
選擇結構(switch語句)
與java不同的是：因為弱型別，也可以對字串進行選擇。
迴圈結構(while語句，do…while語句，for語句)。
注：不同的是，沒有了具體資料型別的限制，使用時要注意。
document的write方法。可以寫字串，也可以寫出html標籤。
JavaScript語法-函式
A 一般函式
格式：function 函式名(形式引數...) {
執行語句；
return 返回值； }
函式是多條執行語句的封裝體，只有被呼叫才會被執行。
注意：呼叫有引數的函式，但沒有給其傳值，函式一樣可以執行，
或者呼叫沒有引數的函式，給其傳值，該函式也一樣執行。
函式在呼叫時的其他寫法：
var show = demo();//show變數接收demo函式的返回值。
var show = demo;//這種寫法是可以的，意為show和demo代表同一個函式。
//那麼該函式也可以通過show()的方式執行。
動態函式 通過Js的內建物件Function實現。
例：var demo = newFunction(“x,y”;”alert(x+y);”);
不同的是，動態函式，引數以及函式體都可以通過引數進行傳遞，可以動態指定。
匿名函式
格式：function(){...}
例：var demo = function(){...} demo();
通常在定義事件屬性的行為時較為常用。
例： function test() {
alert(“load ok”);
}
window.onload = test;
可以寫成匿名函式的形式：
window.onload = function()
{
alert(“load ok”);
}
匿名函式就是一種簡寫格式
JavaScript語法-陣列
格式：var arr = [元素1，元素2，元素3...];
注意：其中的元素可以使任意型別，但是，推薦使用同一種類型。
var arr = new Array();
var arr = new Array(3);
JavaScript自定義物件
Js是基於物件的，不是面向物件的。但是我們可以通過函式來模擬物件的使用。
用js的函式模擬物件並使用, 用js的函式模擬物件的成員變數及方法
JavaScript用於操作物件的語句
with語句。 格式：with(物件){ }
當呼叫一個物件中多個成員時,為了簡化呼叫,避免"物件."這種格式的重複書寫。
var p = new Person(“zhangsan”,20);
alert(p.name+”,”+p.age);
可以寫成：var p = newPerson(“zhangsan”,20);
with(p) { alert(name+”,”+age); }
with語句定義了某個物件的作用域，在該域中可以直接呼叫該物件的成員。
for...in語句 用於遍歷物件屬性。
例：var p = newPerson(“zhangsan”,20);
for(x in p) {
alert(x);//結果是兩個對話方塊，一個是name，一個是age。
alert(x+”:”+p[x]);
//可以得到屬性與屬性的值。p[x]:p物件就是個陣列，要通
過指定的元素名獲取元素的值。
}
JavaScript物件的高階特性
prototype屬性
js給已有物件提供了一個特殊的屬性,prototype屬性.原型屬性.
它的作用:獲取該物件的原型引用. 這裡可以理解為一個父類.
原型的出現,可以獲取到該物件的父類的引用.
當給帶物件的父類新增新屬性和行為時,該物件也會具備這些屬性和行為.
所以,原型的出現,可以給已有的物件進行新功能的擴充套件.
為了方便理解:照貓畫虎.
照貓畫虎. 虎怎麼來的,我是照著貓畫來的,這個時候,我們就可以說虎的原型是貓.
也就是說: 虎.prototype = 貓.
如果,我們在貓上加了一個方法 貓.play = function(){alert("play run")}
這個時候,虎具備play這個方法了嗎,具備了嗎.
虎的原型是貓嗎.可以看出貓是虎的父類嗎.
5.BOM概述
BOM:Browser Object Model 瀏覽器物件模型
瀏覽器本身是一個窗體,所以它有一個windows物件.windows包含如下物件
navigator ：包含關於 Web 瀏覽器的資訊。
history：包含了使用者已瀏覽的 URL 的資訊。
location：包含關於當前 URL 的資訊。
document:代表給定瀏覽器視窗中的 HTML 文件。也就是我們的DOM物件。
DOM:Document Object Model
文件物件模型.
該技術的出現,將標記型文件封裝成了物件.
並將該標記型文件中的所有內容(標籤,屬性,文字)都封裝成了物件.
DOM解析.
當標記型文件被DOM解析器解析後，會按照標籤的層次關係，產生一顆dom樹結構。
這個樹的每個分支被稱為一個節點。
6. DHTML概述
它不是一個語言,它是多個技術的綜合體簡稱. 這裡包含的技術有html,css,dom,javascript
這四種技術在DHTML程式設計中所處的角色呢:
html: 提供了標籤用於封裝資料.它是基礎.沒標籤,什麼都做不了.
css: 提供了樣式,可以對標籤封裝的內容進行樣式的操作.
dom: 將html文件封裝成了物件.並將文件中的內容都封裝成了物件.
物件中都定義了更多的屬性和行為.方便於物件的操作.
javascript: 提供了邏輯性很強的程式設計語言來負責頁面的行為.
7. DOM獲取節點的方式
getElementById：通過該標籤的id屬性值來獲取該標籤節點物件.
getElementsByName：通過標籤的name屬性值來獲取物件.
而且返回的不是一個節點物件.而是多個節點物件,用陣列表示的.
getElementsByName：通過標籤名稱獲取節點物件.
但是標籤很容易重複.所以返回的是一個節點陣列.
document物件作為html文件的物件,可以獲取頁面中任意一個節點.
節點本身是個物件,它具備三個屬性:
1:nodeName 節點名稱
2:nodeType 節點型別
3:nodeValue 節點值
設定獲取節點的值
1：value
2：innerHTML,innerText
節點間的層級關係
1:parentNode:父節點 是唯一的
2:childNodes:子節點 可以有多個
3:兄弟節點
上一個兄弟節點 previousSibling
下一個兄弟節點 nextSibling
7. 取消超連結的預設點選效果.
方式1:通過給href屬性的值定義一個'#'.
這是借用了定位標記的原理.不指定具體的位置.
這樣就取消了超連結的效果.但是會啟動file引擎,不夠專業.
方式2:可以定義:javascript:void(0);啟動js引擎,執行一個函式.
void(0) 這個函式什麼都不做.
超連結的預設事件被取消了.需喲自定義事件完成超連結的點選效果
下面例子是一個改變字型大小和顏色的例子：
程式碼如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>無標題文件</title>
<styletype="text/css">
a:link,a:visited{
color:#0099CC;
text-decoration:none;
font-size:14px;
}
a:hover{
color:#0033FF;
}
.newStyle{
border:#9900CC 1px solid;
font-size:16px;
width:350px;
color:#0033FF
}
.max{
color:#6633FF;
background-color:#99FF66
width:350px;
}
.min{
color:#FFFF66;
background-color:#9900CC;
width:350px;
}
</style>
<scripttype="text/javascript">
functionchangFont(size,newStyle)
{
var divNode=document.getElementById("newstext");
divNode.style.fontSize=size
divNode.className=newsstext
}
functionchangFont_1(styleName)
{
var divNode=document.getElementById("newstext");
divNode.className=styleName;
}
</script>
</head>
<body>
<h2>這是一個大新聞</h2>
<ahref="javascript:void(0)" onclick="changFont_1('max')" >大字型</a>
<ahref="javascript:void(0)" onclick="changFont_1('newStyle')">中字型</a>
<ahref="javascript:void(0)" onclick="changFont_1('min')">小字型</a>
<divid="newstext" class="newStyle">
可搜到了明基噩夢費勁速度費<br/>
都深速度才能健身卡的三國殺感<br/>
僧都發生撒粉底誒可可什麼躲<br/>
電風扇男佛朋克風摩配啊發順豐<br/>
</div>
</body>
</html>總結：改變字型大小，定義一個函式通過Id來獲取這個節點，在定義函式時設定一個引數，為了不讓使用者自己瞎改變大小，可以在傳入字型的大小值改變字型顏色時，要先預先定義好幾個樣式，然後通過傳引數的方式傳進來。這樣寫程式碼有利於修改，並提高了複用性
注意：不要用id屬性來設定樣式，這樣的話就改變不了了。
下面例子是用於演示開關的
程式碼如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>無標題文件</title>
<!--
演示展開閉合效果
佈局屬性overflow
-->
<styletype="text/css">
div{
overflow:hidden;
color:#FF0066;}
</style>
<scripttype="text/javascript">
functionlist()
{
vardivNode=document.getElementsByTagName("div")[0];
with(divNode.style)
{
//alert(overflow=="visible");
overflow=(overflow=="visible")?"hidden":"visible";
}
}
</script>
</head>
<body>
<divonclick="list()" style="height:10px">
gfjeroafmkjo<br/>
fjneawae ve vg<br/>
fcdewmvfireohjtoier<br/>
fh3ewoiafmn3jfg<br/>
</div>
</body>
</html>相關推薦
黑馬程式設計師_HTML、JavaScrip、DOM
一、 HTML 1.超文字標記語言不是一種程式語言，是一種描述性的標記語言,用於描述超文字中內容的顯示方式（副檔名為.html或.htm） 基本格式： <html> <head><title></title></head
黑馬程式設計師——摺紙問題、九九乘法表和菱形圖案的列印
------Java培訓、Android培訓、iOS培訓、.Net培訓、期待與您交流！ ------- 摺紙問題： /* * 我國最高山峰是珠穆朗瑪峰：8848m，我現在有一張足夠大的紙張，厚度
黑馬程式設計師——Java集合框架（一）之迭代器、Collection層次結構等
-----------android培訓、java培訓、java學習型技術部落格、期待與您交流！------------ 集合框架概述 一、什麼是集合框架 1.什麼是集合？ 集合是指把具有相同性質的一類東西匯聚成一個整體，簡單說就是指儲存資料的一個容器。集
黑馬程式設計師——Java IO流（二）之流操作規律總結、File類、Properties類、序列流等
-----------android培訓、java培訓、java學習型技術部落格、期待與您交流！------------ 六、流操作規律總結 1.明確源和目的： 源： 字元流：FileReader（純文字檔案）。 位元組流：FileInputStream（
黑馬程式設計師——Java面向物件（二）之封裝、繼承、多型、介面等
-----------android培訓、java培訓、java學習型技術部落格、期待與您交流！------------ 五、面向物件的特徵 面向物件主要有三大特徵： 1.特徵一 —— 封裝 1）定義：是指隱藏物件的屬性和實現細節，僅對外提供公共訪問方式。 2）好處：
黑馬程式設計師——Java之String類、基本資料型別物件包裝類等
例如：parseInt("0", 10) 返回 0。 parseInt("473", 10) 返回 473。 parseInt("-0", 10) 返回 0。 parseInt("-FF", 16) 返回 -255。 parseInt("1100
黑馬程式設計師——Java面向物件（一）之匿名物件、程式碼塊、static關鍵字等
a）子類只繼承父類的預設(預設)建構函式，即無形參建構函式。如果父類沒有預設建構函式，那子類不能從父類繼承預設建構函式。 b）子類從父類處繼承來的父類預設建構函式，不能成為子類的預設建構函式。 c）在建立物件時，先呼叫父類預設建構函式對物件進行初始化，然後呼叫子類自身自己定義的建構函
黑馬程式設計師——Java集合框架（三）之Map集合、Collections與Arrays工具類
-----------android培訓、java培訓、java學習型技術部落格、期待與您交流！------------ Map集合 一、概述 Map集合儲存的元素是鍵值對，即將鍵和值一對一對往裡存，而且要保證鍵的唯一性。 問題思考： 1.如何保證鍵的唯一性？
黑馬程式設計師——Java面向物件（三）之內部類、異常、包等
-----------android培訓、java培訓、java學習型技術部落格、期待與您交流！------------ 六、物件的其他重要內容 1.單例設計模式 1）什麼是單例設計模式？ 單例設計模式是指能夠確保一個類只有一個例項，並且能夠自行向整個系統提供這個例項
黑馬程式設計師——Java IO流（一）之IO流概述、字元流、位元組流等
-----------android培訓、java培訓、java學習型技術部落格、期待與您交流！------------ IO流 一、概述 1.IO流是用來處理裝置之間的資料傳輸。 2.Java對資料的操作時通過流的方式。 3.Java用於操作流的物件都在IO包中。
黑馬程式設計師：Java基礎——集合框架之體系概述、共性方法與迭代器
------- Java EE培訓、java培訓、期待與您交流！ ---------- 1.體系概述 1.1 為什麼出現集合類？ 面嚮物件語言對事物的體現都是以物件的形式，所
黑馬程式設計師——Java基礎---IO流（字元流、位元組流、轉換流、流操作規律）
三、字元編碼 字元編碼通過轉換流來完成。在兩個物件進行構造的時候，可以加入字符集（即編碼表），可傳入編碼表的有： 轉換流：InuputStreamReader和OutputStreamWriter。列印流：PrintStream和PrintWriter，只有輸出流。轉換流的編碼應用 可以將字元以指定編
黑馬程式設計師--OC基礎--類方法、物件方法和self的使用
1、類方法 （1）類方法就是一個方法，它的使用不需要使用者去建立一個類的例項進行呼叫而可以直接通過類名對方法進行呼叫。 宣告一個類方法的格式： +(返回值型別) 方法名：(引數1型別)引數1名稱 方法名：(引數2型別)引數2名稱; 例：
黑馬程式設計師—Objective-C學習—封裝、繼承、多型
三大特性：成員變數的封裝、繼承、多型 一、封裝 寫成員變數時，不要寫@public，應使用set方法。成員變數儘量不要用@public，不讓外界直接訪問應提供一個方法給外界設定和訪問成員變數的值。即set方法和getf方法。 1、set方法 a、作用：提供一個方法給外界
黑馬程式設計師——反射——Class、Constructor、Field、Method及簡單框架原理
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">------</span><a target=_bla
8--黑馬程式設計師---技術總結之抽象類、內部類
、期待與您交流！ ---------------------- 一.抽象類 1.抽象類的概念 在面向物件的概念中，所有的物件都是通過類來描繪的，但是反過來，並不是所有的類都是用來描繪物件的，如果一個類中沒有 包含足夠的資訊來描繪一個具體的物
黑馬程式設計師——java基礎拾遺之多執行緒（二） 執行緒同步、執行緒通訊
執行緒安全的概念：當多個執行緒同時執行一段程式碼時，如果結果和單執行緒執行時一致，而且其他變數也和預期的一致，說明是這段程式碼是執行緒安全的。但是，多執行緒執行的過程中會出現單執行緒時候不會出現的問題，大多出現在多個執行緒同時操作全域性變數或者靜態變數的時候。當出現這種
黑馬程式設計師_java高新技術(1)列舉、反射、內省
------- android培訓、java培訓、期待與您交流！ ---------- JDK 5.0 靜態匯入，自動裝箱拆箱，增強for迴圈， 可變引數，列舉，泛型，元資料 day01***Eclipse/列舉 *Workspace與project 會切換工作間與
黑馬程式設計師--SQL Server 基本語法、基礎知識
-------------------------------------------- ASP.Net+Android+IO開發、.Net培訓、期待與您交流！ -----------------------------------
黑馬程式設計師—java基礎加強—內省、註解、泛型
---------------------- android培訓、java培訓、期待與您交流！ -------------------- 內省：IntroSpector——》JavaBean——特殊的Java類 當Java執行時可檢查自身，Java 程式中詢問它的一個物