我的第一个 Web 开发项目：学习 HTML 和 CSS
发布于2024-08-24
浏览：842
介绍
开始我的第一个网络开发项目是我作为一名计算机科学学生的旅程中令人兴奋的一步。我选择构建一个简单的多页面网站来获得 HTML 和 CSS 的实践经验。这篇博文将引导您完成该项目，从 HTML 和 CSS 基础知识到我遇到的挑战和我学到的教训。
项目概况
该项目涉及创建一个具有多种功能的多页面网站：
- “关于我”页面
- HTML 和 CSS 简介
- HTML 表格页面
- 多媒体页面
- 表单类型页面
HTML 和 CSS：基础知识
首先，我使用 HTML 设计了网站的结构。我使用
建一张桌子
网页设计的基本元素之一是表格。我学习了如何使用
| 标签来显示行和列中的数据。我使用 CSS 设计了表格的样式，以提高可读性和演示效果。
整合多媒体整合图像、音频和视频等多媒体元素是该项目的关键部分。我学习了如何使用
创建表格表单对于网站上的用户交互至关重要。我创建了一个页面来展示不同的 HTML 表单元素，例如文本字段、密码和电子邮件输入。 CSS 用于设计表单的样式，使其实用且美观。
挑战与解决方案主要挑战之一是在所有页面上保持一致的样式。我通过使用应用统一样式的通用 CSS 文件 (styles.css) 解决了这个问题。另一个问题是正确定位元素，我通过尝试各种 CSS 属性（例如边距、填充和浮动）解决了这个问题。 经验教训这个项目为 HTML 和 CSS 提供了坚实的基础。我学习了如何构建网页、有效应用样式以及保持一致的设计。将内容 (HTML) 与样式 (CSS) 分开是一个关键要点，强调了 Web 开发中组织和清晰度的重要性。 结论建立这个网站是一次宝贵的学习经历，它向我介绍了网络开发的基础知识。它增强了我对 HTML 和 CSS 的理解，并激励我继续探索更高级的主题。 对于那些着手类似项目的人，我鼓励您接受学习过程并尝试不同的技术。从此类项目中获得的技能对于成为熟练的 Web 开发人员至关重要。 GitHub 存储库：https://github.com/rizalion/Webpage-using-CSS-and-HTML 与我联系如果您觉得这个项目有趣或有任何疑问，请随时联系： LinkedIn：https://www.linkedin.com/in/rizalion |
版本声明
本文转载于：https://dev.to/rizalion/my-first-web-development-project-learning-html-and-css-2a9k?1如有侵犯，请联系[email protected]删除
最新教程
更多>
-
如何在JavaScript对象中动态设置键？在尝试为JavaScript对象创建动态键时，如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号： jsobj ['key''i] ='example'1; 在JavaScript中，数组是一...编程 发布于2025-04-11 -
如何在无序集合中为元组实现通用哈希功能？在未订购的集合中的元素要纠正此问题，一种方法是手动为特定元组类型定义哈希函数，例如： template template template 。 struct std :: hash { size_t operator（）（std :: tuple const&tuple）const {...编程 发布于2025-04-11
-
如何正确使用与PDO参数的查询一样？在pdo 中使用类似QUERIES在PDO中的Queries时，您可能会遇到类似疑问中描述的问题：此查询也可能不会返回结果，即使$ var1和$ var2包含有效的搜索词。错误在于不正确包含％符号。通过将变量包含在$ params数组中的％符号中，您确保将％字符正确替换到查询中。没有此修改，PDO...编程 发布于2025-04-11
-
找到最大计数时，如何解决mySQL中的“组函数\”错误的“无效使用”？如何在mySQL中使用mySql 检索最大计数，您可能会遇到一个问题，您可能会在尝试使用以下命令：理解错误正确找到由名称列分组的值的最大计数，请使用以下修改后的查询： 计数（*）为c 来自EMP1 按名称组 c desc订购 限制1 查询说明 select语句提取名称列和每个名称...编程 发布于2025-04-11
-
如何使用Python理解有效地创建字典？在python中，词典综合提供了一种生成新词典的简洁方法。尽管它们与列表综合相似，但存在一些显着差异。与问题所暗示的不同，您无法为钥匙创建字典理解。您必须明确指定键和值。 For example:d = {n: n**2 for n in range(5)}This creates a dicti...编程 发布于2025-04-11
-
为什么不````''{margin：0; }`始终删除CSS中的最高边距？在CSS 问题：不正确的代码： 全球范围将所有余量重置为零，如提供的代码所建议的，可能会导致意外的副作用。解决特定的保证金问题是更建议的。 例如，在提供的示例中，将以下代码添加到CSS中，将解决余量问题： body H1 { 保证金顶：-40px; } 此方法更精确，避免了由全局保证金重置引...编程 发布于2025-04-11
-
如何在Java字符串中有效替换多个子字符串？在java 中有效地替换多个substring，需要在需要替换一个字符串中的多个substring的情况下，很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...编程 发布于2025-04-11
-
如何使用PHP从XML文件中有效地检索属性值？从php $xml = simplexml_load_file($file); foreach ($xml->Var[0]->attributes() as $attributeName => $attributeValue) { echo $attributeName,...编程 发布于2025-04-11
-
如何在Java中执行命令提示命令，包括目录更改，包括目录更改？在java 通过Java通过Java运行命令命令可能很具有挑战性。尽管您可能会找到打开命令提示符的代码段，但他们通常缺乏更改目录并执行其他命令的能力。 solution：使用Java使用Java，使用processBuilder。这种方法允许您：启动一个过程，然后将其标准错误重定向到其标准输出。...编程 发布于2025-04-11
-
如何为PostgreSQL中的每个唯一标识符有效地检索最后一行？postgresql：为每个唯一标识符提取最后一行，在Postgresql中，您可能需要遇到与在数据库中的每个不同标识相关的信息中提取信息的情况。考虑以下数据：[ 1 2014-02-01 kjkj 在数据集中的每个唯一ID中检索最后一行的信息，您可以在操作员上使用Postgres的有效效率： ...编程 发布于2025-04-11
-
如何处理PHP文件系统功能中的UTF-8文件名？在PHP的Filesystem functions中处理UTF-8 FileNames 在使用PHP的MKDIR函数中含有UTF-8字符的文件很多flusf-8字符时，您可能会在Windows Explorer中遇到comploreer grounder grounder grounder gro...编程 发布于2025-04-11
-
在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异？For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...编程 发布于2025-04-11
-
如何使用FormData（）处理多个文件上传？）处理多个文件输入时，通常需要处理多个文件上传时，通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...编程 发布于2025-04-11
-
为什么PHP的DateTime :: Modify（'+1个月'）会产生意外的结果？使用php dateTime修改月份：发现预期的行为在使用PHP的DateTime类时，添加或减去几个月可能并不总是会产生预期的结果。正如文档所警告的那样，“当心”这些操作的“不像看起来那样直观。 考虑文档中给出的示例：这是内部发生的事情： 现在在3月3日添加另一个月，因为2月在2001年只有2...编程 发布于2025-04-11
-
如何使用组在MySQL中旋转数据？在关系数据库中使用mySQL组使用mySQL组进行查询结果，在关系数据库中使用MySQL组，转移数据的数据是指重新排列的行和列的重排以增强数据可视化。在这里，我们面对一个共同的挑战：使用组的组将数据从基于行的基于列的转换为基于列。 Let's consider the following ...编程 发布于2025-04-11
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
