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

2401_87145887

已于 2024-10-01 14:47:51 修改

阅读量828

点赞数 9

文章标签： html 前端

于 2024-09-12 09:35:48 首次发布

本文链接：https://blog.csdn.net/2401_87145887/article/details/142052800

版权

1.1认识网页和网站

1.1.1 网页、网站

1.网页和网站的区别：

常用术语：

1.WWW：其功能让Web客户端访问Web服务器中的网页

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

3.HTTP：超文本传输协议，

1.1.2 静态网页和动态网页

静态网页：

静态网页通常由纯粹的HTML/CSS语言编写

动态网页：

根据程序运行区域的不同，动态网页可分为客户端动态网页和服务端动态网页

1.2网页基本构成元素

1.2.1文本：文本具有体积小，网络传输速度快

1.2.2超链接：超连接技术是www流行起来的最主要原因，超链接是从一个网页指向另一个目的端的链接

1.2.3音频和视频：音频文件可以使网页效果多样化，视频是一种基于Flash MX的视频流格式

1.3页面布局结构

1.3.1网页页面布局：

根据不同的网页制作风格，可以将网页分为个人网页和商业网页

1.3.2网页色彩搭配

1.网页安全色：网页安全色是指在不同硬件环境、不同操作系统、不同的浏览器中都能够正常显示的颜色集合

2.网页中色彩的表达：在网页设计中，颜色值最常见的表达式是十六进制

3.常见的色彩搭配：采用相近配色和采用近似色配色

1.4Web前端技术简介

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

1.HTML:

HTML是制作网页的标准语言

2:CSS:

CSS是一种用来表现HTML/XML等文件样式的计算机语言

3:JAVAScript语言：

JAVAScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页各式各样的动态动能，为用户提供更流畅美观的浏览效果

1.4.3Web前端开发工具

1.浏览器

2.网页编辑器

3.切图软件

1.5HTML语法基础

1.5.1 HTML概述

1.语言：HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在HTML文档是所尊迅规则和进行的操作

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

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

1.5.2HTML基本结构

1.5.2.1HTML文档标签<html>...<html>

处于文件最前面表示HTML文档的开始

1.5.2.2 HTML文档标签<head>...<head>

<head>
		<meta charset="utf-8" />
		<meta name="keywords"/ content="百度">
		<!-- content="xxx"  xxx代表关键词 -->
		<meta name="description"/ content="百度是一个查询许多问题的软件">
		<!-- content="xxxxx"  xxxxx代表更详细的网站内容描述 -->
		<title>第一个网页项目</title>
		<!-- <title></title>设置标题（网页的名字） -->
		<link rel="stylesheet" href="/css/frist.css" type="text/css"/>
		<!-- <link rel="文件作用" href="路径" type="文件类型">/ (引入css文件)-->
		<script type="text/javascript " src="js/frist.js"></script>
		<!-- <script></script>(引入js文件，同上) -->
	</head>

1.5.2.3文档编码

1.6创建HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>我的第一个网页项目
		<p>2023级软件技术三班
	</body>
</html>

1.7网页头部标签

1.<title>标签是页面标题标签

<!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 type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<!--注释内容-->
		<h1>我的第一个网页项目</h1>
		<p>2023级软件技术3班</p >
		百度一下
	</body>
</html>

2.<meta>标签是元素标签，在HTML中是一个单标签

3.<link>标签用于连接外不资源和当前HTML文档

4.<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息

5.keywords用来告诉搜索引擎网页使用的关键字

6.description用来告诉搜索引擎网站主要内容

1.8HTML5文档注释和特殊符号

1.8.1注释

为增加HTML5文档的可读性，可为其添加注释分，注释文档中的说明文字，不会被浏览器执行

1.8.2特殊符号

由于大于号">"和小于号"<"等已作为HTML的语法符号

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 aling="center">临江仙·送钱穆父</h2>
		<p>宋 苏轼</p>
		<p>一别都门三改火，天涯踏尽红尘。<br/>
		    依然一笑作春温。<br/>
			无波真古井，有节是秋筠。<br/>
			惆怅孤帆连夜发，送行淡月微云。<br/>
			尊前不用翠眉颦。<br/>
			<font color="brown"face+"微软雅黑">人生如逆旅，我亦是行人。</font></p>
		<img src="img/微信图片_20240912085708.jpg" />
		<hr size="2"color="black"width="100%"/>
		<p aling="center">网页制作教程Copyright&copy;广东南方职业学院</p>>
	</body>
</html>