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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

C:\xyz\test.txt /index.htm相對路徑：相對于某個基準目錄的路徑。

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

HTML網(wǎng)頁的結構HTML網(wǎng)頁的結構<HTML><HEAD><TITLE>歡迎來到HTML

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

標簽內這部分包括標題和其他說明信息。包括在<HEAD>…</HEAD>

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

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

網(wǎng)頁背景圖像

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

/><html><head><title>主體背景音樂設置</title></head><body>

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

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

播放次數(shù)

添加多媒體資源<html><head><title>多媒體資源設置</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動畫文件的播放界面</p><embedsrc=“swf/mouse.swf”width=“400”></embed></body></html>字體和段落標簽字體、字號標題標簽<H1>－<H6><FONT>標簽特殊符號行的控制段落標簽<P>換行標簽<BR>使用了<H2>…<H2>換段了設置了字體的大小和顏色換行了特殊符號<FONTsize=“+2”

color=“red”face=“律書”> ...</FONT>字體和段落標簽<FONT>標簽特殊符號特殊字符轉義碼空格

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

手機充值、IP卡/電話卡

</FONT><BR/>

移動 | 100| 聯(lián)通

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

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

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

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

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

春曉<hr/>

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

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

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

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

要求：恰當?shù)氖褂帽竟?jié)課所學到的基本標簽。

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

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

"alt="可愛的小貓"

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

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

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

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

<ANAME=“marker”>主題名稱</A>為達到這種跳轉效果，請在HREF參數(shù)中使用該標記

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

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

</ul>

…網(wǎng)頁后臺的學習

<ol>

<li>ASP</li>

<li>ASP.net</li>

<li>PHP</li>

<li>CGI</li>

<li>Ruby</li>

<li>Python</li>

</ol>…列表查看源代碼滾動標簽<MARQUEE><MARQUEEscrolldelay=“100”direction=“up">

滾動文字或圖像</MARQUEE>滾動延遲時間滾動對象的方向說明：scrolldelay：表示滾動延遲時間，默認值為90。direction：表示滾動的方向，默認為從右向左。滾動標簽<MARQUEE>查看示例

<MARQUEEscrolldelay="100">水平滾動</MARQUEE><MARQUEEscrolldelay="200"direction="up">垂直滾動</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等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論