Java自學-HTML(2)
阿新 • • 發佈：2021-08-12
Java自學-HTML(2)
1、網頁基本標籤
標籤字母+Tab鍵，自動生成標籤。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>基本標籤學習</title> </head> <body> <!--標題標籤--> <h1>一級標籤</h1> <h2>二級標籤</h2> <h3>三級標籤</h3> <h4>四級標籤</h4> <h5>五級標籤</h5> <h6>六級標籤</h6> <!--段落標籤--> <p>兩隻老虎 兩隻老虎</p> <p>跑得快 跑得快</p> <p>一隻沒有耳朵 一隻沒有尾巴</p> <p>真奇怪 真奇怪</p> <p>兩隻老虎 兩隻老虎</p> <p>跑得快 跑得快</p> <p>一隻沒有耳朵 一隻沒有尾巴</p> <p>真奇怪 真奇怪</p> <!--水平線標籤--> <hr/> <!--換行標籤--> 兩隻老虎 兩隻老虎<br/> 跑得快 跑得快<br/> 一隻沒有耳朵 一隻沒有尾巴<br/> 真奇怪 真奇怪<br/> 兩隻老虎 兩隻老虎<br/> 跑得快 跑得快<br/> 一隻沒有耳朵 一隻沒有尾巴<br/> 真奇怪 真奇怪<br/> <!--粗體、斜體--> <h1>字型樣式標籤</h1> 粗體:：<strong>i love you</strong><br/> 斜體：<em>i love you</em> <br/> <!--特殊符號--> 空 格 <br/> 空 格 <br/> <!--大於號,greater than--> > <br/> <!--小於號,less than--> < <br/> <!--版權符號--> ©版權所有蔡偉。 <br/> <!-- 特殊符號記憶方式 & ; --> </body> </html>
2、影象標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>影象標籤學習</title> </head> <body> <!-- img學習 src :圖片地址(必填) 相對地址(推薦使用),絕對地址 ../--上一級目錄 alt :圖片名字（必填) --> <img src="../resources/image/1.jpg" alt="小灰慄的頭像" title="懸停文字" width="300" height="300" > </body> </html>
3、超連結標籤及應用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>連結標籤學習</title> </head> <body> <!--使用id作為標記--> <a id="top">頂部</a> <!-- a標籤 href :必填,表示要跳轉到那個頁面 target :表示視窗在哪裡開啟 _blank在新標籤中開啟 _self在自己的網頁中開啟 --> <a href="1.我的第一個網頁.html" target="_blank">點選我跳轉到頁面1</a> <a href="https://www.baidu.com" target="_self">點選我跳轉到百度</a> <br/> <!--影象超連結--> <a href="1.我的第一個網頁.html"> <img src="../resources/image/1.jpg" alt="小灰慄的頭像" title="懸停文字" width="300" height="300" > </a> <p> <a href="1.我的第一個網頁.html"> <img src="../resources/image/1.jpg" alt="小灰慄的頭像" title="懸停文字" width="300" height="300" > </a> </p> <p> <a href="1.我的第一個網頁.html"> <img src="../resources/image/1.jpg" alt="小灰慄的頭像" title="懸停文字" width="300" height="300" > </a> </p> <p> <a href="1.我的第一個網頁.html"> <img src="../resources/image/1.jpg" alt="小灰慄的頭像" title="懸停文字" width="300" height="300" > </a> </p> <p> <a href="1.我的第一個網頁.html"> <img src="../resources/image/1.jpg" alt="小灰慄的頭像" title="懸停文字" width="300" height="300" > </a> </p> <!--錨鏈接 實現頁面間跳轉 1。需要一個錨標記 2。跳轉到標記 --> <a href="#top">回到頂部</a> <a id="down">down</a> <!--功能性連結 郵件連結: mailto: QQ連結 --> <a href="mailto:[email protected]">點選聯絡我！</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2260016947&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:2260016947:53" alt="你好，與我聯絡，領取蔡偉" title="你好，與我聯絡，領取蔡偉"/> </a> </body> </html>