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

听Jay入眠

于 2024-09-12 19:55:27 发布

阅读量620

点赞数 16

文章标签： php 开发语言 html5

本文链接：https://blog.csdn.net/2301_80756005/article/details/142092421

版权

1.1认识网页和网站

1.1.1 网页、网站

网页和网站的区别

1.性质不同：网址是指因特网上网页的地址，网站是根据一定规则构成的，而网页是网站的基本元素。

2.作用不同：网址用于了解网络用户上网的基础，网站用于展示特定内容相关网页的集合，而网页是承载各种网站应用的集合。

常用术语

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

IP：网际协议。

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

FIP：文件传输协议，真正实现资源共享。

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

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

1.1.2 静态网页和动态网页

1.静态网页

静态网页是指客户端的浏览器发送URL请求WWW服务器，服务器查找需要的超文本文件并不加处理的直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。

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

2.动态网页

无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。

根据程序运行区域的不同，动态网页可分为客户端动态网页和服务端动态网页。

1.2 网页的基本构成元素

1.2.1 文本

体积小，网络传输速度快，网页中最主要的基本元素，也是页面中最主要的信息载体。

1.2.2 图片和动画

比文本更加直观，页面中使用的图片格式主要包括GIF、JPEG、PNG等。

1.2.3 超链接

超链接技术是WWW流行起来的最主要的原因。超链接可以随意跳转。

1.2.4 音频和视频

音频文件可使网页效果多样化，网页中常用的音频格式由mid和mp3。

1.2.5 交互表单

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

这个目标可以是文本文件、网页和电子邮件，也可以是服务端的应用程序。

1.3 页面布局结构

1.3.1 网页页面布局

网页可分为个人网页和商业网页。

1.3.2 网页色彩搭配

1.3.2.1.网页安全色

是指在不同硬件环境、不通操作系统、不同浏览器中都能够正常显示的颜色集合。

网页安全色是红色、绿色和蓝色。

1.3.2.2.网页中色彩的表达

在网页设计中，颜色值最常见的表达方式是十六进制。

RGB模式是目前运用最广的颜色系统之一

HSB色彩模式是普及型设计软件中常见的色彩模式

CMYK也称作印刷色彩模式（青、洋红、黄和黑）

1.4 Web前端技术简介

1.4.1 初识Web前端

Web前端指的是平常上网浏览的网页

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

1.4.2.1.HTML

HTML是制作网页的标准语言。超文本标记语言的结构包括“头部”和“主体”两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。

1.4.2.2.CSS语言

CSS是一种用来表现HTML或XML等文件样式的计算机语言。

1.4.2.3.JavaScript语言

JavaScript是一种属于网络的脚本语言，通常JavaScript脚本通过嵌入在HTML中的方式来实现自身的功能。

1.4.3 Web前端开发工具

1.4.3.1.浏览器

浏览器是网页的运行平台（IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器、Opera浏览器）

1.4.3.2.网页编辑器

HTML,CSS和JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或者记事本工具就可以打开和编辑源代码内容。

常用网页开发工具软件：Adobe Dreamweaver,Sublime Text,NotePad++,EditPlus和HBuilder。

（1）Adobe Dreamweaver是一款所见即所得的网页编辑器，中文名称为“梦想编制者”

或“织梦”。Dreamweaver是第一套专业Web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。

Dreamweaver 支持HTML5/CSS源代码的编辑和预览功能。

优点：是可视化性能带来的直观效果。

弱点：由于不同浏览器存在兼容性问题，Dreamweaver的预览效果图难以达到与所有的浏览器完全一致的效果。

（2）Sublime Text的界面布局非常有特色，支持文件夹导航图和代码缩略图效果。（支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能，还具有自动回复功能）

（3）NotePad++ 名称的来源是Windows系列操作系统自带的记事本NotePad，在此基础上多了两个加号，带来了质的飞跃。（具有语法高亮显示，代码折叠等功能，非常适合作为计算机程序的编辑器）

（4）EditPlus 支持多种计算机程序的语法高亮显示与代码折叠功能。其中最具有特色的就是它具有自动完成功能，在使用过程中使用快捷方式可以自动完成指定代码。

（5）HBuilder 是业内主流的开发工具。HBuilderX发布了1.0正式版。

1.4.3.3.切图软件

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

1.5 HTML语法基础

HTML是制作网页的基础语言，是必学内容。

1.5.1 HTML概述

HTML是Hyper Text Markup Language的缩写（超文本标记语言），是一种用来制作超文本文档的简单标记语言。

1.5.1.1 语言

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

1.5.1.2 超文本

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

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如JavasScript ）。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

1.5.1.3 标记

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的，标签用“<”和“>”括起来，称为标记已称为标签，用来划分网页的元素。标签通过指定某块信息为段落或标题等来标识文档的某个部分。

标签分为单标签和双标签

单标签指的是只存在一个标签的写法（<meta><input>)

双标签指的是存在一对标签的写法（<head></head>,<body></body>)

注意：在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。

1.5.2 HTML 基本结构

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文档头标签的格式为

1.5.2.3 文档编码

HTML文档编码格式为

所有的HTML文档都必须声明它们所使用的编码语言，文档声明的编码应该与实际编码一致，否则会出现乱码。

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

HTML文档主体编码格式为

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

主体位于头部以后，它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 创建 HTML 文档

1.使用HBuilder新建项目→2.创建项目名称→3.打开项目→4.编写网页代码→5.为文件命名→6.预览内容

<!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.7 网页头部标签

头部通常存放一些介绍内容的信息（页面标题、描述、关键词链接的CSS样式文件和客户端的JavaScript脚本文件）

1.7.1 <title>标签

<title>标签是页面标题标签。只用于<head>和</head>之间，每个文档只允许有一个标题。

1.7.2 <meta>标签

可重复出现

1.7.2.1 keywords

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

1.7.2.2 description

告诉搜索引擎网站主要内容

1.7.3 <link>标签

link引入CSS文件，rel 引入文件作用， href 引入文件路径，Type 指定文件类型

link只在首部标签中，通常用于连接外部样式标签

1.7.4 <script>标签

引入JavaScript文件，有两个参数， src 指定JavaScript路径，type 指定文件类型。

script用于客户端脚本信息

1.8 HTML5 文档注释和特殊符号

1.8.1 注释

ctrl+/ 可以自动出现

增加文档的可读性，不会被浏览器执行

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: large;
			}
		</style>
	</head>
	<body bgcolor="antiquewhite" text="#333333">
		<h2 align="center">临江仙·送钱穆父</h2>
		<p >宋 苏轼</p>
		<!-- 使用<br/>的效果 -->
		<p >一别都门三改火，天涯踏尽红尘。<br/>
		        依然一笑做春温。<br />
		    无波真古井，有节是秋筠。<br />
		    惆怅孤帆连夜发，送行淡月微云。<br />
			尊前不用翠眉颦。<br />
			<font coler="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>

运行结果