目? 錄
一、實驗目的
二、實驗環境
三、實驗步驟和內容
1、小組成員分工（共計4人）
2、實驗方案
3、實驗結果與分析
4、項目任務評價
四、遇到的問題和解決方法
五、實驗總結
一、實驗目的
? ? ? ? 1、HTML基礎知識、基本概念
? ? ? ? 2、使用HTML標簽、表格進行網頁布局
? ? ? ? 3、使用HTML表單標簽設計表單
? ? ? ? 4、完成個人簡歷的前端頁面設計、后端表單設計
二、實驗環境
????????1、硬件要求：筆記本電腦一臺。
????????2、軟件要求：Windows操作系統，使用Eclipse編譯環境、Tomcat服務器以及Microsoft Edge瀏覽器。
????????3、網絡要求：能訪問互聯網。
三、實驗步驟和內容
1、小組成員分工（共計4人）
? ? ? ? （1）組長——錦鯉
????????完成小組內部成員的分工以及前端界面的設計和把控，制定相關的組內合作機制，組內項目的構建遵從“四模四合三并一詳”制度，即“四模”為相關項目的制作分為四個模塊，每一個人負責一個模塊的制作；“四合”為組內四人之間相互合作，將項目開展過程中出現的問題及時的反饋到小組群內，小組成員一起解決；“三并”為以3天為一個期限合并一次代碼，檢測代碼之間以及網頁之間是否能夠正常的進行銜接和跳轉，即每周周三和周六各進行一次小的代碼合并工作，將過程中出現的問題發到小組群里讓對應負責的同學進行修改和完善，最后在每周的周天進行一次大型的代碼合并，此時所有成員必須全部到場，對運行過程中和演練過程中可以改進的地方進行記錄，全部演示完畢后對自己負責的模塊再進行相應的完善工作；“一詳”為組內所有代碼都要有相應的注釋，確保組內成員都可以看懂各自負責模塊的代碼，方便進行后期代碼的修改工作。
????????使用Eclipse編譯軟件設計一個小組成員介紹的專屬網頁，在該網頁中實現各個成員的分工部署以及標題、段落、鏈接、CSS、圖像、列表、區塊、布局標簽、單文本框、單選框、復選框、下拉列表框、文本域、按鈕、邊框表單等功能并設計一個表格形式的單獨的個人簡歷。
? ? ? ? （2）組員——唐僧
????????使用Eclipse編譯軟件設計個人的表格形式的個人簡歷，個人簡歷實現標題、圖像、列表、區塊、布局標簽、文本域、按鈕、邊框表單等功能并完成小組頁面的郵箱信息和團隊簡歷小方塊圖標的設計。
? ? ? ? （3）組員——豬八戒
????????使用Eclipse編譯軟件設計個人的表格形式的個人簡歷，個人簡歷實現標題、段落、鏈接、圖像、列表、區塊、布局標簽、邊框表單等功能并完成小組頁面精美圖片和聯系方式小方塊圖標的設計。
? ? ? ? （4）組員——孫悟空
????????使用Eclipse編譯軟件設計個人的表格形式的個人簡歷，個人簡歷實現標題、段落、鏈接、圖像、邊框表單等功能并完成小組頁面頭部內容的設計。
2、實驗方案
????????1、根據課本、PPT和老師課堂中講解的內容，使用Eclipse編譯軟件設計各自的表格樣式。
????????2、表格設計完成以后以頁面鏈接的形式嵌入到小組的網頁之中并檢測各個網頁之間的銜接以及對其進行修改和完善。
????????3、在表格中添加一些屬性以及對相應的文字進行修飾，讓自己的簡歷更加的美觀。
????????4、定期討論并總結項目制作過程中出現的問題，對出現的問題進行歸納總結。
????????5、完成最終的項目以及各自的實驗報告，最后進行實驗報告排版的檢測并提交。
3、實驗結果與分析
????????1、在實驗一視頻網頁的基礎之上建立一個鏈接，通過鏈接實現其他頁面的訪問，小組簡歷鏈接端口界面如圖5-1：
圖5-1?小組簡歷鏈接端口界面
????????2、點擊鏈接端口后進入小組簡歷的網頁，在頁面中通過CSS來渲染頁面，并將圖片作為頁面的背景，在頁面的不同位置設計對應的標題和語句樣式并在頁面內設計區塊和布局標簽，小組簡歷開始界面如圖5-2：
圖5-2?小組簡歷開始界面
????????3、進入小組簡歷的首頁后在頁面最底部設計了個人的詳細簡歷的鏈接，對應的簡歷也是通過html單獨實現的一個頁面，在最下端通過標簽<a></a>將其進行鏈接，點擊后實現對應頁面的切換，個人簡歷鏈接端口界面如圖5-3：
圖5-3?個人簡歷鏈接端口界面
????????4、在團隊簡歷模塊內設計另一個切換頁面，使之點擊該頁面后響應自己所設計的小組簡歷頁面，在小組簡歷頁面通過段落標簽進行小組成員分工的介紹，并將各自的證件照以圖片的形式進行插入，通過盒子對內容進行封裝，團隊簡歷分工界面如圖5-4：
圖5-4?團隊簡歷分工界面
????????5、通過對數據的擬定化統計設計一個水平條形圖，展現小組內部的整體實力，使用盒子對相關的內容進行封裝，讓其頁面更加的規整合理，團隊信息數據分析界面如圖5-5：
圖5-5?團隊信息數據分析界面
????????6、點擊頁面最下方的個人鏈接端口后即可查看個人詳細的相關詳細，使用邊框表單對各個模塊內容進行分割，并設計對應的文字范圍，讓其可以在對應的小表格里合理的進行容納，同時設計不同的背景顏色來區分各個屬性模塊，個人簡歷基本信息界面如圖5-6：
圖5-6?個人簡歷基本信息界面
????????7、使用一些標簽屬性對相關的字體和表單屬性進行設置，使之讓自己的個人簡歷更加的豐滿，個人簡歷詳細信息界面如圖5-7：
圖5-7?個人簡歷詳細信息界面
????????8、在精美圖片模塊內設計另一個切換頁面，使之點擊該頁面后響應自己所設計的小組日常工作圖片頁面，在頁面通過復選框進行各個階段圖片頁面的切換，并通過單選框使其讓鼠標移動到圖片上發生事件響應，進而展現各個圖片的內容，精美圖片小組實戰界面如圖5-8：
圖5-8?精美圖片小組實戰界面
????????9、在聯系方式模塊內設計另一個切換頁面，使之點擊該頁面后響應自己所設計的頁面，在頁面內設計對應的文本框，讓其用戶進行相關信息的輸入，并通過按鈕“提交信息并退出”完成信息的提交，聯系方式信息提交界面如圖5-9：
圖5-9?聯系方式信息提交界面
????????10、通過點擊對應的文本框進行輸入后會保存之前在文本框中輸入的內容，只需要以下拉列表框的形式進行輸入內容的選擇即可完成信息的輸入，聯系方式列表輸入界面如圖5-10：
圖5-10?聯系方式列表輸入界面
4、項目任務評價
????????1、組內成員之間的交流相比于之前有所增加，但是總體來說依然交流較少，導致對于項目的整體進度把握的不夠充分，進而導致整體頁面的布局過于零散，致使其他組員不能夠很好的把控自己模塊的布局位置，從而出現合并代碼后頁面嵌套或者擁擠導致換行的現象。
????????2、由于對HTML語言掌握力度不夠導致經常會出現一些編譯錯誤，特別是在使用HTML語言進行編寫時會出現標簽沒有封閉也可以運行的情況，最后導致頁面的排版出現問題，在尋找錯誤源頭的過程中花費了一定的時間。
????????3、組內成員可以認真的完成自己負責的模塊，并能夠準時的提交自己完成的代碼，使我們在進行代碼合成的過程中節約了一定的時間，為我們進行頁面預覽和發現問題提供了充足的時間。
????????4、每次完成代碼迭代更新后對應模塊出現的問題大家都可以積極的進行解決，對于解決不了的問題也會在群里進行及時的反饋，進而組員之間相互合作、共同解決發現的問題，不但提高了對問題的解決效率，而且還加深了我們每一個人處理問題的能力。
????????5、每一個組員在編寫代碼的過程中都可以對自己的代碼進行注釋，每一期合成完畢后的代碼組內的成員都可以看懂其他組員所編寫的代碼，這樣組內的每一位成員都可以詳細的了解我們整個項目的運行，并且在運行后可以比較快速的定位到出現錯誤的地方。
????????6、雖然在項目制作的過程中存在一定的問題，但是我們都會進行及時的調整，總的來說優點是大于缺點的，我們會繼續保持好的的一方面，及時對缺點和不足進行改正和完善，讓小組成員和自己的項目更加完善。
四、遇到的問題和解決方法
????????1、代碼問題：在使用標簽屬性<a href=”page.html”>添加鏈接時點擊鏈接后頁面沒有反應。
解決方法：查看代碼后發現是因為將屬性名稱href寫成了“herf”導致的，將其改正后點擊對應模塊可以正常實現對應的頁面鏈接功能。
????????2、文件問題：HTML代碼編寫完成后點擊運行無法成功實現網頁展示。
解決方法：由于編寫完代碼后保存的文件格式為.txt文本格式，編譯器無法對.txt文件進行運行，將對應文本的后綴改為.html后進行運行，頁面可以正常進行顯示。
????????3、運行問題：編寫的代碼在運行過程中出現了亂碼現象。
解決方法：鼠標右擊->Run As->Run Configurations->Common->在Other后填寫gbk然后點擊Run進行運行后中文可以正常輸出。
????????4、運行問題：代碼編寫完成后進行運行發現網頁無法進行頁面加載，顯示頁面請求失敗。
解決方法：由于沒有在Tomcat服務器上進行運行所導致，先運行服務器然后再運行代碼后頁面可以正常加載。
????????5、運行問題：啟動Tomcat的過程中，有時出現端口被占用的情況。
解決方法：對服務器進行配置，將服務器運行的端口號改為別的端口即可（找到Tomcat安裝目錄下的文件“/conf/server.xml”->使用記事本或寫字板打開文件，在文件中找到“Connector port=8080”->將“8080”改為“8888”，然后保存配置文件->重啟Tomcat服務器）。
????????6、代碼問題：在編寫網頁的過程中使用<BR>換行標簽后空出的位置過小。
解決方法：在需要空行的位置使用多個<BR>換行標簽即可實現位置的多行空行。
????????7、代碼問題：想要使網頁中的圖片居中，但是使用align=“center”進行居中后沒有反應。
解決方法：在需要居中的<img>標簽中加入屬性style=“text-align：center”即可實現圖片的頁面居中。
????????8、代碼問題：想要在網頁中加入一條紅色的直線作為各個頁面的分割線。
解決方法：使用水平線段標簽<hr>繪制直線，可以通過size設置線段的長度，通過width設置線段的寬度，通過align設置線段在頁面當中的位置（有參數left、center、right），通過noshade設置線段是否存在屬性值，通過color設置線段的顏色。
????????9、代碼問題：想要對頁面中的字體進行屬性設置，使用<hn>屬性標簽后字體依然不能夠達到自己需要的大小。
解決方法：使用文字設計標簽<font></font>對段落內容字體進行相關的屬性設置，可以通過size來設置字體的大小，通過face來設置字體的類型，使用color來設置字體的顏色。
????????10、代碼問題：使用標簽<frameset></frameset>中的屬性cols無法對網頁進行橫向分割。
解決方法：在標簽<frameset></frameset>中橫向分割網頁的屬性是rows，而cols是用來縱向分割網頁的，改正后功能正常。
????????11、代碼問題：使用HTML語言設計頁面時點擊鏈接后直接在本頁面更新了，但是需要的效果為點擊鏈接后重新打開一個頁面并更新。
解決方法：在標簽<a></a>中加入參數target并設置為”_blank”后即可實現在另外的頁面進行加載的功能。
五、實驗總結
????????1、在使用單引號和雙引號的時候要特別注意，輸出單個字符時可以使用單引號，如果同時輸出多個字符時只能使用雙引號進行輸出，不然會報錯。
????????2、在對筆記本電腦進行配置時盡量不要使用C盤。
????????3、HTML（HyperText Mark-up Language）是超文本標記語言，是構成網頁文檔的主要語言。一般情況下網頁上的文字、圖形、動畫、聲音、表格、鏈接等元素都是通過HTML語言實現的。
????????4、HTML語言中使用的標簽實際上就是采用一系列指令符號來控制輸出的效果。
????????5、HTML有兩種類型的標簽，其中一類是單標簽，只需要單獨的一組符號就可以表示完整的功能；另一類是雙標簽，標簽所圍繞的內容就是標簽作用的作用域。
????????6、HTML語言對于大、小寫是不敏感的。
????????7、HTML中列表標簽分為兩種，其中一種是有序列表標簽<ol></ol>，另一種是無序列表標簽<ul></ul>。
????????8、合并單元格必須對<td>標簽中的rowspan、colspan進行設置，屬性值都為整數，默認為1，表示沒有合并。
????????9、表單最基本的標簽是<input>標簽，該標簽可以用來顯示輸入框和按鈕等表單元素，它的屬性type決定了表單元素的類型。
????????10、標簽<frame></frame>中的屬性noresize表示該框架不可被用戶改變大小。
