目录
第一章 HTML基础知识
1、HTML简介
HTML(Hypertext Markup Language),超文本标记语言,HTML 利用各种标记来标识文档的结 构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language,标准通用标识 语言)中的一个子集演变而来的。
2、HTML的标记组成
HTML 用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来,而且是成 对出现的,无斜杠的标记表示该标记的作用开始,有斜杠的标记表示该标记的作用结束。如 <body></body>、<p></p>等
1) 单标记:有些标记能完整的表达标记里的意思,只须在尖括号中输入标记名即可,这类标记叫 单标记。XHTML中要求单标记也必须闭合,即在标记“>”前添加斜杠。常见的单标记如<br />、<hr />等。
2) 双标记:双标记有头有尾,且前面的标记与后面的标记保持一致,但在后面的标记前有斜线, 语法形如:<标记>内容</标记>。例如:<p>段落</p>
3) XHTML要求所有标记均为小写,且所有标记属性必须添加双引号
4) 标记对不能交叉
3、HTML基本结构
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!--下面是网页的正文-->
</body>
</html>
1) <title>标记对不能放在<body>标记对中,同理,其它表示内容的标记也不能放在<head>标 记对中
2) <html></html>表示 HTML 语言,在<html></html>里面包含头部(<head></head>)和 内容体(<body></body>)。
3) HTML注释表示为<!--注释内容-->
就拿<html></html>举例吧:
<html> 是一个网页的开头部分
</html> 是一个网页的结尾部分 其中斜杠(/)表示结束
第二章 文字与图像
1、设置文字字体、大小与颜色
语法:<font face=”宋体” size=”1” color=”red”>文字</font>
1) 设置文字的字体、大小、颜色需要使用<font>标签2) Face属性设置文字字体,多种字体用逗号隔开3) Size 属性设置文字大小4) Color 属性设置文字颜色,参数值可以是RGB颜色值,如#000000,也可以用颜色的单词表示,如 red
2、设置正文的标题
语法:<h#>主题文字</h#>,其中“#”代表数字 1-6 中的任意一个,从数字 1 到数字 6,标题大小排列由大到小(数字越大,标题字号就越小)。
3、设置段落
语法:<p>这里表示段落</p>
4、强制换行与不换行
1) 强制换行:<br />
2) 强制不换行:<nobr />
5、字体标记
1) 物理字体
<b>…</b> 设置成粗体 <i>…</i> 设置成斜体
<u>…</u> 增加下划线 <s>…</s> 增加删除线
<sup>…</sup> 设置成上标字体 <sub>…</sub> 设置成下标字体
<tt>…</tt> 设置成打字机字体
2) 逻辑字体
<em>…</em> 强调文字 <strong>…</strong> 字体加重
<code>…</code> 显示编程代码 <samp>…</samp> 显示救命文字
<kbd>…</kbd> 显示键盘按键文字 <small>…</small> 缩小文字
<big>…</big> 放大文字
6、文字对齐
1) 文字对齐使用标签的align 属性,例如:<palign=”#”>对齐文字</p>,其中“#”代码表示方位,
可选择”left”(向左)、”right”(向右)、”center”(居中)。
Align 属性可用于<p>、<div>、<table>、<td>等标签。
2) 居中对齐可使用<center>标签,例如:<center>居中文字</center>
7、列表
1) 无序列表
<ul type=”#”>
<li>表项一</li>
<li>表项二</li>
</ul>
Type=”#”取值可为 disc(默认,实心黑点)、square(实心黑方块)、circle(空心圆)
2) 有序列表
<ol type=”#”>
<li>表项一</li>
<li>表项二</li>
</ol>
Type=”#”取值可为 A、a、I、i、1等
3) 定义列表
<dl>
<dt>项目</dt>
<dd>描述一</dd>
<dd>描述二</dd>
</dl>
<dt>标签定义了定义列表中的项目,<dd>标签在定义列表中定义条目的定义部分,可以理解为对定义条目进行特征描述。
4) 无序列表、有序列表、定义列表间可以相互嵌套,但一定要注意嵌套时不能交叉
8、其它方式修饰文本
1) 欲格式化文本:<pre>…</pre>2) 代码样式斜体字渲染:<var>…</var>3) 表示它所包含的文本对某个参考文献的引用:<cite>…</cite>
9、图像
1) 插入图像基本语法:<img src=”#” />,其中#代表图像的 URL路径,示例:<img src=”
c.jpg” />
2) 图像无法显示时的提示信息,使用 alt 属性,如:<img src=”c.jpg” alt=”风景” />
3) 图像的大小:<img src=”c.jpg” width=”400px” height=”300px” />,width 属性
定义图像的宽度,height 属性定义图像的高度
4) 图像和文字对齐:<img src=”c.jpg” align=”top” />,align属性的取值为 top(顶部)、
middle(中间)、bottom(默认,底部)
5) 图像的边框:<imgsrc=”c.jpg” border=”0” />,border 设置为 0时表示图像不显示边
框,否则设置成需要的边框大小
10、移动的字体和图片
1) 移动基本语法:<marquee>移动文字或图片</marquee>,默认是向左循环移动,移动范围在其父对象的有效区域内。
2) 文本移动的方向:<marquee direction=”#”>…</marquee>,其中#可以选择 left、 right、up、down
3) 文本的滚动循环:<marquee behavior=”#”>…</marquee>,其中#可以选择 scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。
4) 如果设置文本来回移动,还可以设置循环次数:<marquee loop=”#”>…</marquee>,其中#为代表循环的次数。
5) 文本的移动速度:<marquee scrollamount=”#”>…</marquee>,其中#设置移动的速度,取正整数。数值越大,速度越快。
6) 移动对象的延时:<marquee scrolldelay=”1000”>我走一走,停一停</marquee>,scrolldelay 以时间为单位,用毫秒表示。
7) 移动的区域和背景:<marquee width=”100” height=”100” bgcolor=”pink”>…</marquee>
第三章 超级链接
1、基本概念
1) 统 一 资 源 定 位 器 (URL) : 每 一 个 网 页 的 唯 一 地 址 , 一 个 URL 构 成 为 protocol://machinename[:port]/directory/filename。其中 protocol 是访问协议,如 http、 https、ftp 等,machinename 是存放资源的主机 IP 地址,通常以域名的形式出现,port 是 服务器使用的端口,directory 和filename 是资源的路径和文件名。 2) 绝对路径:HTML绝对路径指带有域名文件的完整路径 3) 文档相对路径:当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的 上一级目录。 4) 站点根目录相对路径:提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始, 表示站点根文件夹。
2、文字链接
语法:<a href=”URL” target=”target”>链接文字</a>
1) href属性表示链接跳转地址 2) target 属性定义链接网页的打开方式,其值可以为blank(新窗口)、parent(父框架)、self(当 前窗口)、top(清除所有被包含的框架并将文档载入整个浏览器窗口)
3、链接的注释title 属性
<a href=”URL” title=”注释信息”>链接文字</a>
4、图片链接
<a href=”URL”><img src=”c.jpg”></a>将链接文字改成插入图像即可
5、锚点链接
定义锚点:<a name=”锚点”></a>
链接锚点:<a href=”#锚点”>链接文字</a>
6、邮箱地址链接mailto
<a href=”mailto:邮箱地址”>链接文字</a>
7、图像映射
<img src=”1.jpg” usemap=”#map” />
<map name=”map”>
<area shape=”rect” href=”1.html” coords=”140,20,280,60”>
<area shape=”poly” href=”2.html” coords=”100,100,180,50,200,140”>
<area shape=”circle” href=”3.html” coords=”80,100,60”>
</map>
1)图像映射实现单击同一图像中的不同位置,出现不同的链接,有矩形、圆形和多边形,分别 用rect、circle、poly表示。2)图像映射有分为两步:
在图像标签中使用usemap属性,其值为#号加上map标签的名称,即map标签的name 属性(如#map)。
定义<map>标签,并使用 name 属性命名,方便其它地方调用。然后用<area>标签定 义图片上的热区形状(shape 属性)、位置(coords属性)及链接地址(href 属性)。
第四章 表单
1、创建表单
语法:<form name=”form” action=”url” method=”post”></form>
表单对象常用的属性
action <from action=”xxx”> 表单提交的目的地址
method <form method=”xxx”> 表单提交方式
name <form name=”xxx”> 表单名称
Form 中的name 属性给 form 表单命名,action 属性表示表单提交后发送的URL地址,发送的方 式用 method 属性表示,可选择的参数有Get 和Post。Get 传输量比较小,Post 传输量比较大。
2、文本框和密码框
1) 文本框:<input type=”text” name=”text” size=”6” maxlength=”6” value=” 文字” disabled=”disabled” readonly=”readonly” />
说明:name 属性给文本框命名,size 属性设置文本框的显示大小,maxlength属性设置文本 框最大可接受的字符数,value 属性设置文本框默认显示值,disabled 属性设置文本框是否可 用,readonly 属性设置文本框是否只读。
2) 密码框:<input type=”password” />
密码框的属性除了 type 设置成 password,与文本框不一致外,其它属性与文本框一致。
3、单选框和复选框
1) 单选框:<input type=”radio” name=”radio” checked=”checked” value=”v” />
说明:设置 checked属性表示单选框被选中
2) 复选框:<input type=”checkbox” name=”ck” checked=”checked” value=”v” />
4、下拉列表和文本域
1) 下拉列表:
<select name=”select” size=”2” multiple=” multiple”>
<option value=”1” selected=”selected”>列表项一</option>
<option value=”2”>列表项二</option>
</select>
说明:select 标签的size 属性表示下拉列表的可见选项数,默认为1,multiple 属性规定可以 选择多个选项。Option 标签的 selected标签表示当前选被默认选中,即在1个可见选项数时 下拉列表显示此值。
2) 文本域
<textarea name=”ta” rows=”10” cols=”5”>文本内容</textarea>
说明:textarea 标签的 rows 属性表示文本区内的可见行数,cols 属性表示文本区内的可见宽 度。
5、按钮
1) 普通按钮:<input type=”button” name=”bt” value=”按钮” /> <button name=”bt”>普通按钮</button>
2) 提交按钮:<input type=”submit” name=”sm” value=”提交” />
3) 重置按钮:<input type=”reset” name=”rs” value=”重置” />
6、图像域与文件域
1) 图像域:<input type=”image” name=”image” src=”c.jpg” alt=”描述” />
2) 文件域:<input type=”file” name=”file” />定义输入字段和浏览按钮,用于文件上传
7、隐藏表单
<input type=”hidden” name=”hi” value=”v” />隐藏表单用于在浏览器与服务器之间 传递一些必要的参数或选项,而这些参数或选项不需要显示在页面中。
第五章 表格
1、表格的基本语法
<table width=”100” border=”1” height=”100”>
<caption>表格标题</caption>
<tr><th>表头一</th><th>表头二</th></tr>
<tr><td>单元格一</td><td>单元格二</td></tr>
<tr><td cols=”2”>表尾</td></tr>
</table>
在HTML中创建表格使用<table>标签对,可对其设置宽度、高度、边框、背景等。
<caption>标签为整个表格的标题,它不占用表格行,是位于表格外的一个对整个表格进行说明的大标题,可以使用 align 属性设置标题相对于表格的位置,值为 left、right、top、bottom。
使用tr 定义表格行,然后用 th或td定义表格单元格。
可以使用 thead 定义表头,tbody 定义表格主体,tfoot 定义表尾,只需要把相应的行(tr和td都需要)放置在标记对中即可。
2、跨多行、多列表元
1) 跨多行表元
<td rowspan=”3”>…</td>
跨多行表元语法是在th 和td上加 rowspan表示,rowspan后面的值是数字,数字表示跨多少行表元。
2) 跨多列表元
跨多列表元与跨多行表元一样,也是放在th和 td上,表示在一行中跨多少列表元,语法是用colspan 表示。
3、设置表格大小
1) 设置表格宽度和高度
<table width=”100” height=”100”>…</table>
表格宽度用 width属性定义,表格高度用 height 属性定义,其取值可以为像素值或百分比。
2) 设置表格边框
<table border=”1”>…</table>
表格边框使用 table 标记的 border 属性定义,其后面的值是宽度值,表示对象的边框宽度,数值越大,宽度越大。
4、设置表格背景
1) 设置整个表格背景
<table bgcolor=”#ff0000”>…</table>
设置整个表格的背景是定义<table>标签的 bgcolor 属性,其值可为颜色名、十六进制颜色值或者 rgb代码的背景颜色。
2) 设置表格中单元格的背景
<td bgcolor=”#ff0000”>…</td>
设置单元格的背景颜色只需在 td 和 th 标签上定义 bgcolor 属性,如果设置某一行的背景颜色,也可以在 tr 标签中定义bgcolor 属性。
5、设置单元格边距
1) 设置单元格与内容之间的距离
<td cellpadding=”10”>…</td>
设置单元格与内容之间的距离只需在 td和 th标签上定义cellpadding属性,其值为像素值。
2) 设置两个单元格之间的距离
<td cellspacing=”10”>…</td>
定义两个单元格之间的空白在 td和th 标签上使用cellspacing属性,其值同样为像素值。
6、表格对齐
1)表格内文字对齐
<tr align=#>…</tr>
<td align=#>…</td>
文字对齐使用align 属性定义,取值可为 left、center、right。 在表格内,文字对齐有在tr、th、td中对齐,在 tr 设置对齐方式后,tr 内的th 和td都按设置的要求对齐,同理在多行中可以设置不同的tr 对齐方式, th 和td都可以设置其里面的文字或图片的对齐。
2)表格在网页中对齐
<table align=#>…</table>
表格在网页中的对齐是在<table></table>标记对中使用 align属性定义。
第六章 框架
1、框架基本语法
<frameset cols=”50%,50%”>
<frame scr=”1.html” />
<frame src=”2.html” />
</frameset>
框架的基本语法是由<frameset></frameset>标记对表示,标记对放在<head></head>标记对后面,使用了框架,就不再需要使用<body></body>标记对,即<frameset>与<body>标记对不能同时出现在一个页面中。
<frame>标记对表示在框架内载入什么文件,用src属性指定。
2、框架分栏
2) 垂直分栏
<frameset cols=”50%,*”>…</frameset>
垂直分栏是在<frameset>中使用 cols 属性表示,后面的数字表示列宽,可用数值、百分比和通配符*(只能用于最后一个数字)表示
3) 水平分栏
<frameset rows=”50%,*”>…</frameset>
水平分栏是在<frameset>中使用rows 属性表示,注意一个框架不能同时出现垂直分栏和水平分栏,即 cols 和 rows 不能同时出现,如果想又有垂直分栏又有水平分栏,可以使用框架嵌套实现
3、框架的常用属性
1)设置不可调节框架大小
<frameset noresize=”noresize”>…</frameset>
默认框架大小是可以调节的,如果不需要用户去对框架窗口进行大小调节,必须设置框架的noresize 属性
2)浏览器不支持框架
<noframes>对不起,您的浏览器不支持框架!</noframes>
<noframes>标记对用在<frameset>标记对之外,当浏览器不支持<frameset>标记时,将不显示框架内容,而是显示<noframes>标记对中的内容。
3)设置框架边框
<frameset frameborder=# border=#>
框架的边框设置可由 frameborder属性来完成,默认有边框,它有两种表示方法,英语表示法:yes(有边框)、no(无边框),数字表示法:1(有边框)、0(无边框)
当设置了框架的边框时,可用 border属性来设置边框的宽度
4)设置滚动条
<frame src=”1.html” scrolling=”no” />
设置滚动条是在<frame>标签里,用 scrolling属性,可取值 auto(默认,自动)、yes(有滚动条)、no(无滚动条)
4、框架链接
1)导航框架
<frameset cols=”20%,*”>
<frame src=”导航框架链接.html” />
<frame src=”main.html” name=”myFrame” />
</frameset>
<a href=”1.html” target=”myFrame”>导航框架链接</a>
导航框架链接是在网页框架的<frame>中加入 name 属性,表示该<frame>的名称,然后通过用<a>标记的链接,并用target 等于<frame>的名称,那所得到的链接地址网页会显示在该<frame>中
2)内联框架(浮动框架)
<iframe src=”1.html” width=”400” height=”300”></iframe>
内联框架存在于<body></body>的单个HTML文件中,可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容。
浮动框架用<iframe></iframe>标记对或<iframe />表示,可以用 width 和 height 属性设置其大小。
第七章 网页多媒体
1、插入网页多媒体
基本语法:<embed src=”1.mp3” />,src指定插入网页的多媒体路径
2、设置自动播放
<embed src=”1.mp3” autostart=”true” />
Autostart 表示自动播放,可取值true(默认值,自动播放)、false(不自动播放)
3、设置循环播放
<embed src=”1.mp3” loop=”true” />
Loop 属性用来设置多媒体文件的循环播放,可取值 true(无限次数)、 false(不循环播放)、 <数值>(规定循环的次数)
5、设置面板大小
<embed src=”1.mp3” width=”400” height=”300” />
6、对齐方式
<embed src=”1.mp3” align=”left” />
Align属性可以设置多媒体控制面板的对齐方式,取值为:
Center:控制面板居中
Left:控制面板居左
Right:控制面板居右
Top:控制面板的顶部与当前行中的最高对象的顶部对齐
Bottom:控制面板的底部与当前行中的对象的基线对齐
Baseline:控制面板的底部与文本的基线对齐
Texttop:控制面板的顶部与当前行中的最高的文字顶部对齐
Middle:控制面板的中间与当前行的基线对齐
Absmiddle:控制面板的中间与当前文本或对象的中间对齐
Absbottom:控制面板的底部与文字的底部对齐