超詳細html知識
1.HTML 超文字標記語言。2014年釋出html5,用於靜態網頁的開發.
2.一個完整的html頁面
應該包括 html標籤 , head標籤,body標籤(後面會有程式碼闡述)
3.html常用標籤
1.<html> </html> html是跟標籤一個頁面只有一個。
2.<head> </head> head頭標籤,寫在這個標籤裡面的內容不會顯示在頁面上
3.<body></body>body身體。要顯示在頁面上的內容就寫在這個標籤裡面
4.<title></tilte> 設定頁面的主題。這個標籤非常重要,因為在搜尋引擎中,會根據這個標題來排名
5.<meta /> 是一個自結束標籤
meta的屬性 1> charset 這個屬性用來告訴瀏覽器你是用什麼編碼來編碼文字,讓瀏覽器按照你編碼的方式來解 碼,不然會亂碼。
2>name屬性 有兩個值
a.keywords content =“”,雙引號裡面的是關鍵詞。表示這個網頁的關鍵詞
b.description content=“ ” 是網頁的描述
在搜尋引擎的時候 檢索頁面時也會同時檢索關鍵字和網頁的描述,但是這兩個值不會列入 搜尋引擎的排名
3.http-equiv="refresh" content="秒數 ;url=http://www.badu.com" 在經過n秒後跳轉到要跳轉的網站。
<meta http-equiv="refresh" content="2;url=http://www.baidu.com"/>
6.標題標籤 h1~h6
h1也是非常重要,是在搜尋引擎的排名中,僅此於title標籤。後面的重要性依次遞減
一般一個網頁 就一個h1標籤。常用的有 h1 h2 h3
7<p></p>是一個段落標籤。p標籤裡面的內容代表一個段落
8.<br /> br標籤用於幻皇
9.< hr /> 這個也是自結束標籤 用於給頁面新增一條水平線
10.<image/>也是自結束標籤用於從外部匯入一個圖片
src 圖片的位置。 這個是相對路徑,相對於當前頁面所在位置的路徑 ../用於返回上一級目錄
alt 圖片的描述,當圖片無法顯示時,就用此文字來描述圖片,alt的最終意義在於,在搜尋引擎的時候,是根據alt的描述給圖片分類的。如果沒有alt 則不會被收錄
圖片的常用格式 : 1 .jpg 不能透明,顏色較多
2. gif 不能複雜透明,顏色較少
3.png png顯示的顏色多。支援複雜透明
圖片選擇的原則: 效果不一樣,選效果好的
效果一樣,選記憶體小的。
11超連結標籤 <a href="要連結的網站網址" , target=" 以什麼方式開啟連結的網址 _self在本來的視窗上開啟網址,_blank
新建一個視窗開啟網址"> </a>
12.內連框架 <iframe src="html語法規範.html" name="tom"> 內連 <iframe> 這個標籤不常用。瞭解。
程式碼示例
<!doctype html>
<html>
<head>
<!-- meta為自結束標籤,使用的時候要加上/
1 .charset屬性用於告訴瀏覽器,我們是用什麼編碼的這樣瀏覽器就能按照我們編碼的方式解碼,否則可能會出現亂碼。
2 .name 屬性 有兩個值
1>keywords :用於設定網頁的關鍵詞,content="h5,js,前端"
2>descripiton:用於設定網頁的描述。 content="一個前端資料的釋出網頁"
搜尋引擎在檢索頁面時,會同時檢索 關鍵詞 ,和描述,但是這兩個值不會影響搜尋引擎的排名。
3.http-equiv="refresh" content="秒數 ;url=http://www.badu.com" 在經過n廟後跳轉到要跳轉的網站。
<meta http-equiv="refresh" content="2;url=http://www.baidu.com"/>
-->
<meta charset="utf-8" />
<meta name="descripiton" content="前端網頁" />
<title> 這是一個網頁</title>
</head>
<body>
<!-- 標題標籤: 一共有6級標題 字型越來越小,我們不關心字型,只關心 “語意” 標籤,
一級標題標籤非常重要,在搜尋引擎中 重要性僅次於title標籤,會影響搜尋的排名。其餘的重要性依次遞減。
常用的標籤是 h1-h3.-->
<h1>2秒後將跳轉</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h6>hello</h6><h5>hello</h5>
<!-- p標籤: 段落標籤,表示那是一段。預設獨佔一行, 行間會有間距。-->
<p>
我 是p 標籤。 我們不關心字型,只關心哈哈哈。
</p>
<!-- br標籤 用於換行。-->
<p>
床前明月光,<br />
疑似地上霜。<br />
舉頭望明月,<br />
低頭思故鄉。<br />
</p>
<!-- 有些符號和html語法耦合了。所以要使用轉義字元才能表示那些符號
語法: &XXX;
小於 <
大於 >
空格
如果要用轉義字元可以去離線手冊上查詢對應的單詞。
-->
我是一個 人
<!--hr標籤,在頁面中加入一條水平線 自結束標籤<hr />-->
<hr />
<!--圖片標籤。用於從外部匯入一個圖片,
img img 也是自結束標籤,
屬性 src :圖片的位置
1.src下寫的都是相對於當前頁面所在的資料夾的相對路徑。 使用 ../返回上一級資料夾,寫幾個這個就想上返回幾層目錄。
alt :當圖片不顯示時,出現alt屬性中的內容(對圖片描述的內容),如果不寫alt屬性,那麼搜尋引擎不會對圖片收錄,因為搜尋引擎是通過alt屬性
的描述來知道圖片是個什麼圖片的
width :設定圖片的寬 一般以px作為單位
height:設定對圖片的高
寬度和高度如果只設置一個的話,另外一個也會按比例變化,如果同時設定,則會按照你設定的值,一般除了開發自適應頁面
不建議使用width 和height 如果要多大的話就直接設定多大
圖片的格式: 1.jpg jpg顯示的顏色較多,不支援透明
2.gif 支援的顏色稍比較單一,支援簡單透明(例如橫著豎著的。)
3.png png顯示的顏色多。支援複雜透明
圖片選擇的原則: 效果不一樣,選效果好的
效果一樣,選記憶體小的。
-->
<img src ="img/1.jpg" alt = "美景" width="200px"/>
<!--超連結標籤<a> </a> 單擊超連結標籤,可以開啟你設定了超連結對的網址 的那個網站。
未被訪問的連結帶有下劃線而且是藍色的
已被訪問的連結帶有下劃線而且是紫色的
活動連結帶有下劃線而且是紅色的
屬性: href 就是要連線到的網址
target _blank 新建一個視窗開啟要連結的頁面
_self 在本視窗開啟
內連線的名字。可以在內連線中開啟。
-->
<br />
<a href="http://www.baidu.com" target="_blank"> 超連結</a><br />
<a href="http://www.baidu.com" target="_self"> 超連結</a><br />
<a href="http://www.baidu.com" target="tom"> 超連結</a><br />
<iframe src="html語法規範.html" name="tom"> 內連 <iframe>
<body>
</html>
效果圖