HTML、css、javascript、DOM編程

時間 2019-12-09

標籤 html css javascript dom 編程欄目 HTML 简体版

原文原文鏈接

HTML、css、javascript、DOM編程javascript

1、Htmlcss

1.1html概述html

Html就是超文本標記語言的簡寫，是最基礎的網頁語言，其代碼都是由標籤所組成，是經過標籤來定義的語言，代碼不須要區分大小寫，由<html>開始</html>結束，裏面由頭部分<head></head>和體部分<body></body>兩部分組成，頭部分的內容會先加載，裏面的內容是給html頁面增長一些輔助或者屬性信息，體部分是真正存放頁面數據的地方。java

1.2html書寫規範編程

（1）多數標籤都是有開始標籤和結束標籤，可是其中有個別標籤由於只有單一功能，或者沒有要修飾的內容，能夠在標籤內結束。例如< br/>api

（2）想要對被標籤修飾的內容進行更豐富的操做，就用到了標籤中的屬性，經過對標籤屬性的改變，增長更多效果選擇。數組

（3）屬性與屬性值之間用「=」鏈接，屬性值能夠用單引號或雙引號或不用引號，通常都用雙引號，或公司規定書寫規範。瀏覽器

格式：<標籤名屬性名=‘屬性值’>數據內容</標籤名>安全

<標籤名屬性名=‘屬性值’/>網絡

1.3操做思想

爲了操做數據，能夠將數據進行不一樣標籤的封裝，經過標籤中的屬性對封裝的數據進行操做，標籤就至關於一個容器，對容器中的數據進行操做就是在不斷改變容器的屬性值。

1.4經常使用標籤

標籤特色：對於數據進行封裝，那麼就有開始標籤和結束標籤，可是也有一些標籤只體現單一功能，因此不須要結束標籤，規範中要求標籤必需要結束，因此這樣的標籤在內部結束，如：<br /> <hr /> <img /> <imput />

標籤格式：<標籤名屬性名=「屬性值」>數據</ 標籤名>

<標籤名屬性名=「屬性值」 />

（1）字體標籤<font>：例如<font size=」5」 color=」red」>字體標籤實例</font>

（2）標題標籤：<h1><h2>.....<h6>，標題是文本中經常使用的內容，爲了方便操做而定義，其實就是某個字號和粗體的組合。

（3）特殊字符：若是想在網頁上顯示一些特殊符號，例如<> &等，這些符號在代碼中會被瀏覽器解析，因此要用一些特殊方式來表示。

（4）列表標籤<dl>

<dt>：上層項目

<dd>：下層項目

例如：

　　<dl> 　　　　 <dt>遊戲</dt> 　　 <dd>網絡遊戲</dd> 　　 <dd>單機遊戲</dd> 　　 <dt>部門名稱</dt> 　　 <dd>技術部</dd> 　　 <dd>培訓部</dd> </dl>

列表中項目符號對應的標籤

<ol>：數字標籤（a A 1 i I）

<ul>：符號標籤（○●■）

<li>：具體項目內容標籤，此標籤只在<ol> <ul>中有效。

例如：

<ol> <li>遊戲名稱 <ol> <li>阿斯頓發生地方</li> <li>阿斯頓發生地方</li> </ol> </li> <li>遊戲說明 <ol> <li>說當發生</li> <li>說電發生</li> </ol> </li> </ol>

（5）圖像標籤：<img>

例：<img src="1.jpg" align="middle" border="3" alt="圖片說明文字"/>

src：圖片地址；align用來定義圖片的排版方式；border用來設置圖片的邊框。

hr標籤：加入一條水平線，可定義粗細和顏色等屬性

（6）圖像地圖<map>

應用：當要在圖像中選取某一部分做爲鏈接的時候，如：中國每一個省所對應的區域。

map標籤要和img標籤聯合使用，Href爲超連接。

（7）表格標籤：<table>

組成：標題標籤：<caption>，給表格提供標題

表頭標籤：<th>，通常對錶格的第一行或者第一列進行格式化，也就是粗體顯示。

行標籤：<tr>

單元格標籤：<td>，加載在行標籤的裏面。能夠理解爲先有行，再在行中加入單元格。

格式：

<table border="1" width="40%"><!--width值爲百分比可讓表格的寬度隨瀏覽器窗口的大小變化--> 　　 <caption>表格標題</caption> 　　 <tr><!--第一行--> 　　 <th>姓名</th> 　　 <th>年齡</th> 　　 </tr> 　　 <tr align="center"><!--第二行--> 　　 <td>張三</td> 　　 <td>23</td> 　　 </tr> </table>

（8）超連接標籤<a>

a、超連接的幾種用法：<a href=」」>

一、超連接一個網址

二、啓動發送郵件引擎

三、設置迅雷連接

b、定位標記<a name=」」>

當網頁內容過長，定位標記就比拖動滾動條方便快捷的多，通常在本頁面中使用。

注意：定位標記呀和超連接結合使用纔有效。

格式：

<a href=「#標記」>返回標記位置</a>

注意：使用定位標記時，必定要在href值的開始加入#號。

title：說明文字。

（9）表單標籤<form>

表單標籤是最經常使用的標籤，用於與服務端的交互。

輸入標籤<input>：接收用戶輸入信息，type屬性用於指定輸入標籤的類型。

type屬性：

text：文本框，輸入的文本信息直接顯示在框中；

password：密碼框，輸入的文本以圓點●或星號*的形式顯示；

radio：單選框，例如用在性別選擇上；

checkbox：複選框，如興趣愛好的選擇；

hidden：隱藏字段，不顯示在頁面上，可是會隨着表單內容一塊兒提交；

file：能夠進行文件選擇的組件，一般用於附件，或者文件上傳；

submit：提交按鈕，用於提交表單中的內容；

reset：重置按鈕，用於將表單中的內容設置爲初始值；

button：按鈕，能夠爲其自定義事件；

image：圖像，它能夠替代submit按鈕。

選擇標籤<select>：提供用戶選擇內容，如：用戶蘇在的省市，size屬性爲顯示項目個數。

子項標籤<option>：屬性selected沒有屬性值，加載其中一個子項上，那個子項就變成了默認被選項。

多行文本框<textarea>：如：我的信息描述

<label>：用於給個元素定義快捷鍵

for屬性：指定快捷鍵做用的表單元素，必須與要做用的表單元素的id值相同。

accesskey屬性：指定快捷鍵，此快捷鍵須要和alt鍵組合使用。

簡例：

　　<label accesskey=「u」 for=「userid」> 　　 <tr> 　　<td>用戶名（u）：</td> 　　<td><input type=「text」 name=「user」 id=「userid」/></td> 　　 </tr> </label>

無論焦點在何位置，只要按下alt+u鍵就能夠將焦點轉移到用戶名輸入框上，label標籤括住了一整行，用鼠標在這一行上的任何一個位置均可以將焦點轉移到用戶名輸入框。

表單提交方式：默認爲get

格式：<form action=「http://127.0.0.1:10009」 method=「get」>...</form>

method值還能夠爲post

get提交和post提交表單方式的區別：

1.get提交會將表單信息都顯示在瀏覽器地址欄裏，而post提交不會顯示；

2.瀏覽器地址欄有體積限制，若是表單信息太多，那麼get提交方式就行不通了，只能用post提交；

3.兩種提交方式對錶單數據的封裝形式不一樣，get提交將表單數據存儲在消息頭前面，而post提交會將表單數據封裝在數據體當中。

4.get提交對於敏感信息部安全，post提交方式對於敏感信息安全。

5.在提交中文時可能出現亂碼，若是出現亂碼時是用post提交的，那麼能夠在服務端經過修改編碼形式(setCharacterEncoding(「gbk」)方法，指定編碼爲GBK)來使數據正常顯示，若是使用get提交的，在服務端只能經過ISO8859-1將數據編碼一次，再經過指定的碼錶如GBK解碼，由於服務端的這個方法只能將數據體中的數據進行解碼，而get提交時將表單數據存在了消息頭前面，並且tomacat服務端默認的解碼是ISO8859-1。

action：指定數據提交的目的地。

說明：使用表單組件不必定非要定義form標籤，只有須要將數據向服務端提交時纔會用到form標籤。

（10）<pre>：能夠將文本內容按照其在代碼區的格式顯示在網頁上。

（11）<p>：段落標籤

（12）<sub>：下標 <sup>上標

（13）<marquee>使文字動起來</marquee> ：direction屬性控制文字移動方向，behavior 屬性控制移動模式。

（14）<base>標籤

href屬性：指定網頁中全部的超連接的目錄，能夠是本地目錄，也能夠是網絡目錄，地址值的結尾處必定要用/表示目錄，只做用於相對路徑的超連接文件。

格式：<base href=「f：\超連接網頁\」/>

target屬性：指定打開超連接的方式，如_blank表示全部的超連接都在新窗口打開。

（15）<meta>：

name屬性:網頁的描述信息，當取keywords時，content屬性的內容就做爲搜索引擎的關鍵字進行搜索。

http=equiv屬性：模擬HTTP協議的響應消息頭。

例如：

3秒鐘後訪問指定網址

若是不加網址，就表明3秒鐘刷新一次頁面。

（16）<link>標籤

rel屬性：描述目標文檔與當前文檔的關係。

type屬性：文檔類型

media：指定目標文檔在那種設備上起做用。

例：<link rel="stylesheet" type="text/css" media="screen,print" href="1.css" />

2、CSS樣式

1.CSS層疊樣式表

定義：將網頁中的樣式分離出來，徹底由CSS來控制，加強樣式的複用性以及可擴展性。

格式：選擇器{屬性名：屬性值；屬性名：屬性值...}

2.CSS和Html代碼相結合的四種方式：

（1）每個html標籤都有一個style屬性

（2）當頁面有多個標籤有相一樣式時，能夠進行復用，格式：

<style>

css代碼

</ style>

（3）當有多個頁面中的標籤的樣式相同時，還能夠將樣式單獨封裝成一個CSS文件。

經過在每一個頁面中定義：

<style>

@import url(「1.css」);

</style>

（4）經過html中head標籤中的link標籤鏈接一個css文件。

技巧：爲了提升相同的樣式的複用性以及可擴展性，能夠將多個標籤樣式進行單獨定義，並封裝成css文件。

p.css，div.css...

在一個css中使用css的import將多個標籤樣式文件導入，而後在html頁面上，使用link標籤導入這個總的css文件便可。

例如：

1.css

@import rul(「p.css」);

@import url(「div.css」);

選擇器：其實就是樣式要做用的標籤容器。

選擇器分類：1.標籤選擇器：其實就是html中的每個標籤名；

2.類選擇器：其實就是每個標籤中的class屬性，用 . 的形式表示。

只用來給css使用，能夠對不一樣標籤進行相一樣式設定。

3.ID選擇器：其實就是每個標籤中的ID屬性，可是要保證ID的惟一性。

用#來標識，ID不只能夠被css使用，還能夠被javascript使用。

選擇器優先級：ID>class>標籤

擴展選擇器：

1.關聯選擇器：其實就是對標籤中的標籤進行樣式定義，選擇器選擇器...

2.組合選擇器：對多個選擇器進行相一樣式定義，將多個選擇器經過逗號隔開的形式；

3.僞元素選擇器：其實就是元素的一種狀態。

格式：a:link:超連接被點擊前狀態

a:visited:超連接被點擊後狀態

a:hover:懸停在超連接上時的狀態

a:active：點擊超連接時的狀態

2.css濾鏡

3、JavaScript

4、DOM（Document object model）文檔對象模型

DOM樹節點

DHTML：動態html

html css dom javascript

html：將數據進行封裝

dom：將標籤封裝成對象

css：負責標籤中數據的樣式

javascript：將三個進行融合，經過程序設計方式來完成動態效果的操做

DOM其實就是將一些標記型文檔以及文檔中的內容當成對象，將這些文檔以及其中的標籤封裝成對象後能夠在對象中定義其屬性和行爲，能夠方便操做這些對象。

html，xhtml，xml：這些都是標記型文檔。

DHTML：是多個技術的綜合體，叫作動態的html。

DOM在封裝標記型文檔時，有三層模型：

DOM1：針對html文檔

DOM2：針對xhtml

DOM3：針對xml

html負責將數據進行標籤的封裝；

css：負責控制標籤的樣式；

dom：負責將標籤以及標籤中的數據封裝成對象；

javascript：負責經過程序設計方式來操做這些對象。

標籤之中存在着層次關係：

html

|--head

|--base

|--mata

|--link

|--style

|--body

|--table

|--tbody

|--tr

|--td

|--dh

|--div

|--form

|--span

|--a

|--dl

|--dt

|--dd

經過這個標籤層次，能夠形象的看作是一個樹形結構，那麼咱們也能夠理解爲標記型文檔一加載進內存就是一個棵DOM樹，這些標籤以及標籤的數據都是這棵樹上的節點。

DOM對已標記型文檔的解析有一個弊端就是文檔過大，相對消耗資源，對於大型文檔可使用SAX這種方式解析。

節點類型：

標籤型節點：類型1

屬性節點：類型2

文本型節點：類型3

註釋型節點：類型8

document：類型9

節點之間的關係：

獲取父節點：parentNode

獲取子節點：childNodes

兄弟節點：上一個兄弟節點：previousSibling

下一個兄弟節點：nextSibing

獲取能夠經過節點的層次關係完成，也能夠經過document對象完成：

getElementById：經過id屬性值獲取對應的節點對象，若是有多個id值相同，獲取到的是第一個id所屬對象，儘可能保證ID惟一性，返回的是一個對象；

getelementByName：經過標籤的name屬性值獲取對象，返回的是一堆對象，其實就是一個對象數組。

getelementByTagName：既沒有id也沒有name值時，可經過

5、複習回顧

5.一、在網頁裏經過按鈕建立一個表格。

思路：

1.建立一個table節點，document.createElement("table")；

2.經過table節點的insertRow()方法建立表格的行對象；

3.經過行節點的insertCell()方法建立單元格對象；

4.給單元格中添加數據

a.建立一個節點如文本節點，document.createTextNode(「文本內容」)，

經過單元格對象的appendChild方法將文本節點添加到單元格的尾部。

b.直接經過單元格的innerHTML方法添加單元格中的元素

5.創建好表格節點，添加到DOM樹中，也就是頁面的指定位置上。

代碼以下：

　　<script type="text/javascript"> 　　function creatTab() 　　{ 　　 var tbNode = document.createElement("table"); 　　 var hs = document.getElementsByName("hs")[0].value; 　　 var ls = document.getElementsByName("ls")[0].value; 　　 for(var x=0;x<hs;x++) 　　 { 　　 var trNode = tbNode.insertRow(); 　　 for(var y=0;y<ls;y++) 　　 { 　　 var tdNode = trNode.insertCell(); 　　 tdNode.innerHTML = "<input type='button' value='button'/>"; 　　 } 　　 } 　　 　　 　　 　　 document.getElementsByTagName("div")[0].appendChild(tbNode); 　　} 　　</script>

5.2刪除表格中的行和列

思路：

1.刪除行：獲取表格對象，經過表格對象中的deleteRow方法，將指定的行索引傳入deleteRow方法中。

2.刪除列：表格沒有直接刪除列的方法，要經過刪除每一行中指定的單元格來完成刪除列的動做：獲取全部行對象，遍歷，經過行對象的deleteCell方法將指定單元格刪除。

5.3對錶格中的數據進行排序

思路：

1.獲取表格中全部的行對象；

2.定義臨時容器，將須要進行排序的行對象存入到數組中；

3.對數組進行排序，經過比較每個行對象中指定的單元格中的數據，若是是整數須要parseInt轉換，從新排列行順序；

4.將排序後的數組經過遍歷，經過tbody節點的appendChild方法將每個行對象從新添加回表格；

5.其實排序就是每個行對象的引用取出。

5.4表格的行顏色間隔顯示，並在鼠標指定的航商高亮顯示。

思路：

1.獲取全部的行對象，將須要間隔顯示顏色的行對象進行動態的className屬性設定，須要提早定義好類選擇器；

2.爲了完成高亮顯示，須要用到兩個時間：onmouseover(鼠標進入) onmouseout(鼠標移出)；

3.爲了方即可以在遍歷對象時，將每個行對象都進行兩個事件屬性的設定，並經過匿名函數來完成該事件的處理；

4.高亮的原理就是將鼠標進入時的指定顏色改變，改變前要記錄行原來的樣式，這樣才能夠在鼠標離開時將行樣式還原；

5.該樣式須要在頁面加載完後直接顯示，因此使用的是window.onload事件完成。

5.5完成一個與css手冊中同樣的示例。

要求：經過下拉菜單的選擇指定樣式屬性的使用效果

</pre><pre class="html" name="code" snippet_file_name="blog_20140201_6_8998507" code_snippet_id="176048"><style type="text/css"> #cssid{ background-color:#F93; width:300px; height:100px; } #textid{ background-color:#CCC; width:300px; } </style> <script type="text/javascript"> function change() { //獲取select節點 var seNode = document.getElementById("selid"); //獲取select中被選項的值 var value = seNode.options[seNode.selectedIndex].value; var divNode1 = document.getElementById("cssid"); var divNode2 = document.getElementById("textid"); divNode1.style.textTransform = value; divNode2.innerText = "text-transfom:"+value; } </script> </head> <body> <div id="cssid"> Good good study,day day up! </div> <p> </p> <select id="selid" onchange="change()"> <option value="none">--text-transform--</option> <option value="capitalize">首字母大寫</option> <option value="uppercase">全部字母大寫</option> <option value="lowercase">全部字母小寫</option> </select> <div id="textid"> text-transform:none </div> </body>

5.6表單中的組件。

單選框和複選框都有一個屬性來表示選中與否的狀態：checked

要求：完成一個對多個複選框全選的操做

<script type="text/javascript"> function getSum() { //獲取全部checkbox節點 var ckNodes = document.getElementsByName("item"); var sum=0; for(var x=0;x<ckNodes.length;x++) { //判斷checkbox是否被選中，若是選中就累加其value值 if(ckNodes[x].checked) { sum+=parseInt(ckNodes[x].value); } } var spanNode = document.getElementById("sum"); var str = sum+"元"; spanNode.innerHTML=str.fontcolor("#ff0000").fontsize(7); } function method() { /* 獲取該節點的三種方式： 1.在body節點的方法名裏傳入節點角標：onclick="method(0)" 在script代碼裏的方法名爲：method(index); 在方法裏經過這種方法獲取節點：var qxNode = document.getElementsByName("qx")[index]; 2.在body節點的方法名裏傳入this：onclick="method(this)" 在script代碼的方法裏直接獲取：method(qxNode); 3.body節點的方法裏不傳入任何東西，在script代碼裏直接經過此方法獲取：var qxNode = event.srcElement; //誰調用此method就獲取誰的節點，簡單方便。 */ //var qxNode = document.getElementsByName("qx")[0]; var qxNode = event.srcElement; var ckNodes = document.getElementsByName("item"); for(var x=0;x<ckNodes.length;x++) { ckNodes[x].checked=qxNode.checked; } } </script>

5.7獲取鼠標的座標，讓指定區域隨着鼠標移動

獲取鼠標座標：event.x event.y

指定區域隨鼠標移動其實就是改變了指定區域的left top屬性值。

這裏須要用到的事件：body對象的onmousemove事件。

還須要用到一個css樣式，直接定義頁面，全部的區域都在同一層次，爲了對某一個區域進行定位，能夠將該區域分離到另一個層次，用到了css中的position屬性。

window.onload=function() { //圖片跟着鼠標走 document.body.onmousemove=function() { var adNode = document.getElementById("ad"); adNode.style.left = event.x; adNode.style.top = event.y; } } function closed() { //點擊廣告後關閉樣式 var adNode = document.getElementById("ad"); adNode.style.display="none"; }