第一章：网页制作的基础知识

最新推荐文章于 2024-09-13 19:01:08 发布

2301_81650721

最新推荐文章于 2024-09-13 19:01:08 发布

阅读量948

点赞数 3

文章标签： microsoft

本文链接：https://blog.csdn.net/2301_81650721/article/details/142168449

版权

1.1 认识网页和网站
1.1.1 网页、网站
网页和网站的区别：
网页（Web Page）是构成网站的基本单位，是由HTML、CSS、JavaScript等技术编写而成的一个文件，用于在浏览器上展示信息。网页通常包含文字、图像、链接等元素，并通过超链接连接到其他网页或资源。网页可以被单独访问，也可以作为网站的一部分。
网站（Website）是由一组相互关联的网页构成的，通过特定的域名（例如www.example.com）来访问。网站是由多个网页组成的集合，通常包括首页、各种子页面、导航菜单、图片、视频、表单等内容。网站可以包含多个功能模块，如用户注册、登录、购物车等。网站通常是一个有组织、具有独立性的整体，它通过一定的布局和导航结构，为用户提供特定的信息或服务。
综上所述，网页是构成网站的基本单位，而网站则是由多个网页组成的一个有组织、具有独立性的整体。网站可以包含多个网页，并提供更丰富的功能和服务。
常用术语：
网站：一个包含一组相关网页的在线空间。
网页：网站的基本组成单元，包含文本、图像、视频等内容。
首页：网站的主页，通常是用户访问网站时首先看到的页面。
导航栏：网站顶部或侧边的菜单栏，用于导航和浏览网站的不同页面。
链接：用于在网页之间跳转的可点击元素，通常以不同颜色或下划线表示。
导航链接：位于导航栏中的链接，用于快速访问网站的不同部分或页面。
内部链接：链接到同一网站内其他页面的链接。
外部链接：链接到其他网站的链接。
标题：网页的标题，通常显示在浏览器的标签页上。
脚注：网页底部的区域，通常包含版权信息、联系方式和其他相关链接。
搜索引擎优化：通过优化网页内容和结构，提高网站在搜索引擎中的排名和可见性的技术和策略。
响应式设计：根据用户设备的屏幕尺寸和分辨率，自动调整网页布局和内容的设计方法。
用户界面：用户与网站或应用程序进行交互的图形界面。
用户体验：用户使用网站或应用程序时的整体感受和满意度。
内容管理系统：用于创建、编辑和管理网站内容的软件工具。
主题：用于设置网站外观和布局的预定义样式和设计模板。
插件：用于增强网站功能的可插拔软件模块。
云存储：通过互联网将数据存储在远程服务器上的服务，用于存储网站的文件和数据。
1.1.2静态网页和动态网页
静态网页是指在服务器上存储的网页文件内容始终保持不变的网页。它由HTML、CSS和JavaScript等静态资源组成。
动态网页是指在用户与网页进行交互时，网页内容能够动态地改变或更新。与静态网页相比，动态网页具有更多的交互性和个性化定制功能。
1.2 网页的基本构成元素
1.2.1.文本
文本是指书面形式的语言材料，包括书籍、文章、报纸、杂志、电子邮件、短信等。
1.2.2.图片和动画
图片和动画都是视觉媒体，可以用于传递信息、表达观点和艺术创作等目的。图片可以用于表达和传达信息，如描绘物体、场景或人物等。
1.2.3.超链接
超链接是一种网页中的文本或图像，当点击时可以跳转到另一个网页、文件或其他资源。通过使用超链接，用户可以方便地在不同的网页之间导航和浏览相关内容。
1.2.4.音频视频
音频是指只包含声音的媒体，可以是音乐、讲话、演讲等。视频则是指同时包含声音和图像的媒体，可以是电影、电视节目、演唱会等。
1.2.5.交互表单
交互表单是一种在网页上用于收集用户信息和数据的工具，可以用于各种场景，例如用户注册、调查问卷、订单提交等，可以使用前端技术如HTML、CSS和JavaScript来创建表单界面，并使用后端技术如PHP、Java、Python等来处理表单数据。
1.2.6.其他常见元素
除了文本和图片之外，网页中常见的其他元素还有：
1. 链接（链接到其他页面或网站）
2. 按钮（用于触发特定操作或切换页面）
3. 表格（用于展示和组织数据）
4. 表单（用于收集用户输入的信息）
5. 导航栏（用于导航网站的不同页面）
6. 菜单（用于展示网站的不同功能或选项）
7. 图标（用于表示特定的功能或操作）
8. 视频和音频播放器（用于展示和播放视频和音频文件）
9. 滚动条（用于在页面中滚动内容）
10. 分页器（用于切换显示内容的页面）
11. 进度条（用于展示任务的进度）
12. 弹出窗口（用于显示额外的内容或提示信息）
13. 标签（用于组织和分类内容）
14. 滑块（用于选择范围或调整数值）
15. 计时器（用于显示倒计时或定时任务）
16. 轮播图（用于展示多个图片或内容）
17. 搜索框（用于搜索特定的内容）
18. 文章列表（用于展示多篇文章或新闻）
19. 分享按钮（用于分享网页的内容至社交媒体）
20. 评论区（用于用户对内容进行评论和互动）
1.3 页面布局结构
1.3.1 网页页面布局
国字型：是最常见的一种布局方式，其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方为站点信息。

国字型：是最常见的一种布局方式，其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方为站点信息。
厂字型：与"国字型"相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下方为站点信息。
海报型：这种结构的布局方式比较简单，主要用于突出需要表达的重点，通常最上分为通栏的标题和导航条，下方是正文部分。
Flash：用于显示
编辑
1.3.2 网页色彩搭配
单色调：使用同一色调的不同亮度和饱和度的颜色，可以给人一种简洁、清晰的感觉。常见的例子是使用不同深浅的蓝色作为主色调。
互补色：选择位于色轮上相对的两个颜色，如红色和绿色、蓝色和橙色等，可以产生鲜明对比和强烈的视觉效果。
类似色：选择色轮上相邻的几个颜色进行搭配，可以产生柔和、和谐的效果。常见的例子是使用不同的绿色、蓝色和紫色进行搭配。
三原色：使用红、黄、蓝三种原色进行搭配，可以产生明亮、活泼的效果。
黑白灰色：使用黑色、白色和不同深浅的灰色进行搭配，可以产生简洁、高雅的效果。
1.4 Web前端技术简介
1.4.1 初识WEB前端
Web前端（Web Front-End）是指负责开发Web页面的技术领域。主要涉及HTML、CSS和JavaScript等技术，用于构建和设计用户在Web浏览器中直接交互的界面和体验，Web前端开发人员通常负责将设计师和后端开发人员提供的设计稿转化为可点击和可交互的网页。他们使用HTML定义页面的结构和内容，使用CSS来控制页面的样式和布局，使用JavaScript来实现交互效果和动态内容。
1.4.2 WEB前端开发的三大核心技术
Web前端开发的三大核心技术是HTML、CSS和JavaScript语言。
1.4.2.1 HTML：
1.4.2.2 css：
1.4.2.3 JavaScript语言：
1.4.3 前端开发工具
编辑器：常见的前端开发工具包括Sublime Text, Visual Studio Code, Atom等。
浏览器：开发人员可以通过浏览器调试工具查看和修改网页的HTML、CSS和JavaScript代码，以及模拟不同设备、网络环境进行测试。
调试工具：Elements、Console、Sources、Network等面板，可帮助开发人员调试JavaScript代码、查看网络请求、修改页面样式等。
包管理工具：像npm、Yarn这样的包管理工具可用于安装、更新和管理前端项目中的依赖包。它们还提供了一些命令行工具，用于构建、测试和部署前端应用程序。
版本控制工具：Git是最常用的版本控制工具之一，用于跟踪和管理前端项目的代码变更。
1.5 HTML语法基础

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签和元素组成，用于描述网页的结构和内容。

以下是一些HTML的基础语法规则：
- HTML标签是以`<`开始，以`>`结束。例如：`<html>`，`<head>`，`<body>`等。
- 通常，HTML标签是成对出现的，有一个开始标签和一个结束标签。例如：`<p>`是段落的开始标签，`</p>`是段落的结束标签。
- 标签可以嵌套，但必须正确地嵌套。例如：`<body>`标签应该是在`<html>`标签的内部。
- HTML标签可以带有属性，用于提供关于标签的附加信息。属性以名称/值对的形式出现在开始标签中。例如：`<img src="image.jpg" alt="图片">`中的`src`和`alt`就是属性。
- HTML标签对大小写不敏感，但建议使用小写字母。

以下是一个简单的HTML文档示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<img src="image.jpg" alt="图片">
</body>
</html>

文档编码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
<p>这是我的第一个网页项目 <p>
		<p>2023级软件四班</p>
		<ahref="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.5.2 HTML文档标签

HTML文档标签是一种用于定义和描述网页内容的标记语言。每个HTML标签都包围在尖括号中，并且可以具有属性，用于提供更多关于标签的信息。以下是一些常见的HTML文档标签的示例：

1. `<html>`：定义HTML文档的根元素。
2. `<head>`：定义HTML文档的头部部分，包含关于文档的元数据。
3. `<title>`：定义HTML文档的标题，在浏览器的标题栏中显示。
4. `<body>`：定义HTML文档的主体部分，包含网页的内容。
5. `<h1>`到`<h6>`：定义标题的级别，从最高到最低。
6. `<p>`：定义段落。
7. `<a>`：定义链接，通过`href`属性指定链接地址。
8. `<img>`：定义图像，通过`src`属性指定图像的URL。
9. `<ul>`和`<li>`：定义无序列表和列表项。
10. `<ol>`和`<li>`：定义有序列表和列表项。
11. `<table>`、`<tr>`和`<td>`：定义表格、表格行和表格数据。
12. `<div>`：定义一个文档中的块级容器。
13. `<span>`：定义一个文档中的内联容器。

这只是一些常见的HTML文档标签的示例，还有许多其他的标签可以用于定义网页的各个部分和元素。

1.5.2基本结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content=""/>
<meta name="description" content="xxx"/>
<title>第一个网页名</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
<script>src=</script>
</head>
<body>
<p>这是我的第一个网页项目</p >
<p>2023软件技术4班王子超</p>
</body>
</html>

1.6创建HTML文档

1.7网页头部标签

网页头部标签是指位于HTML文档的```<head>```标签内的一系列元素，用来提供对网页的描述、配置和优化。

常见的网页头部标签有：

1. ```<title>```：定义网页的标题，显示在浏览器的标题栏或标签页上。

2. ```<meta charset="utf-8">```：定义网页的字符编码。

3. ```<meta name="description" content="网页描述">```：定义网页的描述，通常用于搜索引擎的显示结果。

4. ```<meta name="keywords" content="关键词1,关键词2,关键词3">```：定义网页的关键词，用于搜索引擎的优化。

5. ```<link rel="stylesheet" href="style.css">```：引入外部CSS样式文件。

6. ```<script src="script.js"></script>```：引入外部JavaScript脚本文件。

7. ```<base href="http://www.example.com/">```：指定网页中相对URL的基准地址。

8. ```<link rel="icon" href="favicon.ico" type="image/x-icon">```：指定网页的favicon图标。

以上是一些常见的网页头部标签，根据需要还可以自定义其他标签。

1.8 HTML5文档注释和特殊符号
注释
为增加 HTML5 文档的可读性，可为其添加注释部分。
特殊符号
由于大于号“>”和小于号“<”等已作为 HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTIL代码被称为字符实体。
特殊符号：空格，大于，小于，引号，版权号字符实体：&nbsp,&gt,&lt,&quot,&copy

1.9 综合案例——临江仙 · 送钱穆父