整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html圖像
在htmtl中,圖像由<img>標簽定義.<img>是空標簽,它只包含屬性,并且沒有閉合標簽.
要在頁面上顯示圖像,使用源屬性(src).源屬性的值是圖像的url地址(統一資源定位符).
定義圖像的語法是:
<img src="url"/>
url指存儲圖像的位置.
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" alt=" "/>
</body>
<html>
●如果圖像無法顯示,則alt屬性用來為圖像定義一串預備的可替換的文本.alt屬性是必需的.
height(高度)與width(高度)屬性用于設置圖像的高度與寬度.該屬性值可以以像素或百分比形式指定,默認單位為像素
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="logo.png" height="100px" width="100px" alt=" "/>
<!--或者-->
<img src="logo.png" height="80%" width="80%" alt=" "/>
</body>
</html>
●<img>的border屬性規定圖像周圍的邊框的寬度.默認情況下,圖像是沒有邊框的
border屬性的屬性值的單位是像素.表示邊框的寬度
實例:帶有2個像素粗邊框的圖像.
<img src="logo.png" height="100px" width="100px" border="2" alt=" " />
二 html鏈接
html使用標簽<a>來設置超文本鏈接.
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,你可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分.
在標簽<a>中,使用href(hyper text reference)屬性來描述鏈接的目標地址
鏈接的html代碼很簡單.格式如下:
<a href="url">鏈接文本</a>
上邊的代碼顯示為:鏈接文本(鏈接文本下面有下劃線)
●使用target屬性,你可以規定在何處打開鏈接文檔.如果給target屬性賦值_blank,將使鏈接在新窗口或新選項卡中打開.
<a href="url" target="_blank">鏈接文本</a>
三 html列表
無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記
無序列表使用<ul>標簽,與<li>標簽一起使用(unordered list)
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
瀏覽器顯示效果如下:
有序列表也是一列項目,列表項目使用數字進行標記.
有序列表始于<ol>標簽,每個列表項目始于<li>標簽.
<ol>
<li>咖啡</li>
<li>菜</li>
<li>牛奶</li>
</ol>
運行效果如下:
四 html表格
表格由<table>標簽定義.
每個表格均有若干行(由<tr>標簽定義,table row),每行被分割為若干單元格(由<td>標簽定義,table division)
下面是一個包含兩行兩列的表格:
<table border="2">
<tr>
<td>阿/td>
<td>平</td>
</tr>
<tr>
<td>加</td>
<td>油</td>
</tr>
</table>
運行效果:
、選擇題（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;}
#和.區別
.點是使用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區別
安全性：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 ）
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 ）
A. alink ; B. vlink ; C. bgcolor; D. background
9. 在表單中包含性別選項，且默認狀態為“男”被選中，下列正確的是（ 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 ）事件處理程序可用于在用戶單擊按鈕時執行函數
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();
}
級鏈接標簽
目的頁面的地區用 name屬性定義（name的值可自己定義，一般為英文），鏈接頁面的鏈接應寫為<a href=”url#name”></a>
未被訪問的鏈接帶有下劃線而且是藍色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的
關于錨的進一步說明：
<a> 標簽可定義錨，錨 (anchor) 有兩種用法：
通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）
通過使用 name 或 id 屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）
圖片標簽 <img>
1、img標簽是一個單標簽，必須和src（source：指出圖像的路徑）屬性連用，
網頁上圖像的路徑有絕對路徑和相對路徑兩種，但在實際運用中往往只用相對路徑
絕對路徑：圖片在硬盤上的路徑 （分割符號是/）
相對路徑：圖片相對于網頁而言的路徑
如果圖片與網頁在同一個文件夾下，那么可以直接用圖片的名稱表示其路徑
如果圖片在網頁的下一層文件夾中，比如圖片在網頁文件下面的images文件夾中，則可用images/表示
我們也可以用./表示網頁所在的文件夾
如果圖片在網頁的上一層文件夾中，則用../表示
事實上，不但圖片文件是如此，網頁中應用的文件都分為相對路徑和絕對路徑兩種表達方式。
2、在網頁上，支持的圖片格式包括.gif .jpg .png .bmp,一般用前三者居多，因為前三者的圖片壓縮比較好。但是，gif格式只有256種顏色，所以，在需要豐富顏色的場合，往往多用jpg和png格式。不過，gif擁有動態功能，而后兩者則不具備。
3、img標簽可以與其它標簽共處一行，如果有多個圖形出現時，默認為同一行顯示
4、img標簽有4個常用標簽，分別是
alt 圖片說明，在圖像無法顯示時表現為圖像的替代文本
width 寬 屬性值可以是象素，也可以是%
height 高 屬性值可以是象素，也可以是%
border 邊框
5、圖片鏈接仍然是用a標簽來顯示
例子：<a href=“http://www.rwxy.xnc.edu.cn”><img src="sample.jpg" ></a>
6、可以用圖像映射實現圖像不同區域的鏈接
圖象映射
所謂圖象映射是指一個圖片上的不同位置被指定了不同的超級鏈接；點擊圖片的不同位置會打開不同的超級鏈接目標。這與前面的默認超級鏈把整個圖片作為超級鏈接的元素是很不一樣的。
圖象映射由<map>定義。<map>有一個基本屬性是name。name給圖象映射命名，這個命名將會被<img>元素用usemap屬性引用。所以，圖象上的圖象映射實際上是對<map>定義的映射的一個引用。
<map>在定義圖象映射時，可以定義三種形狀的映射： circle(圓形)、rect(矩形rectangle)、poly(多邊形)
圖象映射實例
<img src="bear.jpg" usemap="#map" >
<map name=“map">
<area shape="rect" coords="46,29,253,164" href="#" >
<area shape="circle" coords="76,510,59" href="#" >
<area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" >
</map>
表格標簽
表格由三個標簽構成，分別是
<table>...</table> - 定義表格
<tr> - 定義表行
<th> - 定義表頭
<td> - 定義表格單元(表格的具體數據)
在表格標簽中，table、tr、td標簽都具備不同的屬性
table：border（邊框尺寸設置）；width（表格的寬）；height（表格的高）；align（橫向對齊：left center right）；bgcolor（背景色彩）；background（背景圖像）；cellspacing（表格單元的間隙設置）；cellpadding（表元內部空白設置）；
tr：height（行高）；align（橫向對齊：left center right）；valign（縱向對齊：top middle bottom）；bgcolor（背景色彩）；
td：width（表格的寬）；height（表格的高）；align（橫向對齊：left center right）；valign（縱向對齊：top middle bottom）；bgcolor（背景色彩）；background（背景圖像）；
注：當talble、tr、td有共同的屬性而且屬性值發生沖突之際，其優先性是td > tr > table
表格在html中最大的作用不是用來整理數據，而是用來排版，所以它是html中用處最廣的標簽之一。
表格內部可以繼續放入表格，這被稱之為表格嵌套，利用表格嵌套可以制作出非常復雜的排版。
表格的單元格可以跨行跨列顯示
跨多列的單元格 <td colspan=#>
<table border=1>
<tr><td colspan=3> morning menu</td>
<tr><td>food</td> <td>drink</td> <td>sweet</td>
<tr><td>a</td><td>b</td><td>c</td>
</table>
morning menu
food
drink
sweet
a
b
c
跨多行的單元格 <td rowspan=#>
<table border=1>
<tr><td rowspan=3> morning menu</td>
<td>food</td> <td>a</td></tr>
<tr><td>drink</td> <td>b</td></tr>
<tr><td>sweet</td> <td>c</td></tr>
</table>
morning menu
food
a
drink
b
sweet
c
....................................................................
我的微信公眾號：UI嚴選 —越努力，越幸運
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
