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

 

 

系统学习javaweb补充1----HTML常用语句的更多相关文章

  1. 系统学习javaweb重点难点1--如何区分<input/>框里的三种常用属性:type属性 name属性 和 value属性

    感想:这是我系统学习javaweb的时候感觉这个是一个初学者十分容易搞混的点 学习笔记: 首先,是type属性. 表单输入项标签之一,用户可以在该标签上通过填写和选择进行数据输入. type属性设置该 ...

  2. 【mongodb系统学习之八】mongodb shell常用操作

    八.mongodb  shell常用基础操作(每个语句后可以加分号,也可以不加,看情况定(有的工具中可以不加),最好是加): 1).进入shell操作界面:mongo,上边已有演示: 2).查看当前使 ...

  3. 系统学习javaweb重点难点2--.JavaScript中的正则对象简述和正则对象使用注意事项。

    注意:只是简述,对正则对象的了解目前还不是很深刻,日后详细了解了再来修改. 正文: 正则对象 首先,我们要了解一下什么是正则对象: 正则表达式,又称规则表达式.(英语:Regular Expressi ...

  4. Linux系统学习 七、网络基础—常用网络命令

    1.ifconfig                 #查看网络(设置IP临时生效) 2.hostname [主机名]            #查看或设置主机名       默认的是localhost ...

  5. 系统学习Javaweb6----JavaScript2

    感想:感觉自己还是只是学到皮毛,仍需继续努力,明天开始需要学习Android和阅读感想的书写. 学习笔记: 2.3.运算符 JavaScript运算符与java运算符基本一致. 这里我们来寻找不同点进 ...

  6. 系统学习 javaweb2----HTML语言2

    感想:学习javaweb之路,任重而道远. 学习笔记: 5.表格标签 5.1<table></table> 表格标签,用于效果中定义一个表格 5.2<tr>< ...

  7. 五、Android学习第四天补充——Android的常用控件(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 五.Android学习第四天补充——Android的常用控件 熟悉常用的A ...

  8. mo系统常用语句

    mo系统常用语句 一.总结 一句话总结: 1.语言:双语设置(繁体,英语)语句? {:chooseLanguage("確定要刪除么","Are you sure you ...

  9. 【数据库】 SQL 常用语句之系统语法

    [数据库] SQL 常用语句之系统语法 1. 获取取数据库服务器上所有数据库的名字 SELECT name FROM master.dbo.sysdatabases 2. 获取取数据库服务器上所有非系 ...

随机推荐

  1. mysql锁探究和实验

    如何保证数据并发访问的一致性.有效性是所有数据库必须解决的一个问题,锁冲突也是影响数据库并发访问性能的一个重要因素.从这个角度来说,锁对数据库而言显得尤其重要,也更加复杂. 表锁和行锁 mysql最显 ...

  2. nginx常用内置变量

    $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...

  3. 对自己有用的VS调试技巧

    设置下一条语句 编辑然后继续 符号越界后查看堆对象 查看数组的值 底部 设置下一条语句 返回顶部 一个典型的调试情况就是通过单步跟踪分析为什么一个函数调用失败了.当你发现一个函数调用的另一个函数返回错 ...

  4. BZOJ [HAOI2006]旅行comf

    题解:枚举最大边,然后对<=最大边的边做最大生成树,使最小边最大 #include<iostream> #include<cstdio> #include<cstr ...

  5. 操作实践:maven工程查找工程中多余的jar包

    声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 版本迭代过程中对jar的依赖可能会产生变化,一些本不必再依赖的jar包可以因为没有清除而依然留在版本的发布 ...

  6. Fiddler 断点命令

    Request 断点:bpu /priceCalculate 清除命令:bpu Response 断点:bpafter /priceCalculate 清除命令:bpafter

  7. Linux--Shell传递参数

    参考:http://www.runoob.com/linux/linux-shell-passing-arguments.html

  8. Java中常用的API(二)——String

    在第一节中我们介绍了Object类的方法以及操作,那么这一节,我们将介绍一个新的类:String. String类是我们经常使用的类,应用十分广泛.同时,String类中封装了一系列的方法,非常常用, ...

  9. php速成_day4

    一.微信公众平台概述 1.微信发展史 1)2011年1月21日,腾讯推出微信应用程序.(张小龙) 2)2012年8月20日,腾讯推出微信公众平台功能,同年11月开放第三方接口 3)2013年11月注册 ...

  10. KVM---利用 libvirt+qemu-kvm 创建虚拟机

    KVM 虚拟化已经是一个工业级的虚拟化解决方案了,以前都是直接下载 VMware,然后安装其他操作系统的,今天我们来体验一下自己动手创建一台虚拟机,这样你就会知道在KVM下创建一台虚拟机,是多么简单的 ...