HTML網頁製作基礎第五彈



昨天學習了那些標籤大家還記得嗎?H1-h6標題標籤,font字體屬性標籤,

圖像img標籤,這些標籤大家以後會經常用到的,大家一定要記牢。


那麼我們今天接着學習新的標和者標籤屬性吧

PRE標籤

pre標籤稱之爲預格式標籤,是用來顯示預先在html代碼中已定義好格式的文本,當文本顯示在瀏覽器中時,會遵循已在HTML源文檔中定義的格式。


代碼示例:

<html>

  <head>

   <title>

        My Page

   </title>

  </head>

  <body>

    <pre> 今天是HTML的第五彈,相信大家也對一些基本標籤有了一些瞭解,對於HTML基礎來說就是熟悉一些標籤的使用方法,暫時不會涉及到有關於邏輯處理的代碼,後續等我們學習到CSS和javascript的時候可能就需要大家更加關注了。

這段內容是用pre標籤包住的,沒有使用BR標籤,大家看看是不是也進行了換行。

</pre>

</body>

</html>

<!--pre標籤個人覺得一般用的很少,大家記得就可以-->

效果顯示:



a標籤

a標籤是在大家制作網頁中用的非常多的一個標籤,它的功能就是實現從一個網頁 到另外一個網或者網址。


語法:

<a href="要跳轉到的地址" >內容</a>

注意a標籤是由頭尾標籤的

代碼示例:

<html>

  <head>

   <title>

        My Page

   </title>

  </head>

  <body> 

    <a href="http://www.baidu.com">百度</a><br>

<a href="http://sina.com.cn">新浪</a>

</body>

</html>

效果顯示:


大家注意,如果跳轉到其他網頁的話最好在前面加上HTTP:// 不然基本無法條狀。如果是要跳轉到自己製作的網頁的話,就是在href=寫上HTML文檔的文件名。

如<a href="1.html"></a>

a標籤鏈接到本頁面的任意位置

a標籤不止可以跳轉到其他頁面,也可以跳轉到本頁面內某一個內容的位置


語法:

<a href="#這裏來">測試</a>

<a name="這裏來">來了</a>


代碼示例:

<html>

<head>

<title>My Page</title>

</head>

<body>

<a href="#這裏來">測試</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="這裏來">來了</a>

</body>

</html>


效果顯示:


首先設置一下需要跳轉的地方的位置用#告訴啥瀏覽器這是一個媌記點 後面需要跳轉的位置也需要用a標籤包起來定義name屬性,值必須要和上面定義的苗一致


電子郵件鏈接

用戶可以從網頁中發送電子郵件,要做到這一點,可在鏈接標籤中插入mailto:郵箱地址;


例如:

<a href="mailto:[email protected]">聽雨郵箱</a>


代碼示例:

<html>

<head>

<title>My Page</title>

</head>

<body>

<a href="mailto:[email protected]">聽雨郵箱</a>

</body>

</html>


效果顯示:


因爲聽雨電腦默認的郵箱已刪除,所以無法做出最終效果展示;


滾動標籤<marquee></marquee>


代碼示例:

代碼示例:

<html>

<head>

<title>My Page</title>

</head>

<body>

<marquee >這段文字將會在瀏覽器中進行滾動</marquee>

</body>

</html>

效果顯示:


滾動標籤可以設置scrolldelay="延遲時間,默認90ms",direction="滾動方向,默認從右向左"


聽雨稍後有時間會錄製一段視頻,因爲聽雨電腦的原因可能沒有聲音,主要教大家軟件的使用和基本操作。


那麼今天的內容就到這裏吧!大家明天見,每天學習一點,每天進步一點。

聽雨HTML基礎QQ交流羣:577919336,大家有興趣的可以進羣交流一下。

或者有問題去聽雨的博客反應:

博客地址:http://blog.csdn.net/dx15618816293  

附(因爲聽雨電腦的原因,可能有時很多尾標籤的/沒有敲上去,所以如果大家是直接複製我的源碼過去的話可能無法顯示,建議大家還是自己敲一敲。記住一般情況下標籤都是有頭標籤和尾標籤的。)




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章