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

风染07

已于 2024-09-11 22:02:38 修改

阅读量563

点赞数 21

文章标签： html5

于 2024-09-11 12:40:27 首次发布

本文链接：https://blog.csdn.net/2302_80528053/article/details/142078030

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页

定义：网页是互联网上的一个单独的文档，通常用HTML（超文本标记语言）编写。它可以包含文本、图像、视频、链接等多种内容。

网站

定义：网站是由多个网页组成的集合，通常围绕一个主题或目的组织在一起。网站可以包含多个页面、图像、视频、文件等。

网页和网站的区别：网页是单个文档，而网站是由多个网页组成的集合。

1.1.2常用的术语

网页设计有其专业的常用术语，如Intemet、www、浏览器、URL、IP、域名、mmFTP、站点、发布、超链接、导航条、客户机和服务器等，作为一名网页设计师，必须熟掌握这些常用术语。

Intemmet：由各种不同类型的计算机网络连接起来的全球性网络。
www：其功能是让 Web客户端(常用浏览器)访问Web 服务器中的网页。浏览器:将 Intermet 中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取 Interet 中的内容。常用的浏览器有 Internet Explorer(E)浏览器，Firefox 浏览器和Chrome 浏览器等。

URL：统一资源定位符，指定通信协议和地址，如“http：//www.baidu.com”是一个URL，“http：//”表示通信协议为超文本传输协议，“www.baidu.com”表示网站名称。

域名：指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名.主机名:类别名，地区名。
HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的wwW文件都必须遵守这个标准。
FTP：文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。

1.1.3 静态网页和点动态网页

静态网页：

定义：静态网页是指网页内容在服务器上是固定的，用户访问时，服务器直接将存储的HTML文件发送给用户

动态网页：

定义：动态网页是指网页内容可以根据用户的请求、输入或其他条件动态生成，通常依赖于服务器端脚本和数据库。

1.2网页的基本构成元素

有文本、图片和动画、音频和视频、超链接、交互表单等其他元素。

这里我简单解释一下超链接和交互表单

1.超链接：

通过<a>标签创建超链接，允许用户在不同网页之间导航。

2.交互表单：

用于收集用户输入的数据，使用<form>标签及相关输入元素（如<input>、<textarea>、<select>等）。

1.3 网页布局结构

1.网页页面布局

2.网页色彩搭配

（1）网页安全色。网页安全色彩（Web Safe Colors）是指在早期的网页设计中，为了确保在不同显示设备上颜色的一致性，所定义的一组颜色。这些颜色在256色的调色板中被广泛支持，确保在各种浏览器和操作系统上都能正确显示。

网页安全色彩通常由红、绿、蓝（RGB）三种颜色的组合构成，每种颜色的值为0、51、102、153、204、255中的一个。这意味着每种颜色可以有6个不同的强度值。

（2）网页中色彩的表达。网页色彩的表达主要有几种常见的方式，每种方式都有其特定的格式和用途。最常见的表达方式是十六进制，还有RGB、RGBA和HSL等

1.4 Web前端技术简介

1.4.1初识Web前端

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

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

1.HTML

HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐,程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。

2.CSS语言

CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

3.JavaScript语言

JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScnipt 引擎，属于浏览器的一部分，因此 JavaScript代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌人在HTML中的方式来实现自身的功能。

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项目”、如图

新建完成后就可以在index.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时显示的内容。

示例：

<noscript>您的浏览器不支持JavaScript。</noscript>

示例代码

以下是一个完整的HTML文档示例，展示了头部标签的使用：

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta name="description" content="这是一个示例网页">  
    <meta name="keywords" content="HTML,示例,网页">  
    <meta name="author" content="作者姓名">  
    <title>我的网页标题</title>  
    <link rel="stylesheet" href="styles.css">  
    <style>  
        body {  
            background-color: lightblue;  
        }  
    </style>  
    <script src="script.js" defer></script>  
</head>  
<body>  
    <h1>欢迎来到我的网页</h1>  
    <p>这是一个示例网页。</p>  
    <noscript>您的浏览器不支持JavaScript。</noscript>  
</body>  
</html>

1.8 HTML5文档注释和特殊符号

1.8.1 注释

1.8.2 特殊符号

符号	字符实体	描述
`&`	`&`	和号（Ampersand）
`<`	`<`	小于号（Less Than）
`>`	`>`	大于号（Greater Than）
`"`	`"`	双引号（Double Quote）
`'`	`'`	单引号（Single Quote）
`©`	`©`	版权符号（Copyright）
`®`	`®`	注册商标符号（Registered Trademark）
`™`	`™`	商标符号（Trademark）
`€`	`€`	欧元符号（Euro）
`£`	`£`	英镑符号（Pound Sterling）
`¥`	`¥`	日元符号（Yen）
`•`	`•`	项目符号（Bullet）
`–`	`–`	破折号（En Dash）
`—`	`—`	长破折号（Em Dash）
`•`	`•`	项目符号（Bullet）
`∞`	`∞`	无穷大符号（Infinity）
`♥`	`&hearts;`	爱心符号（Heart）

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>
		<ing src="ing/1.1.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%" />
		<p align="center">网页制作教程Copyright&copy;江西职业学院</p>  
		    <img src="img/7ab2ee036cae57a984ed3a17034a80c.jpg">
	</body>
</html>