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

东隅412

已于 2024-10-01 17:38:46 修改

阅读量1k

点赞数 24

文章标签： html

于 2024-09-11 20:06:51 首次发布

本文链接：https://blog.csdn.net/2302_81317864/article/details/142078926

版权

1.1 认识网页和网站

1.1.1 网页和网站

网页和网站的区别：网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称Web页。Web站点也称为网站，WWW信息是由无数的Web站点组成的，网页则是Web站点的基本信息单位。

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

1.1.2 静态网页和动态网页

静态网页通常由纯粹的HTML/CSS而动态网页还有JavaScript

HTML为网页的动态部分，CSS为网页的静态部分，静态网页通常由纯粹的HTML\CSS语言编写。

动态网页是无论网页本身是否具有视觉意义上的动态效果，只要采用JavaScript技术都称为动态网页。

1.2 网页的基本构成元素

1.2.1.文本

体积小，网络传输速度快等特点，可方便浏览和下载，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快吸引起浏览者的注意，但却能准确地表达信息的内容和含义。

1.2.2.图片和动画

使网页更生动直观，可以传递文本不能表达的信息，具有强烈的视觉冲击力。

1.2.3.超链接

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

1.2.4.音频视频

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

视频文件一般为flv格式，具有文件小，加载速度快等特点，是网络视频格式的首选

1.2.5.交互表单

个人信息收集或填写

1.2.6.其他常见元素

如悬停按钮、JavaScript与ActiveX等各种特效，它们不仅可以点缀网页，使网页更加的活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局
1.3.2 网页色彩搭配

网页安全色称为RGB（红、绿、蓝），是常见的主色调。

网页中色彩的表达

常见的色彩搭配：采用相近色配色，采用近似色配色

1.4 Web前端技术简介

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

HTML：控制页面结构

CSS：页面样式

JavaScript：可添加动态功能

1.4.3 Web前端开发工具

浏览器：谷歌浏览器 GoogleChrome

编辑器：HBuilderX

1.5 HTML语法基础

1.5.1 HTML概述

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

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

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

单标签指的是只存在一个标签的写法，如<meta><input>等

双标签指的是存在一对标签的写法，如<head></head>,<body></body>等

1.5.2 HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>第一个网页</p>
		<p>2023软件1班</p>
	</body>
</html>

HTML文档是由一系列的元素和标签组成的

HTML文档分为头部和标签两部分

"百度一下"的代码在下一行但运行是没有换行呢？在Java和C++中都有自己的换行符，在HTML中也不例外，它的换换行符是<p></p> ,如下图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" /><!--用来描述搜索引擎网页的字符集-->
		<meta name="keywords" content=""/><!--用来描述搜索引擎网页的关键词-->
		<meta name="description" content=""/><!--用来描述搜索引擎网站主要的内容-->
		<link rel="stylesheet" href="/css/index.css" type="text/css"/><!--用来链接css文件-->
		<script type="text/javascript" src="/js/index.js"> </script><!--用来链接js文件-->
		<title>第一个网页</title><!--网页标题-->
	</head>
	<body>
		<p>我的第一个网页</p><!--内容-->
		<a href="http://www.baidu.com">百度一下</a><!-- --><!--超链接到百度一下-->
	</body>
</html>

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

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

每个文档均以<html>开始，以</html>结束

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

HTML文档包括头部（head）和主体（body）

HTML文档头标签的格式为<head>头部的内容</head>

其内容可以是标题名或者文本文件地址、创造信息等网页信息说明

1.5.2.3 文档编码

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

文档声明的编码应该与实际编码一致

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

HTML文档主体标签的格式为<body>网页的内容</body>

主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

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

1.7.2 <meta>标签

name属性主要有以下两个参数：keywords(关键词)和description(网站内容描述)

1.7.2.1 keywords

keywords用来告诉搜索引擎网页使用的关键字，设置如下<meta name="keywards"content=" "/>

1.7.2.2 description

description用来告诉搜索引擎网站主要的内容，设置如下<meta name="description"content=" "/>

1.7.3 <link>标签

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

1.7.4 <script>标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<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>
		<p>2023软件1班</p>
	</body>
</html>

1.8 HTML5文档注释和特殊符号

1.8.1 注释

标签支持单行和多行注释

1.8.2 特殊符号

如果要在页面中显示特殊符号，就必须使用相应的HTML代码表示，特殊符号对应的HTML代码被称为字符实体

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

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords"content="宋词,苏轼"charset="utf-8"/>
		<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>
		<p>一别都门三改火，天涯踏进红尘。<br/>
		依然一笑作春温。<br />
		惆怅孤帆连夜发，送行淡月微云。<br />
		尊前不用翠眉颦。<br />
		<font color="brown"face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
		<img src="img/临江仙.jpg"/>
		<hr size="2"color="black"width="100%"/>
		<p align="center">网页制作教程Copyright&copy;某学院</p>
	</body>
</html>