第1章网页基础知识

最新推荐文章于 2024-09-13 23:28:46 发布

id2197

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量771

点赞数 17

文章标签： css

本文链接：https://blog.csdn.net/id2197/article/details/142093164

版权

1.1.1 网页、网站及常用术语

1.网页网页

是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称为Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。如果说WWW是Intermet(因特网)上的一个大型图书馆，那么图书馆的每一本书就是一个Web站点，而网页就是书中的某一页，页码就是网址，网址与页面一一对应，多个网页关联组合在一起就成为一个Web站点。Web站点中有一个特殊的网页叫作主页(Homepage，也叫首页)，相当于书的封面。
HTML,不是一种程序语言，而是一种描述文档结构的标记语言，是用户与电子计算机(俗称“电脑”)之间进行交流的一种文本技术。各种网页均是用HTML来描述的，用HTML编写的网页文件的扩展名一般为“*,htm”或“*.him!”。
由于网页中包含超级链接，网页也被称为超文本(Hypertext)，传输超文本的协议被称为超文本传输协议(Hyper Text Transfer Protocol，HTTP)。
2.网站Web站点也称为网站，

WWW信息是由无数的Web站点组成的，网页则是Web站点的基本信息单位，超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。Web站点其实是Internet 上能够提供 Intermet 服务的一个位置，这个位置由独一无二的IP地址或者域名来描述，一个网站需要有一台或者是多台服务器来实现其WWW服务。不同网站的规模与大小各不相同:大的网站如新浪、搜狐等，需要多台服务器;小的网站如个人主页等，仅占据某台服务器上一个很小的空间
网站是多个网页的集合，按网站内容可将网站分为5种类型:门户网站、企业网站、个人网站、专业网站和职能网站。按网站的设计技术可将网站分为静态网站和动态网站(ASP，JSP，PHP和Web后台服务器软件)。
网站是有独立域名、独立存放空间的内容的集合，这些内容可能是网页，也可能是程序或者其他文件。不一定需要很多的网页，只要有独立域名和空间，哪怕只有一个页面也可以称为网站。
3、常用术语
网更设计有其专业的常用术语，如mtemmet、www、浏览器、URL、P、城名、HTTPFTP、靖点、发布、超链接、导航条、客户机和服务器等，作为一名网页设计师，必须熟练掌握这些常用术语。
hternet:由各种不同类型的计算机网络连接起来的全球性网络。D义上的互性方直接韵
WWW:其功能是让Web客户端(常用浏览器)访问Web服务器中的网页。
浏览器:将 Intermet 中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取 lniemet 中的内容。常用的浏览器有 Inernet Explorer(E)浏览器，Firefox 浏览器和Chmome 浏览器等。
URL:统一资源定位符，指定通信协议和地址，如“http://www.baidu.com”是一个URL,“htp://”表示通信协议为超文本传输协议，“www.baidu.com”表示网站名称。
IP:网际协议。Intermet中的每台计算机都有唯一的IP地址，表示该计算机在Intemet
中的位置。IP通常分为A、B和C三类。域名:指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。城名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名，主机名、类别名、地区名。根据交互(如应
HTTP:超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。

FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方、从面真正地实观资源共享
发布:指将制作好的网页传到网络上的过程，也称为上传网站。
监盘:一个站点就是一个网站所有内容所存放的文件。Dreamweaver的使用是以站为委理的，必强为每一个要处理的网站建立一个本地站点。站点可分父子站点。结点管对一个加mmd的站点进行组织、维护阳管理的功能集合

超链接:从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，可以是相同网页的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，甚至是一个程序。在浏览网页时单击超链接就能跳转到与之相应的页面。
客户机和服务器:浏览网页是由个人计算机向Internet中的计算机发出请求，Imemet中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发送请求的个人计算机称为客户机或客户端，而Intermet中的计算机称为服务器或服务端。

1.1.2 静态网页和动态网页

静态网页：

（1）静态网页不能简单地理解成静止不动的网页，他主要指的是网页中没有程序代码，只有HTML（即：超文本标记语言），一般后缀为.html,.htm,或者.xml等。虽然静态网页的页面一旦做成，内容就不会再改变了。但是，静态网页也包括一些能动的部分，这些主要是一些GIF动画等

动态网页：

（1）动态网页是指跟静态网页相对的一种网页编程技术。动态网页的网页文件中除了HTML标记以外，还包括一些特定功能的程序代码，这些代码可以使得浏览器和服务器可以交互，所以服务器端根据客户的不同请求动态的生成网页内容。

1.2 网页的基本构成元素

1.2.1.文本

一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小一般使用9磅或12像素左右即可

1.2.2.图片和动画

丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式

1.2.3.超链接

超链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状

1.2.4.音频视频

音频可以使网页多样化

1.2.5.交互表单

表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等

1.2.6.其他常见元素

网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、Java Applet 等元素

1.3 页面布局结构

1.3.1 网页页面布局

国子型（大型网站常用类型）
头部: 该部分包括网站的标题以及横幅广告条；
左侧: 该部分包括一些导航等信息；
右侧: 该部分包括菜单或者导航的组件；
中部: 该部分为页面的主要内容；
底部: 该部分包括一些基本信息、联系方式、版权声明等

拐角型（CSDN主页就是这样的布局）
左侧或右侧: 该部分包括一些导航菜单等信息；
中部: 该部分为页面的主要内容；
底部: 该部分包括一些基本信息、联系方式、版权声明等内容。

1.3.2 网页色彩搭配

,而是网页中各种可供使用的元素和技术的整体规划,通过布局,使网页本身具备良好的视听效果,方便的操作,生动的互动效果. 色相,明度,纯度,色调及色性等就构成了色彩的要素.网页设计要求通过色彩对比调节,使各种色彩在网页构成中的面积,形状,位置以及色相,明度,纯度之间形成差别,使网页配色增添变化,页面显得更加丰富多彩,在此之中求得视觉统一,达到心理平衡

1.4 Web前端技术简介

1.4.1 初识WEB前端

Web 前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，

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

HTML
HML,是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐释序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。
2. CSS 语言
CSS是一种用来表现HTML或XML,等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式、并拥有对网页对象和模型样式进行编辑的能力。
3.JavaScript 语言
javaseipt 是一种属于网络的脚本语言，已经被广泛地用于 Web应用开发，常用来为网网页制作的
页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScnpt 引擎,属于浏览器的一部分，因此 JavaScript 代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌人在HTML中的方式来实现自身的功能。

1.4.3 前端开发工具
1.4.3.1 浏览器

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

1.4.3.2 网页编辑器

2.网页编辑器
HTML，CSS和JavaScript 源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。因此本书不对开发工具作特定要求，使用任意一款纯文本编辑器均可以进行网页内容的编写。这里介绍几款常用的网页开发工具软件:Adobe Dreamweaver, Sublime Text, NotePad++, EditPlus 和 HBuilder。

1.5 HTML语法基础
1.5.1 HTML概述

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便

1.5.2 HTML基本结构

<html>//用来标记HTML文档的开始
<head> //用来标记HTML文档头部的开始

</head> //用来标记HTML文档头部的结束
<body> //用来标记HTML文档主体的开始

</body> //用来标记HTML文档主体的结束
</html>

HTML文档标签的格式为
<htmI>HTML文档的内容</huml>
<huml>处于文档的最前面，表示 HTML,文档的开始，即浏览器从<html>开始解释，直到遇到</himl>为止。每个 HTML 文档均以<himl>开始，以</himl>结束。

文档编码格式如下:
<meta charsel= "ut{-8" />
为了被测览器正确解释和通过W3C代码标准,所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计网页制信者来说，用户一般使用GB2313(简体中文)。

1.6 创建HTML文档

使用HBuilder新建项目。依次点击选择“文件”→“新建”→“Web项目” 。
创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现，如图1-8所示。在本示例中，项目名称为“课堂练习”。
打开项目“课堂练习”的文件夹，会看到里面有首页index.html，有js文件夹，有css文件夹，还有图片的文件夹，基本齐全。
到了这一步之后，便可以编写网页代码了，可以直接在index.html 中编写代码。也可以单击鼠标右键，新建一个HTML文件。
在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名，模板为 html5 。
本实例将文件命名为“示例程序1.2.html”，开始编写网页代码
网页完成后，可以执行菜单“运行”→“浏览器运行”，选择电脑中已有的浏览器进行预览，本书使用Chrome浏览器。

1.7 网页头部标签

在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词链接的 CSS 样式文件和客户端的JavaScript脚本文件等。其中，页面标题及页面描述称为页面的摘要信息，摘要信息的生成在不同的搜索引擎中会存在比较大的差别，即使是同一个搜键
索引擎也会由于页面的实际情况而有所不同。一般情况下，搜索引擎会提取页面标题标签中
的内容作为摘要信息的标题，而描述则常来自页面描述标签的内容或直接从页面正文中截食
取。如果希望自己发布的网页能被百度等搜索引擎搜索，那么在制作网页时就需要注意编写网页的摘要信息。

1.7.1 <title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。
<title>标签位于<bead>与</head>中，用于标示文档标题，格式如下:<title>标题</title>
例如，京东商城的文档标题:
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题
内容。

1.7.3 <link>标签

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字,不被浏览器执行。HTML5使用标签为文档进行注释，注释标签以“”结束，中间的“…”替换为注释文字内容即可。标签支持和多行注释。

1.8.1 注释

由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML 代码被称为字符实体。
常用的特殊符号及对应的字符实体见表1-1。这些字符实体都以“&”开头，以“;”结束。

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