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

殅.

已于 2024-09-19 20:26:43 修改

阅读量852

点赞数 28

文章标签： html

于 2024-09-13 10:04:00 首次发布

本文链接：https://blog.csdn.net/2302_82187402/article/details/142058119

版权

1.1认识网页和网站

1.1.1网页、网站

网页和网站的区别：

网页：网页是网站的基本元素，通过‌HTML、‌CSS、‌JavaScript等编写，可以在浏览器中显示和访问。它通常包含文本、图片、音频、视频等多媒体元素，以及链接到其他网页的超链接。‌

网站：网站是由多个网页组成的集合体，通常包含一个或多个主题，提供相关的信息和服务。网站可以是个人的、企业的、政府的等各种类型，用于展示、交流、销售等多种目的。网站还包括导航菜单、标志、底部信息等共享的元素。‌

常用术语：

Internet:有各种不同类型的计算机网络链接起来的全球性网络。

WWW：其功能是让Web客户端访问Web服务器中的网页。

URL：统一资源定位符。

IP：网际协议。

域名：指网站名称，在全世界是唯一的。

HTTP:超文本传输协议。

FTP：文件传输协议。

发布：指将制作好的网页传到网络上的过程，也叫上传网站。

站点：一个站点就是一个网页所有内容所放的文件夹。

超链接：是一种允许用户在不同网页、‌网站、‌文件或‌应用程序之间进行跳转的连接关系。

客户机和服务器：服务器和客户机是计算机网络中的两个关键组件，它们共同协作以提供网络服务和应用程序。

服务器是一种计算机系统，它提供了一种服务，如存储数据、处理数据、运行应用程序或提供网络资源。服务器通常位于数据中心或服务器室内，并且通常由专业的IT人员进行管理和维护。服务器可以是物理计算机或虚拟计算机，它们可以运行各种操作系统和应用程序，如Linux、Windows、数据库管理系统等。

客户机是另一种计算机系统，它通常是用户与服务器进行交互的设备，如个人计算机、手机、平板电脑等。客户机可以运行各种操作系统和应用程序，如Windows、macOS、iOS、Android等。客户机可以通过网络连接到服务器，以访问服务器上的资源和服务，如访问网页、下载文件、发送电子邮件等。

1.1.2静态网页和动态网页

静态网页和动态网页区别：

静态网页由HTML

动态网页由HTML+CSS

1.2网页的基本构成元素

1.2.1文本

文本具有体积小、网络传输速度快等特点，可使用用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。

1.2.3超链接

是‌互联网上用于连接不同网页、文件、‌电子邮件地址等资源的桥梁。通过超链接，用户可以轻松地在不同的网页之间跳转，访问相关的信息或执行特定的操作。以下视频将详细解释超链接的概念及其在‌网页设计中的应用。

1.2.4音频视频

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

1.2.5交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。

1.2.6.其他常见元素

悬停按钮、JavaScript与ActiveX等各种特效，不仅能点缀网页，使网页更活泼有趣，还能在网上娱乐、电子商务等方面也有不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

（1）网页安全色

有红色、绿色、蓝色

（2）网页中色彩的表达

（3）常见的搭配色彩：

采用相近或相似色配色

1.4 Web前端技术简介

1.4.1 初识WEB前端

Web前端即指平常上网浏览的页面。

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

1.HTWL

2.CSS语言

3.JavaSpcript语言

1.4.3 前端开发工具

浏览器、网页编辑器、切图软件

1.4.3.1浏览器

IE浏览器

Chrome浏览器

Firefox浏览器

Safari浏览器

Opera浏览器

1.4.3.2网页编辑器

Adobe Dreamweaver

Subime Text

NotePad++

Edit Plus

HBuilder

1.4.3.3切图软件

切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等操作。常用的切图软件有Photoshop 和Fireworks两种。

1.5HTML语法基础

1.5.1HTML概述

超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.1语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和运行的操作。

1.5.1.2超文本

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

1.5.1.3标记

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签中组成的。

1.5.2.1 HTML文档标签<html>...</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 文档编码

格式如下：

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

格式如下：

<body>网易的内容</body>

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

<title>标签的网页标题标签，它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能用于<head>和</head>之间。<title>标签是对文件内容的概括。

1.7.2 <meta>标签

name属性主要有以下两个参数：keywords（关键字）和description（网站内容描述）。

1.7.2.1 keywords

用来告诉搜索引擎网页使用的关键字。

1.7.2.2 description

用来告诉搜索引擎网页使用的主要内容。

1.7.3 <link>标签

链接CSS文件，如下:

如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加 HTMIS文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTMLS使用<! -...—-)标签为文档进行注释，注释标签以“”结束，中间的 “..” 替换为注释文字内容即可。<! ---->标签支持单行和多行注释。

1.8.2 特殊符号

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="xxx"/>
		<title>的一个网页项目</title>
		
		<link rel="stylesheet"
				href="css/index.css"
				type="text/css"/>
				<script src="js/index.js"
				type="text/javascript"></script> </script>
	</head>
	<body>
		
		<p>这是我的第一个网页项目</p>
		<p>2023级软件2班</p>
		<p>1</p>
		<p>2</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

运行结果：

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

代码如下：

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

运行结果：