HTML學習----------DAY1 第三節
阿新 • • 發佈:2017-12-14
好的 源碼 ble css 演示 tro span 很好 結果
本章通過實例向您演示最常用的 HTML 標簽。
提示:不要擔心本章中您還沒有學過的例子,您將在下面的章節中學到它們。
提示:學習 HTML 最好的方式就是邊學邊做實驗。我們為您準備了很好的 HTML 編輯器。使用這個編輯器,您可以任意編輯一段 HTML 源碼,然後單擊 TIY 按鈕來查看結果。
HTML 標題
HTML 標題(Heading)是通過 <h1> - <h6> 等標簽進行定義的。
代碼:
<html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p>請僅僅把標題標簽用於標題文本。不要僅僅為了產生粗體文本而使用它們。請使用其它標簽或 CSS 代替。</p> </body> </html>
效果演示:
HTML 段落
HTML 段落是通過 <p> 標簽進行定義的。
<html> <body> <p>(*^__^*) 嘻嘻……,我是段落1。</p> <p>╭(╯^╰)╮,我是段落2。</p> <p>(╯‵□′)╯︵┻━┻,本段落豈是爾等可以看見的。</p> <p>段落元素由 p 標簽定義。</p> </body> </html>
演示效果:
HTML 鏈接
HTML 鏈接是通過 <a> 標簽進行定義的。
<html> <body> <a href="http://www.w3school.com.cn"> This is a link</a> <p></p> <!因為不知道用什麽換行,所以嘗試了用添加一個空的段落,這就相當於換行了。而且很顯然,我也不知道腫麽去註釋。。。(在學弟和度娘的幫助下,才知道的)> <p></p> <a href="https://www.luogu.org/problemnew/show/1454"> 這是我的做的題目。</a> <br><!後來才發現可以用br來實現換行> <p>這是換行</p> </body> </html>
效果演示:
註釋:在 href 屬性中指定鏈接的地址。
(您將在本教程稍後的章節中學習更多有關屬性的知識)。
HTML 圖像
HTML 圖像是通過 <img> 標簽進行定義的。
<html> <body> <img src="/i/eg_w3school.gif" width="300" height="120" /> <br> <img src="http://images.cnblogs.com/com/cangT-Tlan/1099682/o_%e5%a4%b4%e5%83%8f2.jpg" width="100" height="120" /> <br> <img src="http://images.cnblogs.com/com/cangT-Tlan/943345/o_20150423160900_86322.jpg" width="300" height="200" /> <! width用來圖片調節寬度,height用來調節圖片的高度> </body> </html>
效果演示:
註釋:圖像的名稱和尺寸是以屬性的形式提供的。
學習內容轉自:http://www.w3school.com.cn/html/html_basic.asp
HTML學習----------DAY1 第三節