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

shenmuyo

已于 2024-09-12 20:36:44 修改

阅读量1.1k

点赞数 34

文章标签： html

于 2024-09-12 13:12:27 首次发布

本文链接：https://blog.csdn.net/shenmuyo/article/details/142091932

版权

1.1认识网页和网站

1.1.1网页网站

网页和网站的区别

1、含义不同

网站是按照一定规范和规则，使用HTML、JavaScript和CSS构成的网页集合；

网页是网站的基本元素，展示给用户

2、关系不同

网站包含了网页，网页是包含了HTML代码集合，呈现一个界面

3、组成不同

网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成

4、功能不同

网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能

人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。

网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。

5、访问不同

网站需要部署到服务器，利用域名或IP地址访问，而网页可以直接在浏览器访问

6、体验不同

网站给用户体验更为全面，是一个完整的系统，而网页只是一个功能界面展示

常用术语

超链接

超链接在本质上属于一个网页的一部分，是一种允许用户同其他网页或站点之间进行连接的元素。

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序，如图1-6所示。

URL

URL的中文全称为统一资源定位符，其作用是用于完整地描述Internet上的网页和其他资源。URL标识在Internet中是唯一的，一个URL标识只能表示一个网页或其他资源的位置。URL以统一的语法编写而成，其格式如下：

“协议名”://“主机域名/IP地址”：“端口”/“目录”/“文件名”.“文件扩展名”“锚记名称”。

HTTP协议

HTTP的中文全称为超文本传输协议，是Internet中最常见的协议之一。是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效地工作，减少网页传输的时间。其不仅保证计算机正确快速地传输超文本文档，还确定优先传输文档中的哪一部分。例如，文本优先于图形等。

域名

从技术上讲，域名只是一个Internet中用于解决IP地址对应问题的一种方法。它可以是Internet中的1个服务器或1个网络系统的名称。该名称是全世界唯一的，因此被统称为网址。

目前，有一些国家在开发其他语言的域名，如中文域名。域名不仅便于记忆，而且即使在IP地址发生变化的情况下，通过改变翻译对应关系，域名仍可保持不变。

浏览器

浏览器是一种基于Internet的软件。其作用是显示网页服务器或档案系统的文件，并让浏览者与这些文件互动。浏览器可以显示Internet内网页中的文本、图像、视频和声音等网页元素。

上传/下载

上传就是将信息从个人计算机(本地计算机)传递到服务器(远程计算机)系统上，让网络上的人都能看到。例如，将制作好的网页发布到Internet上去，以便让其他人浏览。这一过程称为上传，如图1-10所示。

上传分为Web上传和FTP上传，前者直接通过单击网页上的链接即可操作，后者需要专用的FTP工具。

下载(Download)常简称“当”(Down)。下载是通过网络进行传输文件并保存到本地计算机上的一种网络活动(与‘上载’相对)，也是指把服务器上保存的软件、图片、音乐、文本等下载到本地计算机中。

1.12 静态网页和动态网页

静态页面：
1. 内容固定：静态页面在服务器上存储的是HTML文件，用户访问时，服务器将HTML文件发送给用户的浏览器，用户看到的页面内容是固定的。
2. 加载速度快：因为内容固定，静态页面通常加载速度较快。
3. 易于优化：搜索引擎优化（SEO）相对容易，因为页面内容不经常改变。
4. 适合简单信息展示：适合展示不经常更新的信息，如公司介绍、产品说明等。

动态页面：
1. 内容可变：动态页面不是在服务器上预先生成HTML文件，而是通过服务器上的应用程序（如PHP、Java、Python等）在用户请求时动态生成。
2. 交互性强：可以实现用户登录、数据检索、在线购物等交互功能。
3. 加载速度相对较慢：因为需要服务器处理请求并动态生成内容，所以加载速度相对慢。
4. 适合复杂应用：适合需要与用户互动、频繁更新内容的应用，如论坛、新闻网站、社交媒体等。

在实际应用中，静态页面和动态页面各有优劣，根据实际需要选择合适的页面类型。对于需要快速加载和展示固定内容的页面，静态页面是更好的选择；而对于需要与用户互动和频繁更新内容的页面，动态页面则更加合适。

1.2网页的基本构成元素

网页的基本元素一般包括文本、图片和动画、声音和视频、超链接、导航栏、表格，以及表单等。

1.3页面布局结构

‌右框型布局结构‌：顶部通常是网站Logo和banner，下方左侧是菜单，右侧显示主要内容。这种布局主次分明，结构明朗，适合初学者上手，广泛应用于各类网站‌1。
‌目字型布局结构‌：在右框型结构基础上增加了一个竖列，缩小中间内容的宽度，菜单和导航集中在上方横列和下方横列中。这种布局充分利用版面，信息量大，适合大型网站‌1。
‌曰字形对称布局结构‌：对称的布局结构，上下或左右对称，具有强烈的反差对比和视觉冲击力，但制作难度较大，适用于设计型站点‌1。
‌pop布局结构‌：适用于广告网页，以精美的图片为设计核心，不讲究内容，通常用于个人网站和娱乐类网站‌1。
‌综合布局结构‌：结合上述几种布局结构的优点，根据具体需求灵活调整，广泛应用于各种类型的网站‌1。

1.3.2 网页色彩搭配
网页色彩搭配是网页设计中的重要环节，它不仅影响着网站的整体视觉效果，还能传达特定的情感和信息，从而影响用户的心理感受和用户体验

1.4 Web前端技术简介

1.4.1 初识Web前端

Web前端是指构建和设计用户在浏览器中直接交互的部分的技术和过程。它涉及到网页的视觉效果、布局、用户体验和交互功能。
1.4.2 Web前端开发的三大核心技术

‌Web前端技术主要包括HTML、CSS、JavaScript三大核心技术。
1.4.3We前端开发工具

1.浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有IE浏览器、Chrome 浏览器、Firefox 浏览器、Safan 浏览器和 Opera浏览器等，由于某些因素，这些浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。（这里我就不一一介绍了感兴趣的可以自己百度一下。）

2.网页编辑器

HTML，CSS和JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。因此不对开发工具作特定要求，使用任意一款纯文本编辑器均可以进行网页内容的编写。这里介绍几款常用的网页开发工具软件:Adobe Dreamweaver, Sublime Text, NotePad++, EditPlus 和 HBuilder。（我自己用的是HBuilder）

3.切图软件

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

1.5 HTML语法基础

1.5.1HTML概述
HTML是构建网页的基础语言。它用于定义网页的结构和内容，使浏览器能够正确地显示文本、图像、链接和其他元素。

HTML是构建网页的核心语言，定义了网页的结构和内容。通过使用各种标签和属性，开发者可以创建丰富的用户体验。随着HTML5的引入，网页开发变得更加灵活和强大。

1.5.2HTML基本结构
HTML文档通常由以下几个部分组成：

文档类型声明：指示文档使用的HTML版本。
<html>标签：整个HTML文档的根元素。
<head>标签：包含文档的元数据，如标题、字符集、样式表链接等。
<body>标签：包含网页的可见内容，如文本、图像、链接等。
2. 常用标签
标题标签：<h1>到<h6>，用于定义不同级别的标题。
段落标签：<p>，用于定义文本段落。
链接标签：<a>，用于创建超链接。
图像标签：<img>，用于插入图像。
列表标签：<ul>（无序列表）、<ol>（有序列表）、<li>（列表项）。
表格标签：<table>、<tr>（表格行）、<td>（表格单元格）。

1.6创建HTML文档

个网页可以简单得只有文字，也可以复杂得既有图片、文字，又有超链接和视频、音频等。下面使用 HBuilder 快速编辑一个HTML文件，通过它来学习网页的编辑、保存过程。(1)使用HBuilder新建项目。依次点击选择“文件”→“新建”→“HTML文件”、如图

1.7网页头部标签
HTML网页的头部标签（<head>）包含了关于文档的元数据和其他信息，这些信息通常不会直接显示在网页的内容中。以下是一些常用的头部标签及其功能：

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

<title>我的网页标题</title>
2. <meta>
功能：提供关于文档的元数据，如字符集、描述、关键词、作者等。
常用属性：
charset：指定文档的字符编码。
name和content：用于描述网页的内容。
示例：
<meta charset="UTF-8"> <meta name="description" content="这是一个示例网页"> <meta name="keywords" content="HTML,示例,网页"> <meta name="author" content="作者姓名">

3. <link>
功能：用于链接外部资源，如样式表（CSS）。
常用属性：
rel：指定与目标资源的关系（如stylesheet）。
href：指定资源的URL。
示例：
<link rel="stylesheet" href="styles.css">

4. <style>
功能：用于在文档中嵌入CSS样式。
示例：
<style> body { background-color: lightblue; } </style>

5. <script>
功能：用于嵌入或链接JavaScript代码。
常用属性：
src：指定外部JavaScript文件的URL。
defer：延迟脚本的执行，直到文档解析完成。
示例：
<script src="script.js" defer></script>

6. <base>
功能：指定文档中所有相对URL的基准URL。
示例：
<base href="https://www.example.com/">

7. <noscript>
功能：提供在浏览器不支持JavaScript时显示的内容。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题</title>
	</head>
	<body>
		<p>我是你爹</p>
		<p>你是我儿子</p>
		<p>叫爹</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.8 HTML5文档注释和特殊符号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 注释-->
		<p>我是你爹</p>
		<!--
		注释1
		注释2
		注释3
		注释4
		-->
		<p>你是我儿子</p>
		<p>叫爹</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.8.2 特殊符号

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: larger;
			}
			</style>
	</head>
	<body bgcolor="antiquewhite" text="#333333" >
		<h2 align="center">临江仙·送钱穆父</h2>
		<p >宋 苏轼</p>
		<!--使用<br/>的效果-->
		<p>一别都门三改火，天涯踏尽红尘。<br/>
		依然一笑作春温。<br/>
		无波真古井，有节是秋筠。<br/>
		惆怅孤帆连夜发，送行淡月微云。<br/>
		尊前不用翠眉颦。<br/>
		<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
		<img src="nt.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%" />
		<p align="center">网页制作教程Copyright&copy;江西清华大学</p>  
</html>