代碼筆記網(wǎng)頁公開課_第1頁
代碼筆記網(wǎng)頁公開課_第2頁
代碼筆記網(wǎng)頁公開課_第3頁
代碼筆記網(wǎng)頁公開課_第4頁
代碼筆記網(wǎng)頁公開課_第5頁
已閱讀5頁，還剩41頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

北京傳智播客教育網(wǎng)頁技術(shù)html講師：孫書華

郵箱：網(wǎng)頁技術(shù)html學(xué)習(xí)內(nèi)容HTML的基本結(jié)構(gòu)標(biāo)題標(biāo)簽段落標(biāo)簽列表標(biāo)簽(無序)超鏈接(概念/內(nèi)部/外部)路徑(相對(duì)/絕對(duì))圖像標(biāo)簽、圖像格式div標(biāo)簽和span標(biāo)簽Flash和視頻播放實(shí)體符號(hào)網(wǎng)頁技術(shù)html學(xué)習(xí)目標(biāo)掌握HTML的基本概念、HTML文件的編寫方法掌握標(biāo)題字標(biāo)簽、段落標(biāo)簽、無序列表、有序列表及定義列表掌握超鏈接的基本知識(shí)、內(nèi)部鏈接、外部鏈接掌握?qǐng)D像的基本格式、插入圖像的方法、圖像的超鏈接及映射相對(duì)路徑和絕對(duì)路徑掌握DIV標(biāo)簽和SPAN標(biāo)簽網(wǎng)頁技術(shù)html介紹隨著計(jì)算機(jī)網(wǎng)絡(luò)的迅速發(fā)展，利用Internet上的網(wǎng)站、和精美的網(wǎng)頁來吸引瀏覽者的目光，不再是一個(gè)孤立的問題，它成為了大家共同關(guān)注的目標(biāo)?！秇tml》課程涉及到的內(nèi)容有網(wǎng)頁架設(shè)、網(wǎng)頁編輯、多媒體元素插入、層疊樣式表的使用、表單元素的添加、表格的繪制等多方面的知識(shí)，具有很強(qiáng)的先進(jìn)性；它是計(jì)算機(jī)應(yīng)用、電子商務(wù)、計(jì)算機(jī)網(wǎng)絡(luò)、計(jì)算機(jī)軟件等專業(yè)的一門基礎(chǔ)課程。網(wǎng)頁技術(shù)html什么是htmlHTML(HyperTextMarkupLanguage，中文通常稱作超文本標(biāo)記語言)是一種文本類解釋執(zhí)行的標(biāo)記語言，它是Internet上用于編寫網(wǎng)頁的主要語言。相信同學(xué)們都有過上網(wǎng)沖浪的經(jīng)歷，打開瀏覽器并在地址欄中輸入一個(gè)網(wǎng)站的地址，就會(huì)展示出相應(yīng)的網(wǎng)頁內(nèi)容了。網(wǎng)頁中可以包含很多種類型的內(nèi)容作為網(wǎng)頁的元素，其中最基本的網(wǎng)頁元素是文字，此外還包括靜態(tài)的圖形和動(dòng)畫，以及聲音和視頻等其他形式的多媒體文件。所有我們所看到的網(wǎng)頁內(nèi)容，都是通過HTML來展現(xiàn)的。本章將從HTML的基本知識(shí)開始，力圖深人淺出地向?qū)W生介紹什么是HTML，以及如何運(yùn)用HTML來設(shè)計(jì)網(wǎng)頁。網(wǎng)頁技術(shù)htmlhtml與瀏覽器的關(guān)系html代碼可以被寫在”記事本”里邊，由瀏覽器解釋執(zhí)行，是“宿主”關(guān)系網(wǎng)頁技術(shù)htmlhtml與生活常識(shí)1:html是文檔的一種(.html,.pdf,.doc,.紅頭文件)網(wǎng)頁技術(shù)htmlhtml是什么不是什么HTML不是一種編程語言，而是一種標(biāo)記語言(markuplanguage)HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁網(wǎng)頁技術(shù)htmlhtml漂亮網(wǎng)站賞析網(wǎng)頁技術(shù)htmlhtml漂亮網(wǎng)站賞析網(wǎng)頁技術(shù)htmlhtml漂亮網(wǎng)站賞析網(wǎng)頁技術(shù)htmlhtml語法規(guī)則元素標(biāo)簽title、html、head、body、img等等單標(biāo)簽</>雙標(biāo)簽<><>html組成網(wǎng)頁技術(shù)htmlhtml文檔結(jié)構(gòu)<html>HTML文件開始 <head> ............ </head> <body> ......... </body></html>HTML文件結(jié)束網(wǎng)頁技術(shù)html一個(gè)簡(jiǎn)單的html文檔<html><head><title>我的第一個(gè)網(wǎng)頁</title></head><body>

這是我制作的第一個(gè)網(wǎng)頁!雖然簡(jiǎn)單，但是一個(gè)很好的開始！

</body></html>網(wǎng)頁技術(shù)htmlhtml三種文檔結(jié)構(gòu) <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"""> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""">網(wǎng)頁技術(shù)html常見meta說明在網(wǎng)頁的<head></head>標(biāo)志對(duì)之間，我們經(jīng)常見到這樣一些代碼：<metaname="keywords"content="puter"/>用來標(biāo)記搜索引擎在搜索你的頁面時(shí)所取出的關(guān)鍵詞<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>用來標(biāo)記你的頁面的解碼方式<metaname="Description"content="Thisisanschool"/>用來標(biāo)記網(wǎng)頁描述內(nèi)容，搜索引擎在搜索頁面時(shí)可以取出該內(nèi)容網(wǎng)頁技術(shù)html標(biāo)題標(biāo)簽<h1></h1><h2></h2>…<h6></h6><h1>我是一級(jí)標(biāo)題！</h1><h2>我是二級(jí)標(biāo)題?。?lt;/h2><h3>我是三級(jí)標(biāo)題?。?！</h3><h4>我是四級(jí)標(biāo)題?。。。?lt;/h4><h5>我是五級(jí)標(biāo)題?。。。?！</h5><h6>我是六級(jí)標(biāo)題！?。。。。?lt;/h6>網(wǎng)頁技術(shù)html段落標(biāo)簽<p></p>（全拼：paragraph）無段落內(nèi)容<br/>無段落內(nèi)容<br/>無段落內(nèi)容<br/>無段落內(nèi)容<br/>無段落內(nèi)容<br/>無段落內(nèi)容<br/><p>我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容</p><p>我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容我是段落內(nèi)容</p>網(wǎng)頁技術(shù)html水平線的標(biāo)簽<hr/>換行標(biāo)簽<br/>換行<br/>換行<br/>換行<br/>水平線<hr/>水平線<hr/>水平線<hr/>網(wǎng)頁技術(shù)html段落和水平標(biāo)簽案例展示css學(xué)習(xí)完畢可以達(dá)到右邊效果網(wǎng)頁技術(shù)html列表標(biāo)簽列表是一種非常有用的數(shù)據(jù)排列方式，它以列表的形式來顯示數(shù)據(jù)。HTML列表分無序列表、有序列表和定義列表。默認(rèn)情況下，無序列表的項(xiàng)目符號(hào)是ul，而通過list-style屬性可以調(diào)整無序列表的項(xiàng)目符號(hào)，避免列表符號(hào)的單調(diào)。無序列表<ul> <li>劉邦</li> <li>項(xiàng)羽</li> <li>項(xiàng)伯</li></ul>網(wǎng)頁技術(shù)html超鏈接的概念網(wǎng)頁技術(shù)html超鏈接標(biāo)簽<a>a標(biāo)簽的屬性hrefnametarget例如：<ahref=“”target=“_blank”name=“sina”>單擊我可以跳轉(zhuǎn)到sina網(wǎng)站</a>網(wǎng)頁技術(shù)html超鏈接--內(nèi)部鏈接所謂內(nèi)部鏈接，指的是在同一個(gè)網(wǎng)站的內(nèi)部，不同的HTML頁面之間的鏈接關(guān)系。target_self在當(dāng)前頁面中打開鏈接；_blank，在一個(gè)全新的空白窗口中打開鏈接網(wǎng)頁技術(shù)html超鏈接--外部鏈接鏈接到外部網(wǎng)站<ahref="http://........">…</a>鏈接到email<ahref=“mailto:郵件地址”>…</a>鏈接到下載文件<ahref="文件地址">…</a>網(wǎng)頁技術(shù)html圖片標(biāo)簽<img>該標(biāo)簽屬性 src

圖像地址source alt

圖片由于其他原因丟失提示信息 title

鼠標(biāo)滑過圖片提示信息引入圖片例子<imgsrc=“3d.jpg”alt=“”title=“”/><imgsrc=“file:///d:/picture/3d.jpg”alt=“”title=“”/><imgsrc=“”alt=“”title=“”/>網(wǎng)頁技術(shù)html圖片基本格式PNG(PortableNetworfGraphics)的原名稱為"可移植性網(wǎng)絡(luò)圖像"。PNG能夠提供長度比GIF小30％的無損壓縮圖像文件。它同時(shí)提供24位和48位真彩色圖像支持以及其他諸多技術(shù)性支持。GIF圖像格式：在壓縮過程中，圖像的像素資料不會(huì)被丟失，然而丟失的卻是圖像的色彩。GIF格式最多只能儲(chǔ)存256色，所以通常用來顯示簡(jiǎn)單圖形及字體。因此GIF通常適用于卡通、圖形、logo、帶有透明區(qū)域的圖形、動(dòng)畫等。JPEG圖像格式：利用一種失真式的圖像壓縮方式將圖像壓縮在很小的儲(chǔ)存空間中，其壓縮比率通常在10:1～40:1之間。這樣可以使圖像占用較小的空間，所以很適合應(yīng)用在網(wǎng)頁的圖像中。JPEG格式的圖像主要壓縮的是高頻信息，對(duì)色彩的信息保留較好，因此也普遍應(yīng)用于需要連續(xù)色調(diào)的圖像中。網(wǎng)頁技術(shù)html什么是絕對(duì)路徑大家都知道，在我們平時(shí)使用計(jì)算機(jī)時(shí)，要找到需要的文件就必須知道文件的位置，而表示文件的位置的方式就是路徑，例如只要看到這個(gè)路徑：c:/website/img/photo.jpg我們就知道photo.jpg文件是在c盤的website目錄下的img子目錄中。類似于這樣完整的描述文件位置的路徑就是絕對(duì)路徑。例如：<imgsrc=“file:///c:/website/img/photo.jpg”alt=“圖片展示”/><imgsrc=""alt=""title=""/>網(wǎng)頁技術(shù)html相對(duì)路徑所謂相對(duì)路徑，顧名思義就是自己相對(duì)與目標(biāo)位置例如：<imgsrc=“./photo.gif”/>相對(duì)路徑： ./當(dāng)前目錄 ../上級(jí)目錄 ../../上兩級(jí)目錄 /跟目錄坐地日行三萬里是什么意思呢？網(wǎng)頁技術(shù)html上標(biāo)標(biāo)簽、下標(biāo)標(biāo)簽上標(biāo)<sup> 9*9=81 9<sup>2</sup>=81下標(biāo)<sub> 硫酸分子式H2SO4 H<sub>2</sub>SO<sub>4</sub>網(wǎng)頁技術(shù)htmldiv和span標(biāo)簽<div>簡(jiǎn)單而言是一個(gè)區(qū)塊容器標(biāo)簽，即<div></div>之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖片乃至章節(jié)、摘要和備注等各種HTML元素?？梢园?lt;div></div>中的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象，用于以后學(xué)習(xí)的CSS的控制。聲明時(shí)只需要對(duì)<div>進(jìn)行相應(yīng)的控制，其中各種標(biāo)簽元素都會(huì)隨之改變。<div>是一個(gè)通用的塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行。用它可以容納各種元素，從而方便排版。網(wǎng)頁技術(shù)htmldiv和span標(biāo)簽<span>該標(biāo)簽是一個(gè)行內(nèi)元素(inlineelements)，在它的前后不會(huì)換行。該標(biāo)簽可以包含于<div>標(biāo)簽中，成為它的子元素，而反過來則不成立，即<span>標(biāo)簽不能包含<div>標(biāo)簽。網(wǎng)頁技術(shù)html<div>和<span>標(biāo)簽案例<p>div標(biāo)簽不同行：</p><div><imgsrc="cup.gif"></div><div><imgsrc="cup.gif“></div><div><imgsrc="cup.gif“></div><p>span標(biāo)簽同一行：</p><span><imgsrc="cup.gif“></span><span><imgsrc="cup.gif“></span><span><imgsrc="cup.gif“></span>網(wǎng)頁技術(shù)html符號(hào)實(shí)體一句話理解符號(hào)實(shí)體? 答:符號(hào)實(shí)體就是用"外號(hào)"表示一個(gè)字符為什么要用符號(hào)實(shí)體? 一些字符在HTML中擁有特殊的含義，比如小于號(hào)(<>空格)用于定義HTML標(biāo)簽的開始。如果我們希望瀏覽器正確地顯示這些字符，我們必須在HTML源碼中插入符號(hào)實(shí)體。常見的符號(hào)實(shí)體空格<>&??

<>&©®網(wǎng)頁技術(shù)html符號(hào)實(shí)體應(yīng)用之處更多的符號(hào)實(shí)體請(qǐng)參考手冊(cè)xhtml_reference.chm網(wǎng)頁技術(shù)html多媒體引入flash<objecttype="application/x-shockwave-flash"data="88.swf"width="400"height="300"><paramname="movie"value="88.swf"/></object>用于IE用于火狐網(wǎng)頁技術(shù)html多媒體引入wmv<objectclassid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"width="400"height="300"> <paramname="autoStart"value="false"/> <paramname="URL"value="di.wmv"/> <embedautostart="0"src="di.wmv"type="video/x-ms-wmv"width="400"height="300"controls="ImageWindow"console="cons"></embed></object>用于火狐用于IE代碼文件的絕對(duì)路徑不要有中文網(wǎng)頁技術(shù)htmlhtml發(fā)展歷史網(wǎng)頁技術(shù)html網(wǎng)頁技術(shù)htmlw3c簡(jiǎn)介(了解)W3C是英文WorldWideWebConsortium的縮寫，中文意思是W3C理事

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論