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

最新推荐文章于 2024-09-30 14:01:51 发布

2301_80792856

最新推荐文章于 2024-09-30 14:01:51 发布

阅读量588

点赞数 24

文章标签： html

本文链接：https://blog.csdn.net/2301_80792856/article/details/142057877

版权

1.1 认识网页和网站

1.1.1 网页、网站

1.区别：一个网站会有很多个网页，网页就是单纯一个页面，而网站包含了很多其他内容，这些内容可能是网页，也可能是程序或者其他文件

2.常用术语：

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

IP：网际协议，Internet中的每台计算机都有唯一的IP地址，表示该计算机在Internet中的位置

域名：网站名称，在全世界是唯一的

HTTP:超文本传输协议

FTP:文件传输协议

发布：指上传网站，把制作好的网页发布到网站的过程

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

1.1.2 静态网页和动态网页

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

动态网页：在原有的网页基础上加上了JavaScript动态技术，能够根据不同浏览者的请求来显示不同的内容

1.2 网页的基本构成元素

1.2.1 文本

可使用户更加方便浏览，用作主旨和主题的表达

1.2.2 图片和动画

图片比文字更加生动和直观，可以传递一些文本不能表达的信息，让网页更加有趣和生动

1.2.3 超链接

从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置

1.2.4 音频和视频

用作操作的演示

1.2.5 交互表单

用作注册和登录，记录信息，通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端

1.2.6 常见元素

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

1.3 页面布局结构

1.3.1 网页页面布局

1.“国”字型：左右各一列用来放置导航和工具栏，中间正文内容，最下方是站点信息

2.“厂”字型：上方标题栏，中间左侧较窄一侧放置超链接等功能，右侧为正文内容

3.海报型：上方为标题和导航型，下方为正文内容

4.Flash：常以精美大幅图像为主题，常用于宣传网站首页

1.3.2 网页色彩搭配

RGB：红绿蓝

颜色值最常见的表达方法是十六进制，颜色值可以采用6位的十六进制表示，并且需要在前面加上特殊符号#，例如#0E533D

1.4 Web前端技术简介

1.4.1 初识Web前端

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

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

1.HTML：控制页面结构，是制作网页的标准语言

2.CSS语言: 页面样式文件，让网页更加好看

3.JavaScript语言：动态技术，为网页添加各种各样的动态功能

1.4.3 前端开发工具

1.浏览器：谷歌浏览器 GoogleChrome

2.编辑器：HBuilderX

3.切图软件

1.5 HTML语法基础

1.5.1 HTML概述

即超文本标记语言，是一种用来制作超文本文档的简单标记语言

1.语言

HTML作为一种超文本标记语言，有指定的语法规则

2.超文本

在文本的基础上加上图片，音频，影视的文本就叫做超文本

3.标记

内容用"<"和">"括起来，就被称为标记

1.5.2HTML基本结构

1.index.html:页面结构文件

2.css文件夹：存放css文件，页面样式文件

3.img文件夹：存放图片

4.js文件夹：存放JAVAScript文件

1.6 创建HTML 文档

1.使用HBuilder新建项目。先点击“文件”，再点新建，然后在选择“Web"。

2.创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现。

1.7网页头部标签

在网页的头部中，通常存放一些介绍页面内容的信息

1.7.1<meta>标签

元信息标签，用来指明指明本页的作者、制作工具，所包含的关键字，以及其他一些描述网页的信息

1.keywork 设置关键词

2.description 设置信息，描述网页内容

1.7.2 <title>标签

页面标题标签，网页名

1.7.3 <link>标签

引入css文件

1.7.4 <script>标签

引入js文件

第一个HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords"content="xxx"/>
		<meta name="description"content="xxx"/>
		<title>第一个网页项目</title>
		<link rel="stylesheet"href="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 HTML5文档注释和特殊符号

1.8.1 注释

注释是文档中的说明文字，不会被浏览器执行

<! --注释内容--> ,支持单行和多行注释

1.8.2特殊符号

由于<和>等已作为HTML的语法符号，所以，要在页面上显示特殊符号，就必须使用相应的HTML代码表示。

空格：&nbsp

大于号：&gt

小于号：&lt

1.9综合案例——临江仙.送钱穆父

以一首宋词为例子，参照给定的HTML代码和图片资源，利用HBuilder设计web网页。

下面为完整代码

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

运行结果