html基础知识
HTML 超文本标记语言，描述网页的。跟其他编程语言不同，可通过文本编辑器来创建。
HTMl文件格式：
文件是.html或者.htm后缀的文件。
HTMl超文本标记语言书写格式要符合W3C（万维网联盟）标准。（字母小写）
HTML完整的结构：
<html>
<head>
<title>标题</title>
声明css或者引入js、css以及其他内容
</head>
<body>
页面显示的内容
</body>
</html>
<html>……</html>:表示文件类型为HTML文档
<head>……</head>:文档头部标记,表示设置文档描述及其他不在web网页上显示的信息
<head>……</head>内部经常使用标签说明:
<link>:提供将现行文档与其他文档或实体关联的信息。
<isindex>:指明在服务器上提供文档可以检索的索引
<style>……</style>:允许包含样式表(CSS)信息
<meta>:主页头部元素标签,描述不包含在标准HTML里的文档信息.
<meta name="keywords" content="">向搜索引擎说明你的网页的关键词
<meta name="author" content="你的姓名 ">告诉搜索引擎制作你的站点的作者
<meta http-equiv="content-type" content="text/html;charset=UTF-8">设置网页语言字符集
<meta http-equiv="content-language" content="zh-cn">设置网页语言字符集
<meta http-equiv="refresh" content="m;url=’文件名’">浏览器将在m秒后,自动转换到某文件
<title>……</title>:文档标题,即在标题栏中显示的题目
<body>……</body>:当主题标记,记在网页内要现实的题目.
<body>……</body>用于定义页面内容的显示效果.
bgcolor=”颜色值”:设置背景色
background=“url”这是背景图片的文件名。
alink:活动时连接颜色
link:链接的颜色
vlink:连接后的颜色
text:文本的颜色
属性解释:
align=left/right/center:设置在网页中的左右对齐方式。
valign=top/middle/botton/baseline:设置在网页中的上下对齐方式。
<address>……</address>:地址风格一般用与文档的开始或结尾处,并以斜体格式显示文本。
标记：
标题文字标记：<hn>....</hn> : n的取值为:1―6,1最大,6最小;1-6级标题。
常用段落标记：
注释标记:其格式为:<!- - 注释内容(不局限一行，不执行该代码) - ->
换行标记:<br />或者是<br>
强制换段标记,格式为: 文字<p>,相当于两个<br>
设置段落标记,格式为:<p>文字</p>
预格式化标记:<pre>…</pre>
位置控制标记,格式为:<div align=”对齐方式”>文本或图像</div>
我们可将div认为是容器，默认是纵向排列的。
水平线标记:<hr>：其属性有:
size:水平线的宽度.
width:水平线的长度,可用占平宽度的百分比或像素值来表示
heigth:水平线的高度,可用占平宽度的百分比或像素值来表示
align:水平线的对齐方式,有left/right/center三种
noshade:线段无阴影属性,为实心线段
字体标记：
<font size=大小 face=字体 color=颜色 >要显示的内容</font>
size:设置字体大小,取值1--7
face:设置字体,如:隶书,宋体,幼圆,楷体等.
color:设置文字颜色
<b>……</b>:设置字体加粗
<tt>……</tt>:标准打字机字体
<i>……</i>:设置斜体字
<strike>……</strike>:设置带删除线的文字
<u>……</u>:设置带下划线的文字
<sub>……</sub>:将文本作为下标显示
<sup>……</sup>将文本作为上标显示 ，例如：2的2次幂
<big>……</big>:大字体文本显示
<small>……</small>:小字体文本显示
<strong>……</strong>:加重显示字体
超链接标记
<a href="跳转的路径URL">显示的文本内容</a> 属性：name="" 相当于给该标签起名字。
例如：如果当前页面一个a标签跳转到指定当前页面另一个a标签所在位置：
<a href="#" name="name属性值A">A</a> <a href="#name属性值A">B</a>
target将链接的文件最终要显示的位置.其值为:
target=_blank:将链接的文件显示在一个新的窗口
target=_self:将链接的文件显示在本窗口
target=_top:将链接的文件显示在整个浏览器窗口
target=_parent:将链接文件显示在前一个窗口
target=”windowname”将链接的文件显示在指定的窗口
相对路径：相对某个文件，去找目标文件，不写具体的盘符
绝对路径：直接写具体的盘符文件夹路径
./同级路径的 ../跳出一层文件夹
图像标记
<img src=’url’name=”img1” width=100 height=100></img>
<image src=""/>
src=’url’设置图片的路径
name=图片的名字
width:设置图片的宽度
height:设置图片的高度
vspace:设置图片离网页顶端的空白距离
hspace:设置图片离网页左端的空白距离
alt:在浏览器尚未完全读入图像时,在图像位置显示的信息:
title:当鼠标指到图片时出现的信息.
border:设置图片边框的粗细,其值为数字.
相关序列表标记
定义无序列表标签：<ul><li>内容</li><li>内容</li><li>内容</li></ul>
Type=disk/circle/square:指定表项左端前面的符号类型.
有序列表标记:<ol start="3"><li>内容</li><li>内容</li><li>内容</li></ol>
type=""属性，指定该列表序号格式。可设定5种序号：数字、大小写英文字母、大小写罗马字母。
start=“”指定该了列表从几开始排列标示符。
自定义项目列表：<dl><dt>标题<dt>…<dd>内容<dd>…</dl>
表格标记：
<table>…</table>：定义表格。
<caption>…</caption>：定义表格标题。
<tr>…</tr>：定义表行。
<th>…</th>：定义表头。
<td>…</td>：定义表元（即表格的具体数据）。
<colspan=#>：#=从左数起，具有指定属性的列的列数。
<colalign=#>：#=left,right,center：设置所在列的左右对齐方式。
表格中边框的显示：（对table标签）
frame=box：全部显示四个边框。
frame=above：只显示上边框。
frame=hsides：只显示上下边框。
frame=lhs：只显示左边框。
frame=void：不显示任何边框。
表格中分隔线(Rules)的显示：(对table标签)
rules=all：显示所有的分隔线。
rules=rows：只显示行之间的分隔线。
rules=none：不显示任何分隔线。
其它属性有：
bgcolor：背景色 background=”图片名”
表格边框色彩的亮度控制：
bordercolorlight：表格边框亮度颜色值。
bordercolordark：表格边框阴影颜色值。
width=宽度 height=高度 border=边框粗细 bordercolor=”颜色值”
cellspacing=单元格间隙 cellpadding=设置表格边框与其内容空间的大小
colspan=跨列 rowspan=跨行
form表单常用标记
<form></form> 用于提交请求发送数据使用。
属性：name：定义表单的名字。
action：表单提交的目的地址。action=”url”。
method：表单的提交方式。其值有post/get。
target=”_blank/_self/_top/_parent”：指定表单提交结果文档最终要显示的位置。
enctype=”multipart/form-data”：来确保匿名上载文件的正确的编码
文本框：<input type=”text” value=”” name=””>
属性：
name="username" 相当于给该标签起名字，以后传输数据时使用。
value=""该属性是该标签真实的值；
readonly 该属性，指定该标签是只读。
size：定义文本框的宽度，单位是单个字符宽度：如：size=”5”。
maxlength="10" 定义最多输入的字符数
（如下两个标签任何标签都有该属性）：
id="" 唯一标示该标签，页面上的id，不允许重复。
class="" 以后css会使用该属性，相同的class属性的标签认为是一组
文本域:<textarea name="">输入的文本</textarea>
textarea多行多列输入元素，即多行多列文本框。
textarea基本属性：
name：定义多行文本框的名称。
cols：定义多行文本框的宽度，单位是单个字符宽度。
rows：定义多行文本框的高度，单位是单个字符宽度。
wrap：属性定义输入内容大于文本域时显示的方式，可选值如下：
virtual：允许文本自动换行。
off：不允许自动换行。
physical：让文本换行，当数据被提交处理时换行符也将被一起提交处理。
隐藏域：<input type="hidden" name="" value="">
基本属性：
name：设定提交信息时的提交名称，对应HTML文档的hidden中的name。
type：定义该输入元素为隐藏域。
密码框：<input type="password"> 同样有文本框相关的属性。
文件上传框：其格式：<input type=”file” name=” ”>
下拉列表：<select name="" id="" class="" >
<option value="真实值">文本内容</option>
<option value="真实值" selected >文本内容</option>
<option value="真实值">文本内容</option>
</select>
selected 属性指定某个要选中的option,
disabled 该属性一般用在select标签、button按钮上面，让该标签不可以被使用（不可被点击）。
size：定义下拉选择框的行数。
multiple：设置滚动菜单，属性表示可以多选，如果不设置本属性，那么只能单选。
单选框：<input type="radio" valu="1" name="sex"><input type="radio" value="2" name="sex">
属性：name,相同的name属性认为是一组。
复选框：<input type="checkbox" value="">
按钮：普通按钮：<input type="button" value="确定" >
form标签中专门用于提交form表单的提交按钮：<input type="submit" value="提交">
form标签中专门用于提交form表单的重置按钮：<input type="reset" value="重置">
框架标记
<frameset rows=”#,#”>
<frame src=”url” name=””><frame src=”url” name=””>
</frameset>
框架内的属性有：
rows=像素值：设定横向分割的框架数目 cols=像素值：设定纵向分割的框架数目
src=”url”：指定表示该框架对应的源文件。Name：指定框架名称。
border=像素值：设定边框的宽度。bordercolor=颜色值：设定边框的颜色
frameborder=yes/no 设定边框的有无，缺省值为yes。
noresize：设定框架不可编辑，即固定边框。
marginwidth=像素值，marginheight=像素值：设定页面空白区域的大小。
scrolling=yes/no：设置是否显示滚动条。
framespacing=像素值：窗口之间空白区域设置。
marginwidth=像素值/marginheight=像素值：设置页面空白的大小。
<html>
<head></head>
<frameset rows="10%,*">
<frame src="top.html" name="top" ></frame>
<frameset cols="15%,*">
<frame src="left.html" noresize name="left"></frame>
<!--
noresize该属性(只能使用在frame上)，让周围边框不可以拖拽。
frameborder="0" 或者yes或者no，0 此时不显示边框和no一致。>0相当于yes
不显示边框。可以用在frame或者frameset上；
-->
<frame src="content.html" marginwidth="150" name="center"marginheight="200"></frame>
</frameset>
</frameset>
</html>
嵌入窗口标记
<iframe src=url name=””>…………</iframe>将某个页面嵌入到指定页面中：
例如：
<html>
<head></head>
<body>
<iframe src="photos_detail.html" marginwidth="0" marginheight="0" style="width:820px;height:400px;" scrolling="no" frameborder="no"></iframe>
</body>
</html>
fieldset 标签：
<fieldset style="width:200" align="center">
<legend>标题</legend>
<p align="center">
<table >
<tr><td>第一列</td><td>第二列 </td></tr>
</table>
</p>
</fieldset>
制作多媒体页面
<embed src=#>：#=URL，本标记可以用来在主页中嵌入多媒体文本。
<bgsound src=#> #=WAV 文件的URL。
<bgsound loop=#> #=循环数。
<img src=”url.gif” dynsrc=”url.avi”>：插入视频剪辑。
start=#：设置何时播放。
#=fileopen时，表示链接到本页时开始播放该视频。
#=mouseover时，表示把鼠标移到播放区域时，开始播放该视频。
controls：用来在视频窗口下附加MS-WINDOWS的AVI播放控制条。
loop=#：设置播放次数。
loopdelay=#：设置播放延时，单位是毫秒。
在网页设置会移动的文字
<marquee onmouseout=start()>……</marquee>
direction设置文字移动的方向:其值可以有:up/down/left/right
behavior: 设置文字移动的方式:其值可以有:slide/alternate/scroll
loop: 设置文字移动的次数:默认值为无数次循环.
scrolldelay:设置文字移动的延时.
scrollamount:设置一次滚动的文本量
width：数值滚动内容宽度
height：数值滚动内容高度
vspace：数值滚动区域宽度
hspace：数值滚动区域高度
鼠标经过时滚动停止离开重新滚动
1. 向左滚动（默认）代码
<MARQUEE scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.</FONT></MARQUEE>
2. 向右滚动代码
<MARQUEE direction=right scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.</FONT></MARQUEE>
3. 向上滚动(多行文字在每行后加<br>标记)代码
<MARQUEE direction=up scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.<BR>It's just for you! <BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>
4. 向下滚动代码
<MARQUEE direction=down scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.<BR>It's just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>
5. 滚动次数3次（默认为无数次）代码
<MARQUEE loop=3 scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.<BR>It's just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>
6. 滚动延时代码
<MARQUEE scrollDelay=20 direction=up><FONT color=#ff6600>Welcom to my blog.<BR>It's just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>
7. 滚动文本量代码
<MARQUEE direction=up scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.<BR>It's just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>
8. 滚动文本大小(默认为原文字大小)代码
<MARQUEE scrollamount=2 scrolldelay=100 width=200 height=40><FONT color=#ff6600>Welcom to my blog.<BR>It's just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>
9. 滚动区域的宽度和高度(默认为原文字大小)代码
<MARQUEE hspace=100 vspace=50><FONT color=#ff6600>Welcom to my blog.<BR>It's just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>
10. 滚动的超链接代码
<MARQUEE behavior=alternate><A href=http://blog.cersp.com/14400.aspx target=blank>此处为链接文字说明(点击进入动感部落的博客)</A></MARQUEE>
11. 滚动的图片加超链接
<MARQUEE behavior=alternate><A href="http://blog.cersp.com/14400.aspx" target=blank><IMG src="http://blog.cersp.com/2006/04/13/121818.gif"></A></MARQUEE>
12. 来回滚动代码
<MARQUEE behavior=alternate scrollamount=2 scrolldelay=100><IMG src="http://blog.cersp.com/2006/04/13/121818.gif"></MARQUEE>
13. 鼠标经过时滚动停止代码（此效果在新浪博客中可能无效）
<MARQUEE behavior=alternate><A href="http://blog.cersp.com/14400.aspx" target=blank><IMG src="http://blog.cersp.com/2006/04/13/121818.gif"></A></MARQUEE>
div:
可以认为是一个容器：
<div align="center" style="border:solid 1px red;width:100px;height:100px;"></div>
style属性： 添加Css样式表，控制该标签的样式。 border:solid 1px red;表示边框，实心，1像素宽，红色。
本文出自 “扣小眸J2EE” 博客，谢绝转载！