Web前端開發(fā)（HTML5+CSS3+JavaScript） 實(shí)驗(yàn)報(bào)告 嚴(yán)健武 實(shí)驗(yàn)1-8 格式化文檔 -綜合應(yīng)用

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