Web前端開發(fā)（HTML5+CSS3+JavaScript） 實驗報告 嚴健武 實驗1-8 格式化文檔 -綜合應用

2/6XXX學院實驗報告成績專業(yè)班級實驗日期姓名學號實驗名稱格式化文檔指導教師（報告內(nèi)容包括實驗目的、實驗設備及器材、實驗步驟、程序框圖、代碼、運行結果、實驗小結等）實驗要求按給出的素材，實現(xiàn)圖1.1所示的效果，具體要求如下：標題：使用標題3，文本居中；段落文本：顏色使用#999，文本居中；段落文本：其中,“2023”為粗體，6號大?。弧?158萬”為紅色、6號，其中“萬”字為上標；圖片和段落：文字環(huán)繞圖片；單擊圖片在新窗口打開圖片,鼠標懸停在圖片時，顯示提示信息：“在新窗口打開圖片”；段落中所有括號內(nèi)的文本使用紅色，其他文本顏色為#666。圖1.1文檔排版效果2.選做：按給出的素材，實現(xiàn)如圖1.2所示的效果，具體要求如下：（1）使用無序列表。（2）列表項中的內(nèi)容依次為：1.圖片：寬度為100px；2.段落:商品名稱加粗；3.段落：其中“原價...”的內(nèi)容為灰色并加刪除線；“當前價”的內(nèi)容為紅色、加粗。（3）單擊圖片時在新窗口打開原圖。圖1.2商品列表效果二、實驗目的1.掌握開發(fā)環(huán)境的使用2.熟悉文本格式化標記、標題、段落、圖片和字體等標記使用。3.熟悉列表和超鏈接的使用。三、實驗設備Windows7/10、32/64操作系統(tǒng);安裝VSCode開發(fā)環(huán)境;安裝FireFox/Chrome瀏覽器的計算機。四、實驗步驟1.打開VScode，新建html文件；2.編寫代碼；3.在瀏覽器運行、調(diào)試。五、程序框架無六、代碼(粘帖至此行)七、運行結果(截圖)八、實驗小結(收獲或存在問題、改進措施、教學建議等)XXX學院實驗報告成績專業(yè)班級實驗日期姓名學號實驗名稱表格與表單指導教師（報告內(nèi)容包括實驗目的、實驗設備及器材、實驗步驟、程序框圖、代碼、運行結果、實驗小結等）實驗要求按給出的素材，制作如圖2.1所示的效果的注冊表單，具體要求如下：按圖示內(nèi)容制作表格，設置合適的屬性，列寬自定義。添加表單元素，根據(jù)你對表單、表單元素及其屬性的掌握程度，為表單元素添加必要的屬性。圖2.1注冊表單二、實驗目的1.熟悉表格標記，掌握簡單的行列合并操作。2.熟悉常用的表單元素及其屬性的使用。3.能使用表格定位來制作良好格式的表單。三、實驗設備Windows7/10、32/64操作系統(tǒng);安裝VSCode開發(fā)環(huán)境;安裝FireFox/Chrome瀏覽器的計算機。四、實驗步驟1.打開VScode，新建html文件；2.編寫代碼；3.在瀏覽器運行、調(diào)試。五、程序框架無六、代碼(粘帖至此行)七、運行結果(截圖)八、實驗小結(收獲或存在問題、改進措施、教學建議等)XXX學院實驗報告成績專業(yè)班級實驗日期姓名學號實驗名稱位置屬性應用指導教師（報告內(nèi)容包括實驗目的、實驗設備及器材、實驗步驟、程序框圖、代碼、運行結果、實驗小結等）實驗要求按給出的素材，使用位置、定位屬性以及背景樣式實現(xiàn)如圖1.1所示的搜索欄效果，元素的具體尺寸自定義。圖1.1搜索欄可以參考圖1.2所示的結構來實現(xiàn)。圖1.2搜索欄結構圖二、實驗目的1.掌握相對位置和絕對位置的具體應用。2.理解盒子模型。3.熟悉背景樣式的使用。三、實驗設備Windows7/10、32/64操作系統(tǒng);安裝VSCode開發(fā)環(huán)境;安裝FireFox/Chrome瀏覽器的計算機。四、實驗步驟1.打開VScode，新建html文件；2.編寫代碼；3.在瀏覽器運行、調(diào)試。五、程序框架無六、代碼(粘帖至此行)七、運行結果(截圖)八、實驗小結(收獲或存在問題、改進措施、教學建議等)XXX學院實驗報告成績專業(yè)班級實驗日期姓名學號實驗名稱JavaScript基礎和DOM應用指導教師（報告內(nèi)容包括實驗目的、實驗設備及器材、實驗步驟、程序框圖、代碼、運行結果、實驗小結等）實驗要求1編寫代碼在頁面顯示如下圖所示的九九乘法表.設計一個簡易計算器：在文本框中輸入兩個數(shù)，實現(xiàn)加、減、乘、除運算，結果顯示在另外一個只讀文本框中。注意，界面自己定義，用戶可以輸入并執(zhí)行所選擇的計算，如果輸入的是非數(shù)字，使用合適的方法提示用戶。需要提交文檔和項目文件（壓縮包）。二、實驗目的1.熟悉JavaScript基本語法。2.掌握分支結構和循環(huán)結構的使用。3.掌握查詢元素的方法和使用表單元素實現(xiàn)與用戶的交互。三、實驗設備Windows7/10、32/64操作系統(tǒng);安裝VSCode開發(fā)環(huán)境;安裝FireFox/Chrome瀏覽器的計算機。四、實驗步驟1.打開VScode，新建html文件；2.編寫代碼；3.在瀏覽器運行、調(diào)試。五、代碼(粘帖至此行)六、運行結果(截圖)七、實驗小結(收獲或存在問題、改進措施、教學建議等)XXX學院實驗報告成績專業(yè)班級實驗日期姓名學號實驗名稱彈性布局指導教師（報告內(nèi)容包括實驗目的、實驗設備及器材、實驗步驟、程序框圖、代碼、運行結果、實驗小結等）實驗要求按給出的素材，使用彈性布局實現(xiàn)如下圖的商品列表展示效果。參見上圖，具體要求如下：設置合適彈性容器的寬度，使每一行包含4個商品項。商品信息（除放入購物車按鈕外）使用圖片和兩個段落元素，按鈕呈現(xiàn)平面按鈕樣式（無邊框）每個商品項有一定的外邊距和內(nèi)邊距；有合適的陰影和圓角，鼠標懸停時放大1.02倍。整個商品列表在容器中居中對齊。需要提交html文件二、實驗目的1.熟悉彈性布局中容器和項目的相關屬性。2.能結合其他樣式，將彈性布局應用于實際開發(fā)中。三、實驗設備Windows7/10、32/64操作系統(tǒng);安裝VSCode開發(fā)環(huán)境;安裝FireFox/Chrome瀏覽器的計算機。四、實驗步驟1.打開VScode，新建html文件；2.編寫代碼；3.在瀏覽器運行、調(diào)試。五、程序框架無六、代碼(粘帖至此行)七、運行結果(截圖)八、實驗小結(收獲或存在問題、改進措施、教學建議等)XXX學院實驗報告成績專業(yè)班級實驗日期姓名學號實驗名稱綜合應用指導教師（報告內(nèi)容包括實驗目的、實驗設備及器材、實驗步驟、程序框圖、代碼、運行結果、實驗小結等）實驗要求給出HTML文檔的內(nèi)容index.html，其運行效果如圖8.1所示。要求編寫代碼，在單擊“提交數(shù)據(jù)”按鈕時，獲取表單數(shù)據(jù)并暫存在本地，然后重定向到顯示數(shù)據(jù)的頁面。在顯示頁面result.html中，讀取暫存的數(shù)據(jù)并展示在頁面中，如圖8.2所示；單擊“返回注冊”鏈接時，重定向到注冊頁面需要提交文檔和項目文件（壓縮包）。提示：數(shù)據(jù)保存可以使用sessionStorage對象保存數(shù)據(jù)的格式可以參考如下對象結構：varuserData={user:'',pwd:'',city:'',sex:'',hobbys:[]}將JS對象轉換為字符串的方法為：JSON.stringify();將字符串還原為對象的方法為：JSON.parse()圖8.1注冊頁面index.html圖8.2結果頁面result.html二、實驗目的1.熟悉HTML常用表單元素的使用。2.掌握使用JavaScript來查詢和獲取表單元素屬性的方法。3.掌握存儲對