1. 程式人生 > >HTML學習----------DAY1 第三節

HTML學習----------DAY1 第三節

好的 源碼 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 第三節