web前端開發(fā)技術期末復習 儲久良課后答案
HTML是一種超文本標記語言，html文檔是由標記構成的文本文件
世界上第一個網(wǎng)頁是http://info.cern.ch
訪問FTP站點使用的協(xié)議類型是 FTP
設計JavaScript語言的公司的Netscape
世界上第一個網(wǎng)站發(fā)明人是Tim Berners-Lee（蒂姆·伯納斯·李）
IE瀏覽器菜單中 ，選擇查看命令，可以在記事本中查看網(wǎng)頁源代碼
常用的WEB前端開發(fā)工具NotePad、EditPlus、TextPad、TopStyle、UltraEdit ，Dreamweaver、HBuilder、Visual Studio Code、Sublime Text、WebStorm、Eclipse、Editplus、Aptana、Notepad++、BrowserSync以及Vim
URL的全稱是統(tǒng)一資源定位符，CSS的全稱是層疊樣式表（級聯(lián)樣式表），AJAX的全稱是異步JavaScript和XML
常用的主流網(wǎng)絡瀏覽器?IE、Firefox、Chrome、opera、UCWEB、Edge
WEB的工作原理
Web一般是B/S(Browser/server)架構，是一個客戶/服務器系統(tǒng)它由分布在Internet上成千上萬個Web服務器和Web瀏覽器構成.瀏覽器是為用戶查閱Web牙的信息而在本機上運行一個程序，客戶端用Web瀏覽器獲取Web服務上所需的信息.Web服務器提供用HTML語言編寫的超文本信息，存儲和管理超文本文檔和超文本連接，并響應Web瀏覽器的連接請求.當服務器與某個瀏覽器建立連接后，監(jiān)聽瀏覽器發(fā)來的請求，并向瀏覽器傳送所需要的信息，這些信息可以是從服務器的磁盤上取得的，也可以是臨時拼湊起來的.
WEB具有哪些特點？
1、易導航和圖形化的界面
Web很流行，他可以在同一頁同時顯示色彩和文本，而在之前的Internet只能顯示文本信息。同時瀏覽很方便，只需要從一個鏈接跳轉(zhuǎn)到另外一個鏈接即可。
2、與平臺無關性
無論計算機系統(tǒng)是什么平臺，都可以通過Internet訪問WWW，沒有平臺的限制。
3、分布式結構
大量的圖片、音頻、視頻信息會占用很多的磁盤空間，事先難以預料信息的多少，對于Web來說信息可以放在不同的站點，而沒有必要集中在一起。瀏覽的時候只需要在瀏覽器指向該站點即可。也就是實現(xiàn)了物理上不一定在一個站點的信息邏輯上是一體的。
4、動態(tài)性
站點的信息是可以更新的，如果能保證實時性，則實現(xiàn)了動態(tài)性。
5、交互性
Web的交互性首先體現(xiàn)在其超鏈接上，用戶的瀏覽順序完全由其自己決定。另外通過表達Form的形式可以從服務器獲取動態(tài)的信息。用戶向服務器提交申請，服務器根據(jù)用戶請求返回響應信息。
寫出URL的格式,并說明其組成及作用
統(tǒng)一資源定位符(Uniform Resource Locator,URL)也被稱為網(wǎng)頁地址,如同在網(wǎng)絡上的門牌,是因特網(wǎng)上標準的資源的地址(Address)。 協(xié)議類型://服務器地址(端口號)/路徑/文件名 例如: http://www.edu.cn/kexuetansuo_12385/index.shtml 協(xié)議類型為協(xié)議http (超文本傳輸協(xié)議資源), www.edu.cn為域名,對應唯一個ip地址,kexuetansuo_12385/index.shtml對應路徑和文件名。
分別說明HTML,CSS,JavaScript在WEB網(wǎng)頁設計中的作用
HTML是網(wǎng)頁內(nèi)容的載體 內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS樣式是表現(xiàn) 就像網(wǎng)頁的外衣，比如：標題字體、顏色變化、為標題加入背景圖片、邊框等。
所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
HTML、CSS、JavaScript分別實現(xiàn)什么功能？JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果
比如：鼠標滑過彈出下拉菜單、鼠標滑過表格的背景顏色改變、焦點新聞的輪換。
可以理解為：有動畫的、有交互的一般都用JavaScript來實現(xiàn)。
(1)html、htm為后綴，首頁文件命名 index.html、default.html
(2)、頭部(head)、主體(body) 顯示網(wǎng)頁內(nèi)容
(3)單、雙，雙，開始（首）、結束（尾）
(4) xhtml4.0文檔三種類型，嚴格型（Strict）、過渡型（Transitional）、框架型（Frameset）、<!doctype html>
設置body顯示信息顏色為紅色的屬性是(text)
字體屬性的標記（color）（face）（size）
字標記對齊方式 <h1 align="center">'''</h1>? right? left? justify（兩端）表示字體標記<br>單標記段落標記<p></p> 版權符號是©插入一條水平分隔線<hr>
標記<b></b> 與<strong></strong>功能相同??定義粗體?????標記<i></i>?與<em></em>功能相同??定義斜體?????????刪除<del></del>?<s></s>? 下畫線<ins></ins>??<u></u>?
<ruby></ruby>標記由一個或多個需要解釋/發(fā)音的字符和一個提供該信息的<rt></rt> 還包括可選的<rp></rp>
定義列表中項目描述使用的標記<dd></dd> 無序列表type默認值disc 定義有序列表<ol></ol> uL標記之間必須用<li></li>標記的作用是添加列表項值 有序列表start值改變起始值，該屬性值類型是整型數(shù)值 列表項value的屬性可以改變項目前面編號
電子郵箱鏈接 只指定了主題<a href="mailto:abc@163.com?subject=Hello%20again">發(fā)送Email</a>? 規(guī)定圖像URL的屬性src?rect矩形 circle圓形poly多邊形? hspace和vspace作用是設置滾動文字背景和它周圍文字及圖像之間的空白空間范圍? ?<object>插入多媒體文件<Marquee>插入滾動文字 <img>插入圖像
CSS由選擇器和聲明構成 css定義多次引用樣式 超鏈接選擇器 優(yōu)先級最高的行內(nèi)樣式
width設置寬度 height設置高度 alt替換文本
導入外部樣式表格式 @import url（“chu12015.css”）
css? ?#p1{}標記使用id屬性引用樣式 .p2{}定義樣式 使用class屬性引用樣式? 引用外部css一是通過link標記的href屬性 二是通過style標記@import url來引用? 定義圖層<div></div>
行內(nèi)標記的是<SPAN></SPAN>可以通過id,class，style來實現(xiàn)?多圖層實現(xiàn)層疊必要條件position屬性為absolute 可以設置z-index屬性實現(xiàn) 清除div左右浮動屬性是clear 圖層四個屬性left top width height
div和span的區(qū)別是：div標簽是塊級元素，每個div標簽都會從新行開始顯示，占據(jù)一行；div標簽內(nèi)可以添加其他的標簽元素（行內(nèi)元素、塊級元素都行）。而，span標簽是行內(nèi)元素，會在一行顯示；span標簽內(nèi)只能添加行內(nèi)元素的標簽或文本。
css盒模型屬性?內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)
段落縮進 text—indent 文本居中 text-align：center? 設置文字顏色紅色color：red，RGB(100%,0,0)，rgb（255，0，0），#FF0000,#F00
border：2px double red；2像素寬的雙線邊框 紅色
div{display：none}圖層div不顯示?div {
visibility: hidden; /* 隱藏div元素 */
}
float?屬性僅支持?left、?right?或?none?三個取值
display: block?用于控制元素的布局方式，使其在頁面上以塊的形式呈現(xiàn)，而?visibility: visible?用于控制元素的可見性，不會改變元素的布局方式。
設置圍繞表格邊框?qū)挾?span id="s0sssss00s" class="color-pink-02"><table border=“”> 定義表頭的標記<th></th>? 表格的標題標記<caption></caption> 行標記tr></tr>? 單元格跨3行 <td rowspan=“3”></td> 跨5列<td colspan=“5”></td>? 外部邊框樣式可以用frame屬性定義 內(nèi)部可以用rules屬性來定義
單元格邊距屬性cellspacing 間距屬性cellpadding?
表單是web瀏覽器和web服務器信息交流傳遞橋梁 form標記中method屬性取值 post get?
<SELECT>必須和<option>配合 包含name,size，multiple屬性? ?textarea多行文本輸入框 指定行數(shù)rows 指定列數(shù)為cols 重置按鈕type值 reset?提交submit 普通button 復選框name value必須不相同 單選框name相同 value不相同? checked屬性設置默認預選 selected可以將下拉列表框中某一設置默認 fieldset定義域 legend定義域標題 src source加載不同格式媒體文件
插入js代碼需使用<script type=“text/JavaScript”></script> 引用外部文件<script src=“show.js”></script>? ?javascript對話框 告警框 確認框 提示框 18/0的值infinity
HTML5的組成結構
<html>
<head>
? ? ? ? <title>這是頭部名稱</title>
? ? </head>? ??
? ? <!--head表示頭部部分-->
? ? <body>
? ? ? ? 這是主體部分
? ? </body>
? ? <!--body表示主體部分-->
</html>
CSS樣式從低到高優(yōu)先級
標記樣式??類樣式? id樣式 行內(nèi)樣式
設計一個二行二列的表格,邊框2PX,表格文字居中的HTML代碼
<table border="2" cellspacing="0" cellpadding="10" style="border-collapse: collapse; text-align: center;"> ?<tr> ? ?<td>第一行，第一列</td> ? ?<td>第一行，第二列</td> ?</tr> ?<tr> ? ?<td>第二行，第一列</td> ? ?<td>第二行，第二列</td> ?</tr> </table>
在表格右邊加一行合并第一行
<table border="2" cellspacing="0" cellpadding="10" style="border-collapse: collapse; text-align: center;"> ?<tr> ? ?<td colspan="2">合并第一行</td> ? ?<td>第一行，第三列</td> ?</tr> ?<tr> ? ?<td>第二行，第一列</td> ? ?<td>第二行，第二列</td> ? ?<td>第二行，第三列</td> ?</tr> ?<tr> ? ?<td>第三行，第一列</td> ? ?<td>第三行，第二列</td> ? ?<td>第三行，第三列</td> ?</tr> </table>
<!doctype html><html><head><title>表格</title></head><body><center><h1>員工信息列表</h1></center><hr><!--border="1px" 設置表格的邊框為1像素寬度。width 寬度height 高度--><table align="center" border="1px" width="60%" height="150px"><!--align對齊方式--><tr align="center"><td>a</td><td>b</td><td>c</td></tr><tr><td>d</td><td>e</td><td>f</td></tr><tr><td>x</td><td>y</td><td align="center">z</td></tr></table></body></html>
一、網(wǎng)頁設計標題標記
1.標題標記 h1-h6：由小到大有六種，是對網(wǎng)頁內(nèi)容的重要分段標識，可以幫助搜索引擎判斷網(wǎng)頁內(nèi)容，且h1-h3一般為頁面內(nèi)容重要標識，h4-h6一般為子頁面或嵌套頁面的小標題。
2.文本標記：標記不是網(wǎng)頁標題，而是提供一些其他功能?？煞譃樾屑墭擞?、文本樣式標記、行內(nèi)樣式標記和多媒體標記四種：
行級標記：可將全文內(nèi)容分段，有p、div、span等；
文本樣式標記：用于文本樣式的定義，有strong、em、i等；
行內(nèi)樣式標記：用于文本內(nèi)容的內(nèi)部修飾，有a、img、br等；
多媒體標記：用于插入多媒體文件，有audio、video和object等。
3.結構標記：除了標題和文本標記，結構標記也非常重要，有頭部標記、列表標記、表格標記以及表單標記等。
頭部標記：用于定義網(wǎng)頁內(nèi)容，有head、meta、title、body等；
列表標記：用于定義列表，有ol、ul、li等；
表格標記：定義表格，有table、tr、td等；
表單標記：用于定義用戶輸入模塊，有form、input、select等。
四種網(wǎng)頁設計標題標記只是部分網(wǎng)頁標記列表，除此之外，還有很多其他的標記，比如ins、title等，也可以用于網(wǎng)頁設計。
<P>稱為段落標記。作用：為字、畫、表格等之間留一空白行。
<BR>稱為換行標記。作用：令字、畫、表格等顯示于下一行。
<HR>稱為水平線。作用：插入一條水平線。
<CENTER>稱為居中標記。作用：令字、畫、表格等顯示于中間。
<PRE>稱為預設格式標記。作用：令文件按照原始碼的排列方式顯示。
<DIV>稱為區(qū)隔標記。作用：設定字、畫、表格等的擺放位置。
<NOBR>稱為不折行標記。作用：令某些文字不因太長而繞行，一 顯示于同一行或下一 行。它對住址、數(shù)學算式、一行數(shù)字、程式碼等尤為有用。
<WBR>稱為建議折行標記。作用：預設折行部位。
寫出HTML、CSS、JavaScript三大部分程序注釋的方法。（4分）
答：（1）HTML中注釋方法有兩種：<!—注釋1–>、程序注釋2（1.5分）；
（2）CSS中注釋可以用“/* 這是樣式表注釋 /” （1分）；
（3）JavaScript中可以用三種：單行注解//；多行注釋/ 這是多行注釋 */（1.5分）；
3．JavaScript關于標記符命名規(guī)定是什么？（3分）
答：JavaScript關于標識符的規(guī)定有：
（1）必須使用字母或者下劃線開始（0.5分）；
（2）必須使用英文字母、數(shù)字、下劃線組成，不能出現(xiàn)空格或制表符（1分）；
（3）不能使用JavaScript關鍵詞與JavaScript保留字（0.5分）；
（4）不能使用JavaScript語言內(nèi)部的單詞，比如Infinity,NaN,undefined（0.5分）；
（5）大小寫敏感，也就是說x和X是不一樣的兩個標識符（0.5分）。
三、看圖填充程序（每空2分，共36分）
（1） align=“center” （2）? ? ?
（3） font-size:28px （4） margin:0 auto
（5） name=“rigtiframe” （6） target
（7） middle （8） font-weight
（9） bordercolor （10） align=“center”
（11） colspan=“3” （12） class=“red”
（13） src=“sum_factorial.js” （14） readonly
（15） type=“button” （16） sum=sum+result |sum+=result
（17） compute_sum(n) （18） sum
（19） transform:scale （20） transform:skew
（21） transform:matrix （22） vertical-align:top
（23） id=“div3”
————————————————
三、看圖填充程序（每空2分，共36分）
（1） 歡迎學習Web客戶端編程 （2） alert(“Web客戶端編程很好學！”);
（3）
web前端開發(fā)技術
（4）
（5）
1.HTML
（6）
2.CSS
（7） background:#99ff99 （8） 2px double #ff3333
（9） font-size:24px （10）
（11） 軟件工程 （12） color:white
（13） font-weight:bold （14） i<=7|i<8
（15） number[i]=“0”+number[i] （16）document.getElementById(num)
（17） readonly （18）selectnumber(‘number1’)
（19） list （20）placeholder
（21） datalist，datalist （22）id
二、填空題（每空1分，共20分）
（1） 單 （2） 雙
（3） ? （4） face
（5） size （6） _blank
（7） 課程成績表 （8） body|主體
（9） button （10） . (點)
（11） # （12） var today=new Date();
（13） 0-100 （14） 內(nèi)部樣式表
（15） 導入樣式表 （16） 鏈入樣式表
（17） （18） rowspan
（19） src （20） circle
————————————————
二、填空題（每空1分，共20分）
（1） （2）
（3） sum+=1/(2*n-1) （4） face|size
（5） size | face （6） 5
（7） 外部鏈接 （8）
（9） file （10） 屬性
（11） [屬性]值 （12） join(“-”)
（13） 十六進制 （14） 標記樣式
（15） 類樣式 （16） id樣式
（17） 4 （18） #
（19） -300 （20） 2014
