HTML5實(shí)訓(xùn)報(bào)告原創(chuàng)實(shí)訓(xùn)總結(jié)

1、專業(yè)實(shí)訓(xùn)報(bào)告學(xué)生姓名：* * *學(xué)號(hào)：20130341100專業(yè)：電子信息科學(xué)與技術(shù)班級(jí)：13級(jí)電科本1班指導(dǎo)教師：* * *2017年9月15日專業(yè)實(shí)訓(xùn)報(bào)告實(shí)訓(xùn)單位：物理與電子工程學(xué)院地點(diǎn):實(shí)驗(yàn)樓信號(hào)與系統(tǒng)實(shí)驗(yàn)室實(shí)訓(xùn)時(shí)間：2017、9、52017、9、11指導(dǎo)教師:* * *1、實(shí)訓(xùn)目的及要求:（根據(jù)指導(dǎo)教師在教學(xué)過(guò)程中給出的具體要求填寫(xiě)）通過(guò)本次實(shí)訓(xùn)，旨在以親身參與各類項(xiàng)目的實(shí)際編寫(xiě)工作，來(lái)了解新興的 HTML語(yǔ)言的發(fā)展歷程,并了解與掌握這一新技術(shù)在IT行業(yè)中的具體應(yīng)用范圍與 使用方法。在進(jìn)行對(duì)H5語(yǔ)言進(jìn)行初步了解后，通過(guò)實(shí)訓(xùn)課程的安排，逐步學(xué)習(xí)基 礎(chǔ)的H5語(yǔ)言的指令代碼，運(yùn)用所學(xué)習(xí)的指令

2、代碼進(jìn)行更深入的效果設(shè)計(jì)，如定位、浮動(dòng)、3D動(dòng)畫(huà)設(shè)計(jì)、輪播圖等初級(jí)的 H5設(shè)計(jì)，最后通過(guò)運(yùn)用所有學(xué)習(xí)的指 令操作完成總體的項(xiàng)目設(shè)計(jì)，從而對(duì)H5語(yǔ)言展開(kāi)比較全面的了解與具備應(yīng)用能 力。要求實(shí)訓(xùn)期間認(rèn)真學(xué)習(xí) H5的各種指令操作，認(rèn)真完成作業(yè)并書(shū)寫(xiě)日?qǐng)?bào)，不得 遲到、早退、曠課；若有問(wèn)題需及時(shí)與校負(fù)責(zé)老師與項(xiàng)目工程師溝通聯(lián)系。2、實(shí)訓(xùn)的流程及內(nèi)容（包括前期準(zhǔn)備及實(shí)訓(xùn)過(guò)程）實(shí)訓(xùn)開(kāi)始前，由承擔(dān)實(shí)訓(xùn)的主要負(fù)責(zé)人與實(shí)訓(xùn)老師 ，即藍(lán)鷗公司老師楊成 龍對(duì)這次實(shí)訓(xùn)做了總體概述，并說(shuō)明了本次實(shí)訓(xùn)所需要的 sublime軟件、谷歌瀏 覽器；展示了預(yù)期需要完成的設(shè)計(jì)效果，并說(shuō)明了實(shí)訓(xùn)期間的各項(xiàng)要求。實(shí)訓(xùn)的具體流程為：第一

3、天，總體介紹實(shí)訓(xùn)，主要介紹了 H5語(yǔ)言的發(fā)展歷 程,說(shuō)明了本次實(shí)訓(xùn)的任務(wù)，介紹了所使用的sublime軟件的操作方法與相關(guān)插 件的安裝方法。第二天，主要學(xué)習(xí)了在sublime軟件中的固定代碼格式，主要有頭 文件名、網(wǎng)頁(yè)標(biāo)題、 <style>v/style> 格式，并學(xué)習(xí)了一些基礎(chǔ)的設(shè)置，女口添加顏 色的代碼操作。第三天，學(xué)習(xí)了浮動(dòng)指令、添加圖片的操作。第四天 ，學(xué)習(xí)了 JC 語(yǔ)言,CSS內(nèi)聯(lián)樣式的代碼書(shū)寫(xiě)。第五天，學(xué)習(xí)了 CSS外聯(lián)樣式的代碼書(shū)寫(xiě)，并學(xué) 習(xí)3D動(dòng)畫(huà)的代碼書(shū)寫(xiě)，學(xué)習(xí)了輪播動(dòng)畫(huà)的設(shè)計(jì)，并對(duì)所學(xué)的各種代碼操作加以總 結(jié)復(fù)習(xí)。第六天，學(xué)習(xí)了當(dāng)當(dāng)優(yōu)品項(xiàng)目的設(shè)計(jì)與代碼書(shū)寫(xiě)

4、，并開(kāi)始設(shè)計(jì)答辯項(xiàng)目。第七天,完成自己設(shè)計(jì)的項(xiàng)目，并進(jìn)行項(xiàng)目答辯，實(shí)訓(xùn)結(jié)束3、實(shí)訓(xùn)過(guò)程中的相關(guān)問(wèn)題與解決方法（如實(shí)填寫(xiě)）在本次實(shí)訓(xùn)中,主要的問(wèn)題集中在對(duì)JC語(yǔ)言的學(xué)習(xí)與對(duì)CSS內(nèi)聯(lián)、外聯(lián)樣 式的學(xué)習(xí)與理解上。由于JC語(yǔ)言就是一種偏向于腳本語(yǔ)言的代碼書(shū)寫(xiě) ,與C語(yǔ)言有相似之處但 就是又有不同之處，這就使得在理解過(guò)程需要花費(fèi)精力去想明白其原理，有些較 難的原理、想不明白的原理就及時(shí)與老師、同學(xué)進(jìn)行溝通與交流 ，力爭(zhēng)在最短時(shí) 間里解決問(wèn)題,不留下遺留問(wèn)題。除此之外，CSS外聯(lián)的學(xué)習(xí)就是一個(gè)重點(diǎn),也就是一個(gè)很大的難點(diǎn)。CSS外 聯(lián)就是指在書(shū)寫(xiě)主程序代碼時(shí)，某一些指令需要單獨(dú)使用JC語(yǔ)言生成腳本代碼，

5、然后再在主程序中調(diào)用。出現(xiàn)的問(wèn)題主要表現(xiàn)在一就是對(duì) JC語(yǔ)言本身學(xué)習(xí)的不 就是很充分，再加上涉及到兩個(gè)項(xiàng)目間的調(diào)用，使得經(jīng)常出現(xiàn)代碼錯(cuò)誤，且難以自 行察覺(jué)。解決這些問(wèn)題的主要方法就就是，首先要尋求同組人的幫助，檢查錯(cuò)誤， 尤其就是首先要解決基礎(chǔ)性的錯(cuò)誤，如果仍然無(wú)法解決，則需要向老師尋求幫助。在CSS內(nèi)聯(lián)的學(xué)習(xí)上,出現(xiàn)的問(wèn)題大體上與外聯(lián)的問(wèn)題相同。所謂 CSS內(nèi) 聯(lián)樣式，就就是在主程序內(nèi)部書(shū)寫(xiě)的某種功能性代碼，并對(duì)其加以調(diào)用。出現(xiàn)的問(wèn) 題不就是很多，但就是存在。最后，最主要的問(wèn)題集中在學(xué)習(xí)3D動(dòng)畫(huà)的過(guò)程中。在這一模塊的學(xué)習(xí)時(shí)， 主要涉及到首先要想明白所設(shè)計(jì)的動(dòng)畫(huà)效果就是什么。由于涉及到3維空間

6、，也就就是涉及到繞著那個(gè)軸旋轉(zhuǎn)的問(wèn)題，稍有代碼錯(cuò)誤，或者旋轉(zhuǎn)軸出錯(cuò)都不能達(dá) 到預(yù)期效果。問(wèn)題主要表現(xiàn)為，對(duì)代碼指令的不熟悉導(dǎo)致動(dòng)畫(huà)錯(cuò)誤，對(duì)要設(shè)計(jì)的動(dòng) 畫(huà)效果不清晰導(dǎo)致代碼使用錯(cuò)誤，基本的動(dòng)畫(huà)設(shè)計(jì)與代碼指令銜接不同步導(dǎo)致動(dòng) 畫(huà)出現(xiàn)的效果不就是預(yù)期效果等問(wèn)題。一般出現(xiàn)這些問(wèn)題時(shí)，由于涉及到需要有 專業(yè)知識(shí)才能解決，基本上都就是向老師尋求幫助，根據(jù)老師的講解先自行更改， 仍有錯(cuò)誤的，則讓老師幫助修改代碼主程序，并找到出現(xiàn)錯(cuò)誤的原因。4、實(shí)訓(xùn)總結(jié)(包括心得體會(huì)與后期學(xué)習(xí)計(jì)劃)為期七天的實(shí)訓(xùn)課，不經(jīng)意間就結(jié)束了，雖然只就是短短的七天實(shí)訓(xùn)，但就是 卻收獲很多，學(xué)習(xí)到的關(guān)于 HTML5語(yǔ)言的知識(shí)也比較多。首

7、先，我想先來(lái)說(shuō)說(shuō)這次實(shí)訓(xùn)的主要學(xué)習(xí)內(nèi)容 ，即HTML5語(yǔ)言。HTML指的 就是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Lan guage)標(biāo)記語(yǔ)言就是一套標(biāo)記標(biāo)簽 (markup tag),HTML使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)。 HTML5區(qū)別于 HTML的標(biāo)準(zhǔn)， 基于全新的規(guī)則手冊(cè)，提供了一些新的元素與屬性，在web技術(shù)發(fā)展的過(guò)程中成為 新的里程碑。HTML5被推廣用于 Web平臺(tái)游戲開(kāi)發(fā)，及手機(jī)移動(dòng)領(lǐng)域，從市場(chǎng)來(lái) 瞧,無(wú)論就是桌面應(yīng)用還就是移動(dòng)應(yīng)用 ，HTML5 都就是當(dāng)下 Web技術(shù)中最炙手可 熱的新寵，就是創(chuàng)新的主旋律，在不久的時(shí)間里一定會(huì)大有作為。我想這也就是這 次實(shí)訓(xùn)課的主

8、要意義之一。因此，從我個(gè)人的角度上，我也很重視這次的實(shí)訓(xùn)課程 的學(xué)習(xí)。在整個(gè)實(shí)訓(xùn)課程的安排上，簡(jiǎn)要的可以概括為在七天的時(shí)間中，整體對(duì)H5語(yǔ) 言的發(fā)展與前景有所了解，然后進(jìn)行基礎(chǔ)知識(shí)的學(xué)習(xí)，最后進(jìn)行項(xiàng)目的設(shè)計(jì)與答 辯。主要內(nèi)容就是第一天，總體介紹實(shí)訓(xùn)，H5語(yǔ)言的發(fā)展歷程，說(shuō)明了本次實(shí)訓(xùn)的 任務(wù)，介紹了所用的 sublime 軟件的操作與相關(guān)的插件、安裝。第二天 ，主要學(xué)習(xí) 了在 sublime軟件中的固定代碼格式，主要有頭文件名，網(wǎng)頁(yè)標(biāo)題,<style>v/style>格 式,并學(xué)習(xí)了一些基礎(chǔ)的設(shè)置的，添加顏色的代碼操作。第三天，學(xué)習(xí)了浮動(dòng)，添加圖 片的操作。第四天，學(xué)習(xí)了 J

9、C語(yǔ)言,css內(nèi)聯(lián)樣式的代碼書(shū)寫(xiě)。第五天，學(xué)習(xí)了 css 外聯(lián)樣式的代碼書(shū)寫(xiě)，并學(xué)習(xí)3D動(dòng)畫(huà)的代碼書(shū)寫(xiě)，學(xué)習(xí)了輪播動(dòng)畫(huà)的設(shè)計(jì)，并對(duì)所 學(xué)的各種代碼操作加以總結(jié)復(fù)習(xí)。第六天 ，學(xué)習(xí)了當(dāng)當(dāng)優(yōu)品項(xiàng)目的設(shè)計(jì)與代碼書(shū) 寫(xiě)，并開(kāi)始設(shè)計(jì)答辯項(xiàng)目。第七天，進(jìn)行對(duì)自己設(shè)計(jì)的項(xiàng)目，進(jìn)行答辯，實(shí)訓(xùn)結(jié)束。下 面來(lái)談?wù)勎以谶@次實(shí)訓(xùn)中的收獲與感受。第一點(diǎn)，學(xué)習(xí)到了 HTML5語(yǔ)言的設(shè)計(jì)與代碼指令自然不必再贅述，但更重要 的就是鍛煉了思維能力，培養(yǎng)了設(shè)計(jì)創(chuàng)新的能力。在整個(gè) H5學(xué)習(xí)的過(guò)程中，代碼 的運(yùn)用、基礎(chǔ)知識(shí)的學(xué)習(xí)可以說(shuō)只就是作為技術(shù)的基礎(chǔ)層面，而要想真正完成一個(gè)項(xiàng)目，更多的就是需要思維能力的鍛煉與項(xiàng)目的創(chuàng)新。就學(xué)習(xí)代

10、碼而言，3D動(dòng)畫(huà) 的學(xué)習(xí)，就十分需要空間想象力與思維能力 ，不怕這種能力的不足，怕的就是不去學(xué)習(xí)，不去培養(yǎng)。因?yàn)槿绻麤](méi)有這種能力，或者比較薄弱，一方面難以想出新的項(xiàng)目 的構(gòu)思，另一方面無(wú)法想出動(dòng)畫(huà)的翻轉(zhuǎn)或者各種效果的指令代碼的書(shū)寫(xiě)。所有的 這些都貫穿于H5的實(shí)訓(xùn)過(guò)程中。再具體的將來(lái)，就就是對(duì)于所學(xué)的每個(gè)指令，并 非就是記憶住其書(shū)寫(xiě)的格式，而就是需要我們加入自己對(duì)每個(gè)代碼感悟與認(rèn)識(shí)。 怎樣的情況下去應(yīng)用，如何用，使用時(shí)的技巧，這些都就是重要的對(duì)于自己能力的 鍛煉。另外，結(jié)合于其中的，還有對(duì)于獨(dú)立思考的能力的培養(yǎng)。這一點(diǎn)就是顯而易 見(jiàn)的。無(wú)論就是對(duì)于一個(gè)新的項(xiàng)目的編寫(xiě)，還就是對(duì)于學(xué)習(xí)每一條單獨(dú)的指

11、令，老 師與同學(xué)所能幫助的就是引導(dǎo)與解決難題的作用，而要想真正做到自己學(xué)會(huì)指令，則離不開(kāi)獨(dú)立思考，獨(dú)立學(xué)習(xí)的過(guò)程與環(huán)節(jié)。第二點(diǎn)，通過(guò)這次實(shí)訓(xùn)，使得自己對(duì)IT行業(yè)有了進(jìn)一步的了解。在實(shí)訓(xùn)的過(guò)程 中，老師也對(duì)IT行業(yè)與相關(guān)的就業(yè)前景進(jìn)行了諸多敘述，對(duì)于自己與同學(xué)們有很 大的幫助。HTML5在網(wǎng)頁(yè)開(kāi)發(fā)上，賦予網(wǎng)頁(yè)更好的意義與結(jié)構(gòu)，HTML5手機(jī)應(yīng)用 的最大優(yōu)勢(shì)就就是可以在網(wǎng)頁(yè)上直接調(diào)試與修改。因此在HTML5中的新的標(biāo)簽，將有助于開(kāi)發(fā)人員定義重要的內(nèi)容，可以給站點(diǎn)帶來(lái)更多的多媒體元素（視頻與音 頻），可以很好的替代FLASH與Silverlight并且當(dāng)涉及到網(wǎng)站的抓取與索引的時(shí)候 , 對(duì)于SEO很

12、友好。對(duì)于這些優(yōu)勢(shì)性的，幾乎也都有相關(guān)的工作崗位。由此可見(jiàn)在 未來(lái)的一段時(shí)間里，伴隨著互聯(lián)網(wǎng)的不斷普及與優(yōu)化，H5的前端開(kāi)發(fā)的相關(guān)崗位 也必將就是很火熱的。這也就是這次實(shí)訓(xùn)的另一意義所在，她對(duì)于就業(yè)就是很有幫助的。第三點(diǎn)，實(shí)訓(xùn)課將理論與實(shí)踐相結(jié)合，從直觀與整體上帶來(lái)了很好的效果。在 大學(xué)本科的學(xué)習(xí)過(guò)程中，C語(yǔ)言的學(xué)習(xí)可以說(shuō)就是不可或缺的、必不可少的。但 就是就我個(gè)人而言，在學(xué)習(xí)C語(yǔ)言時(shí)，只就是為了學(xué)習(xí)其語(yǔ)法結(jié)構(gòu)而學(xué)習(xí)語(yǔ)言，只 就是在應(yīng)試的層面上對(duì)其理解，記憶,編程。但就是這次的 HTML5的實(shí)訓(xùn)課卻完 全就是不同的。最根本之處就就是通過(guò)在 sublime的編寫(xiě)的代碼可以在瀏覽器中 直接以直觀的

13、音頻、視頻的形勢(shì)表現(xiàn)出來(lái) ，給人最直觀的感受。這對(duì)于激發(fā)學(xué)習(xí) 興趣，激發(fā)探索學(xué)習(xí)的精神就是很有影響的。例如在學(xué)習(xí)輪播項(xiàng)目時(shí)，就就是將事先準(zhǔn)備好的素材，包括音頻與圖片，放到網(wǎng)頁(yè)中，讓其開(kāi)始的時(shí)候以十張圖片循環(huán) 旋轉(zhuǎn)的形勢(shì)展現(xiàn)，當(dāng)鼠標(biāo)停留時(shí)，停留在那張圖片上會(huì)有視頻播放。這就就是輪播 效果，但就是在代碼編寫(xiě)的過(guò)程中國(guó)，還就是要比只管瞧起來(lái)有所繁瑣的。它主要 涉及到圖片的插入，視頻的插入的代碼書(shū)寫(xiě)，輪播動(dòng)作的大代碼的書(shū)寫(xiě)，調(diào)整輪播 效果，調(diào)整視頻、圖像的位置格式等問(wèn)題。盡管如此，在書(shū)寫(xiě)完所有指令之后，再對(duì)整體項(xiàng)目進(jìn)項(xiàng)調(diào)試的時(shí)候，某個(gè)參數(shù)的設(shè)置都會(huì)影響不同的展現(xiàn)效果。對(duì)于理想 效果的追求，激勵(lì)著不斷調(diào)

14、試程序，不斷嘗試。這就就是H5語(yǔ)言的激勵(lì)作用所在。 第四點(diǎn)，這次實(shí)訓(xùn)加強(qiáng)了自己的團(tuán)隊(duì)合作的意識(shí)、團(tuán)結(jié)協(xié)作的能力。這一點(diǎn) 上我就是感受很深的。在最后兩天的項(xiàng)目設(shè)計(jì)上，要求以四個(gè)人為一個(gè)小組進(jìn)行項(xiàng)目設(shè)計(jì)，從素材，動(dòng)畫(huà)效果，講解展示都會(huì)給出評(píng)分。并且就是要求在一天內(nèi)完成 項(xiàng)目設(shè)計(jì)，第二天進(jìn)行項(xiàng)目答辯。誠(chéng)實(shí)的將在剛剛聽(tīng)到任務(wù)時(shí)感覺(jué)就是不可能的，冷靜思考之后，運(yùn)用到這幾天所學(xué)的指令進(jìn)行一個(gè)簡(jiǎn)單的項(xiàng)目設(shè)計(jì)還就是可以的，但就是，時(shí)間緊任務(wù)重，技術(shù)有限。因此，在四個(gè)人一組的小組中，大家開(kāi)始分工合作, 各自負(fù)責(zé)不同的任務(wù)部分。代碼編寫(xiě)與調(diào)試 ，素材的收集與整理，每個(gè)人的工作都 進(jìn)行細(xì)化，再細(xì)化，定時(shí)保量的去完成

15、。這樣的結(jié)果就是，的確提高了工作的效率。 原本制定的要到第二天早晨才能完成的工作，在課程設(shè)計(jì)的第一天就完成了。我 想這就展示出了合作的重要性。如果所有的任務(wù)都去一個(gè)人完成，那么在這么短的時(shí)間內(nèi)，又要保證一定質(zhì)量的完成任務(wù)，絕對(duì)就是不可能的。此外，有合作,就難免有分歧。這次的實(shí)訓(xùn)課的項(xiàng)目設(shè)計(jì)環(huán)節(jié)也絕對(duì)就是對(duì)我 個(gè)人溝通、交流能力的鍛煉。一開(kāi)始，在確定項(xiàng)目的設(shè)計(jì)上，就出現(xiàn)了兩種不同的 觀點(diǎn)。一種，整體畫(huà)面分為兩部分，上方一個(gè)輪播，下方三張靜態(tài)效果展示，另一種方 案就是將老師給的模板進(jìn)行簡(jiǎn)單改造，力求按時(shí)完成任務(wù)。這兩種方案都就是具 有可行性的，而且有都有各自的有點(diǎn)與缺點(diǎn)。很明顯第一種方案，可以很好地給觀眾以視覺(jué)呈現(xiàn)，但就是在技術(shù)上要難于第二種方案 ；而第二種方案則一定能夠保證 在要求的時(shí)間里完成任務(wù)，但就是很明顯的就是在視覺(jué)效果上并不好。為此 ，對(duì)于 這兩種方案大家進(jìn)行了充分的討論，最終決定對(duì)第一種方案進(jìn)行改造，力求優(yōu)勢(shì)互 補(bǔ)，效果最佳。在這其中的就是小組成員的各自的出謀劃策 ，也必須需要相互的表 達(dá)