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

月亮里的橘子猫

于 2024-09-13 09:51:19 发布

阅读量934

点赞数 19

文章标签： html

本文链接：https://blog.csdn.net/2303_80888494/article/details/142058011

版权

1.1 认识网页和网站

1.1.1 网页、网站

区别：一个网站会有多个网页，网页就是一个页面，网站包含了很多东西

常用术语：

URL：统一资源定位符，指定通信协议和通信地址

IP：网络协议。Internet种的每台电脑都有唯一的IP地址，表示该计算机在Internet种的位置。

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

FTP：文件传输协议

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

超链接：从一个网页指向一个目标的连接关系

1.1.2静态网页和动态网页

静态网页：通常由纯粹的HTML/CSS语言编写

动态网页：能够根据不同浏览者的请求来显示不同的内容，只要采用动态网页技术生成的网页都成为动态网页，其本质主要体现在交互性方面。JavaScript是常用的客户端动态网页技术

1.2网页的基本构成元素

1.2.1 文本

是网页中最基本的元素，也是页面中最主要的信息载体。用作主旨主题的表达

1.2.2 图片和动画

图片比文本更加生动和直观，具有强烈的视觉冲击力，其中最广泛的是GIF和GPEG两种格式

1.2.3 超链接

超链接技术是www流行起来的最主要的原因

1.2.4音频和视频

可以使网页效果多样化，网页种的视频文件一般为flv格式，它使一种基于Flash MX的视频流格式，具有文件小，加载速度快等特点，是网络视频格式的首选

1.2.5 交互表单

一般用来收集联系信息，接收用户要求，获得反馈意见

1.3 页面的布局结构

1.3.1 网页页面布局

“国”字型

“国”字型是最常见的一种布局方式，其上方为网站标题和广告条，中间为正文，左右分为两栏，用于放置导航和工具栏等，下方是站点信息

“厂”字型

上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下面为站点信息

海报型

Flash型

1.3.2 网页色彩搭配

RGB ：三原色

1.4 Web前端技术简介

1.4.1 初识Web前端

Web即指平常上网浏览的网页

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

1.HTML(控制页面结构）：是制作网页的标准语言

2.CSS（页面样式文件）：

3.JavaScript

1.4.3 Web前端开发工具

1.浏览器:谷歌浏览器 GoogleChrome

2.编辑器：HBuilderX

3.切图软件

1.5 HTML语法基础

1.5.1 HTML（Hyper Markup Language)概述

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

1.语言

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

2.超文本

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

3.标记

HTML实际上不算一种编程语言，而是一种标记语言

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素不区分大小写

1.6 创建HTML文档

1.使用HBuilder新建项目。首先点击“文件”再点击“新建”“Web项目”

2.创建项目名称，设置项目所在的位置确定即可

3.打开项目刚才新建的文件夹，会看到里面有首页index.html，里面有js文件夹和css文件夹还有图片文件夹

4.到了这一步后就可以直接在index.html种编写代码了

下面是一个示例代码，详细注释在代码后面，运行结果在详细注释后面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" /><!--设置字符集-->
		<meta name ="keywords" content="xxx"/><!--设置关键词，关键词是检索用的-->
		<mate name ="description" content="xxx"/><!--设置信息描述网页内容-->
		<title>第一个网页项目</title><!--标题标签作用：设置网页名-->
		<link rel="stylesheet"
		href="css/index.css"  
		type="text/css"/> 
		<script src="js/index.js"
		type="text/javascript"></script>
	</head>
	<body>
		</p>这是我的第一的网页项目</p>
		</p>2023级软件</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

在网页头部种，通常存放一些介绍页面内容的信息，下图中标注了一些标签的位置

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加HTML5文档的可读性，可为其添加注释部分。注释是说明文字，不被浏览器执行。HTML5使用(这个标签支持单行和多行注释）

1.8.2 特殊符号

由于">""<"等已作为HTML的语法符号，如果要在页面中显示这些特殊字符，就必须使用相应的HTML代码表示，如空格就要用 &nbsp 表示

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

以一首宋词为例，参照给定的HTML代码和图片资源，利用HBuilder设计Web网页。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords" content="宋词,苏轼" charset="utf-8" />
		<meta name="description"content="本网站收录经典宋词"/>
		<title>宋词精选</title>
		<style top: "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="img/1.1.jpg"/>
		<!--水平线-->
		<hr size="2"color="black"widch="100%"/>
		<p algn="center">网页制作教程 Copyright&copy;广东南方职业学院</p>	
	</body>
</html>

运行结果如下：