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

最新推荐文章于 2024-11-12 17:21:52 发布

Eternity-527

最新推荐文章于 2024-11-12 17:21:52 发布

阅读量689

点赞数 17

文章标签： php 开发语言

本文链接：https://blog.csdn.net/2401_84288452/article/details/142078531

版权

1.1认识网站和网页

1.1.1网页,网站

网页和网站区别:网页是网站的组成部分。网站是一个整体，包含多个网页及各种资源。网页通常展示特定内容，而网站是有统一主题、结构和功能的集合体。网站可通过导航链接不同网页，为用户提供更全面的服务和信息。

常用术语:

HTTPL:超文本传输协议

FTP:文件传输协议

超链接:在浏览网页时单击超链接就能跳转到与之相应的页面

1.1.2静态网页和动态网页

HTML CSS JavaScript

静态网页内容固定，不随用户操作和时间变化而改变，加载速度较快。动态网页可根据不同情况生成不同内容，交互性强，能与用户互动，但加载相对较慢。动态网页通常需要服务器端处理，而静态网页可直接由浏览器显示。

1.2 网页的基本构成元素

1.2.1.文本:文本具有体积小、网络传输速快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2.图片和动画:图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。

1.2.3.超链接:超链接技术是WWw流行起来的最主要的原因。

1.2.4.音频和视频:音频文件可使网页效果多样化，网页中常用的音频格式有mid 和 mp3。网页中的视频文件一般为flv格式，它是一种基于FlashMX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

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

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

1.3 页面布局结构

1.3.1 网页页面布局

常见的结构布局包括“国”字型、“厂”字型、海报型和Flash型等

1.3.2.网页色彩搭配

网页安全色

网页中色彩表达

常见色彩搭配

1.4Web前端技术简介

1.4.1初识WEB前端:早期的前端其实就是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript逐渐发
成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如SNS、博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。

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

HTML,CSS语言,JavaScript

用盖房子的例子来描述三者之间的关系。首先需要把房子的地基和结构搭建好，有一个良好的结构(HTML)。然后给房子刷上油漆和添加窗户，对房子样式进行美化(CSS)。最后给房子添加电梯和地暖，与住户进行一些行为上的交互(JavaScript)，这样房子才算搭建完毕。

1.4.3前端开发工具

浏览器,网页编辑器,切图软件

1.5 HTML语法基础

1.5.1 HTML概述:

1.5.1.1 语言

1.5.1.2 超文本

1.5.1.3 标记

1.5.2 HTML基本结构

1.5.2.1 HTML文档标签<html>...</html>:<html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>

1.5.2.2 HTML文档头标签<head>...</head>:文档头部内容在开始标签<html>和结束标签</html>之间的定义其内容可以是标题名或者文本文件地址,创作信息等网页信息说明.

1.5.2.3 文档编码:对于中文网页的设计者来说,用户一般使用G2313(简体中文).

1.5.2.4 HTML文档主体标签<body>...</body>主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 创建HTML文档

<head>
<meta charset=" utf-8" />
<title>我的第一个网页</title>
</head>
<body>
开始学习网页设计与制作!<hr size=" 3" color=" black" >百度<script type=" text/javascript" >
document. write("链接到百度");</script>
</body>
</html>

1.7 网页头部标签

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

1.7.2 <meta>标签:

1.7.2.1 keywords:用来告诉搜索引擎网页使用的关键字.

1.7.2.2 description:用来告诉搜索引擎网站主要的内容.

1.7.3 <link>标签:<link>标签用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表.

1.7.4 <script>标签:是脚本标签,用于为HTML文档定义客户端脚本信息.

1.8 HTML5文档注释和特殊符号

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

1.8.2 特殊符号:由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的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: 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/11.jpg"/></img>
<!--水平线-->