整合營銷服務商

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

          免費咨詢熱線:

          web前臺小測試題

          、選擇題(1-18題各3分19-36題各2分,共92分)

          1.在HTML的<TD>標簽中,align 屬性的取值是( C )

          A. top ; B. middle ; C. center ; D. bottom

          <table border="1">

          <tr>

          <td width="100px">姓名</td>

          <td>性別</td>

          <td>年齡</td>

          </tr>

          <tr>

          <td>張三</td>

          <td>男</td>

          <td>20齡</td>

          </tr>

          </table>

          2. CSS樣式表根據所在網頁的位置,可分為( B )

          A.行內樣式表、內嵌樣式表、混合樣式表; B.行內樣式表、內嵌樣式表、外部樣式表;

          C.外部樣式表、內嵌樣式表、導入樣式表; D.外部樣式表、混合樣式表、導入樣式表

          行內樣式:

          <html>

          <body>

          <div style="width:100px;height:100px;background:red;"></div>>

          </body>

          </html>

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

          內嵌樣式:

          <html>

          <head>

          <style type="text/css">

          #div{width:100px;height:100px;background:red;}

          </style>

          </head>

          <body>

          <div id="div"></div>

          </body>

          </html>

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

          外部樣式:

          <html>

          <head>

          <link rel="stylesheet" type="text/css" href="ccss.css">

          </head>

          <body>

          <div id="div"></div>>

          </body>

          </html>

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

          css文件

          #div{width:100px;height:100px;background:red;}

          #和.區(qū)別

          .點是使用class引用的,多個控件可以同時使用一個class,一個控件上也可以使用多個class,比如

          .tdRed{border:solid 1px red;}

          .tdBKBlue{background-color:blue;}

          <td class="tdRed" />

          <td class="tdRed tdBKBule"/>

          而ID是在一個頁面中唯一的

          總得來說class表示泛性的,id表示個性的

          比如你所有的按鈕都是一個顏色的

          .normalButton{background-color:blue;border:solid 0px black;}

          對于提交按鈕會要做的大一點

          #submit{width:100px;height:100px;}

          那么你的按鈕就是

          <input type="button" id="submit" class="normalButton" value="提交" />

          普通的按鈕就是

          <input type="button" id="abcdefg" class="normalButton" value="普通按鈕" />

          3. 在插入圖片標簽中,對插入的圖片進行文字說明使用的屬性是( D )

          A.name; B.id; C.src; D. alt

          4. 對于<FORM action=″URL″ method=*>標簽,其中*代表GET或( C )

          A.SET; B. PUT; C. POST ; D. INPUT

          Get和post區(qū)別

          安全性:POST比GET安全;

          編碼方式:POST方式提交時可以通過HTML文檔中的<META>元素設置實體部分的編碼方式,而GET方式提交時URI默認的編碼方式為ISO-8859-1,不可以在頁面中設置;

          傳輸文件大小:POST方式提交文件放在實體部分傳輸,大小無上限,而GET方式提交文件內容放在URI部分傳輸,最大為2KB;

          請求速度:GET比POST快。

          數據傳輸方式:GET:查詢字符串(名稱/值對)是在 GET 請求的 URL 中發(fā)送的,如:/test/demo_form.asp?name1=value1&name2=value2;POST:查詢字符串(名稱/值對)是在 POST 請求的 HTTP 消息主體中發(fā)送的。

          5. 下列標簽可以不成對出現的是( B )

          A.〈HTML〉〈/HTML〉 ; B.〈P〉 〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉

          <p>是段落標簽。

          在HTML4.01中某些標簽(<p><br>,<hr>,<img>, <input>,<link>等)允許不成對出現,但是不推薦。在現在的瀏覽器里,都會“兼容”這些單標簽。瀏覽器解釋<p>標簽后,碰到一個不對應的標簽時,會自動填補</p>。所以<p>標簽可以單標簽使用,但不推薦。

          在HTML5中規(guī)定了元素必須始終關閉,也就是標簽必須成對出現。

          6. 對于標簽〈input type=*〉,如果希望實現密碼框效果,*值是( C

          A. hidden; B.text ; C. password ; D. submit

          7. HTML代碼<select name=“name”></select>表示?( D

          A. 創(chuàng)建表格 ; <table>

          B. 創(chuàng)建一個滾動菜單; <marquee>

          C. 設置每個表單項的內容;

          D.創(chuàng)建一個下拉菜單

          8. BODY元素用于背景顏色的屬性是( C )

          A. alink ; B. vlink ; C. bgcolor; D. background

          9. 在表單中包含性別選項,且默認狀態(tài)為“男”被選中,下列正確的是( A )

          A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>

          C.<input type=checkbox name=sex checked>男;

          D.nput type=checkbox name=sex enabled>男

          性別(單選框):<input type="radio" value="1" name="sex" checked="checked"/>男

          <input type="radio" value="2" name="sex"/>女

          角色(下拉框):<select name="role">

          <option value="1" selected="selected">教師</option>

          <option value="2">學生</option>

          </select>

          10. 在CSS中下面哪種方法表示超鏈接文字在鼠標經過時,超鏈接文字無下劃線?( B )

          A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};

          C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }

          11. JavaScript代碼: 'abcdefg'.indexOf('D') 結果是( B )

          A:0 B:-1 C:3 D:4

          Js常用方法

          1.substr

          substr(start,length)表示從start位置開始,截取length長度的字符串。

          var src="images/off_1.png";

          alert(src.substr(7,3));

          彈出值為:off

          2.substring

          substring(start,end)表示從start到end之間的字符串,包括start位置的字符但是不包括end位置的字符。

          var src="images/off_1.png";

          alert(src.substring(7,10));

          彈出值為:off

          3.indexOF

          indexOf() 方法返回某個指定的字符串值在字符串中首次出現的位置(從左向右)。沒有匹配的則返回-1,否則返回首次出現位置的字符串的下標值。

          var src="images/off_1.png";

          alert(src.indexOf('t'));

          alert(src.indexOf('i'));

          alert(src.indexOf('g'));

          彈出值依次為:-1,0,3

          4.lastIndexOf

          lastIndexOf()方法返回從右向左出現某個字符或字符串的首個字符索引值(與indexOf相反)

          var src="images/off_1.png";

          alert(src.lastIndexOf('/'));

          alert(src.lastIndexOf('g'));

          彈出值依次為:6,15

          5.split

          將一個字符串分割為子字符串,然后將結果作為字符串數組返回。

          以空格分割返回一個子字符串返回

          var s, ss;

          var s = "1,2,3,4";

          ss = s.split(",");

          alert(ss[0]);

          alert(ss[1]);

          12. <img src="name">的意思是?( A )

          A. 圖像相對于周圍的文本左對齊; B. 圖像相對于周圍的文本右對齊;

          C. 圖像相對于周圍的文本底部對齊; D. 圖像相對于周圍的文本頂部對齊

          13. 點擊按鈕,在ID為“Link”的DIV標簽內顯示東軟實訓超鏈接, 下面對該按鈕的onClick事件函數描述正確的是:C

          A. Link.innerText='<a ;

          B. Link.outerText='<a ;

          C. Link.innerHTML='<a ;

          D. Link.outerHTML='<a

          innerHTML 設置或獲取位于對象起始和結束標簽內的

          HTML

          outerHTML 設置或獲取對象及其內容的 HTML 形式

          innerText 設置或獲取位于對象起始和結束標簽內的文本

          outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本

          innerText和outerText在獲取時是相同效果,但在設置時,innerText僅設置標簽內的文本,而outerText設置包括標簽在內的文本

          14.(“24.7” + 2.3 ) 的計算結果是( C

          A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7

          15. ( B )事件處理程序可用于在用戶單擊按鈕時執(zhí)行函數

          A. onSubmit; B. onClick; C. onChange; D. onExit

          屬性當以下情況發(fā)生時,出現此事件onabort圖像加載被中斷onblur元素失去焦點onchange用戶改變域的內容onclick鼠標點擊某個對象ondblclick鼠標雙擊某個對象onerror當加載文檔或圖像時發(fā)生某個錯誤onfocus元素獲得焦點onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標按鍵被按下onmousemove鼠標被移動onmouseout鼠標從某元素移開onmouseover鼠標被移到某元素之上onmouseup某個鼠標按鍵被松開onreset重置按鈕被點擊onresize窗口或框架被調整尺寸onselect文本被選定onsubmit提交按鈕被點擊onunload用戶退出頁面

          16. 用戶更改表單元素 Select 中的值時,就會調用( D )事件處理程序

          A. onClick; B. onFocus; C. onMouseOver; D. onChange

          17.onMouseUp 事件處理程序表示( A

          A. 鼠標被釋放; B. 鼠標按下; C. 鼠標離開某個區(qū)域; D. 鼠標單擊

          18. 下列哪一項表示的不是按鈕( C

          A. type="submit"; B. type="reset"; C. type="image"; D. type="button"

          <img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" />

          19.下面哪一項是換行符標簽?( C

          A. <body>; B. <font>; C. <br>; D. <p>

          font規(guī)定文本字體、大小和顏色:

          <font size="3" color="red">This is some text!</font>

          <font size="2" color="blue">This is some text!</font>

          <font face="verdana" color="green">This is some text!</font>

          20. 下列哪一項是在新窗口中打開網頁文檔。( B

          A. _self; B. _blank; C. _top; D. _parent

          _blank在新窗口中打開被鏈接文檔;

          _self是指在本身這個網頁窗口來打開新的網頁鏈接;

          _top表示在頂層窗口打開網頁鏈接,即在整個窗口中打開被鏈接文檔;

          _parent表示在父窗口打開網頁鏈接;

          <a target="_blank">Visit W3School!</a>onclick="javascript:window.open('Default.aspx','_blank');"

          21. 下面說法錯誤的是( D )

          A. CSS樣式表可以將格式和結構分離;

          B. CSS樣式表可以控制頁面的布局;

          C. CSS樣式表可以使許多網頁同時更新;

          D. CSS樣式表不能制作體積更小下載更快的網頁

          CSS樣式表能為我們實現些什么樣的功能?

          1、你可以將格式和結構分離。

          2、你可以以前所未有的能力控制頁面布局。

          3、你可以制作體積更小下載更快的網頁。

          4、你可以將許多網頁同時更新,比以前更快更容易。

          5、瀏覽器將成為你更友好的界面

          將格式和結構分離

          HTML從來沒打算控制網頁的格式或外觀。這種語言定義了網頁的結構和各要素的功能,而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。 但是網頁設計者要求的更多。所以當 Netscape推出新的可以控制網頁外觀的HTML標簽時,網頁設計者無不歡呼雀躍。 我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格,用隱式GIF空格 產生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪,要想將什么內容迅速加到網頁中變得越來越難。 串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠對頁面的布局施加更多的控制。HTML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。

          以前所未有的能力控制頁面的布局

          <FONT SIZE>能使我們調整字號,表格標簽幫助我們生成邊距,這都沒錯。但是,我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度,不可能控制行間距或字間距,我們不能在屏幕上精確定位圖象的位置。但是現在,樣式表使這一切都成為可能。

          可以制作出體積更小下載更快的網頁還有更好的消息:

          樣式表只是簡單的文本,就象HTML那樣。它不需要圖象,不需要執(zhí)行程序,不需要插件,不需要流式。它就象HTML指令那樣快。有了CSS之后,以前必須求助于GIF的事情現在通過CSS就可以實現。還有,正如我先前提到的,使用串接樣式表可以減 少表格標簽及其它加大HTML體積的代碼, 減少圖象用量從而減少文件尺寸。

          可以更快更容易地維護及更新大量的網頁

          沒有樣式表時,如果我想更新整個站點中所有主體文本的字體,我必須一頁一頁地修改每張網頁。即便站點用數據庫提供服務,我仍然需要更新所有的模板, 而且更新每一模板中每一個實例實例的 <FONT FACE>。樣式表的主旨就是將格式和結構分離。 利于樣式表,我可以將站點上所有的網 頁都指向單一的一個CSS文件,我只要 修改CSS文件中某一行,那么整個站點 都會隨之發(fā)生變動。

          瀏覽器將成為你更友好的界面

          不象其它的的網絡技術,樣式表的代碼 有很好的兼容性,也就是說,如果用戶 丟失了某個插件時不會發(fā)生中斷,或者 使用老版本的瀏覽器時代碼不會出現雜 亂無章的情況。 只要是可以識別串接樣式表的瀏覽器就 可以應用它。

          22. 要使表格的邊框不顯示,應設置border的值是( B )

          A. 1; B. 0; C. 2; D. 3

          23. 如果要在表單里創(chuàng)建一個普通文本框,以下寫法中正確的是( A )

          A. <INPUT>; B. <INPUT type="password">;

          C. <INPUT type="checkbox">; D. <INPUT type="radio">

          24. 以下有關按鈕的說法中,錯誤的是( B )

          A. 可以用圖像作為提交按鈕; B. 可以用圖像作為重置按鈕;

          C. 可以控制提交按鈕上的顯示文字; D. 可以控制重置按鈕上的顯示文字。

          <input type="image" src="pic.jpg" onclick="fangfa();"/>

          function fangfa(){

          document.formname.submit();

          document.formname.reset();

          }

          習目標:了解JavaScript是如何與HTML結合來創(chuàng)建動態(tài)網頁,網頁中嵌入JavaScript的不同方式,JavaScript的內容類型及其與<script>的關系

          <script>元素

          <script>是由Netscape創(chuàng)造出來,后來加到HTML規(guī)范中的。

          <script>有8個屬性:

          1、async:表示立即開始下載腳本,但不能阻止其他頁面動作,比如下載資源或者等待其他腳本加載。只對外部腳本文件有效。

          2、charset:使用src屬性指定代碼字符集。這個屬性很少用,因為大多數瀏覽器不在乎它的值。

          3、crossorigin;配置資源請求的CORS(跨源資源共享)設置。默認情況下不使用CORS。crossorigin = “anonymous”配置文件請求不用設置憑據標志。crossorigin = ”use-credentials“設置憑據標志,意味著出站請求會包含憑據。

          4、defer:表示腳本可以延遲到文檔全部解析和顯示后再執(zhí)行。新版本中只能用于外部腳本。

          5、integrity:允許比對接收到的資源和指定的加密簽名以驗證子資源完整性(SRI,Subresource integrity),如果驗證簽名不匹配則腳本不會執(zhí)行。這個屬性可以用于確保內容分發(fā)網絡(CDN,Content Delivery Network)不會提供惡意內容。

          6、language:此屬性已被廢止。

          7、src:表示包含外部要執(zhí)行的代碼的外部文件。

          8、type:代替language,表示代碼塊中腳本語言的內容類型(也稱為MIME類型),按照慣例這個值始終都是”text/JavaScript“,盡管”text/JavaScript“和”text/ecmascript“都已經廢棄。JavaScript文件的MIME類型通常是”application/x-javascript“,不過給type屬性這個值的話可能會導致腳本被忽略。在非IE的瀏覽器中有效的值還有”application/JavaScript“和”application/ecmascript"。如果這個值是module,則代碼會被當成是ES6模塊,而且只有這時候代碼中才能出現import和export關鍵字。

          使用<script>的方式有內聯和外嵌兩種,只要把code寫入<script>code</script>中就好,code中要是包含字符串“<script>”,只要加上轉義字符“\”即可。

          如果要外嵌JavaScript代碼只要使用src屬性來鏈接外部文件即可如:

          <script src=“example.js”></script>

          XHTML 文檔中,可以忽略結束標簽寫成<script src=“example.js”/>即可,但是這在HTML中不能使用。

          標簽位置

          過去把JavaScript和CSS一起寫在head中,但是這意味著必須下載所有code并解析和解釋完成后才開始渲染頁面,對于JavaScript很多的頁面會導致頁面渲染速度過慢,為解決這個問題,JavaScript一般寫在body元素的頁面內容的最后邊,如下

          <html>

          <head></head>

          <body>

          message

          <script>code<\script>

          <\body>

          </html>

          推遲使用腳本

          在外聯JavaScript時可以使用defer屬性來推遲腳本的運行。可以寫成:

          <html>

          <head>

          <script defer src = "example.js">code<\script>

          </head>

          <body>

          message

          <\body>

          </html>

          異步執(zhí)行腳本

          async屬性從腳本處理方式上與defer類似,但是不同的是標記async的腳本并不能保證腳本按照他們的出現順序執(zhí)行,比如:

          <html>

          <head>

          <script sync src = "example1.js">code<\script>

          <script sync src = "example2.js">code<\script>

          </head>

          <body>

          message

          <\body>

          </html>

          不能保證example1比example2先執(zhí)行。

          動態(tài)加載腳本

          除了<script>以外還可以用其他方式加載腳本。因為JavaScript可以使用DOM API,所以通過向DOM中動態(tài)地加入script元素同樣可以加載指定腳本。只要創(chuàng)建一個script元素并將其添加到DOM即可。

          let script = document.createElement('script');

          script.src = 'gibberish.js';

          document.head.appendChild(script);

          當然,在把 HTMLElement 元素添加到 DOM 且執(zhí)行到這段代碼之前不會發(fā)送請求。默認情況下,以這種方式創(chuàng)建的<script>元素是以異步方式加載的,相當于添加了 async 屬性。不過這樣做可能會有問題,因為所有瀏覽器都支持 createElement()方法,但不是所有瀏覽器都支持 async 屬性。因此,如果要統一動態(tài)腳本的加載行為,可以明確將其設置為同步加載:

          let script = document.createElement('script');

          script.src = 'gibberish.js';

          script.async = false;

          document.head.appendChild(script);

          以這種方式獲取的資源對瀏覽器預加載器是不可見的。這會嚴重影響它們在資源獲取隊列中的優(yōu)先級。根據應用程序的工作方式以及怎么使用,這種方式可能會嚴重影響性能。要想讓預加載器知道這些動態(tài)請求文件的存在,可以在文檔頭部顯式聲明它們:

          <link rel="preload" href="gibberish.js">

          XHTML中的變化

          可擴展超文本標記語言(XHTML,Extensible HyperText Markup Language)是將 HTML 作為 XML的應用重新包裝的結果。與 HTML 不同,在 XHTML 中使用 JavaScript 必須指定 type 屬性且值為text/javascript,HTML 中則可以沒有這個屬性。XHTML 雖然已經退出歷史舞臺,但實踐中偶爾可能也會遇到遺留代碼,為此本節(jié)稍作介紹。在 XHTML 中編寫代碼的規(guī)則比 HTML 中嚴格,這會影響使用<script>元素嵌入 JavaScript 代碼。下面的代碼塊雖然在 HTML 中有效,但在 XHML 中是無效的。

          <script type="text/javascript">

          function compare(a, b) {

          if (a < b) {

          console.log("A is less than B");

          } else if (a > b) {

          console.log("A is greater than B");

          } else {

          console.log("A is equal to B");

          }

          }

          </script>

          在 HTML 中,解析<script>元素會應用特殊規(guī)則。XHTML 中則沒有這些規(guī)則。這意味著 a < b語句中的小于號(<)會被解釋成一個標簽的開始,并且由于作為標簽開始的小于號后面不能有空格,這會導致語法錯誤。避免 XHTML 中這種語法錯誤的方法有兩種。第一種是把所有小于號(<)都替換成對應的 HTML實體形式(<)。結果代碼就是這樣的:

          <script type="text/javascript">

          function compare(a, b) {

          if (a < b) {

          console.log("A is less than B");

          } else if (a > b) {

          console.log("A is greater than B");

          } else {

          console.log("A is equal to B");

          }

          }

          </script>

          這樣代碼就可以在 XHTML 頁面中運行了。不過,缺點是會影響閱讀。好在還有另一種方法。第二種方法是把所有代碼都包含到一個 CDATA 塊中。在 XHTML(及 XML)中,CDATA 塊表示文檔中可以包含任意文本的區(qū)塊,其內容不作為標簽來解析,因此可以在其中包含任意字符,包括小于號,并且不會引發(fā)語法錯誤。使用 CDATA 的格式如下:

          <script type="text/javascript"><![CDATA[

          function compare(a, b) {

          if (a < b) {

          console.log("A is less than B");

          } else if (a > b) {

          console.log("A is greater than B");

          } else {

          console.log("A is equal to B");

          }

          }

          ]]></script>

          在兼容 XHTML 的瀏覽器中,這樣能解決問題。但在不支持 CDATA 塊的非 XHTML 兼容瀏覽器中則不行。為此,CDATA 標記必須使用 JavaScript 注釋來抵消:

          <script type="text/javascript">

          //<![CDATA[

          function compare(a, b) {

          if (a < b) {

          console.log("A is less than B");

          } else if (a > b) {

          console.log("A is greater than B");

          } else {

          console.log("A is equal to B");

          }

          }

          //]]>

          </script>

          這種格式適用于所有現代瀏覽器。雖然有點黑科技的味道,但它可以通過 XHTML 驗證,而且對XHTML 之前的瀏覽器也能優(yōu)雅地降級。

          廢棄的語法

          自 1995 年 Netscape 2 發(fā)布以來,所有瀏覽器都將 JavaScript 作為默認的編程語言。type 屬性使用一個 MIME 類型字符串來標識<script>的內容,但 MIME 類型并沒有跨瀏覽器標準化。即使瀏覽器默認使用 JavaScript,在某些情況下某個無效或無法識別的 MIME 類型也可能導致瀏覽器跳過(不執(zhí)行)相關代碼。因此,除非你使用 XHTML 或<script>標簽要求或包含非 JavaScript 代碼,最佳做法是不指定 type 屬性。在最初采用 script 元素時,它標志著開始走向與傳統 HTML 解析不同的流程。對這個元素需要應用特殊的解析規(guī)則,而這在不支持 JavaScript 的瀏覽器(特別是 Mosaic)中會導致問題。不支持的瀏覽器會把<script>元素的內容輸出到頁面上,從而破壞頁面的外觀。Netscape 聯合 Mosaic 拿出了一個解決方案,對不支持 JavaScript 的瀏覽器隱藏嵌入的 JavaScript 代碼。最終方案是把腳本代碼包含在一個 HTML 注釋中,像這樣:

          <script><!--

          function sayHi(){

          console.log("Hi!");

          }

          //--></script>

          使用這種格式,Mosaic 等瀏覽器就可以忽略<script>標簽中的內容,而支持 JavaScript 的瀏覽器則必須識別這種模式,將其中的內容作為 JavaScript 來解析。雖然這種格式仍然可以被所有瀏覽器識別和解析,但已經不再必要,而且不應該再使用了。在XHTML 模式下,這種格式也會導致腳本被忽略,因為代碼處于有效的 XML 注釋當中。

          行內代碼與外部文件

          雖然可以直接在 HTML 文件中嵌入 JavaScript 代碼,但通常認為最佳實踐是盡可能將 JavaScript 代碼放在外部文件中。不過這個最佳實踐并不是明確的強制性規(guī)則。推薦使用外部文件的理由如下。

          ? 可維護性。JavaScript 代碼如果分散到很多 HTML 頁面,會導致維護困難。而用一個目錄保存所有 JavaScript 文件,則更容易維護,這樣開發(fā)者就可以獨立于使用它們的 HTML 頁面來編輯代碼。

          ? 緩存。瀏覽器會根據特定的設置緩存所有外部鏈接的 JavaScript 文件,這意味著如果兩個頁面都用到同一個文件,則該文件只需下載一次。這最終意味著頁面加載更快。

          ? 適應未來。通過把 JavaScript 放到外部文件中,就不必考慮用 XHTML 或前面提到的注釋黑科技。包含外部 JavaScript 文件的語法在 HTML 和 XHTML 中是一樣的。在配置瀏覽器請求外部文件時,要重點考慮的一點是它們會占用多少帶寬。在 SPDY/HTTP2 中,預請求的消耗已顯著降低,以輕量、獨立 JavaScript 組件形式向客戶端送達腳本更具優(yōu)勢。比如,第一個頁面包含如下腳本:

          <script src="mainA.js"></script>

          <script src="component1.js"></script>

          <script src="component2.js"></script>

          <script src="component3.js"></script>

          ...

          后續(xù)頁面可能包含如下腳本:

          <script src="mainB.js"></script>

          <script src="component3.js"></script>

          <script src="component4.js"></script>

          <script src="component5.js"></script>

          ...

          在初次請求時,如果瀏覽器支持 SPDY/HTTP2,就可以從同一個地方取得一批文件,并將它們逐個放到瀏覽器緩存中。從瀏覽器角度看,通過 SPDY/HTTP2 獲取所有這些獨立的資源與獲取一個大JavaScript 文件的延遲差不多。在第二個頁面請求時,由于你已經把應用程序切割成了輕量可緩存的文件,第二個頁面也依賴的某些組件此時已經存在于瀏覽器緩存中了。當然,這里假設瀏覽器支持 SPDY/HTTP2,只有比較新的瀏覽器才滿足。如果你還想支持那些比較老的瀏覽器,可能還是用一個大文件更合適。

          文檔模式

          IE5.5 發(fā)明了文檔模式的概念,即可以使用 doctype 切換文檔模式。最初的文檔模式有兩種:混雜模式(quirks mode)和標準模式(standards mode)。前者讓 IE 像 IE5 一樣(支持一些非標準的特性),后者讓 IE 具有兼容標準的行為。雖然這兩種模式的主要區(qū)別只體現在通過 CSS 渲染的內容方面,但對JavaScript 也有一些關聯影響,或稱為副作用。本書會經常提到這些副作用。

          IE 初次支持文檔模式切換以后,其他瀏覽器也跟著實現了。隨著瀏覽器的普遍實現,又出現了第三種文檔模式:準標準模式(almost standards mode)。這種模式下的瀏覽器支持很多標準的特性,但是沒有標準規(guī)定得那么嚴格。主要區(qū)別在于如何對待圖片元素周圍的空白(在表格中使用圖片時最明顯)。

          混雜模式在所有瀏覽器中都以省略文檔開頭的 doctype 聲明作為開關。這種約定并不合理,因為混雜模式在不同瀏覽器中的差異非常大,不使用黑科技基本上就沒有瀏覽器一致性可言。標準模式通過下列幾種文檔類型聲明開啟:

          <!-- HTML 4.01 Strict -->

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

          "http://www.w3.org/TR/html4/strict.dtd">

          <!-- XHTML 1.0 Strict -->

          <!DOCTYPE html PUBLIC

          "-//W3C//DTD XHTML 1.0 Strict//EN"

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

          <!-- HTML5 -->

          <!DOCTYPE html>

          準標準模式通過過渡性文檔類型(Transitional)和框架集文檔類型(Frameset)來觸發(fā):

          <!-- HTML 4.01 Transitional -->

          <!DOCTYPE HTML PUBLIC

          "-//W3C//DTD HTML 4.01 Transitional//EN"

          "http://www.w3.org/TR/html4/loose.dtd">

          <!-- HTML 4.01 Frameset -->

          <!DOCTYPE HTML PUBLIC

          "-//W3C//DTD HTML 4.01 Frameset//EN"

          "http://www.w3.org/TR/html4/frameset.dtd">

          <!-- XHTML 1.0 Transitional -->

          <!DOCTYPE html PUBLIC

          "-//W3C//DTD XHTML 1.0 Transitional//EN"

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <!-- XHTML 1.0 Frameset -->

          <!DOCTYPE html PUBLIC

          "-//W3C//DTD XHTML 1.0 Frameset//EN"

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

          準標準模式與標準模式非常接近,很少需要區(qū)分。人們在說到“標準模式”時,可能指其中任何一個。而對文檔模式的檢測(本書后面會討論)也不會區(qū)分它們。本書后面所說的標準模式,指的就是除混雜模式以外的模式。

          <noscript>元素

          針對早期瀏覽器不支持 JavaScript 的問題,需要一個頁面優(yōu)雅降級的處理方案。最終,<noscript>元素出現,被用于給不支持 JavaScript 的瀏覽器提供替代內容。雖然如今的瀏覽器已經 100%支持JavaScript,但對于禁用 JavaScript 的瀏覽器來說,這個元素仍然有它的用處。<noscript>元素可以包含任何可以出現在<body>中的 HTML 元素,<script>除外。在下列兩種情況下,瀏覽器將顯示包含在<noscript>中的內容:

          ? 瀏覽器不支持腳本;

          ? 瀏覽器對腳本的支持被關閉。任何一個條件被滿足,包含在<noscript>中的內容就會被渲染。否則,瀏覽器不會渲染<noscript>中的內容。

          下面是一個例子:

          <!DOCTYPE html>

          <html>

          <head>

          <title>Example HTML Page</title>

          <script defer="defer" src="example1.js"></script>

          <script defer="defer" src="example2.js"></script>

          </head>

          <body>

          <noscript>

          <p>This page requires a JavaScript-enabled browser.</p>

          </noscript>

          </body>

          </html>

          這個例子是在腳本不可用時讓瀏覽器顯示一段話。如果瀏覽器支持腳本,則用戶永遠不會看到它。

          小結

          JavaScript 是通過<script>元素插入到 HTML 頁面中的。這個元素可用于把 JavaScript 代碼嵌入到HTML 頁面中,跟其他標記混合在一起,也可用于引入保存在外部文件中的 JavaScript。本章的重點可以總結如下。

          ? 要包含外部 JavaScript 文件,必須將 src 屬性設置為要包含文件的 URL。文件可以跟網頁在同一臺服務器上,也可以位于完全不同的域。

          ? 所有<script>元素會依照它們在網頁中出現的次序被解釋。在不使用 defer 和 async 屬性的情況下,包含在<script>元素中的代碼必須嚴格按次序解釋。

          ? 對不推遲執(zhí)行的腳本,瀏覽器必須解釋完位于<script>元素中的代碼,然后才能繼續(xù)渲染頁面的剩余部分。為此,通常應該把<script>元素放到頁面末尾,介于主內容之后及</body>標簽之前。

          ? 可以使用 defer 屬性把腳本推遲到文檔渲染完畢后再執(zhí)行。推遲的腳本原則上按照它們被列出的次序執(zhí)行。

          ? 可以使用 async 屬性表示腳本不需要等待其他腳本,同時也不阻塞文檔渲染,即異步加載。異步腳本不能保證按照它們在頁面中出現的次序執(zhí)行。

          ? 通過使用<noscript>元素,可以指定在瀏覽器不支持腳本時顯示的內容。如果瀏覽器支持并啟用腳本,則<noscript>元素中的任何內容都不會被渲染。

          著工作閑暇之余,總結下string的方法

          string目前所有方法

          1,anchor() 方法用于創(chuàng)建 HTML 錨,該方法返回加了 <a> 標簽的字符串。



          2,at()方法,根據索引獲取字符,可以接受負索引。


          3,big() 方法用于把字符串顯示為大號字體,該方法返回加了 <big> 標簽的字符串。

          small() 方法用于把字符串顯示為小號字,該方法返回加了 <small> 標簽的字符串。

          blink() 方法用于顯示閃動的字符串,該方法返回加了 <blink> 標簽的字符串。

          fixed() 方法用于把字符串顯示為打字機字體,該方法返回加了 <tt> 標簽的字符串。

          strike() 方法用于顯示加刪除線的字符串,該方法返回加了 <strike> 標簽的字符串。

          bold() 方法用于把字符串顯示為粗體,該方法返回加了 <b> 標簽的字符串。

          italics() 方法用于把字符串顯示為斜體,該方法返回加了 <i> 標簽的字符串。

          fontcolor() 方法用于按照指定的顏色來顯示字符串,該方法返回加了 <font> 標簽的字符串。

          fontsize() 方法用于按照指定的尺寸來顯示字符串,該方法返回加了 <font> 標簽的字符串。

          sub() 方法用于把字符串顯示為下標,該方法返回加入 <sub> 標簽的字符串。

          sup() 方法用于把字符串顯示為上標,該方法返回加入 <sup> 標簽的字符串。

          link() 方法用于把字符串顯示為超鏈接,該方法返回加了 <a> 標簽的字符串。



          4,charAt() 方法返回字符串中指定索引(下標)處的字符,不傳默認索引為 0,小數索引轉換為整數,如果索引無效,則為空字符串 (""),超出范圍的索引返回空字符串。

          5,charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼,返回值是 0 - 65535 之間的整數,表示給定索引處的 UTF-16 代碼單元。字符串中第一個字符的位置為 0, 第二個字符位置為 1,以此類推。不傳默認為0。


          6,codePointAt() 方法返回字符串中索引(位置)處的 Unicode 值。

          charCodeAt() 和 codePointAt() 的區(qū)別

          charCodeAt() 是 UTF-16,codePointAt() 是 Unicode。

          charCodeAt() 返回 0 到 65535 之間的數字。

          只有 codePointAt() 可以返回大于 0xFFFF (65535) 的 Unicode 值的完整值


          7,concat() 方法連接兩個或多個字符串。不會更改現有字符串。返回新字符串。一般實際使用時用+號更方便一些。


          8,constructor 屬性返回對 String 對象屬性創(chuàng)建的函數。


          9,startsWith() 方法用于檢測字符串是否以指定的子字符串開始。如果是以指定的子字符串開頭返回 true,否則 false。startsWith() 方法對大小寫敏感。

          endsWith() 方法用來判斷當前字符串是否是以指定的子字符串結尾的(區(qū)分大小寫)。如果傳入的子字符串在搜索字符串的末尾則返回 true,否則將返回 false。


          10,includes() 方法如果字符串包含指定的字符串,includes() 方法將返回 true。否則返回 false。includes() 方法區(qū)分大小寫。


          11,indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。如果沒有找到匹配的字符串則返回 -1。 indexOf() 方法區(qū)分大小寫。

          lastIndexOf() 方法可返回一個指定的字符串值最后出現的位置,如果指定第二個參數 start,則在一個字符串中的指定位置從后向前搜索。該方法將從后向前檢索字符串,但返回是從起始位置 (0) 開始計算子字符串最后出現的位置。 看它是否含有字符串。開始檢索的位置在字符串的 start 處或字符串的結尾(沒有指定 start 時)。如果沒有找到匹配字符串則返回 -1 。lastIndexOf() 方法是區(qū)分大小寫的!


          12,isWellFormed()方法用于判斷字符串格式是否正確。

          toWellFormed()方法用于將字符串轉換為正確格式。

          新的方法,提案地址:https://github.com/tc39/proposal-is-usv-string

          13,length 屬性返回字符串的長度(字符數)。

          未完待續(xù)。。。


          主站蜘蛛池模板: 国产三级一区二区三区 | 国产伦精品一区二区三区在线观看| 亚洲一区二区三区乱码在线欧洲| 一本岛一区在线观看不卡| 色一情一乱一伦一区二区三区| 尤物精品视频一区二区三区 | 亚洲一区二区中文| 日韩人妻一区二区三区蜜桃视频| 亚洲综合无码一区二区| 国产精品一区在线播放| 日韩精品一区二区三区中文版| 日本一区二区三区精品视频| 国产成人精品久久一区二区三区av| 国产一区二区三区免费| 中文字幕无线码一区2020青青| 少妇一晚三次一区二区三区| 精品一区二区三区AV天堂| 亚洲日韩精品无码一区二区三区| 精品无码一区在线观看| 无码国产精品一区二区高潮| 国精产品一区一区三区| 色欲AV蜜桃一区二区三| 亚洲AV综合色区无码一区| 亚洲AV无码一区二区三区网址| 一区二区三区四区在线视频| 97久久精品一区二区三区| 国产传媒一区二区三区呀| 无码精品一区二区三区免费视频| 日韩一区二区三区在线 | 亚洲不卡av不卡一区二区| 日韩精品一区二区三区中文版| 精品福利一区二区三| 亚洲国产欧美国产综合一区| 国精品无码一区二区三区在线蜜臀| 国产乱码一区二区三区| 一区二区三区人妻无码 | 538国产精品一区二区在线| 亚洲美女视频一区二区三区 | 日韩精品电影一区亚洲| 免费播放一区二区三区| 男人的天堂亚洲一区二区三区 |