HTML詳解
初識HTML
Hyper Text Markup Language（超文本標記語言）
1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些網頁資訊 --> 6 <!--mate 一般用來作seo --> 7 <meta charset="UTF-8"> 8 <meta name = "keywords" content="學java，HTML"> 9 <meta name = "description" content="加油學會前端"> 10 ? 11 <!--title網頁標題--> 12 <title>我的第一個網頁</title> 13 </head> 14 <body> 15 hello,world! 16 </body> 17 </html>
網頁基本標簽
標題標簽
<!--標題標簽--> <h1>一級標簽</h1> <h2>二級標簽</h2> <h3>三級標簽</h3> <h4>四級標簽</h4> <h5>五級標簽</h5> <h6>六級標簽</h6>
段落標簽
1 <!--段落標簽--> 2 <p>London Bridge is falling down,</p> 3 <p>倫敦橋要倒了</p> 4 <p>Falling down, falling down.</p> 5 <p>要倒了，要倒了</p> 6 <p>London Bridge is falling down,</p> 7 <p>倫敦橋要倒了</p> 8 <p>My fair lady.</p> 9 <p>我美麗的淑女</p> 10 <p>Build it up with wood and clay,</p> 11 <p>用木和粘土在把它蓋好</p>
換行標簽
1 <!--換行標簽--> 2 London Bridge is falling down,<br/> 3 倫敦橋要倒了<br/> 4 Falling down, falling down.<br/> 5 要倒了，要倒了<br/> 6 London Bridge is falling down,<br/> 7 倫敦橋要倒了<br/> 8 My fair lady.<br/> 9 我美麗的淑女<br/> 10 Build it up with wood and clay,<br/> 11 用木和粘土在把它蓋好<br/>
水平線標簽
1 <!--水平線標簽--> 2 <hr/>
字體樣式標簽
1 <!--粗體，斜體標簽--> 2 <h1>字體樣式標簽</h1>? 4 粗體：<strong>i love you </strong><br/> 5 斜體：<em>i love you</em>
注釋和特殊符號
注釋寫法：<!-- -->
1 <!--特殊符號--> 2 空格：間 隔 <br/> 3 大于號：> <br/> 4 小于號：< <br/> 5 著作權：© 著作權所有<br/>
影像，超鏈接，網頁布局
影像標簽
1 <!-- 2 src: 圖片地址（必填） 3 (推薦)相對路徑：../resources/image/a.jpg 4 絕對路徑：E:\IDEAcode\HTML\resources\image\a.jpg 5 ../ --/上一級目錄 6 alt:圖片名字（必填） 7 title:滑鼠懸停顯示文字 8 width，height：寬高 9 --> 10 <img src="../resources/image/a.jpg" alt="氣質美女" title="懸停文字" width="300" height="450">
超鏈接標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>鏈接標簽</title> 6 </head> 7 <body> 8 <!--使用name作為標記--> 9 <a name="top">頂部</a> 10 ? 11 <!--a標簽 12 herf：必填，表示要跳轉到哪個頁面 13 target: 表示視窗在哪里打開 14 _blank:在新標簽頁打開 15 _self:在當前頁面打開，默認 16 ? 17 --> 18 ? 19 <a href="1.我的第一個網頁.html" target="_blank">點擊我跳轉到頁面</a> 20 <a href="https://www.baidu.com">點擊我跳轉到百度</a> 21 <br/> 22 <a href="1.我的第一個網頁.html"> 23 <img src="../resources/image/a.jpg" alt="氣質美女" title="懸停文字" width="300" height="450"> 24 </a> 25 ? 26 ? 27 <!--錨鏈接 28 1.需要一個標記 29 2.跳轉到這個標記 30 ? 31 --> 32 <a href="#top">回到頂部</a> 33 ? 34 <a name="down">底部</a> 35 ? 36 ? 37 <!--功能性鏈接 38 ? 39 1.郵件鏈接：mailto 40 2.qq鏈接，登陸qq推廣即可獲取鏈接 41 ? 42 --> 43 <a href="mailto:[email protected]">點擊聯系我</a> 44 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=aaaaaa0&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:aaaaaaa:53" alt="你好，聯系我獲取詳細資料" title="你好，聯系我獲取詳細資料"/></a> 45 ? 46 </body> 47 </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/884.html
標籤：HTML5