HTML5+CSS3——第3章 HTML5效果標簽

字號+ 編輯: Snake 修訂: 面向ICU 來源: 慕课网 2023-09-11 我要說兩句(0)

本文介紹HTML5效果標簽,換行標簽、空格標簽、水平線標簽……

3-1 使用<br>標簽實現換行效果

讓首詩顯示得更美觀些,如顯示下面效果:

 圖片24.jpg

怎麽可以讓每一句詩詞後面加入一個折行呢?

就用到<br />標簽,在需要加回車換行的地方加入<br />,<br />標簽作用相當於word文档中的回車。

代碼爲:

 圖片25.jpg

語法:

xhtml1.0寫法:<br />

html4.01寫法:<br>

注意,現在一般使用 xhtml1.0 的版本的寫法(其它標簽也是),這種版本比較槼範。

與以前我們學過的標簽不一樣,<br />標簽是一個空標簽,沒有HTML内容的標簽就是空標簽,空標簽只需要寫一個開始標簽,這樣的標簽有<br />、<hr />和<img />。

如果像 word 文档档或記事本中,在想要折行的前面輸入回車,在 html 中是忽略回車和空格的,輸入的回車和空格是顯示不出來的。上面的代碼在瀏覽中顯示是沒有回車效果的。如下邊的代碼。

 圖片26.jpg圖片27.jpg

總結:在 html 代碼中輸入回車、空格都是沒有作用的。在html文本中想輸入回車換行,就必須輸入<br />。

3-2 使用特殊字符 實現空格標簽

在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格,必須寫入 。

語法: &nbsp;

在html代碼中輸入空格是不起作用的,如下代碼。

 圖片28.jpg

在瀏覽中顯示,還是沒有空格效果。

 圖片29.jpg

輸入空格的正確方法:

 圖片30.jpg

在瀏覽器中的顯示出來的空格效果。如下圖所示。

 圖片31.jpg

3-3使用<hr>標簽實現水平線標簽

在信息展示時,有時會需要加一些用於分隔的橫線,這樣會使文章看起來整齊些。如下圖所示:

 圖片32.jpg

語法:

html4.01版本 <hr>

xhtml1.0版本 <hr />

注意:

1. <hr />標簽和<br />標簽一樣也是一個空標簽,所以只有一個開始標簽,沒有結束標簽。

2. <hr />標簽的在瀏覽器中的默認樣式線條比較粗,顔色爲灰色,這些外在樣式用css樣式表,都可以對其修改。

3. 注意,現在一般使用 xhtml1.0 的版本(其它標簽也是),這種版本比較槼範。

閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • 上傳自定義文档的時候查如何填寫上傳表單中的access, mimeType等字段值

  • HTML5+CSS3——第6章 HTML5表單標簽,與瀏覽者交互

  • HTML5+CSS3——第5章 HTML5圖片、鏈接及表格標簽

  • HTML5+CSS3——第4章 HTML5列表標簽

我要說說
網上賓友點評