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

最新推荐文章于 2024-09-28 19:02:04 发布

江恸

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量912

点赞数 14

文章标签：前端

本文链接：https://blog.csdn.net/2302_80416946/article/details/142091984

版权

1.1 认识网页和网站

1.1.1 网页网站

网页和网站的区别：

含义不同：网站是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。网页是网站的基本元素，是承载各种网站应用的平台1

关系不同：网站包含了网页，网页是包含了HTML代码集合，呈现一个界面2

组成不同：网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成3

功能不同：网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能4

常用术语：

URL：统一资源定位符，指定通信协议和地址，例如"http://www.baibu.com"是一个URL,"http://"表示通信协议为超文本传输协议，“www.baibu.com”表示网站名称

域名：通常把域名看成网站的网址，书写格式：机构名，主机名，类别名，地域名，表达更直观

FIP:文件传输协议，实现资源共享

超链接：简称网址

静态网页通常由 HTML /CSS语言编写

动态网页由 JAVASCRIPT

1.2 网页的基本构成元素

1.2.1 文本

文本具有体积小，网络传输速度快等特点，可使用户更方便浏览和下载文本信息

1.2.2图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，使用最广泛的是GIF和JPEG

1.2.3超链接

超链接技术是www流行起来的最主要的原因，超连接可以在当前页面进行跳转，也可以在页面外进行跳转

1.2.4音频视频

音频文件可以使网页效果多样化，网页中常用的音频格式有mid和mp3

1.2.5交互表单

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

1.2.6其他常见元素

悬停按钮，JavaScript，ActiveX等各种特效

1.3网页布局结构

1.3.1结构类型

“国”字形，“厂”字形，海报型，Flash型

1.3.2 网页色彩搭配

网页安全色是红色，绿色和蓝色（RGB）

1.4 Web前端技术简介

1.4.1 初识WEB前端

标志着万维网时代的到来。随着互联网yi1991 年8 月6日，来自欧洲核子研究中心的科学家 Tim Bemen-Lee，启动了世界上第一个可以正式访问的互联网，网站开发人员也变得炙手可热。Web 前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Wab 前端开发这个职业也从设计和制作不分的局面中独立出来。早期的前端其实就是 Tabel 布局，后来发展到 Div+CSS 网站重构，再到 JavaSeript 逐渐成为 Web 前端开发的语言以及 Web 2.0 的出现，每个阶段都涌现出相应的产品，如博客，微博。

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

Web前端开发主要涉及三大核心技术：HTML(控制器页面结构）、CSS（页面样式）和JavaScript（动态技术）

1.4.3 前端开发工具

1.浏览器

2.网页编辑器

3.切图软件

1.5 html语法基础

HTML是制作网页的基础语言，是初学者必学的内容。虽然现在有许多所见即所得的网
页制作工具，但是这些工具生成的代码仍然是以 HTML 为基础的，因此学习 HTML 代码端设
计网页非常重要。

1.5.1 html概述

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对
出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在 HTML 中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<hody>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签。
双标签两大类：
单标签指的是只存在一个标签的写法，如<meta><imput>等。
双标签指的是存在一对标签的写法，如<heud> </heud>，<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要
在左尖括号后添加一个关闭符“/”。
两个工具。HTML.编辑器是用于生成和保存 HTML.文档的应用程序。Wab 浏览器用来打开
HTML 只龛一不死交不文作。创建一个 HTML文档、需要 HTML.编辑器和 Web 浏览器
Web 网页文件，提供查看 Web 资源的客户端程序。

1.5.2html基本结构

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

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

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

1.5.2.3 文档编码<meta charset="uf-8"/>

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

1.6 创建html文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords"content="" />
		<meta name="discription"conent="xxx" />
		<title>我的第一个网页</title>
	</head>
	<body>
		开始学习网页设计与制作！4
		<p>2023年软件技术4班</p>
		<a href="http://www.baidu.com">百度一下</a>
		script type="text javascript">douument.write("链接到百度")；
		
	</body>
</html>

1.7 网页头部标签

1. 7.1<title>标签

一个好的标题能使读者从中判断出该文件的大概内容。磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保存到网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个网站。
<title>标签位于<bead>与</head>中，用于标示文档标题，格式如下：<title>标题</title>
例如，京东商城的文档标题:<title>京东(JD.COM)-正品低价、品质保障、配送及时,轻松购物！</title>打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的
标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题
内容。

1.7.2 <meta>标签

1.7.2.1 keywords

关键字：<meta name="keywords" content=" xxx "/>

1.7.2.2 description

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

例如<meta name=" description" content=" xxx "/>

1.7.3 <link>标签

1.7.4 <script>标签

指定文件路径

1.8 HTML5文档注释和特殊符号

1.8.1 注释

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: large;
			}
		</style>
	</head>
	<body bgcolor="antiquewhite" text="#333333">
		<h2 align="center">临江仙·送钱穆父</h2>
		<p >宋 苏轼</p >
		<!-- 使用<br/>的效果 -->
		<p >一别都门三改火，天涯踏尽红尘。<br/>
		        依然一笑做春温。<br />
		    无波真古井，有节是秋筠。<br />
		    惆怅孤帆连夜发，送行淡月微云。<br />
			尊前不用翠眉颦。<br />
			<font coler="brown"face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
		<img src="img/1.jpg" />
		<!-- 水平线 -->
		<hr size="2"color="black" width="100%"/>
		<p align="center">网页制作教程 Copyright&copy;江西应用工程职业学院</p >
	</body>
</html>