你的位置:首页 > 网页设计

[网页设计]HTML基本元素(四)


1.HTML框架

  框架的作用就是把浏览器窗口划分成多个子窗口,而且每个子窗口都可以载入各自的HTML文档。

  *注意:html框架集与body同级,因此不能同时出现!

  框架结构标签:<frameset>,每个标签可定义行或列,rows和cols可设定每行或每列占据窗口的值。

  如果上下分割两个窗口,两行各占据浏览器窗口的50%,示例代码如下:

<frameset rows="50%,50%">  <frame src="URL" name="框架名称1"/>  <frame src="URL" name="框架名称2"/></frameset>

 

  如果左右分割两个窗口,两列各占据浏览器窗口的50%,示例代码如下:

<frameset cols="50%,50%">  <frame src="URL" name="框架名称1"/>  <frame src="URL" name="框架名称2"/></frameset>

  当浏览器不支持框架的时候显示内容:(把<noframes>标签插入到<frameset>标签中,把文字放在<body>中)

<frameset>  <noframes>    <body>当前浏览器不支持框架</body>  </noframes></frameset>

框架属性说明
属性属性值说明
rowspx,%上下分割窗口
colspx,%左右分割窗口
srcurl指定要载入到框架的页面地址
name名称框架的名称
scrollingyes,no,auto是否使用滚动条
noresizetrue,false是否禁止改变框架的尺寸大小
marginwidthpx框架内左右的空白区域
marginheightpx框架内上下的空白区域
frameborder1,0是否显示边框
framespacing0框架与框架间保留的空白的距离
border0边框

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  <iframe> 内嵌框架

  基本结构:<iframe src="URL" name="框架名"></iframe>

 

  <iframe>和<frame>的区别

  1、frame不能脱离frameset单独使用,iframe可以;

  2、frame不能放在body中,iframe可以;

  3、嵌套在frameset中的iframe必需放在body中;

  4、不嵌套在frameSet中的iframe可以随意使用;

  5、frame的高度只能通过frameset控制;iframe可以自己控制,不能通过frameset控制;

  6、frame与iframe两者可以实现的功能基本相同,不过iframe比frame具有更多的灵活性。 frame是整个页面的框架,iframe是内嵌的网页元素。

 

  一般情况下在框架中的a链接使用target属性实现框架内文件跳转时:

  href(指向打开的文件路径不需要变)

  _self              --> 自己框架页面打开“默认”

  _blank           --> 新页面打开

  _top              --> 顶级框架页面打开

  _parent         --> 到其父级框架页面打开

  framename   --> 将我们想要打开的页面在指定的框架中打开

 

2.表单

  表单使用<form>标签定义,用于向服务器传输数据。

  表单包括:input文本域、textarea多行文本域、select下拉框、等等

  基本结构:

<form action="" method="post" name="">  用户名:<input type="text" name="username" />  密 码:<input type="password" name="password" /></form>

   form标签的属性说明:

  1.name  指定表单的名称

  2.action  指定提交地址

  3.method  指定数据提交的方式(get,post)

    ①get,将表单参数直接放在URL中,用户可见,安全性低。但在编写表单时可以使用,方便查看调试。

    ②post,将表单参数传输给服务器进行处理时,可以采用加密的方法,安全性高。

  4.enctype  规定在发送到服务器之前应该如何对表单数据进行编码

  5.target  指定打开方式

 

  1)<input>输入框

    *所有input标签都应该嵌套在<form>中,以保证显示该有的效果。

说明
属性说明
typeinput元素类型
nameinput元素名称
valueinput元素的值
sizeinput元素的宽度
readonly是否只读
maxlength输入字符的字符长度
disabled是否禁用

 

 

 

 

 

 

 

 

 

  ○ 文本框

  用户名:

<input type="text" name="username" value="" />

 

  ○ 密码框

  密码:

<input type="password"name="password" value="" />

 

  ○ 单选按钮

  

<input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0"/>女

 

  ○ 复选框

   听音乐 看电影 玩游戏

<input type="checkbox" name="love" value="music" /> 听音乐<input type="checkbox" name="love" value="movie"/> 看电影<input type="checkbox" name="love" value="game"/> 玩游戏

 

  ○ 按钮

   

普通按钮:<input type="button" name="btn" value="确定"/>提交按钮:<input type="submit" name="submit" value="提交"/>重置按钮:<input type="reset" name="reset" value="重置"/>图片按钮:<input type="image" name="img_btn" src="URL"/>

 

  ○ 隐藏域

  隐藏域用于在程序发送时没必要让用户看到特定值的时候使用。

<input type="hidden" name="uid" value="10"/>

 

  ○ 上传文件

  

<input type="file" name="photo"/>

 

  ○ 数字键盘

  

手机号码:<input type="number" name="phone" />

 

  ○ 颜色选择器

  

<input type="color" name="color"/>

 

  ○ 日期选择器

  

<input type="date" name="date"/>

 

  ○ 时间选择器

  

<input type="time" name="time"/>

 

  ○ 日期时间选择器

  

<input type="datetime-local" name="datetime-local""/>

 

  ○ 月选择器

  

<input type="month" name="month"/>

 

  ○ 周选择器

  

<input type="week" name="week" />

 

  ○ E-mail地址文本框

  

<input type="email" name="email"/>

 

   ○ 滑动条

  

<input type="range" min="0" max="10" value="0"/>

 

  ○ 搜索框

  
<input type="search" name="search" /><input type="submit" name="submit" value="搜索"/>

 

  ○ 地址输入框

  
<input type="url" name="url" /><input type="submit" name="submit" value="提交" />

 

  ○ 自动完成(HTML5新属性,请自行复制代码查看效果)

<input type="search" name="keywords" autocompulete="on"><input type="submit" name="submit" value="提交" />

   *自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

 

  ○ 自动焦点(HTML5新属性,请自行复制代码查看效果)

<input type="search" name="keywords" autofocus="on"/><input type="submit" name="submit" value="提交" />

   *规定当页面加载时按钮应当自动地获得焦点。

 

  ○ 提示文本(占位文本)(HTML5新属性,请自行复制代码查看效果)

用户名:<input type="text" name="username" placeholder="请输入用户名..." />

   *该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

 

  ○ 必填项(HTML5新属性,请自行复制代码查看效果)

*<input type="text" name="username" required/><input type="submit" name="submit" value="提交"/>

   *如果使用该属性,则字段是必填(或必选)的。

 

  ○ 输入下拉框结合(HTML5新属性,请自行复制代码查看效果)

<input list="book" placeholder="请输入..."/><datalist id="book">  <option value="HTML">  <option value="CSS"></datalist>

 

 

  2)<textarea>多行文本域

   

<textarea name="content" rows="5" cols="50"> </textarea>

  *rows 指定文本框的高度, cols 指定文本框的宽度, 单位是字符

 

  3)<select>下拉框

  

<select name="city">  <option value="0">请选择</option>  <option value="dg">东莞</option>  <option value="gz">广州</option></select>

   *<select>元素中的<option>标签用于定义列表中的可用选项。

说明
属性说明
name下拉列表框的名称
size下拉列表框的显示行数
multiple是否多选
disabled是否禁用
selected设置默认选中的选项
value选项的值  

 

 

 

 

 

 

 

 

  4)<optgroup>下拉框分组

    <optgroup> 标签定义选项组,对相关的选项进行组合会使处理更加容易。

    

<select name="city">  <optgroup label="主要城市">    <option value="1">广州</option>    <option value="2">北京</option>  </optgroup>  <optgroup label="其他城市">    <option value="3">深圳</option>    <option value="4">珠海</option>  </optgroup></select>

  *label 指定组合选项名称

 

  5)<label>

    <label>标签的作用是将输入项或选项及其标签文字关联起来。

    

<input type="radio" name="sex" value="1" id="male" /><label for="male">男</label><input type="radio" name="sex" value="0" id="female" /><label for="female">女</label>

    *注意:请把"for"属性的值设置为相关元素的"id"属性的值。