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

最新推荐文章于 2024-09-13 19:01:08 发布

2402_83227057

最新推荐文章于 2024-09-13 19:01:08 发布

阅读量513

点赞数 16

文章标签：服务器运维

本文链接：https://blog.csdn.net/2402_83227057/article/details/142057987

版权

1.1. 认识网页和网站

1.1.1 网页，网站

网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称为Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。如果说WWW是Internet（因特网）上的一个大型图书馆，那么图书馆的每一本书就是一个Web站点，而网页就是书中的某一页，页码就是网址，网址与页面一一对应，多个网页关联组合在一起就成为一个Web站点。Web站点中有一个特殊的网页叫作主页（Ｈoｍeｐａge，也叫首页），相当于书的封面。

常用术语：Internet,www,浏览器,url,ip,域名，超链接，站点，导航条

1.1.2 静态网页和动态网页

1.静态网页器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。

2.动态网页动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。客户端动态网页不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入网页中，常见的客户端动态网页技术包括JavaScript，ActiveX和Flash等。服务端动态网页则需要与客户端共同参与，客户端通过浏览器发出页面请求后，服务端根据URL携带的参数运行服务端程序，产生的结果页面再返回客户端。动态网页比较注重交互性，即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页（如注册、登录和查询等）都需要服务端动态网页程序。

1.2 网页的基本构成元素

文本，图片，动画，超链接,视频等......

1.2.1.文本

体积小，网络传输速度快，方便客户浏览和下载，是网页最主要的基本元素

1.2.2.图片和动画

比文本更生动形象，可传递一些文本不好传递的信息，可以更好的习性读者兴趣

1.2.3.超链接

可以在不同的网页面前跳转，方便读者获取信息，提高效率

1.2.4.音频视频

可以压缩体积，提高效率

1.2.5.交互表单

收集联系信息，接受客户要求，获得反馈意见

1.2.6.其他常见元素

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

1.3 页面布局结构

1.3.1 网页页面布局

根据风格可分为个人网页和商业网页两种。个人网页风格多样，内容专一，商业网页内容丰富，有统一布局

1.3.2 网页色彩搭配

（1）网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51102，153，204和255 时，构成的颜色组合一共有216种颜色

1.4 Web前端技术简介
1.4.1 初识WEB前端

前端指平时浏览的网页。Web前端开发是从网页演变而来的，早期的前端就是Tabel布局后来发展到Div+CSS网站重构

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

HTML CSS JavaScript

HTML 是制作网页的标准语言

CSS 是一种表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力

JavaScript 是一种网络脚本语言，应用于Web应用开发，

1.4.3 前端开发工具

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

1.5.1 HTML语法基础

1.5.1.1 语言

HTML一种超文本标记语言，有一定的语法规则，

1.5.1.2 超文本

超文本可以加入图片，声音，动画，影视内容的文本，每个HTML文档都是一种静态的网页文件，这个文件里包含HTML指令代码

1.5.1.3 标记

HTML5其实算不上一种语言，只是一种标记语言。这些标签是由“<”和“>“括起来。他们称为标记。

<title>设置网页名

href 指定文件路径

type 指定文件类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords"content="xxx"/>关键词
		<meta name="description"content="xxx"/>网页内容
		<title>第一个网页项目</title>
		<link rel="stylesheet"
		      href="css/index.css"
		      type="text/css"/>
			  <script></script>
	</head>
	<body>
		<!--单行注释内容-->
		<P>第一个网页项目</P>
		<!--
		多行注释
		多行注释
		多行注释
		-->
		<p>级软件2班</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.5.2 HTML基本机构

1.5.2.1HTML 文档标签<html>…</html>

HTML 文档标签的格式为

<html>HTML 文档的内容</html>

<html>处于文档的最前面，表示 HTML,文档的开始，即浏览器从<huml>开始解释,直到

遇到</html>

1.5.2.2.HTML 文档头标签<head>…</head>

HTML 文档包括头部(head)和主体(body)。HTML 文档头标签的格式为<head>头部的内容</head>

1.5.2.3.文档编码

格式：<meta charset= " utf-8" />

1.5.2.4.HTML 文档主体标签<body>……</body>

格式：<body>网页的内容</body>

主体位于头部以后，以<body>为开始标签，</body>为结束标签。

1.6 创建HTML文档

一个网页可以简单的只有文字，也可以有图，文字，和超链接和视频等。

1.7 网页头部标签

在网页头部中，通常存放一些介绍界面内容的信息，列入标题和关键词

1.7.1 <title>标签

<title>标签是页面标题标签，设置网页名。只能用于<head>和<head>之间

1.7.2 <meta>标签

1.7.2.1 keywords

用来告诉搜索引擎网页使用关键词

1.7.2.2 description

用来告诉搜素引擎网站主要内容

1.7.3 <link>标签

用于链接外部资源和当前HTML文档，在<head><head>之中

1.7.4 <script>标签

是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便于维护。

1.8 HTML5文档注释和特殊符号

1.8.1 注释

增加HTML可读性

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>
   
   <p>一别都门三改火，天涯踏尽红尘。</br>
   依然一笑作春温<br/>
   无情真古井，有节是秋筠。<br/>
   惆怅孤帆连夜发，送行月淡微云。<br/>
   尊前不用翠眉颦。<br/>
   <font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
   <img src="img/1.1.jpg"/>
   
   <hr size="2" color="black" width="100%"/>
   <p align="center">网页制作教程Coppyright©广东南方职业学院</p>
   </body>
</html>