第一章网页制作基础知识

最新推荐文章于 2024-09-17 10:09:23 发布

白云云哟

最新推荐文章于 2024-09-17 10:09:23 发布

阅读量794

点赞数 24

文章标签： html

本文链接：https://blog.csdn.net/2301_80403042/article/details/142077707

版权

1.1认识网页和网站

1.1.1网页、网站

网页和网站的区别：

1.网页只有一页，网站可以有多页。

2.网站有数据库、输入器、域名等很多网页没有的东西。

3.网页是构成网站的基本元素。

4.构成网页的元素比较少，而构成网站的元素却多得多。所以网站更加的复杂，而网页相比于网站更加易于后期的维护。也导致了网站开发时间较长成本高。

1.1.1.3常用术语：

1.Internet：由各种不同类型的计算机网络连接起来的全球性网络。

2.WWW：其功能是让web客户端访问web服务器钟的网页。

3.U：RL：统一资源定位符，指定通信协议和地址。

4.IP：网际协议。

5.HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议。

6.域名：指网站名称。

7.FTP：文件传输协议。

8.浏览器：将Internet中的文本文档和其他文件翻译成网页的软件。

9.发布：指将制作好的网页传到网络上的过程

10.站点：一个站点就是一个网页所有内容所存放的文件夹。

11.超链接：从一个网页指向一个目标的链接关系。

12.客户机和服务器：由个人计算机向Internet中的计算机发出请求，然后Internet中的计算机响应其请求，并将其需要的内容发到其计算机上，这种发送请求的计算机就是客户机或称为客户端，而Internet中的计算机称为服务器或者服务端。

1.1.2静态网页和动态网页

HTML：超文本标记语言。

CSS：是用来指定文档如何展示给用户的一门语言。决定页面样式。

JavaScript：区分网页是静态还是动态的。

动态网页一定有javascript，这是静态网页和动态网页的最基本的区别

1.2网页的基本构成元素

1.2.1文本：清晰明确的展示网页z

1.2.2图片和动画：让网页更加的生动。

1.2.3超链接：引入外链。

1.2.4音频和视频：让网页更加丰富生动。

1.2.5交互表单：个人信息的收集。

1.2.6其他常见元素

1.3页面布局结构

1.3.1网页页面布局：

国字型、厂字型、海报型、Flash型。

1.3.2网页色彩搭配：

rgb、cmyk、HSB、LAB

1.4Web前端技术简介

1.4.1初识web前端

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

HTML、CSS、JavaScript（解释见1.1.2）

1.4.3Web前端开发工具

1.浏览器：ie浏览器、谷歌浏览器等。

2.网页编辑器：Adobe Dreamweaver、Sublime Text、NotePad++、EditPlus、HBuilderX（常用).

1.5HTML语法基础

1.5.1HTML概述

1.5.1.1语言：一种超文本的标记语言，有指定的语法规则。

1.5.1.2.超文本：可以在网页中加入图片、声音、动画。

1.5.1.3.标记：HTML不算一种编程语言而是一种标记语言。

1.5.2 HTML基本结构

1.5.2.1HTML文档标签：


<html>

</html>

1.5.2.2HTML文档头部标签：


	<head> </head>

1.5.2.3文档编码：


		<meta charset="utf-8">

1.5.2.4文档主题标签“


	<body> </body>

1.6 创建HTML文档

第一步：打开新建，选择HTML文件类型

第二步：给你新建的HTML取个名字，并自定义存放的位置

这样就成功创建HTML文档了

1.7 网页头部标签

1.7.1<title>标签：是页面标题标签。

1.7.2 <meta>标签：是元素信息标签。

1.7.2.1 keywords：用来告诉搜索引擎网页使用的关键词。

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

1.7.3 <link>标签：用于链接外部资源和当前HTML文档。

1.7.4 <script>标签：脚本标签。

1.8 HTML5文档注释和特殊符号

1.8.1 注释：增加HTML文档的可读性，给非开发者的人员提供理解此HTML文档的意义的帮助。
1.8.2 特殊符号：

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/1.1.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%"/>
		<p align="center">网页制作教程Copyright&copy；广东南方职业学院</p >
		</body>
</html>

注意点：切记代码前不要打多余空格，可能会导致命令失效，比如说图片不显示只显示一串代码

错误效果示范：