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