新大編程幼兒園學(xué)習(xí)第二課——HTML赏廓、CSS和XML

前情鏈接:新大編程幼兒園學(xué)習(xí)第一課——內(nèi)容和顯示

本課主題:HTML涵紊、CSS和XML

授課老師:張軍祥


一、什么是HTML

HTML是用來描述網(wǎng)頁的一種語言幔摸。

· HTML指的是超文本標(biāo)記語言(Hyper Text Markup Language)

· HTML不是一種編程語言摸柄,而是一種標(biāo)記語言(markup language)

· 標(biāo)記語言是一套標(biāo)記標(biāo)簽(markup tag)

· HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

類比:對講呼叫的開始結(jié)束語。

HTML文檔基本結(jié)構(gòu)舉例
上圖HTML文檔顯示效果

Tip:draggable="true"這一屬性表示這個(gè)標(biāo)簽內(nèi)的內(nèi)容可以被拖動(dòng)既忆。

HTML大致由:標(biāo)簽驱负、屬性嗦玖、事件來組成,另有注釋部分"<!-->"跃脊,注釋不在頁面顯示宇挫。編寫注釋是一個(gè)非常優(yōu)秀的習(xí)慣,方便自己及他人了解文檔含義酪术。

隨著網(wǎng)頁需求的增加器瘪,各大瀏覽器廠商不斷有新的標(biāo)簽加入網(wǎng)絡(luò),例如:加粗標(biāo)簽< b >......< /b >绘雁。由于各廠商推出形式繁多冗雜橡疼,W3C組織統(tǒng)一發(fā)布CSS。


二庐舟、什么是CSS

CSS指層疊樣式表(Cascading Style Sheets)

樣式定義如何顯示HTML元素

多重樣式層疊為一個(gè)

層疊次序:(顯示優(yōu)先級)

內(nèi)連樣式>內(nèi)部樣式表>外部樣式表>瀏覽器缺省設(shè)置

列舉三種CSS的使用方法:

第一欣除、二種使用方法
第一、二種使用方法對應(yīng)顯示效果

第三種方法:外部樣式表挪略。創(chuàng)建一個(gè)CSS文件历帚,引入文檔。

第三種使用方法
上述對應(yīng)外部CSS文件
第三種使用方法對應(yīng)顯示效果

HTML與CSS的關(guān)系:

CSS是用來修飾HTML的一種語言瘟檩,同一HTML文件支持引用多個(gè)CSS文件抹缕,同一CSS文件支持被多個(gè)HTML文件引用澈蟆,便于開發(fā)過程中必要情況下樣式的統(tǒng)一修改墨辛。


三、三層分離(重要)

結(jié)構(gòu)層(HTML)趴俘、表示層(CSS)睹簇、行為層(JS)

目的:

為了實(shí)現(xiàn)“高內(nèi)聚、低耦合”寥闪。采用“分而治之”的思想太惠,把問題劃分開來各個(gè)解決,易于控制疲憋,易于延展凿渊,易于分配資源。

列舉:表示一個(gè)段落:< p >< /p >缚柳;表示分割標(biāo)記埃脏,一般用于內(nèi)容與事件:< div >< /div >;表示標(biāo)題加粗:< h1 >< /h1 >秋忙。


四彩掐、什么是XML

XML指可擴(kuò)展標(biāo)記語言(EXtensible Markup Language)

· XML是一種標(biāo)記語言,很類似HTML

· XML的設(shè)計(jì)宗旨是傳輸數(shù)據(jù)灰追,而非顯示數(shù)據(jù)

· XML標(biāo)簽沒有被預(yù)定義堵幽,您需要自行定義標(biāo)簽

· XML被設(shè)計(jì)為具有自我描述性

獨(dú)立于軟件與硬件的存儲方法狗超,XML克服了大部分軟硬件不兼容問題,因?yàn)樗淖晕颐枋鲂云酉拢蟛糠殖绦蚨寄苤С纸庾xXML文件努咐。

XML文檔基本結(jié)構(gòu)舉例


五、XML和HTML的差異

XML和HTML為不同的目的而設(shè)計(jì)

XML被設(shè)計(jì)為傳輸和存儲數(shù)據(jù)殴胧,其焦點(diǎn)是數(shù)據(jù)的內(nèi)容

HTML被設(shè)計(jì)用來顯示數(shù)據(jù)麦撵,其焦點(diǎn)是數(shù)據(jù)的外觀

HTML旨在顯示信息,而XML旨在傳輸信息

XML作為一種通用格式的出現(xiàn)溃肪,為數(shù)據(jù)共享免胃、數(shù)據(jù)交換提供了極大地便利。XML具有非常嚴(yán)格的語言模式惫撰,HTML語法相對寬松羔沙,部分尾部標(biāo)簽省略不影響顯示,舉例< input>< /input>標(biāo)簽厨钻,而XML非常嚴(yán)格扼雏。



問答1:編輯器的快捷輸入,支持代碼補(bǔ)全夯膀。編輯器的插件功能支持寫一個(gè)標(biāo)簽诗充,按tab鍵可自動(dòng)補(bǔ)全。

問答2:課后討論區(qū)會提供如何調(diào)用XML诱建,每種語言都有不同的調(diào)用方法蝴蜓。

問答3:有如此多的標(biāo)簽,初期記憶可能比較困難俺猿,宗旨:可以不會茎匠,但不能不知道,首先要多看押袍,多了解這些用途诵冒。(參考標(biāo)簽課后將發(fā)放)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市谊惭,隨后出現(xiàn)的幾起案子汽馋,更是在濱河造成了極大的恐慌,老刑警劉巖圈盔,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件豹芯,死亡現(xiàn)場離奇詭異,居然都是意外死亡药磺,警方通過查閱死者的電腦和手機(jī)告组,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來癌佩,“玉大人木缝,你說我怎么就攤上這事便锨。” “怎么了我碟?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵放案,是天一觀的道長。 經(jīng)常有香客問我矫俺,道長吱殉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任厘托,我火速辦了婚禮友雳,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘铅匹。我一直安慰自己押赊,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布包斑。 她就那樣靜靜地躺著流礁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪罗丰。 梳的紋絲不亂的頭發(fā)上神帅,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機(jī)與錄音萌抵,去河邊找鬼找御。 笑死,一個(gè)胖子當(dāng)著我的面吹牛谜嫉,可吹牛的內(nèi)容都是我干的萎坷。 我是一名探鬼主播凹联,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼沐兰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蔽挠?” 一聲冷哼從身側(cè)響起住闯,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎澳淑,沒想到半個(gè)月后比原,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡杠巡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年量窘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氢拥。...
    茶點(diǎn)故事閱讀 39,902評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蚌铜,死狀恐怖锨侯,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情冬殃,我是刑警寧澤囚痴,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站审葬,受9級特大地震影響深滚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜涣觉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一痴荐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧官册,春花似錦蹬昌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至昆汹,卻和暖如春明刷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背满粗。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工辈末, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人映皆。 一個(gè)月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓挤聘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親捅彻。 傳聞我的和親對象是個(gè)殘疾皇子组去,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評論 1 92
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫步淹、插件从隆、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,103評論 4 62
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,242評論 1 41
  • application內(nèi)置對象是ServletContext接口的實(shí)例缭裆,表示的是Servlet上下文键闺。如果要在一個(gè)...
    kylelin閱讀 368評論 0 1
  • 國慶假期高中同學(xué)聚會,聚完午餐后幾個(gè)高中時(shí)期經(jīng)常在一起打籃球的同學(xué)相約去學(xué)校再次重溫那時(shí)的美好時(shí)光澈驼。大部分同學(xué)還保...
    programmer閱讀 246評論 1 0