第2章第1部分HTML語言_第1頁
第2章第1部分HTML語言_第2頁
第2章第1部分HTML語言_第3頁
第2章第1部分HTML語言_第4頁
第2章第1部分HTML語言_第5頁
已閱讀5頁，還剩107頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第2章

HTML語言網(wǎng)頁是由HTML語言組成的，所以要學習網(wǎng)頁設計與制作，必須從網(wǎng)頁的基本語言HTML開始。主要內(nèi)容：

2.1HTML概述2.2HTML語法2.3HTML文檔結(jié)構(gòu)2.4HTML常用標記2.1HTML概述HTML的全稱是HypertextMarkupLanguage（超文本標記語言），是用于描述網(wǎng)頁文檔的一種標記語言。HTML的發(fā)展經(jīng)歷了如下很多版本。（1）HTML2.0：1995年11月發(fā)布，于2000年6月之后被淘汰。

（2）HTML3.2：1996年1月14日發(fā)布，W3C推薦標準。

（3）HTML4.0：1997年12月18日發(fā)布，W3C推薦標準。

（4）XHTML1.0：2000年1月26日發(fā)布，W3C推薦標準，2002年8月1日修訂后發(fā)布。

（5）XHTML2.0：W3C工作草案，因為改動過大，學習這個新技術(shù)的成本過高，現(xiàn)在最常用的還是XHTML1.0的標準。（6）HTML5：2008年，W3C取消了對XHTML的開發(fā)，將HTML5規(guī)范納入W3C的框架中。

2.2HTML語法HTML是一種描述性的標記語言，用于描述超文本中內(nèi)容的顯示方式。

1．雙標記雙標記是由一個起始標記和一個結(jié)束標記所組成，其語法為：<x>受控制內(nèi)容</x>例如：<i>這是斜體字</i>2.單標記HTML中大部分的標記是成對出現(xiàn)的，但也有一些是單獨存在的。這些單獨存在的標記稱為單標記。其語法為：<x/>，例如，<hr/>，<br/>標記等。

3．注釋標記注釋是網(wǎng)頁設計者對頁面代碼進行的解釋，不會在瀏覽器中顯示。注釋標記的語法格式如下：<!--注釋的內(nèi)容-->

2.3HTML文檔結(jié)構(gòu)2.3.1DOCTYPE文檔聲明

2.3.2頭部標記

2.3.3body標記

2.3HTML文檔結(jié)構(gòu)HTML文件的基本結(jié)構(gòu)

<html>html文件開始

<head>html文件的頭部開始

……

……h(huán)tml文件的頭部內(nèi)容

……</head>html文件的頭部結(jié)束

<body>html文件的主體開始

……

……h(huán)tml文件的主體內(nèi)容

……</body>html文件的主體結(jié)束

</html>html文件結(jié)束2.3.1DOCTYPE文檔聲明DOCTYPE是documenttype（文檔類型）的簡寫，是指示W(wǎng)eb瀏覽器關(guān)于頁面使用的XHTML或者HTML是什么版本。以下是三種版本的HTML文檔聲明示例：（1）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"/TR/html4/loose.dtd">（2）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"/TR/xhtml1/DTD/xhtml1-transitional.dtd">（3）<!DOCTYPEhtml>2.3.2頭部標記<head>與</head>標記之間是網(wǎng)頁的描述性信息，頭部標記是指存放在<head>與</head>標記之間的標記，頭部標記中描述的內(nèi)容信息不會顯示在頁面中，常見的頭部標記有以下幾種。2.3.2頭部標記1．頁面標題<title>標記<title>標記用來定義網(wǎng)頁文檔的標題，語法格式為：<title>標題</title>【代碼清單】<!--D:\code\chapter2\2-2.html--><!doctypehtml><html><head>

<metacharset="utf-8"><title>網(wǎng)站首頁</title></head><body>

河南科技大學軟件學院</body></html>2.3.2頭部標記2．元信息標記<meta/><meta>標記：通過屬性來定義文件信息的名稱、內(nèi)容等。<meta>標記的屬性：http-equiv(生成一個標題域)name(表示關(guān)鍵字)

content(關(guān)鍵字/取值的內(nèi)容)定義編輯工具基本語法：<metaname=“generator”content=“value”>注明：generator：定義編輯器content：定義編輯器的名稱2.3.2頭部標記設定關(guān)鍵字基本語法：<metaname=“keywords”content=“value”>注明：keywords：定義關(guān)鍵字content：定義關(guān)鍵字的內(nèi)容2.3.2頭部標記設定描述基本語法：<metaname=“discription”content=“value”>注明：discription：描述定義content：定義描述的內(nèi)容2.3.2頭部標記設定作者基本語法：<metaname=“author”content=“value”>注明：author：作者定義content：定義描述的內(nèi)容2.3.2頭部標記設定建立網(wǎng)站的日期基本語法：<metaname=“build”content=“value”>注：build：網(wǎng)頁建設

content：定義建設的時間

2.3.2頭部標記說明版權(quán)基本語法：<metaname=“copyright”content=“value”>注：copyright：版權(quán)

content：定義版權(quán)信息

2.3.2頭部標記記載聯(lián)系人的郵箱基本語法：<metaname=“reply-to”content=“value”>注：reply-to：回復

content：定義郵箱地址

2.3.2頭部標記限制搜索方式基本語法：<metaname=“robots”content=“value”>注：robots：定義搜索方式

content：定義可以采用的方法

2.3.2頭部標記設定字符集基本語法：

<metahttp-equiv=“content-type”content=“text/html;charset=內(nèi)碼的語系”>

例：gb2312：簡體中文

BIG5：繁體中文（臺灣計算機界實行的漢字編碼字符集）

UTF-8：2.3.2頭部標記設定自動刷新基本語法：

<metahttp-equiv=“refresh”content=“刷新間隔的時間”>(注：時間以秒記)

例：<metahttp-equiv=“refresh”content=“60”/>2.3.2頭部標記設定自動跳轉(zhuǎn)

基本格式:<metahttp-equiv=“refresh”content=“跳轉(zhuǎn)間隔的秒數(shù)；Url=跳轉(zhuǎn)后打開的網(wǎng)頁地址”>

例：

<metahttp-equiv=“refresh”content=“6；Url=http：//”/>2.3.2頭部標記設定轉(zhuǎn)場效果

基本語法：

<metahttp-equiv=“進入/退出”content=“revealtrans(duration=效果延續(xù)時間，transition=過渡效果編號”>enter：進入網(wǎng)頁時的網(wǎng)頁過渡效果

exit：退出網(wǎng)頁時的網(wǎng)頁過渡效果2.3.2頭部標記例：

<metahttp-equiv=“enter”content=“revealtrans(duration=3，transition=9”>

(水平百葉窗)

<metahttp-equiv=“exit”content=“revealtrans(duration=5，transition=0”>

(盒狀收縮)2.3.2頭部標記設定禁用緩存基本語法：<metahttp-equiv=“cache-control”content=“no-cache”/>注：cache-control：緩存控制

content：定義禁止緩存

2.3.2頭部標記設定有效期限基本語法:<metahttp-equiv=“expires”content=“到期時間”>注：日期格式：

“星期，日月年時分秒gmt”

例:<metahttp-equiv=“expires”content=“sun,20oct2005113045gmt”>2.3.2頭部標記2.3.3body標記<body>又稱為主體標記，用于定義文檔的主體，網(wǎng)頁中所要顯示的內(nèi)容都要放在這個標記內(nèi)，在后面章節(jié)所介紹的HTML標記都將放在這個標記內(nèi)。表2-1body元素屬性描述文字顏色屬性TEXT基本語法<BODYtext=“color-value”>注：color-value是顏色的值2.3.3body標記背景顏色屬性bgcolor基本語法<BODYbgcolor=“color-value”>注：color-value是顏色的值2.3.3body標記背景圖像屬性backgroud基本語法<BODYbackgroud=“img_file_url”>注：img_file_url是圖片的路徑2.3.3body標記背景圖像固定屬性bgproperties基本語法<BODYbackgroud=“img_file_url”bgproperties=fixed>注：fixed是固定圖像2.3.3body標記鏈接文字的顏色屬性

link：設定鏈接文字默認的顏色

alink：設定激活鏈接時文字的顏色vlink：設定訪問過的鏈接文字的顏色基本語法：<bodylink=“color_value”alink=“color_value”vlink=“color_value”>注：color_value是顏色的值2.3.3body標記邊距屬性

topmargin：設定上邊距l(xiāng)eftmargin：設定左邊距基本語法：<bodytopmargin=valueleftmargin=value>注：value一般指像素2.3.3body標記2.4HTML常用標記2.4.1文本標記

2.4.2圖像標記

2.4.3超鏈接標記

2.4.4列表標記

2.4.5分節(jié)標記2.4.6表格標記2.4.7浮動框架標記2.4.8多媒體標記

2.4.9交互標記文字的內(nèi)容輸入普通的文字（直接輸入到<body>與</body>之間）輸入空格符號基本語法:

輸入特殊符號如:“->"

&->&2.4.1文本標記注釋語句<comment>,<!---->

基本語法：<comment>……</comment><!--……-->2.4.1文本標記標題字標記<H><h1>……</h1>一級標題大<h2>……</h2>二級標題<h3>……</h3>三級標題<h4>……</h4>四級標題<h5>……</h5>五級標題<h6>……</h6>六級標題小標題字的對齊屬性align

<hnalign=left>……</hn>左對齊

<hnalign=center>……</hn>居中對齊

<hnalign=right>……</hn>右對齊2.4.1文本標記文字的修飾標記粗體標記<B>,<strong>

基本語法：<B>……</B><strong>……</strong>斜體標記<I>,<em>,<cite>基本語法：<I>……</I><em>……</em><cite>……</cite>2.4.1文本標記上標標記<sup>基本語法：<sup>……</sup>下標標記<sub>基本語法：<sub>……</sub>大字號標記<big>基本語法：<big>……</big>小字號標記<small>基本語法：<samll>……</small>2.4.1文本標記下劃線標記<U>

基本語法：<u>……</u>刪除線標記<s>,<strike>基本語法：<s>……</s><strike>……</strike>地址文字標記<address>基本語法：<address>……</address>打字機標記<tt>基本語法：<tt>……</tt>2.4.1文本標記等寬文字標記<code>、<samp>

基本語法：<code>……</code><samp>……</samp>鍵盤輸入文字標記<kbd>基本語法：<kbd>……</kbd>聲明變量標記<var>基本語法：<var>……</var>2.4.1文本標記字體標記<Font>基本語法：<font>……</font>字體標記的屬性face：字體size：字號color：顏色基本語法：

<fontface=“字體名稱1，字體名稱2，……”size=“value”Color=“value”>……</font>2.4.1文本標記段落標記<p>:段落標記（新建一個段落,相當于enter）<br>:換行標記（相當于軟回車：shift+enter）<nobr>:不換行標記基本語法：

<p>……</p><br><nobr>……</nobr>

段落對齊屬性align2.4.1文本標記

<wbr>:<nobr>標記中強制換行的標記基本語法：<nobr>……<wbr>…</wbr>…</nobr><pre>：預格式化標記

基本語法：<pre>……</pre><center>：居中標記基本語法：<center>……</center><blockquote>：縮排標記基本語法：<blockquote>……</blockquote>2.4.1文本標記水平線標記<hr>

hr中的常用屬性有：width：水平線的寬度size：水平線的高度color：水平線的顏色noshade：水平線去掉陰影屬性align：水平線對齊屬性基本語法：

<hrwidth=value1size=value2color=value3align=value4noshade>注：value1、value2表示像素值或百分比

value3表示顏色名稱或十六進制數(shù)

value4表示left、right或center

2.4.1文本標記在文字上方標注說明標記<RT>,<ruby>

基本語法：<ruby>

被標示的文字

<RT>

說明文字

</RT></ruby>舉例：<ruby>886<RT>拜拜啦</RT></ruby>

2.4.1文本標記圖片的基本格式JpgGifBmp2.4.2圖像標記路徑1、絕對路徑：為文件提供的完全路徑，包括適用的協(xié)議或盤符。例：/index.htmd:/wsp/myweb/images/back.jpg2.4.2圖像標記2、相對路徑：指由這個文件所在的路徑引起的跟其它文件(或文件夾)的路徑關(guān)系。例：文件1.htm的絕對路徑是：d:/wsp/myweb/1.htm文件2.htm的絕對路徑是：d:/wsp/myweb/2.htm

那么：1.htm相對于2.htm的路徑就是：1.htm2.4.2圖像標記相對鏈接的使用方法：如果鏈接到同一目錄下，則只需輸入要鏈接文檔的名稱。例：<ahref=“1.htm”>如果鏈接到下一級目錄，則需要先輸入目錄名，然后加“

/”，再輸入文件名。例：<ahref=“images/back.htm”>如果連接到上一級目錄，則需要先輸入”．．/“，然后再輸入目錄名、文件名。

例：<ahref=“．．/myweb1/index.htm”>2.4.2圖像標記3、根路徑：根目錄的相對地址。根路徑的書寫方式：以斜杠“

/”

開頭，然后是文件夾名，再寫文件名。例：<ahref=“/mywebindex.htm”>2.4.2圖像標記圖片標記<img><img>相關(guān)屬性：src：描述圖片的路徑lowsrc：設定分辯率比較低的圖片alt：設定圖像的提示文字屬性width、height：設定圖像的寬度和高度border：設定圖片的邊框vspace：設定圖像的垂直間距hspace：設定圖像的水平間距align：設定圖像的排列屬性2.4.2圖像標記圖片標記<img>基本語法：<imgsrc=“image_url”/>

語法解析：<img>是插入圖片的標記

src是描述圖片路徑的屬性

“image_url”表示圖片的路徑舉例：<imgsrc=“images/back.jpg”>2.4.2圖像標記設定圖片的提示文字alt屬性基本語法：<imgsrc=“image_url”alt=“提示文字”>舉例：<imgsrc=“images/1.jpg”alt=“美麗風景”>2.4.2圖像標記設定圖片的寬度：width設定圖片的高度：height基本語法：<imgsrc=“image_url”width=寬度height=高度>其中:寬度和高度的單位都是像素舉例：<imgsrc=“images/1.jpg”width=400height=500>2.4.2圖像標記設定圖像的垂直間距vspase設定圖像的水平間距hspase基本語法：<imgsrc=“圖片路徑”

vspase=間距hspase=間距>舉例：<imgsrc=“images/1.jpg”vspase=30hapase=30>2.4.2圖像標記設定圖片的邊框border基本語法：<imgsrc=“image_url”border=邊框?qū)挾?gt;舉例：<imgsrc=“images/1.jpg”border=10>2.4.2圖像標記設定圖像的排列屬性<align>基本語法：<imgsrc=“image_url”align=value>注：value值如下表所示,表示的是相對文字的對齊方式。舉例：<imgsrc=“images/1.jpgalign=right”>2.4.2圖像標記屬性值描述Top文字的中間線居在圖片上方Middle文字的中間線居在圖片中間Bottom文字的中間線居在圖片底部Left圖片在文字的左側(cè)Right圖片在文字的右側(cè)Absbottom文字的底線居在圖片底部Absmiddle文字的底線居在圖片中間Baseline英文文字基準線對齊texttop英文文字上邊線對齊2.4.2圖像標記圖片的超鏈接圖片的超鏈接就是在圖片上建立鏈接。和文字的鏈接相同，就是點擊過鏈接的圖片或文字后就會跳到相應的目的地址上。圖片的超鏈接與文字相同都是<a>標記，與文字不同的是，文字的鏈接只能是一個，而圖片不同可以是一個或多個。2.4.3超鏈接標記超鏈接：從一個頁面指向另一個目的端的鏈接。

鏈接標記：<A>鏈接標記的屬性：href:指定鏈接地址

name:給鏈接命名

title：給鏈接提示文字

target：指定鏈接的目標窗口

accesskey：鏈接熱鍵2.4.3超鏈接標記內(nèi)部鏈接與外部鏈接內(nèi)部鏈接：鏈接指向站點文件夾之內(nèi)的文件。例：<ahref=“jsjx/index.asp”>外部鏈接：鏈接指向站點文件夾之外的文件。例：<ahref=“http:///news.asp”>2.4.3超鏈接標記

制作內(nèi)部鏈接基本語法：<ahref=“

文件名”

>鏈接文字</a>

舉例：<ahref=“index.htm”>返回首頁</a>

設定鏈接的目標窗口基本語法：<ahref=“文件名”

target=“value”>鏈接文字</a>注：target屬性中value的取值：_parent：在上一級窗口中打開。_blank：在新窗口中打開。_self：在同一窗口中打開。（默認）_top：在瀏覽器的整個窗口中打開，忽略任何框架。舉例：<ahref=“index.htm”target=“_blank”>返回</a>2.4.3超鏈接標記書簽鏈接建立書簽基本語法：<aname=“name”>文字</a>舉例：<aname=“l(fā)b”>李白</a>

鏈接同一頁面的書簽

基本語法：<ahref=“#書簽名”>文字</a>

舉例：<ahref=“#lb”>李白</a>

鏈接到其他頁面中的書簽

基本語法：<ahref=“文件名#書簽名”>文字</a>

舉例：<aname=“

唐詩宋詞.htm#lb”>李白</a>2.4.3超鏈接標記外部鏈接

鏈接路徑應使用絕對路徑，即帶有協(xié)議或盤符的路徑。

鏈接到外部網(wǎng)站基本語法：<ahref=“http://……”>鏈接文字</a>

其中“

http://……

”表示http站點的“

URL”舉例：<ahref=“

”></a>2.4.3超鏈接標記下載文件基本語法：<ahref=“file_url”>鏈接文字</a>

其中“file_url”表示文件所在的路徑。2.4.3超鏈接標記圖片的超鏈接圖片的超鏈接就是在圖片上建立鏈接。和文字的鏈接相同，就是點擊過鏈接的圖片或文字后就會跳到相應的目的地址上。圖片的超鏈接與文字相同都是<a>標記，與文字不同的是，文字的鏈接只能是一個，而圖片不同可以是一個或多個。2.4.3超鏈接標記基本語法：<ahref=filename><imgsrc=filename>文字</a>舉例：<ahref=“index.htm”><imgsrc=“1.jpg”>返回</a>2.4.3超鏈接標記圖片的映射一張圖片可以有多個超鏈接，一幅圖片被切分成不同的區(qū)域，每一個不同的區(qū)域可以鏈接到不同的地址，這每個區(qū)域被稱為圖像的熱區(qū)。每一個熱區(qū)可以有自己的鏈接地址，瀏覽者單擊圖片上的熱區(qū)后，就會轉(zhuǎn)到相應的鏈接地址上去。這個過程就稱為圖像的映射。建立圖像映射分兩部分：圖像鏈接地址的創(chuàng)建和制作圖像映射。2.4.3超鏈接標記圖像鏈接地址的創(chuàng)建

先使用html語言創(chuàng)建出包含有文字鏈接地址的頁面；（一般在頁面內(nèi)建立標簽或建立頁面間鏈接）2.4.3超鏈接標記制作圖片映射使用工具(dreamweaver或frontpage)制作出圖像映射，即創(chuàng)建熱區(qū)，使用<map>、<area>標記。建立圖片的映像說明（使用alt屬性標簽）2.4.3超鏈接標記<area>標記的屬性

shape：定義圖象映射區(qū)域的形狀rect表示矩形區(qū)域

circle表示橢圓形區(qū)域poly表示多邊形區(qū)域

href：定義不同區(qū)域的鏈接地址alt：設定替代的文字，提示文字coords：設定區(qū)域坐標2.4.3超鏈接標記<area>標記的基本語法：<areashape=“形狀”coords=“區(qū)域坐標”href=“鏈接地址或#書簽名”alt=“說明文字”>例如：<areahref=“#“shape="rect“

coords=“34,27,336,173“

alt=亞洲>2.4.3超鏈接標記建立熱區(qū)的基本語法：<imgsrc=圖片路徑usemap=“#地圖名"><mapname=“地圖名"><areashape=形狀coords=區(qū)域

href=地址或#書簽名alt=提示文字></map>2.4.3超鏈接標記建立熱區(qū)的基本語法：<imgsrc=圖片路徑usemap=“#地圖名"><mapname=“地圖名"><areashape=形狀coords=區(qū)域

href=地址或#書簽名alt=提示文字></map>2.4.3超鏈接標記列表有兩種類型:無序列表有序列表無序列表:沒有順序的列表項目,使用●□

◆等特殊項目符號.有序列表:按照字母或數(shù)字等順序排列的列表項目.<LI>:列表項目標記2.4.4列表標記

有序列表標記：<OL>基本語法：<OL><li>項目1</li><li>項目2</li>

……</OL>2.4.4列表標記有序列表的屬性標記：<type>、<start>1.基本語法：<OLtype=value1start=value2><LI>項目1<LI>項目2

……</OL>注：value1表示有序列表項目符號的類型

value2表示項目開始的數(shù)值有序列表的類型：

1：數(shù)字1，2，3……a:字母a,b,c……A:字母A,B,C……i:小寫羅馬數(shù)字I,ii,iii……I:大寫羅馬數(shù)字Ⅰ，Ⅱ，Ⅲ2.4.4列表標記無序列表標記<UL>

基本語法：<UL> <li>項目1</li> <li>項目2</li>……</UL>

2.4.4列表標記

無序列表的類型屬性<Type>基本語法：<ULtype=value><LI>項目1<LI>項目2

……</UL>無序列表的類型：

disc表示●

circle表示○

square表示□2.4.4列表標記定義列表標記<DL>、<DT>、<DD>基本語法：<DL> <DT>名詞1</dt><DD>解釋1</dd> <DT>名詞2</dt><DD>解釋2</dd>

…… </DL>注：<DT>表示名詞；<DD>表示對名詞的解釋。2.4.4列表標記定義列表的嵌套基本語法：<DL><DT>名詞1</dt><DD>解釋1</dd><DD>解釋2</dd><DD>解釋3</dd>

……<DT>名詞2</dt><DD>解釋1</dd><DD>解釋2</dd><DD>解釋3</dd>

……

…… </DL>2.4.4列表標記無序及有序列表的嵌套

基本語法：<ULtype=value><LI>項目1<OLtype=value><LI>二級項目1</LI><LI>二級項目2</LI>

……</OL></LI><LI>項目2<OLtype=value><LI>二級項目1</LI<LI>二級項目2</LI>

……</OL></LI><UL>

2.4.4列表標記1.頁眉標記<header><header>標記用來包含文檔的頁眉，提供一些介紹性信息（如標題、副標題或logo等），用于正文或正文中的節(jié)。例如：<header><h1>walker石的博客</h1></header>2.4.5分節(jié)標記2.頁腳標記<footer><footer>標記定義文檔或節(jié)的頁腳。通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等?？梢栽谝粋€文檔中使用多個<footer>標記。例如：<footer><h1>版權(quán)所有@XXXX</h1></footer>2.4.5分節(jié)標記3.導航標記<nav><nav>標記用于定義網(wǎng)頁中的導航欄。例如：<nav><ul><li><ahref="#">菜單一</a></li><li><ahref="#">菜單二</a></li><li><ahref="#">菜單三</a></li></ul></nav>2.4.5分節(jié)標記4.章節(jié)標記<section><section>標記用來為網(wǎng)頁文檔分章節(jié)，表現(xiàn)文檔結(jié)構(gòu)最基本的元素，其代碼結(jié)構(gòu)如下，顯示效果如圖所示。

<section>

<h1>第一章標題</h1><p>內(nèi)容</p></section><section><h1>第二章標題</h1><p>內(nèi)容</p></section>2.4.5分節(jié)標記5.獨立文檔標記<article><article>標記一般用來表現(xiàn)文檔正文內(nèi)容。2.4.5分節(jié)標記6.相關(guān)文檔標記<aside><aside>標記定義<article>標記以外的內(nèi)容，用于包含當前文檔相關(guān)的內(nèi)容，如側(cè)欄提示文檔或相關(guān)文檔等。我們可以利用下面的代碼來定義頁面結(jié)構(gòu)，定義完成的頁面結(jié)構(gòu)如圖所示。

<header>頂部</header><nav>導航欄</nav><section><header>標題</header><article>內(nèi)容<article></section><aside>輔助欄</aside><footer>底部</footer>2.4.5分節(jié)標記基本格式：

<table><tr><td>……</td>……

</tr><tr><td>……</td>

……</tr>

……</table>語法解釋：<table>：表格標記<tr>：行標記<td>：單元格標記舉例說明2.4.6表格標記表格的邊框?qū)傩詁order：設置表格的邊框。（單位為像素）bodercolor：設置表格的邊框顏色。bodercolorlight：設置表格的（大邊框的）左上邊框或（小邊框的）右下邊框的顏色。bodercolordark：設置表格的（大邊框的）右下邊框或（小邊框的）左上邊框的顏色。2.4.6表格標記基本語法：<tableborder=寬度bordercolor=顏色bordercolorlight=顏色bordercolordark=顏色>

其中，顏色可以是名稱或十六進制數(shù)。舉例:<tableborder=10bordercolor=redbordercolorlight=bluebodercolordark=#ff2266>2.4.6表格標記

Width、Height：設定表格的寬度、高度Bgcolor：設定表格的背景色Background：設定表格的背景圖片基本語法：

<tablewidth=高度height=寬度bgcolor=背景色><tablebackground=背景圖片路徑名>舉例<tablewidth=400height=500bgcolor=red><tablebackground=1.jpg>表格的其他屬性2.4.6表格標記單元格的間距屬性cellspacingCellspacing：設定單元格與單元格之間的距離基本語法：<tablecellspacing=value>其中，value的單位是像素。舉例：<tablecellspacing=10>2.4.6表格標記單元格的邊距屬性cellpaddingCellpadding：設定單元格邊框與內(nèi)容之間的距離基本語法：<tablecellpadding=value>其中，value的單位是像素。舉例：<tablecellpadding=10>2.4.6表格標記表格的水平對齊align基本語法：<tablealign=對齊方式>語法解釋：對齊方式有：left：居左right：居右center：居中舉例：

<TABLEalign=left>2.4.6表格標記表格的標題<caption>：設置表格的標題，默認的情況下居中對齊。align：設置表格標題的對齊方式，有三種：left（左對齊）right（右對齊）center（居中）valign：設置表格標題的垂直對齊方式，即可在表格上方或下方，有兩種：top(上方)bottom(下方)基本語法：<captionvalign=對齊方式align=對齊方式>

……</caption>舉例<captionvalign=bottomalign=right>2.4.6表格標記表格的表頭的設置<th>基本格式：

<table><tr><th>……</th>

……</tr><tr><td>……</td>

……</tr>

……</table>舉例：設置表格的表頭<table><tr><th>姓名</th><th>出生年月</th></tr><tr><td>張三</td><td>1986.1.5</td></tr><tr><td>李四</td><td>1987.2.16</td></tr></table>2.4.6表格標記行標記<tr>的屬性：bgcolor：設置行的背景色。bordercolor：設置行的邊框顏色。bordercolorlight：設置行的亮邊框顏色。bordercolordark：設置行的暗變框顏色。align：設置行的對齊方式，（里面內(nèi)容的對齊方式）有三種：left、center、right。Valign：設置行的垂直對齊方式，有三種：top（居上）、middle（居中）、bottom（居下）。基本語法：<trbgcolor=顏色bordercolor=顏色

bordercolorlight=顏色bordercolordark=顏色align=對齊方式valign=對齊方式>2.4.6表格標記單元格標記<td>的屬性設置：bgcolor：設置單元格的背景顏色。background：設置單元格的背景圖片。bordercolor：設置單元格的邊框顏色。bordercolorlight：設置單元格的亮邊框顏色。bordercolordark：設置單元格的暗邊框顏色。width：設置單元格的寬度。height：設置單元格的高度。align：設定單元格內(nèi)容的水平對齊方式，有三種：right（居右）、left（居左）、center（居中）。Valign：設定單元格的垂直對齊屬性，有三種：top（居上）、middle（居中）、bottom（居下）。rowspan：單元格的跨行屬性。（垂直方向上）Colspan：單元格的跨列屬性。（水平方向上）2.4.6表格標記基本語法：<tdbgcolor=顏色background=圖片名bordercolor=顏色bordercolorlight=顏色bordercolordark=顏色align=水平對齊方式valign=垂直對齊方式width=寬度height=高度rowspan=行數(shù)colspan=列數(shù)>舉例<tdbgcolor=redbackground=1.jpgbordercolor=bluebordercolorlight=greenbordercolordark=#eeff33align=rightvalign=middlewidth=50height=40colspan=3rowspan=2>2.4.6表格標記表頭標記<th>的屬性設置：bgcolor：設置表頭的背景顏色。background：設置表頭的背景圖片。bordercolor：設置表頭的邊框顏色。bordercolorlight：設置表頭的亮邊框顏色。bordercolordark：設置表頭的暗邊框顏色。width：設置表頭的寬度。height：設置表頭的高度。align：設定表頭內(nèi)容的水平對齊方式，有三種：right（居右）、left（居左）、center（居中）。Valign：設定表頭的垂直對齊屬性，有三種：top（居上）、middle（居中）、bottom（居下）。rowspan：表頭的跨行屬性。Colspan：表頭的跨列屬性。2.4.6表格標記基本語法：<thbgcolor=顏色background=圖片名bordercolor=顏色bordercolorlight=顏色bordercolordark=顏色align=水平對齊方式valign=垂直對齊方式width=寬度

height=高度

溫馨提示

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

最新文檔

評論

0/150

提交評論