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.交流群: PHP+JS聊天群

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

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

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

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

我要說說
網上賓友點評