閱讀目錄
| 字體 | 粗體 | 斜體 | 上下標 | 劃線 |
| b | em | sup | del | |
| strong | i | sub | u | |
| 排版 | span | br | ||
| 超連接 | a | |||
| 圖片 | img |
回到頂部javascript
字體標籤
粗體標籤<b>或<strong>(已廢棄)
示例：css
娃哈哈 <b>娃哈哈</b> <strong>wahaha</strong>
效果：html
斜體標記 <i>或<em>（已廢棄）
示例：java
娃哈哈 <i>娃哈哈</i> <em>娃哈哈</em>
效果：linux
上標<sup> 下標<sub>
上小標這兩個標籤容易混淆，怎麼記呢？這樣記：b的意思是bottom：底部瀏覽器
例子：服務器
5<sup>2</sup> 8<sub>2</sub>
效果：網絡
下劃線標記 <u> 中劃線標記<s>（已廢棄）和<del>
示例：post
<u>娃哈哈</u> <s>娃哈哈</s> <del>娃哈哈</del>
效果：字體
排版標籤
span
div和span是很是重要的標籤，div的語義是division「分割」； span的語義就是span「範圍、跨度」。CSS課程中你將知道，這兩個東西，都是最最重要的「盒子」。
<span>和<div>惟一的區別在於：<span>是不換行的，而<div>是換行的。
若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。
示例：
<body>
<div>
導航欄
</div>
<div>
中心banner
</div>
<span>路飛</span>
<span>alex</span>
</body>
效果：
span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。
就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。
span舉例：
<p> 商品簡介: <span> <a href="">詳細信息</a> <a href="">生產日期</a> </span> </p>
換行標籤<br> （已廢棄）
當你打算結束一行，而又不想開始一個新段落時，<br>標籤就派上用場了。不管你將它置於何處，<br>標籤都會產生一個強制的換行。
示例：
This <br> is a para<br>graph with line breaks
效果：
<p>標籤和<br>標籤的區別：<p>標籤會在段落的先後自動插入一個空行，而<br>標籤沒有空行；並且<br>標籤沒有屬性。
注意<br> 沒有結束標籤，把<br>標籤寫爲 <br/> 是經得起將來考驗的作法，XHTML 和 XML 都接受在打開的標籤內部來關閉標籤的作法。
超連接a
超連接有三種形式：
一、外部連接：連接到外部文件。舉例：
<a href="new.html">點擊進入到新網頁</a>
a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。是一個文本級的標籤。
href是英語hypertext reference超文本地址的縮寫。
固然，咱們也能夠直接點進連接，訪問一個網址。舉例以下；
<a href="http://www.baidu.com" target="_blank">進入百度</a>
二、錨連接：
指給超連接起一個名字，做用是在本頁面或者其餘頁面的的不一樣位置進行跳轉。好比說，在網頁底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用到了錨連接。
首先咱們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。效果以下：
上圖中解釋：
11行代碼表示，頂部這個錨的名字叫作top。
而後在底部設置超連接，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top）。注意上圖中紅框部分的#號不要忘記了，表示跳到名爲top的特定位置，這是規定。若是少了#號，點擊以後，就會跳到top這個文件或者top這個文件夾中去。
若是咱們將上圖中的第23行代碼寫成：
<a href="new.html#top">回到頂部</a>
就表示，點擊以後，跳轉到new.html頁面的top錨點中去。
說明：name屬性是HTML4.0之前使用的，id屬性是HTML4.0後纔開始使用。爲了向前兼容，所以，name和id這兩個屬性都要寫上，而且值是同樣的。
三、郵件連接：
代碼舉例：
<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
效果：點擊以後，會彈出outlook，做用不大。
前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息
特殊幾個連接：
返回頁面頂部的位置
<a href="#">跳轉到頂部</a>
與js有關：
<a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a>
- javascript:;表示什麼都不執行，這樣點擊
<a>時就沒有任何反應 例如：<a href="javascrip:;">內容</2 - javascript:是表示在觸發
<a>默認動做時，執行一段JavaScript代碼。 例如：<ahref="javascript:alert()">內容</a>
超連接的屬性
href：目標URLtitle：懸停文本。name：主要用於設置一個錨點的名稱。target：告訴瀏覽器用什麼方式來打開目標頁面。target屬性有如下幾個值：_self：在同一個網頁中顯示（默認值）_blank：在新的窗口中打開。_parent：在父窗口中顯示_top：在頂級窗口中顯示
blank就是「空白」的意思，就表示新建一個空白窗口。爲啥有一個_ ，就是規定，沒啥好解釋的。
也就是說，若是不寫target=」_blank」那麼就是在相同的標籤頁打開，若是寫了target=」_blank」，就是在新的空白標籤頁中打開。
ps:a是一個文本級的標籤
好比一個段落中的全部文字都可以被點擊，那麼應該是p包含a；
<p> <a href="">段落段落段落段落段落段落</a> </p>
而不是a包裹p：
<a href=""> <p> 段落段落段落段落段落段落 </p> </a>
a的語義要小於p，a就是能夠當作文原本處理，因此p裏面至關於放的就是純文字。
圖片標籤 <img />
img: 表明的就是一張圖片。是單邊標記。
img是自封閉標籤，也稱爲單標籤。
能插入的圖片類型：
-
可以插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什麼區別，css課上講。
-
不能往網頁中插入的圖片格式是：psd、ai
HTML頁面不是直接插入圖片，而是插入圖片的引用地址，因此也要把圖片上傳到服務器上。
src屬性：圖片的相對路徑和絕對路徑
這裏涉及到圖片的一個屬性：
src屬性：指圖片的路徑。
在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑
一、寫法一：相對路徑
相對當前頁面所在的路徑。兩個標記 . 和 .. 分表表明當前目錄和父路徑。
舉例1：
<!-- 當前目錄中的圖片 --> <img src="2.jpg"> <img src=".\2.jpg"> <!-- 上一級目錄中的圖片 --> <img src="..\2.jpg">
img 是image「圖片」的簡寫，src 是英語source「資源」的縮寫。
舉例2：
<img src="images/1.jpg">
上方代碼的意思是說，當前頁面有一個並列的文件夾images，在文件夾images中存放了一張圖片1.jpg
二、寫法二：絕對路徑
（1）以盤符開始的絕對路徑。舉例：
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
（2）網絡路徑。舉例：
<img src="http://www.baidu.com/2016040102.jpg">
相對路徑和絕對路徑的總結
相對路徑的好處：站點無論拷貝到哪裏，文件和圖片的相對路徑關係都是不變的。
相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。
問題：個人網頁在C盤，圖片卻在D盤，能不能插入呢？
答案： 用相對路徑不能，用絕對路徑也不能。
注意：可使用file://來插入，可是這種方法，沒有任何意義！由於服務器上沒有所謂c盤、d盤。
下面的方法是行的，可是沒有任何工程上的意義，這是由於服務器沒有盤符，linux系統沒有盤符：
<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />
總結一下：
-
咱們如今不管是在a標籤、img標籤，若是要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。
-
相對路徑，就是../ image/ 這種路徑。從本身出發，找到別人；
-
絕對路徑，就是http://開頭的路徑。
-
絕對不容許使用file://開頭的東西，這個是徹底錯誤的！
img標籤的經常使用其它屬性
width：寬度height：高度title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。align：指圖片的水平對齊方式，屬性值能夠是：left、center、right-
alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate 「替代」的意思。（有的瀏覽器不支持）
舉例：
示例：
嘿嘿<img src="images/bojie.jpeg" alt="波姐" title='波多野結衣' width="400" height="400">幺幺
文本級的標籤顯示在瀏覽器上時，無論你的圖片多高，它總會底邊對齊，這是一種現象，「高矮不齊，底邊對齊」。
此時你們能夠給圖片設置align屬性，來查看效果吧！
注意事項：
（1）若是要想保證圖片等比例縮放，請只設置width和height中其中一個。
（2）若是想實現圖文混排的效果，請使用align屬性，取值爲left或right
若是想點擊圖片的時候跳轉到某個連接，應該是：
<a> <img src="images/bojie.jpeg" alt="波姐" title='波多野結衣'> </a>
那麼給你們送圖片福利一波：
男生福利：
女生福利：