zoukankan      html  css  js  c++  java
  • 自己写的web标准教程,帮你走进web标准设计的世界——第三讲(html终结篇)

    声明:本教程源于本人学习的一些经验的总结,希望大家帮忙完善与指正,也希望会给初学者带来方便,希望大家不要随便转载,写的不是很好,还不完善,不过转载时要注明作者和出处,附加原文的链接地址,谢谢了

    已出:

    自己写的web标准教程,帮你走进web标准设计的世界——第一讲

    自己写的web标准教程,帮你走进web标准设计的世界——第二讲

    上讲回顾:上一讲我主要讲解了一下网页常用的几个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 属性相同。通过这种方法来与对应标签绑定

    例子:

    1 <form>
    2 <p><input type="radio" name="fru" id="apple" /><label for="li">苹果</label></p>
    3 <p><input type="radio" name="fru" id="li" /><label for="apple">梨</label></p>
    4 <p><input type="radio" name="fru" id="ban" /><label for="ban">香蕉</label></p>
    5 <p><input type="radio" name="fru" id="ban" />草莓</p>
    6 </form>

    点击梨,苹果会被选中,点击苹果,梨会被选中,点击香蕉,香蕉会被选中,点击草莓,草莓不会被选中,因为他没有应用label,这时只有点击按钮()才会被选中。

    e:select标签

    使用指数:***

    功能:创建单选或者多选的下拉菜单

    结构:
    1 <select name="sec">
    2   <option value ="volvo">Volvo</option>//每一个选项
    3   <option value ="saab">Saab</option>
    4   <option value="opel">Opel</option>
    5   <option value="audi">Audi</option>
    6 </select>


    这些属性就不详细讲了,大家去实践一下就明白了,很简单

    下面通过一个例子在具体应用表单标签要注意的事项:

     1 <div id="form">
     2 <form name="form1" action="#" method="get">
     3 //form标签开始一个表单,action值为数据表单数据的传向页面,method为数据的传递形式,这些内容对于初学者不用理会
     4     <fieldset>
     5         <legend>输入的文本</legend>//为表单划分区域
     6     <p><input type="text" name="user" id="user"/></p>//单行文本输入
     7     <p><input type="password" name="pwd" id="pwd" /></p> //单行密文输入
     8     <p><textarea cols="2" rows="2" id="msg" name="msg"></textarea></p>//多行文本输入
     9     </fieldset>
    10     <fieldset>
    11         <legend>选择的文本</legend>
    12     <p><input type="radio" name="fru" id="apple" /><label for="apple">苹果</label></p>
    13 <p><input type="radio" name="fru" id="li" checked="checked" /><label for="li">梨</label></p>
    14 //上面两个是单选按钮,注意每组单选按钮的name属性要相同,梨默认为被选
    15 
    16     <p><input type="radio" name="fru" id="ban" /><label for="ban">香蕉</label></p>
    17     <p><input type="checkbox" name="men1" id="a" /><label for="a">成龙</label></p>
    18     <p><input type="checkbox" name="men2" id="b" /><label for="b">铁拐李</label></p>
    19 <p><input type="checkbox" name="men3" id="c" /><label for="c">绿茶</label></p>
    20 //上面是多选按钮组合,注意他们的name属性不能相同
    21 
    22     <select name="sec" id="sec" multiple="multiple">
    23         <option value="1">11111111</option>
    24         <option value="2" selected="selected">22222222</option>
    25         <option value="3" selected="selected">33333333</option>
    26         <option value="4">44444444</option>
    27 </select>
    28 //上面是下拉式选择,并且可以多选,2,3行默认为被选
    29 
    30     </fieldset>
    31     <fieldset>
    32     <fieldset>
    33         <legend>上传的文件</legend>
    34 <p><input type="file" name="file" id="file" accept="image/gif, image/jpeg"  /></p>
    35 //上面为文件上传,规定只能上传格式为gif和jpeg的图片
    36     </fieldset>
    37     <fieldset>
    38         <legend>提交与重置</legend>
    39 <p><input type="submit" value="提交表单" /><input type="reset" value="重置表单" /></p>
    40 //表单的提交与重置
    41     </fieldset>
    42 </form>
    43 </div>

    标签11table

    使用指数:***

    功能:构造一个表格

    类型:块级元素

    常用属性:idclass

    width:设置表格的宽度

    border:设置表格的边框

    标签acaption

    使用指数:*

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

    类型:块级元素

    标签btr

    使用指数:***

    功能:为表格定义一个行

    类型:块级元素

    标签cth

    使用指数:**

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

    类型:块级元素

    标签dtd

    使用指数:***

    功能:为表格定义一个列

    类型:内联元素

    特殊属性:1.colspan:合并单元格(列合并)

              2.rowspan:合并单元格(行合并)

    例子:

     1 <table border="1">
     2     <caption>标题</caption>
     3   <tr>
     4     <th>Month</th>
     5     <th>Savings</th>
     6   </tr>
     7   <tr>
     8     <td rowspan="2">January</td>//行合并,所以要占据两行空间
     9     <td>$100</td>
    10   </tr>
    11   <tr>
    12     <td>January</td>//由于上面是行合并,故这里少了一列
    13   </tr>
    14   <tr>
    15     <td colspan="2">January</td>//列合并,故这里少了一列
    16   </tr>
    17 </table>

    效果:


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

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

     今天的教程就到这里了明天再见,谢谢!

    交流QQ群: 71019430(菜鸟居多,请大家见谅!)

  • 相关阅读:
    「从零单排canal 03」 canal源码分析大纲
    「从零单排canal 02」canal集群版 + admin控制台 最新搭建姿势(基于1.1.4版本)
    「从零单排canal 01」 canal 10分钟入门(基于1.1.4版本)
    实时数据订阅与分发系统概述
    使用phoenix踩的坑与设计思考
    「从零单排HBase 12」HBase二级索引Phoenix使用与最佳实践
    「从零单排HBase 11」HBase二级索引解决方案
    「从零单排HBase 10」HBase集群多租户实践
    「从零单排HBase 09」HBase的那些数据结构和算法
    Netty源码分析之自定义编解码器
  • 原文地址:https://www.cnblogs.com/chaofan/p/1779249.html
Copyright © 2011-2022 走看看