web规范实例教程,帮你走进web规范设计方案的全

2021-01-20 13:56 jianzhan
上1讲我关键解读了1下网页页面常见的几个html标识。

十分谢谢网友对我的全力适用,感谢你们给我的激励!

本节我将给大伙儿解读表单标识和table标识,ok,Begin!Right now!

标识10:表单标识

作用:结构1个表单,用来向服务器递交数据信息

基础构造与详尽标识:

ainput标识

应用指数值:*****

作用:根据更改type种类来结构表模块素

种类:内联元素

常见特性:id,class,name(与ID相近,便捷后台管理程序流程获得标识的值),accept(accept 特性只能与 <input type="file"> 相互配合应用。它要求可以根据文档提交开展递交的文档种类。)

type与对应值1览

 

在其中值img非常少应用,他与值submit的作用是同样的,hidden值针对1个前台接待开发设计者而言基本上是用不到的,button值临时不做详细介绍,终究大家如今离javascript还很漫长,呵呵

b: textarea标识

应用指数值:****

作用:无尽的向在其中键入文字,较为合适做留言板,在其中的文字的默认设置字体样式是等宽字体样式(一般是 Courier

种类:内联元素

常见特性:idclassname

独特特性:cols,rows来设定他的地区尺寸,但是不强烈推荐这类设定,還是提议根据css来设定(又是后话了)!

c: fieldset和legend标识

应用指数值:**

作用:用来给你的表单区划地区,在legend中设定地区的题目(并不是很常见)

种类:块级元素

常见特性:idclasstitle

d:label标识

应用指数值:***

作用:沒有任何实际效果,只是为input标识出示1个标识但是,它为电脑鼠标客户改善了能用性。假如您在 label 元素内点一下文字,就会开启此控制。便是说,当客户挑选该标识时,访问器就会全自动将聚焦点转到和标识有关的表单控制上。

独特特性for:

标识的 for 特性理应与有关元素的 id 特性同样。根据这类方式来与对应标识关联

事例:

拷贝编码
编码以下:

<form>
<p><input type="radio" name="fru" id="apple" /><label for="li">iPhone</label></p>
<p><input type="radio" name="fru" id="li" /><label for="apple">梨</label></p>
<p><input type="radio" name="fru" id="ban" /><label for="ban">香蕉</label></p>
<p><input type="radio" name="fru" id="ban" />草莓</p>
</form>

点一下梨,iPhone会被选定,点一下iPhone,梨会被选定,点一下香蕉,香蕉会被选定,点一下草莓,草莓不容易被选定,由于他沒有运用label,这时候仅有点一下按钮()才会被选定。
e:select标识
应用指数值:***
作用:建立单选或多选的往下拉菜单
构造:

拷贝编码
编码以下:

<select name="sec">
<option value ="volvo">Volvo</option>//每个选项
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>


这些特性就不详尽讲了,大伙儿去实践活动1下就搞清楚了,很简易
下面根据1个事例在实际运用表单标识要留意的事项:

拷贝编码
编码以下:

<div id="form">
<form name="form1" action="#" method="get">
//form标识刚开始1个表单,action值为数据信息表奇数据的传向网页页面,method为数据信息的传送方式,这些內容针对初学者无需理睬
<fieldset>
<legend>键入的文字</legend>//为表单区划地区
<p><input type="text" name="user" id="user"/></p>//单写作本键入
<p><input type="password" name="pwd" id="pwd" /></p> //单行保密键入
<p><textarea cols="2" rows="2" id="msg" name="msg"></textarea></p>//多写作本键入
</fieldset>
<fieldset>
<legend>挑选的文字</legend>
<p><input type="radio" name="fru" id="apple" /><label for="apple">iPhone</label></p>
<p><input type="radio" name="fru" id="li" checked="checked" /><label for="li">梨</label></p>
//上面两个是单选按钮,留意每组单选按钮的name特性要同样,梨默认设置为被选
<p><input type="radio" name="fru" id="ban" /><label for="ban">香蕉</label></p>
<p><input type="checkbox" name="men1" id="a" /><label for="a">成龙</label></p>
<p><input type="checkbox" name="men2" id="b" /><label for="b">铁拐李</label></p>
<p><input type="checkbox" name="men3" id="c" /><label for="c">绿茶</label></p>
//上面是多选按钮组成,留意她们的name特性不可以同样
<select name="sec" id="sec" multiple="multiple">
<option value="1">11111111</option>
<option value="2" selected="selected">22222222</option>
<option value="3" selected="selected">33333333</option>
<option value="4">44444444</option>
</select>
//上面是往下拉式挑选,而且能够多选,2,3行默认设置为被选
</fieldset>
<fieldset>
<fieldset>
<legend>提交的文档</legend>
<p><input type="file" name="file" id="file" accept="image/gif, image/jpeg" /></p>
//上面为文档提交,要求只能提交文件格式为gif和jpeg的照片
</fieldset>
<fieldset>
<legend>递交与重设</legend>
<p><input type="submit" value="递交表单" /><input type="reset" value="重设表单" /></p>
//表单的递交与重设
</fieldset>
</form>
</div>

标识11table

应用指数值:***

作用:结构1个报表

种类:块级元素

常见特性:idclass

width:设定报表的宽度

border:设定报表的边框

标识acaption

应用指数值:*

作用:为报表界定1个题目

种类:块级元素

标识btr

应用指数值:***

作用:为报表界定1个行

种类:块级元素

标识cth

应用指数值:**

作用:为报表的每列界定1个副标题,默认设置字体样式加粗

种类:块级元素

标识dtd

应用指数值:***

作用:为报表界定1个列

种类:内联元素

独特特性:1.colspan:合拼模块格(列合拼)

          2.rowspan:合拼模块格(行合拼)

事例:

拷贝编码
编码以下:

<table border="1">
<caption>题目</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td rowspan="2">January</td>//行合拼,因此要占有两行室内空间
<td>$100</td>
</tr>
<tr>
<td>January</td>//因为上面是行合拼,故这里少了1列
</tr>
<tr>
<td colspan="2">January</td>//列合拼,故这里少了1列
</tr>
</table>

实际效果:

 

到这里html就讲完了,不必诧异,我指的是关键的常见的一部分讲完了,别的的就大伙儿自身去学习培训吧,坚信把握了学习培训方式以后的工作中是愉快的,哈哈

下1讲,我将领着大伙儿步入css的全球之中!