• 表格标签,图片标签,框架标签,表单标签


    一)表格标签

    <table>标签

    表格里面需要设置单元格的行,在行内设置单元格代表该行的列。

    通过改变table的属性还有单元格的属性可以设置单元格的跨度,字体,对齐方式等。

     

    示例:

    <table align="center" border="1px" width="400pt" height="300pt">
    
          <tr>
    
           <th colspan="3">学习成绩</th>
    
          </tr>
    
        
    
            <tr>
    
              <th rowspan="2">张三</th>
    
              <th>语文</th>
    
              <th>98</th> 
    
            </tr>
    
          
    
    </table>

    <table>标签内<tr>标签表示表格的一行,通过在<tr>标签内使用<th>标签表示在该行增加一个单元格。

    上面代码实现效果:

     

    <table>常用属性

    align属性:指定表格整体处在浏览器的那个位置

    border属性定义表格边框线条的粗细

    width 和 height属性:设置表格的宽度和高度

     

    <th>中的colspan属性:表示这个单元格所占的列数。

            rowspan属性:表示这个单元格所占的行数。

     

    二)图片标签

    <img>标签与<map>标签

    可以插入图片,还可以在图片上创建可点击区域。

     

    示例:

        

    <img  src="JINX.PNG"  alt="金克斯之吻" border="0" usemap="#Map" />
    
        <map name="Map" id="Map">
    
          <area shape="rect" coords="134,191,254,272" href="Untitled-1.html" target="_blank" />
    
          <area shape="circle" coords="124,50,36" href="表格.html" target="_blank" />
    
        </map>

    src指定图片的路径

    alt作用:当指定的文件不存在时,用文字描述代替。

    border:图片边框粗细

    <map>标签用于在图片上创建可点击区域。这一点可以通过DreamWeaver工具来实现定位。

    效果:

     

     

    三)框架标签

    <frameset>标签

    这个标签用来组织多个页面的拼接。可是它只能以多少列和多小行的列表格式来拼接,所以要用到它的colsrows属性。

    需要注意的是<frameset>不能写在<body>标签结构内,因为<frameset>里面的包含多个页面,而每个页面已经有<body>结构了。

     

    示例:

    <frameset rows="20%,30%,30%">
    
             <frame src="媒体标签.html"/>
    
                <frame src="图片标签.html" />
    
                <frame src="表格.html" />       
    
    </frameset>

    设置每个页面的比例用百分比来设置。 

    效果:

    想要实现复杂的网页,通常会用多个<frameSet>的嵌套来实现。

     

    四)表单标签

    表单标签用来创建表单,利于用户输入数据。

    应用示例:

    <form action="http://www.baidu.com" method="get">
        
            
            请输入用户名: <input type="text" name="userName" /><br/>
            
            密码:<input type="password" name="pass"/><br/>
            
            选择性别: 男<input  type="radio" checked name="sex"  value="man"/><input type="radio"  name="sex" value="woman"/><br/>
            
            选择你的兴趣爱好: 篮球<input type="checkbox"   checked="checked" name="hobit" value="1"/> 乒乓球<input type="checkbox" name="hobit" value="2"/> 火球<input type="checkbox" name="hobit" value="3"/><br/>
            
            选择城市:<select name="city">
                        <option value="gz">广州</option>
                        <option value="bj">北京</option>
                        <option value="sz">深圳</option>
                        <option value="bd">冰岛</option>
                            </select><br/>
                        
           头像:<input type="file" name="image" /><br/>
           
           个人简介:<textarea rows="10" cols="20" name="introduce"></textarea><br/>
           
           <input type="submit"  value="提交"/>
           <input type="reset"  value="重置" />
      
        </form>

    可以看到,表单标签<form>内需要使用各种的表单原件来获取用户的数据,通常使用<input>标签的属性type来指定原件类型,但是一些特殊的原件就要使用其他标签,

    例如下拉选择框<select>标签。

    常用属性:

    <form>:属性action用来指定接收表单的目标

         属性method指定数据如何发送到服务器的一个属性,该属性有两个选项get和post。

            post:官方解释是把数据通过post会话传送到服务器。实际就是提交数据。

              get:将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;                          一般用来从服务器得到数据。用get方法提交会吧数据显示在地址栏。如下图

    单选栏和复选栏:

        checked属性:选项内设置checked属性该选项就会默认选上。

    <textarea>常用属性:

        rows和cols属性:设置文字编辑区域的可见行数和可见宽度。

    注意:如果我们仔细观察代码,每个表单组件都设置了一个name属性,这个属性用于数据标识,在传输数据的时候这个name属性就会成为该数据的一个标识。

    如果两个属性具有相同的name属性,那么就认为它们是一组的,同组的情况下,我们在通过设置它们的value属性来。

    最后一个隐藏表单项,我们可以根据不同的用户来隐藏表单

    <!-- 隐藏 的表单项 -->
        <input type="hidden" value="4408812345467"/>

    效果:

    隐藏表单项被隐藏。

  • 相关阅读:
    【转】差分进化算法(DE)
    Cocos Creator 小游戏之找财神(上)
    浅析java线程池
    docker rocketMQ 详细 三分钟搞定 面试有这篇就够了
    docker nacos2.03 详细流程 5分钟搞定
    springboot+rocketmq 快速入门面试篇
    nacos集群 docker 有这一篇就够了,详细
    Ubuntu vi 命令使用详细说明
    idea实现json转JavaBean, 还得是fastjson
    docker nacos2.0.3 SQL语句
  • 原文地址:https://www.cnblogs.com/vmax-tam/p/4095015.html
Copyright © 2020-2023  润新知