DIV+CSS+JS基礎+正則表達式

時間 2020-06-14

原文原文鏈接

.。。。。。。。。。。。。。。HTML系列。。。。。。。。。。。。。。。。。。。。

DIV元素是用來爲HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標籤和結束標籤之間的全部內容都是用來構成這個塊的，其中所包含元素的特性由DIV標籤的屬性來控制，或者是經過使用樣式表格式化這個塊來進行控制。

http://baike.baidu.com/view/939547.html?wtp=tt

a.HTML基本代碼：

   <html> 
 
   <head> 
 
   <title> title </title> 
 
   </head> 
 
   <body> 
 
   dddddlld 
 
   </body> 
 
   </html>

標籤網址：http://www.w3school.com.cn/tags/tag_doctype.asp

<h1>---<h6> 標題從大小。

<p></p> 表示段落

<br> 換行符此標籤沒結束標籤。

註釋標籤。

<hr> 水平線

<del> </del> 刪除文本

<ins> </ins> 下劃線文本

字體格式化：

http://www.w3school.com.cn/html/html_formatting.asp

<b> </b> 粗體

<strong> </strong> 增強

<big> </big> 大號

<em> </em> 增強

<i> </i> 斜體

<sub></sub>下注釋

<sup></sup>上註釋

<address></address> 表示地址。

<bdo dir="rtl"></bdo> 文字反向輸出。

<blockquote></blockquote> 長引用

<q></q> 短引用

http://www.w3school.com.cn/tiy/t.asp?f=html_quotations

<pre></pre> 預格式文本，很適合顯示計算機代碼，程序。

http://www.w3school.com.cn/tiy/t.asp?f=html_preformattedtext

一個無序列表：

<ul>

</ul>

一個有序列表：

<ol>

</ol>

字符實體格式：&#000 ;

基本的注意事項 - 有益的提示

當您寫 HTML 文本的時候，你永遠也無法肯定這些文本在另外一臺顯示器上是如何顯示的。一些人使用大顯示器，而另外一些使用小的。當用戶調整視窗的分辨率時，這些文本就會被從新格式化。因此不要經過在文本中添加空行和空格的辦法在你的編輯器中格式化文本。

HTML 會裁掉文本中全部的空格。任何數量的空格都被按一個空格計數。另外，在 HTML 中，一個空行也被看成一個空格。

使用空的段落標記 <p> 去插入一個空行是個壞習慣。用 <br> 標籤代替它！（可是不要用 <br> 標籤去建立列表。不要着急，您將在稍後的篇幅學習到 HTML 列表。）

您也許已經注意到了，在沒有結束標籤 </p> 的狀況下，<p> 標籤依然能夠正常工做。不過不要這樣作！下一個版本的 HTML 將不容許忽略任何的結束標籤。

HTML 會自動地在某些元素先後添加一個額外的空行，好比段落、標題元素先後。

使用水平線 (<hr> 標籤) 來分隔文章中的小節是一個辦法（但並非惟一的辦法）。

3.超連接

<a href="url">Text to be displayed</a>

http://www.w3school.com.cn/html/html_links.asp

發送EMAIL超連接時，應用 %20替換空格。

http://www.w3school.com.cn/tiy/t.asp?f=html_mailto2

4.框架

http://www.w3school.com.cn/html/html_frames.asp

5.表格的

基本格式:

<table>

<tr>

</tr>

</table>

關於cellpadding, table 屬性

http://zhidao.baidu.com/question/7407260.html

關於cellspacing,table屬性

http://www.w3school.com.cn/tiy/t.asp?f=html_table_cellspacing

關於table的frame屬性

http://hi.baidu.com/tuwicn/blog/item/13f97366386d3025ab184ce5.html

6.表單

<form>

<input>

</form>

http://www.w3school.com.cn/html/html_forms.asp

7圖像

圖像標籤（<img>）和源屬性（Src）

在 HTML 中，圖像由 <img> 標籤訂義。

<img> 是空標籤，意思是說，它只包含屬性，而且沒有閉合標籤。

要在頁面上顯示圖像，你須要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

定義圖像的語法是：

8頭信息

頭元素

頭元素包含關於文檔的概要信息，也稱爲元信息（meta-information）。Meta 意爲「關於某方面的信息」。

能夠這麼說，元數據（meta-data）是關於數據的信息，而元信息是關於信息的信息。

頭元素內的信息

頭元素內的元素不會被瀏覽器顯示出來。

根據 HTML 標準，僅有幾個標籤在 HTML 的頭部分是合法的。它們是：<base>, <link>, <meta>, <title>, <style> 和 <script>。

這是一個不合法的結構：

<head>

</head>

9.URL

URL（統一資源定位器）

一個稱爲 URL（統一資源定位器）的東西用於對萬維網上的文檔（或其餘數據）進行尋址。一個完整的網址，例如：http://www.w3school.com.cn/html/lastpage.html，遵照以下語法規則：

scheme://host.domain:port/path/filename

Scheme 定義因特網服務的類型。最流行的類型是 http。

domain（域）定義因特網域名，好比：w3school.com.cn。

host（主機）定義此域中的主機。若是被省略，缺省的支持 http 的主機是 www。

:port(端口)定義主機的端口號。端口號一般是被省略的。缺省的端口號是 80。

path（路徑）定義服務器上的路徑（一個輔助的路徑）。若是路徑被省略，資源（文檔）會被定位到網站的根目錄。

filename（文件名）定義文檔的名稱。缺省的文件名通常會是 default.asp 或者 index.html，或者依據 WEB 服務器設置的其餘文件名。

編者注：URL 的英文全稱是 Uniform Resource Locator，中文也譯爲「統一資源定位符」。

URL Schemes

如下是其中一些最流行的 scheme：

Schemes 訪問

file 本地 PC 上的文件。

ftp FTP 服務器上的文件。

http World Wide Web 服務器上的文件。

gopher Gopher 服務器上的文件。

news Usenet 新聞組。

telnet Telnet 鏈接。

WAIS WAIS 服務器上的文件。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

。。。。。。。。。。。。。。。。。CSS系列。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

http://www.w3school.com.cn/css/index.asp CSS教程

http://www.w3school.com.cn/css/css_howto.asp 如何建立CSS

1.樣式層疊

層疊次序

當同一個 HTML 元素被不止一個樣式定義時，會使用哪一個樣式呢？

通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

1.瀏覽器缺省設置

2.外部樣式表

3.內部樣式表（位於 <head> 標籤內部）

4.內聯樣式（在 HTML 元素內部）

所以，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味着它將優先於如下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。

2 css 背景

背景色：background-color

背景圖像：background-image

背景重複：background-repeat

背景定位：background-position

背景關聯：background-attachment

background 簡寫屬性，做用是將背景屬性設置在一個聲明中。

background-attachment 背景圖像是否固定或者隨着頁面的其他部分滾動。

background-color 設置元素的背景顏色。

background-image 把圖像設置爲背景。

background-position 設置背景圖像的起始位置。

background-repeat 設置背景圖像是否及如何重複。

3. CSS 文本

color 設置文本顏色

direction 設置文本方向。

line-height 設置行高。

letter-spacing 設置字符間距。

text-align 對齊元素中的文本。

text-decoration 向文本添加修飾。

text-indent 縮進元素中文本的首行。

text-shadow 設置文本陰影。CSS2 包含該屬性，可是 CSS2.1 沒有保留該屬性。

text-transform 控制元素中的字母。

unicode-bidi 設置文本方向。

white-space 設置元素中空白的處理方式。

word-spacing 設置字間距。

4.css 字體

可使用font-family屬性

font 簡寫屬性。做用是把全部針對字體的屬性設置在一個聲明中。

font-family 設置字體系列。

font-size 設置字體的尺寸。

font-size-adjust 當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。）

font-stretch 對字體進行水平拉伸。（CSS2.1 已刪除該屬性。）

font-style 設置字體風格。

font-variant 以小型大寫字體或者正常字體顯示文本。

font-weight 設置字體的粗細。

http://www.w3school.com.cn/css/css_font.asp

5.css 列表

要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標誌類型。

例如，在一個無序列表中，列表項的標誌 (marker) 是出如今各列表項旁邊的圓點。在有序列表中，標誌多是字母、數字或另外某種計數體系中的一個符號。

要修改用於列表項的標誌類型，可使用屬性 list-style-type：

ul {list-style-type : square}

時，常規的標誌是不夠的。你可能想對各標誌使用一個圖像，這能夠利用 list-style-image 屬性作到：

ul li {list-style-image : url(xxx.gif)}只須要簡單地使用一個 url() 值，就可使用圖像做爲標誌。

CSS列表屬性：

list-style 簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中。

list-style-image 將圖象設置爲列表項標誌。

list-style-position 設置列表中列表項標誌的位置。

list-style-type 設置列表項標誌的類型。

6.CSS表格

CSS TABLE 屬性

CSS 表格屬性容許你設置表格的佈局。（請注意，本節介紹的不是如何使用表來創建佈局，而是要介紹 CSS 中表自己如何佈局。）

屬性描述

border-collapse 設置是否把表格邊框合併爲單一的邊框。

border-spacing 設置分隔單元格邊框的距離。（僅用於 "separated borders" 模型）

caption-side 設置表格標題的位置。

empty-cells 設置是否顯示錶格中的空單元格。（僅用於 "separated borders" 模型）

table-layout 設置顯示單元、行和列的算法。

7.CSS框模型

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框之外是外邊距，外邊距默認是透明的，所以不會遮擋其後的任何元素。

內邊距、邊框和外邊距都是可選的，默認值是零。可是，許多元素將由用戶代理樣式表設置外邊距和內邊距。能夠經過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。這能夠分別進行，也可使用通用選擇器對全部元素進行設置：

* {

margin: 0;

padding: 0;

}

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的尺寸

1)CSS 內邊距

元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。

CSS padding 屬性定義元素邊框與元素內容之間的空白區域。

CSS 內邊距屬性

屬性描述

padding 簡寫屬性。做用是在一個聲明中設置元素的所內邊距屬性。

padding-bottom 設置元素的下內邊距。

padding-left 設置元素的左內邊距。

padding-right 設置元素的右內邊距。

padding-top 設置元素的上內邊距。

2) CSS的邊框

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。

CSS border 屬性容許你規定元素邊框的樣式、寬度和顏色。

CSS 邊框

在 HTML 中，咱們使用表格來建立文本週圍的邊框，可是經過使用 CSS 邊框屬性，咱們能夠建立出效果出色的邊框，而且能夠應用於任何元素。

元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。

每一個邊框有 3 個方面：寬度、樣式，以及顏色。

a）邊框與背景

CSS 規範指出，邊框繪製在「元素的背景之上」。這很重要，由於有些邊框是「間斷的」（例如，點線邊框或虛線框），元素的背景應當出如今邊框的可見部分之間。

CSS2 指出背景只延伸到內邊距，而不是邊框。後來 CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景。大多數瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不一樣的表現。

b）邊框的樣式

樣式是邊框最重要的一個方面，這不是由於樣式控制着邊框的顯示（固然，樣式確實控制着邊框的顯示），而是由於若是沒有樣式，將根本沒有邊框。

CSS 的 border-style 屬性定義了 10 個不一樣的非 inherit 樣式，包括 none。

例如，您能夠爲把一幅圖片的邊框定義爲 outset，使之看上去像是「凸起按鈕」：

a:link img {border-style: outset;}定義多種樣式

您能夠爲一個邊框定義多個樣式，例如：

p.aside {border-style: solid dotted dashed double;}上面這條規則爲類名爲 aside 的段落定義了四種邊框樣式：實線上邊框、點線有邊框、虛線下邊框和一個雙線左邊框。

咱們又看到了這裏的值採用了 top-right-bottom-left 的順序，討論用多個值設置不一樣內邊距時也見過這個順序。

定義單邊樣式

若是您但願爲元素框的某一個邊設置邊框樣式，而不是設置全部 4 個邊的邊框樣式，可使用下面的單邊邊框樣式屬性：

border-top-style

border-right-style

border-bottom-style

border-left-style

所以這兩種方法是等價的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

c）邊框的寬度

您能夠經過 border-width 屬性爲邊框指定寬度。

爲邊框指定寬度有兩種方法：能夠指定長度值，好比 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值）和 thick。

註釋：CSS 沒有定義 3 個關鍵字的具體寬度，因此一個用戶代理可能把 thin 、medium 和 thick 分別設置爲等於 5px、3px 和 2px，而另外一個用戶代理則分別設置爲 3px、2px 和 1px。

因此，咱們能夠這樣設置邊框的寬度：

p {border-style: solid; border-width: 5px;}

其它見：http://www.w3school.com.cn/css/css_border.asp

CSS 邊框屬性

屬性描述

border 簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。

border-style 用於設置元素全部邊框的樣式，或者單獨地爲各邊設置邊框樣式。

border-width 簡寫屬性，用於爲元素的全部邊框設置寬度，或者單獨地爲各邊邊框設置寬度。

border-color 簡寫屬性，設置元素的全部邊框中可見部分的顏色，或爲 4 個邊分別設置顏色。

border-bottom 簡寫屬性，用於把下邊框的全部屬性設置到一個聲明中。

border-bottom-color 設置元素的下邊框的顏色。

border-bottom-style 設置元素的下邊框的樣式。

border-bottom-width 設置元素的下邊框的寬度。

border-left 簡寫屬性，用於把左邊框的全部屬性設置到一個聲明中。

border-left-color 設置元素的左邊框的顏色。

border-left-style 設置元素的左邊框的樣式。

border-left-width 設置元素的左邊框的寬度。

border-right 簡寫屬性，用於把右邊框的全部屬性設置到一個聲明中。

border-right-color 設置元素的右邊框的顏色。

border-right-style 設置元素的右邊框的樣式。

border-right-width 設置元素的右邊框的寬度。

border-top 簡寫屬性，用於把上邊框的全部屬性設置到一個聲明中。

border-top-color 設置元素的上邊框的顏色。

border-top-style 設置元素的上邊框的樣式。

border-top-width 設置元素的上邊框的寬度。

3) 邊框的外邊距

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外建立額外的「空白」。

設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

CSS margin 屬性

設置外邊距的最簡單的方法就是使用 margin 屬性。

margin 屬性接受任何長度單位，能夠是像素、英寸、毫米或 em。

margin 能夠設置爲 auto。更常見的作法是爲外邊距設置長度值。下面的聲明在 h1 元素的各個邊上設置了 1/4 英寸寬的空白：

h1 {margin : 0.25in;}下面的例子爲 h1 元素的四個邊分別定義了不一樣的外邊距，所使用的長度單位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}與內邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍着元素順時針旋轉的：

margin: top right bottom left另外，還能夠爲 margin 設置一個百分比數值：

p {margin : 10%;}百分數是相對於父元素的 width 計算的。上面這個例子爲 p 元素設置的外邊距是其父元素的 width 的 10%。

margin 的默認值是 0，因此若是沒有爲 margin 聲明一個值，就不會出現外邊距。可是，在實際中，瀏覽器對許多元素已經提供了預約的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會在每一個段落元素的上面和下面生成「空行」。所以，若是沒有爲 p 元素聲明外邊距，瀏覽器可能會本身應用一個外邊距。固然，只要你特別做了聲明，就會覆蓋默認樣式

CSS 外邊距屬性

屬性描述

margin 簡寫屬性。在一個聲明中設置全部外邊距屬性。

margin-bottom 設置元素的下外邊距。

margin-left 設置元素的左外邊距。

margin-right 設置元素的右外邊距。

margin-top 設置元素的上外邊距。

8.CSS 定位 position

CSS 定位屬性

CSS 定位屬性容許你對元素進行定位。

屬性描述

position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

值描述

static 默認。位置設置爲 static 的元素，它始終會處於頁面流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。

relative 位置被設置爲 relative 的元素，可將其移至相對於其正常位置的地方，所以 "left:20" 將向元素的 LEFT 位置添加 20 個像素。

absolute 位置設置爲 absolute 的元素，可定位於相對於包含它的元素的指定座標。此元素的位置可經過 "left"、"top"、"right" 以及"bottom" 屬性來規定。

fixed 位置被設置爲 fixed 的元素，可定位於相對於瀏覽器窗口的指定座標。此元素的位置可經過 "left"、"top"、"right" 以及"bottom" 屬性來規定。不論窗口滾動與否，元素都會留在那個位置。工做於 IE7（strict 模式）。

top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow 設置當元素的內容溢出其區域時發生的事情。

clip 設置元素的形狀。元素被剪入這個形狀之中，而後顯示出來。

vertical-align 設置元素的垂直對齊方式。

z-index 設置元素的堆疊順序。

詳見：http://www.w3school.com.cn/css/css_positioning.asp

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

附錄：關於 display: inline 的一些

Web頁中的HTML元素的排版佈局規則

咱們知道每一個Web頁面都是由一大堆的HTML元素組成的，咱們把每對<element>...</element>這樣的結構稱爲box，在Web頁面的排版佈局中，瀏覽器把這樣的box做爲排版的元素，而且把box分爲了inline level和block level兩種類型。

固然這個box內是能夠容納不少其它的HTML標籤的，可是無論它的內部有多少的TAGs，box都被咱們當作是一個排版元素，好比：<div style="border: solid 1px blue"> abc </div>和<table> <tr> <td> <span> <i> abc </i> </span> </td> </tr> </table>就能夠被當作是兩個排版元素div和table(固然div和table的內部還能夠繼續細分子的box)。

在browser的默認排版策略(沒有任何的CSS修飾)中，box的inline和block分別指的是：

Inline Level：元素按從左向右排列，就像咱們輸入文字同樣，一行容納不下了自動分行繼續顯示。好比text、<a>、<img>、<span>等都屬於inline element(除了30個block level的TAGs，和幾個none的TAGs，其它大多數的標籤都是inline level的；

Block Level：相對於它的parentElement構成的box來講，它的排版始終會獨自佔一行，就是在block level的元素後必然會新起一行。好比<form>、<hr>、<div>、<table>、<p>等30個TAGs都屬於block element。

在大多數的狀況下，雖然咱們徹底能夠在inline level的元素中嵌套block level的元素，但是這樣會對它們的顯示效果帶來一些混淆和不肯定。好比<div>正常狀況下是單獨佔一行的，但是咱們卻可使用一個inline level的元素<span>把<div>包裹起來，這時這個<span><div>...</span>構成的box排版屬性還是inline的(e.g.

span&div

)。但是若是咱們用<span>把<table>包裹起來，這時這個<span><table>...</span>構成的box的排版屬性卻成了block的了(e.g. span&table

)。

其實inline和block直觀的表現就是，好比<a>link1 </a>text1 <a>link2 </a>text2 ...這樣的HTML在browser裏是能夠顯示一行上(preview:link1 text1 link2 text2 ...)，而<table> <tr> <td> text1 </td> </tr> </table> <table> <tr> <td> text2 </td> </tr> </table> ...是不能顯示在一行上的(preview: text1

text2

)。

以上是browser對於box的默認的排版策略，而咱們能夠經過css來改變這些默認的策略。使用css中提供的position(配合top,left)、float和clear三個屬性就能夠實現用戶定製Web頁中元素的排版佈局策略。

詳解visibility屬性

CSS控制內容顯示2008年08月28日星期四上午 08:27

咱們先看看什麼是CSS的visibility屬性？

　　設置或檢索是否顯示對象。

　　請區別與display屬性不一樣，此屬性爲隱藏的對象保留其佔據的物理空間。也就是說：

　　 visibility屬性取值爲hidden時，只是改變了元素的可見性，元素所佔有的空間依然存在。

　　visibility是一個不可繼承的屬性，若是但願對象爲可視，其父對象也必須是可視的。

　　CSS的visibility屬性有些哪取值？

　　inherit：繼承上一個父對象的可見性

　　visible：對象可視

　　hidden：對象隱藏

　　collapse：主要用來隱藏表格的行或列。隱藏的行或列可以被其餘內容使用。對於表格外的其餘對象，其做用等同於hidden。IE5.5尚不支持此屬性。

　　咱們看下面的兩個例子來理解visibility屬性：

　　咱們在文字中插入一個圖片，請注意文字與圖片的位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>52CSS</title> <style type="text/css"> * {margin:0;padding:0;font-size:13px;color:#000;} #test {width:300px; margin:20px auto; background:#ccc;} </style> </head> <body> <div id="test"> 52CSS.com 我愛CSS-Web標準化 Div+css教程<img src="http://www.52css.com/skins/logo3.gif" alt="52CSS.com" />至力於Web標準在中國的應用及發展 </div> </body> </html>

　　咱們對圖片應用visibility:hidden，再來看看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title><style type="text/css">* {margin:0;padding:0;font-size:13px;color:#000;}#test {width:300px; margin:20px auto; background:#ccc;}#test img{visibility:hidden;}</style></head><body><div id="test">52CSS.com 我愛CSS-Web標準化 Div+css教程<img src="http://www.52css.com/skins/logo3.gif" alt="52CSS.com" />至力於Web標準在中國的應用及發展</div></body></html>

　　咱們發現圖片不見了，但它所佔的空間依然存在，文字的位置沒

----------------------------------------------------------------------------------------------------------------------------------------------------------

鼠標的一些圖標變化

http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor

CSS 的僞類

a:link {color: #FF0000} /* 未訪問的連接 */

a:visited {color: #00FF00} /* 已訪問的連接 */

a:hover {color: #FF00FF} /* 鼠標移動到連接上 */

a:active {color: #0000FF} /* 選定的連接 */

http://www.w3school.com.cn/css/css_pseudo_classes.asp

CSS 僞元素 (Pseudo-elements)實例：

語法：

僞元素的語法：

選擇器 : 僞元素 { 屬性: 值 }CSS 類也能夠與僞元素配合使用：

選擇器 . 類: 僞元素 { 屬性: 值 }

:first-line 僞元素

"first-line" 僞元素用於向某個選擇器中的文字的首行添加特殊樣式：

p {font-size: 12pt}

p:first-line {color: #0000FF; font-variant: small-caps}

<p>Some text that ends up on two or more lines</p>

在上面的例子中，瀏覽器顯示根據 first-line 僞元素格式化的第一行。瀏覽器是依靠瀏覽器窗口的尺寸來進行分行的。

提示：first-line 僞元素僅能被用於塊級元素。

提示：下面的屬性能夠被應用到 first-line 僞元素。

font 屬性

color 屬性

background 屬性

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

:first-letter 僞元素

first-letter 僞元素用於向某個選擇器中的文本的首字母添加特殊的樣式：

p {font-size: 12pt}

p:first-letter {font-size: 200%; float: left}

<p>The first words of an article.</p>輸出的效果相似於：

___

| he first

| words of an

article.font 屬性

color 屬性

background 屬性

margin 屬性

padding 屬性

border 屬性

text-decoration

vertical-align (僅當float爲none時)

text-transform

line-height

float

clear

http://www.w3school.com.cn/css/css_pseudo_elements.asp

CSS2 媒介類型

v不一樣的媒介類型

註釋：媒介類型名稱對大小寫不敏感。

瀏覽器支持：IE: Internet Explorer, F: Firefox, N: Netscape。

W3C：「W3C」列的數字顯示出屬性背景由哪一個 CSS 標準定義（CSS1 仍是 CSS2）。

媒介類型描述

all 用於全部的媒介設備。

aural 用於語音和音頻合成器。

braille 用於盲人用點字法觸覺回饋設備。

embossed 用於分頁的盲人用點字法打印機。

handheld 用於小的手持的設備。

print 用於打印機。

projection 用於方案展現，好比幻燈片。

screen 用於電腦顯示器。

tty 用於使用固定密度字母柵格的媒介，好比電傳打字機和終端。

tv 用於電視機類型的設備。

----------------------------------------------------------------------------------------------------------------------------------------------------------

爲搜索引擎準備的內容

代碼以下，替換成你本身站點的內容就能夠：

? 容許搜索機器人搜索站內全部連接。若是你想某些頁面不被搜索，推薦採用 robots.txt 方法

? 設置站點做者信息

? 設置站點版權信息

? 站點的簡要介紹(推薦)

? 站點的關鍵詞(推薦)

w3c, w3, w3cn, ajie" name="keywords" />

先介紹這麼多。補充說明，前面花了 5 節都是講 head 區的代碼，實際頁面內容還一字未提，呵呵，不要急，其實 head 區

很是重要的，看一個頁面的 head 的代碼就能夠知道設計師是否夠專業。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－JAVASCRIPT系列－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

http://www.w3school.com.cn/js/ javascript教程

1.JAVAscript 的位置

當頁面載入時，會執行位於 body 部分的 JavaScript。

當被調用時，位於 head 部分的 JavaScript 纔會被執行。

也可經過外部調用。外部調用時，外部的語句不加<script></script>

2.javascript註釋

單行的以 "//" 開始

多行註釋以"/*"開始以"*/"結束。

3.javascript 的變量

正如代數同樣，JavaScript 變量用於保存值或表達式。

能夠給變量起一個簡短名稱，好比 x，或者更有描述性的名稱，好比 length。

JavaScript 變量也能夠保存文本值，好比 carname="Volvo"。

JavaScript 變量名稱的規則：

變量對大小寫敏感（y 和 Y 是兩個不一樣的變量）

變量必須以字母或下劃線開始

註釋：因爲 JavaScript 對大小寫敏感，變量名也對大小寫敏感。

聲明（建立） JavaScript 變量

在 JavaScript 中建立變量常常被稱爲「聲明」變量。

您能夠經過 var 語句來聲明 JavaScript 變量：

var x;

var carname;

在以上聲明以後，變量並無值，不過您能夠在聲明它們時向變量賦值：

var x=5;

var carname="Volvo";

註釋：在爲變量賦文本值時，請爲該值加引號。

4.條件運算符

條件運算符

JavaScript 還包含了基於某些條件對變量進行賦值的條件運算符。

語法

variablename=(condition)?value1:value2 例子

greeting=(visitor=="PRES")?"Dear President ":"Dear ";若是變量 visitor 中的值是 "PRES"，則向變量 greeting 賦值 "Dear President "，不然賦值 "Dear"。

5.switch 語句

JavaScript Switch 語句

若是但願選擇執行若干代碼塊中的一個，你可使用 switch 語句：

語法：

switch(n)

{

case 1:

執行代碼塊 1

break

case 2:

執行代碼塊 2

break

default:

若是n即不是1也不是2，則執行此代碼

}

6.JS 消息框

a.警告框

警告框常常用於確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

語法：

alert("文本")

b.確認框

確認框用於使用戶能夠驗證或者接受某些信息。

當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。

若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

語法：

confirm("文本")

c.提示框

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

語法：

prompt("文本","默認值")

7. isNaN(x)

用於檢測是不是非數值。

返回值

若是 x 是特殊的非數字值 NaN（或者能被轉換爲這樣的值），返回的值就是 true。若是 x 是其餘值,則返回 false。

8，onerror 事件

咱們剛講過如何使用 try...catch 聲明來捕獲網頁中的錯誤。如今，咱們繼續講解如何使用 onerror 事件來達到相同的目的。

只要頁面中出現腳本錯誤，就會產生 onerror 事件。

若是須要利用 onerror 事件，就必須建立一個處理錯誤的函數。你能夠把這個函數叫做 onerror 事件處理器 (onerror event handler)。這個事件處理器使用三個參數來調用：msg（錯誤消息）、url（發生錯誤的頁面的 url）、line（發生錯誤的代碼行）。

語法：

onerror=handleErrfunction handleErr(msg,url,l)

{

//Handle the error here

return true or false

}瀏覽器是否顯示標準的錯誤消息，取決於 onerror 的返回值。若是返回值爲 false，則在控制檯 (JavaScript console) 中顯示錯誤消息。反之則不會。

9.JS對象字符串string

http://www.w3school.com.cn/js/jsref_obj_string.asp

10.JS對象日期 Date

http://www.w3school.com.cn/js/js_obj_date.asp

11.js對象數組 Array

http://www.w3school.com.cn/js/js_obj_array.asp

concat() 合併數組：數組A.concat(數組B)

12.js對象 Math 函數

http://www.w3school.com.cn/js/js_obj_math.asp

13.js對象 RegExp

什麼是 RegExp？

RegExp 是正則表達式的縮寫。

當您檢索某個文本時，可使用一種模式來描述要檢索的內容。RegExp 就是這種模式。

簡單的模式能夠是一個單獨的字符。

更復雜的模式包括了更多的字符，並可用於解析、格式檢查、替換等等。

您能夠規定字符串中的檢索位置，以及要檢索的字符類型，等等。

定義 RegExp

RegExp 對象用於存儲檢索模式。

經過 new 關鍵詞來定義 RegExp 對象。如下代碼定義了名爲 patt1 的 RegExp 對象，其模式是 "e"：

var patt1=new RegExp("e");當您使用該 RegExp 對象在一個字符串中檢索時，將尋找的是字符 "e"。

RegExp 對象的方法

RegExp 對象有 3 個方法：test()、exec() 以及 compile()。

http://www.w3school.com.cn/js/js_obj_regexp.asp

14.JS 函數調用

<html>

<head>

function myfunction()

{

alert("您好！")

}

</script>

</head>

<body>

<form>

</form>

<p>經過點擊這個按鈕，能夠調用一個函數。該函數會提示一條消息。</p>

</body>

</html>

15.js 事件

onload 和 onUnload

當用戶進入或離開頁面時就會觸發 onload 和 onUnload 事件。

onload 事件經常使用來檢測訪問者的瀏覽器類型和版本，而後根據這些信息載入特定版本的網頁。

onload 和 onUnload 事件也常被用來處理用戶進入或離開頁面時所創建的 cookies。例如，當某用戶第一次進入頁面時，你可使用消息框來詢問用戶的姓名。姓名會保存在 cookie 中。當用戶再次進入這個頁面時，你可使用另外一個消息框來和這個用戶打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件一般相互配合用來驗證表單。

下面是一個使用 onChange 事件的例子。用戶一旦改變了域的內容，checkEmail() 函數就會被調用。

onSubmit

onSubmit 用於在提交表單以前驗證全部的表單域。

下面是一個使用 onSubmit 事件的例子。當用戶單擊表單中的確認按鈕時，checkForm() 函數就會被調用。倘若域的值無效，這次提交就會被取消。checkForm() 函數的返回值是 true 或者 false。若是返回值爲true，則提交表單，反之取消提交。

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用來建立「動態的」按鈕。

下面是一個使用 onMouseOver 事件的例子。當 onMouseOver 事件被腳本偵測到時，就會彈出一個警告框：

<a href="http://www.w3school.com.cn"

onmouseover="alert('An onMouseOver event');return false">

</a>

16.

從新聲明 JavaScript 變量

若是您再次聲明瞭 JavaScript 變量，該變量也不會丟失其原始值。

var x=5;

var x;

在以上語句執行後，變量 x 的值仍然是 5。在從新聲明該變量時，x 的值不會被重置或清除。

17.js 字符串處理

http://www.w3school.com.cn/js/js_obj_string.asp

18. 輸入驗證：數字或者非空的

   <html> 
 
   <head> 
 
     <script language=javascript type="text/javascript"> 
 
        function checkNumeric(objName, form) 
 
       { 
 
           if (isNaN(objName.value)) 
 
           { 
 
           alert("Please enter numeric values only."); 
 
           objName.focus(); 
 
           objName.value+=""; 
 
           } 
 
       } 
 
       function checkempty(objName) 
 
       { 
 
           if(objName.value==null||objName.value=="") 
 
           { 
 
               alert("不能爲空"); 
 
               objName.focus(); 
 
           } 
 
       } 
 
       </script> 
 
   </head> 
 
   <body> 
 
   Enter your name: <input type="text" id="fname" onblur="checkNum(fname)"><br /> 
 
   </body> 
 
   </html>

19.JavaScript之關於時間的操做

//在頁面上實現一個時鐘

   <html> 
 
   <head> 
 
   <script type="text/javascript"> 
 
   function startTime() 
 
   { 
 
   var today=new Date() 
 
   var h=today.getHours() 
 
   var m=today.getMinutes() 
 
   var s=today.getSeconds() 
 
   // add a zero in front of numbers<10 
 
   m=checkTime(m) 
 
   s=checkTime(s) 
 
   document.getElementById('txt').innerHTML=h+":"+m+":"+s 
 
   t=setTimeout('startTime()',500) 
 
   } 
 
   function checkTime(i) 
 
   { 
 
   if (i<10) 
 
     {i="0" + i} 
 
     return i 
 
   } 
 
   </script> 
 
   </head> 
 
   <body onload="startTime()"> 
 
   <div id="txt"></div> 
 
   </body> 
 
   </html>

setTimeout　　定義和用法:

　　setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。

　　語法:

　　setTimeout(code,millisec)

　　參數：

　　code （必需）：要調用的函數後要執行的 JavaScript 代碼串。

　　millisec（必需）：在執行代碼前需等待的毫秒數。

　　提示：

　　setTimeout() 只執行 code 一次。若是要屢次調用，請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。

JS 相關格式：

   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Add_Infos.aspx.cs" Inherits="JMW_MHW.Web.admin.News.NewsInfo.Add_Infos" %> 
 
   <%@ Register Assembly="eWebEditorExt.UI" Namespace="eWebEditorExt.UI" TagPrefix="EditorV2" %> 
 
   <%@ Register Src="../../UserControl/CSelectNewsType_ddl.ascx" TagName="CSelectNewsType_ddl" TagPrefix="uc1" %> 
 
   <%@ Register Src="../../UserControl/CSelectNewsType_CheckBox.ascx" TagName="CSelectNewsType_CheckBox" TagPrefix="uc1" %> 
 
   <%@ Register Src="../../UserControl/CCataLog.ascx" TagName="CCataLog" TagPrefix="uc1" %> 
 
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
   <html xmlns="http://www.w3.org/1999/xhtml" > 
 
   <head runat="server"> 
 
       <title>無標題頁</title> 
 
       <script type="text/javascript"> 
 
          function CheckNewsInfos_Data(type) 
 
          { 
 
             if(document.getElementById("tr_qc").style.display=="") 
 
             { 
 
                if(CheckNewsType_ddl()==false) return false; 
 
             } 
 
             if(document.getElementById("tr_shfb1").style.display=="") 
 
             { 
 
                if(CheckNewsType_CheckBox()==false) return false; 
 
             } 
 
             if(CataLog_CheckData()==false) return false; 
 
             if(document.getElementById("txtbt").value=="") 
 
             { 
 
                alert("請輸入【標題】"); 
 
                return false; 
 
             } 
 
             if(document.getElementById("txtngr").value=="") 
 
             { 
 
                alert("請輸入【擬稿人】"); 
 
                return false; 
 
             } 
 
             if(document.getElementById("txthgr").value=="") 
 
             { 
 
                alert("請輸入【核稿人】"); 
 
                return false; 
 
             } 
 
             if(document.getElementById("txtqfr").value=="") 
 
             { 
 
                alert("請輸入【簽發人】"); 
 
                return false; 
 
             } 
 
   //          if(document.getElementById("tr_fb1").style.display==""&& document.getElementById("txt_PublishDt").value=="") 
 
   //          { 
 
   //             alert("請輸入【發佈時間】"); 
 
   //             return false; 
 
   //          } 
 
   // 
 
             if(document.getElementById("tr_shfb2").style.display==""&& document.getElementById("txt_KeyWord").value=="") 
 
             { 
 
                alert("請輸入【關鍵字】"); 
 
                return false; 
 
             } 
 
             if(document.getElementById("tr_shfb3").style.display==""&& document.getElementById("txtbjr").value=="") 
 
             { 
 
                alert("請輸入【編輯人】"); 
 
                return false; 
 
             } 
 
             if(document.getElementById("tr_shfb4").style.display==""&& document.getElementById("txt_Audits").value=="") 
 
             { 
 
                alert("請輸入【審覈意見】"); 
 
                return false; 
 
             } 
 
             if(document.getElementById("tr_ts5").style.display=="") 
 
             { 
 
                if(!document.getElementById("rb_cn").checked&&!document.getElementById("rb_bcn").checked&&!document.getElementById("rb_th").checked) 
 
                { 
 
                  alert("請選擇辦理方式：採納、不採納、退回"); 
 
                  return false; 
 
                } 
 
             } 
 
             if(document.getElementById("tr_fb2").style.display=="") 
 
             { 
 
                if(!document.getElementById("rb_fb").checked&&!document.getElementById("rb_bfb").checked) 
 
                { 
 
                    alert("請選擇辦理方式：發佈、不發佈"); 
 
                    return false; 
 
                } 
 
             } 
 
             if(document.getElementById("hide_IsAdd").value=="0") return true; 
 
             var msg=JMW_MHW.Web.admin.News.NewsInfo.Add_Infos.CheckTitle(document.getElementById("txtbt").value).value; 
 
             if(!msg) 
 
             { 
 
                 return confirm("已經存在該條新聞，是否要繼續操做？"); 
 
             } 
 
               return true; 
 
          } 
 
       </script> 
 
       <link href="../../../css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /> 
 
   </head> 
 
   <body> 
 
       <form id="form1" runat="server"> 
 
                <table class="tablebk" cellspacing="1"> 
 
               <tr id="tr_qc" runat="server"  style="display:none;"> 
 
                   <td class="inputlabel" width="20%"> 
 
                       類別</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       &nbsp;<uc1:CSelectNewsType_ddl ID="CSelectNewsType_ddl" runat="server" /> 
 
                       <div id="bz" runat=server><font color=red>注意：您提交的「政策法規」信息，如屬於福建省經貿委發佈的文件，應選擇「省經貿委文件」類別，並請在編輯建議中提醒編輯同志同時發佈在「政策法規」欄目。</font></div> 
 
                   </td> 
 
               </tr> 
 
               <tr id="tr_shfb1" runat="server" style="display:none;"> 
 
                   <td class="inputlabel" width="20%"> 
 
                       類別</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       &nbsp;<uc1:CSelectNewsType_CheckBox ID="CSelectNewsType_CheckBox" runat="server" /></td> 
 
               </tr> 
 
               <tr id="tr_bjjy" runat="server"> 
 
                   <td class="inputlabel" width="20%"> 
 
                       編輯建議</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       <asp:TextBox runat="server" ID="txt_jy" CssClass="input-css" Width="50%" TextMode="MultiLine" Height=50px></asp:TextBox> 
 
                   </td> 
 
               </tr> 
 
               <tr> 
 
                   <td class="inputlabel" width="20%"> 
 
                       標題</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       <asp:TextBox runat="server" ID="txtbt" CssClass="input-css" Width="50%" Height="60px" MaxLength="400" TextMode="MultiLine"></asp:TextBox><font 
 
                           color="red" >*</font> 
 
                   </td> 
 
               </tr> 
 
               <tr> 
 
                   <td class="inputlabel" width="20%"> 
 
                       文號</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       <%--<asp:TextBox runat="server" ID="txtwh" CssClass="input-css" Width="25%" onblur="WriteFileNo();"></asp:TextBox>--%> 
 
                       <INPUT  id="txtwh" onblur="WriteFileNo(this.value);" runat="server" /> 
 
                   </td> 
 
               </tr> 
 
               <tr> 
 
                   <td colspan=6 class="inputarea"> 
 
                   <uc1:CCataLog ID="CCataLog" runat="server" /> 
 
                      </td> 
 
               </tr> 
 
               <tr> 
 
                   <td colspan="6" class="inputarea"> 
 
                       <font color="red">注：若是信息內容來源於WORD或者是其它的網頁，請先將內容拷到記事本後（過濾代碼），再拷到編輯器裏；或者清除WORD格式後粘貼到編輯器中！                        請不要輸入空格來換行，請使用<img src="../../images/JustifyFull.gif" />來設置文字的對齊方式，以避免影響前臺頁面的顯示效果 
 
                           如添加表格下載，請按<img src="../../images/sc.gif" /> 
 
                       </font> 
 
                   </td> 
 
               </tr> 
 
               <tr> 
 
                   <td colspan="6" class="inputarea"> 
 
                       <EditorV2:EditorWebControl ID="FtbComment" runat="server" eWebEditorExtPath="../../Editor/" Height="700px"> 
 
                       </EditorV2:EditorWebControl> 
 
                   </td> 
 
               </tr> 
 
               <tr  id="tr_photo" runat="server"> 
 
                   <td  class="inputlabel" width="20%">首頁面左上角新聞圖片</td> 
 
                    <td colspan="5" class="inputarea"> 
 
                        <asp:FileUpload runat="server" ID="tpfile" Width="70%"/> 
 
                        <a runat=server visible=false  id="viewphoto" target="_blank">查看圖片</a></td> 
 
               </tr> 
 
               <tr id="tr_shfb2"  runat="server" style="display:none;"> 
 
                   <td class="inputlabel" width="20%"> 
 
                       關鍵字</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       <asp:TextBox runat="server" ID="txt_KeyWord" CssClass="input-css" Width="50%" MaxLength="200"></asp:TextBox> 
 
                       <span style="color: #ff0000">注：關鍵字之間，請用空格格開。<font 
 
                           color="red"></font></span></td> 
 
               </tr> 
 
               <tr id="tr_fb1"  runat="server" style="display:none;"> 
 
                   <td class="inputlabel" width="20%"> 
 
                       發佈時間</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       <asp:TextBox runat="server" ID="txt_PublishDt" CssClass="input-css" Width="50%" MaxLength="200"></asp:TextBox> 
 
                       <span style="color: #ff0000">注：若爲空系統默認爲當前時間，時間格式:2007-9-6 8:25:36。</span></td> 
 
               </tr> 
 
               <tr> 
 
                   <td class="inputlabel" width="20%"> 
 
                       擬稿人</td> 
 
                   <td class="inputarea"> 
 
                       <asp:TextBox runat="server" ID="txtngr" CssClass="input-css"></asp:TextBox><font 
 
                           color="red">*</font></td> 
 
                   <td class="inputlabel" width="20%"> 
 
                       核稿人</td> 
 
                   <td class="inputarea"> 
 
                       <asp:TextBox runat="server" ID="txthgr" CssClass="input-css"></asp:TextBox><font 
 
                           color="red">*</font></td> 
 
                   <td class="inputlabel" width="20%"> 
 
                       簽發人</td> 
 
                   <td class="inputarea" style="width: 133px"> 
 
                       <asp:TextBox runat="server" ID="txtqfr" CssClass="input-css"></asp:TextBox><font 
 
                           color="red" >*</font></td> 
 
               </tr> 
 
               <tr id="tr_shfb3"  runat="server" style="display:none;"> 
 
                   <td class="inputlabel" width="20%"> 
 
                       編輯人</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       <asp:TextBox runat="server" ID="txtbjr" CssClass="input-css" Width="15%" MaxLength="200"></asp:TextBox><font 
 
                           color="red" >*</font> 
 
                   </td> 
 
               </tr> 
 
              <tr id="tr_shfb4"  runat="server" style="display:none;"> 
 
                   <td class="inputlabel" width="20%"> 
 
                       審覈意見</td> 
 
                   <td colspan="5" class="inputarea"> 
 
                       <asp:TextBox runat="server" ID="txt_Audits" CssClass="input-css" Width="50%" MaxLength="200" Height="80px" TextMode="MultiLine"></asp:TextBox><font 
 
                           color="red" >*</font> 
 
                   </td> 
 
               </tr> 
 
               <tr id="tr_ts5"  runat="server" style="display:none;"> 
 
                   <td colspan="6" style="text-align: center" class="inputarea"> 
 
                       <asp:RadioButton ID="rb_cn" runat="server" Text='採納' GroupName="tt"/>&nbsp;&nbsp;&nbsp;<asp:RadioButton ID="rb_bcn" runat="server" Text='不採納' GroupName="tt"/>&nbsp;&nbsp;&nbsp;<asp:RadioButton ID="rb_th" runat="server" GroupName="tt" Text='退回'/> 
 
                   </td> 
 
               </tr> 
 
               <tr id="tr_fb2"  runat="server" style="display:none;"> 
 
                   <td colspan="6" style="text-align: center" class="inputarea"> 
 
                       <asp:RadioButton ID="rb_fb" runat="server" Text='發佈' GroupName="t" />&nbsp;&nbsp;&nbsp;<asp:RadioButton ID="rb_bfb" runat="server" Text='不發佈' GroupName="t"/> 
 
                       </td> 
 
               </tr> 
 
               <tr id="tr_Button"  runat="server" style="display:'';"> 
 
                   <td colspan="6" style="text-align: center" class="inputarea"> 
 
                       <asp:Button ID="btn_Save" runat="server" Text="保 存" CssClass="submit_btn" 
 
                           OnClick="btn_Save_Click" />&nbsp;&nbsp; 
 
                       <asp:Button ID="btn_Submit" runat="server" Text="提 交" CssClass="submit_btn" 
 
                           OnClick="btn_Submit_Click" />&nbsp;&nbsp; 
 
                       <input type="reset" class="submit_btn" runat="server" id="cz" value="重 置"/>&nbsp;<input id="hide_IsAdd" type="text" runat=server style="display:none;"/> 
 
                   </td> 
 
               </tr> 
 
           </table> 
 
       </form> 
 
   </body> 
 
   </html>

20 正則表達式

var aUsage = { "int": "^([+-]?)\\d+$", //整數

"int+": "^([+]?)\\d+$", //正整數

"int-": "^-\\d+$", //負整數

"num": "^([+-]?)\\d*\\.?\\d+$", //數字

"num+": "^([+]?)\\d*\\.?\\d+$", //正數

"num-": "^-\\d*\\.?\\d+$", //負數

"float": "^([+-]?)\\d*\\.\\d+$", //浮點數

"float+": "^([+]?)\\d*\\.\\d+$", //正浮點數

"float-": "^-\\d*\\.\\d+$", //負浮點數

//郵件

"email": "^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$",

"color": "^#[a-fA-F0-9]{6}", //顏色

"url": "^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$", //聯接

"chinese": "^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$", //僅中文

"ascii": "^[\\x00-\\xFF]+$", //僅ACSII字符

"zipcode": "^\\d{6}$", //郵編

"mobile": "^0{0,1}13[0-9]{9}$", //手機

"ip4": "^\(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))\\.(([0-1]?\\d{0,2})|(2[0-5]{0,2}))$", //ip地址

"notempty": "^[^ ]+$", //非空

"picture": "(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$", //圖片

"rar": "(.*)\\.(rar|zip|7zip|tgz)$", //壓縮文件

"date": "^\\d{4}(\\-|\\/|\.)\\d{1,2}\\1\\d{1,2}$" //日期

};

\d{5}(-\d{4})? 美國郵政編碼

(($\d{3}$ ?)|(\d{3}-))?\d{3}-\d{4} 美國電話號碼

----------------------------------------------------------------------------------------------------------------------------------------------------------------

19。JS字符串處理的一些函數：

函數：split()

功能：使用一個指定的分隔符把一個字符串分割存儲到數組

例子：

str=」jpg|bmp|gif|ico|png」;

arr=theString.split(」|」);

//arr是一個包含字符值」jpg」、」bmp」、」gif」、」ico」和」png」的數組

函數：John()

功能：使用您選擇的分隔符將一個數組合併爲一個字符串

例子：

var delimitedString=myArray.join(delimiter);

var myList=new Array(」jpg」,」bmp」,」gif」,」ico」,」png」);