静态网页的扩展名一般是什么（快速了解网页基础知识）

分类：IT知识时间：2023-06-14 07:36:05

我们每天都在与网页打交道，那么什么是网页呢？网页是保存在服务器上的一个文件，可以在浏览器里显示，有两种类型的网页：静态网页和动态网页。

静态网页的扩展名为html或htm，例如：index.html或index.htm。动态网页的扩展名为asp、aspx、jsp、php等，例如：index.aspx或index.php。静态网页在浏览器里的显示不会变，动态网页在显示之前，服务器可以根据浏览器传递过来的值进行相应处理，再把处理后的结果发给浏览器显示，也就是说动态网页在浏览器的显示是可变的。例如：一个显示商品信息的网页，用户可以输入感兴趣的商品名称，然后单击查询按钮，那么浏览器会将商品名称发给服务器，接着服务器从数据库中查询相应的商品，并把查询到的商品返回给浏览器，最后浏览器显示查询到的商品，例如下面的网页

如何编写网页文件呢？网页是使用一对<>符号括起来的HTML标签（HyperText Mark-up Language超文本标记语言）来编写的，这里简单介绍常见的HTML标签，详细完整的HTML标签请自行搜索。

下面列出一个简单网页文件的HTML代码：

<HTML>

<HEAD>

<TITLE>这是一个示例</TITLE>

body{background: #000000}

h1{color:red}

p{color:white;font-size:16px}

</ STYLE >

function showMess(){

console.log("这是一个示例网页！");

}

</SCRIPT>

</HEAD>

<H1>这是下面文字的标题</H1>

<P>这是一段文字，还可以使用CSS样式来描述，让其用不同的格式来显示。</P>

</BODY>

</HTML>

在浏览器中打开将显示如下结果：

我们来详细分析以上网页的内容

一、<HTML>标签

用来告之浏览器<HTML>及</HTML>标签之间的内容是一个HTML文档。

二、<HEAD>标签

<HEAD>及</HEAD>用来定义描述数据以及所需资源（样式或脚本）的引用。其中可以包含以下标签：

<TITLE>标签：用来描述网页标题（将在浏览器标题栏显示）

<STYLE>标签：用来描述嵌入的CSS样式，样式定义格式为：名称{属性:值}，名称可以为已有的标签或自定义的名称，例如：body{background: #000000}指定网页内容背景色为黑色（对<BODY>标签起作用）, h1{color:red}指定<H1>标题文字为红色，p{color:white;font-size:16px}指定<P>段落文字颜色为白色，大小为16px。注意：<STYLE>标签中定义的样式仅对当前HTML文档有效。如果想将定义的样式用于网站中其他的网页，需要将样式定义在一个css文件中，并在需要使用样式的网页中使用<LINK>标签进行引用，例如：<LINK rel="stylesheet" href="main.css">，其中rel指定<LINK>标签引用的是样式，href指定了样式文件路径，即存放位置。

<META> 标签：提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。< META > 标签定义的数据并不会显示在页面上，但却会被浏览器解析。charset指定网页使用的字符集。

<SCRIPT> 标签：用于定义可以在浏览器中执行的JavaScript脚本，如果想将脚本在多个网页中引用，可以将脚本定义在一个单独的文件中，然后在需要使用的网页中用<SCRIPT>标签引用，例如：<SCRIPT type="text/javascript" src="main.js"></SCRIPT>，其中type指定脚本类型，src指定脚本存放位置。

三、<BODY>标签

<BODY>标签定义网页中显示的所有内容，例如文本、超链接、图像、表格和列表等等。onload表示当页面加载完毕后执行onload指定的函数，此例中表示页面加载完毕后将执行showMess()函数，我们可以用onload来指定游戏的主循环，这样页面加载完毕后将自动进入游戏的主循环执行。

<H1>标签：用来指定标题，共有六个类似的标签，<H1>、<H2>、<H3>、<H4>、<H5>、<H6>

<P>标签：用来指定一段文字。

好了，网页基础知识就介绍完了。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.com/it/5538.html

关注下头条号后，请私信将免费分享给你一份web前端资料！
立即关注

大家都在看