第一章网页制作基础知识

最新推荐文章于 2024-10-04 06:11:34 发布

2301_81136803

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量668

点赞数 12

文章标签： xhtml

本文链接：https://blog.csdn.net/2301_81136803/article/details/142078490

版权

1.1认识网页和网站

1.1.1网页.网站

网页和网站的区别：网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件；网站就是Web站点，是Interrnet上能提供Internet服务的一个位置，这个位置由独一无二的IP地址或者域名描述，一个网站需要有一台或者是多台服务器来实现其WWW服务。

常用术语：Internet，WWW,URL,IP,域名,HTTP,FTP,发布,站点,超链接,客户机和服务器

1.1.2静态网页和动态网页

静态网页由HTML/CSS编写

动态网页：采用动态网站技术生成的网页，客户端动态网页技术包括JavaScript，ActiveX,Flash

1.2网页的基本构成元素

文本：是网页基本元素，也是页面中最主要的信息载体。具有体积小，网络传输快等特点

图片和动画：网页中的网站标识，背景，链接都可也是背景。格式主要有GIF,JPEG,PNG等

超链接:从一个网页指向另一个目的端的链接，可以是文本，图像和锚链接

音频和视频：常用音频格式有mid和mp3.其中mp3是压缩文件。网页中的视频文件一般为flv格式

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

其他常见元素：悬停按钮，JavaSccript和ActiveX等各种特效

1.3页面布局结构

网页页面布局：

网页色彩搭配：（1）网页安全色：红色，绿色，蓝色。当颜色数字信号值为0，51，102，153，204，255时，颜色组合一共有2106种颜色

（2）网页中色彩的表达：颜色值最常见的表达方式是十六进制，并且需要在前面加上特殊符号“#”

（3）常见色彩搭配：相近色，近似色

1.4Web前端技术简介

1.4.1初识Web前端

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

1·HTML:是制作网页的标准语言。超文本标记语言的结构包括“头部”和“主体”两部分，“头部”提供关于网页的信息，“主体”提供网页的具体内容。

2·CSS语言：用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

3·JavaScript语言：是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的测览效果。它的解释器被称为Script引擎，属于浏览器的一部分，因此JavaSeript代码由浏览器边解释边执行。通常VaSeript 脚本通过人在HTML中的方式来实现自身的功能。

1.4.3Web前端开发工具

1·浏览器：IE，chrome，Firefox，Safari，Opera

2·网页编辑器

Adobe Dreamweaver：是一款所见即所得的网页编辑器。支持 HTML5/CSS3源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化.Dreamweaver 也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver的预览视图难以达到与所有浏览器完全一致的效果。如需考虑跨浏览器兼容问题，预览画面仅能作为辅助参考。

Sublime Text:持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。

NotePad++:是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术.它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

EditPlus:持HTML，CSS，JavaScript，PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。开发者可以自行编辑快捷键屋代表的代码块，然后在开发过程中使用快捷方式让EdiPlus自动完成指定的代码内容。

HBuilder:支持HTML5的Web开发IDE。HBuilder 主要用于开发HTML，JS（JavaScript）和CSS，同时配合HTML的后端脚语言如PHP和JSP也可以适用，还有前端的预编译语言如less以及人们钟爱的markdown可以良好地进行编辑。

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

1.5HTML语法基础

1.5.1HYML概述

1·语言：HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在HTML.文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作

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

3·标记：HTML5文件是由一系列成对化的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记。单标签指的是只存在一个标签的写法，双标签指的是存在一对标签的写法。

1.5.2HTML基本结构

1·HTML文档标签:格式为<html>HTML文档的内容</html>

2·HTML文档头标签：格式为<head>头部的内容</head>

3·HTML文档编码：格式为：<meta charset="utf-8"/>

4·HTML文档主题标签：格式为:<body>网页的内容</body>

1.6创建HTML文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>网页</title>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
   			
   		});
   		
    </script>
</head>
<body><p>我的第一个网页</p>
<p>2023软件技术1班</p>
<a href="https://blog.csdn.net/2301_81136803?spm=1000.2115.3001.5343">我的博客</a>
</body>
</html>

1.7网页头部标签

1.7.1 <title>标签格式：<title>标题</title>

1.7.2<meta>标签：<meta>标签分两大属性：HTTP 标题属性（htp-equiv）和页面描述属性（name)的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。<meta>标签的name属性的语法：<meta name="参数“content”参数值">

1·keywords：用来高收益搜索引擎网页使用的关键字

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

1.7.3<link>标签：<link rel=“stylesheer" href="外部样式表文件名，css“ype="tex/css” />
1.7.41.7.4 <script>标签：<scripltype="texl/css" src="脚本文件名 n.js"></script>

1.8 HTML5文档注释和特殊符号

1.8.1注释

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>带有注释语句的页面</title>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
   			
   		});
   		
    </script>
</head>
<body>
	HTML!
	<! --接下来会出现一条水平线-->
	<hr size="3" color="black">
	<! --
	   这是一个多行注释语句
	   注释语句不会被浏览器执行
	   也不会在浏览器中显示
	-->
	<p>一个网页</p>
	
</body>
</html>

1.8.2特殊符号

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

特殊符号	字符实体	实例
空格	&nbsp	银河商务&nbsp；&nbsp；热线：400-111-1111
大于（>）	&gt	38g；2
小于（<)	&lt	2&l；3
引号（”）	&quot
版权号	&copy	Copyright&rcopy；网页设计教程

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.1jpg"/>
	<！--水平线-->	
	<hr size="2" color="black" width="100%"/>	
	<p align="center">一个网页</p>
<body>
	
</body>
</html>