HTML 基础- 4个实例

不要担心本章中您还没有学过的例子。

您将在下面的章节中学到它们。


HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。

实例

<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>


尝试一下 »


HTML 段落

HTML 段落是通过标签 <p> 来定义的。

实例

<p>这是一个段落。</p> <p>这是另外一个段落。</p>


尝试一下 »


HTML 链接

HTML 链接是通过标签 <a> 来定义的。

实例

<a href="https://www.runoob.com">这是一个链接</a>


尝试一下 »

提示:在 href 属性中指定链接的地址。

(您将在本教程稍后的章节中学习更多有关属性的知识)。


HTML 图像

HTML 图像是通过标签 <img> 来定义的.

实例

<img decoding="async" src="/images/logo.png" width="258" height="39" />


尝试一下 »

注意: 图像的名称和尺寸是以属性的形式提供的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,这里提供一个基础HTML文件和对应的CSS和JavaScript文件,供你参考: HTML文件(index.html): ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三层网站</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <header> <h1>三层网站</h1> </header> <nav> <ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> <li><a href="#">菜单5</a></li> </ul> </nav> <section> <h2>内容区域</h2> <article> <h3>文章标题1</h3> <p>文章内容1</p> </article> <article> <h3>文章标题2</h3> <p>文章内容2</p> </article> <article> <h3>文章标题3</h3> <p>文章内容3</p> </article> <article> <h3>文章标题4</h3> <p>文章内容4</p> </article> <article> <h3>文章标题5</h3> <p>文章内容5</p> </article> </section> <footer> <p>© 2021 三层网站</p> </footer> </body> </html> ``` CSS文件(style.css): ``` /* 全局样式 */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: 0; padding: 0; } header, nav, section, footer { margin: 20px; padding: 10px; border: 1px solid #ccc; } h1, h2, h3 { margin: 0; font-weight: normal; } /* 菜单样式 */ nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { text-decoration: none; color: #333; } nav a:hover { color: #f00; } /* 文章样式 */ article { margin: 20px 0; } article h3 { font-size: 24px; } article p { font-size: 16px; } ``` JavaScript文件(script.js): ``` // 使用基本选择器选中文章标题1,并改变其颜色 $("h3:first-child").css("color", "#f00"); // 使用层次选择器选中内容区域中的所有段落,并改变其背景颜色 $("section p").css("background-color", "#ccc"); // 使用过滤选择器选中导航菜单中的第二个菜单,并改变其字体大小 $("nav li:nth-child(2) a").css("font-size", "20px"); // 为所有文章标题添加点击事件,并在点击时弹出对应的文章内容 $("article h3").click(function() { var content = $(this).next().html(); alert(content); }); // 为导航菜单添加鼠标移入事件,并在移入时改变菜单项的背景颜色 $("nav li").hover(function() { $(this).css("background-color", "#f00"); }, function() { $(this).css("background-color", ""); }); // 对文章标题进行动画操作,包括渐隐、移动、渐显 $("article h3").fadeOut(1000).animate({left: '250px'}, 1000).fadeIn(1000); ``` 以上代码实现了对网页中的元素进行选择、操作、事件绑定和动画效果的功能,你可以根据自己的需求进行修改和扩展。希望对你有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

T0620514

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值