HTML基本標籤和圖片音訊連結和css
如若要做圖片的連結在引入圖片時我們可以給圖片定義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卻不可以。