網(wǎng)絡(luò)營銷建站html基礎(chǔ)_第1頁
網(wǎng)絡(luò)營銷建站html基礎(chǔ)_第2頁
網(wǎng)絡(luò)營銷建站html基礎(chǔ)_第3頁
網(wǎng)絡(luò)營銷建站html基礎(chǔ)_第4頁
網(wǎng)絡(luò)營銷建站html基礎(chǔ)_第5頁
已閱讀5頁，還剩52頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

2009-9-1思百授郭日成第2章HTML基礎(chǔ)本章要點(diǎn)：

什么是HTMLHTML頁面基本結(jié)構(gòu)如何設(shè)定段落對齊特殊符號標(biāo)記

HTML文本格式創(chuàng)建鏈接2011-3-15思百授郭日成2.1認(rèn)識HTML

什么是HTML

HTML是“超文本標(biāo)記語言”（HypertextMarkupLanguage）的縮寫。是一種專門用來設(shè)計網(wǎng)頁的計算機(jī)語言，用它可以制作萬維網(wǎng)頁面。。

HTML是一種用來定義信息表現(xiàn)方式的格式，它告訴WWW瀏覽器如何顯示信息，如何繼續(xù)鏈接。2011-3-15思百授郭日成

用HTML生成的文檔——HTML文檔，是ASCII碼格式文件，你可以使用任何普通的文字編輯器來編輯它，普通的文字編輯器只能用來編輯HTML文檔，但要看到網(wǎng)頁的實(shí)際效果還要在瀏覽器中打開HTML文檔。

HTML網(wǎng)頁文件都以.htm為擴(kuò)展名。。

HTML的格式2011-3-15思百授郭日成在記事本下撰寫HTML的語法就可以了。如圖：

如何編寫HTML文件

在記事本窗口下單擊“文件→保存”，在另存為對話框中的文件名欄中輸入：文件名.htm。2011-3-15思百授郭日成

一個簡單的HTML例子<title>和</title><body>和</body>2011-3-15思百授郭日成2.2HTML頁面基本結(jié)構(gòu)

<html></html><head><title>……</title>……</head><body>……</body>標(biāo)題設(shè)定區(qū)（第二層）HTML網(wǎng)頁文本區(qū)（第三層）最外層2011-3-15思百授郭日成一個用HTML編寫的網(wǎng)頁2011-3-15思百授郭日成<HTML>…</HTML>標(biāo)記

一個完整的HTML文件是以<html>標(biāo)記開始的，用來告知瀏覽器這個文件是使用HTML格式編寫的；最后使用</html>標(biāo)記告知瀏覽器此處是HTML文件的結(jié)束點(diǎn)。2011-3-15思百授郭日成<HEAD>…</HEAD>標(biāo)記

在此標(biāo)簽包圍中的文字是網(wǎng)頁的開場白，即頁面標(biāo)題。一般來說只有很少幾個標(biāo)記可以放在<HEAD>里（如<TITLE>）。你千萬不要把文章的正文放在里面，否則，將無法看到你的正文了。用法如下：<HTML><HEAD><TITLE>歡迎光臨快樂天地</TITLE></HEAD>……<HTML>2011-3-15思百授郭日成<TITLE>…</TITLE>標(biāo)記

用于包含那些作為頁面標(biāo)題顯示的文字。這些標(biāo)簽始終是包含在<HEAD></HEAD>標(biāo)簽之內(nèi)，<title>…<title>標(biāo)記的長度最好不要太長，以不超過26個漢字為原則。其中內(nèi)容將出現(xiàn)在瀏覽器的標(biāo)題欄中。2011-3-15思百授郭日成

<meta>標(biāo)記

<meta>標(biāo)記能提供文檔的字符編碼、描述、關(guān)鍵字、作者、自動刷新等多種信息。<metaname=“description”content=“-宜室家居-”>指定文檔的描述，闡明整個網(wǎng)站的宗旨及吸引人的地方

<metaname=“keywords”content=“家居,裝飾,家具”>標(biāo)記搜索引擎在搜索頁面時取出的關(guān)鍵詞

<metaname=“author”content=“胡菘”>標(biāo)記文檔的作者

<metahttp-equiv=“refresh”content=“3;URL=”>定義頁面打開3秒鐘后自動跳轉(zhuǎn)到””2011-3-15思百授郭日成<BODY>…</BODY>標(biāo)記

你所制作的網(wǎng)頁的正文內(nèi)容連同鏈接和圖片等等都要放在此標(biāo)記里面。把它同<HTML>和<HEAD>標(biāo)記結(jié)合起來就構(gòu)成了網(wǎng)頁結(jié)構(gòu)的主框架。<BODY>可以設(shè)定一些屬性，如背景色，背景圖形等。語法如下：<BODY[BGCOLOR|TEXT|BAKGROUND]></BODY>

BGCOLOR：指定HTML的背景色。

TEXT：指定HTML文件中文字色彩屬性。

BACKGROUND：指定HTML背景圖形。2011-3-15思百授郭日成添加背景顏色以后的網(wǎng)頁效果2011-3-15思百授郭日成2.3如何設(shè)定段落與對齊語法：<Palign=“value”>…<P>功能：設(shè)定段落說明：1.每一個段落都括在<P></P>標(biāo)簽之內(nèi)。結(jié)尾標(biāo)記</P>可以省略。2．Align屬性用來設(shè)定文字的對齊方式，其value屬性值可設(shè)為：

left：設(shè)定文字左對齊

right：設(shè)定文字右對齊

center：設(shè)定文字置中對齊

段落標(biāo)記符2011-3-15思百授郭日成

換行標(biāo)記<BR>

用于在文檔中強(qiáng)制換行，是屬于非成對標(biāo)記，也就是它只有一個單獨(dú)的標(biāo)記符<BR>，沒有結(jié)束符。2011-3-15思百授郭日成

特殊符號句柄

在網(wǎng)頁中要顯示特殊符號，需要使用句柄并且在句柄的前面必須加上&作開頭，其寫法如下表：2011-3-15思百授郭日成

<PRE>標(biāo)記2.4HTML文本格式

<PRE>它能讓文字的編排，比如：空格、換行都能按照自己的設(shè)定顯示，也就是說屏幕上顯示的文字排列和在編輯HTML文件的版面一模一樣。書寫時要記得<PRE>…</PRE>是成對出現(xiàn)的。2011-3-15思百授郭日成上面“露天電影”網(wǎng)頁修改代碼以后的頁面效果修改后的代碼見下頁2011-3-15思百授郭日成2011-3-15思百授郭日成

字號的設(shè)置（★）

HTML可以使用設(shè)置章節(jié)標(biāo)題的標(biāo)注：<Hn>…</Hn>，n=1，2…6，n表示主體區(qū)顯示的正文章節(jié)標(biāo)題的級別。它就像我們平時閱讀的小說章節(jié)一樣，將不同級別的標(biāo)題設(shè)置為不同的字體。HTML提供六級標(biāo)題：一級：<H1></H1>二級：<H2></H2>三級：<H3></H3>四級：<H4></H4>五級：<H5></H5>六級：<H6></H6>說明：<H1>最大、<H6>最小此標(biāo)記后面可加入align屬性來控制文字的對齊方式2011-3-15思百授郭日成舉例：使用HTML編寫下列網(wǎng)頁<HTML><HEAD><TITLE>字號設(shè)置技巧</TITLE></HEAD><BODYbgcolor="#00d4d4"><H1>第二章用HTML制作文本頁面</H1><H2>2.1控制字的字號顏色</H2><H3>2.1.1字號設(shè)置技巧</H3><H4>1.設(shè)置頁面正文章節(jié)的標(biāo)題</H4>HTML中設(shè)置字號的標(biāo)注有多種，我們可以使用設(shè)置章節(jié)標(biāo)題的標(biāo)注：</BODY></HTML>2011-3-15思百授郭日成1.設(shè)置頁面正文的字體與字號格式：<FONTFACE=“字體名稱”SIZE=n></FONT>，字號n=1，2…7SIZE用“+n”，“-n”設(shè)置成一個相對值。所有的字體大小都是相對于一個缺省大小值。如：‘SIZE=+2’，表示比缺省字體大2個單位，而‘SIZE=-2’表示比缺省字體小2個單位。其中：SIZE的缺省值是3。

設(shè)置字體2011-3-15思百授郭日成2.字符顏色的設(shè)置格式：<FONTCOLOR=”#RRGGBB”>…</FONT>其中：

RR、GG、BB為兩位16進(jìn)制數(shù)，設(shè)置顏色值的范圍是1，2…，255；指定顏色的另一種方法是使用HTML中定義的顏色常量，即使用下表預(yù)設(shè)的常用顏色名稱（color=”green”）如下頁表所示。2011-3-15思百授郭日成常用顏色名稱2011-3-15思百授郭日成HTML中，字體風(fēng)格是通過四對標(biāo)注來實(shí)現(xiàn)的，它們是：<B>…</B>或<strong>…</strong>——粗體Bold<I>…</I>或<em>…</em>——斜體Italic<U>…</U>——下劃線Underline<TT>…</TT>——打字機(jī)字體3.設(shè)置字體風(fēng)格2011-3-15思百授郭日成

插入水平線格式：<HRalign=value1SIZE=value2color=value3NOSHADE>其中：

align—用來控制分隔線的對齊方式，其屬性值有：

center、left、right。

SIZE—用于指定分隔線的厚度，缺省值是2。

Color—用來指定分隔線的長度。

Width—用來指定分隔線的寬度。

NOSHADE—指定分隔線是不透明的；2011-3-15思百授郭日成

如何插入圖片—<IMG>標(biāo)記語法：<IMGSRC=“文件名”ALT=“提示文本”ALIGN=位置

HEIGHT=nWIDTH=nVSPACE=”value1”HSPACE=value2>功能：在當(dāng)前網(wǎng)頁的位置顯示一張圖片下面對其中的幾個屬性說明如下：

SRC——指定要嵌入的圖片的文件名；

ALT——在圖形下載顯示前或使用無法顯示圖形的瀏覽器，在該圖形位置上就會出現(xiàn)

ALT后面的文字；

ALIGN——指定圖形的位置，圖形可以出現(xiàn)在文字的左（LEFT）、右（RIGHT）、上端（TOP）、下端（BOTTOM）、和中間（MIDDLE）；

HEIGHT和WIDTH——指定圖形的高和寬。

VSPACE——設(shè)定文字、圖片與圖片上下之間的間隔。

HSPACE——設(shè)定文字、圖片與圖片往右之間的間隔。IMG屬于非成對標(biāo)記2011-3-15思百授郭日成插入圖片以后的網(wǎng)頁效果2011-3-15思百授郭日成要使文本圍繞圖像環(huán)繞，應(yīng)將語句改為：<IMGSRC=“..\圖片\0720.jpg“ALT="圖片"width=240height=180align=left>2011-3-15思百授郭日成

書信格式格式：<BLOCKQUOTE>…</BLOCKQUOTE>說明：以書信內(nèi)容的方式顯示文字。在距頁面的左右兩邊分別留出一段頁邊距。2011-3-15思百授郭日成2011-3-15思百授郭日成格式：<Ahref=URLname=“bookmarkname”target=”position”>Linktofilename</A>

超級鏈接標(biāo)記<A>說明：

href

——

是表示鏈接的屬性；

URL

——

指向目標(biāo)的統(tǒng)一資源定位符。(即超級鏈接地址)name——設(shè)定書簽（bookmark）的名稱。

position——用來指定網(wǎng)頁的放置位置。（一般用于框架網(wǎng)頁）

Linktofilename——

表示供用戶點(diǎn)擊的文字，當(dāng)鼠標(biāo)移到上面時，會從箭頭轉(zhuǎn)成手指，只要用鼠標(biāo)點(diǎn)一下，就會跳轉(zhuǎn)到以filename.htm命名的頁面。注意：位于<A>和</A>之間的所有文字將被瀏覽器突出地顯示出來作為供讀者點(diǎn)擊的鏈接點(diǎn)。2011-3-15思百授郭日成頁面HTML代碼如下：<LI><AHREF=”test1.htm”>快快樂樂暢游Internet</A></LI><LI><AHREF=”test2.htm”>Internet信息查詢技巧</A></LI>在瀏覽器中顯示的結(jié)果為：舉例：鏈接兩個HTML文件2011-3-15思百授郭日成

課堂作業(yè)一：用HTML編寫如下的網(wǎng)頁2011-3-15思百授郭日成要求：

標(biāo)題：顏色：#CC0000

小標(biāo)題：size=5；顏色：#009900

圖片大?。簩挘?00；高：2682011-3-15思百授郭日成課堂作業(yè)二：完成以下“動物成語”網(wǎng)頁設(shè)置主頁名稱為：Index.htm子網(wǎng)頁名稱分別為:

畫蛇添足：hstz.htm

狐假虎威：hjhw.htm

對牛彈琴：dntq.htm

快馬加鞭：kmjb.htm2011-3-15思百授郭日成主頁名稱為：Index.htm2011-3-15思百授郭日成2011-3-15思百授郭日成

課堂作業(yè)三：用HTML完善如下的網(wǎng)頁2011-3-15思百授郭日成完成后的效果為：2011-3-15思百授郭日成1．無順序列表（UnorderList）格式：<UL><LI>第一項(xiàng)</LI><LI>第二項(xiàng)</LI><LI>第三項(xiàng)</LI></UL>2.5無序列表和順序列表例1：在記事本中輸入下列代碼：<P>目前世界上最主要的三大宗教是：</P><UL><LI>基督教</LI><LI>伊斯蘭教</LI><LI>佛教</LI></UL>在瀏覽器中的顯示結(jié)果為：2011-3-15思百授郭日成2．順序列表（OrderList）格式：<OL><LI>第一項(xiàng)</LI><LI>第二項(xiàng)</LI><LI>第三項(xiàng)</LI></OL>在瀏覽器中的顯示結(jié)果為：例2：輸入如下代碼：<P>吃罐裝橘子：</P><OL><LI>去超級市場</LI><LI>買一些橘子罐頭</LI><LI>打開罐頭</LI><LI>吃罐頭里的橘子</LI></OL>2011-3-15思百授郭日成可加上TYPE=#來定義每一項(xiàng)前面的符號或序號。對于無序列表，定制符號的標(biāo)記為：

<ULTYPE=#>

其中“#”代表：①DISC（實(shí)心圓）②CIRCLE（空心圓）③SQUARE（方塊）缺省時為實(shí)心圓。對于順序列表，定制符號的標(biāo)記為：

<OLTYPE=A|a|I|i|1|START=n>TYPE屬性用來選擇以英文字母或是羅馬數(shù)字作為項(xiàng)目的編號；START=n—指定從哪一個字母或數(shù)字開始；其中： A表示按A、B、C、D、……編號； a表示按a、b、c、d、……編號； I表示按I、Ⅱ、Ⅲ、Ⅳ、……編號； 1表示按數(shù)字編號，這是缺省屬性設(shè)置。3.定制列表元素2011-3-15思百授郭日成舉例：制作如下頁面。文件名為test.htm。對應(yīng)的HTML文檔見下頁2011-3-15思百授郭日成2011-3-15思百授郭日成若將上例頁面修改為如下頁面，并存為test1.htm，應(yīng)如何更改代碼。2011-3-15思百授郭日成2.6制作表格1．表格設(shè)計的基本語法<tableborder><tr>定義表行

<td>第1行第1列</td>定義表格數(shù)據(jù)

<td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr></table>Border屬性：定義表格外框?qū)挾?011-3-15思百授郭日成舉例：設(shè)計一個3行5列的表格HTML代碼見

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論