自己写的第一个练习网页【2017.7.12】_vs2017 写网页-优快云博客

本文链接：https://blog.youkuaiyun.com/happymorecc/article/details/75040124

本文介绍了HTML中表格布局及表单元素的具体应用实例，包括如何处理不同数量的表格单元格，以及创建包含多种输入类型的注册表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

是ife上面的任务示例图如下：

那个，唯一我不会的地方，是那个表格的最后一行，因为前面都是3个单元格的数据，到最后一行的时候只有两个，所以，当时不知道怎么弄了。之前也没有接触过。最后看了一下别人写的代码。发现，在<td>里面加一个colspan="2"就行了

ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ以下是我自己写的代码ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style content="text/css">

</style>
</head>
<body>
<h1>网站一级标题</h1>
<li><a href="#"><strong>导航链接一</strong></a></li>
<li><a href="#"><strong>导航链接二</strong></a></li>
<li><a href="#"><strong>导航链接三</strong></a></li>
<li><a href="#"><strong>导航链接四</strong></a></li>
<h2>文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>
换行了<br/>
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>
这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。<br/>
<br/>
<img src="C:\Documents and Settings\Administrator\桌面\打字机.png" title="土豪金打字机炫"/>
<br/>
<br/>
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>
换行了<br/>
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>
这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。<br/>
<br/>
<h1>另一篇文章一级标题</h1>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>
换行了<br/>
这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>
这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。<br/>
<br/>
<img src="C:\Documents and Settings\Administrator\桌面\打字机.png" title="土豪金打字机炫"/>
<br/>
<br/>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目三</li>
<h2>图片</h2>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
    好看的图片<br/>
    <img src="C:\Documents and Settings\Administrator\桌面\打字机.png"/><br/><br/>
<h1>最后一篇文章一级标题</h1>
<h2>文章二级标题</h2>
文章作者 文章发表时间<br/>
<ol>
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
<br/>
下面是一个表格，给表格加了一个border="1"好让你看出是一个表格
<table border="1">
<tbody>
<tr>
<td>表头</td>
<td>表头</td>
<td>表头</td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>总计</td>
<td colspan="2">1000</td>
</tr>
</tbody>
</table>
<h1>这里以后是一个侧栏，这是侧栏的标题</h1>
<h2>侧栏注册窗口标题</h2><br/>
<form>
请输入邮箱地址：<input type="text" name="email" value="这是一个文本输入框"/><br/><br/>
邮箱地址请按要求格式输入<br/><br/>
请输入密码：<input type="password" name="password" value="这是一个文本输入框"/>
请重复输入密码：<input type="password" name="password" value="这是一个文本输入框"/><br/><br/>
密码请为6-16位英文数字<br/><br/>
性别：
<input type="radio" value="1" name="gender" checked="checked"/>男
<input type="radio" value="2" name="gender"/>女 
城市：
<select>
<option value="beijing" checked="checked">北京</option>
<option value="xian">西安</option>
<option value="shanghai">上海</option>
</select>
爱好：
<input type="checkbox" value="3" name="运动"/>运动
<input type="checkbox" value="4" name="艺术"/>艺术
<input type="checkbox" value="5" name="科学"/>科学
个人描述：
<textarea>这是一个多行输入框，输入您的个人描述</textarea>
<input type="submit" value="确认提交">
</form>
版权所有©
</body>
</html>