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

最新推荐文章于 2024-09-29 16:44:46 发布

冰岛塔里木

最新推荐文章于 2024-09-29 16:44:46 发布

阅读量568

点赞数 25

文章标签： html5 java

本文链接：https://blog.csdn.net/2401_85799009/article/details/142092273

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：网页是有HTML编写，通过web网传输，且被浏览器编译后供用户获取信息的页面文件。

web站点也称网站，网页则是web站点的基本信息单位，网站是多个网页的集合，网站是独立域名独立存放空间的内容的集合。

常用术语：

Internet：由各种不同类型的计算机网络连接起来的全球性网络

WWW：访问web服务器中的网页

URL：统一资源定位符

IP：网站协议

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

HTTP:超文本传输安全协议，是一种使用SSL加密的HTTP协议，用于保护网站数据传输的安全。

FTP：文件传输协议，通过协议，可把文件从一个地方传到另一个地方

发布：上传网站

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

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

1.1.2 静态网页和动态网页

静态网页每个网页中都有一个固定的URL，网页URL以htm、HTML、shtml等常见形式为后缀，而且不含有问号

1. 内容固定：静态页面在服务器上存储的是HTML文件，用户访问时，服务器将HTML文件发送给用户的浏览器，用户看到的页面内容是固定的。
2. 加载速度快：因为内容固定，静态页面通常加载速度较快。
3. 易于优化：搜索引擎优化（SEO）相对容易，因为页面内容不经常改变。
4. 适合简单信息展示：适合展示不经常更新的信息，如公司介绍、产品说明等。

动态网页以数据库技术为基础，可以大大降低网站维护的工作量，采用动态网页技术的网站内容可变

1. 内容可变：动态页面不是在服务器上预先生成HTML文件，而是通过服务器上的应用程序（如PHP、Java、Python等）在用户请求时动态生成。
2. 交互性强：可以实现用户登录、数据检索、在线购物等交互功能。
3. 加载速度相对较慢：因为需要服务器处理请求并动态生成内容，所以加载速度相对慢。
4. 适合复杂应用：适合需要与用户互动、频繁更新内容的应用，如论坛、新闻网站、社交媒体等。

1.2 网页的基本构成元素

1.2.1.文本：文本具有体积小，网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。
1.2.2.图片和动画：图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。
1.2.3.超链接：超链接技术是WWW流行起来的最主要的原因。
1.2.4.音频视频：音频文件可使网页效果多样化，网页中常用的音频格式有mid 和mp3。
网页中的视频文件一般为0v格式，它是一种基于FlashMX的视频流格式，具有文件加载速度快等特点，是网络视频格式的首选。
1.2.5.交互表单：网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。
1.2.6.其他常见元素：网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、 JuvaScripi与 ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局：

1.3.2 网页色彩搭配

网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合网页安全色是红色，绿色和蓝色。网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。

1.4 Web前端技术简介

1.4.1 初识WEB前端

1991年8月6日，来自欧洲核子研究中心的科学家Tim Bemers-Lee，启动了世界上第一个可以正式访问的网站(http://ino.cerm.ch)，标志着万维网时代的到来。
Web前端开发是从网页演变而来的，名称上有明显的时代特征。

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

HTML：是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。

CSS：是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSs能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

JavaScript：JavaScript是运行在浏览器上的脚本语言。简称JS，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言

1.4.3 前端开发工具

浏览器：浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种车件。目前主流的浏览器有IE浏览器、Chrome浏览器、Firefox 浏览器、Safari 浏览器和Oper浏览器等

网页编辑器：Adobe Dreamweaver （梦想编辑者，或织梦）Sublime Text(界面布局非常有特色，它支持文件夹导航图和代码编略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。)
NotePad ++（名称来源于Windows系列操作系统自带的记事本 NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术，它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。）EditPlus（是由韩国SangilKim(ES-Computing)公司发布的一款文字编辑器、支持HTML，CSS，JavaScript，PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能。）
HBoilder（是由DCloud(数字天堂)推出的一款支持HTML5的 Web开发 IDE。HBuilder主要用于开发HTML,JS(JavaScript)和CSS，同时配合 HTML的后端脚本语言如PHP和JSP也可以适用，还有前端的预编译语言如 less以及人们钟爱的markdown 都可以良好地进行编辑。）

切图软件：切图软件是对UT设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。

1.5 HTML语法基础

1.5.1 HTML概述

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

1.5.1.1 语言

HTML作为一种超文本语言，有指定的语法规则超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。

1.5.1.2 超文本

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

1.5.1.3 标记

标签分为单标签和双标签两大类:
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head> </head>,<body> </body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”
HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和 Web浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开 Web 网页文件，提供查看Web资源的客户端程序。

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。

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

HTML文档格式为<html>HTML文档的内容</html>

1.6 创建HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="淘宝"/>
		<meta name="description" content="xxx"/>
		<title>荣导师第一个网页项目</title>
		<link  rel="stylesheet"<a href="css/index.css"type="text/css"/>
		<script> src="js/index.js" type="text/javascript" </script>
	</head>
	<body>
		<!--单行注释内容-->
		<p>这是我第一个网页项目</p>
		<!--第一行注释内容
			第二行注释内容
			第三行注释内容
			第四行注释内容
			第五行注释内容
		-->
		<p>我是内容xxxx</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

1.7.1 <title>

标签用于定义文档的标题

1.7.2 <meta>

标签是一个位于<head>部分的辅助性标签，用于提供关于HTML文档的元数据。这些元数据不会显示在页面上，但对机器是可读的，并且可以被浏览器、搜索引擎和其他Web服务使用

1.7.2.1 keywords

关键词是搜索引擎优化（SEO）中的核心概念，它指的是用户在搜索引擎中输入的词语或短语，用于查找他们需要的信息

1.7.2.2 description

用于描述网页的内容。这个描述通常显示在搜索引擎结果页面（SERP）上，位于页面标题下方，是页面SEO的关键组成部分。description 标签的正确使用方式是在 <head> 部分中，通过 name 属性设置为 "description"，并在 content 属性中填写网页的简要概述

1.7.3 <link>标签

是一个用于定义当前文档与外部资源关系的元素，其最常见的用途是链接样式表（CSS）。这个标签可以指定多种类型的外部资源，包括CSS文件、图标等

1.7.4 <script>标签

script src(指定文件路径）type（指定文件类型）

1.8 HTML5文档注释和特殊符号

1.8.1 注释

HTML5文档中的注释使用特定的格式来添加，注释内容不会被浏览器解析和显示。注释的格式是：

<!-- 这里是注释内容 -->

1.8.2 特殊符号

在HTML中，某些字符是预留的，如小于号（<）和大于号（>），这些字符在HTML中具有特殊的含义，用于定义标签。因此，如果直接在HTML文档中使用这些字符，浏览器会误认为它们是标签，从而导致解析错误。

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

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