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

laymo

于 2024-09-12 16:48:49 发布

阅读量623

点赞数 15

文章标签： html 编辑器

本文链接：https://blog.csdn.net/dhy_04/article/details/142092272

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：网站和网页并不是总分的关系，网站是由一个个网页组成的。

1.网页

网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。

2.常用术语

Internet：因特网

WWW：其功能是让web客户端（常用浏览器）访问web服务器中的网页

URL：统一资源定位符，指定通信协议和地址

IP：网络协议

域名：常把域名看做网络的网址

HTTP：超文本传输协议

FTP：文件传输协议

发布：上传网站

站点：一个网站所有内容所存放的文件夹

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

1.1.2 静态网页和动态网页

三大核心技术：HTML CSS（静态网页） JavaScript（动态网页）

注：判断一个网页是否是动态的就看网页是否存在JavaScript

1.2 网页的基本构成元素

1.2.1 文本

特点：体积小，网络传输速度快，是网页最主要的基本元素

作用：用文字表达信息的内容和含义

1.2.2 图片和动画

特点：更加生动和直观，具有强烈的视觉冲击力

作用：更有效的吸引浏览者的注意

1.2.3 超链接

作用：引流

1.2.4 音频视频

1.MP3

特点：压缩率高，音质不错

作用：网页效果多样化

2.flv

特点：文件小，加载速度快

作用：网页效果多样化

1.2.5 交互表单

收集个人信息

1.2.6 其他常见元素

不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页的色彩搭配

RGB色彩模式

注：并不是前端开发者的重点工作

1.4 Web前端技术简介

1.4.1 初识Web前端

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

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

1.HTML

页面结构文件

2.CSS语言

页面样式文件

3.JavaScript语言

页面动态功能

1.4.3 前端开发工具

1.浏览器

谷歌浏览器

特点：普及性强

缺点：可能会导致同样网页的显示效果不同

2.网页编辑器

HBuilderX

3.切图软件

1.5 HTML语法基础

1.5.1 HTML概述

1.语言

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

2.超文本

是可以添加图片、声音、动画、影视等内容的文本。

3.标记

HTML5实际上不是一种编程语言，而是一种标记语言。

单标签：<XXX><XXX>

双标签：<XXX></XXX>

1.5.2 HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>这是我的第一个网页项目!</p>
		<p>2023级软件技术4班刘某!</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

HTML文档分为三个文件加一个HTML文档

CSS文件夹：存放CSS文件，网页样式

IMG文件夹：存放图片、视频等资源

JS文件夹：存放动态文件（使网页实现动态功能）

1.HTML文档标签

2.HTML文档头标签

<head>（头标签）...</head>（尾标签）

3.HTML文档主体标签

<body>...</body>------>存放网页主体内容

注：1.<p>...</p>：换行标签

2.<a>...</a>：超链接标签

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

该标签是页面标题标签

1.7.2<meta>标签

该标签有三个参数：keywords、description、charset

1.keywords

索引关键字

2.description

网站内容描述

3.charset

字符

1.7.3<link>标签

该标签引入的是CSS文件，有三个参数：rel、sref、type

1.rel

指定文件样式

2.sref

指定文件路径

3.type

指定文件类型

1.7.4<script>标签

该标签引入的是JS文件，有两个参数：src、type

1.src

指定文件路径

2.type

指定文件类型

1.8 HTML文档注释和特殊符号

1.8.1 注释

单行注释：

多行注释：<!--

XXX

-->

1.8.2 特殊符号

特殊符号	字符实体	实例
空格		银河商务  热线：400-111-111
大于	>	3>2
小于	<	2<3
引号	"
版权号（@）	©	Copyright©网页设计教程

1.9 综合案例——临江仙·送钱穆夫

<!--综合案例-->
<!DOCTYPE himl>
<html>
	<head>
		<meta mame="koywomde" contenl="宋调，苏轼"charmet="uf-8" />
		<meta name="descriplion"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>