我们每天都在与网页打交道,那么什么是网页呢?网页是保存在服务器上的一个文件,可以在浏览器里显示,有两种类型的网页:静态网页和动态网页。
静态网页的扩展名为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>
<META charset="gb2312">
<STYLE type="text/css">
body{background: #000000}
h1{color:red}
p{color:white;font-size:16px}
</ STYLE >
<SCRIPT type="text/javascript">
function showMess(){
console.log("这是一个示例网页!");
}
</SCRIPT>
</HEAD>
<BODY onl oad="showMess()">
<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>标签:用来指定一段文字。
好了,网页基础知识就介绍完了。