Web前端-Html部分筆記（二）
以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。
一、常用基礎標籤
1、h標籤(Headline)(雙標籤)
-
作用
用於給文字新增標題語義 -
格式
<h1>xxx</h1> -
說明
-
H標籤是用來給文字新增標題語義的, 而不是用來修改文字的樣式的
-
H標籤一共有6個, 從H1~H6, 最多就只能到6, 超過6則無效
-
被H系列標籤包裹的內容會獨佔一行
-
在H系列的標籤中, H1最大, H6最小
-
在企業開發中, 一定要慎用H系列的標籤, 特別是H1標籤. 在企業開發中一般情況下一個介面中只能出現一個H1標籤,
-
H1預設樣式:margin:8px;
-
H2標籤儘量在頁面中不要超過5個
-
針對搜尋引擎來說是告訴了不同標籤下代表不同的重要級別內容。如果你在一個網頁中使用的1-2中H型標籤中都含有一個相同關鍵字，搜尋引擎也會格外注重你所注重關鍵字與內容，但切記別亂用。
-
2、br標籤(Break)(單標籤)
-
作用
讓內容換行 -
格式aaaaa<br/>bbbbb
-
說明
br的意思是不另起一個段落進行換行，如果需要另起了一個段落，則應該使用p標籤來做。
3、p標籤(Paragraph)(雙標籤)
-
作用
告訴瀏覽器哪些文字是一個段落 -
格式
<p>xxxxxxxx</p> -
說明：
在瀏覽器中會單獨佔一行且自動換行。
-
p標籤與br標籤的區別
1、相同之處
br和p都是有換行的屬性及意思
2、不同之處
1、 <br/>是單標籤 <p></p>是雙標籤
2、br標籤是小換行提行，p標籤是大換行（分段）作用
4、 a標籤(anchor)(單標籤)
-
作用
用於從一個頁面連結到另一個頁面 -
格式
<a href="http://www.baidu.com">百度一下就知道</a> -
說明：
-
在a標籤之間一定要寫上文字，如果沒有，那麼在頁面上找不到這個標籤。
-
a標籤也叫做超級連結或超連結
-
-
屬性
-
href(hypertext reference)
-
指定跳轉的目標地址
-
已經寫好的連結文字路勁和連結到頁面中的一個錨點（id或name來定義的，這時瀏覽器地址後面會加上其id或name的值）
-
-
target告訴瀏覽器是否保留原始介面
-
_blank： 在新視窗中開啟被連結文件。
-
_self： 預設。在相同的框架中開啟被連結文件。
-
_parent： 在父框架集中開啟被連結文件。
-
_top： 在整個視窗中開啟被連結文件。
-
-
title懸停文字（介紹這個連結，只有在滑鼠移動到超連結上時才會顯示）
-
-
其他
-
base標籤和a標籤結合使用
-
如果每個a標籤都想在新頁面中開啟,那麼逐個設定a標籤的target屬性比較麻煩, 這時我們可以使用base和a標籤結合的方式,一次性設定有a標籤都在新頁面中開啟。
-
格式：
<head>
<base target="_blank" />
</head> -
說明：
-
base必須巢狀在head標籤裡面。
-
如果標籤上指定了target，base中也指定了target，那麼會按照標籤上指定的來執行。
-
-
-
假連結(本質是跳轉到當前頁面)
-
不跳轉的假連結
<a href="#">小電影</a>
或者 <a href="javascript:">小電影</a> -
跳轉到當前頁面指定位置(錨點連結)
<a href="#location">跳轉到指定位置</a>
在頁面的指定位置給任意標籤新增一個id屬性 例如:<p id="location">這個是目標</p>
-
-
跳轉到指定頁面的指定位置(注意和上邊當前頁面跳轉進行區分)
格式: <a href="錨點連結.html#location">跳轉到指定位置</a>
只需要在 錨點連結.html頁面新增一個id位置即可
-
5、img標籤(image)(單標籤)
-
作用
在網頁上插入一張圖片 -
格式
<img src="圖片路徑" /> -
圖片路徑：圖片路徑分為兩種
-
網路路徑：直接是其他伺服器的圖片地址
-
本地路徑：本地作業系統的路徑
-
一種是絕對路徑、一種是相對路徑(相對於該HTML頁面檔案所在路徑)。在企業級開發中沒有人使用絕對路徑，因為絕對路徑不易於移植。
-
-
-
常用屬性：
-
src(source) 告訴瀏覽器需要插入的圖片路徑, 以便於瀏覽器到該路徑下找到需要插入的圖片
-
alt(alternate) 規定影象的替代文字，只有在src指定的路徑下找不到圖片，才會顯示alt指定的文字
-
title懸停文字(介紹這張圖片, 只有在滑鼠移動到圖片上時才會顯示)
-
height設定圖片顯示的高度
-
width設定圖片顯示的寬度
如果想讓圖片等比拉伸, 只寫高度或者寬度即可，兩個都寫會造成圖片比例失衡。
-
6、nobr標籤(雙標籤)
-
作用
強制不換行標籤-禁止內容換行 -
格式
<nobr>xxx</nobr> -
說明：
-
不換行內容放入\ 與\ 之間即可
-
如不遇到br換行標籤，內容在一行顯示完，如遇到br換行標籤，內容將在加br換行自動換行
-
7、span 標籤(雙標籤)
-
作用
沒有實際語義，但是有時比較有用，它的存在純粹是為了應用樣式，
給一段內容加上 <span></span> 標記可以通過在span上定義樣式來設定其內容的樣式