作者joehuang92 (++红色世界++)
看板b95902HW
标题HTML的一些小讲解(网页结构、页框)
时间Tue Dec 26 19:41:17 2006
<网页结构>
<html></html>宣告html语言
网页的最基底，宣告整个原始码是以html撰写。这个标签里面则是两个主要子标签<head>
和<body>。
<html>属性：
class:CSS类别选取器定义样式用
id:元素名称
scroll:是否显示卷轴，可用值有三种：
true:显示(预设值)
no:不显示
auto:页面内容超过可视范围就显示
version:表示此页面的html版本
<head></head>档头
这个标签内可以摆放html的各种档头，包括css样式表连结、网页标题、javascript程
式码...等等。
<body></body>内容
这个标签内摆放网页的实际内容，也就是会显示在视窗里的东西。
<body>属性：
alink:滑鼠经过连结时，文字显示颜色
link:连结的初始颜色
vlink:使用过的连结文字颜色
background:背景图片
bgcolor:背景颜色
bgproperties:设定背景图片是否可以随卷轴卷动，可用值若设定成"fixed"则不能。
bottommargin:设定网页下方边界的高度，预设值是15像素
leftmargin:设定网页左方边界的位置，预设为10像素
rightmargin:设定网页右方边界的位置，预设值也是10像素
topmargin:设定网页上方边界的位置，预设值15像素
class:CSS类别选取器定义样式用
dir:文字方向
id:元素名称
scroll:设定卷轴是否出现，值是布林值
style:CSS样式定义规则
text:设定网页的文字初始颜色
<title></title>网页标题列
标签内的文字会成为浏览器标题列文字，必须要放在<head>标签之中。
<style></style>CSS样式表
里面可以摆放一份针对此网页的CSS样式表，一样必须放在<head>之中。
<link>连结外部文件
单独使用，用来把外部的文字档连结进网页，从外部连结进网页的文件就等於是html
的一部份，最常用的方式是连结css样式表。这个标签必须放在<head>中。
<meta>档头资讯
单独使用，可以允许添加额外的http档头资讯，也必须放在<head>中。这些资讯可能对
伺服器端的处理工作会很有帮助。
<meta>属性：(较庞杂，会讲的比较仔细)
content:与http-equiv或name共用。
http-equiv:给予伺服器端额外指示，可用值有下列几种，分述如下：
content-language:指定文件语系
ex:<meta http-equiv="content-language" content="en-US">
content-script-type:指定预设程式语言
ex:<meta http-equiv="content-script-type" content="text/javascript">
content-style-type:指定预设样式表语言
ex:<meta http-equiv="content-style-type" content="text/css">
content-type:指定浏览器与伺服器间的媒体类型
ex:<meta http-equiv="content-type" content="text/html">
default-style:指定预设的样式表
ex:<meta http-equiv="default-style" content="stylesheet">
expires:设定文件的保存日期或时间
ex:<meta http-equiv="expires" content="WED, 20 Jan 1999 15:20:30 GMT">
refresh:指定网页重新整理的频率(重新整理的时候可以使用另一个URL)
ex:<meta http-equiv="refresh" content="3;http://tw.yahoo.com">
window-target:指定视窗或页框作为连结目标(content可用值请参考前面发的文)
ex:<meta http-equiv="window-target" content="_top">
name:加入其他类型的非档头资讯，通常会是搜寻引擎找网页的关键。可用值如下：
author:标明文件作者
copyright:非正式的版权宣告
description:文件描述，有些搜寻引擎可能会搜寻这个值
generator:此文件的开发工具及其版本
keywords:以逗点分开的文件关键字，有些搜寻引擎也使用这个值
......
<script></script>程式指令
包含要在页面上执行的指令，通常必须加上language属性标明语言。
<script>属性：
defer:程式是否在页面载入时执行，值是布林值
event:指定一个事件，事件发生时触动程式
id:元素名称
language:指定程式语言，可以是javascript,vbs,xml...等等的语言
src:从外部连结程式码，值是程式码档案路径
<!DOCTYPE>指定文件类型定义
出现在html标签之外，指定套用於文件的文件类型定义(DTD)。(好好我也不太懂)
ex:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- ->注解
这个就是html文件中的注解，在这个标签内的文字将不会被显示。
<页框>
<frameset></frameset>页框组
页框简单说就是将一个网页分割成几个部份，并在每个部份自成一网页，有很多网站都是
用这样的技术的。我们先看看这样的一个网页：
╔═╦═════════╗
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
╚═╩═════════╝
这样的网页由几个网页构成？两个？
不对，是三个。
我们假设左方的页框连结到A.htm，右边的页框则连结到B.htm。那麽第三个网页就是将他
们串在一起的网页mother.htm，图示就像这样
╔═╦═════════╗
║ ║ ║←mother.htm
║ ║ ║
║ ║ ←──B.htm
║ ║ ║
║←──A.htm ║
║ ║ ║
╚═╩═════════╝
其中A和B是之前讨论的网页，所以原始码没有什麽特别的，重点是mother.htm的原始码。
一般，我们把mother.htm叫做页框组，它的原始码只定义了页框的结构，并连结两个网页
最後形成一个页框的形式。
这里给出这个mother.htm原始码：
<html>
<head></head>
<frameset cols="20%,*">
<frame name="frameA" src="A.htm">
<frame name="frameB" src="B.htm">
</frameset>
</html>
首先我们注意到这个网页的<body>标签被<frameset>标签取代了，也就是说，页框组所
在的网页中不存在body标签。
然後我们注意到标签的内部，<frameset>标签中给定了两个子标签<frame>，分别连结到
两个不同的网页。
分割的方式动用到frameset标签的cols属性，也就是水平分割。
接下来先讲解一下frameset标签的属性：
<frameset>属性：
border:框线粗细(分开网页的框线)
bordercolor:框线颜色
class:CSS类别选取器定义样式用
cols:水平分割页框
rows:垂直分割页框
frameborder:是否显示边框，值为0或no，表示不显示，或是1或yes，表示显示边框(预设)
framespacing:在页框间增加额外空间，单位为像素
id:元素名称
style:CSS样式定义规则
其中特别把cols跟rows这两个属性拿出来解释：
页框的分割像是切东西，对一张纸，在中间划一刀，再横着划一刀，就得到四张纸了。
cols跟rols的值就是在何处切割，譬如：
<frameset cols="50%,50%">
就等於是从50%宽度的地方直切一刀，於是网页就会是水平两个一样宽的页框。又或是
<frameset cols="100,20%,*">
就是从左边开始100像素位置切一刀，然後总网页再数20%宽度切一刀，剩余的部份自成一
网页(*表示剩余空间)。这样会有三个页框。
切割的动作可以是横直一起完成：
<frameset cols="50%,*" rows="50%,*">
这样，就会是四个由中间分开的页框。
那如果做成这样的网页呢？
╔═╦═════════╗
║ ╠═════════╣
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
╚═╩═════════╝
这时候则可以把右边视为一个框架组，原始码如下：
<html>
<head></head>
<frameset cols="100,*">
<frame name="frameleft" src="left.htm">
<frameset rows="20,*">
<frame name="framerighttop" src="righttop.htm">
<frame name="framerightbot" src="rightbot.htm">
</frameset>
</frameset>
</html>
即在右边的框架内建立子框架组再对其切割。
框架的第二个重要议题是连结，常常可以看到某些框架网页，开了连结出现在其他的框架
(预设是在自己的框架内，因为框架内的网页是独立的)。如果设定错误，连结不但不会
出现在想要的地方，更可能出现多重框架(试想在框架里面另外在开一次框架)。
回想之前的<a>连结标签，有一个属性是target，就是用来指定连结的页框所用。
那时候的可用值有这些：
_blank:新网页载入到新视窗
_media:新网页载入到媒体工具列的html内容区域
_parent:文件载入到母框架组
_search:文件载入到浏览器搜寻页
_self:文件载入到自己的框架
_top:文件载入到最上层的框架组视窗
现在可以在增加一个值，拿上面的例子来说，假设我想在左方框架页的选单点选连结，
出现在右下角的框架中。指令码就是这样：
(left.htm内容)
...
<a href="xxx" target="framerightbot">
framerightbot就是当时指定给右下角框架的name属性值，所以说，target的值也可以是
该网页中任意一个框架的name值。
现在再来探讨<frame>标签的属性：
<frame>属性：
allowtransparency:指定是否显示页框的透明层次，值是布林值
bordercolor:外框颜色
class:CSS类别选取器定义样式用
frameborder:是否显示外框框线，用法同frameset的frameborder属性
height width:框架的宽高(不建议使用)
id:元素名称
marginheight marginwidth:建立页框上下/左右宽度，单位是像素
name:该框架页的名称，对连结来说很重要
noresize:没有指定值，这个属性让指定页框页无法改变大小
scrolling:设定是否显示卷轴，可用值同html的scroll属性
src:该框架页连结的网页
style:CSS样式定义规则
<noframes></noframes>无框架提示文字
如果使用者的浏览器不支援框架，会显示这个标签内的文字。当然，里面也可以是一段
指向无框架的网页的连结。这个标签可以放在html标签下的任何位置。
<结语>
这些大约就是html中比较常见的观念跟标签用法了，不过这些东西只能写出一个给人看的
网页，并不能与使用者互动或传输资讯。
就一个网页来说，html只是其中的内容，CSS则是网页的样式，Javascript则是网页的
互动，php等语言则是作者跟使用者的资料传输桥梁。一个最完整的网页，撇开php不谈
，通常都会有其他的三项东西。
之後，应该还会对这些其他的内容做一些解说...尽快罗XD
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 59.121.11.252
※ 编辑: joehuang92 来自: 59.121.11.252 (12/26 19:46)
1F：推 waterwinds:网页的互动= =? 12/26 23:14