0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集中到服务器上.
优点:可以在任何地方进行操作而不用安装任何专门的软件,有上网终端客户端零维护.
HTML (超文本标记语言)
超文本标记语言是标记语言SGML下的一个应用,一种规范,标准. 网页本身就是一个文本文件与我们日常使用的office并无大致,只不过网页文件通过标记符号来显示网页中的各个部分;
浏览器按顺序阅读解析网页文件,然后根据标记符解释与显示其标记的内容.不同浏览器需考虑兼容性;
超文本:通俗一点就是说超越一般的文本元素,可以包含 图片 链接 音乐 程序等非文字元素
静态网页扩展名:.html 或htm
动态网页文件扩展名:.php .jsp .net等
超文本标记语言包括头(提供关于网页的信息),主体(提供网页的具体内容);
XHTML:可扩展超文本标记语言;
1.HTML结构:
<html>
html文件声明开始,告诉浏览器是html文件
<head>
<title>网页标题</title>
<head>
<body>
文件体
</body>
</html>HTML文件声明结尾
<html></html>文档的开始结束标记,告诉浏览器是什么html文件
<head></head>文档的开头部分 内容不会在浏览器文档窗口显示,但是跟SEO优化搜索相关
<title></title>定义标题,在浏览器标题栏进行显示
<body></body>之间就是网页的主体内容,body中元素包含网页中的所有显示内容(比如超文件,超链接,图像表格,列表等等).
2.html标签
html标签 是尖括号包围的关键词,通常成对出现(比如<div>和></div> <html>和</html>分别是开始与结束标签),成对出现的内容在中间
也有单独呈现的标签(单边标记),如<br/>,<hr/>,和<img src = "images/1.jpg"/>等,单独呈现的则在标签属性中进行赋值 ,如本行的img这个标签
标签可以有若干个属性,也可以不带属性.如<head>元素就不带任何属性
标签语法:
<标签名 属性1 = "属性值1" 属性2 = "属性值2"...> 内容部分</标签名>
<标签名 属性1 = "属性值1" 属性2 = "属性值2".../>
3.html标签编写规则
不区分大小写
大部分标签有结束标记
标签可以嵌套,但是要注意标记的位置
标签可以有内容或者没有内容
标签的属性可选,当标签出现属性时,必须为其赋值 赋值赋值必须包含在尖括号"<>"内部
属性与标记之间,各属性之间需要以空格进行隔开
属性值需要以双引号括起来
4.html标签------<body>属性
text 网页文本颜色
bgcolor 设定网页背景色,如:bicolor = "#ff0000"
background 设定网页背景图片,如:background = "bg.gif"
例: <body bgcolor = "#CCCCCC"></body>
<b></b>加粗效果
<i></i>斜体效果
<u></u>字符加下划线
<sub></sub>将文本定义为下标
<sup></sup>将文本定义为上标
<font></font>指定字符的字体,大小,颜色等格式
5.代码编辑器
代码编辑器分为两类:一类是IDE(集成开发环境),功能强大,语法高亮显示,自动缩进,语法提示,自动完成,版本控制等
常用工具有:
EditPlus Text editor:功能强大,小巧,占用系统资源少等特点,无代码自动补齐功能
UltraEdit :与EditPlus类似,也是一套功能强大的文本编辑器
Dreamweaver:建立web站点与应用程序专业工具,将布局功能开发工具,代码编辑组合在一起
Notepad++:小巧且有效率的文本编辑器
Zend Studio:屡获大奖的专业PHP集成开发环境,具备功能强大的专业编辑工具与调试工具;
EditPlus使用:可以通过设置用户工具将其作为C java PHP等语言的一个简单的IDE
参数设置:
工具------参数
字体设置(字号,字体,行高)
颜色设置(前景,背景)
语法颜色
布局:更改目当的位置
快捷键使用同电脑系统本身快捷键;
6.html颜色的介绍
纯单词表示:英文单词即可
10进制表示: rgb(255,0,0)
16进制表示: #FF0000,#0000FF等
RGB色彩模式:三原色也叫加色模式,数字视频中对RGB三基色进行8位编码就构成了1678万种颜色(RGB各有256级亮度),也叫真彩色,所有的设备都采用的是RGB色彩模式
注意事项:网页中推荐使用十六进制的颜色,因为十进制的颜色,在CSS中可以用,但是在<font>标记中不起作用;(十进制的颜色在不同浏览器显示效果不一致);
7.html标签 --- 排版标签
<p></p>用来创建一个段落,该元素在自动在其后创建一些空白.常用属性align:定义文本的对齐方式,属性可取值:left,center,right;
<br>产生换行,不需要结束标记
<hr>在当前位置绘制一条水平线.标签属性有align:对齐方式,可选值为:left,center,right
size:线条粗细,取值为数字,单位为像素 width:线条宽度,取值为数字,单位为像素
color:线条颜色 noshade:规定水平线的颜色呈现为纯色,而不是阴影的颜色;
<pre></pre>预排版标记<pre>将保留文本中空白(连续的空白)与换行符的信息.常用的属性width:定义文本块的最大字符数
<h1></h1>.......<h6></h6> HTML提供6种效果标签,<h1>字体最大.常用属性align:对齐方式为left,center,right;
<div></div> <div>只是一个块级元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现;
<span></span> span表示了行内元素,并无实际意义,主要通过CSS样式为其赋予不同的表现;
块级元素与行内元素的区别:
块元素就是另起一行开始渲染的元素,行内元素就不需要另起一行;
如果单独在页面中插入这两个元素,不会对页面产生任何影响.这两个是专门为定义CSS样式而生的;
8.字符实体(这里有些不明白是什么???) 特殊符号
空格  
> >
< <
& &
￥ ¥
版权 ©
注册 ®
× ×
÷ ÷
9.html标记 ----列表
<ul>
<li>内容</li>
<li>内容</li>
</ul>
type属性:disc 实心圆点,circle空心圆圈,square实心方块
<ol>
<li>内容</li>
<li>内容</li>
</ol>
属性:type编号类型,默认为整数.可选(1,A,a,I,i) 属性:start起始编号,默认为1,即由最小编号开始;
注意:如果有序列嵌套,只能嵌套在某一个<li>的内部
<dl>
<dt>定义术语</dt>
<dd>定义说明</dd>
</dl>
dl(definition list )用来创建定义列表,定义列表不使用表项元素li,
这种列表中的项由定义术语dt(definition term)与定义说明dd(definition description)组成.dl是块组元素,必须至少包含一个dt或者一个dd,dl的子元素只能是dt和dd;
列表又分为无序列表与有序列表,无序列表前面以.或句号开头,有序列表以数字 字母 阿拉伯数字,大写阿拉伯数字组成;
定义列表:定义列表相当于词条解释说明;
10.定义列表
HTML概念:"超文本"就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素.超文本标记语言的结构包括头部分(head),和主体部分(Body).其中头部(head)提供关于网页的信息,主体(body)部分提供网页的具体内容.
CSS层叠样式:
CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统的HTML的表现而言,CSS能够对网页中对象的位置排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象与模型样式编辑的能力,并能够进行初步的交互设计,是目前基于文本展示最优秀的表现设计语言.
JavaScript脚本程序
javaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言.比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果.当归服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbs,验证步骤浪费时间太多.于是Netscape的浏览器的Navigator加入了Javascript,提供了数据验证的基本功能.
11.小结
HTML结构标记:
基本标记: b i u sup sub
排版标记 br p div span h1~h6 hr
字体实例 > < & &ren
网页颜色 颜色单词 red blue orange yellow green
十六进制 #ff0000 #00ff00 #0000ff
十进制:rgb (255,0,0) rgb(0,255,0) rgb(0,0,255)
Css层叠样式表
字体标记: font-size font-family font-style
定位标记:absolute relative fixed static
浮动标记:float left float right
JavaScript 客户端脚本语言
PHP服务器编程语言
MySql数据库管理系统
Apache服务器软件
12.进制转换
十进制转成二进制
整数部分:除2取余法.即每次将整数部分除以2,余数为该位权上的数,而商继续除以2,余数又为上一位权上的数,直到商为0为止,最后读数的时候,从最后一个余数读起,一直到最前面的一个余数.
小数部分:乘2取整法,即将小数部分乘以2,然后取整数部分,剩下的小数部分乘以2,一直取到小数部分为零为止,如果除不尽取一定的精度即可;
二进制数转化成十进制
不分整数部分与小数部分 方法:按权相加法,即将二进制每位上的数乘以权(每位上的指数的常数),然后相加之和即是十进制数.
例如:将二进制数101.101转成二进制
分析:1*2^2+0*2^1+1*2^0+1*2^-1 +0*2^-2+1*2^-3 = 5.625(10);
13.<marquee>滚动文字
direction 设置文本的滚动方向,可取上下左右
behavior 滚动方式,可取值alternate弹动,scroll滚动,slide一次
bgColor 设置滚动区域的背景颜色.
height 设置滚动区域的高度,单位像素或百分比
width 设置滚动区域的宽度,单位像素或百分比
loop 设置文本滚动循环次数,-1无限循环
scrollAmount 设置每次移动和距离,数值越小,滚动越慢,默认6px
scrollDelay 决定文本两次移动之间的间隔时间,单位为微称,时间越小,本移动频率越高
hspace 本页页边距
Vspace垂直页边距
14.<meta>标签
meta介绍
-<meta>元素可提供有关页面的元信息(meta-infomation),比如针对搜索引擎与更新频度的描述与关键词;
-<meta>标签位于文档的头部,不包含任何内容.
-<meta>标签的属性定义了与文档相关联的名称/值对.
-<meta>提代的信息是用户不可见的
-<meta>没有结束标记
Meta标记的属性 -http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确的显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变理值.
-name属性,主要用于描述网页,与之对应的属性值为content,content中的内容主要是便 于搜索引擎机器人查找信息与分类信息用的;
content-type 功能:设定当前页面使用的字符集与语言,用法: <meta http-equid = "content-type" content = "text/html; charset = gb2312">
content-language 显示语言的设定,用法 <meta http-equid = "Content-Language" content = "zh-cn"/>
refresh刷新 功能自动刷新,并向指向新的页面,用法: <meta http-equid = "refresh"content = "2";url = http://itcast.cn/">
keywords 网页关键字,告诉搜索引擎网页的关键字是什么,用法: <meta name = "keywords" content = "关键字,关键字...">
description网间内容描述 用法<meta name = "description" content = "网页内容描述信息"> 描述网页规则如下:
网页描述为自然语言而不是罗列关键词 与keyword设计正好相反
尽可能准确地描述网页的核心内容,通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息
网页描述的文字不必太多,一般不超过搜索引擎检索结查摘要信息的最多字数(100字数以内)
robots机器人向导,告诉搜索机器人那些页面需要进行搜索,那些页面不需要进行搜索,content的参数有all,none,index,no index,follow,nofollow 默认是all
index代表文件将被检索,follow代表页面上的链接可以被查询 举例: <meta name = "robots" content = "none">
author作者 说明标注网页的作者 用法<meta name = "author" content ="传智播客">
Copyright版权信息 功能:说明网站版权信息 用法:<meta name = "copyright" content = "信息参数">
15.HTML相关 SGML XHTML
SGML是所有电子文档标记语言的起源,为语法置标提供了异常强大的工具,同时具有极好的扩展性,因此在数据分类与索引中非常有用.万维网发明之前标准通用标记语言就已存在;
特点:非常严谨的文件描述法,导致过于庞大复杂,难以学习与理解,进而影响其推广与应用
关系图:
SGML标准通用标注语言---应用--->HTML超文本标注语言---取代--->XHTML可扩展HTML
XHTML 编写规范
XHTML元素必须被关闭,小写, 文档必须拥有一个根元素 属性名秘须小写 属性值必须加引号且不能简写 文件必须有DTD文档类型定义
用ID属性代码name属性(除表单外)
XHTML----DTD文档类型定义
是关于标记符语法的规则.是xml规则的一部分,是xml文件验证机制.DTD文件是一个ASCII文本文件,后缀为.dtd
XHTML三种文档的定义
XHTML 1.0 Strict 在此情况下使用:需要干净的标记,避免表现上的混乱.请与层叠样式配合使用
XHTML 1.0 Transitional 在此情况下,可以使用HTML的表现特性.
XHTML 1.0 Frameset 在此情况下使用:需要使用HTML框架将浏览窗口分割为两部分或者更多框架时.
16.html标签 <a>超级链接
指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序; 通俗来说就是我们一般使用到的超链接;
按使用对象不同分为:文本,图像,E-mail,锚点,多媒体文件,空 链接等;
按url的不同:绝对url链接,网站的完整路径 http://www.sina.com.cn
相对url链接:本站点的不同页面上去
书签:链接到不同网页的不同部分;
超链接的语法: <a 属性 = "属性值">标签内容</a>;
说明:a元素是一个行内元素,但不能相互嵌套.
属性 值 含义
href URL 链接的目标url
name name名 为当前锚定位设置一个名称,以便它能够被其他链接所定位;
target _blank在新窗口中打开目标网页 定义href指向的页面打开位置
_self在当前窗口中打开目标网页
_top整个浏览器窗口
_parent多框架结构中父窗口
URL由4部分组成:1.为协议: http:// ftp://等 2.为站点地址:可以是域名或者是IP地址 3.为页面在站点中的目录:stu 4.为页面名称 例:index.html 各部分之间使"/"符号隔开;
herf属性指定目标网页地址,该地址可以有几种类型:
链接远程目标 用法: <a href = "http://www.sina.com.cn">新浪网></a> <a href = "http://www.qq.com">腾讯网</a>
链接本地页面:可通过相对或者绝对路径 1.相对路径:<a href = "include/login.html">登录页面</a> 2.绝对路径:<a href ="/html/123.html">国内新闻</a>
链接到邮箱: <a href = "mailto:976296751@qq.com">给我发邮件</a>
下载文件: <a herf = "/download/winRAR.rar">下载WinRAR</a>
<a href = "download/office2007.rar">下载offfice2007</a>
锚点链接同一页面不同位置 1.当网页很长时,可以使用锚点在页面中定义一些点,通过超链接可以直接跳到锚点 2.定义锚点: <a name = "top">文档顶部</a> 3.链接到锚点: <a href = "#top">返回顶部</a>
17.html标签 <img>图像
属性与含义 值
scr 规定图像的URl值 图像URL
alt 规定图像的替代文本 字符串
align 规定如何根据周围的文本来排列图像 top/bottom/middle/left/right等
width 图像的宽度 px|%
height 图像的高度 px|%
border 定义图像的边框粗细 px
user map定义作为客户端图像映射的一幅图像 URl
注意:如果不使用width与height属性,图像保持原始大小,如果只指定其中某一个属性,则另一个属性按比例进行缩放; 图像添加链接:<a herf = "#"><img scr = "1.jpa"></a>
18.html标签 <map>图像映射
图像映射通过<map></map>标记将所有热点联合为一个整体并命 名该名称指定给<img>标记的username属性将图像与热点连接起来,与<area></area>标记定义一个热点的具体位置与目标链接;
<img src = "1.jpg" username = "#Map"/>
<map id = "Map" name = "Map">
<area shape = "热点形状" coords = "坐标" href = "链接" alt = "替代文字"/>
</map>
<area>属性
-shape:热点区域的形状,可选值rect矩形,circle圆形,polygon多边形
coords:热点区域的位置坐标,根据shape的不同而不同.1.对于rect,坐标为 (x1,y1,x2,y2),(x1,y1)矩形左上角,(x2,y2)右下角 2.对于circle 坐标(x,y,r) (x,y)圆心坐标 r为半径 3.对于polygon 坐标为(x1,y1,x2,y2,...xn,yn), (xn,yn)为第n个顶点坐标
-href:热点链接的目标地址
-alt:替代文本
<img src = "1.jpg" user map = "#Map"/>
<map id = "Map" name = "Map">
<area shape = "rect" coords = "2,2,92,40"href= "#" alt = ""/>
<area shape = "rect" coords = "60,60,92,40"href= "#" alt = ""/>
</map>
19.html标签 <embed></embed>标签 用来在网页中嵌入插件来播放多媒体文本
src 指定多媒体文件的URL
width/height 指定嵌入对象的宽度/高度
type 定义嵌入Flash的MiME类型
20.html标签 <table>标签
表格概念是一个二维数据空间,一个表格由若干行组成,一行又由若干单元格组成,单元格里可以包含文字,列表,图案,表单,数字符号,预置文本与其它表格等内容
作用:显示表格类数据 表格类数据是指按行和列组织的数据
表格的基本结构:
<table>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<table>的属性
width height align bicolor border border color
background URI 指定表格背景图案,URI指向图案文件的位置
cellpading 长度值 指定单元格里面的内容和单元格边框之间的间隔,即老地方充间距,属性值可为整数的像素值或百分比值
cellspacing 长度值 指定单元格里面的内容与单元格之间的间隔,即填充间距,属性值可为整数的像素值或百分比值
表格的子标签 <tr>标签
属性 值 含义
align left,right,canter 定义表格行的内容水平对齐方式
valuing Top middle bottom 定义表格行的内容垂直对齐方式
bgcolor 颜色值 定义表格行的背景颜色
表格的子标签 <th>与<td>的属性
<th></th>表格标题单元格:加粗居中显示
<td></td>表格数据单元格
width/height 值 %|pixels 规定单元格的宽度/高度不支持使用CSS进行代替;
align/valign 英文的 左居中右/顶中底 规定单元格的水平/垂直排列方式
bgcolor 颜色值 规定背景颜色.不支持的就用CSS
background URI 定义背景图案
rowspan/colspan 正整数 设置当前单元格在垂直/水平方向上合并单元格的个数;
表格的子标签 <caption>表格标题
<capiton align = "left或center或right">内容</caption>
用来指定表格的标题或说明,为表格子元素且只能在table元素内,出现在紧随table始标签之后,一个table只能有一个 这个标签的终止标签不可省略
21.<form>表单元素
表单是html元素中较为复杂的部分,往往与脚本,动态页面,数据处理等功能相结合,制作动态网站很重要的内容. 表单一般用来收集用户的输入信息
工作原理:
1.访问者浏览有表单的网页时,可填写必需的信息,然后按某个按钮进行提交
2.这些信息通过 网络传到服务器上面
3.服务器上专门的程序对这些数据进行处理,如果有错误就会返回错误信息,并要求改正错误
4.当数据完整无误后,服务器反馈一个输入完成的信息
例 <form id = "form1" name = "form1" method = "post" action = "">
账号:<input type = "text" name = "account"/><br/>
密码:<input type = "password" name = "password"/></br>
<input type = "submit" name = "submit" value = "提交"/>
<input name = "reset" type = "reset" id = "reset" value = "重置"/>
</form>
<form>表单标记属性
属性 值 含义
name name名 表单的识别名称,用于样式设置与脚 本访问.为了向上兼容而存在,实际开发过程中一般使用id属性来代替.该属性仅在Transitional和Frameset的DTD中使用.
action URL 指定一个表单处理目标的URL,表单的数据将被提交到该URL地址的处理程序.如果该属性值为空,则提交到文档本身.该属性值可以为绝对地址,相对地址,文档片段,甚至是脚本代码
method get|post 将表单数据提交到http服务顺的方法,可能值有两个:post 与get
enctype MIME类型 指定表单数据传送类型,此属性只有在method属性设置为post时才有效.默认值为application/x-www-form-urlencoded.如果表单包含用于文件上传的控件(input type = "file"),那么这个属性必须设置为multipart/form-data
target 目标框架名 规定在何处开actionURL _blank| _parent _self|_top frame name
22.<input>标记属性
属性 值 含义
name name名 定义input元素的名称
value 任何字符 控件初始显示的文字内容数据
size 整数 定义输入字段的宽度
maxlength 整数 规定输入字段中的字符的最大长度
checked checked 指定控件被选取状态,此布尔属性仅适用于type属性设置为radio或checkbox时生成的控件
readonly readonly 指定控件处于只读状态
disabled disabled 当input元素加载时禁用此元素
scr URL type属性设置为image时,此属性指定图片来源, 此图片用于修饰图形化按钮
type 预定义值 规定input元素的类型
其中<input>标记type本身又有很多的子属性
这些属性可以看作ios里面的枚举属性吧
type属性值 控件名称 代码
text 单行文本输入框 <input type = "text"/>
password 密码输入框 <input type = "password"/>
checkbox 复选框 <input type = "checkbox"/>
radio 单选框 <input type = "readio" checked = "checked"/>
submit 提交按钮 <input type = "submit" value = "提交">
reset 设置按钮 <input type = "reset" value = "重置"/>
image 图片提交按钮 <input type = "image" src = "URL"/>
button 普通按钮 <input type = "button" value = "普通按钮"/>
hidden 隐藏文件 <input type = "hidden" name = "" value = ""/>
file 文件选择控件 <input type = "file" name = ""/>
上传文件域 type = file
上传文件域
<input type = "file" name = "upFile"/>
该元素包含一个文本输入字段,用来输入文件名,另外还有一个按钮用来打开文件选择对话框以便图形化选择文件
当一个<form>中有'上传文件域",必须指定MIME类型的<formenctype = "multipart/form-data">,否则无法上传文件.
上传文件域,只在method = "post"下有效.
属性:id name value disabled size;
隐藏域 type = "hidden"
<input type = "hidden" name = "nid" value = "234"/>
1.隐藏字段对于用户是不可见的. 2. 隐藏字段通常会存储一个默认值,它们的值可以由JavaScript进行修改. 3.一般用在,修改某条数据时,用来记录数据的id号.
23.按钮的类型
提交按钮 用法:<input type = "submit" name = "submit" value = "提交表单"/> 提示:将表单提交到action指定的程序文件中进行处理;
重置按钮 用法:<input type = "reset" name = "reset" value = "重新填写"/> 提示:将清空表单中填写所有的数据
普通按钮 用法:<input type = "button" name = "button" value = "普通按钮"/> 提示:定义可点击的按钮,但没有任何行为,一般配合JS使用
图片按钮 <input type = "image" name = "image" src = "图片Url"/> 提示:图片按钮一般与JS配合使用;
<button>标签 ----双边标记
<form id = "form1" name = "form1" method = "post" action = "">
<button type ="submit">Click me!</button>
</form>
属性 属性值 说明
name name 控件名称
type button,reset,submit 初始的类型
value Text 初始值
disabled disabled 禁用此按钮
24.<select>下拉列表
<form id = "form1" name = "form1" method = "post" action = "">
<select name = "city" id = "city">
<option value = "北京">北京</option>
<option value = "天津" selected = "selected">天津</option>
<option value = "河北">河北 </option>
<option value = "山东">山东</option>
<option value = "内蒙">内蒙</option>
</select>
</form>
属性 属性值 说明
name name名 规定下拉列表的名称
size 正整数 规定下拉列表中可见选项的数目
multiple multiple 布尔属性,设置后选单项目允许多选,否则只能选择一个
disable disable 规定禁用该下拉列表
<option>标记
option元素定义下拉列表中的一个选项条目. 浏览器将<option>标签中的内容作为<select>标签的菜单或是滚动列表中的一个元素显示.
option元素位于select元素的内部,通俗一点来说就是下拉表格其中的一行的啊;
属性 属性值 说明
selected selected 规定选项在首次显示在列表中时表现为选中状态.
value 字符串 定义送往服务器的选项值.
25.<textarea>多行文本框
<form id = "form1" name = "form1" method = "post" action ="">
<textarea cols = "宽度" rows = "高度" name = "名称">
默认内容
</textarea>
</form>
属性 属性值 说明
name name 控件名称
rows number 设置多行文本框显示行数(高度),具体尺寸取决于文字的大小
cols number 同上设置宽度
disabled disabled 布尔属性,设置当前文本框为禁用状态
wrap off,hard,soft 设置多行文本框中的文字是否自动换行.
26.<lable>表单区域
定义:<lable>标签为input元素定义标注(标记)
说明: -lable 不会向用户呈现任何特殊效果,当用户选择该标签时,浏览器就会自动将焦点转到与标签相关的表单控件上面去了啊;
-<label>标签的for属性应当与相关元素的id属性相同
-结合Css可以控制表单文本或控件对齐,美化表单
例子: <form id = "form1" name = "form1" method = "post" action = "">
<label for = "username">用户名</label>
<input type = "text" name = "username" id = "username' size = "20"/>
属性for 属性值element_id 说明:规定label与那个表单元素绑定
27.框架
这里的框架说通俗一点类似于超市里面不同规格存放商品的货架,不是我们一般意义上开发类库的框架,注意;
框架提供将一个浏览器窗口划分为多个区域显示不同HTML文档的方法,使用场景:一个框架导航控件的文档,而另一个框架显示含有内容的文档
框架集是HTML文件,定义一组框架的布局与属性,包括框架的数目 大小 位置 以及在每个框架中初始显示的页面的URL. 本身不包含要在浏览器显示的HTML内容,框架集文件只是向浏览器提供应如何显示一组框架,以及在这些框架中应显示应显示那些文档有关的信息.
框架是浏览器窗口中的一个区域,可以显示与浏览器窗口的其余部分所显示内容无关的HTML文档(每个框架中显示一个独立的HTML文档).
框架页面结构
<html>
<head>
<title>网站后台管理系统</title>
<meta http-equid = "content=type" content = "text/html";charset = "utf-8">
</head>
<frameset rows = "80,*"cols = "*frameborder ="0" border = "0" >
<frmae src = "" name = "topMain"/>
<frameset rows = cols = "80,*",frame border = "0"border = "0" framespcing = "0">
<frame src = "left.html" name = "leftMain" no resize = "noresize"/>
<frame scr = "Main.html" name = "mainFrame" id = "mainFrame"/>
</frameset>
</frameset>
<noframeset>
<body>你的浏览器不支持框架!</body>
</noframes>
<html>
<frameset>标记属性
属性 值 含义
cols pixels,%,* 定义框架集中列的数目与尺寸
rows 同上 同上列
bordercolor 颜色值 框架边框的颜色
frame border 0 1 或no yes 规定是否显示框架周围的边框
border 整数 框架边界线的宽度
framespcing 整数 设置框架以像素为单位的间距(不兼容);
name 定义框架名称
src URI 为当前框架指定初始显示文档的地址
no resize no resize 如果指定此布尔属性,则指定框架不能改变大小,默认情况下是可以通过鼠标拖动来改变框架的大小的
scrolling auto yes no 指定框架的滚动显示方式
bordercolor 颜色值 框架的框线颜色
Frameset元素说明
1.使用框架的HTML页面中,body标记被frameset取代,frames元素禁止放在body元素的标签内容中.
2.frameset 用于定义框架结构,至于框架中具体显示什么页面,则由其子元素frame设定
3.FrameSet子元素noframes用来指定浏览器不支持框架页时显示的信息
4.Frameset标签内容中还可以有frameset进行框架嵌套
5.Frameset为W3C非推荐元素,仅可在Frameset DTD的情况下使用
Frame元素说明
frame元素用来定义单个框架的显示内容与显示方式
frame与frameset的子元素,所以必须放在frameset标签内容中
frame为空元素,在HTML中没有终止标签
frame为W3C非推荐元素,仅可在frameset DTD的情况下使用;
<noframes> 提供给不支持框架的浏览器应用
语法 : <noframes 属性 = "属性值"> 标签 内容</noframes>
说明:
-noframes用来布置浏览器不支持框架进的替代显示内容
-noframes为frameset的子元素,因此naframe必须置于frameset标签中
-Noframes为W3C非推荐元素,仅可以在frameset DTD的情况下使用
-终止标签不可省略
示例:
<frameset cols = "150,*"
<frame src = "navi.html" noresize = "noresize"/>
<frame src = "main.html" name = "main">
<noframes>你的浏览器不支持框架!</noframes>
</frameset>
框架的优点与缺点:
优点:
增强网页导航功能;
访问者的浏览器不需要为每个页面重新加载与导航相关的图形;
每个框架都具有自己的滚动条,因为访问者可以独立的滚动这些框架
缺点:
难以实现不同框架中各元素的精确图形对齐
测试导航物耗时间
老版本浏览器不支持框架
整个浏览空间变小,零活度变小
使用框架后,容易每个框架中产生滚动条,浏览者容易造成误操作造成使用不便;
