学习笔记（三）关于Web的一些基础知识

最新推荐文章于 2022-07-26 16:18:39 发布

qq_41008787

最新推荐文章于 2022-07-26 16:18:39 发布

阅读量258

点赞数

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

本文链接：https://blog.csdn.net/qq_41008787/article/details/115836374

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Web入门

安装基础软件
设计网页外观
上传或保存文件
HTML文档详解
总结

安装基础软件

计算机
文本编辑器，可以是纯文本编辑器Visual Studio Code、Sublime Text、Atom、Brackets、GNU Emacs 或 VIM；也可以是混合编辑器 Dreamweaver 或 WebStorm。
Web浏览器，用来测试代码。有Firefox，Chrome，Opera， Safari，Internet Explorer 和 Microsoft Edge。
图像编辑器，像 GIMP、Paint.NET、Photoshop 或者 XD，用来编辑网页中的图形图像。
版本控制系统，用来管理服务器上文件，支持项目团队协作，共享代码资源，以及避免编辑冲突。当今最流行的版本控制工具是 Git，同时 GitHub 以及 GitLab 等基于 Git 的代码托管服务网站也非常流行。
FTP 工具，老式 Web 托管账户用来管理服务器上文件（正在被 Git 迅速取代）。有很多 (S)FTP 工具软件，比如 Cyberduck、Fetch 和 FileZilla。？？？
自动化构建工具，用来自动完成压缩代码和运行测试等重复性任务，比如 Grunt 或 Gulp。？？？
本地Web服务器？？？

设计网页外观

1、做出计划，考虑以下问题：网站的主题是什么？基于所选主题要展示哪些信息？网站采用怎样的外观？

2、绘制草图

3、选定内容

文本
主题颜色：使用色彩选择器？？
图像：用Google搜索，注意大多数网络图片（包括 Google 图片）都是受版权保护的。为了降低盗版风险，可以使用“Google 许可证过滤器”。点击“工具”按钮，然后在使用权限的选项下选择类似“标记为可再利用”的选项：
字体：

访问 Google Fonts 。
打开右侧边栏可现实选中的字体家族。可通过 Categories（类别）、Languages（语言）、Font Properties（字体属性）过滤想要的字体。
在列出的字体风格列表中，选择合适的粗细、是否倾斜等信息。
在右侧边栏中可以看到 Google 给出的代码片段，将其复制到文本编辑器就可以使用了。

上传或保存文件

网站应该保存在何处？

对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。文件夹存在哪儿都可以，只要容易找到，比如桌面、用户家目录，或是系统根目录。

确定网站项目储存位置。在该位置下创建一个文件夹（比如 web-projects）。所有网站项目都存在一处。
在这个文件夹里再新建一个文件夹（比如 test-site，读者可自由发挥想象），来存放第一个网站

网站应该使用什么结构？
下面来看看测试网站应该使用什么结构。最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：

index.html ：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在 test-site 文件夹中新建
index.html。 images 文件夹：这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
styles 文件夹：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在 test-site 文件夹中新建一个 styles文件夹。
scripts 文件夹：这个文件夹包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）。在
test-site 文件夹中新建一个 scripts 文件夹。

HTML文档详解

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
<html></html>— <html> 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — <head>元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
— 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

总结

不懂FTP工具、自动化构建工具、本地Web服务器是什么
github怎么上传工程？需要翻墙吗？

qq_41008787

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记（三）关于Web的一些基础知识

Web入门安装基础软件设计网页外观上传或保存文件总结安装基础软件计算机文本编辑器，可以是纯文本编辑器Visual Studio Code、Sublime Text、Atom、Brackets、GNU Emacs 或 VIM；也可以是混合编辑器 Dreamweaver 或 WebStorm。Web浏览器，用来测试代码。有Firefox，Chrome，Opera， Safari，Internet Explorer 和 Microsoft Edge。图像编辑器，像 GIMP、Paint.NET、Ph
复制链接

扫一扫

专栏目录