第1章网页基础知识

cfgomaks

于 2024-09-13 09:22:45 发布

阅读量586

点赞数 15

文章标签： html5

本文链接：https://blog.csdn.net/cfgomaks/article/details/142187814

版权

1.1 认识网页和网站
1.1.1 网页、网站及常用术语

网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称为Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。

Web 站点也称为网站，WWW信息是由无数的Web站点组成的，网页则是 Web 站点的基本信息单位，超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。

1.1.2 静态网页和动态网页

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

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

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，清晰地表达一系列项目。
1.2.2.图片和动画

图片比文本更加生动和直观，可以传避一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括GIF、JPEG 和PNG等，其中使用最广泛的是GIF和 JPEG 两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。
1.2.3.超链接

超链接技术是 WWW 流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和超链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。
1.2.4.音频视频

音额文件可使网页效果多样化、网页中常用的音频格式有mid 和mp3。其中mp3 为压缩
文件，其压缩率非常高，音质也不错，是背景音乐的首选。
1.2.5.交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
1.2.6.其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、 JavaScript 与 Activex等各种特效，它们不仅能升级网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3 页面布局结构
1.3.1 网页页面布局

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

（1）网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51， 102， 153， 204和 255时、构成的颜色组合一共有216种颜色。

（2）网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号"#”，如井 OE533D。还可通过RGB，HSB， Lab 和 CMYK 来进行表示；RGB 色彩模式是通过对红（R）、绿（G）、蓝（B）3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab颜色模型由亮度（L）和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。 CMYK 也称作印刷色彩模式，由青、洋红（品红）、黄和黑4种色彩组合成各种颜色。

（3）采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以更网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。采用近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。
1.4 Web前端技术简介
1.4.1 初识WEB前端

Web 前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是Tabel布局，后来发展到Div+CSS 网站重构，再到 JavaScript 逐渐成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如 SNS、博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。
1.4.2 WEB前端开发的三大核心技术

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

1.浏览器
浏览器是网页的运行平台，是可以把HTML 文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有IE浏览器、Chrome 浏览器、Firefox 浏览器、Safari 浏览器和 Opera 浏览器等。

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

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

1.5 HTML语法基础

1.5.1 HTML概述

1. 语言
HTML 作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了测览器在运行HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统 -的规则和标准。用HTML编写的超文本文档称为HTML 文档，它能独立于各种操作系统平台。自1990年以来HTML就一直被用作WWW的信息表示语言，使用 HTML 描迷的文件，需要通过Web浏览器HTTP显示出效果。

2.超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML 文档都一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程骄言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。

3.标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用"之”和">”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩综纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML 中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由"<”和">”符号以及一个学符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字图片、动画和播放声音。这些标签符号用<标签名字属性>来表示。

1.5.2 HTML 基本结构

HTML 文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML 用桥签来规定元素的属性和它在文件中的位置，HTML 文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。

1.6 创建HTML文档

使用Hbuilder新建项目。依次选择文件>新建>web项目。创建项目名称，设置项目所在位置即可，完成之后会在左边的项目管理出现。打开项目文件夹，会看见里面有首页 index.html等等。

到这一步后就可以进行代码的编辑了

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。它将 HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概
括。一个好的标题能使读者从中判断出该文件的大概内容。

1.7.2 <meta>标签

1.7.3 <link>标签

1.7.4 <script>标签

1.8 html5文档注释和特殊符号