HTML概述
HTML的基本概念
- HTML是Hyper Text Markup Language（超文本标记）的缩写。
- HTML不是一种编程语言，而是一种描述性的标记语言。
- 一个HTML文件名的后缀是.html或.htm。
- HTML的主要功能：
（1）格式化文本
（2）创建列表
（3）建立表格
（4）插入图片
（5）加入多媒体
（6）添加交互式表单 - 标记符又称标签，<>，用来控制网页内容显示的效果。
- 标记符后面加上的属性用来描述标识符对象的特征。例如：
<FONT color="red" size="3">lalala</FONT>
HTML的基本结构
HTML网页文件包括文件头和文件体两部分内容构成。
- HTML文件标记符
<HTML></HTML> HTML文件头标记符
<HEAD></HEAD>，<TITLE>...</TITLE>标识网页文件的标题，<META>提供文档的媒体信息，几种常用的方法如下：<META http-equiv="Content-Type" content="text/html;charset=gb2312">
标记网页的解码方式，即说明网页使用的文字和语言。
<META name="Keywords" content="关键字">
标记搜索引擎在搜索你的页面时所取出的关键字
<META name="Description" content="站点主要内容">
标记站点的主要内容
<META name="Author" content="作者名称">
标记文档的作者名称BODY文件体标记符
<BODY></BODY>
主要属性如下：bgcolor：标识HTML文档的背景颜色，默认白色。
background：设置HTML文档的背景图片，GIF、JPG等。
text：标识HTML文档的正文文字颜色。
超链接颜色：link、vlink、alink分别控制普通超链接、访问过的超链接、当前活动超链接的颜色。
topmargin和leftmargin：设置网页主体内容距离网页顶端和左端的距离。
HTML的基本语法规则
- UNIX系统扩展名必须为HTML
- HTML不区分大小写
- 多数HTML标记可以嵌套，但不可以交叉
- 源文件中的换行、回车、多个连续空格在显示中无效。换行
<BR>、分段<P></P>、多个空格应该使用多个 转义符号。 - 标点符号应使用英文半角。
文字与段落标记
标题字标记
<Hn align="对齐方式">标题文字</Hn>
n用来指定标题文字字号的大小，n可以取1~6的整数，1最大，6最小。
align用来设置标题的对应方式，有left、center、right、bottom、top。
文字格式标记
<FONT face="字体" size="字号" color="颜色"> 被设置的文字</FONT>
face可以为宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋GB2312、Times New Roman等。
size可以取1~7，1最小，7最大。
color是十六进制的RGB颜色码或者HTML给定的颜色常量名。
字型标记
常用的标记格式如下：
<B>...</B>：粗体
<I>...</I>：斜体
<U>...</U>：下划线
<STRIKE>...<STRIKE>或者<S>...</S>：删除字效果
<BIG>...</BIG>：使文字大小相对于前面的文字增大一级
<SMALL>...</SMALL>：使文字大小相对于前面的文字缩小一级
<SUP>...</SUP>：下标
<SUB>...</SUB>：上标
<BLANK>...</BLANK>：使文字显示闪烁效果
<TT>...</TT>：以等宽体显示西文字符
<CITE>...</CITE>：输出引用方式的字体，通常是斜体
<EM>...</EM>：强调文字，通常是斜体加黑体
<STRONG>...</STRONG>：强调文字，通常是斜体加黑体
段落标记和强制换行标记
- 段落标记
<P>段与段之间留一行空白 - 强制换行标记
<BR>放在一行的末尾 水平线标记
<HR>属性如下：align设定横线放置的位置，left、right、center
size设定线条粗细，以像素为单位，默认2
width设定线段长度，可以是绝对值（像素），也可以是相对值（百分比）
color设定线条颜色，默认黑色，用英文单词或#引导的十六进制数代码表示
noshade设定线条为平面显示，无三维效果，缺省则有阴影或立体效果
其他标记
- 分区显示标记
<DIV> 特殊符号标记
尖括号< >：
< >
双引号“”：" "
空格 ：
列表标记
无序列表标记
<UL>...</UL> 列表的开始和结束
<LI> 每个项目列表
- type表示每个项目前显示符号类型，disc实心圆，circle空心圆，square实心方块
有序列表标记
<OL>...</OL> <LI>
- type表示每个项目前显示序号类型
- start设置序号开始值，默认1
自定义列表标记
<DL>...</DL>
<DT> 每项自定义条目名称
<DD> 每条自定义条目说明，自动向右缩进
表格标记
<TABLE>...</TABLE>创建表格，属性如下：width，height，align(水平对齐方式)，background(背景图片)，bgcolor(背景颜色)，border(边框宽度，以像素为单位)，bordercolor(边框颜色)，bordercolorlight(边框明亮部分的颜色)，bordercolordark(边框昏暗部分的颜色)，cellspacing(单元格之间的间距)，cellpadding(单元格内容与单元格边界之间的空白距离的大小)
<CAPTION>...</CAPTION>对表格标题的说明，align属性<TR>...</TR>标记定义行，该标记中间的内显示在一行，只能放在<TABLE>...</TABLE>标记之间使用，属性如下：align(行内容的水平对齐)，valign(行内容的垂直对齐)，bgcolor，bordercolor，bodercolorlight，borderlocordark
<TH>和<TD>表示单元格标记，嵌套在TR中要创建跨多行、多列的单元格，只需在TH或TD中加入ROWSPAN或COLSPAN属性的属性值，表明表格中要跨越的行或列个数
< TH colspan=”列数”> < TD colspan=”列数”>
多媒体标记
图像标记 <IMG>
<IMG src="文件名" alt="说明" width="x" height="y" border="n" hspace="h" vspace="v" align="对齐方式">
音频标记 <BGSOUND>
<BGSOUND src="声音文件的URL地址" loop="播放次数">
视频标记 <EMBED>
<EMBED src="file_URL" height="value" hidden="hidden_value" autostart="auto_value" loop="loop_value"> </EMBED>
超链接标记
<A href="URL地址" target="打开窗口方式">显示的文本或图像</A> 属性：
href：设置要链接到的目标URL地址，在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径，否则应该写绝对路径
target：设置要显示超链接内容的窗口方式，可选值为_blank、_parent、_self、_top和框架名称
创建指向其他页面的超链接
- 同一目录
<A href="目标文件名">显示的文本或图像</A> - 下一级目录
<A href="子目录名/目标文件名">显示的文本或图像</A> - 上一级目录
<A href="../目标文件名">显示的文本或图像</A> - 同级目录
<A href="../子目录名/目标文件名">显示的文本或图像</A> - Internet
<A href="网址">显示的文本或图像</A> - E-mail
<A href="mailto:邮件地址">指向E-mail地址的超链接</A>
- 同一目录
//实例：创建指向其他页面的超链接
<HTML>
<HEAD>
<TITLE>创建指向其他页面的超链接</TITLE>
</HEAD>
<BODY>
<H4>同一目录下的网页文件</H4>
<A href="3-19.html">同一目录下的页面</A>
<H4>链接到Internet上的网页</H4>
<A href="http://www.baidu.com">百度</A>
<H4>图像超链接</H4>
<A href="http://www.sohu.com"><IMG src="sohu.jpg"></A>
<H4>E-mail超链接</H4>
<A href="mailto:qucc218@sohu.com.cn">qucc的邮箱</A>
</BODY>
</HTML>创建指向本页面中的超链接
要在当前页面内实现超链接，需要定义两个标记：- 超链接标记的格式为：
<A href="#记号名">显示的文本或图像</A> - 书签标记的格式为：
<A name="记号名">目标文本附近的字符串</A>
功能：单击显示的文本或图像，将跳转到“记号名”开始的文本
- 超链接标记的格式为：
实例：创建指向本页面中的超链接
<HTML>
<HEAD>
<TITLE>学生之家</TITLE>
</HEAD>
<BODY link=red alink=blue vlink=green>
<A name="0"></A>
<H2 align=center><B>欢迎来到“学生之家”</B></H2>
<FONT size=3 color=purple><CENTER>
<A href="# news">新闻</A>
<A href="# study">学习园地</A>
<A href="# health">健康信箱</A> <P>
</CENTER></FONT>
<A name="news"></A>新闻<BR>.........</BR>
<DIV align=right><A href="# 0">返回</A></DIV><P>
<A name="study"></A>学习园地<BR>.........</BR>
<DIV align=right><A href="# 0">返回</A></DIV><P>
<A name="health"></A>健康信箱<BR>.........</BR>
<DIV align=right><A href="# 0">返回</A></DIV><P>
</BODY>
</HTML>表单标记
表单是实现动态网页的一种主要的外在形式，是HTML页面与浏览器端实现交互的重要手段。它的主要功能是收集信息，当单击表单中的提交按钮时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序(如ASP、CGI)进行处理，处理后再将用户所需信息传送到客户端浏览器上，这样网页就有了交互性。
< FORM>< /FORM>标记
功能：创建表单
格式：<FORM name="form_name" method="method" action="url">...</FORM>
属性：
name设置表单名称
method用于指出采用何种HTTP方法来发送表单数据（GET/POST）
action定义表单处理程序的位置及名称。如< FORM? action=”counter.asp”>，当用户提交表单时，服务器将执行名为counter.asp的asp程序
< INPUT type=”“>标记
功能：定义一个输入区，此标记必须放在<FORM></FORM> 标记对之间
格式：<INPUT name="field_name" type="type_name">
属性：
name属性设置输入区域的名称，服务器通过name来获得该区域数据。
type属性设置输入区域的类型，常用type如下：
type属性值及格式 说明 < INPUT type=”Text” maxlength=”” size=”” value=”“> 单行输入文本区域 < INPUT type=”Password”> 输入密码域 < INPUT type=”File”> 文件域，通过表单上传文件 < INPUT type=”Checkbox” checked> 复选框。checked表示此项被默认选中 < INPUT type=”Radio” checked> 单选按钮框 < INPUT type=”Button”> 普通按钮 < INPUT type=”Submit” value=”“> 单击“提交”按钮，可以实现表单内容的提交 < INPUT type=”Reset” value=”“> 单击“重置”按钮，可以清楚表单的内容，恢复默认的表单内容设定 < INPUT type=”IMAGE” src=”“> 使用图像代替按钮的功能。src设置图片的路径 < INPUT type=”Hidden”> 隐藏输入域，用户不能在其中输入，用来预设某些要传送的信息 **隐藏表单，一般用来传递参数，而又不想显示在客户端，如网站购买产品，点击提交后通常会自动生成一个产品的订单编号，用于后台操作或其他，而此编号不必给客户看。隐藏域可用来实现HTTP的记忆功能。
< SELECT>< /SELECT>和< OPTION>标记
功能：下拉列表框/可以复选的列表
格式：
<SELECT name="name" size="value" multiple>
<OPTION value="value" selecteds>选项一
<OPTION value="value">选项二...
</SELECT> < TEXTAREA>< /TEXTAREA>标记
功能：创建一个可以输入多行的文本框
格式：<TEXTAREA name="name" rows="value" cols="value"></TEXTAREA>
框架标记
框架的作用就是把浏览器分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合在一起完成特殊的效果。
框架通常的使用方法是在一个框架中放置目录并设置链接，点击链接，内容显示在另一个框架中；或有时一个网页的不同部分由不同的人员制作，可以每人完成一个子窗口，然后利用框架技术将他们合并在一起形成一个完成的页面。
框架主要包括：框架集和框架。
- 框架集：在一个文档内定义的一组框架结构的HTML网页。定义了在一个窗口中显示的框架数、框架尺寸、载入到框架的网页等。
- 框架：在网页上定义的一个显示区域。
< FRAME>标记
功能：定义某一个具体的框架
格式：<FRAME src="File_Name" name="Frame_NAME" scrolling="value" noresize>...</FRAME>
属性：
src设置框架显示的文件路径。
name定义此框架的名字，这个名字是供超文本链接标记<A href="" target="">中的target用来指定链接的目标HTML文件将显示在哪一个框架中。
scrolling设定滚动条是否显示，yes/no/auto
noresize禁止改变框架的尺寸大小
< NOFRAME>< /NOFRAME>标记
放在< FRAMESET>< /FRAMESET>标记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
