《web前端知識介紹》由會員分享,可在線閱讀,更多相關(guān)《web前端知識介紹(15頁珍藏版)》請在裝配圖網(wǎng)上搜索。
1、HTML+CSS初識web前端和HTML 2 知識導入 本節(jié)任務(wù) 什么是Web前端 Web前端開發(fā)工具 瀏覽器的介紹 HTML是什么 HTML的文檔結(jié)構(gòu) W3c介紹 Html發(fā)展史 Xhtml1.0規(guī)范 常用標簽的講解 屬性的講解 3 知識講解 Web前端開發(fā)語言介紹1. Web前端:瀏覽器展現(xiàn)給用戶的所有東西 (設(shè)計+布局+特效+交互)2. Web前端的發(fā)展:隨著時代的發(fā)展,在這樣一個 “體驗至上、視覺為王”的時代,現(xiàn)在的互聯(lián)網(wǎng)產(chǎn)品不再是以前那樣只追求功能的實現(xià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 是超文本標記語言 Html 使用標記來描述網(wǎng)頁 Html 文件的后綴名是 .html 或者是 .htm Html 文件不需要編譯,直接由瀏覽器解析執(zhí)行2. HTML的基礎(chǔ)語法 Html 語法是由標簽組成的 = 標記=標簽=元素=節(jié)點 Html 標簽分為雙標簽和單標簽 Html 標簽不區(qū)分大小寫,推薦使用小寫 7 知識講解 HTML 文檔結(jié)構(gòu)hello world 網(wǎng)頁的DTD聲明,告訴瀏覽器按照指定的標準來解析網(wǎng)頁,這里指的是w3c標準。如果不寫DTD聲明,瀏覽器認為這是一個不太“標準”的網(wǎng)頁,就會以“奇怪模式”來顯示這個網(wǎng)頁。 8 知識講解 W3c介紹W3c
4、 萬維網(wǎng)聯(lián)盟,專門制定和維護web標準的組織萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年,是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標準機構(gòu)。到目前為止,W3C已發(fā)布了200多項影響深遠的Web技術(shù)標準及實施指南,如廣為業(yè)界采用的超文本標記語言、可擴展標記語言以及幫助殘障人士有效獲得Web內(nèi)容的信息無障礙指南(WCAG)等,有效促進了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ā)布(并非標準)HTML 2.0 1995年11月作為RFC 1866發(fā)布,在RFC 2
5、854于2000年6月發(fā)布之后被宣布已經(jīng)過時HTML 3.2 1996年1月14日,W3C推薦標準HTML 4.0 1997年12月18日,W3C推薦標準HTML 4.01(微小改進) 1999年12月24日,W3C推薦標準XHTML 1.0 發(fā)布于2000年1月26日,是W3C推薦標準,后來經(jīng)過修訂于2002年8月1日重新發(fā)布XHTML 1.1 于2001年5月31日發(fā)布 XHTML 2.0 10 知識講解 xhtml1.0 介紹1. xhtml 就是標準更嚴格的html版本,增強了一些規(guī)范和限制2. xhtml 可以理解成就是html的加強版3. xhtml 好處是增強了程序的可讀性 頁面
6、必須具有DTD聲明 img必須加alt 雙標簽必須閉合, 單標簽由反斜線(/) 封閉 引號必須用雙引號 標簽名與屬性名必須小寫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正式版分化點 12 知識講解 常用標簽的介紹h
7、1 h6 雙標簽 標題文章標題注:h1只可以出現(xiàn)一次,h2 - h6可以多次出現(xiàn)P 雙標簽 段落文章內(nèi)容 13 知識講解 常用標簽的介紹a 雙標簽 超鏈接超鏈接標題屬性的介紹1. 用來表示該標簽的性質(zhì)和特性,通常格式 = 屬性名=屬性值 2. 在開始標簽中指定3. 多個屬性用空格隔開 14 知識講解 常用標簽的介紹img 單標簽 圖片注意:1. alt 只有當?shù)刂仿窂藉e誤的時候才顯示2. width/height 只給一個值的時候另一個值瀏覽器默認會算出來,等比例縮放3. 圖片名稱不可以出現(xiàn)中文 15 知識講解 元素樣式的介紹文章標題注意:1. style 屬性規(guī)定元素的行內(nèi)樣式(行間樣式)2. style 樣式內(nèi)部寫法 = 屬性名:屬性值 = 多個屬性用分號隔開3. color 文字的顏色,值有三種形式 = 十六進制,rgb,英文