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

小Q655

已于 2024-09-13 09:47:01 修改

阅读量1.1k

点赞数 28

文章标签：网络

于 2024-09-13 09:45:03 首次发布

本文链接：https://blog.csdn.net/2302_82186688/article/details/142057793

版权

1.1 认识网页和网站

1.1.1网页、网站

网页被定义为任何网站的单个文档或单独页面。每个网页都附加到一个唯一的 URL 地址，用于呈现或访问该特定页面。这些 URL 和网页可以是私有的或公开的，具体取决于开发人员如何配置它们。

网站是使用超链接链接在一起的几个网页的集合。所有网页都链接在一个域下，以唯一标识网站。网站是连接不同版块的超链接的主要来源，这些版块可能还包括其他相关网页。

常用术语：Internet、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等……

1.1.2静态网页和动态网页

静态网页：HTML、SCC，动态网页：JavaScript

1.2网页的基本结构成元素

1.2.1文本

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

1.2.2图片和动画

在网页中使用GIF, JPEG(JPG), PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。

动画主要指由FLASH软件制作的动画,由于其是准流媒体文件,加上矢量动画,文件小,使其在网络运行具有强大优势,是网页设计者必学的软件。

1.2.3超链接

从一个网页指向另一个目的端的链接。

1.2.4音频和视频

用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。很多浏览器不要插件也可以支持MIDI,WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。视频文件均需插件（如REALONE、MEDIA PLAYER）支持，用于网络的视频格式主要有ASF、WMV、RM等流媒体格式。

1.2.5交互表单

交互设计是前端开发中的核心部分，它关注用户如何与页面元素进行交互。良好的交互设计可以提升用户体验，增强用户满意度和效率。

1.2.6其他常见元素

除了以上几种最基础的元素之外，还有其他几种常用元素，包括悬停按钮，Java特效，ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐，电子商务等方面也有着不可忽视的作用。

1.3页面布局结构

1.3.1网页页面布局

1.3.2网页色彩搭配

网页中色彩的表达使用三种颜色，及红(R)、绿(G)、蓝(B)，及通常所说的RGB色彩，它包含了人类所感知的所有颜色，网页中表达颜色如下（红色为例）RGB格式：红色是(255,0,0)或十六进制hex格式为(FF0000)。

1.4Web前端技术简介

1.4.1初认WEB前端

Web前端即指平时浏览的网页，如上网浏览新闻，查询快递，淘宝购物等都是在浏览网页。Web前端开发其实是从网页演变而来的，名称上有明显的时代特征。

早期的前端其实就是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript逐渐成为Web前端开发的语言以及Web2.0的出现。

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

1.HTML 控制页面结构

2.CSS语言

3.JavaScript语言动态技术

1.4.3前端开发工具

浏览器：谷歌浏览器 Google chrome

编辑器：HBuildreX

1.5HTML语法

1.5.1 HTML概述

1.5.1.1语言

HTML是一种超文本标记语言

1.5.1.2超文本

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

1.5.1.3标记

HTML5是一种标记语言，是由一系列成对出现的元素标签嵌套组合而成

超文本标记语言

1.5.2HTML基本结构

CSS文件夹：存放css文件，页面样式

img文件夹：存放图片

js文件夹：存放JavaScript文件

1.6创建HTML文档

文件>新建>新建项目

输入项目名称，选择基本HTML项目

点击创建

1.7网页头部标签

1.7.1<title>标签

title：设置网页标题

1.7.2<meta>标签

meta：设置字符集，设置keywords(关键字)，设置描述信息

1.7.3<link>标签

link：引入css文件,rel指定文件作用，href指定文件路径，type指定文件类型

1.7.4<script>标签

script：引入javaScript，src指定文件路径，type指定文件类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的第一个网页</title>
	</head>
	<body>
		开始学习网页设计与制作！
		<hr size="3" color="black">
		<a href="http://www.baidu.com">百度</a>
		<script type="text/javascript">
			document.write("链接到百度");
			</script>
	</body>
</html>

1.8HTML5文档注释和特殊符号

1.8.1注释

为了增加HTML5文档的可读性，可为其添加注释部分

1.8.2特殊符号

特殊符号	字符实体	示例
空格		银河商务  热线：400-111-1111
大于（>）	>	3>2
小于（<）	<	2<3
引号（"）	"
版权符号（©）	&copy	Copyringht©网页设计教程

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

运行结果：