系统学习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> 插入图片并预设图形大小