第一章(HTML基本標(biāo)簽)_第1頁
第一章(HTML基本標(biāo)簽)_第2頁
第一章(HTML基本標(biāo)簽)_第3頁
第一章(HTML基本標(biāo)簽)_第4頁
第一章(HTML基本標(biāo)簽)_第5頁
已閱讀5頁，還剩31頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第一章HTML基本標(biāo)簽預(yù)習(xí)檢查請(qǐng)?jiān)斒鯤TML文檔的基本結(jié)構(gòu)！標(biāo)題標(biāo)簽有哪幾種類型？<h1>到<h6>哪些標(biāo)簽可以控制文字樣式？<font><b><strong><i><p><pre><br><u>......本章目標(biāo)了解Internet的相關(guān)介紹了解HTML技術(shù)掌握網(wǎng)頁背景設(shè)置掌握字體和段落標(biāo)簽的應(yīng)用掌握如何在網(wǎng)頁中插入圖片掌握超級(jí)鏈接的使用掌握列表標(biāo)簽制作滾動(dòng)效果Internet相關(guān)技術(shù)介紹TCP/IP協(xié)議 TCP/IP協(xié)議是Internet國際互聯(lián)網(wǎng)絡(luò)的基礎(chǔ)。HTTP協(xié)議：用于瀏覽網(wǎng)頁FTP協(xié)議：用于Internet文件共享IP地址和域名簡介IP地址：標(biāo)識(shí)網(wǎng)絡(luò)中每臺(tái)主機(jī)的唯一地址。域名：用于標(biāo)識(shí)IP地址的有意義的詞組。URL(UniformResourceLocator)

統(tǒng)一資源定位符，用于精確定位網(wǎng)絡(luò)中的各種資源。如網(wǎng)頁、圖片、音樂、視頻等。Internet相關(guān)技術(shù)介紹Web瀏覽器

將網(wǎng)頁文件翻譯成豐富多彩的網(wǎng)頁。 常用的瀏覽器：IEFireFoxOpera絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑：文件或目錄在硬盤上的真正路徑。

C:\xyz\test.txt /index.htm相對(duì)路徑：相對(duì)于某個(gè)基準(zhǔn)目錄的路徑。

./代表當(dāng)前目錄 ../代表上級(jí)目錄HTML語言什么是HTML？HTML是用來描述網(wǎng)頁的一種語言。HTML指的是超文本標(biāo)記語言(HyperTextMarkupLanguage)HTML不是一種編程語言，而是一種標(biāo)記語言(markuplanguage)標(biāo)記語言是一套標(biāo)記標(biāo)簽(markuptag)HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁HTML標(biāo)簽HTML標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽(HTMLtag)。HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如<html>HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，比如<b>和</b>標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽

HTML網(wǎng)頁的結(jié)構(gòu)HTML網(wǎng)頁的結(jié)構(gòu)<HTML><HEAD><TITLE>歡迎來到HTML

</TITLE></HEAD><BODY><P>您好，SEC！</P></BODY></HTML>HTML網(wǎng)頁<HEAD>頭部部分<BODY>主體部分<HTML>…</HTML>標(biāo)簽標(biāo)記HTML文檔的開始和結(jié)束網(wǎng)頁標(biāo)題網(wǎng)頁內(nèi)容，可以是文本、圖像等這部分包含文本、圖像和鏈接。它包括在<BODY>…</BODY>

標(biāo)簽內(nèi)這部分包括標(biāo)題和其他說明信息。包括在<HEAD>…</HEAD>

標(biāo)簽內(nèi)使用記事本創(chuàng)建網(wǎng)頁演示示例：使用記事本創(chuàng)建網(wǎng)頁的步驟：1、打開記事本2、輸入HTML代碼3、保存為*.html或*.htm文件，注意格式問題4、打開網(wǎng)頁預(yù)覽效果使用記事本創(chuàng)建網(wǎng)頁設(shè)置網(wǎng)頁背景色或背景圖像<BODY

bgcolor="#FFCCFF“background="back_image.GIF">HelloWorld！</BODY>為了使頁面美麗大方，網(wǎng)頁背景要盡量地淺……<BODYbgcolor="#FFCCFF“> HelloWorld!</BODY>……網(wǎng)頁背景色彩

網(wǎng)頁背景圖像

設(shè)置背景聲音<bgsoundsrc=“audio/wind.mp3”loop=“-1”

/><html><head><title>主體背景音樂設(shè)置</title></head><body>

<bgsoundsrc=“audio/wind.mp3”loop=“-1”

/></body></html>聲音文件

播放次數(shù)

添加多媒體資源<html><head><title>多媒體資源設(shè)置</title></head><body><palign=“center”>下面是視頻文件的播放界面</p><embedsrc=“video/nba.wmv”width=“400”height=“300”autostart=“true”></embed>

<palign=“center”>下面是音頻文件的播放界面</p><embedsrc=“audio/wind.mp3”width=“400”height=“300”></embed>

<palign=“center”>下面是Flash動(dòng)畫文件的播放界面</p><embedsrc=“swf/mouse.swf”width=“400”></embed></body></html>字體和段落標(biāo)簽字體、字號(hào)標(biāo)題標(biāo)簽<H1>－<H6><FONT>標(biāo)簽特殊符號(hào)行的控制段落標(biāo)簽<P>換行標(biāo)簽<BR>使用了<H2>…<H2>換段了設(shè)置了字體的大小和顏色換行了特殊符號(hào)<FONTsize=“+2”

color=“red”face=“律書”> ...</FONT>字體和段落標(biāo)簽<FONT>標(biāo)簽特殊符號(hào)特殊字符轉(zhuǎn)義碼空格

引號(hào)(“”)"小于(<)<大于(>)>版權(quán)號(hào)(?)©字體的大小值字體的顏色字體的類型字體和段落標(biāo)簽......<BODY><P><FONTsize="+2"color="red">

手機(jī)充值、IP卡/電話卡

</FONT><BR/>

移動(dòng) | 100| 聯(lián)通

| 50</P>Copyright©2007"淘寶網(wǎng)"Allrights.</BODY>……空格效果…….

<Palign="center">淘寶集市歡迎您！</P><Palign="left">淘寶網(wǎng)首屆翠友會(huì)！<BR>……</P>……字體和段落標(biāo)簽段落標(biāo)簽<P>段(Paragraph)(可以看作是空行)<p>換行標(biāo)簽<BR>換行<br>

換段了換行了…….<i>斜體</i>

<em>斜體</em><b>粗體</b><strong>粗體</strong><u>下劃線</u><pre> aaabbb cccc dddffff</pre>……字體樣式

標(biāo)題標(biāo)簽和水平線標(biāo)題標(biāo)簽<H#>...</H#>#=1,2,3,4,5,6說明：<H1>到<H6>字體大小依次遞減……<BODY><H1>一級(jí)標(biāo)題</H1><H2>二級(jí)標(biāo)題</H2><H3>三級(jí)標(biāo)題</H3><H4>四級(jí)標(biāo)題</H4><H5>五級(jí)標(biāo)題</H5><H6>六級(jí)標(biāo)題</H6></BODY>……H1到H6標(biāo)簽用于指定不同級(jí)別的標(biāo)題標(biāo)題標(biāo)簽和水平線水平線<hr/>……<BODY>

春曉<hr/>

春眠不覺曉，<hrsize=“6”/>

處處聞啼鳥。<hrwidth=“40%”/>

夜來風(fēng)雨聲，<hrwidth=“60”aligh=“l(fā)eft”/>

花落知多少。<hrsize=“6”width=“30%”align=“center”noshade/></BODY>……練習(xí)利用所學(xué)知識(shí)，制作一份簡易的個(gè)人簡歷。

要求：恰當(dāng)?shù)氖褂帽竟?jié)課所學(xué)到的基本標(biāo)簽。

內(nèi)容包括：姓名、年齡、愛好、地址、學(xué)習(xí)經(jīng)歷和工作經(jīng)歷。圖像標(biāo)簽圖像的基本語法<IMGsrc=“img/img.jpg“border=”10”

width=“350“height=”180“alt=”可愛的小貓">……<BODY><IMGsrc="img/img.jpg

"alt="可愛的小貓"

border="10“width="350"height="180"></BODY>……查看源代碼圖像的路徑圖像的寬度圖像的高度為圖像添加的提示性文字圖像的邊框鼠標(biāo)移到圖像上，出現(xiàn)的提示性文字圖像標(biāo)簽圖像與文本的對(duì)齊方式<IMGalign="middle">圖像與文本居中對(duì)齊,還可以取top,bottom值….<BODY>…

圖像中部和同一行文本的基線對(duì)齊<imgsrc="img/img.jpg"border="5"width="62"height="42"align="middle"/><hr/>…</BODY>……查看源代碼圖像和文本居中對(duì)齊小結(jié)1練習(xí)答案練習(xí)代碼編寫如下圖所示效果對(duì)應(yīng)的html代碼超級(jí)鏈接鏈接到其他頁面<Ahref="register/register.html">[免費(fèi)注冊(cè)]</A>鏈接內(nèi)容鏈接的地址<HTML><HEAD><TITLE>鏈接到其他頁面</TITLE></HEAD><BODY><Ahref="register/register.html">[免費(fèi)注冊(cè)]</A><Ahref="login/login.htm">[登錄]</A></BODY></HTML>單擊”[免費(fèi)注冊(cè)]”之后鏈接到的頁面查看源代碼超級(jí)鏈接鏈接到其他頁面絕對(duì)路徑 指定從根目錄到文件的完整路徑。相對(duì)路徑 指定相對(duì)于當(dāng)前文件的文件位置。

在同一個(gè)文件夾下有兩個(gè)html文件，從一個(gè)文件超鏈接到另一個(gè)文件的路徑有幾種方式？兩種方式：相對(duì)路徑和絕對(duì)路徑超級(jí)鏈接要鏈接到同一目錄(C:\HTML)下的頁面，可編寫<AHREF=“Doc1.htm”>或

<AHREF=“C:\html\Doc2.htm”>相對(duì)路徑名絕對(duì)路徑名超級(jí)鏈接要實(shí)現(xiàn)如下圖所示的超鏈接效果，怎么辦？演示示例3：演示錨鏈接的例子使用錨記標(biāo)簽超級(jí)鏈接鏈接到本頁面錨記標(biāo)簽用于使用戶“跳”到文檔的某個(gè)部分HTML的NAME屬性用于創(chuàng)建錨標(biāo)記

<ANAME=“marker”>主題名稱</A>為達(dá)到這種跳轉(zhuǎn)效果，請(qǐng)?jiān)贖REF參數(shù)中使用該標(biāo)記

<AHREF=“#marker”>主題名稱</A>演示示例4：演示錨鏈接的例子<HTML><HEAD><TITLE>鏈接到其他頁面</TITLE></HEAD><BODY><Ahref=“#bottom”>底部</A> ……<A

name=“bottom”>這是底部</A> ……</BODY></HTML>1、定義錨標(biāo)記2、鏈接到錨標(biāo)記所在位置超級(jí)鏈接電子郵件鏈接要鏈接電子郵件，可在鏈接標(biāo)簽中插入”mailto:郵箱地址”<Ahref="mailto:webmaster@">站長信箱</A>演示示例5：演示電子郵件鏈接<HTML><HEAD><TITLE>電子郵件鏈接</TITLE></HEAD><BODY> ……<Ahref="mailto:taobaoWebMater@">站長信箱</A> ……</BODY></HTML>單擊”站長信箱”鏈接后的輸出結(jié)果任何正確的電子郵箱地址均可…網(wǎng)頁前臺(tái)技術(shù)<ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>FLASH</li>

</ul>

…網(wǎng)頁后臺(tái)的學(xué)習(xí)

<ol>

<li>ASP</li>

<li>ASP.net</li>

<li>PHP</li>

<li>CGI</li>

<li>Ruby</li>

<li>Python</li>

</ol>…列表查看源代碼滾動(dòng)標(biāo)簽<MARQUEE><MARQUEEscrolldelay=“100”direction=“up">

滾動(dòng)文字或圖像</MARQUEE>滾動(dòng)延遲時(shí)間滾動(dòng)對(duì)象的方向說明：scrolldelay：表示滾動(dòng)延遲時(shí)間，默認(rèn)值為90。direction：表示滾動(dòng)的方向，默認(rèn)為從右向左。滾動(dòng)標(biāo)簽<MARQUEE>查看示例

<MARQUEEscrolldelay="100">水平滾動(dòng)</MARQUEE><MARQUEEscrolldelay="200"direction="up">垂直滾動(dòng)</MARQUEE><MARQUEEscrolldelay="300"direction="up"onmouseover="this.stop()"onMouseOut="this.start()"><Ahref="#"><IMGsrc="images/scroll/1.gif"border="0"align="middle">Avon化妝品</A><BR><Ahref="#"><IMGsrc="images/scroll/2.gif"border="0"align="middle">

雅詩蘭黛</A><BR>……</MARQUEE>

溫馨提示

  • 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)論