📄 3.aspx
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>第二节 利用源代码开发网页</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="Microsoft Theme" content="none, default"></head>
<body>
<b><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">
<p ALIGN="CENTER">第三节</font><font SIZE="3" COLOR="#0000ff"> </font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">利用源代码开发网页</p>
</font></b><font FACE="宋体" LANG="ZH-CN" SIZE="3">
<p ALIGN="JUSTIFY">要开发一些具有交互功能的动态网页，必须要用到源代码编程，这里对网页开发的源代码进行介绍。</p>
<p ALIGN="JUSTIFY">上面我们已经看到，</font><font size="3">网页</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">的源文件就是一个普通的文本文件。可以使用一般的编辑器（如</font><font size="3">EDIT</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">，记事本等）来编辑文件，保存以后，用浏览器来浏览效果。</p>
</font><font size="3">
<p ALIGN="JUSTIFY">Html</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">自</font><font size="3">1990</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">年起被</font><font size="3">WWW</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">广泛使用。</p>
</font>
<hr>
<b><font SIZE="3" COLOR="#0000ff">
<p ALIGN="JUSTIFY"></font><font COLOR="#0000ff" size="5">2.1 html</font><font FACE="宋体" LANG="ZH-CN" COLOR="#0000ff" size="5">文件结构</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff"></p>
</font></b><font FACE="宋体" LANG="ZH-CN" SIZE="3">
<p ALIGN="JUSTIFY"></font><font FACE="宋体" LANG="ZH-CN" SIZE="3" color="#0000FF">2.1.1
基本结构</font><font FACE="宋体" LANG="ZH-CN" SIZE="3"></p>
<p ALIGN="JUSTIFY">下面是HTML文档的简单示意图，结构化注释语言，结构严谨清晰。</p>
<ul>
<ul>
</font><font SIZE="3"><p ALIGN="JUSTIFY"><font color="#FF0080"><html></font></p>
<blockquote>
<p ALIGN="JUSTIFY"><font color="#FF0080"><head></font></p>
<blockquote>
<p ALIGN="JUSTIFY"><font color="#FF0080">头部元素</font></p>
</blockquote>
<blockquote>
<p ALIGN="JUSTIFY"><font color="#FF0080"><title>页面标题</title></font></p>
</blockquote>
<p ALIGN="JUSTIFY"><font color="#FF0080"><head></font></p>
<p ALIGN="JUSTIFY"><font color="#FF0080"><body></font></p>
<blockquote>
<p ALIGN="JUSTIFY"><font color="#FF0080">正文内容</font></p>
</blockquote>
<p ALIGN="JUSTIFY"><font color="#FF0080"></body></font></p>
</blockquote>
<p ALIGN="JUSTIFY"><font color="#FF0080"></html></font></p>
</ul>
</ul>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">
<p ALIGN="JUSTIFY">语句写法不分大小写，可以混写。</p>
<p ALIGN="JUSTIFY">可以看出，</font><font SIZE="3">html</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">是由英文单词或字母和</font><font SIZE="3"><</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">，</font><font SIZE="3">></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">，</font><font SIZE="3">/</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">等组成的。英文单词或字母，称为元素，</font><font SIZE="3"><,>,/</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">等称为标识符。有些元素是成对出现的，即</font><font SIZE="3"><</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">元素</font><font SIZE="3">></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">……</font><font SIZE="3"></</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">元素</font><font SIZE="3">></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">。前面一个表示元素开始起作用，后面一个表示这种元素的作用结束。有些元素是单个的。就好比，在英语单词里，有些只有一般现在时，表示一个瞬间的动作；有些则是现在进行时，表示一个可以持续的动作，也可以理解为</font><font SIZE="3">WPS</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">里的定义字体、字号等，要加入控制符。</p>
<p ALIGN="JUSTIFY">有些元素具有某些属性，类似与自变量，需要赋值。</p>
</font><b><font SIZE="3" COLOR="#0000ff">
<p ALIGN="JUSTIFY">2.1.2 html </font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">元素</p>
<ul>
</font></b><font SIZE="3"><p ALIGN="JUSTIFY">html</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">元素用在文档的开头和结尾，它标识</font><font SIZE="3">HTML</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">文档。</p>
<p ALIGN="JUSTIFY">说明：</font><font SIZE="3"><html>………</html></p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3"><p ALIGN="JUSTIFY">其中包含</font><font SIZE="3">HTML</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">文档的头部和正文部分。</p>
</ul>
</font><font SIZE="3">
<p ALIGN="JUSTIFY"></font><font color="#0000FF" SIZE="3">2.1.3 </font><font FACE="宋体" LANG="ZH-CN" SIZE="3" color="#0000FF">文档的头部</font><font FACE="宋体" LANG="ZH-CN" SIZE="3"></p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">
<p ALIGN="JUSTIFY">（</font><font SIZE="3" COLOR="#0000ff">1</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">）</font><font SIZE="3" COLOR="#0000ff"> HEAD</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">元素</p>
</font><font SIZE="3">
<p ALIGN="JUSTIFY">HEAD</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">中包含</font><font SIZE="3">html</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">的一些常规信息，一般并不显示在浏览器的主页上。它包含一些标识元素：</font><font SIZE="3">TITLE</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">，</font><font SIZE="3">NEXTID</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">，</font><font SIZE="3">LINKM</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">，</font><font SIZE="3">BASE</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">等。最常用的是</font><font SIZE="3">TITLE</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">。</p>
</font><font SIZE="3">
<p ALIGN="JUSTIFY"><title></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">和</font><font SIZE="3"></ title></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">之间的内容出现在浏览器的顶部标题栏中，作为当前主页的标题。之间的字符长度不要超过</font><font SIZE="3">64</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">个字符。</p>
<p ALIGN="JUSTIFY">语法：</font><font SIZE="3"><head>………</head></p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">
<p ALIGN="JUSTIFY">（</font><font SIZE="3" COLOR="#0000ff">2</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">）</font><font SIZE="3" COLOR="#0000ff"> TITLE</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">元素</p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">
<p ALIGN="JUSTIFY">每个</font><font SIZE="3">HTML</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">文档都应该有一个标题，它不是正文的一部分，只是显示在浏览器窗口中标题栏中的一段信息，这便于浏览者初步了解文档的内容。</p>
<p ALIGN="JUSTIFY">语法：</font><font SIZE="3"><title> </font><font FACE="宋体" LANG="ZH-CN" SIZE="3">标题的文本</font><font SIZE="3"> </title></p>
</font><b><font SIZE="3" COLOR="#0000ff">
<p ALIGN="JUSTIFY">2.1.4 </font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">文档正文</p>
</b>
<p ALIGN="JUSTIFY">（</font><font SIZE="3" COLOR="#0000ff">1</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">）</font><font SIZE="3" COLOR="#0000ff">BODY</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">元素</p>
</font><font SIZE="3">
<p ALIGN="JUSTIFY">HTML</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">文档的正文部分，一般包括在</font><font SIZE="3">BODY</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">元素的开始与结束标记中。</p>
<p ALIGN="JUSTIFY">语法：</font><font SIZE="3"><body>……….</body></p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">
<p ALIGN="JUSTIFY">说明：可以加背景，如</font><font SIZE="3"><body
background="#ffff88">……</body></p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">
<p ALIGN="JUSTIFY">（</font><font SIZE="3" COLOR="#0000ff">2</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">）标题</p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">
<p ALIGN="JUSTIFY">章节标题可以使用不同的字号，一共六级，从</font><font SIZE="3"><h1></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">到</font><font SIZE="3"><h6></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">，字号逐渐减小。要成对出现。如：</font><font SIZE="3"><h1></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">北京大学电教中心</font><font SIZE="3"><h1></p>
</font>
<p ALIGN="JUSTIFY"><font SIZE="3"> 语法：<h1>……</h1></font></p>
<p ALIGN="JUSTIFY"><font FACE="宋体" SIZE="3" color="#000000">居中元素</font></p>
<p ALIGN="JUSTIFY"><font FACE="宋体" SIZE="3" color="#000000">
语法：<center>........</center></font></p>
<p ALIGN="JUSTIFY"> </p>
<p ALIGN="JUSTIFY"><font face="宋体" lang="ZH-CN" size="3" color="#800040">下面我们举一个较复杂的个人主页的例子(在“\\newnt\教师讲义\尚俊杰\课堂素材\webpage”下有）。</font></p>
<p ALIGN="JUSTIFY"><font FACE="宋体" LANG="ZH-CN" SIZE="3"><a HREF="源代码示例/个人主页.htm" target="new">(单击此处浏览实际效果)</a> <a href="源代码示例/个人主页源文件.htm" target="_blank">（单击此处查看源文件）</a></font></p>
<hr>
<b><font SIZE="3" COLOR="#0000ff">
<p ALIGN="JUSTIFY"></font><font COLOR="#0000ff" size="5">2</font><font FACE="宋体" LANG="ZH-CN" COLOR="#0000ff" size="5">．</font><font COLOR="#0000ff" size="5">2 </font><font FACE="宋体" LANG="ZH-CN" COLOR="#0000ff" size="5">文本</p>
<p></font></b><font FACE="宋体" LANG="ZH-CN" SIZE="3" color="#000000">可以直接写入文字，写入文字的字体、颜色、大小都是默认的，如要设置，就要用到字体元素了。</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff"><b></p>
</b>
<p>2.2.1 字体元素
<ul>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3"><p ALIGN="JUSTIFY">语法：</font><font SIZE="3"><font>………</font></p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3"><p ALIGN="JUSTIFY">例如：</font><font SIZE="3"><font color="#0000FF" face="</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">隶书</font><font SIZE="3">" size="7"></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">我的个人主页</font><font SIZE="3"></font></p>
</ul>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3" COLOR="#0000ff">
<p ALIGN="JUSTIFY">2.2.2 字符修饰元素</p>
</font><font FACE="宋体" LANG="ZH-CN" SIZE="3">
<p ALIGN="JUSTIFY">
成对出现，对其中的文字起修饰作用。常用的有：</p>
</font>
<blockquote>
<blockquote>
<font SIZE="3"><p ALIGN="JUSTIFY"><em>……</em> 强调（斜体）<br>
<strong>……</strong> 特别强调（黑体）<br>
<i>……</i> 斜体<br>
<b>……</b> 黑体<br>
<u>……</u>下划线</font><font FACE="宋体" LANG="ZH-CN" SIZE="3"></p>
</font>
</blockquote>
</blockquote>
<blockquote>
<font FACE="宋体" LANG="ZH-CN" SIZE="3"><p ALIGN="JUSTIFY">语法：</font><font SIZE="3"><b></font><font FACE="宋体" LANG="ZH-CN" SIZE="3">文本</font><font SIZE="3"></b></p>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -