第一章网页制作的基础知

最新推荐文章于 2024-10-01 23:46:18 发布

若云熙

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量716

点赞数 26

文章标签： html

本文链接：https://blog.csdn.net/2302_82186635/article/details/142058283

版权

1.1认识网页和网站

1.1.1网页和网站

网页和网站的区别；网页是由HTML编写，通过WWW网传输而且网站；wed站点也被称为网站，www信息是由无数的web站点组成的

常用术语；Interent、www、浏览器、URL、IP、域名、HTTP、FTP

1.1.2静态网页和动态网页

静态网页是指客户端的浏览器发送URL请求给www服务器

动态网页能够根据不同浏览者的请求来显示不同的内容

1.2网页的基本构成元素

1.2.1文本

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

1.2.2图片和动画

图片比文本更加生动直观

1.2.3超链接

超链接技术是www流行起来的最主要的原因

1.2.4音频和视频

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

1.2.5交互表单

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

1.2.6其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮等。。

1.3页面的布局结构

1.3.1网页网面布局

1.3.2网页色彩的搭配

网页安全色；是红色、绿色和蓝色

网页中色彩的表达，在网页设计中,颜色最常见的表达方式是十六进制

常见的色彩搭配；采用相似色配色、采用相近色配色

1.4web前端技术简介

1.4.1初识web前端

web前端即指平常上网浏览的网页

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

1.HTML是制作网页的标准网页

2.css语言是一种用来表现HTML或XML等文件样式的计算机语言

3.javascript语言是一种属于网络的脚步语言，已经被广泛地用于wed应用开发

1.4.3web前端开发工具

1.浏览器；有IE浏览器、chrome浏览器、Firefox浏览器、safari浏览器、opera浏览器

2.网页编辑器

Adobe Dreamweaver;是一款所见即所得的网页编辑器

Sublime Text;它的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果

Notepad；它的名称来源于windows系列操作系统自带的记事本NotePed，在此基础上多了2个加号

Editpuls；是由韩国开发支持html

HBuilder；是由DCLoud推出的一款支HTML5的web开发IDE

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

1.5HTML语法基础

1.5.1HTML概述

html是Hyper Text Markup Language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言

1.语言；HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和运行的操作

2.超文本；超文本是可以加入图片、声音、动画、影视等内容的文本

3.标记；HTML5实际上不算是一种编程语言，而是一种标记语言

1.5.2HTML基本结构

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

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

3.文档编码一般为；

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

1.6创建HTML文档

1.7网页头部标签

1.title标签；设置网页标题

2.meta标签；是元信息标去签

3.description;设置描述信息

4.link标签；引入css文件

5.script标签；是脚步标签

css文件夹存放css文件，页面样式文件

img文件夹存放文件

js文件夹存放javaScrip文件

keyworids设置关键字

rel指定文件作用

href指定文件路径

1.8HTML5文档注释和特殊符号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords"conteent="xxx"/>
		<meta name="description"content="xxx"/>
		<title>第一个网页项目</title>
		<link rel="stylesheet"  herf="css/index.css" type="text/css"/>
		<script src="js/index.js" type="text/javascript"></script>
	</head>
	<body>
		<p>这是我的第一个网页项目</p>
		<p>2023级软件技术2班胡槿元</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.8.2特殊符号

特殊符号	字符实体	示例
空格		银河商务
大于（>）	>	3>2
小于（<）	<	2<3
引号（"）	"
版权号（©）	©	网页设计教程

1.9综合示例——临江仙·送钱穆父

<!DOCTYPE html>
<html>
	<head>
		<meta name='keywords' content='宋词,苏轼'charset="UTF-8" />
		<meta name="description" countent="本网站收入精选宋词"  />
		<title>宋词精选</title>
		<style type="text/css">
			p{
				text-align: center;
				font-size: larger;
				
			}
		</style>
	</head>
	<body bgcolor="antiquewhite" wtxt="#333333">
		<h2 align="center">临江仙·送钱穆父</h2>
		<p>宋 苏轼</p >
		<!--使用<br/>的效果-->
		<p>一别都门三改火,天涯踏尽红尘0<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>