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

莹之夏

已于 2024-09-19 21:20:59 修改

阅读量984

点赞数 13

文章标签：笔记经验分享其他

于 2024-09-12 09:20:01 首次发布

本文链接：https://blog.csdn.net/2403_87158639/article/details/142052908

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：网页是由HTML编写，通过WWW网传输且被浏览器编译后的文件

网站是多个网页的集合，网站是有独立域名,独立存放空间的内容的集合

常用术语：internet www 浏览器 URL IP 域名 HTTP FTP 发布站点超链接客户机和服务器

1.1.2静态网页和动态网页

静态网页：是指客户端的浏览器发送URL请求给WWW服务器，通常由纯粹的HTML/CSS语言编写

动态网页：能够根据不同浏览者的请求来显示不同的内容可分为客户端动态网页与服务器动态网页

1.2 网页的基本构成元素

1.2.1.文本：

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2.图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。

1.2.3.超链接

超链接技术是WWW流行起来的最主要原因。

1.2.4.音频和视频

音频文件可使网页效果多样化中常用的音频格式有mid 和 mp3文件。

1.2.5.交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。

1.2.6.其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、
JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱
乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局

根据不同的网页制作风格，可以将网页分为个人网页和商业网页。商业网页内容丰富、信息量大，一般都有统一的布局;个人网页风格比较多样、内容比较专一、形式比较灵活.更容易创造出美感。

1.3.2 网页色彩搭配

（1）网页安全色。
（2）网页中色彩的表达。
（3）常见的色彩搭配:采用相近色配色，采用近视色配色。

1.4 Web前端技术简介

1.4.1 初识WEB前端

Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念。

1.4.2 WEB前端开发的三大核心技术：HTML CSS语言 JavaScript 语言

1.4.3 前端开发工具:浏览器网页编辑器切图软件

1.5 HTML 语法基础

1.5.1 HTML概述

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

1.5.1.1 语言

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

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。

1.5.1.3 标记

1.5.2 HTML 基本结构

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

<! DOCTYPE html>
<html>
     <head>
            <meta charset=" utf-8"/>
<title>HTML 文档结构</title>
</head>
<body>
    <p>HTML 文档结构由head,body 标记组成</p >
     <h3>标题3</h3>
  </body>
</html>

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

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

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

HTML文档包括头部(head)和主体(body)。

1.5.2.3 文档编码

文档编码格式如下:<meta charset=" utf-8" />

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

HTML文档主体标签的格式为<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。

1.6 创建 HTML 文档

(1)使用HBuilder新建项目。依次点击选择“文件”→“新建”→“Web项目”)
(2)创建项目名称，设置项目所在的位置确定即可

(3)打开项目
(4)编写网页代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="hxy"/>
		<meta name="description" content="hxy"/>
		<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>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。
<title>标签位于<bead>与</head>中，用于标示文档标题，格式如下
<title>标题</title>

1.7.2 <meta>标签

（1）keywords

(2)descriiption

1.7.3 <link>标签

link标签最常用的是用来链接CSS样式文件，格式如下:<link rel="stylesheet"href="外部样式表文件名.css"type=" text/css” />
如果需要同时引用多个外部样式表文件，则需要为每一个CSS 样式文件单独使用<link>标签。

1.7.4 <script>标签

1.8 HTML5 文档注释和特殊符号

1.8.1 注释

为增加HTMLS文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5使用<!-..-->标签为文档进行注释，注释标签以“标签支持单行和多行注释。

1.8.2 特殊符号

由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的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 align ="center">临江仙·送钱穆父</h2>
		<p>宋 苏轼</p >
		<!--使用<br/>的效果-->
		<p>一别都门三改火,天涯踏尽红尘。<br />
		依然一笑作春温。<br />
		无波真古井,有节是秋筠。<br />
		惆怅孤帆连夜发,送行淡月微云。<br />
		尊前不用翠眉颦。<br />
		<font color=" brown"face="微软雅黑">人生如逆旅,我亦是行人。</font></p >
		<img src="img/e3a524bca9430dce6b83be573cad8a7.jpg"><!--水平线-->
		<hr size ="2"color=" black" width =" 100%"/>
		<p align =" center">网页制作教程Copyright&copy;广东南方职业学院</p >
	</body>
</html>