HTML简单表格制作（购物）

濛甜

已于 2024-05-10 11:42:29 修改

阅读量600

点赞数 15

分类专栏： HTML 文章标签： html 前端

于 2024-04-26 11:11:28 首次发布

本文链接：https://blog.csdn.net/xxyez/article/details/138212782

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了HTML语言的基本概念，如何通过HTML标记统一网络文档结构，并展示了如何使用CSS样式美化网页，包括简单的HTML代码实例和CSS内部样式的应用，以及所需资源如图片的引用。

摘要由CSDN通过智能技术生成

一、什么事HTML语言

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。 [1]

二、简单的HTML制作效果图

三、HTML代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <h1>大家都喜欢买的美容品</h1>
       <ul>
       <li><span>1</span>   雅诗兰黛即时修护眼部精华霜15ml</li>
       <li><span>2</span>   伊丽莎白雅顿显效复合活肤霜 75ml</li>
       <li><span>3</span>   OLAY玉兰油多效修护霜 50g</li>
       <li><span>4</span>   巨型一号丝瓜水320ML</li>
       <li><span>5</span>   倩碧保湿洁肤水2号 200ml</li>
   <li><span>6</span>   比度克细肤淡印霜 30g</li>
       <li><span>7</span>   兰芝 (LANEIGE)夜间修护锁水面膜 80ml</li>
       <li><span>8</span>  SK-II护肤精华露 215ml</li>
       <li><span>9</span>  欧莱雅青春密码活颜精华肌底液</li>
       </ul>
   </body>
</html>

四、CSS样式

如果我们想美化界面，那必须得有CSS的样式来辅助。以下是CSS的适用的内部样式

五、效果展示

六、需要的资源（图片）如下：

文本素材：

1 雅诗兰黛即时修护眼部精华霜15ml
2 伊丽莎白雅顿显效复合活肤霜 75ml
3 OLAY玉兰油多效修护霜 50g
4 巨型一号丝瓜水320ML
5 倩碧保湿洁肤水2号 200ml
6 比度克细肤淡印霜 30g
7 兰芝 (LANEIGE)夜间修护锁水面膜 80ml
8 SK-II护肤精华露 215ml
9 欧莱雅青春密码活颜精华肌底液