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

标签：浏览器 JavaScript 第一章 HTML 网页 基础知识 CSS 页面

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站（Web站点）的区别：网页是一页两页，网站是可跳转，多网页，网页和网站不是总分关系，网页只是网站的基本信息单位，超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。eg.网站除了网页还有其他东西，如：服务器、域名...

常用术语：

1. Internet：由各种不同类型的计算机网络连接起来的全球性网络。
2. WWW：其功能是让Web客户端（常用浏览器）访问Web服务器的网页。
3. 浏览器：将Internet中国的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取Internet中的内容。常用的浏览器有Internet Explorer（IE）浏览器，Firefox浏览器和Chrome浏览器等。
4. URL：统一资源定位符，指定通信协议和地址，如：“http://www.baidu.com”是一个URL，“http://”表示通信协议为超文本传输协议，“www.baidu.com”表示网站名称。
5. IP：网际协议。Internet中的每台计算机都有唯一的IP地址，表示该计算机在Internet中的位置。IP通常分为A、B和C三类。
6. 域名：指网站名称，是全世界唯一性的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名.主机名.类别名.地区名。
7. HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的 WWW文件都必须遵守这个标准。
8. FTP：文件传输协议，通过该协议，可把文件从一个地方传到另一个地方，从而真正地实现资源共享。
9. 发布：指将制作好的网页传到网络上的过程，也称为上传网站。
10. 站点：一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。
11. 超链接：从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，可以是相同网页的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，甚至是一个程序。在浏览网页时单击超链接就能跳转到与之相应的页面。
12. 客户机和服务器：浏览网页是由个人计算机向Internet中的计算机发出请求，Internet中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发送请求的个人计算机称为客户机或客户端，而Internet中的计算机称为服务器或服务端。
     

1.1.2 静态网页和动态网页

三大核心技术（网页）：HTML/CSS/JavaScript（动态技术）

区别：通常由纯粹的HTML/CSS语言编写，叫做静态网页，引入了JavaScript（动态技术），变成动态网页。

静态网页：

     静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。

动态网页：

         动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。

        客户端动态网页不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入网页中，常见的客户端动态网页技术包括JavaScript，ActiveX和Flash等。

        服务端动态网页则需要与客户端共同参与，客户端通过浏览器发出页面请求后，服务端根据URL携带的参数运行服务端程序，产生的结果页面再返回客户端。动态网页比较注重安 交互性，即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页
(如注册、登录和查询等)都需要服务端动态网页程序。
        

注：网页有动画、视频不能叫做静态网页。

1.2 网页的基本构成元素

基本构成元素：文本、图片和动画、超链接、音频视频、交互表单（收集信息）

1. 文本：网站里的主旨信息通过文字表达。
2. 图片和动画：图片比文本更加生动和直观，都可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。
3. 超链接：超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本跳转、图像链接和锚链接等。超链接可以在当前页面中金星跳转，也可以在页面外进行跳转。
4. 音频视频：使网站更加直观、生动有意思。
5. 交互表单：收集个人信息。

1.3 页面布局结构

1.3.1 网页页面布局

         对一个网站来说，除了内容之外，还要对网站进行整体规划设计。格局凌乱的网站内容再精彩，也不是一个好网站。在网页插入各种对象和装饰效果前，要先确定网页的总体风格和布局。

        根据不同的网页制作风格，可以将页面为个人网页和商业网页。商业网页内容丰富、信息量大，一般都有统一的布局；个人网页风格比较多样、内容比较专一、形势比较灵活，更容易创造美感。

 1.3.2 网页色彩搭配

        网页安全色：网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
        网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51，102，153，204和 255时，构成的颜色组合一共有216种颜色。
        网页中色彩的表达：在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB,Lab和 CMYK来进行表示;RGB色彩模式是通过对红(R)、绿(G)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。 CMYK也称作印刷色彩模式，由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。
        常见的色彩搭配：采用相近色配色:相近色是指相同系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色:在相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、和度对比、冷暖对比等,如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色,冷色和暖色，亮色和暗色都是对比色关系。

R、G、B

十六进制

常见主色调：红、绿、蓝

1.4 Web前端技术简介

HTML：页面结构文件来控制页面结构都由HTML决定

CSS：页面样式文件来决定文字、文字大小、颜色

JavaScript：动态技术 

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

        W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际 浏览器中立性技术标准机构。W3C 专门负责制定网页相关的标准，Web前端的相关技术都是基于W3C标准实现的。 

        下面来介绍Web前端开发所包括的三大核心技术：HTML、CSS语言和JavaScript语言。 

1. HTML：HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。
2. CSS 语言 ：CSS 是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
3. JavaScript 语言：JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript 引擎，属于浏览器的一部分，因此 JavaScript 代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌入在HTML中的方式来实现自身的功能。万维网联盟(W3C)规定，Web标准需要将网页的结构、样式和行为三者进行分离。HTML+CSS+ JavaScript 本质上构成一个MVC 框架，即 HTML 用于描述网页的结构(Model)，知 CSS 用于描述网页的样式(View)。JavaScript 用于描述网页的行为即调度数据和实现某种展现逻辑(Controller)。
   用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个上 良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)。最后给房子添加电梯和地暖，与住户进行一些行为上的交互(JavaScript)，这样房子才算搭建完毕。

1.4.2 前端开发工具

        “工欲善其事，必先利其器。”在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具：浏览器、网页编辑器和切图软件。

         1.浏览器

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

下面介绍几种主流浏览器。

        (1)IE浏览器。IE是 Internet Explorer的简称，是由微软公司推出的一款网页浏览器采用Trident内核实现，有6.0、7.0.8.0.9.0.10.0和11.0等版本。在IE7.0以前，中文直译为“网络探路者” ，但在IE7.0以后官方便直接成为“IE浏览器”。一些用户仍然在使用低版本的浏览器，因此在制作网页时，一般也需要兼容低版本的浏览器。一些其他的浏览器也是基于IE内核的，如360安全浏览器和搜狗浏览器等，只要兼容IE浏览器，这些基于IE内核的浏览器也都兼容。

        (2)Chrome浏览器。Chrome浏览器一般指Google Chrome。Google Chrome是由Google 字桂公司开发的一款设计简单、高效的Web浏览器，采用JavaScript引擎，可快速运行复杂的大 年型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用 Webkit 件和 Blink 内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

         (3)Firefox浏览器。Firefox浏览器一般指 Mozilla firefox，中文俗称“火狐”，是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器，采用Gecko内核实现，支持多种操作系统，如Windows和 Mac OSX及GNU/Linux等。

        (4)Safari 浏览器。Safari 浏览器是由苹果公司出品的用于苹果计算机操作系统 Mac OSX中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论是在Mac还是在PC上运行时，Safari都可提供极致愉悦的网络体验方式。

        (5)Opera浏览器。Opera浏览器是由挪威Opera Software ASA公司制作的一款支持多页面标签式浏览的浏览器，采用Presto内核实现。它是跨平台浏览器，可以在 Windows，Mac和Linux 3个操作系统平台上运行。

注：浏览器内核负责对网页语法进行解释并渲染(显示)网页。通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

        2.网页编辑器：这里介绍几款常用的网页开发工具软件：Adobe Dreamweaver，Sublime Text，NotePad++，EditPlus和HBuilder。

        (1) Adobe Dreamweaver。Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。该软件最初的 1.0 版是 1997 年由美国 Macromedia 公司发布的，该公司于 2005 年被 Adobe 公司收购。Dreamweaver 也是当时第一套针对专业 Web 前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。

Dreamweaver 支持 HTML5/CSS3 源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化，如图：

Dreamweaver 也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver 的预览视图难以达到与所有浏览器完全一致的效果。如需考虑跨浏览器兼容问题，预览画面仅能作为辅助参考。

        (2)Sublime Text。Sublime Text的界面布局非常有特色，它支持文件夹导航图和代码缩Mac 略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。

        (3) NotePad++。NotePad++的名称来源于 Windows 系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术，如图所示。它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

        (4) EditPlus。EditPlus是由韩国Sangil Kim(ES-Computing)公司发布的一款文字编辑 3.标器，支持HTML， CSS, JavaScript， PHP和Java等多种计算机程序的语法高亮显示与代码折 HTM叠功能。其中最具特色的是EditPlus具有自动完成功能。例如，在CSS源文件中输入字母 出现的元b，加上空格，就会自动生成“border:1px solid red”语句，开发者可以自行编辑快捷键所 称标签，代表的代码块，然后在开发过程中使用快捷方式让EditPlus自动完成指定的代码内容。 

          (5)HBuilder。HBuilder是由DCloud (数字天堂)推出的一款支持HTML5的Web开发 都是一IDE。HBuilder 主要用于开发HTML，JS(JavaScript)和CSS，同时配合 HTML 的后端脚本 字符串语言如PHP和JSP也可以适用，还有前端的预编译语言如 less 以及人们钟爱的 markdown都 图片、可以良好地进行编辑。从2013年夏天发布至今，HBuilder已经成为业内主流的开发工具。 双标多目前，HBuilderX发布了1.0正式版。

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

1.5 HTML语法基础

1.5.1 HTML概述

超文本的标记语言

标记：通过标签的方式去标记  标签格式：<xxx>内容</xxx>;

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

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

1.5.2 HTML基本结构

HTML文档的基本结构。

<! DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML 文档结构</title>
</head>
<body>
    <p>HTML 文档结构由head,body 标记组成</p >
    <h3>标题3</h3>
</body>
</html>

 浏览效果：

 1.6 网页头部标签

img：存储图片、视频、资源。

CSS：控制页面的样式。

js：让页面动起来。

index.html；控制页面的结构。

以<p>开头以</p>结束，形成每行的换行形成段落。

可以形成超链接。

<a href="https://www.baidu.com">百度一下</a>。

运行代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>这是我的第一个网页项目</p>
		<p>软件四班</p>
		<a href="https://www.baidu.com">百度一下</a>
	</body>
</html>

1.6.1 <meta>标签 

 meta的三个作用：设置字符集、keywords：关键词、description：描述网页内容

1.6.2 <title>标签

title（标题）

<title>第一个网页项目</title>

1.6.3 <link>标签 

link：有三个参数

rel="stylesheet"

rel：引入css文件，指定文件的作用：样式的脚本控制文件的样式

href="css/index.css"

href：指定文件的路径

type="text/css"

tpye：指定文件的类型：css类型

1.6.4 <script>标签

<script> src="js.index.js tpye="text/JavaScript"</script>，引入javascrip

两个参数

src：指定文件的路径

type：指定文件的类型：JavaScript

1.7 HTML5文档注释和特殊符号

1.7.1 注释

单行注释：<!-- 注释内容-->

多行注释：<!--第一行注释  第二行注释-->

1.7.2 特殊符号

 1.8 综合案例——临江仙 · 送钱穆父

 浏览效果：

 运行代码：

<!--综合案例-->
<!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="1.1.jpg">
			<!--水平线-->
			<hr size="2" color="black" width="100%"/>
			<p align="center">网页制作教程 Copyright&copy；广东南方职业学院</p>
	</body>
</html>

标签：浏览器,JavaScript,第一章,HTML,网页,基础知识,CSS,页面
From： https://blog.csdn.net/2302_80572539/article/details/142091986