資源描述:
《《前臺html_css_js極速入門》》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、網(wǎng)站開發(fā)技術(shù)實戰(zhàn)培訓(xùn)---第一課:前臺htmlcssjs極速入門課程內(nèi)容1、Html、css、js簡要介紹(5min)2、Html基本語法結(jié)構(gòu)介紹(5min)3、Html標(biāo)簽元素樣式及布局定位舉例(15min)4、Html與css:內(nèi)容與樣式分離(10min)5、javascript動態(tài)修改樣式舉例(5min)6、Jquery動作綁定舉例(5min)7、實戰(zhàn)1:huodong.ustc.edu.cn首頁制作(35min)8、實戰(zhàn)2:制作有透明背景的彈出框(10min)1、前臺Html、css、js簡要介紹HTML是用來描述網(wǎng)頁的一種語言。HTML
2、指的是超文本標(biāo)記語言(HyperTextMarkupLanguage)HTML不是一種編程語言,而是一種標(biāo)記語言(markuplanguage)標(biāo)記語言是一套標(biāo)記標(biāo)簽(markuptag)HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁1、前臺Html、css、js簡要介紹CSS概述CSS指層疊樣式表(CascadingStyleSheets)樣式定義如何顯示HTML元素樣式通常存儲在樣式表中外部樣式表可以極大提高工作效率外部樣式表通常存儲在CSS文件中多個樣式定義可層疊為一1、前臺Html、css、js簡要介紹JavaScript概述JavaScript被設(shè)計用
3、來向HTML頁面添加交互行為。JavaScript是一種腳本語言(腳本語言是一種輕量級的編程語言)。JavaScript由數(shù)行可執(zhí)行計算機(jī)代碼組成。JavaScript通常被直接嵌入HTML頁面。JavaScript是一種解釋性語言(就是說,代碼執(zhí)行不進(jìn)行預(yù)編譯)。1、前臺Html、css、js簡要介紹關(guān)系Html控制要輸出哪些內(nèi)容,并給內(nèi)容打上標(biāo)簽Css通過html的標(biāo)簽來控制輸出內(nèi)容的樣式和位置Js可動態(tài)修改樣式或html中的標(biāo)簽及內(nèi)容:即動作Html?顯示什么內(nèi)容Css?內(nèi)容顯示成什么樣子Js?動作:不同情況下不一樣的內(nèi)容和樣子2、Html
4、基本語法結(jié)構(gòu)介紹html基本格式<標(biāo)簽名屬性>標(biāo)簽包含的內(nèi)容標(biāo)簽名>例如:你好!秋
瀏覽器不會顯示HTML標(biāo)簽,而是使用標(biāo)簽來解釋頁面的內(nèi)容:2、Html基本語法結(jié)構(gòu)介紹
標(biāo)題……
內(nèi)容1
內(nèi)容2
內(nèi)容3
……與之間:網(wǎng)頁全部信息與之間:網(wǎng)頁說明信息
與5、>之間:瀏覽器標(biāo)題
與之間:可見的網(wǎng)頁內(nèi)容2、Html基本語法結(jié)構(gòu)介紹3、Html元素樣式及布局定位舉例先講規(guī)則原理,再用代碼寫出符合規(guī)則的布局和樣式常用規(guī)則和代碼均極其簡單不以書上標(biāo)準(zhǔn)名詞講解,采用通俗、俗氣的名詞叫法,先讓大家能理解,能寫,然后大家再去看書,去系統(tǒng)、規(guī)范學(xué)習(xí),去提高技能3、Html元素樣式及布局定位舉例要顯示的內(nèi)容必須放在body中。Body是個大硬盒子,盒子中可以放其它盒子盒子中可以放袋子盒子是硬的,有長寬高屬性,默認(rèn)獨占一行袋子是軟的,袋子沒有長寬高屬性,不獨占一行袋子中不能放盒子(標(biāo)準(zhǔn)中規(guī)定),但
6、瀏覽器多支持此非正規(guī)寫法,建議不要常用Display可以使標(biāo)簽元素在盒子和袋子間改變Display:block塊元素(盒子),inline內(nèi)聯(lián)元素(袋子);各種標(biāo)簽?zāi)J(rèn)的display屬性不同F(xiàn)loat可以使塊級元素(盒子)不獨占一行Html元素樣式及布局定位舉例開始例子,邊做邊學(xué)后面ppt作為提示和講解屬性用3、Html元素樣式及布局定位舉例盒子的主要屬性:寬(width)高(height)邊框(border)外邊距(margin)內(nèi)邊距(padding)背景(background)內(nèi)部內(nèi)容樣式(對齊方式字體顏色等)設(shè)置的寬高僅僅是是conte
7、nt的寬高(ie6及以前是全部的寬高,即外部虛線部分包含的區(qū)間寬高)設(shè)置的背景是包含padding和content的部分的背景3、Html元素樣式及布局定位舉例袋子的主要屬性:沒有寬高屬性,沒有上下邊距,沒有內(nèi)部內(nèi)容的對齊方式,其余和盒子基本一樣3、Html元素樣式及布局定位舉例元素位置1:Body是最外面的包裝大盒子,Body里面有盒子盒子又有兄弟盒子盒子也有子盒子兄弟盒子間位置按照文檔中的順序布局定位緊挨上一個盒子(盒子要獨占一行)子盒子緊挨父盒子的左上角3、Html元素樣式及布局定位舉例元素位置2:3、Html元素樣式及布局定位舉例元素位置
8、3:3、Html元素樣式及布局定位舉例元素位置1:Html元素屬性查看w3cschool上面的教程上面可以查詢對應(yīng)元素,其屬性含義,及其