2021-10-26

最新推荐文章于 2024-08-20 13:42:14 发布

为什么不问问神奇海螺呢732

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量54

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_62163766/article/details/120966507

版权

一、表格、框架和层

（一）与表相关的标记

<table>...</table>表标记

<tr>...</tr>行标记

<td>...</td>单元格标记

<th>...</th>表头单元格标记

<caption>...<caption>标题标记

（二）单元间隔和单元填充

cellspacing——定义单元格之间的间距（以像素为单位）

cellpadding——定义表的单元格边界与单元格内容之间的间距（以像素为单位）

<html>
  
    <head>
        
        <meta http-equiv="Content-Type" content ="text/html; charset=utf-8"/>
        
        <title>我的HTML</title>
		
    </head>

    
    <body>
	    
		<div>
		    <!-- 表格元素table放在最外面，border代表边框宽度 -->
		    <table border="2" align="center">
			     <!-- caption为表格标题，紧跟table元素 -->
		         <caption>信息统计</caption>
				 <!-- tr代表行 -->
				 <tr>
				    <!-- th代表加粗单元格，一般放置标题 -->
				    <th>姓名</th> 
				    <th>性别</th>
					<th>分数</th>
				 </tr>
				 <tr>
				    <!-- td代表普通单元格，一般放置数值 -->
				    <td>Robdert</td>
					<!-- align水平对齐方式：left、center、right -->
					<!-- valign垂直对齐方式：top、middle、bottom -->
					<td align="center" valign="top">M</td>
					<td>80</td>
				 </tr>
				  <tr>
				    <td>Mary</td>
					<td>F</td>
					<td>18</td>
				 </tr>
		    </table>
		    <table border="2" align="center">
			    <tr>
				    <th colspan="3">第一学期</th>
					<th colspan="3">第二学期</th>
				 </tr>
				 <tr>
				    <td>数学</td>
					<td>科学</td>
					<td>英语</td>
					<td>数学</td>
					<td>科学</td>
					<td>英语</td>
				 </tr>
				 <tr>
				    <td>98</td>
					<td>95</td>
					<td>80</td>
					<td>95</td>
					<td>87</td>
					<td>88</td>
				 </tr>
			</table>
   <!-- cellspacing代表单元格之间的距离，cellpadding代表单元格边框与字之间的距离 -->
			<table border="2" align="center" cellspacing="20" cellpadding="20">
			     <tr>
				    <th colspan="2"></th>
					<th>螺母</th>
					<th>螺栓</th>
					<th>锤子</th>
				 </tr>
				 <tr>
				    <th rowspan="3">第一季度</th> 
					<td>一月</td>
					<td>2000</td>
					<td>1800</td>
					<td>1200</td>
				 </tr>
				 <tr>
				    <td>二月</td>
					<td>2500</td>
					<td>3000</td>
					<td>3200</td>
				 </tr>
				 <tr>
				    <td>三月</td>
					<td>3200</td>
					<td>1000</td>
					<td>2400</td>
				 </tr>
			
			</table>
		
		</div>
	
	</body>

</html>

（三）表单的设计

form表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。

1、<input>元素type属性分类

input type =“text”	单行文本输入框
input type =“password”	密码输入框
input type =“file”	上传文件输入框
input type =“checkbox”	复选框
input type =“radio”	单选框
input type =“submit”	提交按钮
input type =“reset”	重置按钮
input type =“button”	普通按钮
input type =“image”	图片按钮
input type =“hidden”	隐藏输入框

<html>
  
    <head>
        
        <meta http-equiv="Content-Type" content ="text/html; charset=utf-8"/>
        
        <title>我的HTML</title>
		
    </head>

    
    <body background="6.jpg">
	    
		<div align="center">
		   <form action="https://www.baidu.com/" method="get">
		       <input type="text" name="name" placeholder="请输入账号"/>
			   </br>
			   <input type="password" name="password" placeholder="请输入密码"/>
			   </br>
			   <font color="white">
			   <input type="radio" name="sex" value="0"/>男
			   <input type="radio" name="sex" value="1"/>女
			   </br>
			   <input type="checkbox" name="inster" value="0"/>动漫
			   <input type="checkbox" name="inster" value="1"/>小说
			   <input type="checkbox" name="inster" value="2"/>游戏
			   <input type="checkbox" name="inster" value="3"/>美食
			   </br>
			   <select name="address">
			       <option value="0">山东</option> 
                   <option value="0">菏泽</option>
                   <option value="0">曹县</option>
                   <option value="0">牛逼</option>
                   <option value="0">666</option>				   
			   </select>
			   </br>
			   <textarea name="remark">
			   </textarea>
		   </form>
		
		</div>
	
	</body>

</html>

为什么不问问神奇海螺呢732

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-10-26

一、表格、框架和层（一）与表相关的标记<table>...</table>表标记<tr>...</tr>行标记<td>...</td>单元格标记<th>...</th>表头单元格标记<caption>...<caption>标题标记（二）单元间隔和单元填充cellspacing——定义单元格之间的间距（以像素为单位）cellpadding——定义表的单元
复制链接

扫一扫