HTML5+CSS3——第3章 HTML5效果标签

字号+ 编辑: Snake 修订: Snake 来源: 慕课网 2021-03-24 15:38 我要说两句(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聊天群

相关课文
  • 分享一个videojs 7.x在pc端浏览器播放m3u8直播流的代码案例

  • 前端入门方法

  • HTML语言当中6种空白空格符号种类说明以及区别

  • html头部标记中的lang属性后面值写什么

我要说说
网上宾友点评
沙发已空
HTML5+CSS3——第3章 HTML5效果标签