web前端知識(shí)介紹PPT課件

1,HTML+CSS初識(shí)web前端和HTML,2,知識(shí)導(dǎo)入,本節(jié)任務(wù),什么是Web前端Web前端開發(fā)工具瀏覽器的介紹HTML是什么HTML的文檔結(jié)構(gòu)W3c介紹Html發(fā)展史Xhtml1.0規(guī)范常用標(biāo)簽的講解屬性的講解,3,知識(shí)講解,Web前端開發(fā)語言介紹,Web前端：瀏覽器展現(xiàn)給用戶的所有東西(設(shè)計(jì)+布局+特效+交互)Web前端的發(fā)展：隨著時(shí)代的發(fā)展，在這樣一個(gè)“體驗(yàn)至上、視覺為王”的時(shí)代，現(xiàn)在的互聯(lián)網(wǎng)產(chǎn)品不再是以前那樣只追求功能的實(shí)現(xiàn)，不在乎視覺效果及用戶體驗(yàn)?；谶@樣的時(shí)代需求，Web前端在產(chǎn)品組成中起到了舉足輕重的作用。職業(yè)方向：網(wǎng)站開發(fā)(PC+移動(dòng))、游戲制作、App開發(fā)開發(fā)語言：html+css+javascript,4,知識(shí)講解,開發(fā)工具介紹,三種常用的IDE：Dreamweaver、HBuilder、Webstorm建議使用HBuilder=速度快，代碼提示好，基于eclipse開發(fā)，兼容所有eclipse有的插件,5,知識(shí)講解,瀏覽器的介紹,IE瀏覽器：IE6IE8存在兼容性問題，js引擎的性能不好Chrome瀏覽器：兼容性及js引擎性能都很好FF瀏覽器：兼容性很好，js引擎性能不如chrome，而且首次打開特別慢,注意：開發(fā)調(diào)試建議使用Chrome瀏覽器,6,知識(shí)講解,HTML文檔結(jié)構(gòu),1.HTML是什么,Html是超文本標(biāo)記語言Html使用標(biāo)記來描述網(wǎng)頁Html文件的后綴名是.html或者是.htmHtml文件不需要編譯，直接由瀏覽器解析執(zhí)行,2.HTML的基礎(chǔ)語法,Html語法是由標(biāo)簽組成的=標(biāo)記=標(biāo)簽=元素=節(jié)點(diǎn)Html標(biāo)簽分為雙標(biāo)簽和單標(biāo)簽Html標(biāo)簽不區(qū)分大小寫，推薦使用小寫,7,知識(shí)講解,HTML文檔結(jié)構(gòu),helloworld,網(wǎng)頁的DTD聲明，告訴瀏覽器按照指定的標(biāo)準(zhǔn)來解析網(wǎng)頁，這里指的是w3c標(biāo)準(zhǔn)。如果不寫DTD聲明，瀏覽器認(rèn)為這是一個(gè)不太“標(biāo)準(zhǔn)”的網(wǎng)頁，就會(huì)以“奇怪模式”來顯示這個(gè)網(wǎng)頁。,8,知識(shí)講解,W3c介紹,W3c萬維網(wǎng)聯(lián)盟，專門制定和維護(hù)web標(biāo)準(zhǔn)的組織,萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。到目前為止，W3C已發(fā)布了200多項(xiàng)影響深遠(yuǎn)的Web技術(shù)標(biāo)準(zhǔn)及實(shí)施指南，如廣為業(yè)界采用的超文本標(biāo)記語言、可擴(kuò)展標(biāo)記語言以及幫助殘障人士有效獲得Web內(nèi)容的信息無障礙指南（WCAG）等，有效促進(jìn)了Web技術(shù)的互相兼容，對(duì)互聯(lián)網(wǎng)技術(shù)的發(fā)展和應(yīng)用起到了基礎(chǔ)性和根本性的支撐作用。,9,知識(shí)講解,Html發(fā)展史,HTML1.0草案在1993年6月發(fā)為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布(并非標(biāo)準(zhǔn))HTML2.01995年11月作為RFC1866發(fā)布,在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)HTML3.21996年1月14日,W3C推薦標(biāo)準(zhǔn)HTML4.01997年12月18日,W3C推薦標(biāo)準(zhǔn)HTML4.01(微小改進(jìn))1999年12月24日,W3C推薦標(biāo)準(zhǔn)XHTML1.0發(fā)布于2000年1月26日,是W3C推薦標(biāo)準(zhǔn),后來經(jīng)過修訂于2002年8月1日重新發(fā)布XHTML1.1于2001年5月31日發(fā)布XHTML2.0,10,知識(shí)講解,xhtml1.0介紹,xhtml就是標(biāo)準(zhǔn)更嚴(yán)格的html版本，增強(qiáng)了一些規(guī)范和限制xhtml可以理解成就是html的加強(qiáng)版xhtml好處是增強(qiáng)了程序的可讀性,頁面必須具有DTD聲明img必須加alt雙標(biāo)簽必須閉合，單標(biāo)簽由反斜線(/)封閉引號(hào)必須用雙引號(hào)標(biāo)簽名與屬性名必須小寫,xhtml1.0規(guī)范,11,知識(shí)講解,Xhtml發(fā)展史,1993年(IETF)HTML1.0,1995(W3C)HTML2.0,1996(W3C)HTML3.2,1997(W3C)HTML4.0,1999(W3C)HTML4.01,2000(W3C)XHTML1.0,2001(W3C)XHTML1.1,XHTML2.0?,分歧,2004年(WHATWG)HTML5草案,2008年(合并)HTML5,2014年HTML5正式版,分化點(diǎn),12,知識(shí)講解,常用標(biāo)簽的介紹,h1h6雙標(biāo)簽標(biāo)題文章標(biāo)題注：h1只可以出現(xiàn)一次，h2-h6可以多次出現(xiàn),P雙標(biāo)簽段落文章內(nèi)容,13,知識(shí)講解,常用標(biāo)簽的介紹,a雙標(biāo)簽超鏈接超鏈接標(biāo)題,屬性的介紹,用來表示該標(biāo)簽的性質(zhì)和特性，通常格式=屬性名=屬性值在開始標(biāo)簽中指定多個(gè)屬性用空格隔開,14,知識(shí)講解,常用標(biāo)簽的介紹,img單標(biāo)簽圖片,注意：1.alt只有當(dāng)?shù)刂仿窂藉e(cuò)誤的時(shí)候才顯示2.width/height只給一個(gè)值的時(shí)候另一個(gè)值瀏覽器默認(rèn)會(huì)算出來，等比例縮放3.圖片名稱不可以出現(xiàn)中文,15,知識(shí)講解,元