前端開發教程之HTML（二）

天的主要分享的是一些最基本、最常用的標簽：<img/>、<a></a>、<table></table>、<ul></ul>，以及文件路徑。

首先，先來了解一下<img/>標簽，它表示圖片標簽，在頁面中會出現很多的圖像，主要的編碼方式就是通過<img/>來實現的；那是怎么實現的呢？它通過一些自己的屬性來規定了這個圖像的樣式，要實現一個圖像最基本的屬性有 src屬性、width屬性、height屬性、alt屬性，詳解一下他們的屬性分別是做什么的，是實現圖像的哪一個部分的？

src屬性：就是你要放置圖像，該圖像的文件路徑，你的文件是放在C盤里面的文件還是D盤里面的文件，那么src就是這個圖像的路徑；

width屬性：就是你的圖像的寬度，同理height就是圖像的高度；

alt屬性：是指一種提示，比如你的鼠標在移動到你的圖片的時候或有文字提示、或者因為某種原因圖片不能正常顯示的時候，會有直接文字提示；

完整的語法：<img src="圖像路徑" width="100px" height="100px" alt="提示"/>

接下來，我們分享<a></a>鏈接標簽，它是一個能夠實現跳轉的標簽，在小編還是沒有完全總結<a>標簽的情況下，可以先簡單的可以理解為從一個頁面跳轉到另外一個頁面。要實現一個跳轉也是需要它自有的一些屬性來完成，href屬性，target屬性，name屬性。解一下他們的屬性分別是做什么的，是實現跳轉的哪一個部分的？

href屬性：就是你要跳轉到哪個頁面，就是這個頁面的路徑；

target屬性：就是你要跳轉的網頁的打開方式，它有自己的備選答案，其中_blank代表在新的標簽中打開，_self代表在當前頁面中打開（這個是缺省值）

name屬性：就是定義錨點名稱（只有當<a>標簽當做錨點使用時需要該屬性）

完整的語法：<a href="網頁路徑" target=“_blank”></.a>

總結一下<a>標簽常用的表現形式（作用）

1、網頁面間跳轉

2、頁面上的文檔(資源)下載

<a href="資源路徑"></a> 其中：資源路徑是指非html,htm,txt的資源，一般常見有為壓縮包形式 <a href="xxx.rar">下載</a>

3、返回頁面頂部的空連接

<a href="#">返回頂部</a> 跳轉到本頁(一般在開發、測試階段使用)

4、電子郵件鏈接

5、鏈接到Javascript

<a href="javascript：js代碼段落"></a> 就是在點擊<a>標簽的時候，執行一段js代碼

錨點：就是在頁面的任意位置處定義一個標識，隨時隨地的都可以跳轉到這個標識上；如果你想要在同一個頁面中，快速的到達某個點，這時候用錨點的方式是非常好的。

錨點的使用方式（2步驟）：

1、定義錨點 <a name="anchorName"></a>

2、鏈接到錨點 <a href="#anchorName">文本或圖像</a> 或者 <a href="url#anchorName"></a>

第三、關于<table>表格標簽

表格：有行有列，按照一定的格式(從左到右，從上到下)排列里面的內容；它能組織結構化的信息，按照一定的格式來進行數據顯示

要想創建表格：

1.定義表格:<table></table>

2. 定義行:<tr></tr>

3.創建列(單元格):<td></td>

注意:原始的表格中，每行的列數全部都是統一的。

在一些情況下，表格會有：表頭，表主體，表尾

表頭:<thead></thead>

表主體:<tbody></tbody>

表尾:<tfoot></tfoot>

實戰：創建一個表格，有4行3列

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表格的屬性：表格也是通過自己的屬性來形成自己風格的table

width：寬度

height：高度

align：水平對齊方式（left,center,right）

border：設置表格的變寬,以px(像素)為單位

cellpadding：內邊距,(單元格邊框與內容之間的距離)

cellspacing：外邊距,(單元格與單元格之間的距離)

bgcolor：表格背景顏色

align：設置該行內容的水平對齊方式(left,center,right)

valign：設置該行內容的垂直對齊方式(top,middle,bottom)

colspan：單元格跨列(向右合并單元格)

rowspan：單元格跨行(向下合并單元格)

表格標題：即表格第一行，文字加粗語法：<caption>標題</caption>

<table>

<tr>

</tr>

</table>

表格除了中規中矩，還有復雜應用，可以形成不規則的表格，實現不規則表格主要是通過跨列：colspan、跨行:rowspan

第四：關于列表<ul>

列表根據使用情景，可以分為：有序列表、無序列表、自定義列表，其中

1、有序列表

語法:<ol><li></li> 列表項</ol>

常用屬性:

type : 列表類型，取值可以為：

1 :表示數字（默認值）

a : 表示小寫字母

A : 表示大寫字母

i : 表示小寫羅馬數字

I : 表示大寫羅馬數字

start : 起始編號

2、無序列表

語法:<ul><li></li></ul>

屬性: type 取值可以為:

disc : 實心圓(默認)

circle : 空心圓

square : 實心矩形

3、自定義列表

<dl> 定義列表

<dt></dt> 列表內容標題

<dd></dd> 列表數據

</dl>

有序、無序使用場景：

1、從上到下，只有一列顯示數據

2、從左到右，只有一行顯示數據(導航)

自定義列表使用場景：做圖文混排的布局

最后是關于文件路徑，即URL

目錄結構的表示方式

URL : Uniform Resource Locator , 統一資源定位器，俗稱，路徑

作用：用來標識網絡中的資源位置

http://www.baidu.com

images/logo.gif

URL的三種形式: 絕對路徑相對路徑根相對路徑

1、絕對路徑

文件從最高級目錄開始的完整的路徑

絕對路徑就是完整的URL

1、從本機目錄結構查找，從盤符開始

C:\xxx\xxx.jpg

2、網絡資源目錄結構開始查找

協議、主機、目錄路徑、文件名稱

http://www.baidu.com/images/logo.jpg

2、相對路徑

相對于當前文件的位置，查找資源文件

1、同級目錄(直接找)

直接輸入資源文件名稱即可

2、子級目錄(先進入)

先進入到指定文件夾，再查找資源文件

3、父級目錄(先返回)

先返回到指定的父級目錄出，再查找指定資源文件

../ : 表示返回上一級

../../images/logo.png

3、根相對路徑

file:///C:/zhaoxu/ ........ 本地訪問

http://www.baidu.com

http://localhost/ ...... 從服務器訪問數據

lt;font></font>標記和CSS替代語法

文本的大小文本的顏色文本的字體

size(1-7,默認值為3) color face

font-size color font-family

<font size=3 color="red" face="楷體">font標簽的屬性用法</font>

<p style="font-size:20px;color:red;font-family:楷體">文本的CSS用法</p>

<b>標記

font-weight:bold;

<i>標記

font-style:italic;

<u>標記

text-decoration:underline;

實例：

<font color="red" size="3"><b><i>歡迎光臨我的網站</i></b></font>

<style type="text/css">
.txt1{color:red;background:white;font-style:italic;font-weight:bold;}
</style>

<font class="txt1">使用CSS</font>
<sup></sup> 文字上標字體標簽(super)
<sub></sub> 文字下標字體標簽(subscipt)

.txt_super{
vertical-align: super;
}
.txt_sub{
vertical-align: sub;
}

<hr/>標記

水平線的高度對齊方式寬度顏色邊框顏色

size align width color

height text-align width background-color border-color

<hr size=50 align="center" width=100 color="red"/>
<hr style="height:50px;align:center;width:100px";background-color="red"/>

<ul>標記

type屬性值

disc 默認值,實心圓。

circle 空心圓。

square 實心方塊。

list-style-type：

disc(實心圓)、circle(空心圓)、square(方塊)、decimal(阿拉伯數字)、lower-roman(小寫羅馬數字)、

upper-roman(大寫羅馬數字)、lower-alpha(小寫英文字母)、upper-alpha(大寫英文字母)、none(無項目符號)。

默認值:disc(實心圓)

<ol>標記

type屬性值

1 默認值。數字有序列表。(1、2、3、4)

a 按字母順序排列的有序列表，小寫。(a、b、c、d)

A 按字母順序排列的有序列表，大寫。(A、B、C、D)

i 羅馬字母，小寫。(i, ii, iii, iv)

I 羅馬字母，大寫。(I, II, III, IV)

list-style-type:

disc(實心圓)、circle(空心圓)、square(方塊)、decimal(阿拉伯數字)、lower-roman(小寫羅馬數字)、

upper-roman(大寫羅馬數字)、lower-alpha(小寫英文字母)、upper-alpha(大寫英文字母)、none(無項目符號)。

默認值:disc(實心圓)

<table>表格

實例：合并圖片

利用HTML4提供cellpadding和cellspacing屬性，可以達到合并圖片的效果，但是HTML5已經確定不再支持這兩個屬性

<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="ch07_03/1.jpg"/></td>
<td><img src="ch07_03/2.jpg"/></td>
</tr>
<tr>
<td><img src="ch07_03/3.jpg"/></td>
<td><img src="ch07_03/4.jpg"/></td>
</tr>
</table>

使用CSS樣式實現合并圖片

<!DOCTYPE HTML>
<html>
<head>
<title>合并圖片</title>
<style type="text/css">
table{border-collapse: collapse;} /* 邊框會合并為一個單一的邊框 */
td{padding:0;}
img{display: block;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="ch07_03/1.jpg"/></td>
<td><img src="ch07_03/2.jpg"/></td>
</tr>
<tr>
<td><img src="ch07_03/3.jpg"/></td>
<td><img src="ch07_03/4.jpg"/></td>
</tr>
</table>
</body>
</html>

使用CSS語法進行定位

立和使用列表

定義列表

<dl></dl>列表標簽定義列表;
<dt>定義列表標題;
<dd>定義列表內容;

說明:

1. dt和dd對應著的, 一個dt可以對應著多個dd;

2. dd完全是為了dt服務的, 對標題進行描述;

實例:

<dl>
<dt>標題1</dt><dd>內容11</dd><dd>內容12</dd>
<dt>標題2</dt><dd>內容21</dd><dd>內容22</dd>
</dl>

有序列表(unordered list)

<ol></ol> 列表標簽定義一個標有數字的列表;

1 默認值。數字有序列表。(1、2、3、4)

a 按字母順序排列的有序列表，小寫。(a、b、c、d)

A 按字母順序排列的有序列表，大寫。(A、B、C、D)

i 羅馬字母，小寫。(i, ii, iii, iv)

I 羅馬字母，大寫。(I, II, III, IV)

<ol>
<li>聯系人:</li>xxx
<li>聯系地址:</li>北京市豐臺區
<li>郵政編碼:</li>100036
</ol>

無序列表(ordered list)

<ul></ul> 列表標簽定義一個標有圓點的列表;

disc 默認值,實心圓。

circle 空心圓。

square 實心方塊。

<ul>
<li></li>
<li></li>
<li></li>
</ul>

目錄列表所有主流瀏覽器都支持 <dir> 標簽。。

<dir></dir>標簽定義目錄列表。

<dir>
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</dir>

菜單列表目前所有主流瀏覽器都不支持 <menu> 標簽。

<menu></menu>標簽可定義一個菜單列表。

<menu>
<li>html</li>
<li>xhtml</li>
</menu>

在實際工作中, 它的用途較少, 大部分我們還是用ul;

另外還可以使用:

<div align=""></div>分區標簽,用來排版大塊HTML段落,也用于格式化表

在線咨詢

上一篇：9.HTML鏈接標簽
下一篇：HTML 表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端開發教程之HTML（二）

定義列表

有序列表(unordered list)

無序列表(ordered list)

目錄列表 所有主流瀏覽器都支持 <dir> 標簽。。

菜單列表 目前所有主流瀏覽器都不支持 <menu> 標簽。

您的項目需求

目錄列表所有主流瀏覽器都支持 <dir> 標簽。。

菜單列表目前所有主流瀏覽器都不支持 <menu> 標簽。