• html详解(三)


    7、表格标签。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <!--
    <table>表格标签
    	
    表格使用到的标签:
    	<table> 表格
        <tr>    行
        <td>    单元格
        <th>     表头   默认的样式是居中,加粗。
        <caption>  表格的标题
        
      
    表格常用的属性:
    	border  设置表格的边框 
        width : 设置表格的宽度
        height: 设置表格的高度的。
     	colspan: 设置单元格占据指定的列数。
    	rowspan : 设置单元格占据指定的行数。
     
    -->
    <body>
    	<table align="center" border="1px" bordercolor="#0066CC" width="400px" height="300px">
        	<caption>期末考试成绩表</caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>分数</th>
                    <th>人品</th>
                </tr>
            </thead>
            
            <tbody>
        	<tr>
            	<td rowspan="2">凡江</td>
                <td>98</td>
                <td>优</td>
            </tr>
            
            <tr>
            	
                <td>100</td>
                <td>优</td>
            </tr>
            
             
            <tr>
            	<td>居东东</td>
                <td>99</td>
                <td>非常好</td>
            </tr>
            
            
           
            
            
                <tr align="center">
                    <td>综合测评</td>
                    <td colspan="2">非常好</td>
                </tr>
            
             </tbody>
            
       </table>
    </body>
    </html>
    

    表格标签的作业:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    	<table border="1px" align="center" width="400px" height="300px">
        	<tr>	
            	<th colspan="3">学生成绩</th>
            </tr>
            
            <tr>
            	<td rowspan="2">张三</td>
                <td>语文</td>
                <td>98</td>
            </tr>
            
            <tr>
            	<td>数学</td>
                <td>95</td>
            </tr>
            
             <tr>
            	<td rowspan="2">李四</td>
                <td>语文</td>
                <td>88</td>
            </tr>
            
            <tr>
            	<td>数学</td>
                <td>91</td>
            </tr>
        </table>
     
    </body>
    </html>
    

    8、表单标签。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <!-- 
    表单标签: 表单标签的作用是用于提交数据给服务器的。
    	
        表单标签的根标签是<form>标签
        
    常用的属性:
    	action: 该属性是用于指定提交数据的地址。
    	method: 指定表单的提交方式。
        		get : 默认使用的提交方式。  提交的数据会显示在地址栏上。
                post :  提交的数据不会显示在地址栏上。
     
     
        
        
    注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值。
        
        
        
        
        
    -->
    </head>
    <body>
    	<form action="http://www.baidu.com" method="post">
        	<!-- 文本输入框 单行-->
        	用户名:<input name="userName" type="text"/><br/>
            <!-- 密码框 -->
    		密码:<input name="password" type="password"/><br/>
            <!-- 单选框  -->
            性别: 男<input checked="true" value="man"  name="sex" type="radio"/>   女<input name="sex" value="woman" type="radio"/><br/>
            <!-- 下拉框 -->
            来自的城市:<select name="city">	
                        <option value="BJ">北京</option>
                        <option value="SH">上海</option>
                        <option value="GZ">广州</option>
                        <option value="SZ">深圳</option>
                    </select><br/>
            <!-- 复选框  同一组的复选框name的属性值要一致 -->
           兴趣爱好:java <input value="java" name="hobit"  checked="checked" type="checkbox" />javascript <input type="checkbox" value="javascript" name="hobit" />android <input value="android" name="hobit" type="checkbox" /><br/>
           <!-- 文件上传框-->
        	大头照:<input name="image" type="file" /><br/>
        	个人简介:
            <!-- 文本域 -->
            <textarea  name="intro" rows="10" cols="30"></textarea><br/>
            
            <!-- 提交按钮 -->
            <input type="submit" value="注册"/>
        	<!--  重置按钮 -->
        	<input type="reset" value="重置"/>
        
        </form>
    </body>
    </html>
    


  • 相关阅读:
    php 爬虫采集
    深入浅出Java 23种设计模式,最全PDF版本终于开放下载了!!(文末有福利)
    【Nginx】如何格式化日志并推送到远程服务器?看完原来很简单!!
    【Nginx】如何为已安装的Nginx动态添加模块?看完我懂了!!
    【Nginx】如何配置Nginx日志?这是最全面的一篇了!!
    【Nginx】如何按日期分割Nginx日志?看这一篇就够了!!
    【Nginx】如何封禁IP和IP段?看完这篇我会了!!
    【Nginx】面试官竟然问我Nginx如何生成缩略图,还好我看了这篇文章!!
    【Nginx】实现负载均衡、限流、缓存、黑白名单和灰度发布,这是最全的一篇了!
    【Nginx】如何获取客户端真实IP、域名、协议、端口?看这一篇就够了!
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299802.html
Copyright © 2020-2023  润新知