一.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>
六.运行结果：
七.总结
本文第五部分给出了美化后的代码与结果展示，如果还想继续美化，可以继续美化。
