整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          js中的整數(shù)

          js中的整數(shù)

          數(shù)的安全范圍

          數(shù)字的呈現(xiàn)方式?jīng)Q定了“整數(shù)”的安全值范圍遠(yuǎn)遠(yuǎn)小于 Number.MAX_VALUE。

          能夠被“安全”呈現(xiàn)的最大整數(shù)是 2^53 - 1,即 9007199254740991,在 ES6 中被定義為 Number.MAX_SAFE_INTEGER。最小整數(shù)是 -9007199254740991,在 ES6 中被定義為 Number. MIN_SAFE_INTEGER。

          有時(shí) JavaScript 程序需要處理一些比較大的數(shù)字,如數(shù)據(jù)庫(kù)中的 64 位 ID 等。由于 JavaScript 的數(shù)字類型無(wú)法精確呈現(xiàn) 64 位數(shù)值,所以必須將它們保存(轉(zhuǎn)換)為字符串。

          好在大數(shù)值操作并不常見(它們的比較操作可以通過(guò)字符串來(lái)實(shí)現(xiàn))。如果確實(shí)需要對(duì)大 數(shù)值進(jìn)行數(shù)學(xué)運(yùn)算,目前還是需要借助相關(guān)的工具庫(kù)。將來(lái) JavaScript 也許會(huì)加入對(duì)大數(shù) 值的支持。

          整數(shù)檢測(cè)

          要檢測(cè)一個(gè)值是否是整數(shù),可以使用 ES6 中的 Number.isInteger(..) 方法:

          要檢測(cè)一個(gè)值是否是安全的整數(shù),可以使用 ES6 中的 Number.isSafeInteger(..) 方法:

          32 位有符號(hào)整數(shù)

          雖然整數(shù)最大能夠達(dá)到 53 位,但是有些數(shù)字操作(如數(shù)位操作)只適用于 32 位數(shù)字, 所以這些操作中數(shù)字的安全范圍就要小很多,變成從 Math.pow(-2,31)(-2147483648, 約-21 億)到 Math.pow(2,31) - 1(2147483647,約 21 億)。

          a | 0 可以將變量 a 中的數(shù)值轉(zhuǎn)換為 32 位有符號(hào)整數(shù),因?yàn)閿?shù)位運(yùn)算符 | 只適用于 32 位 整數(shù)(它只關(guān)心 32 位以內(nèi)的值,其他的數(shù)位將被忽略)。因此與 0 進(jìn)行操作即可截取 a 中 的 32 位數(shù)位。

          篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于JavaScript中的number的詳細(xì)介紹,有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。

          聲明:需要讀者對(duì)二進(jìn)制有一定的了解

          對(duì)于 JavaScript 開發(fā)者來(lái)說(shuō),或多或少都遇到過(guò) js 在處理數(shù)字上的奇怪現(xiàn)象,比如:

          > 0.1 + 0.2

          0.30000000000000004

          > 0.1 + 1 - 1

          0.10000000000000009

          > 0.1 * 0.2

          0.020000000000000004

          > Math.pow(2, 53)

          9007199254740992

          > Math.pow(2, 53) + 1

          9007199254740992

          > Math.pow(2, 53) + 3

          9007199254740996

          如果想要弄明白為什么會(huì)出現(xiàn)這些奇怪現(xiàn)象,首先要弄清楚 JavaScript 是怎樣編碼數(shù)字的。

          1. JavaScript 是怎樣編碼數(shù)字的

          JavaScript 中的數(shù)字,不管是整數(shù)、小數(shù)、分?jǐn)?shù),還是正數(shù)、負(fù)數(shù),全部是浮點(diǎn)數(shù),都是用 8 個(gè)字節(jié)(64 位)來(lái)存儲(chǔ)的。

          一個(gè)數(shù)字(如 12、0.12、-999)在內(nèi)存中占用 8 個(gè)字節(jié)(64 位),存儲(chǔ)方式如下:

          1. 0 - 51:分?jǐn)?shù)部分(52 位)
          2. 52 - 62:指數(shù)部分(11 位)
          3. 63:符號(hào)位(1 位:0 表示這個(gè)數(shù)是正數(shù),1 表示這個(gè)數(shù)是負(fù)數(shù))

          符號(hào)位很好理解,用于指明是正數(shù)還是負(fù)數(shù),且只有 1 位、兩種情況(0 表示正數(shù),1 表示負(fù)數(shù))。

          其他兩部分是分?jǐn)?shù)部分和指數(shù)部分,用于計(jì)算一個(gè)數(shù)的絕對(duì)值。

          1.1 絕對(duì)值計(jì)算公式

          1: abs=1.f * 2 ^ (e - 1023) 0 < e < 2047

          2: abs=0.f * 2 ^ (e - 1022) e=0, f > 0

          3: abs=0 e=0, f=0

          4: abs=NaN e=2047, f > 0

          5: abs=∞ (infinity, 無(wú)窮大) e=2047, f=0

          說(shuō)明:

          • 這個(gè)公式是二進(jìn)制的算法公式,結(jié)果用 abs 表示,分?jǐn)?shù)部分用 f 表示,指數(shù)部分用 e 表示
          • 2 ^ (e - 1023) 表示 2 的 e - 1023 次方
          • 因?yàn)榉謹(jǐn)?shù)部分占 52 位,所以 f 的取值范圍為 00...00(中間省略 48 個(gè) 0) 到 11...11(中間省略 48 個(gè) 1)
          • 因?yàn)橹笖?shù)部分占 11 位,所以 e 的取值范圍為 0(00000000000) 到 2047(11111111111)

          從上面的公式可以看出:

          • 1 的存儲(chǔ)方式:1.00 * 2 ^ (1023 - 1023)(f=0000..., e=1023,... 表示 48 個(gè) 0)
          • 2 的存儲(chǔ)方式:1.00 * 2 ^ (1024 - 1023)(f=0000..., e=1024,... 表示 48 個(gè) 0)
          • 9 的存儲(chǔ)方式:1.01 * 2 ^ (1025 - 1023)(f=0100..., e=1025,... 表示 48 個(gè) 0)
          • 0.5 的存儲(chǔ)方式:1.00 * 2 ^ (1022 - 1023)(f=0000..., e=1022,... 表示 48 個(gè) 0)
          • 0.625 的存儲(chǔ)方式:1.01 * 2 ^ (1021 - 1023)(f=0100..., e=1021,... 表示 48 個(gè) 0)

          1.2 絕對(duì)值的取值范圍與邊界

          從上面的公式可以看出:

          1.2.1 0 < e < 2047

          當(dāng) 0 < e < 2047 時(shí),取值范圍為:f=0, e=1 到 f=11...11, e=2046(中間省略 48 個(gè) 1)

          即:Math.pow(2, -1022) 到 ~=Math.pow(2, 1024) - 1(~=表示約等于)

          這當(dāng)中,~=Math.pow(2, 1024) - 1 就是 Number.MAX_VALUE 的值,js 所能表示的最大數(shù)值。

          1.2.2 e=0, f > 0

          當(dāng) e=0, f > 0 時(shí),取值范圍為:f=00...01, e=0(中間省略 48 個(gè) 0) 到 f=11...11, e=0(中間省略 48 個(gè) 1)

          即:Math.pow(2, -1074) 到 ~=Math.pow(2, -1022)(~=表示約等于)

          這當(dāng)中,Math.pow(2, -1074) 就是 Number.MIN_VALUE 的值,js 所能表示的最小數(shù)值(絕對(duì)值)。

          1.2.3 e=0, f=0

          這只表示一個(gè)值 0,但加上符號(hào)位,所以有 +0 與 -0。

          但在運(yùn)算中:

          > +0===-0

          true

          1.2.4 e=2047, f > 0

          這只表示一種值 NaN。

          但在運(yùn)算中:

          > NaN==NaN

          false

          > NaN===NaN

          false

          1.2.5 e=2047, f=0

          這只表示一個(gè)值 ∞ (infinity, 無(wú)窮大)。

          在運(yùn)算中:

          > Infinity===Infinity

          true

          > -Infinity===-Infinity

          true

          1.3 絕對(duì)值的最大安全值

          從上面可以看出,8 個(gè)字節(jié)能存儲(chǔ)的最大數(shù)值是 Number.MAX_VALUE 的值,也就是 ~=Math.pow(2, 1024) - 1。

          但這個(gè)數(shù)值并不安全:從 1 到 Number.MAX_VALUE 中間的數(shù)字并不連續(xù),而是離散的。

          比如:Number.MAX_VALUE - 1, Number.MAX_VALUE - 2 等數(shù)值都無(wú)法用公式得出,就存儲(chǔ)不了。

          所以這里引出了最大安全值 Number.MAX_SAFE_INTEGER,也就是從 1 到 Number.MAX_SAFE_INTEGER 中間的數(shù)字都是連續(xù)的,處在這個(gè)范圍內(nèi)的數(shù)值計(jì)算都是安全的。

          當(dāng) f=11...11, e=1075(中間省略 48 個(gè) 1)時(shí),取得這個(gè)值 111...11(中間省略 48 個(gè) 1),即 Math.pow(2, 53) - 1。

          大于 Number.MAX_SAFE_INTEGER:Math.pow(2, 53) - 1 的數(shù)值都是離散的。

          比如:Math.pow(2, 53) + 1, Math.pow(2, 53) + 3 不能用公式得出,無(wú)法存儲(chǔ)在內(nèi)存中。

          所以才會(huì)有文章開頭的現(xiàn)象:

          > Math.pow(2, 53)

          9007199254740992

          > Math.pow(2, 53) + 1

          9007199254740992

          > Math.pow(2, 53) + 3

          9007199254740996

          因?yàn)?Math.pow(2, 53) + 1 不能用公式得出,就無(wú)法存儲(chǔ)在內(nèi)存中,所以只有取最靠近這個(gè)數(shù)的、能夠用公式得出的其他數(shù),Math.pow(2, 53),然后存儲(chǔ)在內(nèi)存中,這就是失真,即不安全。

          1.4 小數(shù)的存儲(chǔ)方式與計(jì)算

          小數(shù)中,除了滿足 m / (2 ^ n)(m, n 都是整數(shù))的小數(shù)可以用完整的 2 進(jìn)制表示之外,其他的都不能用完整的 2 進(jìn)制表示,只能無(wú)限的逼近一個(gè) 2 進(jìn)制小數(shù)。

          (注:[2] 表示二進(jìn)制,^ 表示 N 次方)

          0.5=1 / 2=[2]0.1

          0.875=7 / 8=1 / 2 + 1 / 4 + 1 / 8=[2]0.111

          # 0.3 的逼近

          0.25 ([2]0.01) < 0.3 < 0.5 ([2]0.10)

          0.296875 ([2]0.0100110) < 0.3 < 0.3046875 ([2]0.0100111)

          0.2998046875 ([2]0.01001100110) < 0.3 < 0.30029296875 ([2]0.01001100111)

          ... 根據(jù)公式計(jì)算,直到把分?jǐn)?shù)部分的 52 位填滿,然后取最靠近的數(shù)

          0.3 的存儲(chǔ)方式:[2]0.010011001100110011001100110011001100110011001100110011

          (f=0011001100110011001100110011001100110011001100110011, e=1021)

          從上面可以看出,小數(shù)中大部分都只是近似值,只有少部分是真實(shí)值,所以只有這少部分的值(滿足 m / (2 ^ n) 的小數(shù))可以直接比較大小,其他的都不能直接比較。

          > 0.5 + 0.125===0.625

          true

          > 0.1 + 0.2===0.3

          false

          為了安全的比較兩個(gè)小數(shù),引入 Number.EPSILON [Math.pow(2, -52)] 來(lái)比較浮點(diǎn)數(shù)。

          > Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON

          true

          1.5 小數(shù)最大保留位數(shù)

          js 從內(nèi)存中讀取一個(gè)數(shù)時(shí),最大保留 17 位有效數(shù)字。

          > 0.010011001100110011001100110011001100110011001100110011

          0.30000000000000000

          0.3

          > 0.010011001100110011001100110011001100110011001100110010

          0.29999999999999993

          > 0.010011001100110011001100110011001100110011001100110100

          0.30000000000000004

          > 0.0000010100011110101110000101000111101011100001010001111100

          0.020000000000000004

          2. Number 對(duì)象中的常量

          2.1 Number.EPSILON

          表示 1 與 Number 可表示的大于 1 的最小的浮點(diǎn)數(shù)之間的差值。

          Math.pow(2, -52)

          用于浮點(diǎn)數(shù)之間安全的比較大小。

          2.2 Number.MAX_SAFE_INTEGER

          絕對(duì)值的最大安全值。

          Math.pow(2, 53) - 1

          2.3 Number.MAX_VALUE

          js 所能表示的最大數(shù)值(8 個(gè)字節(jié)能存儲(chǔ)的最大數(shù)值)。

          ~=Math.pow(2, 1024) - 1

          2.4 Number.MIN_SAFE_INTEGER

          最小安全值(包括符號(hào))。

          -(Math.pow(2, 53) - 1)

          2.5 Number.MIN_VALUE

          js 所能表示的最小數(shù)值(絕對(duì)值)。

          Math.pow(2, -1074)

          2.6 Number.NEGATIVE_INFINITY

          負(fù)無(wú)窮大。

          -Infinity

          2.7 Number.POSITIVE_INFINITY

          正無(wú)窮大。

          +Infinity

          2.8 Number.NaN

          非數(shù)字。

          3. 尋找奇怪現(xiàn)象的原因

          3.1 為什么 0.1 + 0.2 結(jié)果是 0.30000000000000004

          與 0.3 的逼近算法類似。

          0.1 的存儲(chǔ)方式:[2]0.00011001100110011001100110011001100110011001100110011010

          (f=1001100110011001100110011001100110011001100110011010, e=1019)

          0.2 的存儲(chǔ)方式:[2]0.0011001100110011001100110011001100110011001100110011010

          (f=1001100110011001100110011001100110011001100110011010, e=1020)

          0.1 + 0.2: 0.0100110011001100110011001100110011001100110011001100111

          (f=00110011001100110011001100110011001100110011001100111, e=1021)

          但 f=00110011001100110011001100110011001100110011001100111 有 53 位,超過(guò)了正常的 52 位,無(wú)法存儲(chǔ),所以取最近的數(shù):

          0.1 + 0.2: 0.010011001100110011001100110011001100110011001100110100

          (f=0011001100110011001100110011001100110011001100110100, e=1021)

          js 讀取這個(gè)數(shù)字為 0.30000000000000004

          3.2 為什么 Math.pow(2, 53) + 1 結(jié)果是 Math.pow(2, 53)

          因?yàn)?Math.pow(2, 53) + 1 不能用公式得出,無(wú)法存儲(chǔ)在內(nèi)存中,所以只有取最靠近這個(gè)數(shù)的、能夠用公式得出的其他數(shù)。

          比這個(gè)數(shù)小的、最靠近的數(shù):

          Math.pow(2, 53)

          (f=0000000000000000000000000000000000000000000000000000, e=1076)

          比這個(gè)數(shù)大的、最靠近的數(shù):

          Math.pow(2, 53) + 2

          (f=0000000000000000000000000000000000000000000000000001, e=1076)

          取第一個(gè)數(shù):Math.pow(2, 53)。

          所以:

          > Math.pow(2, 53) + 1===Math.pow(2, 53)

          true

          以上就是JavaScript中的number的詳細(xì)介紹的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注其它相關(guān)文章!

          更多技巧請(qǐng)《轉(zhuǎn)發(fā) + 關(guān)注》哦!


          ntroduction

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

          簡(jiǎn)單說(shuō),HTML 是由瀏覽器解析執(zhí)行的,它不會(huì)將 HTML 標(biāo)簽展示出來(lái),而是會(huì)解析 HTML 標(biāo)簽,以特定效果展示出來(lái)。

          Syntax

          1. HTML 可以直接使用文本編輯器來(lái)編寫
          2. HTML 文件它的后綴名是 .htm 或 .html
          3. <html> 標(biāo)簽它代表當(dāng)前頁(yè)面是一個(gè) HTML
          4. <head> 標(biāo)簽中可以聲明 HTML 頁(yè)面的相關(guān)信息
          5. <body> 標(biāo)簽中它主要是用于顯示頁(yè)面信息
          6. 標(biāo)簽要有開始,有結(jié)束。開始標(biāo)簽與結(jié)束標(biāo)簽中的內(nèi)容是標(biāo)簽的內(nèi)容,如果沒(méi)有標(biāo)簽內(nèi)容,可以讓標(biāo)簽自關(guān)閉 <br/>。
          7. 大多數(shù)標(biāo)簽它具有屬性,屬性值要使用引號(hào)引起來(lái)。
          8. HTML 本身是不區(qū)分大小寫的。
          <html>
              <head>HEAD</head>
              <body>BODY</body>
          </html>

          Tools

          可以使用 JetBrains WebStorm 或者 VS Code 進(jìn)行開發(fā)。


          HTML Tags

          文件標(biāo)簽

          <html> 代表當(dāng)前書寫的是一個(gè) HTML 文檔

          <head> 存儲(chǔ)的本頁(yè)面的一些重要的信息,它不會(huì)顯示

          標(biāo)簽下有一個(gè)子標(biāo)簽 <title> 它是用于定義頁(yè)面的標(biāo)題的

          <body> 書寫的內(nèi)容會(huì)顯示出來(lái),屬性:1. text 用于設(shè)置文字顏色;2. bgcolor 用于設(shè)置頁(yè)面的背景色;3. background 用于設(shè)置頁(yè)面的背景圖片

          排版標(biāo)簽

          HTML 注釋

          <!-- 注釋不會(huì)在瀏覽器中顯示 -->

          <br/> 標(biāo)簽

          br 標(biāo)簽就是一個(gè)換行功能標(biāo)簽

          <p> 標(biāo)簽

          在 p 標(biāo)簽中的內(nèi)容會(huì)在開始與結(jié)束之間產(chǎn)生一個(gè)空白行并且它會(huì)自動(dòng)換行

          常用屬性 align 的作用是設(shè)置段落中的內(nèi)容對(duì)齊方式,可取值有 left right center

          <hr> 標(biāo)簽

          hr 標(biāo)簽會(huì)在頁(yè)面上產(chǎn)生一個(gè)水平線

          常用屬性:

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

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

          width:代表水平線寬度

          color:水平線的顏色

          關(guān)于 HTML 中標(biāo)簽屬性

          兩種方式:

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

          <div> 標(biāo)簽

          Div 是一個(gè)塊標(biāo)簽

          Div 與 CSS 結(jié)合,會(huì)更好對(duì)頁(yè)面進(jìn)行排版

          <span> 標(biāo)簽

          Span 標(biāo)簽也是一個(gè)塊標(biāo)簽Div 與 span 區(qū)別:Div 會(huì)自動(dòng)換行,我們也叫這樣的標(biāo)簽為行級(jí)元素Span 標(biāo)簽它不會(huì)自動(dòng)換行,我們也叫它為行內(nèi)元素

          字體標(biāo)簽

          <font> 標(biāo)簽

          Font 標(biāo)簽可以設(shè)置字體,字的大小及顏色

          常用屬性:

          Face:用于設(shè)置字體,例如 宋體 隸書 楷體

          Size:用于設(shè)置字的大小

          Color:用于設(shè)置字的顏色

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

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


          標(biāo)題標(biāo)記

          <h1> 最大 <h6> 最小,它們代表的是標(biāo)題,可以使用 <b> <i> 對(duì)文字設(shè)置加粗或傾斜

          注意:在 HTML 中允許標(biāo)簽進(jìn)行嵌套的,但是一般都包裹嵌套,而不可以進(jìn)行交叉嵌套

          清單標(biāo)記(列表標(biāo)記)

          有序清單:

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

          圖形標(biāo)簽

          <img> 可以讓我們?cè)诰W(wǎng)頁(yè)引入一張圖片

          常用屬性

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

          超連接標(biāo)簽

          <a> 標(biāo)簽可以實(shí)現(xiàn)跳轉(zhuǎn)到其它頁(yè)面操作。超鏈接內(nèi)容不僅可以是文本,也可以是圖片等信息

          常用屬性

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

          表格標(biāo)簽

          <!-- 學(xué)習(xí)表格標(biāo)簽 -->
          <table border="2" align="center" width="400px">
              <caption>學(xué)生成績(jī)單</caption>
              <tr>
                  <th>姓名</th>
                  <th>語(yǔ)文成績(jī)</th>
                  <th>數(shù)學(xué)成績(jī)</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>

          表單標(biāo)簽

          通過(guò)表單可以將要提交的數(shù)據(jù)提交到指定的位置

          <!-- 表單:用戶注冊(cè)案例 -->
          <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">--請(qǐng)選擇省--</option>
                              <option value="10001">廣東</option>
                              <option value="10002">上海</option>
                              <option value="10003">山東</option>
                          </select> 省
                          <select name="city">
                              <option>--請(qǐng)選擇市--</option>
                              <option value="1000301">廣州市</option>
                              <option>深圳市</option>
                              <option>東莞市</option>
                          </select> 市
                      </td>
                  </tr>
                  <tr>
                      <td>編程語(yǔ)言:</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="注冊(cè)"> 
                          <input type="reset" value="取消"> 
                      </td>
                  </tr>
              </table>
          </form>

          框架標(biāo)簽

          通過(guò)框架標(biāo)簽可以定制 HTML 頁(yè)面布局

          在 HTML 頁(yè)面上去描述框架信息時(shí),不可以將 <frameset> 寫在 <body> 標(biāo)簽中

          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 框架標(biāo)簽</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>內(nèi)容顯示區(qū)</div>
              </body>
          </html>

          其它標(biāo)簽與特殊字符

          <meta> 標(biāo)簽

          <meta> 標(biāo)簽必須寫在 <head> 標(biāo)簽之間

          1. 它可以對(duì)頁(yè)面進(jìn)行描述及熱詞設(shè)置,可以方便搜索引擎查找頁(yè)面
          2. 通過(guò) meta 標(biāo)簽設(shè)置 http 響應(yīng)信息
          3. 通過(guò) meta 標(biāo)簽可以設(shè)置頁(yè)面的編碼,<meta http-equiv="Content-Type" content="text/html; charset=gbk">
          4. 通過(guò) meta 標(biāo)簽來(lái)設(shè)置頁(yè)面加載后在指定的時(shí)間后跳轉(zhuǎn)到指定的頁(yè)面,<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

          <link>標(biāo)簽

          使用 link 標(biāo)簽來(lái)導(dǎo)入 CSS

          特殊字符

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


          ?HTML DOM

          Introduction

          DOM, Document Object Model -- 文檔對(duì)象模型,是 HTML 和 XML 文檔的編程接口,以樹結(jié)構(gòu)表達(dá) HTML 文檔。

          DOM 是 W3C(萬(wàn)維網(wǎng)聯(lián)盟)的標(biāo)準(zhǔn)。

          DOM 定義了訪問(wèn) HTML 和 XML 文檔的標(biāo)準(zhǔn)。

          W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分:

          • 核心 DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
          • XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
          • HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型

          DOM Node

          DOM 是被視為節(jié)點(diǎn)樹的 HTML。

          根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn),HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn):

          • 整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
          • 每個(gè) HTML 元素是元素節(jié)點(diǎn)
          • HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
          • 每個(gè) HTML 屬性是屬性節(jié)點(diǎn)
          • 注釋是注釋節(jié)點(diǎn)

          HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu),這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹。

          節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。常用父(parent)、子(child)和同胞(sibling)等術(shù)語(yǔ)來(lái)描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱為同胞(兄弟或姐妹)。

          • 在節(jié)點(diǎn)樹中,頂端節(jié)點(diǎn)被稱為根(root)。
          • 每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)、除了根(它沒(méi)有父節(jié)點(diǎn))。
          • 一個(gè)節(jié)點(diǎn)可擁有任意數(shù)量的子節(jié)點(diǎn)。
          • 同胞是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)。

          DOM 方法 & 屬性

          HTML DOM 方法是可以在節(jié)點(diǎn)(HTML 元素)上執(zhí)行的動(dòng)作。

          HTML DOM 屬性是可以在節(jié)點(diǎn)(HTML 元素)設(shè)置和修改的值。

          可通過(guò) JavaScript (以及其他編程語(yǔ)言)對(duì) HTML DOM 進(jìn)行訪問(wèn)。所有 HTML 元素被定義為對(duì)象,而編程接口則是對(duì)象方法和對(duì)象屬性。方法是能夠執(zhí)行的動(dòng)作(比如添加或修改元素)。屬性是能夠獲取或設(shè)置的值(比如節(jié)點(diǎn)的名稱或內(nèi)容)。

          <!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 元素的內(nèi)容
                      element.innerHTML="此時(shí)已是修改后的內(nèi)容"
          
                      // 修改 p2 標(biāo)簽的樣式
                      var ele=document.getElementById("p2")
                      ele.style.color="blue"
                      ele.style.fontFamily="宋體"
                      ele.style.fontSize="larger"
          
                      // 添加元素
                      // 創(chuàng)建一個(gè)p元素
                      var elementP=document.createElement("p")
                      // 創(chuàng)建一個(gè)內(nèi)容
                      var nodeText=document.createTextNode("新加的 P 元素")
                      // 把文字內(nèi)容添加到p元素中
                      elementP.appendChild(nodeText)
                      // 把新創(chuàng)建的p元素添加div1元素中
                      var div1=document.getElementById("div1")
                      div1.appendChild(elementP)
          
                      // 插入添加新的元素
                      // 創(chuàng)建一個(gè)新的元素
                      var eleP=document.createElement("p")
                      // 創(chuàng)建一個(gè)內(nèi)容
                      var noText=document.createTextNode("在 P1 元素前添加的新元素")
                      // 把文字內(nèi)容添加到 p 元素中
                      eleP.appendChild(noText)
                      // 把新創(chuàng)建的 p 元素添加 div 1 元素中
                      var parentDiv1=document.getElementById("div1")
                      // 獲取指定被添加的元素
                      var p1=document.getElementById("p1")
                      // 在元素前添加;參數(shù)說(shuō)明:1.要添加的元素;2.在那個(gè)元素之前添加(指定一個(gè)元素)
                      parentDiv1.insertBefore(eleP, p1)
          
                      // 刪除元素
                      // 獲取父元素
                      var pdiv1=document.getElementById("div1")
                      var removep1=document.getElementById("p1")
                      // 使用父元素刪除該元素
                      pdiv1.removeChild(removep1)
                  </script>
              </body>
          </html>

          DOM 事件

          HTML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)。當(dāng)事件發(fā)生時(shí),可以執(zhí)行 JavaScript,比如發(fā)生用戶點(diǎn)擊一個(gè) HTML 元素的事件。

          如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼,可以把 JavaScript 代碼添加到 HTML 事件屬性中:onclick=JavaScript

          HTML 事件的例子:

          • 當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
          • 當(dāng)網(wǎng)頁(yè)已加載時(shí)
          • 當(dāng)圖片已加載時(shí)
          • 當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
          • 當(dāng)輸入字段被改變時(shí)
          • 當(dāng) HTML 表單被提交時(shí)
          • 當(dāng)用戶觸發(fā)按鍵時(shí)
          <!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("已載入...");
                      }
                      // 文本框失去焦點(diǎn)事件
                      function onBlurFun(){
                          alert("此方法是文本框失去焦點(diǎn)事件,用來(lái)校驗(yàn)此文本框輸入數(shù)據(jù)的")
                      }
                      // 表單被提交時(shí)執(zhí)行事件
                      function onSubmitFun(){
                          alert("此表單已提交,這個(gè)方法也可以來(lái)作為數(shù)據(jù)校驗(yàn)的");
                      }
                      // 元素被改變時(shí)觸發(fā)事件
                      function onChangeFun(){
                          alert("文本框元素已輸入新的數(shù)據(jù)")
                      }
                      // 當(dāng)鼠標(biāo)懸停在某一個(gè)元素上時(shí)執(zhí)行的方法
                      function onMouseOverFun(element){
                          element.innerHTML="鼠標(biāo)已停在H1元素上了"
                      }
                      // 當(dāng)鼠標(biāo)離開某一個(gè)元素時(shí)執(zhí)行事件
                      function onMouseOutFun(element){
                          element.innerHTML="鼠標(biāo)已離開H1元素上了..."
                      }
                  </script>
              </head>
              <!-- 需求:當(dāng)頁(yè)面被載入時(shí),執(zhí)行一個(gè)代碼,彈框提示已載入 -->
              <body onload="onLoadFun()">
                  <!-- 需求:在一個(gè)表單中有用戶名錄入的文本框,當(dāng)輸入完文本框的時(shí)候進(jìn)行名稱校驗(yàn),提交的時(shí)候彈框顯示 -->
                  <form onsubmit="onSubmitFun()">
                      用戶名:<input id="username" name="username" onchange="onChangeFun()" >
                      <br/>
                      <button type="submit">提交</button>
                  </form>
                  <!-- 需求:有一個(gè) H1 標(biāo)簽元素,當(dāng)鼠標(biāo)移動(dòng)到 H1 元素上時(shí),修改文字,當(dāng)鼠標(biāo)移出元素時(shí)執(zhí)行事件 -->
                  <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個(gè)標(biāo)題</h1>
              </body>
          </html>


          想了解更多,歡迎關(guān)注我的微信公眾號(hào):Renda_Zhang


          主站蜘蛛池模板: 果冻传媒一区二区天美传媒| 国模一区二区三区| 免费日本一区二区| 日韩精品无码一区二区三区AV| 香蕉免费看一区二区三区| 人妻无码一区二区视频| 一区二区三区午夜| 久久久无码精品国产一区| 亚洲天堂一区在线| 国产产一区二区三区久久毛片国语 | 一区二区三区四区在线观看视频| 一区二区三区在线免费观看视频| 亚洲一区二区三区在线观看精品中文 | 亚洲av无码一区二区三区天堂 | 亚洲电影唐人社一区二区| 国产一区二区四区在线观看 | 中文字幕一区二区三区乱码| 波多野结衣中文一区二区免费| 亚洲av色香蕉一区二区三区蜜桃| 中文字幕一区日韩精品| 无码国产精品一区二区免费虚拟VR| 性无码一区二区三区在线观看| 国产一区视频在线| 亚洲一区综合在线播放| 日韩人妻无码一区二区三区99| 无码囯产精品一区二区免费| 台湾无码一区二区| 日韩最新视频一区二区三| 在线日产精品一区| 欧洲精品码一区二区三区| 国产aⅴ一区二区三区| 视频在线一区二区三区| 亚洲成人一区二区| 久久国产午夜一区二区福利| 久久伊人精品一区二区三区| 亚洲av无码一区二区三区四区 | 麻豆亚洲av熟女国产一区二| 精品少妇人妻AV一区二区三区| 天堂一区人妻无码| 国产天堂一区二区综合| 日本高清不卡一区|