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

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)站開(kāi)發(fā)技術(shù)實(shí)戰(zhàn)培訓(xùn)

---第一課：前臺(tái)htmlcssjs極速入門課程內(nèi)容1、Html、css、js簡(jiǎn)要介紹（5min）2、Html基本語(yǔ)法結(jié)構(gòu)介紹（5min）3、Html標(biāo)簽元素樣式及布局定位舉例（15min）4、Html與css：內(nèi)容與樣式分離（10min）5、javascript動(dòng)態(tài)修改樣式舉例（5min）6、Jquery動(dòng)作綁定舉例（5min）7、實(shí)戰(zhàn)1：首頁(yè)制作（35min）8、實(shí)戰(zhàn)2：制作有透明背景的彈出框（10min）1、前臺(tái)Html、css、js簡(jiǎn)要介紹HTML是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。HTML指的是超文本標(biāo)記語(yǔ)言(HyperTextMarkupLanguage)HTML不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言(markuplanguage)標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽(markuptag)HTML使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)1、前臺(tái)Html、css、js簡(jiǎn)要介紹CSS概述CSS指層疊樣式表(CascadingStyleSheets)樣式定義如何顯示HTML元素樣式通常存儲(chǔ)在樣式表中外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在CSS文件中多個(gè)樣式定義可層疊為一1、前臺(tái)Html、css、js簡(jiǎn)要介紹JavaScript概述JavaScript被設(shè)計(jì)用來(lái)向HTML頁(yè)面添加交互行為。JavaScript是一種腳本語(yǔ)言（腳本語(yǔ)言是一種輕量級(jí)的編程語(yǔ)言）。JavaScript由數(shù)行可執(zhí)行計(jì)算機(jī)代碼組成。JavaScript通常被直接嵌入HTML頁(yè)面。JavaScript是一種解釋性語(yǔ)言（就是說(shuō)，代碼執(zhí)行不進(jìn)行預(yù)編譯）。1、前臺(tái)Html、css、js簡(jiǎn)要介紹關(guān)系Html控制要輸出哪些內(nèi)容，并給內(nèi)容打上標(biāo)簽Css通過(guò)html的標(biāo)簽來(lái)控制輸出內(nèi)容的樣式和位置Js可動(dòng)態(tài)修改樣式或html中的標(biāo)簽及內(nèi)容：即動(dòng)作Html

顯示什么內(nèi)容Css

內(nèi)容顯示成什么樣子Js動(dòng)作：不同情況下不一樣的內(nèi)容和樣子2、Html基本語(yǔ)法結(jié)構(gòu)介紹html基本格式<標(biāo)簽名

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

<div

style=“color:red;”>你好！秋</div>瀏覽器不會(huì)顯示HTML標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容：2、Html基本語(yǔ)法結(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)頁(yè)全部信息<head>與</head>之間：網(wǎng)頁(yè)說(shuō)明信息<tittle>與</tittle>之間：瀏覽器標(biāo)題<body>與</body>之間：可見(jiàn)的網(wǎng)頁(yè)內(nèi)容2、Html基本語(yǔ)法結(jié)構(gòu)介紹3、Html元素樣式及布局定位舉例先講規(guī)則原理，再用代碼寫(xiě)出符合規(guī)則的布局和樣式常用規(guī)則和代碼均極其簡(jiǎn)單不以書(shū)上標(biāo)準(zhǔn)名詞講解，采用通俗、俗氣的名詞叫法，先讓大家能理解，能寫(xiě)，然后大家再去看書(shū)，去系統(tǒng)、規(guī)范學(xué)習(xí)，去提高技能3、Html元素樣式及布局定位舉例要顯示的內(nèi)容必須放在body中。Body是個(gè)大硬盒子，盒子中可以放其它盒子盒子中可以放袋子盒子是硬的，有長(zhǎng)寬高屬性，默認(rèn)獨(dú)占一行袋子是軟的，袋子沒(méi)有長(zhǎng)寬高屬性，不獨(dú)占一行袋子中不能放盒子（標(biāo)準(zhǔn)中規(guī)定），但瀏覽器多支持此非正規(guī)寫(xiě)法，建議不要常用Display可以使標(biāo)簽元素在盒子和袋子間改變Display：block塊元素（盒子），inline內(nèi)聯(lián)元素（袋子）；各種標(biāo)簽?zāi)J(rèn)的display屬性不同F(xiàn)loat可以使塊級(jí)元素（盒子）不獨(dú)占一行Html元素樣式及布局定位舉例開(kāi)始例子，邊做邊學(xué)后面ppt作為提示和講解屬性用3、Html元素樣式及布局定位舉例盒子的主要屬性：寬（width）高（height）邊框（border）外邊距（margin）內(nèi)邊距（padding）背景（background）內(nèi)部?jī)?nèi)容樣式（對(duì)齊方式字體顏色等）設(shè)置的寬高僅僅是是content的寬高（ie6及以前是全部的寬高，即外部虛線部分包含的區(qū)間寬高）設(shè)置的背景是包含padding和content的部分的背景3、Html元素樣式及布局定位舉例袋子的主要屬性：沒(méi)有寬高屬性，沒(méi)有上下邊距，沒(méi)有內(nèi)部?jī)?nèi)容的對(duì)齊方式，其余和盒子基本一樣3、Html元素樣式及布局定位舉例元素位置1：Body是最外面的包裝大盒子，Body里面有盒子盒子又有兄弟盒子盒子也有子盒子兄弟盒子間位置按照文檔中的順序布局定位緊挨上一個(gè)盒子（盒子要獨(dú)占一行）子盒子緊挨父盒子的左上角3、Html元素樣式及布局定位舉例元素位置2：3、Html元素樣式及布局定位舉例元素位置3：3、Html元素樣式及布局定位舉例元素位置1：Html元素屬性查看w3cschool上面的教程上面可以查詢對(duì)應(yīng)元素，其屬性含義，及其在不同瀏覽器中的兼容性，以及使用案例個(gè)人覺(jué)得，學(xué)習(xí)方法：了解規(guī)則原理，會(huì)用基本的幾個(gè)元素，然后會(huì)查詢其它元素定義，可邊查邊寫(xiě)，幾個(gè)小時(shí)就能上手。就能看懂別人的布局和樣式設(shè)計(jì)，就能仿寫(xiě)，再做一些實(shí)際的項(xiàng)目，看一遍基本的標(biāo)準(zhǔn)教程說(shuō)明，之后基本沒(méi)有代碼本身的限制了。有好的想法，好的材料，然后就能寫(xiě)出好看的頁(yè)面了。Html元素樣式及布局定位舉例1、新建test

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

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

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論