如若要做圖片的連結在引入圖片時我們可以給圖片定義ID號，就跟錨鏈接的名字是一樣的道理

例如：<a id=f1 src="地址" alt=""></a>

<img id="f1" src="../image1/timg.jpg"alt="這是月亮圖片"width="300"height="300"title="月亮"><br/>

<a href="../Test1/Test3.html#f1">月亮</a>

如何用一個圖片做超連結的入口：

<a href="../Test1/Test3.html#f1"><img src="../image1/timg.jpg"
 
width="100"></a>

直接用img引用地址就可以了<img src="地址">

其實影像和圖片一樣都只需要加個ID屬性表示他的名稱就可以了

下面實現ABC三個頁面圖片和圖片和文字之間的跳轉：

A頁

<a href="../Test1/Test2.html#B1"><img id="A1" src="../image/img1.png" alt="0"width="50"/></a>

B頁

<a href="../Test1/Test3.html#C1"><img id="B1" src="../image/img1.png" alt="0"/></
 
a>

C頁

<a href="#C1"><a href="../Test1/Test1.html#A1">這是第一幅圖對應的話</a></a>

HTML基本標籤：

標題標籤：<H1>~<H6>

段落標籤：<p></p>

換行標籤：<br/>

水平線標籤：<hr/>

字型加粗標籤：<strong></strong>

斜體標籤：<em></em>

引入影象（images)

<img src=”路徑“alt=”圖片載入錯誤的替代文字“width=”寬度“height=”高度“

例項：

<img src= "../images/jin.jpg"alt="這是一幅月亮圖片"width="300"height="300">

超連結

1頁面間的連結：從A業跳轉到B頁

<a herf="地址"traget="目標視窗位置">熱點文字或圖片</a>

例項：<a herf="http://www.baidu.com"traget="_blank">跳轉到百度，開啟一個新的視窗</a>

<a herf="http://www.baidu.com"traget="_self">跳轉到百度，在本視窗開啟</a>

traget="_blank"就開啟一個新的視窗

traget="_self"就在本場口開啟新的網頁

2錨鏈接：跳至自身固定位置，或A頁跳至B頁固定位置，需錨點標記

錨點標記目標：

<a herf="#名稱">圖片或文字</a>

任意跳轉位置：

<a herf="網址地址/名稱“>熱點文字或圖片</a>

3.功能連結：

<a herf="mailto：郵箱地址“>熱點文字或圖片</a>

引入視訊元素：

普通結構：<video src="視訊路徑"controls></video>

多種選擇格式的寫法：

<video controls autoply>

    <source src = "../video/video.webm"type="video/webm">

    <source srv = "../video/video.mp4"type="video/mp4">

</vidoe>

注：autoply提供自動播放功能，controls提供開始，暫停，音量控制等控制元件，也可以繼續加上width=“寬度”屬性，他會自己匹配高度。

引入音訊檔案：

<audio src="音訊路徑"controls></audio>

<audio controls auqutoply>

    <source src="../music/music.mp3"type="audio/mpeg">

    <source src="../music/music.ogg"type="audio/ogg">

</audio>

頁面佈局分析：

頁面頭部；頁面主體；頁面底部

元素名

header       標題頭部區域內容

footer        標題腳部區域內容

section       Web網頁中的一塊獨立區域

article        獨立的文章內容

aside         相關內容和應用

nav           導航類輔助內容

<header>

    <h2>網頁頭部<h2>

<header>

<section>

    <h2>網頁主體內容<h2>

<section>

<footer>

    <h2>網頁底部<h2>

<footer>

css

語法{        宣告1；

                宣告2；

                宣告3     }

例如：

h1{    color:red；  

         font-size:12px      }

標籤選擇器：

用一個名字做選擇器，然後用這個名字包起來的內容都將按照宣告的格式顯示

類選擇器：

<style type="text/css">

.名字1{    宣告1；    }

</sytle>

ID選擇器：

<style type="text/css">

#名字2{    宣告1；    }

</style>

呼叫：

<p id=”名字2“class="名字1”>

也可已在另一個網頁建立css檔案，將宣告和標籤都寫在css中

例如：

p{    宣告1；

    宣告2；

}

h1{    宣告1；

    宣告2；

}

呼叫時在頭部引入：

<link herf="路徑"type="text/css"rel="stylesheet">

用import匯入：

<style>

        @import"路徑"

</style>

link： 
某html檔案的head中有：

<link rel="stylesheet" type="text/css" href="sheet.css">

• 1

link是一個比較老的html的標籤在任何瀏覽器下都可以很好的工作，link的作用是將外部檔案引入到當前檔案中，可以引入除去css檔案之外別的型別的檔案。但是隻能位於head中。

rel = “stylesheet”表示的是當前文件與引用的文件之間的關係。 
type=“text/css”表示引用的文件是文字型別的css檔案。 
href=“URL”指明引用檔案的URL。 

@import： 
某css檔案如下：

@import url(sheet.css);
.content{
  /* 
  ………………
   */
}

• 1
• 2
• 3
• 4
• 5
• 6

@import是css的一個屬性，代表著引入css檔案到當下css檔案中，且只能引入css檔案。@import只能位於檔案的頂部，這降低了靈活性。

在解析Dom。html檔案的時候，遇到link標籤，那麼就會通知資源載入器載入style.css資源，但是注意並不會阻塞html檔案的解析，接下來又會遇到要載入style2.css檔案，所以又通知資源載入器載入style2.css資源，此時html檔案繼續解析知道生成DOM樹觸發DOMcontent事件。同時會發現，這兩個css檔案的請求是在解析html的時候一併發出的，也就是說這兩個css檔案是並行載入的，這無疑是節約了時間。一般情況下，要在html解析完成並且生成DOM樹之後，才會進行css解析工作，所以只要在這一過程中得到css檔案即可。

在前面介紹過通過link方式引入多個css樣式表，他們之間是並行載入的，所以之間不會有影響。但是在@import中且不是這樣的，在解析DOM。html時候遇到link，會通知資源載入器載入style.css檔案，然後繼續解析HTML直到完成。值得注意的是，在載入style.css檔案的時候是很消耗時間的比如要建立連結，解析DNS等等工作。直到style.css載入完之後，對css檔案開始解析的時候發現有@import url(style2.css);開始載入style2.css。然後在給資源載入器傳送請求載入這個檔案。所以可以看出這兩個檔案的載入時序列的，所以是消耗時間的效能不好

link因為是html元素，可以通過js DOM動態的新增樣式，但是@import卻不可以。