HTML
一、HTML基本结构
本章讲解最基本的HTML元素,也就是创建文档结构所需的元素。例如:标题、段落、页面分隔、注释等等。
1.1 HTML的基本结构
1 <html> -------根控制标记 2 3 <head> -------头控制标记 4 5 <title>标题</title> -------标题标记 6 7 </head> -------头控制标记(尾) 8 9 <body> 10 11 -------网页显示区域 12 13 </body> 14 15 </html> -------根控制标记(尾)
(1).<html>…</html>根控制标记
开头和结尾成对出现,双标签
(2).<head>…</head>头控制标记
1.<title>很单纯的文件标题声明
2.<meta>控制标记的动态文件转换声明
3.<base>超链接网址基准参考点
4.Javascript和VBScript程序
5.stylesheet 可用来设置排版来的声明
6.<link>可引用外部文件,如CSS排版样本
(3).<title>…</title>设置浏览器的视窗标题
(4).<body>…</body>页面可见内容
1.2 HTML控制标记的格式
(1).<标记名称>
单一型,无设置值的。
如:<br>
(2).<标记名称 属性=”属性值”>
单一型,有设置值的。
如:<hr width=”80%”>
(3).<标记名称>…</标记名称>
对称型,无设置值。
如:<title>…</title>
(4).<标记名称 属性=”属性值”>…</标记名称>
对称型,有设置值。
如:<body bgcolor=”red”>…</body>
<font size=”7”>…</font>
1.3 最常用的控制标记
(1).跳行 <br>
格式:<br>
无属性设置
(2).段落 <p>
格式:<p align=”排列方式”>…</p>
属性名称 属性值 说明
align left 往左靠(默认)
center 往中靠
right 往右靠
(3).水平直线 <hr>
格式:<hr>
属性名称 属性值 说明
size 像素 绝对设置,以数字表示,属性值越大,线越粗
百分比 相对设置,以%表示,属性值越大,线越粗
width 像素 绝对设置,长度不会应视窗的改变而改变
百分比 相对设置,长度会随着视窗宽度而改变
noshade 实体线
(4).向中对齐 <center> (被废弃的标签)
格式:<center>…</center>
(5).背景色与文字设置
格式:<body bgcolor=”背景色” text=”文字颜色”>
整体页面的边距,行距
<body leftmargin=”像素” topmargin=”像素”>
(6).标题文字设置
格式:
1 <h1>…</h1>
2
3 <h2>…</h2>
4
5 <h3>…</h3>
6
7 <h4>…</h4>
8
9 <h5>…</h5>
10
11 <h6>…</h6>
属性名称 属性值 说明
align left 靠左
center 靠中
right 靠右
(7).特殊字符设置 实体
格式:
1 < lt;
2
3 > gt;
4
5 & amp;
6
7 “ quot;
8
9
(8).在HTML备注
格式:<!--…-->
(9).实体字符控制标记
1.<b>…</b> 粗
2.<i>…</i> 斜
3.<s>…</s> 删
4.<u>…</u> 下划
5.<tt>…</tt> 电报
6.<sub>…</sub> 下标
7.<sup>…</sup> 上标
(10).语意字符控制
1.<address>…</address> 地址
2.<big>…</big> 大字
3.<del>…</del> 删除
4.<ins>...</ins> 修改
5.<samll>…</small> 小字
6.<strong>…</strong> 加强语气(加粗)
7.<em>...</em> 加强语气(倾斜)
(11).<font>字体控制 (被废弃的标签)
格式:<font>…</font>
属性名称 属性值 说明
size 0-7 字体大小
color 英文或十六 颜色
face 字体 字体
(12).格式化
格式:<pre>…</pre>
让书写的文字格式化!
(13).引用文本
格式:<blockquote>...</blockquote>
属性名称 属性值 说明
cite url 被引用的地址
二、排列清单控制标记
排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另一种列表。对于概括因特网上的内容,列表是非常方便的。
2.1 无序号条例式清单<ul>与<li>
格式:
<ul>
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
功能: <ul>无序条列清单的开始.
</ul>表示结束.
<li>…</li>表示一个项目.
<li>的属性
属性名称 属性值 说明
type dise 实心圆(默认值)
circle 空心圆
square 实心方块
2.2 有序号条例式清单<ol>与<li>
格式:
1 <ol>
2 <li>…</li>
3
4 <li>…</li>
5
6 <li>…</li>
7
8 <li>…</li>
9 </ol>
功能: <ol>有序条列清单的开始.
</ol>表示结束.
<li>…</li>表示一个项目.
<ol>的属性
属性名称 属性值 说明
type 1 表示以1,2,3,4来表示
a 表示以a,b,c,d来表示
A 表示以A,B,C,D来表示
i 表示以i,ii ,iii来表示
I 表示以 I,II,III来表示
2.3 无序列表和有序列表的结合应用
格式:
<ul>
<li>
.....
<ol>
<li>…</li>
<li>…</li>
<li>…</li>
</ol>
</li>
<li>
.....
<ol>
<li>…</li>
<li>…</li>
<li>…</li>
</ol>
</li>
</ul>
2.4 叙述式清单(定义列表)
格式:
<dl>
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
<dd>…</dd>
</dl>
功能: <dl>叙述清单的开始
<dt>表示一个项目
<dd>表示一个项目下的更详细的内容
三、表格
在网页中表格是一种经常使用到得设计结构,就像表格的内容中可以包含任何的数据,如文字、图像、表单、超链接、表格等等,所有在HTML中可以使用的数据,都可以被设置在表格中,所以有关表格设置的标记与属性页特别多。
3.1 表格的基本格式
格式:
<table>
<tr>…
<th >… </th>
<th>… </th>
<th>… </th>
</tr>
<tr>
<td>… </td>
<td>… </td>
<td>… </td>
</tr>
</table>
功能: <table>…</table>用来声明表格开始与结束.
<tr>…</tr>用来设置表格的行.
<th>…</th>用来设置标题栏位.
<td>…</td>用来设置数据栏位.
3.2 <table>标签下的属性
属性名称 属性值 说明
border 像素 设置表格的边线
cellspacing 像素 绝对设置,存储格框线宽度
百分比 相对设置,存储格框线宽度
cellpadding 像素 绝对设置,数据与框线的距离
百分比 相对设置,数据与框线的距离
width 像素 绝对设置,像素表示表格宽度
百分比 相对设置,百分比表表格宽度
height 像素 绝对设置,像素表示表格宽度
百分比 绝对设置,百分比表表格宽度
align left 表格往左靠(默认)
center 表格往中靠
right 表格网右靠
bgcolor 英文/十六 表格的背景颜色
background URL 表格的背景图片
summary 字符串 用来描述表格数据说明
bordercolor 英文/十六 边框的颜色
bordercolorlight 同上 边框的亮色
bordercolordark 同上 边框的暗色
3.3 <table>标签下的边框设置
属性名称 属性值 说明
frame void 不要显现表格的边线
below 只显现出表格的下边线
above 只要显现出表格的上边线
hsides 只显示表格的上下边线
vsides 只显现表格的左右边线
lhs 只显现表格的左边线
rhs 只显现表格的右边线
border/box 会显现出表格的所有边线
rules rows 只显示出横行的格框线
cols 只显示出直行的格框线
all 显示全部格框线
groups 表示列组合水平部分
none 不显示任何格框线
3.4 <tr><th><td>标签下的常用属性
属性名称 属性值 说明
width 像素 绝对设置,以像素值设置宽
百分比 相对设置,以百分比设置宽
height 像素 绝对设置,以像素值设置高
百分比 相对设置,以百分比设置宽
bgcolor 英文/十六 数据栏的颜色设置
align(水平方向) left 数据靠左
center 数据靠中
right 数据靠右
valign(垂直方向) top 数据靠上
middle 数据靠中
bottom 数据靠下
nowrap 无 在单元格中换行
3.5 拆分与合并单元格
属性名称 属性值 说明
colspan 数字 向两边扩展栏位
rowspan 数字 向下扩展栏位
3.6 表格的结构化、标题
1.结构化格式:
<table>
<thead>……</thead> --------表头区
<tbody>……</tbody> --------表体区
………………………
<tfoot>……</tfoot> --------表尾区
</table>
2.表格的标题:
<table>
<caption>….</caption>
</table>
<caption>下的属性值有:
属性名称 属性值 说明
align top 标题在表格上方
bottom 标题在表格下方
四、图像
4.1 背景图案的设置
格式:<body background=”URL”>
4.2 将图片插入到网页中去
格式:<img src="URL">
功能:将图片插入到网页中去,单一标签
<img>下的属性
属性名称 属性值 说明
src URL 图片的路径
图片的注解
属性名称 属性值 说明
alt 字符串 给图片做注解
图象大小的设置
属性名称 属性值 说明
width 像素 绝对设置,宽
百分比 相对设置,宽
height 像素 绝对设置,高
百分比 相对设置,高
图象边框的设置
属性名称 属性值 说明
border 数字 图象边框
文字图象的排列
属性名称 属性值 说明
align left 图象靠左,文字靠右
right 图片靠右,文字靠左
top 文字往上靠
middle 文字靠中
bottom 文字靠下
4.3 用图像作为超链接
格式:<a href="URL"><img src="URL"></a>
注意点:边框的问题.
4.4 为网站添加图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
五、超链接
超链接也叫URL中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。
5.1 超链接的基本格式
格式:
scheme://host[:post]/path/filename
scheme指的是http,ftp,file,mailto,news,gopher,telnet七种
host指的是IP地址或计算机名称
post指的是服务器端口
path指的是文件路径
filename指的是文件名
<a href=scheme://host[:post]/path/filename >…</a>
5.2 超链接的种类
一般常用的分为四种:
- http
声明 <a href=http://www.163.com/images/logo.htm>网易logo</a>
2. file
声明 <a href=file:///e/images/pic.jpg>图片</a>
3. ftp
声明 <a href=ftp://192.168.4.21/>进入</a>
4. mailto
<a href=mailto:bnbbs@163.com>E-MAIL</a>
5.3 相对链接和绝对链接
- index.htm
- page/index.htm
- page/top/index.htm
- ../index.htm
- ../../index.htm
- ../page/index.htm
5.4 书签的链接
<a>下的属性
属性名称 属性值 说明
name 字符串 设置超链接的标记
基本格式:
瞄点<a name=”音乐”>…</a>
链接点<a href=”#音乐”>…</a>
链接到别的网页的书签项目:
基本格式:
瞄点<a name=”音乐”>…</a>
链接点<a href=”index.htm#音乐”>…</a>
5.5 超链接事件
LINK 颜色的设置
基本格式:<body link=”颜色” alink=”颜色” vlink=”颜色”>
link 超链接尚被选中的文字
alink 超链接点选但未被放开的颜色
vlink 超链接已被点选过的颜色
六、表单
表单是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具。
6.1 表单的功能结构:
主标记结构:<from>…</from>
属性 值 说明
name 字符串 给这个表单起个名字
method get/post 表单的传输方式
action url 传输目标
enctype="multipart/form-data"
6.2 文本栏、密码栏、隐藏栏
文本栏:<input type=”text” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>
密码栏:<input type=”password” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>
隐藏性栏位:<input type=”hidden” name=”栏位名称” value=”栏位值”>
6.3 复选栏、单选栏
多重勾选栏位:<input type=”checkbox” name=”栏位名称” value=”内定值” checked=”checked” disabled=”disabled”>
单选栏位:<input type=”radio” name=”栏位名称” value=”内定值” checked=”checked” disabled=”disabled”>
6.4 窗体栏位、区块栏位
窗体选项栏位设置:<select name=”栏位名称” size=”数字” >
<option value=”选项值” selected=”selected”>…
<option value=”选项值”>…
<option value=”选项值”>…
</select>
//分组<optgroup label="分组名称"></optgroup>
//多选multiple
文字区块的设置:
<textarea cols=”设置长度” rows=”设置宽度”>
………
</textarea>
6.5 按钮、图像按钮
按钮设置: <input type=”submit” value=”按钮中显示的文字”>
<input type=”reset” value=”按钮中显示的文字”>
按钮图像:<button name=”栏位名称” type=”图象形态”>
<img src=”URL”>
</button>
图像按钮:<input type="image" src="url" alt="文本">
6.6 允许上传文件
上传栏位:<input type="file"
name="file">
6.7 表单加上外框和标题
外 边 框:<fieldset>...</fieldset>
标 题:<legend>...</legend>
七、框架
在前面几章中,大家应该可以发现浏览器视窗本身就是一个框架,网页就是显示在该单一的框架内,本章将介绍另一种网页呈现的方式,那就是可将原先单一的框架分割成多个框架,且每个框架中可以分别显示出指定的网页,当然这种框架仍然是结构于单一的视窗中。
7.1 多窗框的基本结构
格式:
<frameset>
<frame>
<frame>
<frame>
</frameset>
功能说明:<frameset>用来设置多窗框结构的声明
<frameset>下的属性:
属性名称 属性值 说明
cols 像素 设置直排的多窗框环境
百分比 同上
rows 像素 设置横排的多窗框环境
百分比 同上
border 像素 边框的宽度
framespacing 像素 页面与页面的边距
属性格式:
<frameset cols=”120,80,120”>
<frameset cols=”20%,40%,20%”>
<frameset cols=”40%,*,*”>
<frameset rows=”120,80,120”>
<frameset rows=”20%,40%,20%”>
<frameset rows=”20%,*,*”>
<frame>下的属性:
属性名称 属性值 说明
src URL 链接的页面
noresize true 允许浏览器自行改变框架大小
false 不允许
scrolling yes 不管网页内容的大小,都出现滚动条
no 不管网页内容的大小,都不现滚动条
auto 浏览器自动判断,是否需要滚动条
marginheight 像素 设置垂直方向,窗体内容与边界的距离
marginwidth 像素 设置水平方向,窗体内容与边界的距离
frameborder 0\1 不出现框体边/出现窗体边线
属性格式:
<frame src=”URL”>
<frame noresize>
7.2 嵌套多窗体设置:
格式:
<frameset rows="20%,80%">
<frame src="URL">
<frameset cols="20%,80%">
<frame src="URL">
<frame src="URL">
</frameset>
</frameset>
7.3 多框架与超链接
框架式网站的好处就是在同一张页面可以显示多个页面,而且可以跟方便的进行链接。
相关属性说明:
<frame>的命名属性:
格式:<frame name=”窗体名称”>
<a>超链接 <a href=”URL” target=”窗体名称”>
多窗体链接的属性:
属性名称 属性值 说明
target _blank 打开一个新建的页面
7.4 悬浮窗体的设置
格式:<iframe src=”路径”>…</iframe>
功能:设置悬浮窗框
属性名称 属性值 说明
height 像素/% 绝对/相对 高度
width 像素/% 绝对/相对 宽度
其余属性除了noresize外,其他都和frameset 一样.
八、多媒体、其他
8.1 自动展示网页内容:
格式:<meta http-equiv=”refresh” content=”time;URL”>
meta 文件头声明
http-equiv=”refresh” 表示网页要重新下载显示
content=”time;URL” time表示秒数,URL网页显示内容
例:<meta http-equiv=”refresh” content=”3;url=index.htm”>
8.2 如何让别人找到你的网页:
<meta>下的属性:
属性名称 属性值 说明
name author 描述作者资料
description 描述网页的内容
keywords 关键字,多个可用逗号隔开
generator 描述网页是通过那种软件产生
revised 描述网页的版本
others 可设置其他网页信息
content 字符串 配合name,http-equive设置
例: <meta name=”author” content=”李炎恢”>
<meta name=”description” content=”这是我的个人网站”>
<meta name=”keywords” content=”音乐,动漫,博客”>
<meta name=”generator” content=”记事本”>
<meta name=”revised” content=”html4.01”>
<meta name=”others” content=”这个我第一个网站,网站的主要内容有动漫,音乐,文章,博客等等,欢迎大家光临!”>
8.3 活动文字:<marquee>…</marquee>
属性名称 属性值 说明
behavior scroll 从右到左移动
slide 从右到左停止
alternate 两边移动
direction left 向左移动
right 向右移动
up 向上移动
down 向下移动
bgcolor 英文/十六 背景颜色
height 像素/百分比 高度
width 像素/百分比 宽度
scrollamount 数字 播放的速度
vspace 像素 左右两册间距
hspace 像素 上下两册间距
8.4 在网页中加入脚本程序:
<script type=”类型” src=”URL”>…</script>
举例:
1.alert("欢迎使用JavaScript脚本");
2.var ans=prompt("请输入你的性别");
if (ans) {
alert("您的性别为:"+ans);
}
else {
alert("您没有输入你的性别!");
}