HTML5与CSS3基础教程学习笔记【第二章处理网页文件】

最新推荐文章于 2024-10-17 17:15:40 发布

Luminous烁

最新推荐文章于 2024-10-17 17:15:40 发布

阅读量487

点赞数

分类专栏： html5 文章标签： css3 html5 学习

本文链接：https://blog.csdn.net/kzpx_1106/article/details/125609780

版权

html5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

第二章处理网页文件

前言
2.1规划网站
2.2创建新的网页
2.3保存网页
2.4编辑网页
2.5组织文件
2.6在浏览器中查看网页
2.7借鉴他人灵感

前言

开始编写 HTML 元素和属性代码之前，有必要了解如何创建使用这些代码的文件。今天将介绍如何创建、编辑和保存网页文件，还会涉及一些设计和组织方面的注意事项。
在这里插入图片描述

2.1规划网站

我们可以一上来就直接编写网页，但最好还是先对网站进行思考和规划。这样，就不会迷失方向，而且也会减少将来的重组工作。比起简单地知道如何编写代码，了解如何创建有效的网站要更重要一些。
规划网站的方法

确定为什么要创建这个网站，需要展示什么内容。
考虑网站的访问者。应该如何调整内容使之吸引这些访问者。
需要多少个页面，你希望网站是怎样的结构。
在纸上画出网站结构的草图，确定你在每个页面希望呈现的内容。与其他的工作不同，这项工作是能指导网站设计的。
为页面、图像和其他外部文件设计一个简单且一致的命名规则。

2.2创建新的网页

创建网站并不需要特殊的工具。你可以使用任何文本编辑器，甚至是 Windows 自带的记事本 Notepad，如图所示。
在这里插入图片描述

2.3保存网页

用文本编辑器创建的网页需要在多种平台和多种设备上的多种浏览器查看。为了让所有这些程序都能访问网页，网页需要保存为通用的“纯文本”格式，不包含文字处理软件可能应用的任何专用格式化信息。
为了让浏览器将 HTML 文档作为网页识别并知道解释其中包含的标记，网页文件应在文件名中使用 .html 或 .htm 作为扩展名。这样做也可以将网页文件与不是网页的普通文本文件区分开来。上述两种扩展名都可以，但通常还是使用 .html。
保存网页的步骤
(1) 创建网页之后，在文本编辑器中选择File → Save As（文件→另存为），如图所示。
(2) 在随后弹出的对话框中，选择纯文本或文本文档（或别的叫法）作为文件格式。
(3) 为文档添加 .html 或 .htm 的扩展名（这一点非常重要）。
(4) 选择要保存网页的文件夹。
(5) 点击 Save（保存）。
在这里插入图片描述

2.4编辑网页

因为网页在大多数情况下是通过浏览器查看的，所以在桌面上双击网页文件，会启动默认浏览器并显示它们。如果想编辑网页文件，需要在文本编辑器中手动打开它。
编辑网页的步骤
(1) 打开文本编辑器。
(2) 选择 File → Open。
(3) 找到包含目标文件的目录。
(4) 如果没有看到目标文件，选择 All Files（全部文件）选项（或类似的叫法）。
(5) 点击 Open，就可以开始编辑文件了。

2.5组织文件

在文件数量变得很大之前，最好考虑好将它们放在什么地方。通常（但非必须）为网站的主要区块创建单独的文件夹，将相关的 HTML 页面放在一起。
组织文件的步骤
(1) 创建一个主文件夹或目录存放网站上所有可用的资料。在 Mac 上，在 Finder 中选择 File → New Folder（文件→新文件夹）。在 Windows 中，右击桌面（或
你选择的文件夹），选择 New → Folder（新建→文件夹），然后为文件夹命名。
(2)根据网站的组织结构创建子文件夹，例如，可以考虑为网站的每个部分创建单独的文件夹，并根据需要在其中创建单独的子文件夹。
在这里插入图片描述
(3) 为网站的图像、样式表（CSS 文件）和 JavaScript 文件创建一个或多个文件夹，每个文件夹还可以有各自的子文件夹。有很多种组织方式，具体做法完全取决于你自己。一种做法是像下图中显示的那样进行组织，还有一种方法是将CSS、JavaScript 文件夹同图像文件夹（及其他文件夹）一样放在根目录，也可以将这些文件夹一起放在根目录下的 assets（资源）文件夹里。

在这里插入图片描述

2.6在浏览器中查看网页

创建网页之后，你肯定希望看看它在浏览器中显示的样子。实际上，你并不知道访问者使用什么浏览器（不同的浏览器呈现页面的方式会有差异），因此建议使用多个浏览器查看页面。
在浏览器中查看网页的步骤
(1) 打开浏览器。
(2) 选择 File → Open File
(3) 在弹出的对话框中，找到目标文件所在的文件夹，选中该文件，点击 Open页面会显示在浏览器中，显示效果与发布到服务器的网页相同。对于不同的浏览器，这些步骤可能有些差异。

通常还可以双击网页文件名或图标来查看该网页。如果你已经打开了浏览器，还
可以将网页图标拖到浏览器窗口，这样也能打开。一旦掌握这种方法，它往往是在浏览器中查看网页的最简单方法。

2.7借鉴他人灵感

学习其他网页开发和设计人员如何创建页面是提高 HTML 代码水平最容易的方法之一。幸好，我们很容易就可以查看和学习他人的 HTML 代码。不过，文本内容、图像、音频、视频、样式表及其他外部文件可能受版权保护。通常的做法是借鉴其他人的页面为自己的 HTML 寻找灵感，再创建自己的内容。
1. 使用 View Source 查看其他设计者的HTML 代码
(1) 在浏览器中打开网页。
(2) 选择 View Source（查看源代码，或浏览器中的其他类似选项），如图所示。然后会显示HTML代码。
在这里插入图片描述
(3)如果需要，可以保存该文件以作进一步研究。
2. 通过开发者工具查看其他设计者的 HTML代码
查看网页源代码的另一种方法是使用浏览器的开发者工具。不同浏览器提供的开发者工具并不一样，但有些功能是一样的。

在这里插入图片描述
大多数浏览器还可以在页面上右击，然后在弹出的菜单中选择 View Source（或者别的类似叫法）。
这些工具提供了一种交互式的查看源代码的视图。可以审查页面特定部分的HTML和 CSS，在浏览器中编辑代码，并立即查看修改后的效果。开发者工具适用任何网站（不仅仅是自己的）。使用开发者工具作的修改都是临时的，这些工具并未真正修改页面的HTML 和 CSS。开发者工具是学习 HTML 和CSS 不可多得的资料，通过它可以查看某个特定的效果是如何实现的，可以随意改动代码而不必担心破坏任何东西。