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>

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=”文字颜色”>

整体页面的边距，行距

(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 无序列表和有序列表的结合应用

格式:

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>

　　　　　　　　　　　　　</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 为网站添加图标

五、超链接

超链接也叫URL中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。

5.1 超链接的基本格式

格式:

scheme://host[:post]/path/filename

scheme指的是http,ftp,file,mailto,news,gopher,telnet七种

host指的是IP地址或计算机名称

post指的是服务器端口

path指的是文件路径

filename指的是文件名

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

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

文字区块的设置:

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 多窗框的基本结构

格式：

<frame>

</frameset>

功能说明:<frameset>用来设置多窗框结构的声明

<frameset>下的属性：

属性名称属性值说明

cols 像素设置直排的多窗框环境

百分比同上

rows 像素设置横排的多窗框环境

百分比同上

border 像素边框的宽度

framespacing 像素页面与页面的边距

属性格式：

<frame>下的属性：

属性名称属性值说明

src URL 链接的页面

noresize true 允许浏览器自行改变框架大小

false 不允许

scrolling yes 不管网页内容的大小，都出现滚动条

no 不管网页内容的大小，都不现滚动条

auto 浏览器自动判断，是否需要滚动条

marginheight 像素设置垂直方向，窗体内容与边界的距离

marginwidth 像素设置水平方向，窗体内容与边界的距离

frameborder 0\1 不出现框体边/出现窗体边线

属性格式：

7.2 嵌套多窗体设置：

格式：

</frameset>

7.3 多框架与超链接

框架式网站的好处就是在同一张页面可以显示多个页面，而且可以跟方便的进行链接。

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 如何让别人找到你的网页：

属性名称属性值说明

name author 描述作者资料

description 描述网页的内容

keywords 关键字，多个可用逗号隔开

generator 描述网页是通过那种软件产生

revised 描述网页的版本

others 可设置其他网页信息

content 字符串配合name,http-equive设置

例： <meta name=”author” content=”李炎恢”>

8.3 活动文字：<marquee>…</marquee>

属性名称属性值说明

behavior scroll 从右到左移动

slide 从右到左停止

alternate 两边移动

direction left 向左移动

right 向右移动

up 向上移动

down 向下移动

bgcolor 英文/十六背景颜色

height 像素/百分比高度

width 像素/百分比宽度

scrollamount 数字播放的速度

vspace 像素左右两册间距

hspace 像素上下两册间距

8.4 在网页中加入脚本程序：

举例：

1.alert("欢迎使用JavaScript脚本");

2.var ans=prompt("请输入你的性别");
if (ans) {

alert("您的性别为："+ans);

}

else {

alert("您没有输入你的性别!");

}

posted @ 2018-10-12 09:15 月迷津阅读(432) 评论(0) 收藏举报

刷新页面返回顶部