网页组成
一般网页都有以下元素组成:
- 文本:这是网页中的基本元素,用于传递信息和内容。文本可以是段落、标题、列表等,用户可以通过阅读文本了解网页的主题和内容。
- 图像:图像是网页中重要的视觉元素,能够丰富网页的内容和视觉效果。图像可以是照片、图标、插图等,用于解释和说明文本内容,提高用户的阅读体验。
视频和音频:随着多媒体技术的发展,视频和音频元素在网页中的应用越来越广泛。视频可以提供更直观、生动的内容展示,音频则可以为网页增加背景音乐或语音说明。 - 超链接:超链接是网页中的重要功能元素,可以连接到其他网页或资源。用户通过点击超链接,可以跳转到其他页面或打开新的窗口,实现网页之间的导航和跳转。
- 导航栏:导航栏是网页中用于引导用户浏览网页的重要元素。它通常位于网页的顶部或侧边,包含网页的主要栏目和链接,帮助用户快速找到所需内容。
- 交互元素:如按钮、表单等,用于触发用户与网页之间的交互操作。例如,用户可以通过点击按钮来提交表单、下载文件或跳转到其他页面。
此外,从页面结构的角度来看,网页还可以分为页头、正文和页尾三个部分。页头通常包含网站的标志、导航栏等;正文是网页的主体内容,包括文本、图像、视频等;页尾则包含版权信息、联系方式等。
由之前的学习中我们明白,文本内容和超链接内容都写在HTML文档中,图片内容一般通过绝对路径或者相对路径进行引用,一般存储在本地或者服务器中,而关于导航栏我们需要使用CSS文档对网页进行美化布局,而交互元素需要搭配JS文件进行监控响应。除此之外,还有一些其他元素,列如字体类型同样需要使用CSS文件引用导入。故而我们需要对元素进行分类,对文件结构进行规划,这样才能确保我们在维护优化或者更改网页时更加方便。
一般文件结构
以上仅为一个示例,通常情况下一个路径下只有一个名为index的HTML文件,该网页文件中用到的元素、JS文件和CSS文件都存储于该路径下,便于管理和维护。
注意事项
注意!!!
你应该尽可能的使用小写字母命名文件夹和文件,并且不是用空格进行断句断词。
这是因为许多计算机,特别是网络服务器,是区分大小写的。因此,假如你把一张图片放在你的网站上 test-site/MyImage.jpg,然后在一个不同的文件中,你试图以 test-site/myimage.jpg 来调用该图片,它可能无法工作。
而浏览器、网络服务器和编程语言对空格的处理并不一致。例如,如果你在文件名中使用空格,一些系统可能将其视为两个文件名。一些服务器会用“%20”(URL 中空格的字符代码)替换文件名中的区域,导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 my-file.html 与 my_file.html。
简言之,文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符,但不会识别下划线。基于此,最好在一开始就养成习惯,文件夹和文件名使用小写,用短横线来分隔。这可以避免许多问题。