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

昼夜ɑː

于 2024-09-13 09:13:39 发布

阅读量571

点赞数 15

文章标签： xhtml

本文链接：https://blog.csdn.net/2401_87174676/article/details/142057921

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页是构成网站的基本单位，是由HTML、CSS和JavaScript等技术创建的文档。它可以包含文本、图像、链接、表格和其他多媒体元素，用于向用户展示信息和提供交互功能。

网站是由多个网页组成的集合，它们共同形成了一个完整的网络实体。网站旨在向用户提供特定的内容、服务或功能，并通过网页之间的导航和链接进行组织和展示。

一般来说，网页是网站的基本构成单元。每个网页都有一个唯一的URL（统一资源定位符），通过这个URL可以访问到特定的网页。网页通常包括以下几个方面：

结构：网页使用HTML（超文本标记语言）来定义其结构。HTML使用标签（如<h1>、<p>、<img>）来定义标题、段落、图像等元素。
样式：网页使用CSS（层叠样式表）来定义其外观和样式。CSS可以控制网页中的字体、颜色、布局等方面的样式。
功能：网页使用JavaScript来实现交互和动态功能。JavaScript可以用来验证表单、处理用户输入、创建动画效果等。

常用术语：

Intertent:由各种不同类型的计算机网络连接起来的全球性网络
URL（统一资源定位符）：用于标识网页或网站的地址，用户通过URL访问特定的网页或网站。
超链接（Hyperlink）：用于将一张网页与另一张网页或其他资源进行关联。通过点击超链接，用户可以快速跳转到目标页面。
浏览器是用来检索、展示以及传递Web信息资源的应用程序。
IP：用于标识网络设备的唯一数字标识符。
HTTP（Hypertext Transfer Protocol）：用于在Web浏览器和服务器之间传输超文本的协议。
FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方
WWW是“World Wide Web”的缩写，中文称为“万维网”。它是一个通过互联网访问的、由许多互相链接的文档和资源组成的系统。
域名（Domain Name）是互联网上用于识别和定位网站的名称。

1.1.2 静态网页和动态网页

静态网页：HTML/CSS

动态网页：JavaScript

1.2 网页的基本构成元素

1.2.1.文本

网页上的文本内容是最基本的元素之一，可以通过<p>、<h1>、<span>、<a>等标签来定义和显示文本内容。

文本体积小，网络传输数据快，是网页最主要的基本元素，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2.图片和动画

比文本更加生动和直观，可以传递一些文本不能表达的信息，包括GIF、JPEG（最广泛）和PNG等

网页中的图像可以通过<img>标签来引入和显示，可以指定图片的来源地址、大小、替代文本等属性。

1.2.3.超链接

从一个网页指向另一个目的端的链接（是WWW流行起来的最主要原因）

通过<a>标签可以创建超链接，让用户点击后跳转到其他页面或位置。

1.2.4.音频视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid 和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错是背景音乐的首选。

1.2.5.交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单设备上都将显示为
一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点

1.2.6.其他常见元素

除了网页的基本构成元素（如文本、图像、链接等），还有一些常见的网页元素，包括：

表格（Table）：用于展示数据的结构化元素，可以包含多行和多列，用于呈现有组织的数据。
按钮（Button）：用于触发特定操作或提交表单的交互元素，通常与JavaScript代码关联。
下拉菜单（Dropdown Menu）：用于提供选项列表，当用户点击时会显示所有选项，可以选择其中一项。
导航栏（Navigation Bar）：用于在网页中导航不同的页面或页面部分，通常包含链接到其他页面的按钮。
图片轮播（Image Slider）：用于在网页中展示多张图片，以滑动、淡入淡出等动画效果切换图片。
模态框（Modal）：用于展示重要信息或需要用户输入的弹出框，阻止用户操作页面其他部分。
轮播图（Carousel）：类似于图片轮播，但通常包含更多内容，如标题、描述和按钮等。这些元素可以让网页更具交互性和多样性，提供更好的用户体验。

1.3 页面布局结构

1.3.1 网页页面布局

网页布局，是指网页中文本、图片、按钮和图标等元素的组织和排列方式。这种布局决定了用户浏览网页时的视觉体验和交互效果。可以说，网页布局就是一个网页中各元素的组织方式

常见的网页页面布局包括：

固定布局（Fixed Layout）：使用固定的像素单位来定义网页的尺寸和位置，不随窗口大小的改变而改变。
流式布局（Fluid Layout）：使用相对单位如百分比来定义网页元素的尺寸和位置，使其能够自适应不同窗口大小。
分栏布局（Column Layout）：将页面水平分成多个列，常用于显示多个内容块或导航栏。
响应式布局（Responsive Layout）：根据设备的屏幕大小和分辨率自动调整和适应布局，使网页在不同设备上能够良好显示。
网格布局（Grid Layout）：使用网格系统将页面划分为多个网格单元，方便对元素进行排列和布局。
绝对定位布局（Absolute Positioning）：使用绝对定位将元素精确定位在页面上的指定位置，常用于创建特殊效果或重叠布局。

这些布局方式可以根据不同的设计需求和网页的目标来选择和组合，以实现更好的视觉和用户体验。

1.3.2 网页色彩搭配

网页色彩搭配是网页设计中非常重要的一部分，选择合适的色彩搭配可以提升网页的视觉吸引力和用户体验。以下是一些常见的网页色彩搭配方式：

单色调搭配：使用同一色调的不同深浅变化来创造简洁而现代的效果。可以选择明亮的色调来增加活力，或选择柔和的色调来营造温暖和舒适的感觉。
对比色搭配：选择对比强烈的两种颜色来突出重要元素或信息。例如黑白对比或深蓝和橙色的对比，可以使网页元素更加醒目。
类似色搭配：选择相邻的色彩在色轮上的位置接近的颜色进行搭配。这种搭配方式通常会给人以和谐、温暖和舒适的感觉。
互补色搭配：选择色轮上相对位置相对的两种颜色进行搭配。例如红色和绿色、蓝色和橙色等。这种搭配方式可以产生强烈的对比和视觉效果。
分裂互补色搭配：选择一种颜色，然后选择该颜色相对位置两侧的两种颜色进行搭配。这种搭配方式可以产生较为平衡的色彩组合。

无论选择哪种色彩搭配方式，都需要考虑网页的主题、内容和目标受众，以及色彩的情感和文化含义对用户的影响。

1.4 Web前端技术简介

1.4.1 初识WEB前端

HTML（HyperText Markup Language）：HTML是一种标记语言，用于描述网页的结构和内容。学习HTML可以了解网页的基本元素、标签和属性，以及如何编写语义化的网页结构。
CSS（Cascading Style Sheets）：CSS是一种样式表语言，用于控制网页的样式和布局。学习CSS可以了解如何设计网页的外观、字体、颜色、布局和响应式设计等。
JavaScript：JavaScript是一种脚本语言，用于为网页添加交互和动态效果。学习JavaScript可以了解如何处理用户输入、操作网页元素、处理数据、进行动画效果和与后端进行交互等。
响应式设计：随着移动设备的普及，响应式设计成为重要的前端技术。学习响应式设计可以了解如何根据不同设备的屏幕大小和分辨率，使网页能够自适应地显示和布局。
前端开发工具：学习使用一些常用的前端开发工具，如代码编辑器（如Visual Studio Code）、浏览器开发者工具（如Chrome DevTools）、版本控制工具（如Git）等，可以提高开发效率和调试能力。

1.4.2 WEB前端开发的三大核心技术

HTML:网页制作的标准语言，控制页面结构

CSS：可静态的修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

JavaScript：是一种属于网络的脚本语言常用来为网页添加各式各样的动态功能

1.4.3 前端开发工具

浏览器: 谷歌浏览器

网页编辑器：HBuilderX

1.5 HTML语法基础

1.5.1 HTML概述

HTML是Hyper Text Markup Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.1 语言

HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。HTML的语法基于

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本

1.5.1.3 标记

标记用<>括起来，通常由一个开始标记和一个结束标记组成，中间包含元素的内容。即：<xxx> 内容</xxx>

1.5.2 HTML基本结构

1.5.2.1 HTML文档标签<html>...</html>

</html>HTML文档标签的格式为

<html>HTML文档的内容</html>

<html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>

1.5.2.2 HTML文档头标签<head>...</head>

HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内容</head>文档头部内容在开始标签<html>和结束标签</html>

1.5.2.3 文档编码

文档编码格式如下:<meta charset=" utf-8"/>
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用GB2313(简体中文)。

1.5.2.4 HTML文档主体标签<body>...</body>

</body> HTML文档主体标签的格式为<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标题标签

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页标题</title>
	</head>
	<body>
		
	</body>
</html>

结果：

1.7.2 <meta>标签

用于提供与页面内容相关的关键词列表。

1.7.2.1 keywords

keyworlds用于提供关于页面的简短描述，设置关键字

1.7.2.2 description

description 设置描述信息，设置字符集

1.7.3 <link>标签

link用于建立文档（CSS）与连接资源的关联，指定外部资源，建立html和外部资源的联系。

常用属性：

rel：引入的资源类型（例如icon、stylesheet）
type：指定MIME类型（如text/css）
href：指定外部的URL

实例：

<link rel="stylesheet" type="text/css" href="common.css">

1.7.4 <script>标签

作用：内联、外置或动态引入js脚步文件。

1.8 HTML5文档注释和特殊符号

1.8.1 注释

注释：

快捷键位ctrl+

注释是文档中的说明文字，不会被浏览器执行。HTML5使用标签为文档进行注释，注释标签以“”结束，中间的“ ”替换为注释文字内容即可。

1.8.2 特殊符号

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

代码如下：

<meta charset="utf-8" />
		
		<meta name="descrption"content="本网站收录精选宋词"/>
				<title>宋词精选</title>
				<style type="text/css">
							p{
								text-align: center;
								font-size: larger;
							}
						</style>
	</head>
	<body>
		bgcolor="antiquewhite" text="#006633">
						<h2 align="center">临江仙·送钱穆父</h2>
						<p>宋·苏轼</p >
						<!--使用<br/>的效果-->
						<p>一别都门三改火，天涯踏尽红尘。<br />
						   依然一笑作春温。<br />
						   无波真古井，有节是秋筠。<br />
						   惆怅孤帆连夜发，送行淡月微云。<br />
						   尊前不用翠眉颦。<br />
						   <font color="blue" face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
						   < img src="img/1.jpg"/>
						   <!--水平线-->
						   <hr size="3" color="green" width="100%/>"
						   <p align="center">网页制作教程&copy;昼夜ɑː</p >
	</body>
</html>

运行结果：

昼夜ɑː

关注

15
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
第一章网页制作的基础知识

HTML（HyperText Markup Language）：HTML是一种标记语言，用于描述网页的结构和内容。学习HTML可以了解网页的基本元素、标签和属性，以及如何编写语义化的网页结构。CSS（Cascading Style Sheets）：CSS是一种样式表语言，用于控制网页的样式和布局。学习CSS可以了解如何设计网页的外观、字体、颜色、布局和响应式设计等。JavaScript：JavaScript是一种脚本语言，用于为网页添加交互和动态效果。
复制链接

扫一扫