前臺html-css-js極速入門_第1頁
前臺html-css-js極速入門_第2頁
前臺html-css-js極速入門_第3頁
前臺html-css-js極速入門_第4頁
前臺html-css-js極速入門_第5頁
已閱讀5頁，還剩21頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

網(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：首頁制作（35min）8、實戰(zhàn)2：制作有透明背景的彈出框（10min）1、前臺Html、css、js簡要介紹HTML是用來描述網(wǎng)頁的一種語言。HTML指的是超文本標(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è)計用來向HTML頁面添加交互行為。JavaScript是一種腳本語言（腳本語言是一種輕量級的編程語言）。JavaScript由數(shù)行可執(zhí)行計算機代碼組成。JavaScript通常被直接嵌入HTML頁面。JavaScript是一種解釋性語言（就是說，代碼執(zhí)行不進行預(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基本語法結(jié)構(gòu)介紹html基本格式<標(biāo)簽名

屬性>標(biāo)簽包含的內(nèi)容</標(biāo)簽名>例如：

<div

style=“color:red;”>你好！秋</div>瀏覽器不會顯示HTML標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容：2、Html基本語法結(jié)構(gòu)介紹<html><head>

<tittle>標(biāo)題</tittle>……</head><body><div>內(nèi)容1</div><h1>內(nèi)容2</h1><p>內(nèi)容3</p>……</body></html><html>與</html>之間：網(wǎng)頁全部信息<head>與</head>之間：網(wǎng)頁說明信息<tittle>與</tittle>之間：瀏覽器標(biāo)題<body>與</body>之間：可見的網(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是個大硬盒子，盒子中可以放其它盒子盒子中可以放袋子盒子是硬的，有長寬高屬性，默認獨占一行袋子是軟的，袋子沒有長寬高屬性，不獨占一行袋子中不能放盒子（標(biāo)準(zhǔn)中規(guī)定），但瀏覽器多支持此非正規(guī)寫法，建議不要常用Display可以使標(biāo)簽元素在盒子和袋子間改變Display：block塊元素（盒子），inline內(nèi)聯(lián)元素（袋子）；各種標(biāo)簽?zāi)J的display屬性不同F(xiàn)loat可以使塊級元素（盒子）不獨占一行Html元素樣式及布局定位舉例開始例子，邊做邊學(xué)后面ppt作為提示和講解屬性用3、Html元素樣式及布局定位舉例盒子的主要屬性：寬（width）高（height）邊框（border）外邊距（margin）內(nèi)邊距（padding）背景（background）內(nèi)部內(nèi)容樣式（對齊方式字體顏色等）設(shè)置的寬高僅僅是是content的寬高（ie6及以前是全部的寬高，即外部虛線部分包含的區(qū)間寬高）設(shè)置的背景是包含padding和content的部分的背景3、Html元素樣式及布局定位舉例袋子的主要屬性：沒有寬高屬性，沒有上下邊距，沒有內(nèi)部內(nèi)容的對齊方式，其余和盒子基本一樣3、Html元素樣式及布局定位舉例元素位置1：Body是最外面的包裝大盒子，Body里面有盒子盒子又有兄弟盒子盒子也有子盒子兄弟盒子間位置按照文檔中的順序布局定位緊挨上一個盒子（盒子要獨占一行）子盒子緊挨父盒子的左上角3、Html元素樣式及布局定位舉例元素位置2：3、Html元素樣式及布局定位舉例元素位置3：3、Html元素樣式及布局定位舉例元素位置1：Html元素屬性查看w3cschool上面的教程上面可以查詢對應(yīng)元素，其屬性含義，及其在不同瀏覽器中的兼容性，以及使用案例個人覺得，學(xué)習(xí)方法：了解規(guī)則原理，會用基本的幾個元素，然后會查詢其它元素定義，可邊查邊寫，幾個小時就能上手。就能看懂別人的布局和樣式設(shè)計，就能仿寫，再做一些實際的項目，看一遍基本的標(biāo)準(zhǔn)教程說明，之后基本沒有代碼本身的限制了。有好的想法，好的材料，然后就能寫出好看的頁面了。Html元素樣式及布局定位舉例1、新建test

html文檔（dreamweaver中）2、tittle修改3、body中添加2個div4、body背景5、div：背景色，內(nèi)容，位置修改，style6、div與div位置間關(guān)系7、html中文檔位置，盒子模型，絕對與相對定位介紹8、classid及鏈接外部樣式表Html元素樣式及布局定位舉例Body中直接寫內(nèi)容就可以顯示，為何再加標(biāo)簽？不同標(biāo)簽簡要介紹：divpspanimgtableolulainputtextarea盒子模型塊級元素divptable等，內(nèi)聯(lián)元素spanaimginput

在高寬居中方式，占行方式上的不同Display修改元素顯示類型：blockinlineinheritCss語法selector{property:value}例如：h1{color:red;font-size:14px;}層疊次序當(dāng)同一個HTML元素被不止一個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中數(shù)字4擁有最高的優(yōu)先權(quán)。1瀏覽器缺省設(shè)置2外部樣式表3內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）4內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）因此，內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head>標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。Css語法selector{property:value}選擇器分類類（class）：以點開頭如：.class1Id：以#開頭如#tittle*通用配合符號，表示全部標(biāo)簽（tag）：選擇器就是標(biāo)簽名如：div書寫規(guī)則：1、后面的優(yōu)先于前面的2、選擇器間空格表示父子關(guān)系3、選擇器間逗號表示并列關(guān)系4、不允許兩個大括號中只有空格或者空著Css語法鏈接到html的方式：1、html中寫入代碼<styletype="text/css">……</style>2、寫在外部css文件中，鏈接到html中<head>……<linkhref="css1.css"rel="stylesheet"type="text/css"/>……</head>Js、jq更改樣式style屬性js與css對照.txtJquery寫法（Jq需要連接庫）

$(“目標(biāo)名”).css(“css屬性名”,“屬性值");比如你要獲取id為123的div的z-index的值$("#123").css("z-index")而你要設(shè)置他的屬性值的話就是這樣寫

$("#123").css("z-index","10")JsJq鏈接到html中1、外部文件的方式<scriptsrc="jsjq1.js"typ

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論