HTML
一、HTML简介:
1.HTML(Hyper Text Markup Language),超文本标记性语言。
2.1997年元月,W3C组织(World Wide Web Consorium)的HTML Working Group开发了HTML 3.2。
3.现在使用的HTML版本为HTML 4.0。 XHTML
二、HTML的编写方法:
1.利用记事本(Notepad)、Word等文本编辑器,保存为*.htm *.html文件,用IE浏览器打开。
2.利用FrontPage、Dreamweaver等网页编辑器。
三、HTML的基本结构:
<html>
<head>
文件头部分
</head>
<body>
文件主体部分
</body>
</html>
注意事项也是语法:
① HTML文档由标记组成。大部分标记是成对出现的:<标记> </标记>。
② 标记与标记之间可以嵌套。
③ 在HTML文档中不区分大小写。
④ HTML标记有许多属性,属性要写在开始标记里,属性之间用空格隔开,属性值用引号引住。
⑤ 任何键盘输入的空格、回车在HTML中不起任何作用。
四、页面头部标记:作用于<head>...</head>之间。
(一)<title></title>标记:标题标记。显示在浏览器的标题栏,该标记没有属性。
作用:
2.浏览器保存该页面后的文件名。
3.浏览者将该网页添加到收藏夹中该页面的名字。
(二)<basefont>标记:基底文字标记。
作用:一般用于设定浏览器中文字的字体、字号、字色。在文档中所有没有指定字体、字号、字色的文字均采用该方案。
语法格式:<basefont face="Font_name" size="value" color="value">
属性:face:指定字体和字体列表(用逗号隔开)。
size:指定字号。取值范围:1~7。
color:指定字色。可以写颜色代码或颜色名称。
注意:该标记没有</basefont>标记,无需成对出现。
识记下列颜色代码与名称:
颜色 | 名称 | 代码 | 颜色 | 名称 | 代码 |
黑色 | Black | #000000 | 白色 | white | #FFFFFF |
红色 | Red | #FF0000 | 绿色 | green | #00FF00 |
蓝色 | Blue | #0000FF | 棕色 | brown | #A52A2A |
橘色 | Orange | #FFA500 | 灰色 | Gray | #808080 |
金色 | Gold | #FFD700 | 紫色 | purple | #800080 |
黄色 | Yellow | #FFFF00 |
|
|
|
<base target="_blank">
Base标签可以让当前页面中的所有的a标签都拥有相同 的属性,比如targent属性。
(三)<style>......</style>标记:用于设定CSS样式表。
<script>......</script>标记:用于添加脚本程序。 Body 或 head
<link>标记:该标记没有结尾标记,用于与外部文件建立链接。
(四)<meta>标记:元信息标记。
语法格式:<meta http-equiv="value" name="key" content="key_value">
属性:http-equiv:生成http标题域,传送http通信协议的标头。
name:关键字。
content:关键字取值。
name关键字 | 功能 |
generator | 指定网页编辑器的名称。 |
keywords | 指定网页的搜索关键字。 |
description | 指定网页描述。 |
author | 指定网页作者。 |
Build | 指定网站建立日期。 |
copyright | 指定网页版权信息。 |
Reply-to | 记载联系人邮箱。 |
robots | 指定搜索方式。 |
说明:(1).generator:content值可以设定为Notepad、Frontpage、Dreamweaver。
(2).keywords:多个关键字之间可以使用逗号隔开。关键字不易设定得过多。
(3).robots:content值可以设定为
all:可搜索当前网页及其链接网页。
index:可搜索当前页。
nofollow:不能搜索与当前网页链接的页面。
noindex:不能搜索当前页。
none:不能搜索当前页及其链接网页。
2.通过http-equiv实现的功能:
(1).设定字符集:
格式:<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta charset="UTF-8">
一个是4.0版本的,一个是5.0版本的。
utf-8????? 国际通用编码
gb2312??? 简体中文
gbk???? 简体中文 它只支持的字符集要比gb2312多一些。
(2).自动刷新:
格式:<meta http-equiv="refresh" content="3">
属性:content写明自动刷新间隔的时间,单位是秒。
(3).自动跳转:
格式:<meta http-equiv="refresh" content="value; URL=URL_value">
属性:content写明跳转前等待时间,单位是秒。
URL写明跳转地址。
注意:此例用于站点地址(网站域名)发生变化。
(4).禁用缓存:
格式:<meta http-equiv="cache-control" content="no-cache" />
说明:使用网页缓存可以加快浏览速度,因为缓存将曾经浏览过的页面暂存在电脑中,用户下次打开同一个网页内容时,可快速浏览该页,省去读取同一页面的时间。但是如果网页的内容经常频繁的更新,网页制作者可以禁用网页缓存以使用户随时都能查看到最新的内容。
3.设定转场效果:
转场效果:也称为网页过渡,指进入或离开网页时,页面具有不同的切换效果。
语法格式:
<meta http-equiv="event" content="revealtrans(duration="value",transition="value")">
属性:event设定产生效果的事件(page-enter进入网页时;page-exit离开网页时。)
duration设定网页转场效果的延迟时间,单位是秒。
transition设定过渡效果方式编号,取值范围为0~23。
编号 | 效果 | 编号 | 效果 |
0 | 盒状收缩 | 12 | 溶解 |
1 | 盒状展开 | 13 | 左右向中部收缩 |
2 | 圆形收缩 | 14 | 中部向左右收缩 |
3 | 圆形展开 | 15 | 上下向中部收缩 |
4 | 向上擦除 | 16 | 中部向上下收缩 |
5 | 向下擦除 | 17 | 阶梯状向左下展开 |
6 | 向左擦除 | 18 | 阶梯状向左上展开 |
7 | 向右擦除 | 19 | 阶梯状向右下展开 |
8 | 垂直百叶窗 | 20 | 阶梯状向右上展开 |
9 | 水平百叶窗 | 21 | 随机水平线 |
10 | 横向棋盘 | 22 | 随机垂直线 |
11 | 纵向棋盘 | 23 | 随机 |
用vscode这个编辑器生成的默认html文件:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
解释:如果是用ie打开的当前页面,那么就使用最新的ie版本渲染此页面。
解释:目前网页有手机mobile上可以打开的网页,用ipad打开的网页,还有电脑pc可以打开的网页。 width(宽度) = device(设备)-width(宽度)
五、页面主体标记:
<body>标记的属性:
1.text:设定网页文本的颜色。
2.bgcolor:设定网页背景的颜色。
3.background:设定网页的背景图像。
4.bgproperties:设定网页的背景图像为固定,不随页面的滚动而滚动。
(1).只有background属性存在,该属性才可以使用。
(2).在background属性存在的情况下,若无该属性,则背景图是滚动的。
(3).若有:
<body background="URL" bgproperties="fixed">,则背景图是固定的。
5.link:设定页面默认的链接颜色。
6.alink:设定鼠标正在单击时的链接颜色。
7.vlink:设定访问后的链接颜色。
8.topmargin:设定页面的上边距。单位是像素。
9.leftmargin:设定页面的左边距。单位是像素。
六、文字与段落:
(一)输入特殊符号:
语法格式:&名称;
代码 | 符号 | 代码 | 符号 | 代码 | 符号 |
; | Space(空格) | &; | & | §; | § |
<; | <(小于号) | ×; | ·; | · | |
>; | >(大于号) | ±; | ¢; | ¢ | |
©; | © | ¥; | ¥ | &euro; | € |
®; | ® | &trade; | TM | £; | ₤ |
(二)注释语句:
语法格式1:<!— —注释内容— —>
语法格式2:<comment>注释内容</comment> 已经被废弃
(三)标题标记:
语法格式:<hn align="value">文字</hn>
属性:n可以取值为1~6:
<h1>xxxxxx</h1>:黑体,特大字体,上下各有两行空行。
<h2></h2>:黑体,大字体,上下各有一到两行空行。
<h3></h3>:黑体(斜体),大字体,左端稍缩进。
<h4></h4>:黑体,普通字体,比h3更多缩进,上空一行。
<h5></h5>:黑体(斜体),与h4缩进相同,上空一行。
<h6></h6>:黑体,与正文缩进相同,上空一行。
align对齐方式,可以取值left(左对齐)center(居中对齐)right(右对齐)。
SEO相关:
H1标题标签是 标注当前页面中的文档最重要的核心主题的文本。
H1到 h6标签,相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次(当然可以超过,但是不利于搜索SEO)。
H2以后的这些标签可以在一个页面中有多个,但是不要滥用,滥用会导致网页的SEO受影响,搜索引擎会认为我们作弊。
(四)文字修饰标记:
1.粗体、斜体、下滑线、删除线:
粗体:语法格式1:<b>文字</b>
语法格式2:<strong>文字</strong>
斜体:语法格式1:<i>文字</i>
语法格式2:<em>文字</em>
语法格式3:<cite>文字</cite>
下滑线:语法格式:<u>文字</u>
删除线:语法格式1:<s>文字</s>
语法格式2:<strike>文字</strike>
语法格式3:<del>文字</del>
2.上标、下标:
上标:语法格式:<sup>文字</sup>
下标:语法格式:<sub>文字</sub>
3.大字号、小字号:
大字号:语法格式:<big>文字</big> 将当前文字加大一级字号显示。
小字号:语法格式:<small>文字</small> 将当前文字减小一级字号显示。
4.地址文字标记:语法格式:<address>文字</address>
功能:用以显示E-mail、地址等文字内容。实现换行,斜体效果。
5.打字机标记:语法格式:<tt>文字</tt>
6.等宽文字标记:
语法格式1:<code>文字</code>
语法格式2:<samp>文字</samp>
7.键盘标记:语法格式:<kbd>文字</kbd>
8.变量标记:语法格式:<var>文字</var>
(五)字体标记:
语法格式:<font face="字体1,字体2" size="字号" color="字色"></font>
属性:face指定文字的字体或字体列表,字体列表用逗号隔开。
size指定文字的大小,取值范围为:
绝对大小:1~7
相对大小:+1~+7、-1~-7
(六)段落标记:
1.<p align="left, right, center">文字</p>:产生空行也就是有间隙,成对使用。
2.<br>:单独使用,无属性,不产生空行也就是没有间隙。
3.<nobr>文字</nobr>:强制不换行且产生水平滚动条。
4. <wbr>文字</wbr>:在<nobr></nobr>中强制换行。
5. <pre>段落</pre>:预格式化文本,必须成对使用。
6.<center>段落</center>:段落居中。
7.<blockquote>文字</blockquote>:文字缩进排版。
8.<span></span>
span标签定义文档中的一小节文本。语义不强。
span标签可以跟其他的span标签共用一行。
(七)水平线:
语法格式:<hr width="value" size="value" color="value" align="value" noshade>
属性:width指定水平线的宽度,可以使用绝对像素值或百分比。
size指定水平线的厚度,只能使用绝对像素值。
color指定水平线的颜色。
align指定水平线的对齐方式。
noshade指定水平线为实心不带阴影。
注意:是单标记。
(八)其他文字标记:
1.忽略HTML标签标记:
语法格式1:<plaintext> 不推荐使用
语法格式2:<xmp>
2.在文字上方标注说明:
语法格式:<ruby>被标注文字 <rt>说明文字</rt> </ruby>
(九)DIV标记
Div和span标签
Div标签: <div></div>
Span标签: <span></span>
块级标签(display:block):独占一行。一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,可以设置宽度和高度。
行级标签(display:inline):内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但不能设置宽度和高度。
块:p,div,ul,ol,dl,li,dt,h1-h6 ,可以设置宽度,使用display:block可以将其转换为块级元素。
行:span,strong,em,a 文本相关的标签都是行内标签,不可以设置宽高,使用display:inline可以将其转换为行内元素。
Div多用于表示文档中的一个块或者是整个结构的小节。
Span标签,多用于文本的一小节。
同时拥有行内元素和块级元素的属性的标签:img。
七、列表:(重点)
(一)建立有序列表:
语法格式:<OL type="value" start="value">
<li> 有序列表项1</li>
<li> 有序列表项2</li>
<li> 有序列表项3</li>
</OL>
属性:start指定有序列表的起始序号。
type指定有序列表序号的格式:
value值 | 格式 |
1 | 数值:1,2,3... |
a | 小写字母:a,b,c... |
A | 大写字母:A,B,C... |
i | 小写罗马字母:i,ii,iii... |
I | 大写罗马字母:I,II,III... |
(二)建立无序列表:
语法格式1:<UL type="value">
<LI> 无序列表项1</LI>
<LI> 无序列表项2</LI>
<LI> 无序列表项3</LI>
</UL>
属性:type指定无序列表符号的格式:
type="disc" ● ;type="circle" ○ ;type="square" □ 。
语法格式2:<menu>
<LI> 无序列表项1</LI>
<LI> 无序列表项2</LI>
<LI> 无序列表项3</LI>
</menu>
语法格式3:<dir>
<LI> 无序列表项1 </LI>
<LI> 无序列表项2</LI>
<LI> 无序列表项3</LI>
</dir>
注意:1.<menu></menu>称为菜单列表,在HTML中表现与无序列表格式相同。
2.<dir></dir>称为目录列表,在HTML中表现与无序列表格式相同,每个列表项最多20个字符。
(三)建立定义列表:
语法格式:<DL>
<DT> 名词术语1 <DD> 解释1 <DD> 解释2
<DT> 名词2 <DD> 解释1 <DD> 解释2
<DT> 名词3 <DD> 解释1 <DD> 解释2
</DL>
(四)嵌套列表:
重复的使用<OL>、<UL>、<DL>等列表标记可以组合成嵌套列表。
八、超级链接:(重点)
(一)统一资源定位器(Uniform Resource Locator,URL):
在网络中进行资源定位的统一格式。
格式:
Protocol://Host-name. Domain-name/Path/File-name:Port
协议://主机名.域名/路径/文件名:端口号
例如:
http://www.163.com:80
(二)超级链接:
定义:也叫超链接,是在页面间确定相互导航关系的非线性的文字标识。
(三)路径:
1.路径分类:绝对路径、相对路径、根路径。
站点(项目根目录):
也就是文件夹,这个文件夹用来存储网站上所有的内容(一些.html文件,一些css文件,一些图片文件,一些视频文件等等),等项目开发完成以后,可以将站点上传到空间,通过域名去访问。
建立站点就像新建一个文件夹一样简单。
怎么将站点放在编辑器中???
首页:
就是你输入域名以后访问的页面,首页有一定的规范,名字必须叫做index.html,存储在站点的位置还必须是站点根目录下也就是项目根目录下,只有这样的话,空间和域名才能找到。
2.绝对路径(Absolute Path):
为文件提供完整的URL地址,多适用于外部链接。
3.相对路径(Relative Path):
相对于站点根目录的URL,多适用于内部链接。
优点:若站点文件夹所在地址发生变化,则文件夹中的所有内部链接均不会出现问题。
- 若链接到同一目录中的文档,只需直接输入链接文档的名字。
- 若链接到下一级目录中的文档,只需先输入目录名,再加/,再输入文档名。
- 若链接到上一级目录中的文档,只需先输入../,再输入目录名和文档名。
4.根路径:
格式:/根目录名/路径/文件名
该方法适用于内部链接,W3C不提倡使用。
(四)链接分类:
链接分为4类:内部链接、锚点链接、外部链接、特殊链接。
1.内部链接:在当前网站内进行跳转。
语法格式:<a href="URL" target="value" title="value">文字</a>
属性:href指定链接的文档的URL地址。
target指定链接的目标。
_self:在同一窗口打开链接的URL地址。
_blank:在新窗口打开链接的URL地址。
_top:忽略框架,在整个浏览器窗口打开链接的URL地址。
_parent:在上一级窗口打开链接的URL地址。
title指定手形鼠标放在链接上时产生的链接提示标题。
2.锚点链接:又称书签链接,为解决同一页面过长而采取的方案。
(1).建立锚点:
想返回到哪就在那建立锚点。
语法格式1:<a name="name">文字</a>
语法格式2:<a id=”name”>文字</a>
建立锚点链接时<a>标记可以成对出现,也可以单独使用,也可以使用除a标签以外的标签,比如div,span。
(2).在同一页面中链接锚点:
语法格式:<a href="#name">文字</a>
(3).在不同页面之间链接锚点:
语法格式:<a href="
#name">文字</a>
3.外部链接:跳转到当前站点之外,此种链接需使用完整的URL地址。
4. 空链接 # javascript:; 阻止默认行为(阻止打开别的页面的行为) 和 下载链接
九、图片(重点):
(一)图片的基本格式:
1.JPEG:Joint Photographic Experts Group,联合图像专家组,国际标准ISO/IEC10918。
特点:(1).使用有损压缩;
(2).支持大约1670万种颜色;
2.GIF:Graphics Interchange Format,图像交换格式,由CompuServe公司开发。
特点:(1).使用无损压缩;
(2).仅支持256种颜色;
(3).支持透明背景和动画效果。
3.png 不能支持动画,但是可以支持背景透明。
(二)图片标记:
语法格式:
<img src="File_name" alt="value" width="value" height="value" border="value"
align="value" vspace="value" hspace="value" lowsrc="File_name">
属性:src指定图片的路径和文件名。
alt替代,指图片的文字提示。
① 当鼠标指向图像上方时,会出现图片的提示文字。
② 若图片没有被下载,则图片位置会出现提示文字。
border图片边框宽度,单位为像素,颜色为黑色。
若图片上填有链接,则图片边框颜色为链接颜色,默认为深蓝色。
align图片对齐方式:
① baseline(基线)、bottom(底部)、Absbottom(Absolute Bottom,绝对底部)效果相同,指图片底端与文字底端对齐。
② top(顶部)、texttop(文本上方)效果相同,指图片顶端和文字行最高字符顶端对齐。
③ middle(中部)指图片中间线与文字底端对齐。
④ absmiddle(Absolute Middle,绝对中间)指图片中间线与文字中间线对齐。
⑤ left(左对齐)、right(右对齐)。
vspace调整图片与文字的上下距离,单位为像素。
hspace调整图片与文字的左右距离,单位为像素。
lowsrc低分辨率源文件,若用户的浏览速度很慢,可看到该图的低分辨率图片。
水平方向: left(左) center(中) right(右)
垂直方向: top(顶) middle(中) bottom(底)
(三)利用<img>标记插入AVI视频:
AVI:Audio-Video Interleaved,音频-视频交错,是Windows操作系统的默认视频格式。
语法格式:
<img dynsrc="File_name" width="500" height="500" loopdelay="value" loop="value" start="value">
属性:dynsrc指定AVI视频的路径及文件名。该属性用于指定动画文件的文件名,包括文件所在的路径。支持的文件类型为:.avi,.mov,.mpg/mpeg,.asf,.rm,.ram,.swf.
必需要加上Width宽度和height高度,加上以后才会显示。
不是每个avi视频文件都能播放的,如果只有声音而没图像,能在网页上显示的也能在电脑上的media player能播放,而不能显示的则只有声音。
众所周知avi格式的视频是用于操作系统的widow系列,下个解码软件,安装后在media player上可以播放了。
视频在网页上显示不出来应该是该视频解码格式不对的缘故,所以这种方法插入视频文件其实缺点很大,用户在访问你的网页的时候,如果不能解码视频文件则只能听到声音而没画面。
loopdelay指定AVI文件循环延迟,单位为秒。
loop指定AVI文件循环次数。若loop="infinite",则文件无限次循环。
start指定AVI文件播放方式。
① start="fileopen",网页打开时自动播放AVI视频。
② start="mouseover",鼠标滑过AVI视频时播放。
(四)制作图像热区:
在<img>标记中使用usemap属性,利用<map></map>定义热区。
语法格式:<img src="File_name" usemap="#映像名">
<map name="映像名">
<area shape="value" coords="value" href="File_name" alt="value" target=” ”>
</map>
属性:shape定义热区形状。
shape="rect"(矩形);shape="circle"(圆形);shape="poly"(多边形)。
coords定义热区坐标。
十、表格(重点):
(一)表格标记:
语法格式:
<table width="value" height="value" border="value" bordercolor="value"
bordercolorlight="value" bordercolordark="value" bgcolor="value"
background="File_name" cellspacing="value" cellpadding="value"
align="value" frame="value" rules="value">
<tr> <!--tr是表格的行标记-->
<td></td> <!--td是表格的单元格标记-->
<td></td>
</tr>
<tr>
</tr>
</table>
属性:width宽度,单位为像素或百分比。
height高度,单位为像素或百分比。
border边框大小,默认为0,单位为像素。
bordercolor边框颜色。
bordercolorlight亮边框颜色,表格左上边框和单元格右下边框的颜色。
bordercolordark暗边框颜色,表格右下边框和单元格左上边框的颜色。
亮边框颜色、暗边框颜色可以覆盖边框颜色。
bgcolor背景颜色。
background背景图片。
cellspacing单元格间距,单元格与单元格之间的距离。
cellpadding单元格边距,单元格内容与单元格边框的距离。
align表格对齐方式,左对齐(left)、右对齐(right)、居中(center)。
frame边框样式。
frame属性取值 | 描述 |
Above | 显示上边框。 |
Below | 显示下边框。 |
Border | 显示上下左右边框。 |
Box | 显示上下左右边框。 |
Hsides | 显示上下边框。 |
Lhs | 显示左边框。 |
Rhs | 显示右边框。 |
Void | 不显示边框。 |
Vsides | 显示左右边框。 |
rules内部边框样式。
rules属性取值 | 描述 |
All | 显示所有内部边框。 |
Cols | 仅显示列边框。 |
groups | 显示介于行列间的边框。 |
none | 不显示内部边框。 |
rows | 仅显示行边框。 |
(二)表格标题与表格表头标记:
1.表格标题:
语法格式:<caption align="value" valign="value">文字</caption>
属性:align指定表格标题的水平对齐,左对齐(left)、右对齐(right)、居中(center)。
valign指定表格标题的垂直对齐,居上(top)、居底(bottom)。
2.表格表头
语法格式:<th>文字</th>
说明:定义为表格表头的行的内容居中并加粗显示。
(三)行标记:
语法格式:<tr></tr>
属性:
属性 | 描述 |
align | 行内容的水平对齐。 |
valign | 行内容的垂直对齐。 |
bgcolor | 行的背景颜色。 |
bordercolor | 行的边框颜色。 |
bordercolorlight | 行的亮边框颜色。 |
bordercolordark | 行的暗边框颜色。 |
说明:(1).bordercolorlight指行的单元格的右下边框颜色,该属性可以覆盖<table>标记的亮边框颜色属性。
(2).bordercolordark指行的单元格的左上边框颜色,该属性可以覆盖<table>标记的暗边框颜色属性。
(3).align取值为左对齐(left)、右对齐(right)、居中(center)。
(4).valign取值为居上(top)、居中(middle)、居下(bottom)。
(四)单元格标记:
语法格式:<td>内容</td>
属性:
属性 | 描述 |
align | 单元格内容的水平对齐。 |
valign | 单元格内容的垂直对齐。 |
bgcolor | 单元格的背景颜色。 |
bordercolor | 单元格的边框颜色。 |
bordercolorlight | 单元格的亮边框颜色。 |
bordercolordark | 单元格的暗边框颜色。 |
background | 单元格的背景图片。 |
width | 单元格的宽度。 |
height | 单元格高度。 |
rowspan | 单元格跨行属性。 |
colspan | 单元格跨列属性。 |
说明:(1).bordercolorlight指单元格右下边框颜色,该属性可以覆盖<table>标记、<tr>标记的亮边框颜色属性。
(2).bordercolordark指单元格左上边框颜色,该属性可以覆盖<table>标记、<tr>标记的暗边框颜色属性。
(3).align取值为左对齐(left)、右对齐(right)、居中(center)。
(4).valign取值为居上(top)、居中(middle)、居下(bottom)。
(5).rowspan设置单元格在水平方向跨过多少单元格。
(6).colspan设置单元格在垂直方向跨过多少单元格。
(7).以上属性<th>表格表头标记也存在,相应含义与上述描述类似。
总结:表格的完整格式为:
<table>
<caption>表格标题</caption>
<tr>
<th>表格表头</th>
</tr>
<tr>
<td>表格单元格</td>
</tr>
</table>
十一、表单(重点):
(一)表单标记:
语法格式:<form action="URL" name="Form_name" method="value">
</form>
属性:action指定表单处理程序的位置。
name指定表单的名称。
method定义表单从浏览器传送到服务器的方法。
① method="get",将表单内容附加在URL地址之后传送给服务器。
特点:对提交信息长度有限制,不得超过8192个字符;
此方法不具有保密性;
此方法不可传输非ASCII字符;
若没有此属性,默认为get方法。
② method="post",将表单内容包含在表单主题中传送给服务器。
特点:该方法没有字符的限制;
这是一种邮寄的方法,在浏览器地址栏不显示任何信息。
在<form></form>之间,可以有以下四个标记:
标记 | 指示的控件 |
<input> | 文本域、密码域、文件域、隐藏域、图像域、复选框、单选框、按钮。 |
<select> | 菜单、列表。 |
<option> | 在<select></select>之间指定菜单项、列表项。 |
<textarea> | 多行文本域。 |
(二)输入标记:
语法格式:<input name="Field_name" type="Type_name">
属性:name指定域的名称。
type指定域的类型。
type属性值 | 域类型 | type属性值 | 域类型 |
text | 文本域 | checkbox | 复选框 |
password | 密码域 | radio | 单选框 |
File | 文件域 | button | 普通按钮 |
hidden | 隐藏域 | submit | 确认按钮 |
image | 图像域 | reset | 重置按钮 |
1.文本域
语法格式:<input type="text" maxlength="value" size="value" value="Default_Value" placeholder="请输入用户名"
name="Text_name" readonly="readonly">
属性:maxlength文本域的最大输入字符数,想要更精确的控制文本框里的值,还需要书写js代码,正则表达式。
size文本域的宽度,单位为字符。
value文本域的默认值。
placeholder是对输入的内容进行提示。
name就是对文本框起的名字,作用:后台在获取用户所输入的值的时候,需要根据名字来进行获取值。
readonly只读属性,不能修改文本框中的值。readonly="readonly"
对于这种属性名与属性值一样的,可以省略
2.密码域:
语法格式:<input type="password" maxlength="value" size="value" name="Password_name">
属性同文本域。
3.文件域:
语法格式:<input type="file" name="File_name">
4.隐藏域:
语法格式:<input type="hidden" name="Hidden_name" value="value">
注意:隐藏域在表单中不显示,但是隐藏域的信息被一同发送到服务器上。
5.图像域:
语法格式:<input type="image" src="Image_URL" name="Image_name">
属性:src指定图像域中图像的URL。
注意:图像域是一个具有按钮功能的图像。
6.复选框:
语法格式:<input type="checkbox" value="value" checked name="Checkbox_name[]">
属性:value表示选中项目后传送到服务器端的值。
checked拥有该项表示该项目默认为选中。
7.单选框:
语法格式:<input type="radio" value="value" checked name="Radio_name">
属性:value表示选中项目后传送到服务器端的值。
checked拥有该项表示该项目默认为选中。
注意:表单中多个name属性相同取值的单选框之间关系互斥。
8.普通按钮:
语法格式:<input type="button" value="value" name="Button_name">
属性:value显示在按钮上的文字。
<button>按钮上的文字</button>
在form表单中的话也是可以提交的,不在表单中就是一个普通按钮。
9.确认按钮:
语法格式:<input type="submit" value="value" name="Submit_name">
10.重置按钮:
语法格式:<input type="reset" value="value" name="Reset_name">
(三)菜单标记:
语法格式:<select name="Select_name[]">
<option value="value" selected>条目1
<option value="value">条目2
<option value="value">条目3
</select>
属性:
name菜单的名称
value列表或菜单中某一条目的选项值。
selected默认被选中。
(四)多行文本标记:
语法格式:
<textarea rows="value" cols="value" name="Textarea_name" >默认值</textarea>
属性:rows多行文本域的行数。
cols多行文本域的列数。
(五)Fieldset标签
表单组合标签,仅仅用于表单的组合。只是语义层面的事情。
Legend标签用于组合标签的标题。
(六)、Label标签
可以让标签文本点击的时候让label指向的标签表单标签获得焦点。
两种实现方式:
- 使用for属性指向表单标签
- 用lable标签包裹表单标签。
十二、框架:
(一)框架的概念:
1.定义:把浏览器划分为若干个区域,每个区域可以分别显示不同的网页。
2.框架的结构:框架集+框架
3.框架的特点:① 框架集中的框架都是各自独立的页面。
② 框架集页面中框架集标记代替<body>标记。
③ 使用框架网页主要的目的是创建链接的结构,链接的目标(target)属性会出现框架集中的框架。
(二)带有框架集的页面的基本格式:
<html>
<head>
文件头部分
<title>网页标题</title>
</head>
<frameset> <!--框架集标记-->
文件框架部分
<frame> <!--框架标记-->
<frame>
</frameset>
</html>
(三)框架集标记:
语法格式:<frameset cols="value,value,…" rows="value,value,…" framespacing="value"
bordercolor="value">
</frameset>
框架集主要的分割方法有以下三种:
左右分割窗口(使用cols属性)、上下分割窗口(使用rows属性)、嵌套分割窗口。
属性:framespacing设定框架集的边框宽度,单位为像素。
bordercolor设定框架集的边框颜色。
(1).左右分割窗口:
例1:<frameset cols="30%,70%">
<frame>
<frame>
</frameset>
该例将框架集分割成了两个框架,第一个占整个页面的30%,第二个占整个页面的70%。
(2).上下分割窗口:
例2:<frameset rows="20%,60%,*">
<frame>
<frame>
<frame>
该例把框架集分割成了三个框架,第一个占整个页面的20%,第二个占整个页面的60%,剩余的部分(用星号*表示)是第三个框架。
(3).嵌套分割窗口:
例3: <frameset cols="20%,*">
<frame>
<frameset rows="20%,*">
<frame>
<frame>
</frameset>
</frameset>
该例把框架集分成了2个框架,第一个占整个页面的20%,剩余的部分是第二个框架;又把第二个框架继续分为2行,第一行占20%,剩余的是第二个框架。
(四)框架标记:
语法格式:<frame src="File_URL" frameborder="0或1" scrolling="value" noresize
marginwidth="value" marginheight="value" name="Frame_name">
属性:src设置框架显示的文件路径。
frameborder设置框架边框是否显示。
frameborder="0",框架不显示边框。
frameborder="1",框架显示边框。
scrolling设置框架滚动条是否显示。
scrolling="yes",显示滚动条。
scrolling="no",不显示滚动条。
scrolling="auto",根据页面长度自动判断是否显示滚动条。
noresize控制框架是否可以通过拖动框架边框调整框架尺寸。带有该属性的不能调整尺寸。
marginwidth框架边缘宽度,单位为像素。
marginheight框架边缘高度,单位为像素。
框架实例:
注意事项:使用框架在制作布局结构的时候,还需要注意target的值为frame的框架的name属性值,还有就是跳转出框架的打开方式【_top】。
(五)浮动框架:
语法格式:<ifrmae></iframe>
属性:
属性 | 描述 |
src | 浮动框架显示源文件的路径。 |
width | 浮动框架的宽度。 |
height | 浮动框架的高度。 |
name | 浮动框架的名称。 |
align | 浮动框架的对齐方式。 |
frameborder | 浮动框架边框。 |
scrolling | 浮动框架滚动条 |
marginwidth | 浮动框架边缘宽度。 |
marginheight | 浮动框架边缘高度。 |
以上属性的相应含义与<frame>标记的属性含义类似。
十三、多媒体元素:
(一)滚动文字:
语法格式:<marquee direction="value" behavior="value" scrollamount="value" scrolldelay="value"
width="value" height="value" loop="value" bgcolor="value"
hspace="value" vspace="value">
滚动内容
</marquee>
属性:direction设置滚动方向,向上(up)、向下(down)、向左(left)、向右(right)。
behavior设置滚动方式。
属性behavior的取值 | 描述 |
scroll | 循环往复滚动。 |
slide | 只进行一次滚动。 |
alternate | 交替进行滚动。 |
scrollamount设置滚动速度。
scrolldelay设置连续两次滚动的间隔时间,单位是毫秒。
width确定滚动范围的宽度,单位为像素。
height确定滚动范围的高度,单位为像素。
loop设置循环滚动的次数。若loop="-1",则滚动内容无限次滚动。
bgcolor滚动内容的背景颜色。
hspace设置滚动四周的水平空间距离,单位为像素。
vspace设置滚动四周的垂直空间距离,单位为像素。
οnmοuseοver="this.stop()" οnmοuseοut="this.start()"
(二)插入多媒体信息:
语法格式:<embed src="File_URL" width="value" height="value" hidden="true|no"
autostart="true|no" loop="true|no">
</embed>
属性:src设置插入多媒体文件的路径。
该文件可以是Flash文件(*.swf)、Mp3文件(*.mp3)、电影(*.mpg)、视频(*.avi)。
hidden用于控制播放面板的显示和隐藏。
hidden="true",隐藏面板。
hidden="false",显示面板。
autostart用于控制多媒体信息是否自动播放。
autostart="true",多媒体文件自动播放。
autostart="false",多媒体文件不自动播放。
loop设置多媒体文件是否自动播放。
loop="true",无限次循环播放。
loop="false",仅播放一次。
(三)背景音乐:
语法格式:<bgsound src="File_name" loop="value">
属性:src指定背景音乐的路径,该文件多为*.mid文件(合成文件)。
loop设定背景音乐的循环次数。loop="-1",则无限次循环播放。