整合營銷服務商

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

          免費咨詢熱線:

          爬蟲學習:HTML知識簡介

          爬蟲學習:HTML知識簡介

          、 HTML語言
          HTML 指的是超文本標記語言 (Hyper Text Markup Language),它不是一種編程語言,而是一種使用一套標記標簽(markup tag)來標記元素作用的標記語言,標記語言使用標記標簽來描述網頁的內容。標記標簽不會出現在頁面中,只有標簽中的內容才會顯示在頁面上。

          二、 HTML標簽和HTML元素
          HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag),是由一對尖括號括起來的關鍵詞,稱為標簽名,如 <html>、<a>、<h1>。標簽不區分大小寫,但是推薦使用小寫,(X)HTML 版本中強制使用小寫,這樣更加嚴謹。
          標簽的標記分為起始標簽和結束標簽。HTML 元素指的是從開始標簽(start tag)到結束標簽(end tag)的所有內容。
          起始標簽用于標記對應HTML元素的開始位置,結束標簽用于標記HTML元素的結束位置。
          標簽分為單標簽和雙標簽,都需要起始標簽和結束標簽,不同的是單標簽起始、結束標簽都寫在一個尖括號里而雙標簽則分別寫在兩個尖括號里。單標簽又稱為空標簽,雙標簽又稱為閉合標簽。單標簽的結束標簽就是在標簽的右尖括號前面一個反斜杠,如<br />就是一個單標簽,雙標簽的結束標簽就是在左尖括號后比開始標簽多了一個反斜杠,如<html>和</html>就是一對開始標簽和結束標簽。

          三、 HTML元素的分類
          不同的HTML標簽對應的HTML元素可以根據位置特征等分為兩類:

          1. 塊元素(block)
            塊元素主要用來搭建網站架構、頁面布局、承載內容,常見塊元素對應的標簽有: address、blockquote、center、dd、dl、dt、div、dir、fieldset、form、h1-h6、hr、isindex、li、menu、noframes、noscript、ol、table、p、pre、table、u、ul,即這些標簽對應的HTML元素為塊元素。塊元素可設置寬高以及內外邊距、在新行上開始,塊級元素如果不設置寬度和高度,則寬度默認為父級元素(容器)的寬度。高度則根據內容大小自動填充。
          2. 行元素(inline)
            行元素用于加強內容顯示、控制細節,例如:加粗、斜體等等,常見行元素對應的標簽有: a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var …等,行元素和其他元素都在一行上,高、行高及頂和底邊距不可改變,寬度就是它的文字或圖片的寬度,不可改變,可以設置左右內、外邊距,行元素與其他行元素可共處一行

          四、 標簽嵌套
          雙標簽的開始標簽和結束標簽之間可以嵌套其他標簽,不過需要遵循以下規則:
          1、兩個標簽嵌套時必須確保開始標簽和結束標簽的層級是一致的,即開始標簽在外層的結束標簽必須在外層;
          2、建議書寫HTML文本時嵌套標簽的內層標簽相對外層標簽進行縮進以體現嵌套關系;
          3、塊元素標簽可以包含行元素標簽,但行元素標簽不能包含塊元素標簽,它們只能包含其它的行元素標簽;
          4、a標簽想要用hover必須把它的路徑寫全;
          5、偽類(hover/link/visited/active)只能加給a標簽,在支持 CSS 的瀏覽器中,偽類表示鏈接的不同狀態,這些狀態包括:活動狀態,已被訪問狀態,未被訪問狀態,和鼠標懸停狀態:
          1)link用在為訪問的連接上;
          2)visited用在已經訪問過的連接上;
          3)hover用于鼠標光標置于其上的連接;
          4)active用于獲得焦點(比如,被點擊)的連接上。
          6、塊元素標簽之間:
          1)h1、h2、h3、h4、h5、h6、p、dt標簽內不能再嵌套塊標簽;
          2)li元素可以嵌入ul, ol, div;
          3)div內可以再嵌套其他塊元素;
          4)塊元素嵌套其他標簽時,同一層級必須都是塊元素,或必須都是行元素,不能一部分是塊元素,一部分是行元素。如<div><span></span><p></p></div>這種模式是錯誤的,因為span是行元素,p是塊元素,所以這個是錯誤的嵌套。

          雖然標簽可以嵌套,但為了提高瀏覽器的渲染效率,應該盡量少使用標簽嵌套。

          五、 標簽的屬性
          HTML 標簽可以擁有屬性,屬性為HTML元素提供的更多的附加信息, 屬性只能在開始標簽中使用,總是以名稱/值對的形式出現,屬性與屬性之間需要用空格隔開,屬性使用小寫。常用的屬性有class(樣式類)、id(屬性名)、style(顯示風格)、title(標題)、align(對齊方式)、bgcolor(背景色)、color(顏色)。
          如:

          何計算機語言都會包含大量的內置函數,當然也可以自定義函數。

          JS函數是由事件驅動或者當它被調用時執行的可重復使用的代碼塊。相對來說,JS的函數比較復雜。

          目錄

          1 常規函數

          2 JS嵌套函數

          3 JSt函數字面值

          4 函數對象Function

          5 匿名函數,也叫內聯函數

          6 閉包

          7 內聯函數作為對象的方法

          8 常規函數做為對象的方法

          9 對象字面量

          1 常規函數

          JS函數是先定義后調用。(C語言還要先聲明)

          function myFunction(a,b)

          {

          return a*b;

          }

          document.getElementById("demo").innerHTML=myFunction(4,3);

          JS可以在<script>標簽中直接調用函數,也可以在鏈接或事件中調用。

          <a href="JavaScript:myFuncion(a,b)">myf</a>

          <input type="button" value="click" onClick="myFuncion(a,b);" />

          2 JS嵌套函數

          JavaScript允許函數用作數據,也允許在函數中嵌入函數。

          function hypotenuse(a, b) {
          function square(x) { return x*x; }
          return Math.sqrt(square(a) + square(b));
          }

          hypotenuse(1, 2); // This will produce 2.2360

          3 JSt函數字面值

          字面值函數的語法很類似的函數聲明,不同之處在于它被用作表達,它不是作為一個聲明,函數名是必需的。

          var func=function(x,y){ return x*y };

          你可以在上面函數中調用如下:

          func(10,20); // This will produce 200

          4 函數對象Function

          Function也是一個對象,可以使用new運算符創建一個實例。

          <script type="text/javascript">

          var variablename=new Function(Arg1, Arg2..., "Function Body");

          </script>

          下面是創建一個函數的例子:

          <script type="text/javascript">

          var func=new Function("x", "y", "return x*y;");

          </script>

          Function()函數構造預期任意數量的字符串參數。最后一個參數是函數體,它可以包含任意JavaScript語句,用分號彼此分開。

          請注意,Function()構造不通過任何參數,指定一個名字為它創建函數。使用Function()構造函數創建的未命名的函數稱為匿名函數。

          5 匿名函數,也叫內聯函數

          函數(沒有名字)定義可以被賦值給一個變量,該變量被用作函數的引用。

          匿名函數是指那些無需定義函數名的函數。匿名函數與 Lambda 表達式(拉姆達表達式)是一回事。唯一的不同——語法形式不同。Lambda 表達式更進一步。本質上,它們的作用都是:產生方法——內聯方法,也就是說,省去函數定義,直接寫函數體。

          var abc=function(x,y){

          return x+y;

          }

          alert(abc(2,3)); // "5"

          匿名函數也可以作為事件方法:

          window.onload=function(){

          alert("Welcome");

          }

          var baz1=function() {

          var foo=10;

          var bar=2;

          return foo * bar;

          };

          function mutil() {

          var foo=10;

          var bar=2;

          return foo * bar;

          };

          alert(baz1());

          var baz2=mutil();

          alert(baz2);

          baz1 與 baz2 完全一樣,但 baz1 與 baz2 相比,省去了函數定義,直接函數體——看上去多簡約。

          6 閉

          閉包是定義在另一個函數中的匿名函數。當外部函數退出時,它會返回內部匿名函數的引用,使得通過引用調用內部函數成為可能。閉包意味著局部變量對內部函數仍然可用,即使它已經超出其作用域。閉包可以讓變量一直存活到不再需要它們的時候。閉包,其實就是指程序語言中能讓代碼調用已運行的函數中所定義的局部變量。js中某個函數的內部函數在該函數執行結束后仍然可以訪問這個函數中定義的變量,這稱為閉包(Closure) 。

          閉包可以用在許多地方。它的最大用處有兩個,一個是可以讀取函數內部的變量,另一個就是讓這些變量的值始終保持在內存中。

          請看下面的代碼。

          function f1(){

              var n=999;

              nAdd=function(){n+=1}

              function f2(){

          alert(n);

          }

              return f2;

            }

            var result=f1();

            result(); // 999

            nAdd();

            result(); // 1000

          在這段代碼中,result實際上就是閉包f2函數。它一共運行了兩次,第一次的值是999,第二次的值是1000。這證明了,函數f1中的局部變量n一直保存在內存中,并沒有在f1調用后被自動清除。

          為什么會這樣呢?原因就在于f1是f2的父函數,而f2被賦給了一個全局變量,這導致f2始終在內存中,而f2的存在依賴于f1,因此f1也始終在內存中,不會在調用結束后,被垃圾回收機制(garbage collection)回收。

          這段代碼中另一個值得注意的地方,就是“nAdd=function(){n+=1}”這一行,首先在nAdd前面沒有使用var關鍵字,因此 nAdd是一個全局變量,而不是局部變量。其次,nAdd的值是一個匿名函數(anonymous function),而這個

          匿名函數本身也是一個閉包,所以nAdd相當于是一個setter,可以在函數外部對函數內部的局部變量進行操作。

          function foo() {

          var a=10;

          function bar() {

          a *=2;

          return a;

          }

          return bar;

          }

          var baz=foo();

          document.write(baz(),"<br>");

          document.write(baz(),"<br>");

          document.write(baz(),"<br>");

          var blat=foo();

          document.write(blat(),"<br>");

          //20,40,80,20

          7 內聯函數作為對象的方法

          function Distance(r,t){

          this.rate=r;

          this.time=t;

          this.calculate=function() { return r * t;}

          }

          <body>

          var trip1=new Distance(50, 1.5);

          var trip2=new Distance(75, 3.2);

          document.write("trip 1 distance: "+trip1.calculate(),"<br />");

          document.write("trip 2 distance: "+trip2.calculate(),"<br />");

          //75,240

          </body>

          8 常規函數做為對象的方法

          var toy=new Object();

          toy.name="Lego";

          toy.color="red";

          toy.shape="rectangle";

          toy.display=printObject;

          function printObject(){

          document.write("<b>The toy is a " + toy.name + ".<br>");

          document.write("It is a " + toy.color + " " + toy.shape + ".<br />");

          }

          <body>

          <script>

          toy.display();

          toy.color="blue";

          toy.display();

          </script>

          </body>

          運行結果:

          The toy is a Lego.

          It is a red rectangle.

          The toy is a Lego.

          It is a blue rectangle.

          9 對象字面量,也用匿名函數做為對象方法

          <script>

          var soldier={

          name: undefined,

          rank: "captain",

          picture: "keeweeboy.jpg",

          fallIn: function(){

          document.write("At attention……<br>");

          },

          fallOut: function(){

          document.write("Drop out of ……<br>");

          }

          };

          </script>

          <body>

          <script>

          soldier.name="Tian";

          document.write("The soldier's name is ", soldier.name,".<br />");

          document.write(soldier.name+"'s name is ", soldier.rank,".<br />");

          soldier.fallIn();

          soldier.fallOut();

          </script>

          </body>

          -End-

          TML 元素

          HTML 文檔由 HTML 元素定義,HTML 元素指的是從開始標簽(start tag)到結束標簽(end tag)的所有代碼。

          HTML 元素語法

          HTML 元素以開始標簽起始

          HTML 元素以結束標簽終止

          元素的內容是開始標簽與結束標簽之間的內容

          某些 HTML 元素具有空內容(empty content)

          空元素在開始標簽中進行關閉(以開始標簽的結束而結束)

          大多數 HTML 元素可擁有屬性

          注釋: 您將在本教程的 HTML 屬性一章中學習更多有關屬性的詳細內容。

          嵌套的 HTML 元素

          HTML 文檔由嵌套的 HTML 元素(可以包含其他 HTML 元素)構成。

          HTML 文檔實例

          <!DOCTYPE html>

          <html>

          <body>

          <p>這是第一個段落。</p>

          </body>

          </html>

          上述的實例包含了三個 HTML 元素。

          HTML 實例解析

          <p> 元素:

          <p>這是第一個段落。</p>

          這個 <p> 元素定義了 HTML 文檔中的一個段落。

          這個元素擁有一個開始標簽 <p> 以及一個結束標簽 </p>。

          元素內容是: 這是第一個段落。

          <body> 元素:

          <body>

          <p>這是第一個段落。</p>

          </body>

          <body> 元素定義了 HTML 文檔的主體。

          這個元素擁有一個開始標簽 <body> 以及一個結束標簽 </body>。

          元素內容是另一個 HTML 元素(p 元素)。

          <html> 元素:

          <html>

          <body>

          <p>這是第一個段落。</p>

          </body>

          </html>

          <html> 元素定義了整個 HTML 文檔。

          這個元素擁有一個開始標簽 <html> ,以及一個結束標簽 </html>.

          元素內容是另一個 HTML 元素(body 元素)。

          不要忘記結束標簽

          如果您忘記了使用結束標簽,大多數瀏覽器也會正確地顯示 HTML:

          <p>這是一個段落

          <p>這是一個段落

          上述實例在瀏覽器中也能正常顯示,因為關閉標簽是可選的。

          但您不能對此產生依賴性,因為忘記使用結束標簽會產生不可預料的結果或錯誤。

          HTML 空元素

          HTML 空元素即為沒有內容的 HTML 元素。

          HTML 空元素應該在開始標簽中關閉。

          HTML 的一個空元素為 <br>(用于定義換行),<br> 元素就是沒有關閉標簽。

          HTML 空元素的關閉方法是在開始標簽中添加斜杠,比如 <br />,HTML、XHTML 和 XML 都接受這種方式。

          注意:在 XHTML、XML 以及未來版本的 HTML 中,所有元素都必須被關閉,即使是空元素。

          HTML 提示:使用小寫標簽

          由于 HTML 標簽對英文字母的大小寫不敏感,所以 <P> 和 <p> 表達的意思相同,不過大部分網站喜歡使用大寫的 HTML 標簽。因為萬維網聯盟(W3C)在 HTML 4 中推薦使用小寫,而在未來 (X)HTML 版本中強制使用小寫。

          本文為 HTML 基礎教程第七章,下一章:HTML屬性

          【小提示】tips:本文由數據微學院作者原創,轉載請注明來源或聯系作者。更多優秀參考好文請關注【數據微學院】個人圖書館。

          前端開發 HTML教程 數據微學院 網站開發 互聯網


          主站蜘蛛池模板: 一区二区国产精品| 亚洲欧洲一区二区| 亚洲爆乳精品无码一区二区三区 | 亚洲一区二区久久| 冲田杏梨AV一区二区三区| 好吊视频一区二区三区| 天堂Av无码Av一区二区三区| 99精品国产一区二区三区不卡 | 日韩一区二区三区四区不卡| 精品一区二区三区四区| 国产在线精品一区二区三区不卡| 国产成人精品亚洲一区 | 国产日韩精品一区二区在线观看| 日本激情一区二区三区| 日本免费一区二区久久人人澡| 中文字幕在线一区| 99久久国产精品免费一区二区| 久久久99精品一区二区| AV无码精品一区二区三区宅噜噜| 精品视频在线观看一区二区三区| 国产免费av一区二区三区| 色综合久久一区二区三区| 无码喷水一区二区浪潮AV| 无码人妻一区二区三区av| 国产一区二区草草影院| 欧洲精品一区二区三区| 国产在线无码视频一区| 国产一区二区三区在线观看影院 | 精品女同一区二区三区在线 | 一区二区三区视频在线| 久久精品一区二区三区资源网 | 国产主播一区二区三区在线观看| 精品国产亚洲一区二区三区在线观看| 无码人妻一区二区三区免费| 精品一区二区久久久久久久网精| 国产一区在线播放| 国产成人精品一区二区三区无码| 精品久久一区二区三区| 亚洲高清一区二区三区| 国产成人一区二区在线不卡| 国产精品主播一区二区|