整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          css零基礎自學教程(一)css基礎

          css零基礎自學教程(一)css基礎

          什么是css?

          ●css指層疊樣式表(cascading style sheets)

          ●樣式定義如何顯示html元素

          ●樣式通常存儲在樣式表中

          ●把樣式添加到html4.0中,是為了解決內容與表現分離的問題

          ●外部樣式表可以極大提高工作效率

          ●外部樣式表通常存儲在css文件中

          ●多個樣式定義可層疊為一

          注意:在學習css之前,你需要具備html的基本知識.之前已經粗略介紹過.后邊還會詳細介紹

          css允許你針對html元素應用特定的樣式

          css的主要好處在于,它允許你將樣式和頁面內容進行分離

          僅適用html,樣式和頁面內容混在一起,這樣的頁面將會變得難以維護

          所有的web頁面樣式都可以(也應該)從html文檔中分離出來,建立成一個單獨的css文件使用

          二 內聯 嵌入式 外部引用css

          在web文檔中插入一個樣式表是內聯樣式的使用方法之一.使用內聯樣式,將獨特的樣式應用于單個元素

          為了使用內聯樣式,將樣式屬性添加到相關的標簽中.

          下面的例子展示了如何創建一個灰色背景和白色文本的段落:

          <p style="color:white; background-color:gray;">

          This is an example of inline styling.

          </p>

          運行效果如下:

          ◆在<head>標簽中,將內部樣式定義在<style>元素中

          例如:下面代碼中的樣式將作用在所有<p>段落中

          <html>

          <head>

          <style>

          p{

          color:white;

          background-color:gray;

          }

          </sytle>

          </head>

          <body>

          <p>This is my first paragraph.</p>

          <p>This is my second paragraph.</p>

          </body>

          </html>

          結果所有的段落都變成白色字體和灰色背景

          ◆外部引用css:將所有的css樣式保存在同一個后綴名.css的拓展文件中

          然后通過html標簽<link>在html頁面的<head>部分將css文件引入

          舉例說明:

          html代碼:

          <head>

          <link rel="stylesheets" href="example.css">

          </head>

          <body>

          <p>這是我的一個段落</p>

          <p>這是我的第二個段落</p>

          <p>這是我的第三個段落</p>

          </body>

          css部分:

          p{

          color:white;

          background-color:gray;

          }

          所有段落都是統一的樣式

          ●相對路徑和絕對路徑都可以用來定義css文件的href.在我們的示例中,路徑是相對的,因為css文件和html文件位于同一目錄下

          三 css規則與選擇器

          css是由瀏覽器解釋的樣式規則,然后應用于文檔中相應的元素.

          樣式規則有三部分:選擇器 屬性 屬性值

          例如,標題顏色可以定義為:

          h1 { color:orange;}

          選擇器指向需要設置樣式的html元素;

          聲明塊包含一個或多個用分號分隔的聲明;

          每個聲明都包含一個由冒號分隔的屬性名稱和值

          例如:

          h2{

          color:red;

          background:#fff;

          }

          ●最常見和最易于理解的選擇器是類型選擇器.該選擇器以頁面上的元素類型為目標

          例如,要定位頁面上的所有段落

          p{

          color:red;

          font-size:130%;

          }

          ●css聲明總是以分號結尾.而聲明塊則由大括號包圍.

          id選擇器允許你設置具有id屬性的html元素,而不管他們在文檔樹中的位置.

          舉例說明:

          html部分:

          <div id="intro">

          <p>今年過節送什么?</p>

          </div>

          <p>w3cschool會員,送了都說好!</p>

          css部分:

          #intro{

          color:white;

          background-colot:gray;

          }

          要選擇具有特定ID的元素,請使用"#",然后使用元素的id跟隨它

          class選擇器以類似的方式工作.主要區別在于每個元素的id具有唯一性,id每個頁面只能應用一次,而class可以在頁面上多次使用.

          ●要選擇具有特定類的元素,請使用"."符號,后跟該類的名稱

          避免使用數字來命名id和class

          .mytext{

          color:black;

          }

          設置class="mytext"的文本顏色為黑色

          ●這些選擇器用于選擇另一個元素的后代的元素.選擇后代的層級時,你可以根據需要選擇盡可能多的層級

          例如,要僅定位"intro"部分第一段中的<em>元素

          html部分:

          <div id="intro">

          <p class="first">這是一個<em>段落.</em></p>

          <p>這是第二個段落.</p>

          </div>

          <p class="first">這個段落不在intro部分</p>

          <p>這個段落也不在intro部分</p>

          css部分:

          #intro .first em{

          color:pink;

          background-color:gray;

          }

          因此,只有選中的元素<em>會受到影響.

          #test p{

          color:red;

          }

          上邊的例子:為屬于id="test"的元素的所有段落設置顏色為紅色.

          四 css注釋

          /* 這是一個注釋 */ 注釋用于解釋你的代碼 ,瀏覽器會自動忽略注釋 .類似于java中的多行注釋

          五 css的級聯與繼承

          頁面的最終外觀是不同的樣式結合的結果

          通過樣式的三個主要來源形成一個級聯:

          由頁面的作者創建的樣式表

          瀏覽器的默認樣式

          用戶自定義的樣式

          繼承是指屬性在頁面上的流動方式.除非另有定義,子元素通常會繼承父元素的特征

          例如:

          <html>

          <head>

          <style>

          body{

          color:green;

          font-family:Arial;

          }

          </style>

          </head>

          <body>

          <p>

          路人甲

          </p>

          </body>

          </html>

          結果:路人甲的顏色為綠色,樣式效果和它的父元素<body>是一樣的

          由于段落標記(子元素)位于正文標記(父元素)內,因此它將采用指定給正文標記的任何樣式.


          ntroduction

          HTML 是一種描述網頁語言, 指的是超文本標記語言 (Hyper Text Markup Language)。其中,超文本指的是網頁上可以包含圖片,視頻,連接信息。標記也叫做標簽,所以標簽書寫的是<內容>。語言就是一種交流工具,HTML 是用戶與瀏覽器之間交互工具。

          簡單說,HTML 是由瀏覽器解析執行的,它不會將 HTML 標簽展示出來,而是會解析 HTML 標簽,以特定效果展示出來。

          Syntax

          1. HTML 可以直接使用文本編輯器來編寫
          2. HTML 文件它的后綴名是 .htm 或 .html
          3. <html> 標簽它代表當前頁面是一個 HTML
          4. <head> 標簽中可以聲明 HTML 頁面的相關信息
          5. <body> 標簽中它主要是用于顯示頁面信息
          6. 標簽要有開始,有結束。開始標簽與結束標簽中的內容是標簽的內容,如果沒有標簽內容,可以讓標簽自關閉 <br/>。
          7. 大多數標簽它具有屬性,屬性值要使用引號引起來。
          8. HTML 本身是不區分大小寫的。
          <html>
              <head>HEAD</head>
              <body>BODY</body>
          </html>

          Tools

          可以使用 JetBrains WebStorm 或者 VS Code 進行開發。


          HTML Tags

          文件標簽

          <html> 代表當前書寫的是一個 HTML 文檔

          <head> 存儲的本頁面的一些重要的信息,它不會顯示

          標簽下有一個子標簽 <title> 它是用于定義頁面的標題的

          <body> 書寫的內容會顯示出來,屬性:1. text 用于設置文字顏色;2. bgcolor 用于設置頁面的背景色;3. background 用于設置頁面的背景圖片

          排版標簽

          HTML 注釋

          <!-- 注釋不會在瀏覽器中顯示 -->

          <br/> 標簽

          br 標簽就是一個換行功能標簽

          <p> 標簽

          在 p 標簽中的內容會在開始與結束之間產生一個空白行并且它會自動換行

          常用屬性 align 的作用是設置段落中的內容對齊方式,可取值有 left right center

          <hr> 標簽

          hr 標簽會在頁面上產生一個水平線

          常用屬性:

          align:可取值有 left right center 代表水平線位置

          size:代表水平線高度(厚度)

          width:代表水平線寬度

          color:水平線的顏色

          關于 HTML 中標簽屬性

          兩種方式:

          1. 直接設置值,默認單位是 px (像素) <HR WIDTH="200">
          2. 可以設置百分比 <HR WIDTH="35%">

          <div> 標簽

          Div 是一個塊標簽

          Div 與 CSS 結合,會更好對頁面進行排版

          <span> 標簽

          Span 標簽也是一個塊標簽Div 與 span 區別:Div 會自動換行,我們也叫這樣的標簽為行級元素Span 標簽它不會自動換行,我們也叫它為行內元素

          字體標簽

          <font> 標簽

          Font 標簽可以設置字體,字的大小及顏色

          常用屬性:

          Face:用于設置字體,例如 宋體 隸書 楷體

          Size:用于設置字的大小

          Color:用于設置字的顏色

          我們所看到的屏幕上所有的顏色都是由紅、綠、藍這三種基色調混合而成的。每一種顏色的飽和度和透明度都是可以變化的,用 0~255 的數值來表示。如純紅色表示為 (255,0,0),十六進制表示為 #FF0000。按這種表達方式,理論上我們可以得到 256 * 256 *256=16777216 種顏色。

          1. 使用十六進制方式,取值范圍 #000000 ~ #FFFFFF (黑色到白色)。當顏色值為 #cc3300 時,也可以使用 #c30 這種簡化的方式來表示。
          2. RGB 顏色表示法:RGB(x,y,z),x、y、z 是 0 ~ 255 之間的整數。
          3. 在線顏色選擇器:http://www.86y.org/code/colorpicker/color.html


          標題標記

          <h1> 最大 <h6> 最小,它們代表的是標題,可以使用 <b> <i> 對文字設置加粗或傾斜

          注意:在 HTML 中允許標簽進行嵌套的,但是一般都包裹嵌套,而不可以進行交叉嵌套

          清單標記(列表標記)

          有序清單:

          <!-- 有序列表 I II III-->
          <ol type="I" start="3">
              <li>張三</li>
              <li>李四</li>
              <li>王五</li>
          </ol>
          <!-- 無序列表 -->
          <ul type="square">
              <li>Java</li>
              <li>Python</li>
              <li>C#</li>
          </ul>

          圖形標簽

          <img> 可以讓我們在網頁引入一張圖片

          常用屬性

          1. src 代表的圖片的路徑
          2. width 圖片的寬度
          3. height 圖片的高度
          4. border 用于設置圖片的邊框
          5. alt 如果圖片不可以顯示時,默認顯示的文本信息
          6. align 圖片附件文字的對齊方式,取值有 :left right middle top bottom

          超連接標簽

          <a> 標簽可以實現跳轉到其它頁面操作。超鏈接內容不僅可以是文本,也可以是圖片等信息

          常用屬性

          1. href 代表的要跳轉的路徑
          2. name 屬性可以在本頁面設置一個錨點
          3. target 這個屬性規定在何處打開這個鏈接文檔,可取值:_blank _self _parent _top framename

          表格標簽

          <!-- 學習表格標簽 -->
          <table border="2" align="center" width="400px">
              <caption>學生成績單</caption>
              <tr>
                  <th>姓名</th>
                  <th>語文成績</th>
                  <th>數學成績</th>
                  <td colspan="2" align="center"><b>操作</b></td>
              </tr>
              <tr align="center">
                  <td>張三</td>
                  <td>99</td>
                  <td>100</td>
                  <td>修改</td>
                  <td>刪除</td>
              </tr>
              <tr align="center">
                  <td>李四</td>
                  <td>90</td>
                  <td>66</td>
                  <td>修改</td>
                  <td>刪除</td>
              </tr>
          </table>

          表單標簽

          通過表單可以將要提交的數據提交到指定的位置

          <!-- 表單:用戶注冊案例 -->
          <form name="form1" action="user/login" method="POST">
              <table border="1" width="64%" align="center">
                  <tr>
                      <td>用戶名:</td>
                      <td>
                          <input type="text" name="username">
                      </td>
                  </tr>
                  <tr>
                      <td>密碼:</td>
                      <td>
                          <input type="password" name="password">
                      </td>
                  </tr>
                  <tr>
                      <td>性別:</td>
                      <td>
                          <input type="radio" name="sex" checked="checked">男
                          <input type="radio" name="sex" >女
                      </td>
                  </tr>
                  <tr>
                      <td>地址:</td>
                      <td>
                          <select name="province">
                              <option value="0">--請選擇省--</option>
                              <option value="10001">廣東</option>
                              <option value="10002">上海</option>
                              <option value="10003">山東</option>
                          </select> 省
                          <select name="city">
                              <option>--請選擇市--</option>
                              <option value="1000301">廣州市</option>
                              <option>深圳市</option>
                              <option>東莞市</option>
                          </select> 市
                      </td>
                  </tr>
                  <tr>
                      <td>編程語言:</td>
                      <td>
                          <input type="checkbox" name="language" checked="checked">Java
                          <input type="checkbox" name="language">Python
                          <input type="checkbox" name="language">Go
                      </td>
                  </tr>
                  <tr>
                      <td>照片:</td>
                      <td>
                          <input type="file" name="image">
                      </td>
                  </tr>
                  <tr>
                      <td>自我介紹:</td>
                      <td>
                          <textarea name="remark" rows="5" cols="100"></textarea>
                      </td>
                  </tr>
                  <tr>
                      <td colspan="2" align="center">
                          <input type="submit" value="注冊"> 
                          <input type="reset" value="取消"> 
                      </td>
                  </tr>
              </table>
          </form>

          框架標簽

          通過框架標簽可以定制 HTML 頁面布局

          在 HTML 頁面上去描述框架信息時,不可以將 <frameset> 寫在 <body> 標簽中

          framesetTest.html

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <title>HTML 框架標簽</title>
              </head>
              <!-- rows 定義了三行:第一行 100 像素,第三行:100 像素;第二行:剩下的像素 -->
              <frameset rows="100, * , 100"> 
                  <frame name="topModule" src="./top.html"></frame>
                  <frameset cols="100, * ">
                      <frame name="menuModule" src="./menu.html"></frame>
                      <frame name="contentModule" src="./content.html"></frame>
                  </frameset>
                  <frame name="footModule" src="./foot.html"></frame>
              </frameset>
          </html>

          top.html

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <title>top</title>
              </head>
              <body>
                  <div>頭部信息</div>
              </body>
          </html>

          foot.html

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <title>footL</title>
              </head>
              <body>
                  <div>底部信息</div>
              </body>
          </html>

          menu.html

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <title>menu</title>
              </head>
              <body>
                  <div>菜單信息</div>
              </body>
          </html>

          content.html

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <title>content</title>
              </head>
              <body>
                  <div>內容顯示區</div>
              </body>
          </html>

          其它標簽與特殊字符

          <meta> 標簽

          <meta> 標簽必須寫在 <head> 標簽之間

          1. 它可以對頁面進行描述及熱詞設置,可以方便搜索引擎查找頁面
          2. 通過 meta 標簽設置 http 響應信息
          3. 通過 meta 標簽可以設置頁面的編碼,<meta http-equiv="Content-Type" content="text/html; charset=gbk">
          4. 通過 meta 標簽來設置頁面加載后在指定的時間后跳轉到指定的頁面,<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

          <link>標簽

          使用 link 標簽來導入 CSS

          特殊字符

          詳情查看菜鳥教程:https://www.runoob.com/charsets/ref-html-ascii.html


          ?HTML DOM

          Introduction

          DOM, Document Object Model -- 文檔對象模型,是 HTML 和 XML 文檔的編程接口,以樹結構表達 HTML 文檔。

          DOM 是 W3C(萬維網聯盟)的標準。

          DOM 定義了訪問 HTML 和 XML 文檔的標準。

          W3C DOM 標準被分為 3 個不同的部分:

          • 核心 DOM - 針對任何結構化文檔的標準模型
          • XML DOM - 針對 XML 文檔的標準模型
          • HTML DOM - 針對 HTML 文檔的標準模型

          DOM Node

          DOM 是被視為節點樹的 HTML。

          根據 W3C 的 HTML DOM 標準,HTML 文檔中的所有內容都是節點:

          • 整個文檔是一個文檔節點
          • 每個 HTML 元素是元素節點
          • HTML 元素內的文本是文本節點
          • 每個 HTML 屬性是屬性節點
          • 注釋是注釋節點

          HTML DOM 將 HTML 文檔視作樹結構,這種結構被稱為節點樹。

          節點樹中的節點彼此擁有層級關系。常用父(parent)、子(child)和同胞(sibling)等術語來描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞(兄弟或姐妹)。

          • 在節點樹中,頂端節點被稱為根(root)。
          • 每個節點都有父節點、除了根(它沒有父節點)。
          • 一個節點可擁有任意數量的子節點。
          • 同胞是擁有相同父節點的節點。

          DOM 方法 & 屬性

          HTML DOM 方法是可以在節點(HTML 元素)上執行的動作。

          HTML DOM 屬性是可以在節點(HTML 元素)設置和修改的值。

          可通過 JavaScript (以及其他編程語言)對 HTML DOM 進行訪問。所有 HTML 元素被定義為對象,而編程接口則是對象方法和對象屬性。方法是能夠執行的動作(比如添加或修改元素)。屬性是能夠獲取或設置的值(比如節點的名稱或內容)。

          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <title>DOM</title>
              </head>
              <body>
                  <div id="div1">
                      <p id="p1">Hello</p>
                      <p id="p2">Hello</p>
                  </div>
                  <script>
                      // 先獲取 P 元素
                      var element=document.getElementById("p1")
                      // 直接修改 p 元素的內容
                      element.innerHTML="此時已是修改后的內容"
          
                      // 修改 p2 標簽的樣式
                      var ele=document.getElementById("p2")
                      ele.style.color="blue"
                      ele.style.fontFamily="宋體"
                      ele.style.fontSize="larger"
          
                      // 添加元素
                      // 創建一個p元素
                      var elementP=document.createElement("p")
                      // 創建一個內容
                      var nodeText=document.createTextNode("新加的 P 元素")
                      // 把文字內容添加到p元素中
                      elementP.appendChild(nodeText)
                      // 把新創建的p元素添加div1元素中
                      var div1=document.getElementById("div1")
                      div1.appendChild(elementP)
          
                      // 插入添加新的元素
                      // 創建一個新的元素
                      var eleP=document.createElement("p")
                      // 創建一個內容
                      var noText=document.createTextNode("在 P1 元素前添加的新元素")
                      // 把文字內容添加到 p 元素中
                      eleP.appendChild(noText)
                      // 把新創建的 p 元素添加 div 1 元素中
                      var parentDiv1=document.getElementById("div1")
                      // 獲取指定被添加的元素
                      var p1=document.getElementById("p1")
                      // 在元素前添加;參數說明:1.要添加的元素;2.在那個元素之前添加(指定一個元素)
                      parentDiv1.insertBefore(eleP, p1)
          
                      // 刪除元素
                      // 獲取父元素
                      var pdiv1=document.getElementById("div1")
                      var removep1=document.getElementById("p1")
                      // 使用父元素刪除該元素
                      pdiv1.removeChild(removep1)
                  </script>
              </body>
          </html>

          DOM 事件

          HTML DOM 允許 JavaScript 對 HTML 事件作出反應。當事件發生時,可以執行 JavaScript,比如發生用戶點擊一個 HTML 元素的事件。

          如需在用戶點擊某個元素時執行代碼,可以把 JavaScript 代碼添加到 HTML 事件屬性中:onclick=JavaScript

          HTML 事件的例子:

          • 當用戶點擊鼠標時
          • 當網頁已加載時
          • 當圖片已加載時
          • 當鼠標移動到元素上時
          • 當輸入字段被改變時
          • 當 HTML 表單被提交時
          • 當用戶觸發按鍵時
          <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta http-equiv="X-UA-Compatible" content="ie=edge">
                  <title>DOM 事件</title>
                  <!-- JavaScript 代碼必須寫在 script 中 -->
                  <script>
                      function onLoadFun(){
                          alert("已載入...");
                      }
                      // 文本框失去焦點事件
                      function onBlurFun(){
                          alert("此方法是文本框失去焦點事件,用來校驗此文本框輸入數據的")
                      }
                      // 表單被提交時執行事件
                      function onSubmitFun(){
                          alert("此表單已提交,這個方法也可以來作為數據校驗的");
                      }
                      // 元素被改變時觸發事件
                      function onChangeFun(){
                          alert("文本框元素已輸入新的數據")
                      }
                      // 當鼠標懸停在某一個元素上時執行的方法
                      function onMouseOverFun(element){
                          element.innerHTML="鼠標已停在H1元素上了"
                      }
                      // 當鼠標離開某一個元素時執行事件
                      function onMouseOutFun(element){
                          element.innerHTML="鼠標已離開H1元素上了..."
                      }
                  </script>
              </head>
              <!-- 需求:當頁面被載入時,執行一個代碼,彈框提示已載入 -->
              <body onload="onLoadFun()">
                  <!-- 需求:在一個表單中有用戶名錄入的文本框,當輸入完文本框的時候進行名稱校驗,提交的時候彈框顯示 -->
                  <form onsubmit="onSubmitFun()">
                      用戶名:<input id="username" name="username" onchange="onChangeFun()" >
                      <br/>
                      <button type="submit">提交</button>
                  </form>
                  <!-- 需求:有一個 H1 標簽元素,當鼠標移動到 H1 元素上時,修改文字,當鼠標移出元素時執行事件 -->
                  <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個標題</h1>
              </body>
          </html>


          想了解更多,歡迎關注我的微信公眾號:Renda_Zhang

          .結構性定義

          文件類型 <HTML></HTML> (放在檔案的開頭與結尾)

          文件主題 <TITLE></TITLE> (必須放在「文頭」區塊內)

          文頭 <HEAD></HEAD> (描述性資料,像是「主題」)

          文體 <BODY></BODY> (文件本體)

          (由瀏覽器控制的顯示風格)

          標題 <H?></H?> (從1到6,有六層選擇)

          標題的對齊 <H? ALIGN=LEFT|CENTER|RIGHT></H?>

          區分 <DIV></DIV>

          區分的對齊 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

          引文區塊 <BLOCKQUOTE></BLOCKQUOTE> (通常會內縮)

          強調 <EM></EM> (通常會以斜體顯示)

          特別強調 <STRONG></STRONG> (通常會以加粗顯示)

          引文 <CITE></CITE> (通常會以斜體顯示)

          碼 <CODE></CODE> (顯示原始碼之用)

          樣本 <SAMP></SAMP>

          鍵盤輸入 <KBD></KBD>

          變數 <VAR></VAR>

          定義 <DFN></DFN> (有些瀏覽器不提供)

          地址 <ADDRESS></ADDRESS>

          大字 <BIG></BIG>

          小字 <SMALL></SMALL>

          與外觀相關的標簽(作者自訂的表現方式)

          加粗 <B></B>

          斜體 <I></I>

          底線 <U></U> (尚有些瀏覽器不提供)

          刪除線 <S></S> (尚有些瀏覽器不提供)

          下標 <SUB></SUB>

          上標 <SUP></SUP>

          打字機體 <TT></TT> (用單空格字型顯示)

          預定格式 <PRE></PRE> (保留文件中空格的大小)

          預定格式的寬度 <PRE WIDTH=?></PRE>(以字元計算)

          向中看齊 <CENTER></CENTER> (文字與圖片都可以)

          閃耀 <BLINK></BLINK> (有史以來最被嘲弄的標簽)

          字體大小 <FONT SIZE=?></FONT>(從1到7)

          改變字體大小 <FONT SIZE=+|-?></FONT>

          基本字體大小 <BASEFONT SIZE=?> (從1到7; 內定為3)

          字體顏色 <FONT COLOR="#$$$$$$"></FONT>

          說明 <!-- *** --> (瀏覽器不會顯示)

          <!--修改滾動條-->

          <style type="text/css">

          body {

          scrollbar-face-color: #330033;

          scrollbar-shadow-color: #FFFFFF;

          scrollbar-highlight-color: #FFFFFF;

          scrollbar-3dlight-color: #FFFFFF;

          scrollbar-darkshadow-color: #FFFFFF;

          scrollbar-track-color: #330033;

          scrollbar-arrow-color: #FFFFFF;

          }

          </style>

          <!--修改滾動條結束-->

          將上面的代碼放在葉子代碼的<head></head>之間,顏色可根據自己的需要修改。

          滾動條的代碼意思如下:

          Scrollbar-Face-Color為滾動條表面顏色設定;

          Scrollbar-Track-Color為滾動條底板顏色設定;

          Scrollbar-Darkshadow為滾動條下邊和右邊邊沿顏色設定;

          Scrollbar-Highlight-Color為滾動條上斜面和左斜面顏色設定;

          Scrollbar-Shadow-Color為滾動條下斜面和右斜面顏色設定;

          Scrollbar-3Dlight-Color為滾動條上邊和左邊的邊沿顏色設定;

          Scrollbar-Arrow-Color為滾動條兩端箭頭顏色設定。

          <!> 跑馬燈

          <marquee>...</marquee>普通捲動

          <marquee behavior=slide>...</marquee>滑動

          <marquee behavior=scroll>...</marquee>預設捲動

          <marquee behavior=alternate>...</marquee>來回捲動

          <marquee direction=down>...</marquee>向下捲動

          <marquee direction=up>...</marquee>向上捲動

          <marquee direction=right></marquee>向右捲動

          <marquee direction=’left’></marquee>向左捲動

          <marquee loop=2>...</marquee>捲動次數

          <marquee width=180>...</marquee>設定寬度

          <marquee height=30>...</marquee>設定高度

          <marquee bgcolor=FF0000>...</marquee>設定背景顏色

          <marquee scrollamount=30>...</marquee>設定捲動距離

          <marquee scrolldelay=300>...</marquee>設定捲動時間

          1)貼圖:<img src="圖片地址">

          2)加入連接:<a href="所要連接的相關地址">寫上你想寫的字</a>

          3)在新窗口打開連接:<a href="相關地址" target="_blank">寫上要寫的字</a>

          4)移動字體(走馬燈):<marquee>寫上你想寫的字</marquee>

          5)字體加粗:<b>寫上你想寫的字</b>

          6)字體斜體:<i>寫上你想寫的字</i>

          7)字體下劃線: <u>寫上你想寫的字</u>

          8)字體刪除線: <s>寫上你想寫的字</s>

          9)字體加大: <big>寫上你想寫的字</big>

          10)字體控制大小:<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大,h5最小)

          11)更改字體顏色:<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

          12)消除連接的下劃線:<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

          13)貼音樂:<embed src="音樂地址" width="寬度" height="高度" autostart=false>

          14)貼flash: <embed src="flash地址" width="寬度" height="高度">

          15)貼影視文件:<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

          16)換行:<br>

          17)段落:<p>段落</p>

          18)原始文字樣式:<pre>正文</pre>

          19)換帖子背景:<body background="背景圖片地址">

          20)固定帖子背景不隨滾動條滾動:<body background="背景圖片地址" body

          bgproperties=fixed>

          21)定制帖子背景顏色:<body bgcolor="#value">(value值見10)

          22)帖子背景音樂:<bgsound="背景音樂地址" loop=infinite>

          23)貼網頁:<iframe. src="相關地址" width="寬度" height="高度"></iframe>

          1、店鋪音樂代碼:音樂網址" loop="-1">

          2、圖片制作代碼:<img src="這里放圖片地址">

          3、公告圖片代碼:<img border="0" src="這里放圖片地址" />或<img src="這里放圖片地址"/>

          4、懸浮掛飾代碼:<img src="這里放圖片地址" style="left:20px; position: relative; top:0px" />

          5、商品分類代碼:<img src="這里放圖片地址"/>

          6、字體大小代碼:<font size="2">這里放要處理的文字,可用3、4、5等設置大小</font>

          7、字體顏色代碼:<font color="red">這里放要處理的文字,可以換成blue,yellow等</font>

          8、文字鏈接代碼:<a href="網頁地址">鏈接的文字,在分類欄里用時鏈接的網頁地址必須縮短</a>

          9、移動文字代碼:<marquee>從右到左移動的文字</marquee>

          10、背景音樂代碼:<bgsound loop="-1" src="這里放音樂地址"></bgsound>

          11、圖片附加音樂代碼:<img border=0 src="這里放圖片地址" dynsrc="這里放音樂地址">

          12、浮動圖片代碼:<img alt="1" height="150" src="這里放圖片地址"/>

          公告圖片的代碼:公告掛飾:店鋪分類代碼:背景音樂代碼:換行代碼

          計數器代碼顏色代碼:

          1白色 #FFFFFF

          2紅色#FF0000

          3綠色#00FF00

          4藍色#0000FF

          5牡丹紅#FF00FF

          6青色 #00FFFF

          7黃色#FFFF00

          8黑色#000000

          9海藍#70DB93

          10巧克力色#5C3317

          11藍紫色 #9F5F9F

          12黃銅色#B5A642

          13亮金色#D9D919

          14棕色#A67D3D

          15青銅色 #8C7853

          162號青銅色 #A67D3D

          17士官服藍色 #5F9F9F

          18冷銅色 #D98719

          19銅色 #B87333

          20珊瑚紅 #FF7F00

          21紫藍色 #42426F

          22深棕 #5C4033

          23深綠 #2F4F2F

          24深銅綠色 #4A766E

          25深橄欖綠 #4F4F2F

          26深蘭花色 #9932CD

          27深紫色 #871F78

          28深石板藍 #6B238E

          29深鉛灰色 #2F4F4F

          30深棕褐色 #97694F

          32深綠松石色 #7093DB

          33暗木色 #855E42

          34淡灰色 #545454

          35土灰玫瑰紅色 #856363

          36長石色 #D19275

          37火磚色#8E2323

          38森林綠 #238E23

          39金色 #CD7F32

          40鮮黃色 #DBDB70

          41灰色 #C0C0C0

          42銅綠色 #527F76

          43青黃色 #93DB70

          44獵人綠 #215E21

          45印度紅 #4E2F2F

          46土黃色 #9F9F5F

          47淺藍色 #C0D9D9

          48淺灰色 #A8A8A8

          49淺鋼藍色 #8F8FBD

          59淺木色 #E9C2A6

          60石灰綠色 #32CD32

          61桔黃色 #E47833

          62褐紅色 #8E236B

          63中海藍色 #32CD99

          64中藍色 #3232CD

          65中森林綠 #6B8E23

          66中鮮黃色 #EAEAAE

          67中蘭花色 #9370DB

          68中海綠色 #426F42

          69中石板藍色 #7F00FF

          70中春綠色 #7FFF00

          71中綠松石色 #70DBDB

          72中紫紅色 #DB7093

          73中木色 #A68064

          74深藏青色 #2F2F4F

          75海軍藍 #23238E

          76霓虹籃 #4D4DFF

          77霓虹粉紅 #FF6EC7

          78新深藏青色 #00009C

          79新棕褐色 #EBC79E

          80暗金黃色 #CFB53B

          81橙色 #FF7F00

          82橙紅色 #FF2400

          83淡紫色 #DB70DB

          84淺綠色 #8FBC8F

          85粉紅色 #BC8F8F

          86李子色 #EAADEA

          87石英色 #D9D9F3

          88艷藍色 #5959AB

          89鮭魚色 #6F4242

          90猩紅色 #BC1717

          91海綠色 #238E68

          92半甜巧克力色 #6B4226

          93赭色 #8E6B23

          94銀色 #E6E8FA

          95天藍 #3299CC

          96石板藍 #007FFF

          97艷粉紅色 #FF1CAE

          98春綠色 #00FF7F

          99鋼藍色 #236B8E

          100亮天藍色 #38B0DE

          101棕褐色 #DB9370

          102紫紅色 #D8BFD8

          103石板藍色 #ADEAEA

          104濃深棕色 #5C4033

          105淡淺灰色 #CDCDCD

          106紫羅蘭色 #4F2F4F

          107紫羅蘭紅色 #CC3299

          108麥黃色#D8D8BF

          109黃綠色 #99CC32

          簡單常用HTML代碼大全(修改網頁必備)

          網頁常用HTML代碼大全

          超鏈接,用的最多:

          點擊在當前頁打開網站

          <a >這是我的網站</a>

          效果:這是我的網站

          點擊彈出網站

          <a target="_blank">這是我的網站</a>

          <br>這個是向下一行,比如

          歡迎光臨我的網站<br>希望開心

          演示效果就是:

          歡迎光臨我的網站

          希望開心

          <p>向下一大行,比如

          歡迎光臨我的網站<p>希望開心

          演示效果就是:

          歡迎光臨我的網站

          希望開心

          <b>這是粗體字

          比如 <b >我的網站</ b>

          演示效果:我的網站

          我的網站這是字體的顏色BLUE是藍,RED是紅

          演示

          忽視右鍵

          <body >

          <body style="overflow-y:hidden">

          如何幾秒后轉到別的頁面?

          <META. HTTP-EQUIV="Refresh" C>

          點擊關閉窗口

          <a href="javascript.:top.window.close();">點擊關閉窗口</a>!

          請問如何去掉主頁右面的滾動條?

          <body scroll="no">

          <body style="overflow-y:hidden">

          如何做到讓一個網頁自動關閉.

          <html>

          <head>

          <OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

          <param name="Command" value="Close">

          </object>

          </head>

          <body >

          這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

          如何在不刷新頁面的情況下刷新css?

          <style>

          button{ color:#000000;}

          </style>

          <button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為紅色</button>

          請問如何讓網頁自動刷新?

          在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新,你可以更改為任意值。

          如何讓頁面自動刷新?

          方法一,用refresh

          HTML 代碼片段如下:

          <head>

          <meta. http-equiv="refresh" c>

          </head>

          5表示刷新時間

          [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

          方法二,使用setTimeout控制

          <img src=/logo.gif>

          <script>

          function rl(){

          document.location.reload()

          }

          setTimeout(rl,2000)

          </script>

          如何讓超鏈接沒有下劃線

          在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼:

          <style. type="text/css"> <!--

          a { text-decoration: none}

          --> </style>

          請問如何去掉IE的上下滾動條?

          <body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>

          </body>

          怎樣才能把RealPlayer文件在網頁做一個試聽連接?

          <embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>

          如何用html實現瀏覽器上后退按鈕的功能?

          <a href="java script.:history.go(-1)">點擊后退</a>

          或者

          <script> history.back() </script>

          請問怎么在網頁中改變鼠標的箭頭形狀?

          HTML 代碼片段如下:

          <body>

          <a href="#" style="cursor: auto;">auto</a><br>

          <a href="#" style="cursor: crosshair ">crosshair </a><br>

          <a href="#" style="cursor: default ">default </a><br>

          <a href="#" style="cursor: hand ">hand </a><br>

          <a href="#" style="cursor: move ">move </a><br>

          <a href="#" style="cursor: e-resize ">e-resize </a><br>

          <a href="#" style="cursor: ne-resize ">ne-resize </a><br>

          <a href="#" style="cursor: nw-resize">nw-resize</a><br>

          <a href="#" style="cursor: n-resize">n-resize</a><br>

          <a href="#" style="cursor: se-resize">se-resize</a><br>

          <a href="#" style="cursor: sw-resize">sw-resize</a><br>

          <a href="#" style="cursor: s-resize">s-resize</a><br>

          <a href="#" style="cursor: w-resize">w-resize</a><br>

          <a href="#" style="cursor: text">text</a><br>

          <a href="#" style="cursor: wait">wait</a><br>

          <a href="#" style="cursor: help">help</a><br>

          </body>

          怎樣不使用頁面的緩存?即每一次打開頁面時不是調用緩存中的東西

          <META. HTTP-EQUIV="

          ragma" C>

          頁面打開時自動彈出一個窗口的代碼怎么寫?

          HTML 代碼片段如下:

          <html>

          <head>

          <title>Untitled Document</title>

          <meta. http-equiv="Content-Type" c>

          <script. language="<B style="color:black;background-color:#A0FFFF">javascript</B>">

          <!--

          function MM_openBrWindow(theURL,winName,features) { //v2.0

           window.open(theURL,winName,features);

          }

          //-->

          </script>

          </head>

          <body bgcolor="#FFFFFF" text="#000000" >

          </body>

          </html>

          如何讓我的頁面出現一個會講話的小人?Merlin

          HTML 代碼片段如下:

          <HTML>

          <HEAD>

          <TITLE>默林</TITLE>

          <META. http-equiv=Content-Type c>

          </HEAD>

          <BODY>

          <p><OBJECT id=sims classid=CLSID

          45FD31B-5C6E-11D1-9EC1-00C04FD7081F>

           </OBJECT>

           <SCRIPT>

          var MerlinID;

          var MerlinACS;

          sims.Connected=true;

          MerlinLoaded=LoadLocalAgent(MerlinID, MerlinACS);

          Merlin=sims.Characters.Character(MerlinID);

          Merlin.Show();

          Merlin.Play("Surprised");

          Merlin.Speak("大家好");

          Merlin.Play("GestureLeft");

          Merlin.Think("我是默林!");

          Merlin.Play("

          leased");

          Merlin.Think("可愛嗎?");

          Merlin.Play("GestureDown");

          Merlin.Speak("哈哈!");

          Merlin.Hide();

          function LoadLocalAgent(CharID, CharACS){

          LoadReq=sims.Characters.Load(CharID, CharACS);

          return(true);

          }

          </SCRIPT>

          </p>

          <p> </p>

          <p>看此效果必須裝有office2000!!!</p>

          </BODY>

          </HTML>

          在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

          HTML 代碼片段如下:

          <html><head>

          <STYLE>

          body  {background-image:url(logo.gif);

          background-repeat:no-repeat; background-position:center }

          </STYLE>

          </head>

          <body bgproperties="fixed" >

          </body>

          </html>

          [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

          background-repeat:no-repeat; 是讓背景圖不占滿整個頁面

          body bgproperties="fixed" 是拉動scroll時背景圖不動

          文本輸入框什么屬性能實現不可輸入?

          HTML 代碼片段如下:

          <input type="text" name="textfield" disabled>

          或者

          <input type="text" name="textfield" readonly>

          如何禁止自己的頁面在別人的框架里打開?

          把以下代碼加至你的<head>區

          <script>

          if (window.top!=self){

          window.top.location=self.location

          }

          </script>

          如何實現首頁全屏幕顯示?

          HTML 代碼片段如下:

          <html>

          <body><script. language="<B style="color:black;background-color:#A0FFFF">javascript</B>">

          var coolw=642

          var coolh=400

          var coolhuang=window.open("http://www.51js.com","coolhuang","width="+coolw+",height="+coolh+",

          fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")

          window.close()

          </script></body></html>

          如何監聽一個窗口被關閉了?

          HTML 代碼片段如下:

          <body >

          如何禁止Ctrl+N?

          HTML 代碼片段如下:

          <body nkeydown=return(!(event.keyCode==78&&event.ctrlKey))>

          如何把頁面加入用戶的收藏夾?

          HTML 代碼片段如下:

          <a href="<B style="color:black;background-color:#A0FFFF">javascript</B>:window.external.AddFavorite(‘‘‘‘http://www.51js.com‘‘‘‘,‘‘‘‘無憂腳本‘‘‘‘)">收藏無憂腳本</a>

          如何在我的頁面中加入背景音樂?

          IE: <bgsound src="*.mid" loop=infinite>

          NS:<embed src="*.mid" autostart=true hidden=true loop=true>

          *.mid你的背景音樂的midi格式文件

          關于頁面轉換效果

          <meta. http-equiv="page-enter" c>

          <meta. http-equiv="page-exit" c>

          說明:Transition=23是隨機效果,另可以選0-22任一數字固定某個效果

          如何設定打開頁面的大小

          HTML 代碼片段如下:

          <body ><!--(width,height)-->

          怎樣雙擊滾屏,單擊停止?

          HTML 代碼片段如下:

          <html>

          <head>

          <title>新網頁1</title>

          </head>

          <body>

          <script. language"<B style="color:black;background-color:#A0FFFF">javascript</B>">

          var currentpos,timer;

          function initialize()

          {

          timer=setInterval("scrollwindow()",10);

          }

          function sc(){

          clearInterval(timer);

          }

          function scrollwindow()

          {

          currentpos=document.body.scrollTop;

          window.scroll(0,++currentpos);

          if (currentpos !=document.body.scrollTop)

          sc();

          }

          document.onmousedown=sc

          document.ondblclick=initialize

          </script>

          <p>a</p><p>a</p><p>a</p><p>aa</p><p>aa</p><p>aa</p>

          <p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p>

          <p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p>

          <p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>a</p>

          </body>

          </html>

          如何讓body中的文字不被選中?

          HTML 代碼片段如下:

          <body >aaa</body>

          如何讓彈出的窗口不能關閉?

          在新開的窗口中加入如下代碼

          <body nunload=open(location.href)>

          </body>

          如何讓瀏覽器在保存頁面時保存失敗?

          HTML 代碼片段如下:

          <NOSCRIPT>

          <<B style="color:black;background-color:#ffff66">IFRAME</B> SRC="*.html">

          </<B style="color:black;background-color:#ffff66">IFRAME</B>>

          </NOSCRIPT>

          表單中如何用圖片按鈕實現 reset?

          <html>

          <head>

          <script>

          function aaa(){

          document.forms[0].reset()

          }

          </script>

          </head>

          <body>

          <form>

          <textarea rows="2" name="S1" cols="20"></textarea>

          <input type="submit" values="提交" name="B1">

          <image src="logo.gif" nclick=aaa()>

          </form>

          </body></html>

          進入網頁時彈出的信息對話框

          <body >

          關閉窗口后彈出對話框

          <body >

          告別提示

          <body nUnload=alert("再見,感謝你的訪問!")>

          只要你肯干,沒有什么不能成功的.

          1。忽視右鍵

            <body ncontextmenu="return false">

            <body style="overflow-y:hidden">

          2。加入背景音樂

            IE:<bgsound src="*.mid" loop=infinite>

            NS:<embed src="*.mid" autostart=true hidden=true loop=true>

            </embed>

            *.mid你的背景音樂的midi格式文件

          3。簡單的window.open方法

            <a href="#"

            nclick="javascript:window.open(文件路徑/文件名,newwindow,

            toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,

            width=400,height=300);">文字或圖片</a>

          參數解釋:

            <SCRIPT. LANGUAGE="javascript"> js腳本開始;

            window.open 彈出新窗口的命令;

          文件路徑/文件名 彈出窗口的文件名;

            newwindow 彈出窗口的名字(不是文件名),非必須,可用空代替;

            width=400 窗口寬度;

            height=300 窗口高度;

            top=0 窗口距離屏幕上方的象素值;

            left=0 窗口距離屏幕左側的象素值;

            toolbar=no 是否顯示工具欄,yes為顯示;

            menubar,scrollbars 表示菜單欄和滾動欄。

            resizable=no 是否允許改變窗口大小,yes為允許;

            location=no 是否顯示地址欄,yes為允許;

            status=no 是否顯示狀態欄內的信息(通常是文件已經打開),yes為允許;

            </SCRIPT> js腳本結束

          4。簡單的頁面加密

            <script. LANGUAGE="javascript">

            <!--

            function loopy(){

          var sWord="";

          while(sWord!="login"){sWord=prompt("請輸入你的登陸密碼");}

          alert("登陸成功!");

            }

            loopy()

            //-->

            </script>

          5。拉動頁面時背景圖不動

            <style>

            body{background-image:url(logo.gif);

            background-repeat:no-repeat;background-position:center}

            </style>

          6。讓瀏覽器在保存頁面時保存失敗

            <NOSCRIPT><iframe. src="*.html"></iframe></NOSCRIPT>

          7。隨機替換圖片

            <script>

            document.write(<img src="img/+parseInt(Math.random()*(5))

            +.gif"height="40" width="50">

            </script>

          圖片文件名為0.gif 1.gif 2.gif 3.gif 4.gif

          8。窗口定時關閉

          先將如下代碼網頁文件的區:

            <script. language="javascript">

            function closeit() { setTimeout("self.close()",10000) //毫秒 }

            </script>

          然后再在<body>標內加入如:<body nload="closeit()">

          9。網頁自動關閉

            <html>

            <head>

            <object id=closes type="application/x-oleobject"

            classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

            <param name="Command" value="Close">

            </object>

            </head>

            <body nload="window.setTimeout(closes.Click(),10000)">

          這個窗口會在10秒過后自動關閉,而且不會出現提示.

            </body>

            </html>

          10。網頁自動刷新

          在head部記入

            <META. HTTP-EQUIV="Refresh" content="20">

          其中20為20秒后自動刷新,你可以更改為任意值。

          11。網頁自動轉頁

            <META. HTTP-EQUIV="Refresh" CONTENT="時間(秒);URL=地址">

          12。保持layer在最前面,而不被Iframe、Object所覆蓋

          在Layer中再插Iframe. 或 Object 設z-Index值

            <div z-Index:2><object xxx></object> # 前面

            <div z-Index:1><object xxx></object> # 后面

            <div id="Layer2" style="position:absolute; top:40;width:400px;

            height:95px;z-index:2"> height=100% width=100%>

            <iframe. width=0 height=0></iframe>

            </div>

            <div id="Layer1" style="position:absolute; top:50;width:200px;

            height:115px;z-index:1">

            <iframe. height=100% width=100%></iframe>

            </div>

          13。返回上一頁

            <a href=javascript:history.back(1)>『返回上一頁』</a>

          14。關閉窗口

            <a href=javascript:self.close()>『關閉窗口』</a>

          15。關于iframe的透明背景

            <IFRAME. ID="iFrame1" SRC="iframe.htm"

            allowTransparency="true"

            style="background-color: green"></IFRAME>

          16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

          <table border ncontextmenu=return(false)><td>no</table> 可用于Table

          17. <body nselectstart="return false"> 取消選取、防止復制

          18.onpaste="return false" 不準粘貼

          19.oncopy="return false;" ncut="return false;" 防止復制

          20. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標

          21. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

          22. <input style="ime-mode:disabled"> 關閉輸入法

          23. 永遠都會帶著框架

          <script. language="JavaScript"><!--

          if (window==top)top.location.href="frames.htm"; //frames.htm為框架網頁

          // --></script>

          24. 防止被人frame.

          <SCRIPT. LANGUAGE=JAVASCRIPT><!--

          if (top.location !=self.location)top.location=self.location;

          // --></SCRIPT>

          25. 網頁將不能被另存為

          <noscript><iframe. src=*.html></iframe></noscript>

          26. 查看網頁源代碼

          <input type=button value=查看網頁源代碼

          onclick="window.location="view-source:"+ "http://www.pconline.com.cn"">

          27.刪除時確認

          <a href="javascript:if(confirm("確實要刪除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>

          28.屏蔽功能鍵Shift,Alt,Ctrl

          <script>

          function look(){

          if(event.shiftKey)

          alert("禁止按Shift鍵!"); //可以換成ALT CTRL

          }

          document.onkeydown=look;

          </script>

          29. 網頁不會被緩存

          <META. HTTP-EQUIV="pragma" CONTENT="no-cache">

          <META. HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

          <META. HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

          或者<META. HTTP-EQUIV="expires" CONTENT="0">

          30.怎樣讓表單沒有凹凸感?

          <input type=text style="border:1 solid #000000">

          或 <input type=text style="border-left:none; border-right:none; border -top:none; border-bottom: 1 solid #000000"></textarea>

          31.不要滾動條?

          讓豎條沒有:

          <body style="overflow:scroll;overflow-y:hidden">

          </body>

          讓橫條沒有:

          <body style="overflow:scroll;overflow-x:hidden">

          </body>

          兩個都去掉?更簡單了

          <body scroll="no">

          </body>

          32.怎樣去掉圖片鏈接點擊后,圖片周圍的虛線?

          <a href="#" nFocus="this.blur()"><img src="logo.jpg" border=0></a>

          33.電子郵件處理提交表單

          <form. name="form1" method="post" action="mailt****@***.com" enctype="text/plain">

          <input type=submit>

          </form>

          34.在打開的子窗口刷新父窗口的代碼里如何寫?

          window.opener.location.reload()

          35.如何設定打開頁面的大小

          <body nload="top.resizeTo(300,200);">

          打開頁面的位置<body nload="top.moveBy(300,200);">

          36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

          <STYLE>

          body

          {background-image:url(logo.gif); background-repeat:no-repeat;

          background-position:center;background-attachment: fixed}

          </STYLE>

          37. 檢查一段字符串是否全由數字組成

          <script. language="Javascript"><!--

          function checkNum(str){return str.match(//D/)==null}

          alert(checkNum("1232142141"))

          alert(checkNum("123214214a1"))

          // --></script>

          38. 獲得一個窗口的大小

          document.body.clientWidth; document.body.clientHeight

          39. 怎么判斷是否是字符

          if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

          else alert("全是字符");

          40.TEXTAREA自適應文字行數的多少

          <textarea rows=1 name=s1 cols=27 npropertychange="this.style.posHeight=this.scrollHeight">

          </textarea>

          41. 日期減去天數等于第二個日期

          <script. language=Javascript>

          function cc(dd,dadd)

          {

          //可以加上錯誤處理

          var a=new Date(dd)

          a=a.valueOf()

          a=a - dadd * 24 * 60 * 60 * 1000

          a=new Date(a)

          alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

          } cc("12/23/2002",2)

          </script>

          42. 選擇了哪一個Radio

          <HTML><script. language="vbscript">

          function checkme()

          for each ob in radio1

          if ob.checked then window.alert ob.value

          next

          end function

          </script><BODY>

          <INPUT name="radio1" type="radio" value="style" checked>Style.

          <INPUT name="radio1" type="radio" value="barcode">Barcode

          <INPUT type="button" value="check" nclick="checkme()">

          </BODY></HTML>

          43.腳本永不出錯

          <SCRIPT. LANGUAGE="JavaScript">

          <!-- Hide function killErrors(){return true;} window.onerror=killErrors; // -->

          </SCRIPT>

          44.ENTER鍵可以讓光標移到下一個輸入框

          <input nkeydown="if(event.keyCode==13)event.keyCode=9">

          45. 檢測某個網站的鏈接速度:

          把如下代碼加入<body>區域中:

          <script. language=Javascript>

          tim=1

          setInterval("tim++",100)

          b=1

          var autourl=new Array()

          autourl[1]="www.njcatv.net"

          autourl[2]="javacool.3322.net"

          autourl[3]="www.sina.com.cn"

          autourl[4]="www.nuaa.edu.cn"

          autourl[5]="www.cctv.com"

          function butt(){

          document.write("<form. name=autof>")

          for(var i=1;i<autourl.length;i++)

          document.write("<input type=text name=txt"+i+" size=10 value=測試中

          ……>=》<input type=text

          name=url"+i+" size=40>=》<input type=button value=GO

          onclick=window.open(this.form.url"+i+".value)><br>")

          document.write("<input type=submit value=刷新></form>")

          }

          butt()

          function auto(url){

          document.forms[0]["url"+b].value=url

          if(tim>200)

          {document.forms[0]["txt"+b].value="鏈接超時"}

          else

          {document.forms[0]["txt"+b].value="時間"+tim/10+"秒"} b++ }

          function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 nerror=auto("http://"+autourl+"")>")}

          run()</script>

          46. 各種樣式的光標

          auto :標準光標

          default :標準箭頭

          hand :手形光標

          wait :等待光標

          text :I形光標

          vertical-text :水平I形光標

          no-drop :不可拖動光標

          not-allowed :無效光標

          help :?幫助光標

          all-scroll :三角方向標

          move :移動標

          crosshair :十字標

          e-resize

          n-resize

          nw-resize

          w-resize

          s-resize

          se-resize

          sw-resize

          47、禁止鼠標右鍵,把Demo的圖片全都設為表格的背景,表格的大小與圖片的大小一樣。這樣做看起來是一樣的,主要是防止鼠標經過圖片時會出現另存的按鈕。禁止鼠標右鍵的代碼很簡單:<script. LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert('呵呵,不好意思,你甭想使用右鍵下載圖片:)'); } } document.onmousedown=click</script>

          1. 怎 樣 定 義 網 頁 語 言( 字 符 集)?

          ----在 制 作 網 頁 過 程 中, 你 首 先 要 定 義 網 頁 語 言, 以 便 訪 問 者 瀏 覽 器 自 動 設 置 語 言, 而 我 們 用 所 見 即 所 得 的HTML 工 具 時, 都 沒 有 注 意 到 這 個 問 題, 因 為 它 是 默 認 設 置。 要 設 置 的 語 言 可 以 在HTML 代 碼 狀 態 下 找 到:

          $#@60; meta http -equiv="Content Type" content="text/html; charset=gb2312" $#@62;

          ----把charset=gb2312 改 換 成 其 它 語 言 代 碼 即 可, 比 如 英 文:charset=en.

          2. 怎 樣 防 止 別 人 把 你 的 網 頁 放 到 框 架 里?

          ----因 為 框 架(frame) 的 緣 故, 有 許 多 人 把 別 人 的 網 頁 放 置 到 自 己 的 框 架 里, 使 之 成 為 自 己 的 一 頁。 如 果你 要 防 止 別 人 這 樣 做, 可 以 加 入 下 列JavaScript 代 碼 即 可, 它 會 自 動 監 測, 然 后 跳 出 別 人 的 框 架。

          $#@60; script language="javascript" $#@62;

          ??if (self !=top) { top.location=self.location; }

          $#@60; /script $#@62;

          3. 怎 樣 設 置 字 體?

          ----在 制 作 網 頁 過 程 中, 大 家 都 喜 歡 使 用 漂 亮 的 字 體。 但 是, 如 果 訪 客 瀏 覽 器 沒 有 安 裝 同 樣 的 字 體, 看 到你 的 網 頁 會 是 很 普 通 的 字 體。 如 何 防 止 這 種 情 況 出 現 呢? 大 家 知 道 字 體 設 置 的 標 簽 是Font, 而 它 有 個 屬性 是Face, 該 屬 性 是 定 義 字 體 的, 你 可 以 這 樣 設 置:, 訪 客 的 瀏 覽 器 就 會 按 照Face 定 義 的 字 體 順 序 設 置 已 安裝 的 字 體。 目 前 動 態 主 頁 有 種 技 術, 可 以 把 字 體 信 息 用 向 量 格 式 存 儲, 然 后 利 用 訪 客 本 身 機 器 含 有 的 公共 信 息 庫 把 字 體 快 速 的 組 裝 起 來, 這 樣, 就 不 用 擔 心 訪 客 是 否 安 裝 有 某 種 字 體 了。

          4. 怎 樣 在 網 頁 中 加 入 注 釋?

          ----在 共 同 開 發 網 頁 中, 加 入 注 釋 是 防 止 分 工 被 搞 混 淆 或 者 注 釋 某 段 代 碼 特 殊 的 含 加 入 注 釋 的 格 式 是:

          $#@60; ! - - Microsoft FrontPage 3.0 - - $#@62;。

          5. 怎 樣 測 試 瀏 覽 器 并 自 動 裝 入 所 需 要 的 網 頁?

          ----目 前 微 軟 和 網 景 的 瀏 覽 器 并 不 能 完 全 兼 容 所 有 網 頁, 有 的 在 某 種 瀏 覽 器 里 非 常 漂 亮, 而 用 其 它 瀏 覽 器查 看 時 卻 一 團 糟。 如 果 你 需 要 測 試 瀏 覽 器, 可 以 加 入 以 下JavaScript 代 碼 并 保 存 單 獨 一 個 網 頁:

          $#@60; script LANGUAGE="JavaScript" $#@62;

          function TestBrowser(){

          ie=((navigator.appName==

          "Microsoft Internet Explorer") & &

          (parseInt(navigator.appVersion) $#@62;=3 ))

          ns=((navigator.appName=="Netscape") & &

          (parseInt(navigator.appVersion) $#@62;=3 ))

          if (ns) {

          setTimeout(location.href="nn4.htm",10);

          } else {

          setTimeout(location.href="ie4.htm",10);

          }

          }

          $#@60; /script $#@62;

          實 例 請 參 考:

          http://www.netease.com/~tiantao/test.htm

          6. 怎 樣 讓 鏈 接 沒 有 下 劃 線?

          ----只 要 在 加 入 以 下 代 碼, 所 有 鏈 接 就 都 沒 有 下 劃 線 了:

          $#@60; style type="text/css" $#@62;

          $#@60; ! - -

          A{text -transform: none;

          text -decoration: none ;}

          a:hover { text -decoration:underline }

          - - $#@62;

          $#@60; /style $#@62;

          7. 怎 樣 在 網 頁 中 加 入E-mail 鏈 接 并 顯 示 預 定 的 主 題?

          A HREF=mailto:lovett@163.net?subject=test

          8. 怎 樣 讓 背 景 圖 像 不 滾 動?

          ----Internet Explorer 瀏 覽 器 支 持 一 個Body 屬 性Bgproperties, 它 可 以 讓 背 景 不 滾 動。

          $#@60; Body Background="c98.gif" Bgproperties="fixed" $#@62;

          9. 怎 樣 評 定 網 頁 的 級 別?

          ----在IE4.0 瀏 覽 器 中, 有 一 項 功 能 是 過 濾 網 站 的, 一 些 受 限 制 的 網 站 被 過 濾 掉, 而 該 網 站 必 須 被RSAC( 美 國娛 樂 委 員 會) 評 定 了 級 別IE4.0 才 能 過 濾, 如 果 你 要 評 級 可 以 在 網 頁 中 加 入 以 下 代 碼:

          $#@60; meta http -equiv="PICS -Label"????

          content=(PICS -1.1 "http://www.rsac.org/ratingsv01.html"

          ??l gen true comment "RSACi North America Server"

          ??for "http://youHostname"

          ??on "1998.11.26GMT08:15 ?0500"

          ??r (n 0 s 0 v 0 l 0))$#@62;

          10. 怎 樣 定 義 本 網 頁 的 關 鍵 字?

          ----在 網 頁 中 加 入 關 鍵 字, 可 以 供 某 些 搜 索 站 臺 機 器 人 的 使 用, 它 們 會 利 用 該 關 鍵 字 為 你 的 網 站 做 索 引, 這樣, 當 別 人 用 關 鍵 字 搜 索 網 站 時, 如 果 你 的 網 頁 包 含 該 關 鍵 字, 那 么 就 可 以 被 列 出 了, 定 義 本 網 頁 關 鍵 字, 可 以 加 入 以 下 代 碼:

          ----$#@60; meta name="Keywords" content="china,enterprise,business,net" $#@62;

          ----Content 所 包 含 的 就 是 關 鍵 字, 你 可 以 自 行 設 置。

          ----這 里 有 個 技 巧, 你 可 以 重 復 某 一 個 單 詞, 這 樣 可 以 提 高 自 己 網 站 的 排 行 位 置, 如:

          ----$#@60; meta name="Keywords" CONTENT="china,china,china,china" $#@62;

          11. 怎 樣 鏈 接 本 網 頁 的 對 象?

          ----有 時 鏈 接 發 生 在 一 個 網 頁 里, 比 如 頁 面 上 半 部 分 列 出 了 目 錄, 下 部 分 就 列 出 了 內 容, 而 單 擊 目 錄 任 何 一個 項 目 都 可 以 跳 到 指 定 部 分, 可 以 在 要 被 鏈 接 的 內 容 部 分 設 置 如 下 方 式:

          $#@60; A NAME=" #t1" $#@62;$#@60; /A $#@62;

          而 要 鏈 接 到 以 上 設 置 的 部 分, 可 以 如 下 編 制:

          $#@60; A HREF="index.htm #t1" $#@62;t1$#@60; /A $#@62;

          12. 怎 樣 為 不 支 持 框 架 結 構 的 瀏 覽 器 指 定 內 容?

          ----為 了 防 止 不 支 持 框 架 結 構 的 瀏 覽 器 訪 問 你 的 網 頁, 可 以 在 你 的 網 頁 中 加 入 以 下 內 容:

          $#@60; body $#@62;

          $#@60; noframes $#@62;

          本 網 頁 是 框 架 結 構, 請 下 載 新 的 瀏 覽 器 瀏 覽

          $#@60; /noframes $#@62;

          $#@60; /body $#@62;

          13. 怎 樣 刪 除 表 格 邊 框?

          ----有 時 需 要 刪 除 表 格 的 邊 框, 你 可 以 把Border 設 置 為 如 下 代 碼:

          $#@60; body $#@62;

          $#@60; table border="0" width="100 %" $#@62;

          $#@60; tr $#@62;

          $#@60; td width="100 %" $#@62;$#@60; /td $#@62;

          $#@60; /tr $#@62;

          $#@60; /table $#@62;

          $#@60; /body $#@62;

          14. 怎 樣 隱 藏 在 狀 態 欄 里 出 現 的LINK 信 息?

          ----大 家 知 道, 當 你 指 向 一 個 鏈 接 時, 該 鏈 接 的 信 息 會 出 現 在 瀏 覽 器 狀 態 欄 里, 如 果 需 要 隱 藏 信 息, 可 以 如 下設 置:

          $#@60; a onMouseOver="window.status=none ;

          return true" $#@62;test$#@60; /a $#@62;

          15. 怎 樣 在 網 頁 中 加 入 多 媒 體 文 件?

          ----有 些 多 媒 體 文 件 無 需 其 他 程 序 就 可 以 播 放, 而 有 許 多 多 媒 體 文 件 需 要 外 部 程 序 的 幫 助, 當 瀏 覽 器 下 載不 支 持 的 格 式 時 會 調 用 外 部 程 序。 如 果 瀏 覽 器 沒 有 安 裝 這 種 外 部 程 序, 那 么 瀏 覽 器 會 自 動 去 下 載; 如 果你 需 要 加 入 多 媒 體 格 式, 可 設 置 如 下 代 碼:

          $#@60; EMBED SRC="tt.ram" AUTOSTART="TRUE" LOOP="2" WIDTH="80" HEIGHT="30" $#@62;

          ----對 于 不 支 持EMBED 標 簽 的 瀏 覽 器, 可 以 改 用 標 簽。

          16. 怎 樣 在 網 頁 中 加 入 電 子 郵 件 表 單 提 交?

          ----表 單 提 交 需 要CGI 程 序 的 支 持, 但 你 也 可 以 利 用E ?mail 提 交, 當 你 設 計 好 表 單 后, 把Action 內 容 加 入 郵 件地 址 即 可, 如 下:

          form method="POST" action="mailto:lovett@163.net" ENCTYPE="text/plain"$#@62;

          17. 怎 樣 隱 藏 熱 訊 分 析 的 圖 標?

          ----熱 訊 分 析 是 許 多 網 友 使 用 的 服 務, 它 能 幫 助 你 分 析 網 站 的 流 量, 如 果 你 想 隱 藏 該 服 務 圖 標, 可 以 把 服 務代 碼 中 的 width=88 height=31 都 改 為1 即 可。

          18. 怎 樣 在 網 頁 中 加 入 最 后 修 改 日 期?

          ----在 中 加 入 以 下 代 碼 即 可:

          $#@60; Script Language="Java Script" $#@62;

          document.write

          (" 最 后 修 改 日 期" +document.lastModified);

          $#@60; /Script $#@62;


          主站蜘蛛池模板: 91精品一区二区三区在线观看| 国产精品无码一区二区三区毛片 | 日韩免费观看一区| 国产高清精品一区| 亚洲一区二区三区在线网站 | 国产精品一区二区毛卡片| 精品国产一区二区三区免费| 成人精品视频一区二区三区尤物| 久久精品国产一区二区三| 一区二区三区影院| 婷婷国产成人精品一区二| 国产一区二区三区在线观看免费 | 亚洲日韩AV一区二区三区四区 | 国产精品免费视频一区| 99在线精品一区二区三区| 久久一本一区二区三区| 蜜桃传媒视频麻豆第一区| 亚洲一区二区女搞男| 成人精品视频一区二区三区不卡 | 国产精品女同一区二区| 成人免费区一区二区三区| 中文字幕在线观看一区| 免费观看一区二区三区| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 亚洲Av高清一区二区三区| 色窝窝无码一区二区三区成人网站| 相泽亚洲一区中文字幕| 国产日韩AV免费无码一区二区三区| 无码国产精品一区二区高潮| 国产乱码精品一区二区三区四川人 | 国产激情一区二区三区在线观看| 亚洲字幕AV一区二区三区四区| 乱码精品一区二区三区| 无码播放一区二区三区| 亚洲AV网一区二区三区| 国产伦理一区二区三区| 无码人妻一区二区三区免费视频 | 国产AV天堂无码一区二区三区| 福利一区二区三区视频午夜观看| 亚洲国产成人久久综合一区77 | 2022年亚洲午夜一区二区福利 |