系统学习javaweb补充1----HTML常用语句
HTML 常用语句
一、单行文本框语法格式
<input type="text" name="输入信息的名字" value="输入信息的值">
注意:属性 type 用于确定表单元素的类型,值为“text”表示这是一个单行文本框;属性 name 的值表示要输入的信息的名字;属性 value 的值表示这个文本框的值,通常不需要 value 属性,它的值一般是让用户输入的。如果需要 为这个输入框取默认值,可以使用这个属性给定默认值。
<input type="text">表示单行文本框,name 用于指定元素的名字,value 可以指 定默认值。
注意:name 属性的值不能与其他表单元素的值相同,也就是说不能出现同名的表单元素。
二、密码框语法格式
<input type="password" name="输入信息的名字" value="输入信息的值">
注意:密码框与单行本文框的区别是,密码框对应的 type 值为“password”
设置密码就应该让用户输入两遍密码。因为输入密码之后显示“*”号, 这样如果用户输入错误了,用户也无法获知,以后使用就麻烦了。如果输入两遍则可以解 决这个问题,因为只有两次输入了相同的错误内容才可能将错误密码设置成功,而出现两 次相同错误的概率非常低。
三、单选按钮基本格式
<input type="radio" name="输入信息的名字" value="输入信息的值">
注意:type 属性的值为“radio”,说明这个表单元素是单选按 钮。 name 仍然是元素的名字, value 属性的值是这个单选按钮的值。这个值不会显示给用户, 用户能够看到的是标签后面显示的部分。一组单选按钮的名字必须相同,但是值不同。单选按钮的值与用户看到的在界面上显示的信息没有关系。
四、复选框基本格式
<input type="checkbox" name="输入信息的名字" value="输入信息的值">
注意:同单选框,可以选择多个。
五、下拉框基本格式
<select name="下拉框的名字" [multiple] [size=n]>
<option value="值1" [selected]>值1</option>
<option value="值2" [selected]>值2</option>
<option value="值3" [selected]>值3</option>
<option value="值4" [selected]>值4</option>
~~~~~~~~~~~~~~~
<option value="值 n" [selected]>值n</option>
</select>
注意:下拉框由两部分组成:第一部分是下拉框本身;第二部分是多个下拉框选项。下拉框本身的开始标志是<select name…>,结束标志是</select>。在开始标志中,name表示下拉框的名字,是必需的,它与前面介绍的其他元素的名字的作用相同。multiple属性 用于确定下拉框中的元素是否允许多选,如果允许多选,需要写这个属性,如果不允许多选,则不用写,默认是单选。size属性用于确定下拉框的显示形式,如果size等于1,则采 用下拉框的形式,如图 2.3所示;如果 size大于1,则采用具有滚动条的列表框的形式,如图 2.4 所示,默认情况下是下拉框的形式。
下拉框中的每个选项对应一个option标签,开始标志是<option…>,结束标志是 </option>,中间是显示给用户的选项。在开始标志中,可以使用value指定这个选项的值,这与单选按钮和复选框的用法类似。另外在开始标志中,可以使用 selected属性,如果使用这个属性,表示这个选项被选上了。如果想设定当前选项为默认选项,则可以使用selected属性。下拉框选项中的值和显示给用户的值可以不相同。
举例:
<select name="local">
<option value="华东" selected>华东</option>
<option value="华南">华南</option>
<option value="华北">华北</option>
<option value="东北">东北</option>
<option value="东南">东南</option>
<option value="西南">西南</option>
<option value="西北">西北</option>
<option value="华中">华中</option>
</select>
这个下拉框只允许单选,并且是以下拉框的形式显示的,默认选项是“华东”。
六、文本域基本格式
<textarea rows="行数" name="文本域名字" cols="列数">默认值</textarea>
注意:在标签的开始标志中,name属性的作用同样是指出表单元素的名字,使用rows指定文本域的 行数,使用cols指定文本域的列数。文本域不是通过 value属性赋值的,而是把值写在开始标志和结束标志之间。
七、重置按钮基本格式
<input type="reset" value="重置">
注意:与单行文本框的语法非常相似,重置按钮的type值为reset另外,在这个格式中没有看到name属性,这里把name属性省略了,因为这个表单元素比较特殊,特殊的地方在于它不是用于提交信息的,所以不用给出名字,系统会给一个默认名字。value 属性指出这个按钮上显示的内容。重置按钮并不是清空所有的信息,而是把所有的元素恢复到默认值。
八、提交按钮基本格式
<input type="submit" value="提交">
注意:提交按钮也比较特殊。提交按钮本身可以完成信息的提交,但是提交按钮本身的信息通常没有用,所以也不用给出提交按钮的名字。提交按钮上面显示的内容是value的值。
九、Form封装原则
<form name="form1" action="目标文件" method="post|get">
各种表单元素
</form>
注意:开始标志是“<form>”,结束标志是“</form>”,中间是用于提交信息的各种表单元素。在开始标志中,name 属性指出form的名字;action 指出提交给哪个文件进行处理,应该写处理文件的名字,如果 action 的值为空字符串,则提交给当前文件进行处理;method属性指定表单提交的方式,有两种可选的方式,即post和get,通常采用post方式。表单的开始标志和结束标志都不能少,并且所有用于提交信息的表单元素都应该位于 form元素之内。
一个页面中可以有多个 form元素,分别完成不同的信息提交任务时,提交按钮在第一个form中,这时候第二个form不起任何作用,只会提交第一个 form内的表单元素的值,并且提交给第一个 form的action属性所指定的文 件,由这个文件进行处理。多个form之间不会产生任何影响,提交按钮在哪个 form中,只会提交这个 form内部的表单元素的值,且只会提交给由这个 form的action属性所确定的处理文件进行处理。Form之间不可嵌套!!!
十、使用JavaScript语言验证格式
<script language="JavaScript">
相关JavaScript代码
</script>
JavaScript方法格式:
function 方法名(参数)
{
// 方法体
}
注意:不需要写方法的返回值类型,但是方法可以有返回值,并且可以是各种类型的返回值。方法的参数类型也可以不写。把方法放在JavaScript 的开始标识和结束标识之间即可。
十一、使用表单数据方法
第一种方式通过 document 对象获得form:
form = document.form1
其中,form1 是表单元素的名字
另一种方式是在调用验证方法的时候把 form作为参数来获得 form
form.userid.value
其中,userid 是表单元素,value 是该表单元素的值
十二、错误消息提示
使用 alert 提示错误信息时,参数是要显示的错误信息。
alert("地址长度大于50 位!");
上面就是当用户输入的地址信息的长度大于50的时候提示用户的信息。
如果验证失败,则通常会把光标放在相应的输入框中,可以使用下面的代码: form.address.focus();
十三、字符串常用处理方法
str.length,表示字符串的长度。
str.charAt(i),获取字符串中第 i 个字符,i从 0 开始。
str.indexOf(c),查找某个字符的位置,返回值是该字符第一次出现的位置,位置编号从 0 开始。如果没有找到,则返回-1。
str.substring(index1,index2),获取子串,第一个参数表示开始位置,第二个参数表示结 束位置,子串包括第一个参数,不包括第二个参数。
str.substring(index),获取从该参数 开始到字符串结束的子串 。
str==另一个字符串,判断 str 与另一个字符串是否相同。
十四、常用验证
非空验证:
\\验证是否为空
function isNull(str)
{
if(str.length==0)
return true;
else
return false;
}
字符串长度验证:
\\验证是否满足最小长度
function minLength(str,length)
{
if(str.length>=length)
return true;
else
return false;
}
\\判断是否满足最大长度
function maxLength(str,length)
{
if(str.length<=length)
return true;
else
return false;
}
日期验证:
// 判断是否是日期,日期的格式为 1988-1-1
function isDate(date)
{
// 查找分隔符
index1 = date.indexOf("-");
// 如果分隔符不存在,则不是合法的时间
if(index1 == -1)
return false;
// 获取时间中的年
year = date.substring(0,index1);
// 获取时间中的剩下部分
date = date.substring(index1+1);
// 查找第二个分隔符
index1 = date.indexOf("-");
// 如果不存在第二个分隔符,则不是合法的时间
if(index1 == -1)
return false;
// 获取时间中的月份
month = date.substring(0,index1);
// 获取时间中的日
day = date.substring(index1+1);
// 判断是否是数字,如果不是则不是合法的时间
if(isNumber(year) && isNumber(month) && isNumber(day))
{
// 判断基本范围
if(year<1900 || year>9999 || month<1 || month >12 || day<1)
return false;
// 判断 31天的月
if((month==1||month==3||month==5||month==7||month==8||month==10 || month==12) && day>31)
return false;
// 判断 30天的月
if((month==4||month==6||month==9||month==11)&& day>30)
return false;
// 如果是2月,判断是否为闰年
if(month==2)
{
if(year%400==0 || (year%4==0 && year%100!=0))
{
if(day>29)
return false;
}
else
{
if(day>28)
return false;
}
}
}
else
return false;
return true;
}
数字验证
// 判断是否是整数
function isNumber(str)
{
for(i=0;i<str.length;i++)
{
// 每一位都是 0~9 的数字,如果是第 1 位,则可以是“-”号
if(str.charAt(i)>='0'&&str.charAt(i)<='9'||str.charAt(i)=="-"&&i==0)
continue;
else
return false;
}
return true;
}
邮箱验证
// 判断是否是 E-mail
function isEmail(email)
{
if(email.length==0)
return false;
index1 = email.indexOf('@');
index2 = email.indexOf('.');
if(index1 < 1 // @符号不存在,或者在第一个位置
|| index2 < 1 // .符号不存在,或者在第一个位置
|| index2-index1 <2 // .在@的左边或者相邻
|| index2+1 == email.length) // .符号后面没有东西
return false;
else
return true;
}
十五、正则表达式
字符集
字符 |
作用 |
. |
匹配除\n 以外的任何一个字符 |
[ ] |
匹配包含在方括号内的任何一个字符 |
^ |
用在方括号中表示匹配除方括号中字符以外的任何字符 |
举例:
.at:匹配以任意字符开头,后面为 at 的字符串,如“cat” 、 “bat” 、 “#at”等。 [a-z]:匹配任意一个小写字母(a~z 之间的),如“a”、 “c”、“e”等。
[aeiou]:匹配任意一个元音字母。
[a-zA-Z]:匹配任意一个大写或小写字母。
[b-[^a-z]:匹配任何不在 a~z 之间的字符
重复次数
字符 |
作用 |
* |
表示重复 0 次或以上 |
+ |
表示重复 1 次或以上 |
? |
表示重复 0 次或 1次 |
举例:
[a-zA-Z]*:匹配由任意大小写字母构成的字符串,也可以是空字符串,如“abc”。 [0-9]+:匹配任何由数字构成的字符串,该字符串至少包含一个字符,如“1234”。 [a-z0-9]?:匹配空字符串,或者一个小写字母或数字。
子式表达式
字符 |
作用 |
() |
将多个字符作为一个子表达式 |
示例:
(very )*large:匹配“large”、 “very large”、 “very very large”等。注意 very后面的空格。
子表达式计数
字符 |
作用 |
{n} |
表示重复 n 次 |
{m,n} |
表示重复 m~n 次 |
{m,} |
表示重复 m次以上 |
示例:
(very ){1} :匹配“very ”。
(very ){1,3}:匹配“very ”、“very very ”、“very very very ”。
(very ){1,}:匹配由一个或一个以上“very ”构成的字符串。
开始和结尾
字符 |
作 用 |
^ |
指定以某个字符串开始 |
$ |
指定以某个字符串结尾 |
^和$ |
表示精确匹配某个字符串 |
示例:
^zhang:匹配以“zhang”开头的任意字符串,如“zhangsan” 。
cn$:匹配以“cn”结束的任意字符串,如“sina.com.cn”。
^[a-z]$:匹配只包含 a~z 之间任意一个字符的字符串,如“a”
注意:如果一个模式不包括^和$,那么它与任何包含该模式的字符串匹配
分支
字符 |
作用 |
| |
表示匹配多个模式串中的任意一个 |
示例 :
com|edu|net:匹配 com、edu或 net。
特殊字符
字符 |
作用 |
\ |
用来转义特殊字符 |
示例:
\\:匹配一个反斜杠。
\.:匹配一个圆点。
常用用法:
^[a-zA-Z][a-zA-Z0-9_]*$:匹配以字母开头,由字母、数字和下划线组成的字符串,如 “abc_123”。 ^[a-zA-Z0-9]{6,}$:匹配由字母和数字组成、长度不少于 6 位的字符串,如“123456” 。
^[0-9]{4}-[0-9]{2}-[0-9]{2}$:匹配格式为“xxxx-xx-xx”的字符串,要求 x 只能是数字。 常用于匹配日期,如“2007-05-01”。 ^[a-zA-Z][a-zA-Z0-9_\-]*@([a-zA-Z0-9\-]+\.)+[a-z]{2,3}$:常用于匹配 E-mail。要求@符 号前面是以字母开头,由字母、数字、下划线或减号组成的字符串;@符号后面的域名可以 包含多个字符串,每个字符串由字母、数字或减号组成;最后一级域名只能包含 2 个或 3 个字母(例如 cn、com等)。 ^0[0-9]{2,3}-[0-9]{7,8}$:常用于匹配电话号码。要求区号由 0 开始,包含 3 到 4 位数 字,区号和电话号码之间用减号分隔,电话号码由 7位或者 8 位数字组成。
HTML
卷标 , 属性名称 , 简介
<! - - ... - -> 批注
<!> 跑马灯
<marquee>...</marquee>普通卷动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction=left></marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定卷动距离
<marquee scrolldelay=300>...</marquee>设定卷动时间
<!>字体效果
<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
...字体颜色
...最小字体
<font style =font-size:100 px>...无限增大
<!>区断标记
<hr>水平线
<hr size=9>水平线(设定大小)
<hr width=80%>水平线(设定宽度)
<hr color=ff0000>水平线(设定颜色)
<br>(换行)
<nobr>...</nobr>水域(不换行)
<p>...</p>水域(段落)
<center>...</center>置中
<!>连结格式
<base href=地址>(预设好连结路径)
<a href=地址>外部连结
<a href=地址 target=_blank>外部连结(另开新窗口)
<a href=地址 target=_top>外部连结(全窗口连结)
<a href=地址 target=页框名>外部连结(在指定页框连结)
<!>贴图/音乐
<img src=图片地址>贴图
<img src=图片地址 width=180>设定图片宽度
<img src=图片地址 height=30>设定图片高度
<img src=图片地址 alt=提示文字>设定图片提示文字
<img src=图片地址 border=1>设定图片边框
<bgsound src=MID音乐文件地址>背景音乐设定
<!>表格语法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
<!>分割窗口
<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架
<! - - ... - -> 批注
<A HREF TARGET> 指定超级链接的分割窗口
<A HREF=#锚的名称> 指定锚名称的超级链接
<A HREF> 指定超级链接
<A NAME=锚的名称> 被连结点的名称
<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址
<B> 粗体字
<BASE TARGET> 指定超级链接的分割窗口
<BASEFONT SIZE> 更改预设字形大小
<BGSOUND SRC> 加入背景音乐
<BIG> 显示大字体
<BLINK> 闪烁的文字
<BODY TEXT LINK VLINK> 设定文字颜色
<BODY> 显示本文
<BR> 换行
<CAPTION ALIGN> 设定表格标题位置
<CAPTION>...</CAPTION> 为表格加上标题
<CENTER> 向中对齐
<CITE>...<CITE> 用于引经据典的文字
<CODE>...</CODE> 用于列出一段程序代码
<COMMENT>...</COMMENT> 加上批注
<DD> 设定定义列表的项目解说
<DFN>...</DFN> 显示"定义"文字
<DIR>...</DIR> 列表文字卷标
<DL>...</DL> 设定定义列表的卷标
<DT> 设定定义列表的项目
<EM> 强调之用
<FONT FACE> 任意指定所用的字形
<FONT SIZE> 设定字体大小
<FORM ACTION> 设定户动式窗体的处理方式
<FORM METHOD> 设定户动式窗体之资料传送方式
<FRAME MARGINHEIGHT> 设定窗口的上下边界
<FRAME MARGINWIDTH> 设定窗口的左右边界
<FRAME NAME> 为分割窗口命名
<FRAME NORESIZE> 锁住分割窗口的大小
<FRAME SCROLLING> 设定分割窗口的滚动条
<FRAME SRC> 将HTML文件加入窗口
<FRAMESET COLS> 将窗口分割成左右的子窗口
<FRAMESET ROWS> 将窗口分割成上下的子窗口
<FRAMESET>...</FRAMESET> 划分分割窗口
<H1>~<H6> 设定文字大小
<HEAD> 标示文件信息
<HR> 加上分网格线
<HTML> 文件的开始与结束
<I> 斜体字
<IMG ALIGN> 调整图形影像的位置
<IMG ALT> 为你的图形影像加注
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入图片并预设图形大小