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

天天向上㊤

已于 2024-09-11 21:24:57 修改

阅读量765

点赞数 24

文章标签：网络 html

于 2024-09-11 21:23:34 首次发布

本文链接：https://blog.csdn.net/2301_81123034/article/details/142079145

版权

1.1 认识网页网站

1.1.1 网页、网站

1.1.1.1 网页

就是一个后缀名通常为HTML，htm，php，aspx，jsp的文件。其本质就是将文字+图片+超链接以一种和谐，美观的方式排列在页面上。

1.1.1.2 网站

就是由网页及其其他资源文件组成的组织网站常见的目录结构：index.html/images/css/js等。

1.1.1.3 常用术语

网页设计有其专业术语，如：Internet、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等，其中最为重要的是URL、FTP、超链接。

1.1.2 静态网页和动态网页

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（红、绿、蓝），是常见的主色调。网页常见的色彩搭配是在RGB的基础上采用相近色配色或近似色配色搭配。

1.4 web前端技术简介

1.4.1 初识WEB前端

WEB前端是指平常上网浏览的网页。

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

14.2.1 HTML

控制页面结构

14.2.2 CSS

控制页面样式

14.2.3 JavaScrip

一种动态技术，使静态网页转为动态网页。

1.4.3 前端开发工具

14.3.1 浏览器

谷歌浏览器（GoogleChrome）

14.3.2 编辑器

HBuilderX

14.3.3 切图软件

photoshope/fireworks

1.5 HTML语法基础

<!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>
		我的第一个网页<!--内容-->
		<a href="http://www.baidu.com">百度一下</a><!-- --><!--超链接到百度一下-->
	</body>
</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>

15.1 HTML概述

15.1.1 语言

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

15.1.2 超文本

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

1.5.1.3 标记

html5文件是由一系列成对出现的元素标签嵌套组合而成。

1.5.2 HTML基本结构

是由一系列元素和标签组成。

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

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

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

HTML的头部内容，内容可以是标题名或文本文件地址、创建信息等网页信息说明。

1.5.2.3 文档编码

如<meta charset="utf-8" />。为了浏览器正确解释和通过W3C代码正确，所有HTML文档必须声明它们所使用的编码语言。

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

定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中真正要显示的内容都包含在主题中。

1.6 创建HTML文档

使用HBuilder新建项目：

创建项目名称为FirstHX，设置项目所在的位置确定即可：

打开项目为FirstHX的文件夹：

在index.html编写代码

代码完成后，使用Chrome浏览器开始"运行" 即可：

1.7 网页头部标签

1.7.1 <title>标签

是页面标题标签。

1.7.2 <meta>标签

是元信息标签，在HTML中是一个单标签。

1.7.2.1 keyword

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

1.7.2.2 description

用来告诉搜索引擎网站主要的内容

1.7.3 <link>标签

用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表。

1.7.4 <script>标签

是脚本标签，用于HTML文档定义客户端脚本详细的。

1.8 HTML5文档注释和特殊符号

1.8.1 注释

1.8.2 特殊符号

常用特殊符号及对应字符实体
特殊符号	字符实体	示例
空格	&nbsp；	银河商务&nbsp；&nbsp；热线：400-111-1111
大于（>）	&gt；	3&gt；2
小于（<）	&lt；	2&lt；3
引号（”）	&quot；