HTML基本标签

Posted 上进小菜猪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基本标签相关的知识，希望对你有一定的参考价值。











实​

验​

要​

求​

实验目标：​

  1. 会使用html的编辑工具​
  2. 会使用HTML的基本结构创建网页​
  3. 会使用文本相关标签排版文本信息​
  4. 会使用图像相关标签实现图文并茂的页面​
  5. 会使用列表实现数据展示​

实验所需软件：​

  1. 记事本（Window内含）​
  2. Sublime_Text​

实​

验​

内​

容​

实验内容：​

  1. 练习——制作清平乐页面​需求说明：​
    标题用<h2>标签，文字用<p>标签，标题与正文之间的分隔线使用<hr/>标签，词结束后使用<br/>标签换行。效果图如图1.1所示。​
    HTML基本标签（一）_html
    图1.1 清平乐​
  2. 练习——制作京东读书新闻资讯页面​需求说明：​
    使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作京东读书新闻资讯页面，主标题使用一级标题标签，副标题使用二级标题标签，二级标题与图片之间使用水平线分隔。效果图如图1.2所示。​
    HTML基本标签（一）_无法显示_02
    图1.2京东读书新闻资讯页面​
  3. 练习——热门活动需求说明：
  • 使用无序列表制作热门活动。效果图如图1.3所示。​
  • 标签嵌套及标签语义化使用，理解标签语义化。​
    HTML基本标签（一）_html_03
    图1.3 热门活动​
  1. 练习——制作音乐排行榜​

需求说明：​

  • 使用有序列表制作音乐排行榜。效果图如图1.4所示。​

HTML基本标签（一）_新闻资讯_04

图1.4 音乐排行榜​

实​

验​

过​

程​

及​

结​

果​

练习1——制作清平乐页面​

效果图：​

HTML基本标签（一）_无法显示_05

代码：​

<!DOCTYPE html>​

<html lang="en">​

<head>​

<meta charset="UTF-8">​

<title>制作清平乐页面</title>​

</head>​

<body>​

<h2>清平乐</h2>​

<hr/>​

<p>​

年年雪里，常插梅花醉，稻∶坊ㄎ藓<br/>​

意，赢得满衣清泪！<br/>​

今年海角天涯，萧萧两鬓生华。<br/>​

看取晚来风势，故应难看梅花。<br/>​

​

</p>​

</body>​

</html>​

练习2——制作京东读书新闻资讯页面​

效果图：​

HTML基本标签（一）_html_06

代码：​

<!DOCTYPE html>​

<html lang="en">​

<head>​

<meta charset="UTF-8">​

<title>京东新闻</title>​

</head>​

<body>​

<h1>看不见的完美硬币 ：细节的负担</h1>​

<h2>创新公司皮克斯的启示</h2>​

<hr/>​

<img src="image/book.jpg" >​

<p>​

<em>细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。<br/>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。​

<br/>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</em><br/>​

</p>​

<strong>看不见的完美硬币：细节的负担</strong>​

<p>​

在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。​

</p>​

<p>​

皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏​

</p>​

​

</body>​

</html>​

练习3——热门活动​

效果展示：​

HTML基本标签（一）_无法显示_07

实现代码：​

<!DOCTYPE html>​

<html lang="en">​

<head>​

<meta charset="UTF-8">​

<title>热门活动</title>​

</head>​

<body>​

<h2>热门活动 更多</h2>​

<ul>​

<li>​

<img src="image/img1.png" >​

</li>​

<p>推荐活动|原创音乐现金榜T榜</p>​

<li>​

<img src="image/img2.png" >​

</li>​

<p>推荐节目|《TAImusic》爆笑来袭</p>​

<li>​

<img src="image/img3.png" >​

</li>​

<p>推荐歌单|继续宠爱张国荣</p>​

<li>​

<img src="image/img4.png" >​

</li>​

<p>推荐活动|330金属音乐巡演 成都小酒馆音乐空间</p>​

</ul>​

</body>​

</html>​

练习4——制作音乐排行榜​

效果图展示：​

HTML基本标签（一）_无法显示_08

代码详情：​

<!DOCTYPE html>​

<html lang="en">​

<head>​

<meta charset="UTF-8">​

<title>制作音乐排行榜</title>​

</head>​

<body>​

<h2>音乐排行榜</h2>​

<ol>​

<li>​

<a href="#">​

<ins>潇洒走一回</ins> ​

<img src="image/pic1.png" ></a>​

</li>​

<li>​

<a href="#">​

<ins>偏偏喜欢你</ins> ​

<img src="image/pic1.png" ></a>​

</li>​

<li>​

<a href="#">​

<ins>酒干倘卖无</ins> ​

<img src="image/pic1.png" ></a>​

</li>​

<li>​

<a href="#">​

<ins>不说再见</ins> ​

<img src="image/pic1.png" ></a>​

</li>​

<li>​

<a href="#">​

<ins>舍不得你</ins> ​

<img src="image/pic1.png" ></a>​

</li>​

<li>​

<a href="#">​

<ins>请跟我来</ins> ​

<img src="image/pic1.png" ></a>​

</li>​

</ol>​

</body>​

</html>​

实​

验​

总​

结​

本次实验给我的收获非常大，让我在今后的开发实践中可以更加熟练。​


以上是关于HTML基本标签的主要内容，如果未能解决你的问题，请参考以下文章

怎么在html里插音乐 在html里插音乐的方法简述

python爬取酷狗排行音乐

Python爬虫编程思想（86）：项目实战--抓取豆瓣音乐排行榜

Python爬虫编程思想（86）：项目实战--抓取豆瓣音乐排行榜

十大音乐APP排行榜 音乐哪个APP好

Python爬一爬网易云音乐