html筆記 標籤屬性、圖像和連接、超連接

HTML 標籤屬性：

<b></b>:加粗

<i></i>:斜體

<u></u>:下劃線

<s></s>:刪除線

:上標

:下標

<b>加粗</b>

<i>斜體</i>

<u>下劃線</u>

<s>刪除線</s>

^上標

_下標

<h1>一級標題</h1>

<h2>二級標題</h2>

<h3>三級標題</h3>

屬性:文本的水平對齊方式

取值 ：left、center、right

<p></p>

屬性:align:left、center、right

demo

<p align="right">the first paragraph</p>

<p>the second paragraph</p>

分割線

做用：在頁面中表現爲一條直線

語法：<hr>

屬性：

size 尺寸 以px爲單位

width寬度 以px或%爲單位

align 水平對齊方式

color 顏色

demo

<p><hr size="5px" width="50%" align="center" color="red"></p>

分區元素

塊分區元素

語法：<div></div> 佈局

行內分區元素

語法：<span></span>設置同一行文字內的不一樣樣式

demo

<div>鵝鵝鵝</div>

<div>鵝鵝鵝</div>

<span>鵝鵝鵝</span>

<span>鵝鵝鵝</span>

行內元素 與 塊級元素

按照元素們的表現形式來分類，分爲行內元素和塊級元素

行內元素：在一行 內容許顯示多個元素的，叫行內元素 span,i,b,s,u,sup,

做用：包裹文本，並處理文本的形式

塊級元素：每一個元素獨佔一行顯示的，叫級元素 div,p,<h1>,h1,h2,h3

做用：佈局

注意

一、p標記不能嵌套其餘的塊級元素

二、行內元素中最好不要嵌套塊級元素

 

圖像和連接

一、URL

目錄結構：目錄，保存文件的文件夾名稱

什麼是URL（uniform resource locator）統一資源定位器 用來標識資源文件的位置

一、URL在wed中的表現形式

一、絕對路徑：從文件的最高級目錄處開始查找資源文件所結過的路徑 使用場合：當想訪問互聯網上的資源時，只能使用絕對路徑

完整的絕對路徑四個部分

一、協議名 http

二、域名（主機名，IP地址）www.baidu.com

三、跟相對路徑

四、文件名

www.baidu.com/img/baidu_jgylogo3.gif

二、相對路徑(重點)場合：使用本機文件時使用 從當前文件位置處開始查找資源文件所通過的路徑

一、同目錄，直接用

二、子目錄，先進入 /

三、父目錄，先返回 ../

三、跟相對路徑 路徑顯示是以 /做爲開始的。 /:表示是服務器的跟路徑

二、圖像

一、圖像格式

wed中支持的圖像格式

一、*.jpg

二、*.gif

三、*.png

二、圖像的語法

標記:<img>

一、src:指定要顯示圖像 URL

二、width：圖像的寬度

三、height：圖像的高度

四、title：鼠標懸停時，要顯示的文本

demo

<p>絕對路徑</p>

<p>

<img src="http://www.baidu.com/img/day1/33.jpg">

</p>

<p>相對路徑</p>

<p>

<img src="/img/33.jpg">

</p>

<p>跟相對路徑</p>

<p>

<img src="/XUFEI/month1/day1/33.jpg"</

</p>

三、超連接

一、語法

標記：<a>內容</a>

屬性：

一、href:要連接的HTML頁面的URL

二、target：目標，指定新網頁的打開方式

取值：

一、—blank：在新標籤中打開網頁

二、_self:在自身標籤頁中打開新網頁

demo

<h3>一、哈哈哈哈哈哈哈</h3>

<a href="http://www.codeby.com">哈哈哈哈</a>

<h3>二、在新標籤中打開</h3>

<a href="http://www.codeby.com" target="_blank"><img src="/XUFEI/month1/day1/33.jpg"></a>

二、連接的表現形式

一、點擊操做時，完成資源下載的操做 連接的資源爲zip/rar時則爲下載操做<a href="day.rar">下載</a>