html 练习：展示一首古诗词
一.html语言介绍
1.web前端
Web前端是指开发Web应用程序所需的技术和工具，包括HTML、 CSS、 JavaScript、React、 Vue等。Web前端开发的主要任务是通过使用这些技术和工具来实现Web应用程序的用户界面。Web前端开发的目标是创建一个具有良好用户体验的网站或应用程序，使用户能够轻松地浏览和使用它。Web前端开发人员需要具备定的设计能力和编程技能，以便能够实现各种功能和效果。
2.html语言
HTML是一种标记语言， 用于创建网页和其他网站内容。HTML代表超文本标记语言，它使用标签和属性来定义网页的结构和内容。HTML可以用于创建文本、图像、链接、表格、表单等内容，并且可以与CSS和JavaScript等其他技术一起使用， 以实现更丰富的网站功能和交互性。
3.html编程工具
1. Sublime Text:-一款轻量级的文本编辑器，支持多种编程语言，可通过插件扩展功能。
2. Visual Studio Code: 微软开发的一款免费、开源的代码编辑器，支持多种编程语言和插件。
3. Atom: GitHub开发的一 款免费、开源的文本编辑器，支持多种编程语言和插件。
4.Notepad++:-款免费的windows文本编辑器，支持多种编程语言和插件。
5. Dreamweaver: Adobe公 司开发的一款 可视化HTML编辑器，支持多种编程语言和网站管理功能。
6. Brackets: Adobe公司开发的一 款免费、开源的文本编辑器，专注于前端开发，支持实时预览和插件。
7.WebStorm:JetBrains公司开发的一款专业的Web开发IDE，支持多种编程语言和框架。
本次练习，我使用的工具就是第一种sublime，它非常小，本体只有几十兆空间，它的原理是以记事本的方式进行存储，不具备编译功能，编译功能交给浏览器执行。如果你没有上述工具，可以把文中的代码粘贴在记事本中，选中用浏览器打开可观察到结果。
二.题目要求
只用html语言展示一首你喜欢的古诗词，使页面尽可能的美观。
三.HTML结构框架
HTML是一种标记语言，有他的基本框架。
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>
Document/title>
/head>
body>
/body>
/html>
上面就是HTML的基础结构，任何网页设计都是在此基础上做修改。
上面的HTML基础架构明显比较长，我们显然不可能每建立一个文件就手敲这么多代码，这里介绍一个快捷键，先敲一个 ! 然后按一下 Tab 键就会弹出上述的基本结构。
这里用的是配置好的sublime，在里面安装了许多快捷键插件，读者可以自行下载配置，也可以在评论区留言，我可以分享已经配置好的压缩包。
四.各部分含义
1.声明文件类型
!DOCTYPE html>
这一行代码的意思就是 声明文件的类型为 html 类型。
2.导入语言库
meta charset="UTF-8">
这一行意思是导入"UTF-8"库文件，这是一个通用语言库，它包含全球几乎所有国家的语言，当然每一种语言都有自己的库，在其库内只能识别自己的国家语言。
3.标签标题
title>
Document/title>
这一行的功能是显示网页标签名字，这里默认的是 Document的文件名，可以修改它使其显示其他内容。
例如修改为 将进酒 后的运行结果：
4.显示网页内容
body>
/body>
这两个标签之间的内容将会显示在网页上，那么展示一首古诗词就很简单了，在这里直接输入一首拿古诗词就行了。
例如，我们在这里添加 观沧海
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>
将进酒/title>
/head>
body>
观沧海
曹操[两汉]
东临碣石，以观沧海。
水何澹澹,山岛竦峙。
树木丛生，百草丰茂。
秋风萧瑟，洪波涌起。
日月之行，若出其中;
星汉灿烂，若出其里。
甚至哉，歌以咏志。
/body>
/html>
结果：
五.美化页面源代码：
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
将进酒/title>
/head>
body bgcolor=#e0e7c8>
font face="宋体" size="20" >
h1>
将进酒/h1>
h2>
李白h2>
embed src="https://music.163.com/#/playlist?id=2998733403" hidden="true" autostart="true" loop="true">
p>
君不见黄河之水天上来，奔流到海不复回。/p>
p>
君不见高堂明镜悲白发，朝如青丝暮成雪。/p>
p>
人生得意须尽欢，莫使金樽空对月。/p>
p>
天生我材必有用，千金散尽还复来。/p>
p>
与君歌一曲，请君为我倾耳听。/p>
hr color="blue">
p>
钟鼓馔玉不足贵，但愿长醉不复醒。/p>
p>
古来圣贤皆寂寞，惟有饮者留其名。/p>
p>
陈王昔时宴平乐，斗酒十千恣欢谑。/p>
p>
主人何为言少钱，径须沽取对君酌。/p>
p>
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。/p>
a href="https://www.gushicimingju.com/gushi/shi/7.html" target="_blank">
古诗词原文/a>
audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
src="https://music.163.com/#/playlist?id=2998733403">
你的浏览器版本太低，不支持audio标签
/audio>
img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&
riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&
ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&
risl=&
pid=ImgRaw&
r=0" alt="这里是李白，不是李白">
/font >
/body>
/html>
六.运行结果：
七.总结
本文第五部分给出了美化后的代码与结果展示，如果还想继续美化，可以继续美化。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html 练习：展示一首古诗词
本文地址： https://pptw.com/jishu/309285.html