web标准教程,帮你走进web标准设计的世界 第三讲(html终结篇)

所属分类: 网页制作 / CSS 阅读数: 1292
收藏 0 赞 0 分享
上一讲我主要讲解了一下网页常用的几个html标签。

非常感谢网友对我的大力支持,谢谢你们给我的鼓励!

本节我将给大家讲解表单标签和table标签,ok,Begin!Right now!

标签10:表单标签

功能:构造一个表单,用来向服务器提交数据

基本结构与详细标签:

ainput标签

使用指数:*****

功能:通过改变type类型来构造表单元素

类型:内联元素

常用属性:id,class,name(与ID类似,方便后台程序获取标签的值),accept(accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。)

type与对应值一览

 

其中值img很少使用,他与值submit的功能是相同的,hidden值对于一个前台开发者而言几乎是用不到的,button值暂时不做介绍,毕竟我们现在离javascript还很遥远,呵呵

b: textarea标签

使用指数:****

功能:无限的向其中输入文本,比较适合做留言板,其中的文本的默认字体是等宽字体(通常是 Courier

类型:内联元素

常用属性:idclassname

特殊属性:cols,rows来设置他的区域大小,不过不推荐这种设置,还是建议通过css来设置(又是后话了)!

c: fieldset和legend标签

使用指数:**

功能:用来给你的表单划分区域,在legend中设置区域的标题(不是很常用)

类型:块级元素

常用属性:idclasstitle

d:label标签

使用指数:***

功能:没有任何效果,只是为input标签提供一个标记不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

特殊属性for:

标签的 for 属性应当与相关元素的 id 属性相同。通过这种方法来与对应标签绑定

例子:

复制代码
代码如下:

<form>
<p><input type="radio" name="fru" id="apple" /><label for="li">苹果</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>

点击梨,苹果会被选中,点击苹果,梨会被选中,点击香蕉,香蕉会被选中,点击草莓,草莓不会被选中,因为他没有应用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>


这些属性就不详细讲了,大家去实践一下就明白了,很简单
下面通过一个例子在具体应用表单标签要注意的事项:

复制代码
代码如下:

<div id="form">
<form name="form1" action="#" method="get">
//form标签开始一个表单,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">苹果</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

使用指数:***

功能:构造一个表格

类型:块级元素

常用属性:idclass

width:设置表格的宽度

border:设置表格的边框

标签acaption

使用指数:*

功能:为表格定义一个标题

类型:块级元素

标签btr

使用指数:***

功能:为表格定义一个行

类型:块级元素

标签cth

使用指数:**

功能:为表格的每一列定义一个小标题,默认字体加粗

类型:块级元素

标签dtd

使用指数:***

功能:为表格定义一个列

类型:内联元素

特殊属性: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>//由于上面是行合并,故这里少了一列
</tr>
<tr>
<td colspan="2">January</td>//列合并,故这里少了一列
</tr>
</table>

效果:

 

到这里html就讲完了,不要惊讶,我指的是主要的常用的部分讲完了,其他的就大家自己去学习吧,相信掌握了学习方法之后的工作是愉快的,哈哈

下一讲,我将带领大家步入css的世界当中!

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多