动态网页制作基础
制作动态网站，就要会一点程序语言，如果完全不懂程序语言，要制作动态网站确实有点难，如果你想要买书学会做的话，基本上找不到一本这样的书，尽管书中的“出版说明”啊“写在前面”呵，哪都是假的，而且书中还留有联系方式，并有邮箱地址，可是当你按照书本操作了大半天，费了很大的劲，根本不能达到书本上所说的结果，结果令你大失所望。于是你就想到了书本中还留有联系方式，发过邮件吧，可是你别忘记了，尤于肉包子打狗，不管你发多少邮件，尤于肉包子打狗有去无回时，你才会大乎上当，原来这个骗子是要你买他的书写得好听而已，所以你如果真想学会制作动态网站，要先学点程序语言，或者找个懂点程序语言的老师，否则一时半会是做不好的。动态网站的语言无非是：HTML、CSS、ASP。
依照我的进度安排，这一次要和大家聊的是HTML语言，可以说这是网页制作最基础基石，无论你是从事网页美工还是程序设计，要想把一张网页在你的手中控制的随心所欲，你就必须要熟练掌握并运用好HTML语言！
HTML语言是网页的源代码程序语言，我们平时看到的花花绿绿形形色色的网页，它并不是想象中的电影海报那样，将文字和图片简单拼接，像贴画一样就可以贴成的，而是通过HTML源程序来具体规定网页的排版方式、网页显示的内容。
HTML的全名是HyperText Markup Language，直译就是超文本标记语言。从这个名字上来讲，一、它是文本，它在网上就是以文本的方式传输的；二、它是一种标记性质的语言。这个深入之后就可以体会到所谓“标记”的真正含义。
在这里我只介绍基础的简单的HTML语言不详细展开，可以参考详细的书籍资料。
HTML编辑的方法很简单，正因为是文本，你可以用任何文本编辑工具来编写HTML源代码，比如最常用的就是WINDOWS的“记事本”。当然，在你保存的时候不能保存为单纯的文本文件，而要选择保存为“网页”，在“记事本”中你可以这样保存，选择“另存为”，保存类型为“任何文件”，文件名加上“.html”或者“.htm”的扩展名就行了，这两个扩展名表示文件类型为网页文件。
HTML是一种文本语言，所以，你所输入的文本信息，是会直接显示给大家看到的，而标记的部分，只是作为限定文本显示的方式而已，我们举个例子：
首先我们希望在网页上显示“欢迎”这两个字，那要怎么它才会显示呢？很简单，你直接在网页文件中写入“欢迎”，这两个字就会显示出来了，但是我们并不满足，我们希望这两个字能够显示的显眼一点，所以可以用一个加粗的标记：<b>欢迎</b>，再打开网页的时候我们发现欢迎已经显示为加粗了。我们用了一对<b>...</b>标签来限定了“欢迎”这两个字的显示方式——加粗，几乎所有的HTML标记都是这个样子，不同的标签其实就是对文本不同方式的限定而已，所以，到这里我想你能明白为什么把它叫做“标记语言”的原因了吧
加粗标签<b>...</b>只是我们最常用的也是最简单的一个标签而已，不同功能的标签，我们根据功能来分类：顶级标签、文本标签、图片媒体标签、表格排版标签、框架标签还有表单标签，不明白不要紧，我会一一介绍给大家的。
今天我们就来谈谈这顶级标签
顶级标签是用来说明文档的基本信息用的，主要包括这几个：<html>...</html>、<head>...</head>、<body>...</body>
1.<html>...</html>标签
作用：说明该文档是一个HTML网页文档
这个是最主要的标签，它表示其中的内容是HTML源代码，所以，其他的源代码、标签都位于这个标签以内。
2.<head>...</head>
作用：头部标签，这个标签用来存放文档的基本信息，仅仅作为说明用的，所以在网页中一般都不显示
3.<body>...</body>
作用：这个才是主题部分，是网页内容显示，所有网页中的主体内容均包含在这个标签以内。
仍然用我们刚才的那个例子，一个显示加粗的欢迎字样的网页，可以这样来编写：
type=text/javascript>window.attachEvent("onload",function (){AutoSizeDIV('CODE_7643')})
<html>
<head>
</head>
<body>
<b>欢迎</b>
</body>
</html>
将它保存为“.htm”扩展名的文件，双击运行看看，效果就有了哦！其实网页就是这样的标签堆成的：）
可能大家注意到<head></head>这个头部标签没有包含任何内容，我们刚才说过这个是用来存放说明网页基本信息用的，如何存放呢，这个标签还有这么几个子标签可以使用，分别说明文档的信息：
1.<title>...</title>
网页的标题，它会显示在浏览器的标题栏上面，例如我们可以这样写：
window.attachEvent("onload",function (){AutoSizeDIV('CODE_6266')})
<title>欢迎页面</title>
这几个字就会在标题栏上面显示出来了。
2.<link>
这个标签是没有结束标记的（</link>），这是怎么回事呢？因为这个标签只是引进外部的文件，它并不包含任何文本内容，我们来看一个例子：
window.attachEvent("onload",function (){AutoSizeDIV('CODE_6635')})
<link rel=stylesheet href="style.css" type="text/css">
这个大概有点复杂了，我解释一下：标签中的内容叫做标签的属性，它是具体来说明标签包含的内容的，其中的内容不在网页上面显示，上面这一句的意思是从外部导入一个叫做style.css的文件（href表示的内容），它的文件类型是stylesheet（样式表，以后会知道的，rel表示的内容），类型为CSS样式表（type表示的内容）。这里我们从外部导入了一个文件，并且可以在网页中使用这个导入的文件（这是后话了），导入过程中我们没有需要网页显示出任何文本的信息，所以自然就不用结束标签了，以后有几个标签也是没有结束标签的，比如换行标记“<br>”
3.<meta>
作用：原数据
这个标签用来说明文本的一些基本的数据资料，也是不在网页中显示出来的，所以，也没有结束标记。
举个例子：
window.attachEvent("onload",function (){AutoSizeDIV('CODE_4316')})
<meta name="keywords" lang="en" content="web,page">
这里就说明了一个网页关键字，name表示这个标签的内容（可以任意设置只要自己看得懂表示什么意义就行了），lang表示语言（en是英语的意思），content则是关键字的内容，有什么作用呢？这个是提供给搜索引擎查找数据用的，搜索引擎查找关键字的时候，首先就是扫描这个标签内容，所以，要是为了让搜索引擎更快的搜索到你的网页，这个设置就很重要拉～这只是一个应用而已，meta标签非常有用，以后具体遇到运用的地方再详细展开咯！
头部标记主要的子标签就这3个，注意运用的话将会启到很好的作用。
除了子标签以外，头部标签中还经常包括一些功能性的程序模块，比如JAVA SCRIPT代码段等等，这些运用都是十分常用的，以后会详细说明。
我们把今天所学的内容汇总起来编写成一个网页：
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css">
<meta name="keywords" lang="en" content="web,page">
</head>
<body>
<b>欢迎您登录本公司网站，本公司有实实在在的动态网站教程，如有需要者请与我们联系。</b>
</body>
</html>
好了，把这个页面保存，命名为index.htm，按F12快捷键预览，看看效果。
另外本公司致力于安防监控工程，公司主要从事监控安装，防盗报警、门禁考勤、道闸、网络布线等，并承接监控工程和承包监控施工，有专业的上海监控施工队，并承接监控故障维修，塔吊监控，工地塔吊监控，远程监控，无线监控等弱电工程项目。欢迎各位朋友帮助介绍，深表感谢！本公司有专业的技术人员及施工队伍，在施工质量、施工速度、及绝对保证原材料质量的可靠性能。另外本公司还有专业的网站程序开发人员，在制作网站、网站优化这一方面有着独特的开发技能。欢迎各位朋友介绍及光临。
|
