[TOC] # HTML ## 問題01：復述程序開發中的幾種路徑使用方法。 1. 絕對路徑 2. 相對路徑 * 相對服務器路徑 * 相對當前目錄 * 相對當前子目錄 * 相對當前父目錄 ## 問題02：復述表單重要屬性及注意事項。 1. 屬性action、method、enctype > **文件上傳**時需要設置哪些屬性？ > 提交方式必須設置為post > enctype必須設置為multipart/form-data ## 問題03：復述表單重要控件。 1. 輸入控件input 2. 下拉列表 3. 文本區域 > 注意：單選框和復選框的name屬性設置。 > 注意：所有輸入控件一般都需要設置name屬性，便于后端接收數據。  # CSS ## 問題04：復述CSS的編寫規則。 ``` div{ border: 1px solid red; width: 600px; height: 400px;} ```  ## 問題05：復述CSS的三種樣式表使用方法。  ## 問題06：列舉CSS的常用選擇器。 * 標簽選擇器 * id選擇器 * class選擇器 * 組合選擇器 * 屬性選擇器 * 偽元素選擇器 * 結構偽類選擇器 ## 問題07：復述CSS的優先級規則。 ``` !important 用在屬性值后面，表示當前聲明超越一切優先級 id > class|偽類 > 標簽|偽元素 行內 > 內部 > 外部 行內 > id ``` # JavaScript ## 問題08：復述JavaScript在網頁中的使用。  ## 問題09：復述JavaScript數據類型以及變量定義。  ## 問題10：列舉JavaScript的常用事件。  ## 問題11：復述JavaScript中為元素添加事件響應的方法。 1. 直接為事件源添加事件并調用處理程序function ``` <button onclick="fun()" >按鈕</button> ``` 2. 為事件源綁定事件并賦值處理程序function ``` <button>按鈕</button> <script> document.querySelector("button").onclick = function(){} </script> ``` ## 問題12：復述JavaScript獲取網頁元素及內容的方法。 ``` Live Node = document.getElementById("id") Live Node List = document.getElementsByClassName("class") Live Node List = document.getElementsByName("name") Live Node List = document.getElementsByTagName("tagname") Static Node = document.querySelector("selector") Static Node List = document.querySelectorAll("selector") ``` ## 問題13：復述JavaScript修改、刪除、增加網頁元素的方法。 | 方法 | jQuery對象 | DOM對象 | | --- | --- | --- | | 獲取html/text | j.html() 或 j.text() | d.innerHTML 或 d.innerText | | 修改html/text | j.html(val) 或 j.text(val) | d.innerHTML=val 或 d.innerText=val | | 獲取值 | j.val() | d.value | | 修改值 | j.val(newval) | d.value=newval | | 獲取屬性值 | j.attr(name) | d.getAttribute(name) | | 增加/修改屬性值 | j.attr(name,val) | d.setAttribute(name,val) | | 刪除屬性值 | j.removeAttr(name) | d.removeAttribute(name) | | 增加CSS類 | j.addClass(classname) | / | | 移除CSS類 | j.removeClass(classname) | / | | 獲取/增加樣式 | j.css(name) 或j.css(name,val) 或j.css({name:val;}) | ## 問題14：復述JavaScript進行數據驗證的常用方法。 > 內置函數驗證 ``` 判斷x是否為非數字：isNaN(x) 判斷x是否為空：x=="" ``` > test 檢索字符串中指定的值。返回 true 或 false。 ~~~ var reg = new RegExp(); or /^XXX$/ reg.test(String); ~~~ # 實踐1：注冊頁面  # 實踐2：完成項目公共頁面設計。 ## 1. 實驗目的 1. 能夠使用HTML表單及其他常用標簽來設計頁面； 2. 能夠使用CSS實現頁面的裝飾及布局； 3. 能夠使用JavaScript對用戶輸入數據進行校驗； 4. 能夠使用JavaScript實現基本的用戶交互； 5. 能夠使用jQuery優化DOM操作。 ## 2. 實驗內容 1. 設計文件分享系統的導航欄和頁腳，包含系統的所有功能預覽（文件列表、分類查看、操作中心、文件檢索、個人中心等）； 2. 設計文件分享系統的公共頁面，如登錄、注冊頁面、忘記密碼等； 3. 設計文件分享系統的其他所需頁面，如分享文件、個人信息等頁面，分享文件等； 4. 驗證表單輸入數據是否為空、格式是否正確等。 ## 3. 實驗效果 ### 1. 主頁效果  ### 2. 登錄頁面  ### 3. 注冊頁面  ### 4. 忘記密碼（郵件登錄）  ### 5. 個人信息  ### 6. 修改密碼  ### 7. 分享文件  ## 4. 實驗圖片