HTML入门练习案例-分段与换行标签

学习目标:

(1)熟练使用p标签加粗样式标签给文本分段
(2)熟练使用换行标签h标签加粗给标签写标题
(3)使用图像标签加图像
(4)使用锚点链接可以点击链接快速定位到页面中的某个位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- h1标签的使用 -->
<h1 id="top">猫猫种类</h1>
 <!--换行标签<br/>的使用  -->
猫猫分为<br/>
<!-- 锚点链接的<a herf="#"></a>使用 -->
<a href="#miao">妙猫猫,</a><br/>
<a href="#cry">流泪猫猫,</a><br/>
<a href="#ben">本拉豆猫猫,</a><br/>
<a href="#wei">委屈猫猫</a><br/>
<h4 id="miao"><h3>妙猫猫</h3></h4>
<p>秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙
    秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙</p>
<h4 id="cry"><h3>流泪猫猫</h3></h4>
没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没<p>人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫,没人疼没人爱我是一只流泪猫</p>
<img src="images/流泪猫猫.gif"width="300"/>
<h4 id="ben"><h3>本拉豆猫猫</h3></h4>
<p>哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!
   </p>
   <!-- 图像标签<img src="图像地址"/>的使用 -->
   <img src="images/本拉豆猫.jpg"width="300"/>
<h4 id="wei"><h3>委屈猫猫</h3></h4>
<p>我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?我只是一只小猫咪,我为什么要承担这么多?</p>
<a href="#top">返回顶部</a><br>
<a href="images/菠萝头简介.html"target="_blank">引申猫猫:菠萝头的简介和照片</a>
</body>
</html>
![本拉豆猫图片插入图 ](https://img-blog.csdnimg.cn/20201014210646633.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY3NDc5,size_16,color_FFFFFF,t_70#pic_center)

![流泪猫猫](https://img-blog.csdnimg.cn/2020101421073586.gif#pic_center)




  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值