前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML入门练习案例(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)




1234567891011121314151617181920212223242526272829303132333435363738394041

原文链接:https://blog.csdn.net/qq_45067479/article/details/109083277?utm_medium=distribute.pc_category.none-task-blog-hot-2.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-2.nonecase&request_id=

作者:thorn豆豆

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言