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

最新推荐文章于 2024-09-13 16:26:56 发布

闲逸#321

最新推荐文章于 2024-09-13 16:26:56 发布

阅读量965

点赞数 8

文章标签： javascript css

本文链接：https://blog.csdn.net/2401_87161606/article/details/142077543

版权

1.1 认识网站和网站

1.1.1网页网站

网页和网站的区别：

网页：

网页被定义为任何网站的单个文档或单独页面。每个网页都附加到一个唯一的 URL 地址，用于呈现或访问该特定页面。这些 URL 和网页可以是私有的或公开的，具体取决于开发人员如何配置它们。任何 Web 浏览器都可用于浏览 URL，用户也可以复制和共享这些 URL。

网站：

网站是使用超链接链接在一起的几个网页的集合。所有网页都链接在一个域下，以唯一标识网站。网站是连接不同版块的超链接的主要来源，这些版块可能还包括其他相关网页。就像网页一样，人们可以使用网络浏览器轻松浏览任何网站并输入域地址。网站也遵循网页开发所需的相同编程语言。但是，网站开发很复杂，需要更多时间。

常用术语：internet；www；浏览器；URL；IP；域名；HTTP；FTP；超链接；客户机与服务器

1.1.2静态网页和动态网页

分类主要区别：HTML CSS （静态网页）；JavaScript（动态网页）

1.2 网页的基本构成元素

1.2.1 文本

网页最主要的基本元素，能准确的表达信息的内容和含义。且文字具有体积小，网络传输快的特点。

1.2.2 图片和动画

图片相较于文字来说更为直观与生动，具有强烈的视觉冲击，使读者更易于理解。

用户在网页中最常用的图片形式包括GIF，JPEG，PNG等，其中最为广泛的是前二者。

1.2.3 超链接

超链接技术是WWW流行起来的主要原因，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。

1.2.4 音频视频

常用的音频格式有mid和mp3。其中mp3为压缩文件，压缩率高，音质好，是背景音乐的首选。

网页的视频格式一般为flv格式，是一种基于Flash MX的视频流格式且文件小，加载速度快。被视为网络视频格式的首选

1.2.5 交互表单

通俗来讲就是用户对浏览器的输入并将信息发送到用户设置的目标端的网页表单。

1.3 页面布局结构

1.3.1 网页页面布局

国字型；厂字型；海报型；Flash型

1.3.2 网页色彩搭配

网页安全色：在不同硬件环境下，不同系统，不同浏览器中都能正常显示的颜色集合。安全色有红，绿，蓝

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

1.4 Web前端技术简介

1.4.1 初识Web前端

Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都
是在浏览网页。

1991年8月6日，来自欧洲核子研究中心的科学家 Tim Beners-Lee，启动了世界上第一个可以正式访问的网站(http://ino.cerm.ch)，标志着万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炙手可热。

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

HTML；CSS；JavaScript

1.4.3 Web 前端开发工具

浏览器：IE浏览器；Chrome浏览器；Firefox浏览器

网页编辑器：HTML，CSS，JavaScript 源代码文件均为纯文本内容，用计算机操作系统自带的

写字板或记事本工具就可以打开和编辑源代码内容。例如Adobe Dreamweaver；Sublime Text

HBuilder

切图软件

切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改处理。

常用的软件有Photoshop和Fireworks

1.5 HTML 语法基础

1.5.1 HTML 概述

1.5.1.1 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML

文档时所遵循的规则和进行的操作。

1.5.1.2 超文本

超文本是可以加入图片，声音，动画，影视等内容的文本。事实上每个HTML文档都是一个静态的网页文件，其中包含了一些HTML代码，但这些代码只是一种标记结构语言。

1.5.1.3 标记

1.5.2 HTML 基本结构

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       我的第一个网页
       23软件技术1班
   </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		我的第一个网页
		23软件技术1班
	</body>
</html>

1.6 创建 HTML 文档

1.7 网页头部标签

1.7.1 <title>标签

标题栏，为创建的网页编辑标题。

1.7.2<meta>标签

1.7.3<link>标签

此标签用于连接外部资源和当前的HTML文档，它只存在于首部标签<head></head>中，通常用于连接外部样式表。<link>标签只是提供一个链接外部文档的路径，最常用来链接css文件。

1.7.4<script>标签

此标签是脚本标签，用于HTML文档定义客户端脚本信息。通常位于<head>标签内，以便维护。

<a>标签

超链接标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

增添HTML文档的可读性，易于理解

1.8.2 特殊符号

由于大于号 > 和小于号 < 等作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示

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