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

最新推荐文章于 2024-10-11 16:10:25 发布

xzyxzyxzy66

最新推荐文章于 2024-10-11 16:10:25 发布

阅读量825

点赞数 15

文章标签： html

本文链接：https://blog.csdn.net/2301_80973106/article/details/142078015

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：并非绝对的总与分的关系网页通常都是一面呈现出来，可能包含了文字、视频、图片等因素，也可以理解为一个文档；而网站则是包含各种相关信息网页的整体，它还包括了其他资源，而且网页是能够在本地运行的，而网站则是得在服务器上才能运行。总而言之，网页是网站的组成部分，而网站是多个网页及其相关资源的联合。

常用术语：

FTP（文件传输协议）：

FTP是文件传输协议的英文缩写，是快速、高效、可靠的信息传输方式。这个协议能把文件从一台计算机传输到另外一台计算机中，不管在哪里，也不管两台计算机的操作系统是什么都可以实现传输从而真正的实现资源共享。

IP：网络中的每一个计算机都有唯一的IP地址，表示该计算机在Internet中的位置。

HTTP：超文本传输协议

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

1.1.2静态网页和动态网页

HTML、CSS 静 / JavaScript 动

1.1.2.1 静态网页

静态网页一般纯粹地用HTML、CSS语言编写，静态网页运行在用户客户端时的页面是已经事先做好并存放在服务器中的网页。

1.1.2.2 动态网页

动态网页与静态网页最大的区别则是动态网页能与用户交互，具有交互性。动态网页又分为客户端动态网页和服务器端动态网页。客户端动态网页不需要与服务器进行交互，实现动态功能基本上都是靠脚本语言嵌入网页，而服务器端动态网页则是需要客户端共同参与，最后产生结果再返回客户端。

css是样式的文件，即指定样式。

1.2 网页的基本构成元素

1.2.1 文本

体积小、速度快，可供用户更方便地浏览和下载文本信息。

1.2.2 图片和动画

比文字更加生动与直观，可以传递一些文本传递不了的信息，网页中的网站标识、背景、链接等都可以为图片。用户在网页中使用的图片的主要格式为GIF、JPEG、PNG。

1.2.3 超链接

超链接是指从一个网页跳转到另一个目的端的链接，可以是文本链接、图像链接和锚链接。

1.2.4 音频视频

音频可使网页效果多样化，常见格式有mid和MP3，其中MP3的效果更好。

网页中的视频文件一般为flv格式，它是一种基于Flash MX的视频流格式，具有文件小、加载速度快等特点。

1.2.5 交互表单

接收用户端的输入，反馈到目标端，例如登陆界面、个人信息收集等等

1.2.6 其他常见元素

悬停按钮以及一些网页特效

1.3 页面布局结构

1.3.1 网页页面布局

分商业网页和个人网页

商业网页内容丰富，信息量大，有明确的分类；

个人网页风格多样内容比较专一。

1.3.2 网页色彩搭配

两种模式：6位的16进制；RGB

1.4 Web前端技术简介

1.4.1 初识Web前端

平时上网浏览的网页都算web前端

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

1.4.2.1 HTML

HTML：制作网页的标准语言

1.4.2.2 CSS语言

CSS是一种用来表现HTML或XML等文件样式的计算机语言，它不仅可以静态修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.4.2.3 JavaScript语言

属于网络的脚本语言，已经被广泛地应用于web应用开发

1.4.3 前端开发工具

1.4.3.1 浏览器

有IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera浏览器。

IE浏览器可以兼容低版本的浏览器，对设备要求不高；Google Chrome速度快、开发者工具强大但内存占用高；Mozilla Firefox对Web标准支持好、安全性高但速度稍慢；Safari性能优秀、隐私保护好但仅限苹果设备；Microsoft Edge兼容性好、内存占用低但市场占有率不高；Opera功能丰富、内存占用低但开发者工具较弱。

1.4.3.2 网页编辑器

1. Adobe Dreamweaver
Adobe Dreamweaver 是一款由Adobe Systems开发的网页设计和开发工具，它提供了代码编辑和可视化设计界面。
优点：适合初学者，易于上手；支持实时视图和代码视图切换；集成FTP功能，方便网站上传和维护。
缺点：软件体积大，运行较慢；价格昂贵；对于纯代码开发，功能可能不如其他轻量级编辑器。
2. Sublime Text
Sublime Text 是一个轻量级、跨平台的文本和开发编辑器，以其简洁的界面和强大的功能而受到开发者的喜爱。
优点：启动速度快，性能优异；支持多种编程语言；插件丰富，可扩展性强。
缺点：默认功能相对简单，许多高级功能需要依赖插件；免费版有弹窗提示购买。
3. Notepad++
Notepad++ 是一个免费的开源文本和源代码编辑器，支持多种编程语言，广泛用于代码、HTML和文本编辑。
优点：轻量级，占用资源少；支持插件扩展；支持多种编码格式；免费且开源。
缺点：界面和功能相对简单；插件管理不如一些专业编辑器方便。
4. EditPlus
EditPlus 是一款适用于Windows的文本编辑器、HTML编辑器和程序编辑器，它具有语法高亮、代码折叠和自动完成等特性。
优点：轻量级，启动快速；支持多种编程语言和语法高亮；内置FTP功能。
缺点：界面较为传统，不如一些现代编辑器美观；功能相对有限，扩展性不如一些开源编辑器。
5. HBuilder
HBuilder 是由DCloud推出的一款支持HTML5的Web开发IDE，特别适用于移动端Web应用开发。
优点：对HTML5支持良好；提供丰富的Web开发工具；内置了模拟手机浏览器的功能；支持快速生成项目结构。
缺点：相较于其他编辑器，普及度较低；界面和功能可能不如一些国际知名编辑器成熟；部分用户反映性能和稳定性有待提高。

1.4.3.3 切图软件

切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改

1.5 HTML语法基础

1.5.1 HTML概述

HTML是Hyper Text Markup Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.1 语言

HTML作为一种超文本的标记语言，有指定的语法规则。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，使用HTML描述的文件，需要通过web浏览器HTTP显示出效果。

1.5.1.2 超文本

超文本是一种非线性形式的文本，它通过超链接将不同的文档或文档中的不同部分连接起来，允许用户在阅读时选择不同的路径。超文本可以包括动态内容，所以它可以随着用户的操作改变，或者随着其他因素改变例如时间、空间。当然，超文本也能插入多媒体来丰富形式，它可以加入图片、声音、动画、影视等内容。

<a href="https://www.xx.com">访问xx网站</a>

1.5.1.3 标记

也称为标签，用“<”和:">"括起来，是用来划分网页的元素，以形成文本的布局、文字的格式以及五彩缤纷的画面。标签通过某块信息为段落或标题等来标识文档的某个部分，在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签都由"<" ">"符号以及一个字符串组成。如<head>,<body>等，而浏览器的作用就是显示出文字、图片、动画和播放声音。这些标签符号用"<标签名字属性>"来表示。标签又分为单标签和双标签：
单标签指的是只存在一个标签的写法，例如：<meta><input>等
双标签指的是存在一堆标签的写法，例如：<head></head>,<body></body>等。

注意，在双标签中第一个为起始标签，第二个标签为结束标签，结束标签需要在左尖括号后加上一个关闭符"/"。

1.5.2 HTML基本结构

<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
<html>：根标签，包含整个页面的所有内容，其lang属性通常用来指定页面语言，如lang="zh-CN"表示中文。
<head>：头部标签，里面包含了页面的元数据，如：
- <meta charset="UTF-8">：指定页面的字符编码为UTF-8，以支持中文等多语言显示。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：优化移动设备上的显示效果。
- <title>：定义浏览器标签页上显示的页面标题。
<body>：主体标签，包含页面的所有可见内容，如文本、图片、视频等。

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

HTML文档标签的格式为
<html>HTML文档的内容</html>
<html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到
遇到</html>

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

HTML文档头标签<head>..</head>
HTML文档包括头部（head)和主体(body)。HTML文档头标签的格式为
<head>头部的内容</head>
文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或
者文本文件地址、创作信息等网页信息说明。

1.5.2.3 文档编码

文档编码格式如下:

<meta charset=" utf-8"/>

对于中文网页的设计者来说，用户一般使用GB2312。

<meta charset=" GB2312"/>

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

若是想要改变背景颜色，则可以通过下面代码来执行

1.6 创建HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GB2312" />
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		<link rel="stylesheet" href="/css/index.css" type="text/css"/>
		<script type="text/javascript" src="/js/index.js"></script>
		<title>我的第一个网页</title>
	</head>
	<body>
		<p>我的第一个网页<p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

1.7.1 <title>标签

title标签是页面标题标签，它将HTML文件的标题显示在浏览器的标题栏中，这个标签只能应用于<head></head>之间，<title>标签是对文件内容的概括

<head>
    <title>我的网页标题</title>
</head>

1.7.2 <meta>标签

1.7.2.1 keywords

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

例如想找小说

<meta name="keywords" content="都市、玄奇、恐怖、热血..."/>

1.7.2.2 description

description 用来告诉引擎网站主要的内容。

1.7.3 <link>标签

,link rel="stylesheet" href="外部样式表文件名.css "type="text/css"/>

注意！！如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一枚<link>标签

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

HTML5使用标签进行注释

1.8.2 特殊符号

空格：&nbsp；

大于：&gt；

小于：&lt；

引号：&quot；

版权号：&copy；

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

习题2.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页学习</title>
		<style type="text/css">
			p{
				text-align: left;
			}
			</style>
	</head>
	<body bgcolor="#99ff" text="blue">
		欢迎大家一起开始学习网页制作
		<!--水平分割线-->
		<hr size="5" color="#ff3333">
	</body>
</html>

习题3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>百度搜索</title>
		<style type="text/css">
			p{
				text-align: left;
			}
			</style>
	</head>
	<body bgcolor="#ffff33">
		<!--水平线-->
        <hr size="5" color="#0033ff">
        <p>欢迎使用百度搜索<p>
		<img src="D:/微信图片/baidu.jpg">

	</body>
</html>