天天看點

html常用标簽(圖像标簽img,連結标簽a,錨點定位,及路徑)查文檔

1 圖像标簽img (重點)

單詞縮寫: image 圖像

HTML網頁中任何元素的實作都要依靠HTML标簽,要想在網頁中顯示圖像就需要使用圖像标簽,接下來将詳細介紹圖像标簽以及和他相關的屬性。其基本文法格式如下:

該文法中src屬性用于指定圖像檔案的路徑和檔案名,他是img标簽的必需屬性。

<img src="圖像URL" />
           
html常用标簽(圖像标簽img,連結标簽a,錨點定位,及路徑)查文檔

2 連結标簽(重點)

單詞縮寫: anchor 的縮寫 [ˈæŋkə(r)] 。基本解釋 錨, 鐵錨 的

在HTML中建立超連結非常簡單,隻需用标簽環繞需要被連結的對象即可,其基本文法格式如下:

<a href="跳轉目标" target="_blank" rel="external nofollow"  target="目标視窗的彈出方式">文本或圖像</a>
           

href:用于指定連結目标的url位址,當為标簽應用href屬性時,它就具有了超連結的功能。 Hypertext Reference的縮寫。意思是超文本引用

target:用于指定連結頁面的打開方式,其取值有self和blank兩種,其中self為預設值,blank為在新視窗中打開方式。

注意:

1.外部連結 需要添加 http:// www.baidu.com

2.内部連結 直接連結内部頁面名稱即可 比如 < a href="index.html" target="_blank" rel="external nofollow" > 首頁 </a >

3.如果當時沒有确定連結目标時,通常将連結标簽的href屬性值定義為“#”(即href="#" target="_blank" rel="external nofollow" ),表示該連結暫時為一個空連結。

4.不僅可以建立文本超連結,在網頁中各種網頁元素,如圖像、表格、音頻、視訊等都可以添加超連結。

3 錨點定位 (難點)

通過建立錨點連結,使用者能夠快速定位到目标内容。 建立錨點連結分為兩步:

1.使用“a href=”#id名>“連結文本"</a>建立連結文本(被點選的)

  <a href="#two" target="_blank" rel="external nofollow" >   

2.使用相應的id名标注跳轉目标的位置。

  <h3 id="two">第2集</h3> 

4 base 标簽 基本的

base 可以設定整體連結的打開狀态

base 寫到 之間

把所有的連接配接 都預設添加

<base target="_blank"/>
           

5 特殊字元标簽 (了解)

html常用标簽(圖像标簽img,連結标簽a,錨點定位,及路徑)查文檔

6 注釋标簽

在HTML中還有一種特殊的标簽——注釋标簽。如果需要在HTML文檔中添加一些便于閱讀和了解但又不需要顯示在頁面中的注釋文字,就需要使用注釋标簽。其基本文法格式如下: ​

html <!-- 注釋語句 --> ctrl + / 或者 ctrl +shift + /

注釋内容不會顯示在浏覽器視窗中,但是作為HTML文檔内容的一部分,也會被下載下傳到使用者的計算機上,檢視源代碼時就可以看到。

7 路徑(重點、難點)

html常用标簽(圖像标簽img,連結标簽a,錨點定位,及路徑)查文檔

實際工作中,通常建立一個檔案夾專門用于存放圖像檔案,這時再插入圖像,就需要采用“路徑”的方式來指定圖像檔案的位置。

根目錄 目前目錄

路徑可以分為: 相對路徑和絕對路徑

7.1 相對路徑

以引用檔案之網頁所在位置為參考基礎,而建立出的目錄路徑。是以,當儲存于不同目錄的網頁引用同一個檔案時,所使用的路徑将不相同,故稱之為相對路徑。

  1. 圖像檔案和HTML檔案位于同一檔案夾:隻需輸入圖像檔案的名稱即可,如<img src="logo.gif" />。
  2. 圖像檔案位于HTML檔案的下一級檔案夾:輸入檔案夾名和檔案名,之間用“/”隔開,如<img src="img/img01/logo.gif" />。
  3. 圖像檔案位于HTML檔案的上一級檔案夾:在檔案名之前加入“../” ,如果是上兩級,則需要使用 “../ ../”,以此類推,如<img src="../logo.gif" />。

7.2 絕對路徑

絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之是以稱為絕對,意指當所有網頁引用同一個檔案時,所使用的路徑都是一樣的

“D:\web\img\logo.gif”,或完整的網絡位址,例如“http://www.itcast.cn/images/logo.gif”。

8 清單标簽

8.1 無序清單 ul (重點)

無序清單的各個清單項之間沒有順序級别之分,是并列的。其基本文法格式如下:

<ul>
  <li>清單項1</li>
  <li>清單項2</li>
  <li>清單項3</li>
  ......
</ul>
           

1. <ul></ul>中隻能嵌套<li></li>,直接在<ul></ul>标簽中輸入其他标簽或者文字的做法是不被允許的。

 2. <li>與</li>之間相當于一個容器,可以容納所有元素。

 3. 無序清單會帶有自己樣式屬性,放下那個樣式,一會讓CSS來!

8.2 有序清單 ol (了解)

有序清單即為有排列順序的清單,其各個清單項按照一定的順序排列定義,有序清單的基本文法格式如下:

<ol>
  <li>清單項1</li>
  <li>清單項2</li>
  <li>清單項3</li>
  ......
</ol>
           

所有特性基本與ul 一緻。   但是實際工作中, 較少用 ol

8.3 自定義清單(了解)

定義清單常用于對術語或名詞進行解釋和描述,定義清單的清單項前沒有任何項目符号。其基本文法如下:

名詞1

名詞1解釋1

名詞1解釋2

...

名詞2

名詞2解釋1

名詞2解釋2

查文檔

經常查閱文檔是一個非常好的學習習慣。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

繼續閱讀