HTML语法详解及完全学习
1、网页架构<HTML>
<HEAD>
<TITLE>网页制作教学</TITLE>
<Meta>
</HEAD>
<BODY>
BODY之间则为主要语法所在，也是网页的主要呈现部分。
</BODY>
</HTML>
2、分隔标签
1）换行 <br>
2) 段落 <p></p>
3) 分割线标签 <hr color="颜色" width="宽度" sise="厚度" align="水平对齐位置" >
利用分割标签可以产生一条横分割线。
3、排版标签
1）<center>这是置中</center>
除了文字，对于图片、表格， 任何可以在显示在网页中的东西都可以置中。
2）向右缩排标签<blockquote>要缩排的文字</blockquote>
将包围的文字，全部往右缩排。加一组标签，缩排一单位，加两组标签，缩排两单位
3）保存原始格式标签<pre>文字内容 </pre>
将包围起来的文字排版、格式，原封不动的呈现出来。
4、标题标签
1）标题标签
<h1>标题一</h1>
;
;
<h6>标题六</h6>
2）字体大小标签
<font size=1>字体一</font>
：
：
<font size=1>字体七</font>
3）字型变化标签
（1）粗体 <b>粗体</b>
（2）斜体 <i>斜体</i>
（3）底线 <u>底线</u>
（4）上标 <sup>上标</sup>
（5）下标 <sub>下标</sub>
（6）打字机 <tt>打字机</tt>
（7）闪烁 <blink>闪烁</blink>（ie没效果）
（8）强调 <em>强调</em>
（9）加强 <strong>加强</strong>
（10）范例 <samp>范例</samp>
（11）原始码 <code>原始码</code>
（12）变数 <var>变数</var>
（13）定义 <dfn>定义</dfn>
（14）引用 <cite>引用</cite>
（15）所在地址 <address>所在地址</address>
4) 文字颜色
<font color="文字颜色">文字</font>
5） 文字字型设定
<font face="字型名称">文字</font>
eg：<font face="楷体_GB2312">楷体_GB2312</font>
6）对齐方式
align="对齐方式"
right 右对齐
left 左对齐
top 上对齐
bottom 下对齐
middle 中间
absmiddle 绝对中间
7）常用符号
（1）不可拆分的空格 &nbsp
（2）小于 < &lt;
（3）大于 > &gt;;
（4）and & &amp;
（5）英镑 ₤ &pound
（6）欧元 € &euro;
（7）注册 ® &reg;
（8）版权 © &copy;
（9）引号 " &quot;
(10) 人民币 ￥ &yen;
5、影像标签
<img src="boy.gif" alt="说明文字" align="对齐方式"
border="边框大小" height= "高度" width="宽度" >
6、背景标签
<body bgcolor="背景色" background="背景图片">
7、内文、连接文字颜色
<body text="颜色码" link="颜色码" vlink="颜色码" alink="颜色码">
text="颜色码"若没有特别去设定文字颜色的话，浏览器会自动显现您所设定的颜色
link="颜色码"没按下链接之前，只要有链接的地方就会出现制定的颜色码
alink="颜色码" 按下链接是瞬间所呈现的颜色
vlink="颜色码" 已经被按过的链接所呈现的颜色
8、超链接
<a href="" target="参数">
框窗名称 只有在框架或frame中采用。
利用此标签，来指定连接的内容显示到哪一个框窗中。
_blank 将连结的画面内容，开在新的浏览视窗中。
_parent 将连结的画面内容，当成文件的上一个画面。
_self 将连结的画面内容，显示在目前的视窗中。
_top 会将整个画面重新显示成连结的画面内容。
9、表格
<table width="宽度" height="高度"border="线条粗细"
BORDERCOLORLIGHT="亮面颜色设定F"BORDERCOLORDARK="暗面颜色设定"
CELLPADDING="表格内文距离格线的距离" CELLSPACING="表格栏位格线之间的距离" >
<tr bgcolor="背景色">
<td align="对齐方式">
</td>
</tr>
</table>
10、序列标签
1）无序列表
（1）
<UL>
<LI>姓名：杰克升
<LI>生日：1974/11/21
<LI>星座：天蝎座
</UL>
（2）
<UL TYPE="CIRCLE">
<LI>姓名：杰克升
<LI>生日：1974/11/21
<LI>星座：天蝎座
</UL>
TYPE="形状名称"属性来改变其符号形状，一共有三个选择：
DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）
2）有序列表
（1）
<OL>
<LI>姓名：杰克升
<LI>生日：1974/11/21
<LI>星座：天蝎座
</OL>
从1开始
（2）
<OL TYPE="A" START="H">
<LI>姓名：杰克升
<LI>生日：1974/11/21
<LI>星座：天蝎座
</OL>
从H开始
11、表单的标签
1）单行文字输入
<FORM>
姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
</FORM>
其有下列可设定之属性：
NAME="名称"，是设定此一栏位的名称，程式中常会用到。
SIZE="数值"，是设定此一栏位显现的宽度。
VALUE="预设内容"，是设定此一栏位的预设内容。
ALIGN="对齐方式"，是设定此一栏位的对齐方式，
TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）
RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）
BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）
MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。
2）单选核取表单
<FORM>
性别：
<INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">男
<INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">女
</FORM>
其有下列可设定之属性：
NAME="名称"，是设定此一栏位的名称，程式中常会用到。
VALUE="内容"，是设定此一栏位的内容、值或是意义。
ALIGN="对齐方式"，是设定此一栏位的对齐方式
CHECKED，是设定此一栏位为预设选取值。
3）复选核取表单
<FORM>
喜好：
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书
</FORM>
其有下列可设定之属性：
NAME="名称"，是设定此一栏位的名称，程式中常会用到。
VALUE="内容"，是设定此一栏位的内容、值或是意义。
ALIGN="对齐方式"，是设定此一栏位的对齐方式
CHECKED，是设定此一栏位为预设选取值。
4）密码表单
<FORM>
请输入密码：<INPUT TYPE="PASSWORD" NAME="INPUT">
</FORM>
其有下列可设定之属性：
NAME="名称"，是设定此一栏位的名称，程式中常会用到。
SIZE="数值"，是设定此一栏位显现的宽度。
VALUE="预设内容"，是设定此一栏位的预设内容，不过呈现出来仍是星号。
ALIGN="对齐方式"，是设定此一栏位的对齐方式
MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。
5）按钮
<FORM>
<INPUT TYPE="SUBMIT" VALUE="送出资料">
<INPUT TYPE="RESET" VALUE="重新填写">
<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
</FORM>
其有下列可设定之属性：
NAME="名称"，是设定此一按钮的名称。
VALUE="文字"，是设定此一按钮上要呈现的文字。
ALIGN="对齐方式"，是设定此一栏位的对齐方式
6）多行文字输入
<FORM>
请输入您的意见：<BR>
<TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
</FORM>
其有下列可设定之属性：
NAME="名称"，是设定此一栏位的名称。
WRAP="设定值"，是设定此一栏位的换行模式。设定值有三种：
OFF（输入文字不会自动换行）
VIRTUAL（输入文字在萤幕上会自动换行，不过若是使用者没有自行按下ENTER换行，
送出资料时，也视为没有换行）
PHYSICAL（输入文字会自动换行，送出资料时，会将萤幕上的自动换行，视为换行效
果送出）。
COLS="数值"，是设定此一栏位的行数（横向字数）。
ROWS="数值"，是设定此一栏位的列数（垂直字数）。
7）下拉列表框
<FORM>
您喜欢看书吗？：
<SELECT NAME="LIKE">
<OPTION VALUE="非常喜欢">非常喜欢
<OPTION VALUE="还算喜欢">还算喜欢
<OPTION VALUE="不太喜欢">不太喜欢
<OPTION VALUE="非常讨厌">非常讨厌
</SELECT>
</FORM>
其有下列可设定之属性：
SIZE="数值"，是设定此一栏位的大小，预设值为1，若是您的选项有四个，然后您将
SIZE设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。
MULTIPLE，是设定此一栏位为复选，可以一次选好几个选项。
12、框架标签
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="a.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="b.htm" NAME="2">
<FRAME SRC="c.htm" NAME="3">
</FRAMESET>
</FRAMESET>
</HTML>
其它参数说明：
<FRAMESET COLS="120,*" frameborder=0 framespacing=5>
1）COLS="120,*"
就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很
简单只要写成 COLS="30,*,50" （数字随便您自己调整啦！），依此类推，四个
以上当然就是四组数字啦！
2） ROWS="120,*"
就是横向切割画面，也就是将画面上下分开，切法同上。
3）frameborder=0
设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。
边框是无法调整粗细的。
4） framespacing=5
表示框架与框架间的保留空白的距离，以免看起来太挤。
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize
marginhight=2 marginwidth=2>
1） SRC="a.htm"
设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生
错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路
径要写清楚）
2）NAME="1"
设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名
称随你高兴取名。
3） scrolling="no"
设定是否要显示卷轴，YES是要显示卷轴，NO是无论如何都不要显示，AUTO是视情
况显示。
4） noresize
设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以
很容易的拉动框架，改变其大小。
5） marginhight=2
表示框架高度部份边缘所保留的空间。
6） marginwidth=2
表示框架宽度部份边缘所保留的空间。
target=框窗名称
eg：<A HREF="d1-1.htm" target=3>显示内容</A>
13、背景音乐
<bgsound src="music.mid">
可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid">
14、Meta Tag 的简介
1）<Title>All Products Online</title>
这虽说不是meta的一部份，但是也不可忽略，总长度不要超过85个Character (约10
个字)。
2）<meta http-quive="content-type" content="text/html; charset=iso-8859-1">
说明网站的格式及编码方式，另外这个功能也可以拿来说明网站的名称。
3）<meta name="keyword" contents="关键字一, 关键字二, 关键字三, …..">
铲明整个网站的关键字，关键字间用逗点隔开，总长度最好不要超过1000个
Character (约44个字)。
4）<meta name="description" contents="整个网站的描述….">
铲明整个网站为何吸引人的地方，可用逗点隔开，总长度最好不要超过200个
Character (约15个字)，若文章真的太长，可以切割成两个部分，较不重要的部分
置入下一个Description。
5）<meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW">
此功能是要给搜寻引擎使用的，是要用来告诉Spider哪些网页是要去撷取的或不用
去撷取的，一般都设定成All(内定值)。
页:
[1]