HTML学习笔记（四）
2011-07-16 08:54
369 查看
八 层的应用
1，图层的创建<div>
图层也是网页制作中用于定位元素或者布局的一种技术，但是图层表格的布局更加的灵活，它能够将图层的内容摆放到浏览器的任意位置，同时放入到层中的HTML元素包括：文字，图像，动画甚至是图层。一个网页文件中可以使用多个层，层与层之间可以重叠，在网页制作中，使用层可以将网页中的任何元素布局到网页中的任何位置，同时可以任何方式重叠。
基本语法：
在进行层的定义时，需要将层得样式同时定义，否则在网页中不会显示出来。
实例代码：
2，创建嵌套图层
在网页制作中，不仅只有表格可以实现嵌套的功能，图层也可以实现嵌套的功能，但是层的嵌套不想表格的那么复杂，它不需要在层标记中嵌套层标记，只要添加层的标记，进行属性上的设置就可以实现。使用嵌套图层最主要的特点就是可以保证子层永远位于其父层之上。
基本语法：
图层的嵌套只要插入多个成对的<div></div>，设置好层的样式属性就可以完成层的嵌套
3，层的属性设置
在定义图层时，需要设计好图层的一系列属性，常见的属性如表所示
图层定义常见属性
基本语法：
<body>
<div id="layer1" style="position:absolute; left:29px; z-index:1; top:12px; width:165px; height:104px;"></div>
</body>
九 框架的应用
框架实在一个网页中显示多个网页的技术，通过超链接可以为框架之间建立内容之间的联系，从而实现页面导航的功能
框架的主要作用是在一个浏览器窗口显示多个网页，每个区域显示的网页内容也可以不同
1，框架的基本结构
框架的基本结构分为框架集和框架两个部分。框架集指在一个网页文件中定义一组框架结构，包括定义一个窗口中显示的框架数，框架的尺寸以及框架中载入的内容，框架指在网页文件上定义的一个显示区域
基本语法：
在网页文件中，使用框架集得页面的<body>标记将被<frameset>标记代替，然后再利用<frame>标记去定义框架结构，常见的分割框架的方式有：左右分割，上下分割，嵌套分割
2，设置框架源文件属性 src
在HTML文件中，利用src属性可以设置框架中显示文件的路径
基本语法：
3，添加框架名称 name
在HTML文件中，利用框架<frame>标记中的name属性可以为框架自定义一个名称
在HTML文件中，利用框架<frame>标记中的name属性可以为框架自定义一个名称，不会影响到框架的显示效果
4，设置框架边框 frameborder
在HTML文件中，利用框架<frame>标记中的frameborder属性可以设置边框的属性
基本语法：
在HTML文件中，利用框架<frame>标记中的frameborder属性设置框架显示效果时，只能设置框架的边框是否显示，frameborder值为0时，不显示边框；frameborder值为1时显示边框
5，显示框架滚动条scrolling
基本语法：
在HTML文件中，利用框架<frame>标记中的scrolling属性有三种方式设置滚动条
"yes"添加滚动条
”no“不添加滚动条
”auto“自动添加滚动条
6，调整框架尺寸noresize
在HTML文件中，利用框架<frame>标记中的noresize属性可以设置框架的尺寸
基本语法：
在HTML文件中，利用框架<frame>标记中的noresize属性设置不允许改变左侧框架的尺寸
实例代码：
7， 设置框架边缘宽度与高度 marginwidth与marginheight
在HTML文件中，网页的页面边距可以设置，框架和页面一样，利用框架<frame>标记中的marginwidth属性可以设置框架左右边缘的宽度，marginheight属性可以设置框架上下边缘的宽度
基本语法：
在HTML文件中，利用框架<frame>标记中的marginwidth和marginheight属性设置不允许改变左侧框架的尺寸
8，添加不支持框架标记<noframes>
虽然框架在网页中使用很广泛，但是有一些版本较低的浏览器不支持框架，网站开发人员只能制作浏览器不支持技术，在网页中使用<noframe>标记，当浏览器不支持框架集文件时，会自动搜寻网页中的<noframe>标记，并显示标记中的内容
基本语法：
实例代码：
9，设置框架集<frameset>
框架集指在一个网页中定义一组框架结构，包括定义一个窗口中显示的框架数，框架的尺寸以及框架中载入的内容，其属性与框架属性大不相同，具体如表中所示
框架集属性
10，设置框架集边框宽度 framespacing
在HTML文件中，利用框架集<frame>标记中的framespacing设置边框宽度
基本语法：
<frameset framespacing="">
<frame src="URL" frameborder="value">
<frame src="URL" frameborder="value">
</frameset>
11，设置边框集边框颜色
基本语法：
12，左右分割边框cols
在HTML文件中，利用cols属性将网页进行左右分割
基本语法：
13，上下分割rows
在HTML文件中利用rows属性将网页进行上下分割
基本语法”：
14，浮动框架<iframe>
浮动框架是框架页面重的一种特例，在浏览器窗口中嵌入子窗口，插入浮动框架使用成对的<iframe></iframe>标记，其标记具体属性如表所示
浮动框架属性
15，设置浮动框架源文件属性
在HTML文件中，利用src属性可以设置框架中显示文件的路径
基本语法：
实例代码：
16，添加浮动框架名称name
在HTML文件中，可以利用<iframe>标记中的name属性为浮动框架添加名称，不会影响框架的显示效果
基本语法：
17，设置浮动框架的宽度和高度
在HTML文件中，网页的边距可以设置，浮动框架和页面一样，利用浮动框架<iframe>标记中的width属性可以设置框架宽度，height属性可以设置浮动框架的高度
基本语法：
18，设置浮动框架的对齐方式align
基本语法：
19，普通框架建立连接
在网页文件中，给框架建立连接会使网页更加的美观，用户使用更加的方便快捷
基本语法：
十 表单的应用
1，表单标记<form>
在HTML中，只要在需要使用表单的地方插入成对的表单标记<form></form>，就可以很简单地完成表单的插入
基本语法：
<form name="" method="" action="" enctype="" target="">
</form>
表单标记的属性及其说明
2，信息输入input
表单是网页中提供的交互式操作手段，当然用户必须在表单控件中输入必要的信息，发送到服务器请求响应，然后服务器将结果返回给用户，这样才体现了交互性，下面将详细介绍各个控件，其中<input>标记是表单输入信息常用的标记
基本语法：
<form><input name="" type=""></form>
在<input>标记中，name属性显示插入的控件名称，type属性显示插入的控件类型，例如：文本框，单选按钮，复选框
3插入文本框text
<input>标记中type属性值text用来插入表单中的单行文本框，在此行文本框中可以输入任何类型数据类型，但是输入的数据将是单行显示，不会换行。
基本语法：
在表单中插入文本框，只要将<input>标记中的type属性值设为text就可以插入单行的文本框
实例代码：
maxlength设置最长输入的字符为8个，size设置控件的宽度为5，value设置默认值为1
4，插入密码框password
<input>标记中的type属性值password用来插入表单中的密码框，在密码框中可以输入任意类型的数据，这些数据都将以小圆点的形式显示，提高密码的安全性
基本语法：
<form>
<input name="password" type="password" maxlength="" size="">
</form>
5，插入文件域file
<input>标记中的type属性值file用来插入表单中的文件域，在文件域中可以添加整个文件，例如，发送邮件时，添加附件都需要使用文件域来实现
基本语法：
<form>
<input name="file" type="file">
</form>
6，插入复选框checkbox
<input>标记中的type属性值checkbox用来插入表单中的复选框，用户可以利用网页中的复选框进行多项的选择
基本语法：
<form>
<input name="text" type="checkbox" id="" value="">
</form>
其中id为可选项
插入单选按钮radio
<input>属性值radio用来插入表单中的单选按钮，也是一种选择性的按钮，在选中状态时，按钮中心会有一个小圆点
基本语法：
<form>'
<input name="r1" type="radio" id="" value="">
</form>
7，插入标准按钮button
<input>标记中的type属性值button用来插入表单中的标准按钮，其中标准按钮的value属性，可以根据制作者的需要，任意设置属性值
基本语法：
<form>
<input name="b1" type="button" id="c1" value="标准按钮">
</form>
8，插入提交按钮submit
当用户填完表单对象中的信息后，需要有一个提交信息的动作，需要使用表单中的提交按钮，<input>标记中的type属性submit用来插入表单中的提交按钮
基本语法：
<form>
<input name="submit" type="submit" value="提交">
</form>
9，插入重置按钮reset
单用户填完表单后，对自己填过的信息不满意时，可以使用重置按钮，重新输入信息。<input>标记中的type属性值reset用来插入表单中的重置按钮
基本语法：
<form>
<input name="reset" type="reset" value="重置">
</form>
10，插入图像域image
用户在浏览网页时，有时会遇到某些网站的按钮不是普通样式的情况，而是用一张图像做的提交按钮或者其他类型的按钮，效果美观，这些功能都是通过插入图像域来实现的。<input>标记中type属性值image用来插入表单中的图像域
基本语法：
<form>
<input name="image" type="image" src="url" width="" height="" border="">
</form>
11，插入文字域textarea
用户有时需要一个多行的文字域，用来输入更多的文字信息，行间可以换行，并将这些信息作为表单元素的值提交到服务器，在表单中插入文字域，只要插入成对的文字域标记<textarea></textarea>就可以插入文字域，其中“wrap”和“id”为任选项
基本语法：
<form>
<textarea name="text" rows="" cols="" wrap="" id="">
</textarea>
12，插入隐藏域hidden
隐藏域在网页中是对用户不可见的，用户单击提交按钮提交表单时，隐藏域的信息也被一起发送到服务器，<input>标记中ytpe属性值hidden用来插入表单中的隐藏域
基本语法：
<form>
<input name="h1" type="hidden" value="">
</form>
13，插入下拉菜单<select>和列表项option
在HTML文件中使用<select>,<option>可以实现下拉菜单和列表项
基本语法：
<form>
<select name="" size="">
<option value="">
<option value="">
...
</select>
</form>
在表达中插入下拉菜单和列表项，只要插入成对的<select></select>，其中嵌套<option>，就可以插入下拉菜单和列表
1，图层的创建<div>
图层也是网页制作中用于定位元素或者布局的一种技术，但是图层表格的布局更加的灵活，它能够将图层的内容摆放到浏览器的任意位置，同时放入到层中的HTML元素包括：文字，图像，动画甚至是图层。一个网页文件中可以使用多个层，层与层之间可以重叠，在网页制作中，使用层可以将网页中的任何元素布局到网页中的任何位置，同时可以任何方式重叠。
基本语法：
<body> <div id="layer1" style="position:absolute;left:29px;top:12px;width:165px;height:104px;"> </div> </body>
在进行层的定义时，需要将层得样式同时定义，否则在网页中不会显示出来。
实例代码：
<html> <head> <title>层的创建</title> </head> <body> <div id="layer1" style="position:absolute; left:29px; top:12px; width:165px; height:104px; background-color:yellow; layer-background-color:green; border:1px none black"> <p>技术实力<br> 专业创新出版社 </p> </div> </body </html>
2，创建嵌套图层
在网页制作中，不仅只有表格可以实现嵌套的功能，图层也可以实现嵌套的功能，但是层的嵌套不想表格的那么复杂，它不需要在层标记中嵌套层标记，只要添加层的标记，进行属性上的设置就可以实现。使用嵌套图层最主要的特点就是可以保证子层永远位于其父层之上。
基本语法：
<body> <div id="layer1" style="position:absolute; z-index:1; left=29px; top:12px; width=165px; height:104px;"></div> <div id="layer1" style="position:absolute; z-index:1; left=29px; top:12px; width=165px; height:104px;"></div> </body>
图层的嵌套只要插入多个成对的<div></div>，设置好层的样式属性就可以完成层的嵌套
3，层的属性设置
在定义图层时，需要设计好图层的一系列属性，常见的属性如表所示
| 属性 | 属性 | 说明 |
| id | 层的名称 | |
| style | position | 定位 |
| width | 设置图层宽度 | |
| height | 设置图层高度 | |
| left | 设置图层左边距 | |
| top | 设置图层顶端间距 | |
| layer-background-color | 设置图层背景颜色 |
<body>
<div id="layer1" style="position:absolute; left:29px; z-index:1; top:12px; width:165px; height:104px;"></div>
</body>
九 框架的应用
框架实在一个网页中显示多个网页的技术，通过超链接可以为框架之间建立内容之间的联系，从而实现页面导航的功能
框架的主要作用是在一个浏览器窗口显示多个网页，每个区域显示的网页内容也可以不同
1，框架的基本结构
框架的基本结构分为框架集和框架两个部分。框架集指在一个网页文件中定义一组框架结构，包括定义一个窗口中显示的框架数，框架的尺寸以及框架中载入的内容，框架指在网页文件上定义的一个显示区域
基本语法：
<html> <head> <title>框架的基本结构</title> </head> <frameset> <frame> <frame> ... </frameset> </html>
在网页文件中，使用框架集得页面的<body>标记将被<frameset>标记代替，然后再利用<frame>标记去定义框架结构，常见的分割框架的方式有：左右分割，上下分割，嵌套分割
2，设置框架源文件属性 src
在HTML文件中，利用src属性可以设置框架中显示文件的路径
基本语法：
<frameset> <frame src="URL"> <frame src="URL"> </frameset>
3，添加框架名称 name
在HTML文件中，利用框架<frame>标记中的name属性可以为框架自定义一个名称
<frameset> <frame src="URL" name=""> <frame src="URL" name=""> </frameset>
在HTML文件中，利用框架<frame>标记中的name属性可以为框架自定义一个名称，不会影响到框架的显示效果
4，设置框架边框 frameborder
在HTML文件中，利用框架<frame>标记中的frameborder属性可以设置边框的属性
基本语法：
<frameset> <frame src="URL" frameborder="value"> <frame src="URL" frameborder="value"> </frameset>
在HTML文件中，利用框架<frame>标记中的frameborder属性设置框架显示效果时，只能设置框架的边框是否显示，frameborder值为0时，不显示边框；frameborder值为1时显示边框
5，显示框架滚动条scrolling
基本语法：
<frameset> <frame src="URL" frameborder="value" scrolling="value"> <frame src="URL" frameborder="value" scrolling="value"> </frameset>
在HTML文件中，利用框架<frame>标记中的scrolling属性有三种方式设置滚动条
"yes"添加滚动条
”no“不添加滚动条
”auto“自动添加滚动条
6，调整框架尺寸noresize
在HTML文件中，利用框架<frame>标记中的noresize属性可以设置框架的尺寸
基本语法：
<frameset> <frame src="URL" noresize> <frame src="URL"> </frameset>
在HTML文件中，利用框架<frame>标记中的noresize属性设置不允许改变左侧框架的尺寸
实例代码：
<html> <head> <title>调整框架的尺寸</title> </head> <frameset cols="380*,380*"> <frame src="http://www.bing.com/" noresize> <frame src="http://www.google.com"> </frameset> </html>
7， 设置框架边缘宽度与高度 marginwidth与marginheight
在HTML文件中，网页的页面边距可以设置，框架和页面一样，利用框架<frame>标记中的marginwidth属性可以设置框架左右边缘的宽度，marginheight属性可以设置框架上下边缘的宽度
基本语法：
<frameset> <frame src="URL" marginwidth="value" marginheight="value"> <frame src="URL"> </frameset>
在HTML文件中，利用框架<frame>标记中的marginwidth和marginheight属性设置不允许改变左侧框架的尺寸
8，添加不支持框架标记<noframes>
虽然框架在网页中使用很广泛，但是有一些版本较低的浏览器不支持框架，网站开发人员只能制作浏览器不支持技术，在网页中使用<noframe>标记，当浏览器不支持框架集文件时，会自动搜寻网页中的<noframe>标记，并显示标记中的内容
基本语法：
<frame src="URL"> <frame src="URL"> <noframes> ... <noframes>
实例代码：
<html> <head> <title>添加不支持框架标记</title> </head> <frameset cols="380*,380*"> <frame src="http://www.bing.com/"> <frame src="http://www.google.com"> <noframes> 很抱歉，由于你的浏览器版本太低，不支持框架标记 </noframes> </frameset> </html>
9，设置框架集<frameset>
框架集指在一个网页中定义一组框架结构，包括定义一个窗口中显示的框架数，框架的尺寸以及框架中载入的内容，其属性与框架属性大不相同，具体如表中所示
| 属性 | 说明 |
| frameborder | 设置框架集边框的显示效果 |
| framespacing | 设置框架集边框的宽度 |
| framecolor | 设置框架集边框的颜色 |
| rows | 设置框架集上下分割 |
| cols | 设置框架集左右分割 |
在HTML文件中，利用框架集<frame>标记中的framespacing设置边框宽度
基本语法：
<frameset framespacing="">
<frame src="URL" frameborder="value">
<frame src="URL" frameborder="value">
</frameset>
11，设置边框集边框颜色
基本语法：
<frameset bordercolor=""> <frame src="URL"> <frame src="URL"> </frameset>
12，左右分割边框cols
在HTML文件中，利用cols属性将网页进行左右分割
基本语法：
<frameset cols="*,*"> <frame src="URL"> <frame src=URL"> </frameset>
13，上下分割rows
在HTML文件中利用rows属性将网页进行上下分割
基本语法”：
<frameset rows="*,*"> <frame src="URL"> <frame src=URL"> </frameset>
14，浮动框架<iframe>
浮动框架是框架页面重的一种特例，在浏览器窗口中嵌入子窗口，插入浮动框架使用成对的<iframe></iframe>标记，其标记具体属性如表所示
| 属性 | 说明 |
| src | 设置源文件属性 |
| width | 设置浮动框架窗口宽度 |
| height | 设置浮动框架窗口高度 |
| name | 设置框架名称 |
| align | 设置框架对齐方式 |
| frameborder | 设置框架边框 |
| framespacing | 设置框架边框宽度 |
| scrolling | 设置框架滚动条 |
| noresize | 设置框架尺寸 |
| bordercolor | 设置边框颜色 |
| marginwidth | 设置框架左右边距 |
| marginheight | 设置框架上下边距 |
在HTML文件中，利用src属性可以设置框架中显示文件的路径
基本语法：
<body> <iframe src="URL"></iframe> </body>
实例代码：
<html> <head> <title>设置框架源文件属性</title> </head> <body> <iframe src="http://www.bing.com/"> </iframe> </body> </html>
16，添加浮动框架名称name
在HTML文件中，可以利用<iframe>标记中的name属性为浮动框架添加名称，不会影响框架的显示效果
基本语法：
<body> <iframe src="URL" name=""> </iframe> </body>
17，设置浮动框架的宽度和高度
在HTML文件中，网页的边距可以设置，浮动框架和页面一样，利用浮动框架<iframe>标记中的width属性可以设置框架宽度，height属性可以设置浮动框架的高度
基本语法：
<body> <iframe src="URL" width="" height=""> </iframe> </body>
18，设置浮动框架的对齐方式align
基本语法：
<body> <iframe src="URL" align="center"> </iframe> </body>
19，普通框架建立连接
在网页文件中，给框架建立连接会使网页更加的美观，用户使用更加的方便快捷
基本语法：
<frameset cols="380*,380*"> <frame src="left.html"> <frame src="right.html" name="right"> </frameset>
十 表单的应用
1，表单标记<form>
在HTML中，只要在需要使用表单的地方插入成对的表单标记<form></form>，就可以很简单地完成表单的插入
基本语法：
<form name="" method="" action="" enctype="" target="">
</form>
| 属性 | 说明 |
| name | 设置表单的名称 |
| method | 设置表单的发送方法，可以是“post”或者“get” |
| action | 设置表单处理程序 |
| enctype | 设置表单编码方式 |
| target | 设置表单显示目标 |
表单是网页中提供的交互式操作手段，当然用户必须在表单控件中输入必要的信息，发送到服务器请求响应，然后服务器将结果返回给用户，这样才体现了交互性，下面将详细介绍各个控件，其中<input>标记是表单输入信息常用的标记
基本语法：
<form><input name="" type=""></form>
在<input>标记中，name属性显示插入的控件名称，type属性显示插入的控件类型，例如：文本框，单选按钮，复选框
3插入文本框text
<input>标记中type属性值text用来插入表单中的单行文本框，在此行文本框中可以输入任何类型数据类型，但是输入的数据将是单行显示，不会换行。
基本语法：
<form> <input name="text" type="text" maxlength="" size="" value=""> </form>
在表单中插入文本框，只要将<input>标记中的type属性值设为text就可以插入单行的文本框
实例代码：
<html> <head> <title>插入文本框</title> </head> <body> <form> <input name="text" type="text" maxlength="8" size="5" value="1"> </form> </body> </html>
maxlength设置最长输入的字符为8个，size设置控件的宽度为5，value设置默认值为1
4，插入密码框password
<input>标记中的type属性值password用来插入表单中的密码框，在密码框中可以输入任意类型的数据，这些数据都将以小圆点的形式显示，提高密码的安全性
基本语法：
<form>
<input name="password" type="password" maxlength="" size="">
</form>
5，插入文件域file
<input>标记中的type属性值file用来插入表单中的文件域，在文件域中可以添加整个文件，例如，发送邮件时，添加附件都需要使用文件域来实现
基本语法：
<form>
<input name="file" type="file">
</form>
6，插入复选框checkbox
<input>标记中的type属性值checkbox用来插入表单中的复选框，用户可以利用网页中的复选框进行多项的选择
基本语法：
<form>
<input name="text" type="checkbox" id="" value="">
</form>
其中id为可选项
插入单选按钮radio
<input>属性值radio用来插入表单中的单选按钮，也是一种选择性的按钮，在选中状态时，按钮中心会有一个小圆点
基本语法：
<form>'
<input name="r1" type="radio" id="" value="">
</form>
7，插入标准按钮button
<input>标记中的type属性值button用来插入表单中的标准按钮，其中标准按钮的value属性，可以根据制作者的需要，任意设置属性值
基本语法：
<form>
<input name="b1" type="button" id="c1" value="标准按钮">
</form>
8，插入提交按钮submit
当用户填完表单对象中的信息后，需要有一个提交信息的动作，需要使用表单中的提交按钮，<input>标记中的type属性submit用来插入表单中的提交按钮
基本语法：
<form>
<input name="submit" type="submit" value="提交">
</form>
9，插入重置按钮reset
单用户填完表单后，对自己填过的信息不满意时，可以使用重置按钮，重新输入信息。<input>标记中的type属性值reset用来插入表单中的重置按钮
基本语法：
<form>
<input name="reset" type="reset" value="重置">
</form>
10，插入图像域image
用户在浏览网页时，有时会遇到某些网站的按钮不是普通样式的情况，而是用一张图像做的提交按钮或者其他类型的按钮，效果美观，这些功能都是通过插入图像域来实现的。<input>标记中type属性值image用来插入表单中的图像域
基本语法：
<form>
<input name="image" type="image" src="url" width="" height="" border="">
</form>
11，插入文字域textarea
用户有时需要一个多行的文字域，用来输入更多的文字信息，行间可以换行，并将这些信息作为表单元素的值提交到服务器，在表单中插入文字域，只要插入成对的文字域标记<textarea></textarea>就可以插入文字域，其中“wrap”和“id”为任选项
基本语法：
<form>
<textarea name="text" rows="" cols="" wrap="" id="">
</textarea>
12，插入隐藏域hidden
隐藏域在网页中是对用户不可见的，用户单击提交按钮提交表单时，隐藏域的信息也被一起发送到服务器，<input>标记中ytpe属性值hidden用来插入表单中的隐藏域
基本语法：
<form>
<input name="h1" type="hidden" value="">
</form>
13，插入下拉菜单<select>和列表项option
在HTML文件中使用<select>,<option>可以实现下拉菜单和列表项
基本语法：
<form>
<select name="" size="">
<option value="">
<option value="">
...
</select>
</form>
在表达中插入下拉菜单和列表项，只要插入成对的<select></select>，其中嵌套<option>，就可以插入下拉菜单和列表
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML学习笔记（三） HTML 元素
- HTML学习笔记B六
- HTML 5 关于文件读取学习笔记
- HTML学习笔记（十六）HTML 背景
- HTML学习笔记（1）----HTM，HTML和XHTML
- HTML_学习笔记
- HTML&CSS基础学习笔记6-文本操作标签
- HTML学习笔记（三）
- HTML初步学习笔记（一）
- HTML学习笔记（一）
- HTML学习笔记
- html学习笔记
- HTML的学习笔记
- HTML学习笔记总结
- javascript学习笔记（九）：DOM操作HTML的各种方法使用
- 学习笔记2017.07.07-day5,am-HTML表单-HTML框架
- HTML/CSS学习笔记
- Android（java）学习笔记138：html嵌入到java显示乱码
- HTML学习笔记-a标签+URL+img(三)
- AngularJs学习笔记--html compiler