整合營銷服務商

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

          免費咨詢熱線:

          web前臺小測試題

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

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

          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;}

          #和.區別

          .點是使用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?。?/p>

          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區別

          安全性:POST比GET安全;

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

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

          請求速度:GET比POST快。

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

          5. 下列標簽可以不成對出現的是( B?。?/p>

          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中規定了元素必須始終關閉,也就是標簽必須成對出現。

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

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

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

          A. 創建表格 ; <table>

          B. 創建一個滾動菜單; <marquee>

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

          D.創建一個下拉菜單

          8. BODY元素用于背景顏色的屬性是( C?。?/p>

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

          9. 在表單中包含性別選項,且默認狀態為“男”被選中,下列正確的是( A?。?/p>

          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 )事件處理程序可用于在用戶單擊按鈕時執行函數

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

          屬性當以下情況發生時,出現此事件onabort圖像加載被中斷onblur元素失去焦點onchange用戶改變域的內容onclick鼠標點擊某個對象ondblclick鼠標雙擊某個對象onerror當加載文檔或圖像時發生某個錯誤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. 鼠標離開某個區域; 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規定文本字體、大小和顏色:

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

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

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

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

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

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

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

          23. 如果要在表單里創建一個普通文本框,以下寫法中正確的是( 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();

          }

          前端開發中,CSS樣式經常需要覆蓋默認樣式以實現定制化的視覺效果。有時我們需要使用CSS穿透(穿透CSS)來實現這一點,特別是當我們需要修改內置元素的默認樣式時,例如select下拉菜單。下面是一個關于如何使用CSS穿透覆蓋默認樣式并實現自定義原生select控件樣式的教程。

          首先,讓我們來看看如何使用CSS穿透覆蓋默認樣式。CSS穿透是一種通過在CSS中使用偽元素和子元素選擇器來覆蓋默認樣式的技術。以下是一個示例代碼:

          css

          復制代碼

          select {

          background: transparent;

          border: none;

          outline: none;

          }

          斷續續,把流水統計模塊做完了,今天正好上線了,主要供內部使用^^

          回頭一想,雖然只是一個小功能,但是涉及到的部門和技術還不少呢。

          • 和源庫源表所在的組了解數據接口

          • 找架構組,完成配置實現數據分表映射單表全量同步,以及增量同步

          • 我這邊需要監聽增量同步的Kafka消息,實現數據及時同步,添加一些定時器,保證數據每天統計更新等等

          • 畫界面,包括明細以及統計信息的表格展示和圖表展示,使用了bootstrap, highchart以及一會要介紹的bootstrap-select

          界面這塊,后面有時間還需要優化調整。

          Bootstrap-Select

          鑒于在已有的框架下使用的是JQuery和Bootstrap,又要用到綁定數據源的下拉框,那就非Bootstrap-Select莫屬了。

          Bootstrap-Select是一個可以Bootstrap效果的JQuery插件。

          官方網站:http://silviomoreto.github.io/bootstrap-select/

          Github地址:https://github.com/silviomoreto/bootstrap-select

          如何使用Bootstrap-Select

          下載JS和CSS

          • 如果你需要將js和css文件下載到本地可以到http://www.bootcdn.cn/bootstrap-select/找你需要的版本,然后分別下載bootstrap-select.min.css和bootstrap-select.min.js

          • 如果你希望通過在線訪問的形式,就可以在head標簽添加地址即可比如類似下圖所示

          引用JS和CSS

          在<head>標簽中加上如圖所示

          編寫頁面代碼

          有了前面的工作,我們就可以在頁面里添加下拉框控件了,很簡單

          <select id="testSelect" class="selectpicker show-tick form-control" data-width="250px" data-live-search="true">
          • selectpicker、show-tick和form-control都是樣式,data-width是設置的寬度,從而保證下拉框不會出現寬度抖動的情況

          • data-live-search設置為true,表示支持搜索功能,即可以從所有的下拉選項中篩選你搜索的項

          • 這里的value="-1"是人為加上的

          • 如果你想實現默認情況下拉框不顯示任何值并給出一個虛化的提示信息,可以在select中加上data-first-option="false" title='請選擇需要查詢的合作方'

          • 通過foreach標簽遍歷從后臺取出的selectItems值,然后顯示為一個個選項

          下面展示的搜索的功能,直接輸入,bootstrap-select會立即篩選會候選項

          添加監聽事件

          有時候我們使用下拉框不僅僅是需要展示,我們需要使用它的監聽事件,比如change,當選中一個新的選項,我們希望展示的數據會跟隨選項值更新,這時候我們需要利用到函數change,好比這樣

          $("#testSelect").change(function() {

          怎么樣,是不是很簡單,又很好用,你學會了?


          主站蜘蛛池模板: 亚洲国产精品一区二区第一页| 精品视频午夜一区二区| 无码人妻一区二区三区免费看| 无码国产精品一区二区免费I6| 亚洲国产精品一区二区久| 亚洲视频在线一区二区三区| 精品欧洲av无码一区二区 | 麻豆亚洲av熟女国产一区二| 麻豆天美国产一区在线播放| 亚洲日本久久一区二区va| 亚洲综合一区二区三区四区五区| 波多野结衣AV一区二区三区中文| 亚洲精品色播一区二区| 成人在线观看一区| 婷婷亚洲综合一区二区| 午夜福利国产一区二区| 亚洲无人区一区二区三区| 乱子伦一区二区三区| 在线|一区二区三区四区| 一区二区三区四区在线观看视频| 中文字幕在线播放一区| 麻豆一区二区三区精品视频| 日本精品夜色视频一区二区| 国产伦精品一区二区三区| 一区二区亚洲精品精华液| 国产成人精品一区二区三区| 91在线看片一区国产| 好湿好大硬得深一点动态图91精品福利一区二区 | 日韩一区二区三区射精| 国产精品视频一区二区三区不卡| 亚洲一区中文字幕久久| 国产丝袜一区二区三区在线观看| 国产一区二区三精品久久久无广告| 国产成人精品视频一区二区不卡| 精品免费国产一区二区| 精品无人区一区二区三区在线| 一区二区三区杨幂在线观看 | 亚洲欧美日韩一区二区三区| 亚洲色无码一区二区三区| 国产麻豆媒一区一区二区三区| 日韩一区二区在线播放|