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

京

已于 2024-09-13 09:45:28 修改

阅读量75

点赞数 4

文章标签： html

于 2024-09-09 15:49:04 首次发布

本文链接：https://blog.csdn.net/2303_77563779/article/details/142058065

版权

1.1认识网页和网站

1.1.1网页，网站

网页分静态网页和动态网页组成。网页的基本构成元素由文本,图片和动画,超链接,音频和视频,交互表单与其他常见元素。

网站由前端,后端,服务器构成。

常用术语：Internet,WWW,浏览器,URL,IP,域名,HTTP,FTP,站点,发布,超链接,导航条,客户机和服务器等。

1.1.2静态网页和动态网页

静态网页：静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理的直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。

动态网页：不像静态网页一样一成不变，就像登录一个成绩管理系统，每个人进入界面的用户都不是一样的。

1.2网页的基本构成元素

文本，图片，超链接，音频和视频，交互表单，其他常见元素。

1.3页面布局结构

1.3.1网页页面布局

国字形，厂子型，海报型，Flash型。

1.3.2 网页色彩布局

网页设计色彩方案按色相的搭配分类本节将网页设计中常见的色彩搭配按照色相的顺序归类。每类都以该色相为主，配以其他色相或者同色相的，应用对比和调和的方法，并按照从轻快到浓烈的顺序排序。

1.4Web前端技术简介

1.4.1初时Web前端

Web前端即指平常上网浏览的网页，如上网浏览新闻，查询快递信息，淘宝购物等都是在浏览网页。

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

HTML，CSS语言，JavaScript语言。

1.4.3Web前端开发工具

浏览器，网页编辑器。

1.5HTML语法基础

1.5.1.HTML概述

语言：HTML为超文本标记语言

超文本:在文本中可添加视频语音，链接等

标记：<xxx>内容</xxx>

1.5.2HTML基本结构

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

img:图片文件夹

js:javaScropt文件

html文件：页面结构文件

1.7.1 <title>标签1.7.2 <meta>标签1.7.2.1 keywords1.7.2.2 description1.7.3 <link>标签1.7.4 <script>标签1.8 HTML5文档注释和特殊符号1.8.1 注释1.8.2 特殊符号介绍如图：

特殊符号	字符实体	示例
空格	&nbsp	银河商务&nbsp
大于＞	&gt	3>2
小于＜	&lt	2<3

	<!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" />
			<!-- 引入css文件,rel指定文件作用，href指定文件路径，type指定文件类型-->
			<script src="js/index.js" type="text/javascript"></script>
			<!-- 引入javaScript，src指定文件路径，type指定文件类型 -->
		</head>
		<body>
			这是我的第一个网页
			<br><!-- 换行 -->
			第二行
			<p>p标签里的内容单独占一行</p>
			<a href="https://www.baidu.com/">百度一下</a><!-- 超链接，网页跳转 -->
		</body>
	</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="宋词,苏轼"></meta>
		<meta name="description" content="本网站收录精选宋词"/>
		<style type="text/css">
			p{
				text-align: center;
				font-size: large;
			}
		</style>
		<title>宋词精选</title>
	</head>
	<body>
		<h2 align=center>临江仙.送钱穆父</h2>
		<p>宋 苏轼  <br>
		一别都门三改火，天涯踏尽红尘。<br>
		依然一笑作春温。<br>
		天波真古井，有节是秋药。<br>
		惆怅孤帆连夜发，送行淡月微云。<br>
		尊前不用翠眉犟。<br>
		<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人</font></p>
		<img src="img/aa.jpg"/>
		<hr size="2" color="black"  width="100%"/>
		<p>网页制作教程Copyright@广东南方职业学院</p>
	</body>
</html>

运行结果：