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

最新推荐文章于 2024-09-30 15:42:36 发布

233M

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量596

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/2302_80555711/article/details/142057843

版权

1.1——认识网页与网站

1.1.1 【网页与网站】

<网页--构成网站的重要组成部分>

AI:网页是构成网站的基本单位，通过互联网浏览器进行展示和交互。网页不仅仅是编码的产物，更是连接用户与数字信息世界的桥梁，它们以多种格式展现，包括文本、图像、视频等，并可以通过超链接相互联系。q_q

——网站常用术语——

Internert（全球性网络--互联网）

WWW（Web客户端访问Web网页的所用）

URT（统一资源定位符）

IP（网际协议，计算机在互联网中的地址）

*HTTP（超文本传输协议）

*FTP（文件传输协议）

发布（将成品网站上传服务器）

站点（网站的内容存放点）

超链接（多个网页进行链接跳转）

客户机和服务器（个人计算机与响应请求的服务器）

1.1.2【静态网页与动态网页】

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

AI: 静态网页是一种不包含程序代码，仅由HTML、CSS和JavaScript构成，内容固定且不依赖后端数据库的网页。

特点：静态网页以其快速、安全、成本低等优点适用于内容固定且不需要频繁更新的网站。

动态网页是一种能够根据时间、环境或数据库操作的结果显示不同内容的网页编程技术。与静态网页不同，动态网页的内容不是在网页创建初期就固定下来的，而是可以根据用户的请求或服务器端的逻辑实时生成和更新。

特点：动态网页的特点包括与数据库的交互、服务器端脚本执行、内容动态生成、人机交互性以及维护相对容易等方面。相比于静态网页，动态网页能够实现更多的功能和更丰富的用户体验。

动态网页和静态网页是两种基本的网站构建技术，虽然最终目的都是向用户展示信息，但它们在更新维护、交互性以及响应速度等方面存在显著差异。x_x

1.2 网页的基本构成元素

1.2.1.文本

AI:网页中的文本在网页中的关系主要体现在层级结构、语义化标签和视觉呈现等方面。这些关系不仅有助于网页内容的有序展示，还对搜索引擎优化（SEO）和用户体验有重要影响。T_T

1.2.2.图片和动画

网页功能及内容最直观的表述形式。

1.2.3.超链接

链接到其他网页，最常见的使用跳转网页。可依附于各种元素上，如图片文字等等

1.2.4.音频视频

音频-常用于网页的背景音乐。视频-根据网页的设计需要视频的类别也不同。

1.2.5.交互表单

功能菜单之类的

1.2.6.其他常见元素

自定义特效，悬停按钮等等，让你的网站更具特色

1.3 页面布局结构

1.3.1 网页页面布局

如图this

1.3.2 网页色彩搭配

让你的网页变得更加花里胡哨的。通过不同的色彩搭配，使同一网页给人的感觉不同。

1.4 Web前端技术简介

1.4.1 初识WEB前端

懒得总结详情见这 > --------

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

HTML CSS JavaScript 学到就是“赚到” builbuil搜索即食

1.4.3 前端开发工具

1.4.3.1 浏览器

浏览器：IE<懒人专用> [ Chrome Firefox Safari Opera ]<没用过 AI or 浏览器搜索食用>

1.4.3.2 网页编辑器

idea HB txt(大佬专用).....

1.4.3.3 切图软件

Photoshop,Fireworks

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

超文本标记语言

1.5.1.2 超文本

在文字的基础上进行美化或添加额外的数据

1.5.1.3 标记

HTML5文件是由一系列成对出现的元素标签嵌套组合而成。这些标签用“<>”括起来。它们被称为标记。

1.5.2 HTML基本结构

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

处于文档最前面的标签表述HTML文件开始的地方

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

HTML头部内容存放一些页面描述于关键字链接的文件

设置字符集，设置keyworks(关键字)等等

1.5.2.3 文档编码

格式<meta charset="utf-8"/>

网页所使用的文字编码

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

HTML整体内容为整个网页的核心

1.6 创建HTML文档

如图---

css文件夹---存放css代码文件-用于设置网页的样式

img文件夹---用于存放图片或视频

js文件夹---用于存放js代码文件

index.html---用于设置网页的结构

ps:HTML不会识别换行符需要换行时可使用<p>标签或换行标签

代码练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>123</p>
		<p>235</p>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

运行结果

1.7 网页头部标签

1.7.1 <title>标签

设置网页标题标签-网页的名称

1.7.2 <meta>标签

设置网页元信息标签

1.7.2.1 keywords

用来告诉搜索引擎使用的关键字

1.7.2.2 description

用于告诉搜索引擎网页的主要内容

1.7.3 <link>标签

引入css文件

rel：指定文件的作用常使用"stylesheet"

href:指定路径

type:文件类型

1.7.4 <script>标签

脚本标签，用于为HTML文档定义客户端脚本信息可位于文档任何位置但常放于<head>标签

src:指定路径

type:指定文件类型

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为代码标上注释使用

1.8.2 特殊符号

HTML中的特殊符号主要指那些无法直接通过键盘输入的字符，例如数学符号、希腊字母、箭头、技术符号以及各种形状等。

代码练习2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="xxx"/>
		<meta name="description" content="xxx"/>
		<title>第一个网页</title>
		<link ref="stylesheet" href="css/index.css" type="text/css" />
		<script src="js/index.js" type="text/javascript"></script>
	</head>
	<body>
		<p>123</p>
		<!-- 单行注释 -->
		<p>235</p>
		<!-- 多行
		23333333
		注释 -->
		<p>&gt&nbsp&lt&quot&copy;</p>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

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

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

运行结果---