HTML练习-1

http://7xrp04.com1.z0.glb.clouddn.com/task_1_1_1.jpg

代码:

  第一部分的

    <!DOCTYPE html>
    <html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<strong><h1>网站一级标题</h1></strong>
<ul>
<a href=""><li>导航链接一</li></a>
<a href=""><li>导航链接二</li></a>
<a href=""><li>导航链接三</li></a>
<a href=""><li>导航链接四</li></a>
</ul>
<h2>文章一级标题</h2>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间</p>
<br />
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br/>换行了</p>
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br />这是一个很长很长的段落,这是一个很长很长的段落,<a href="">这是有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体</strong>这是一个很长很长的段<br />
落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,</p>
<br />
<img src="img/1.png" alt="" /><br />

               </body>
           </html>

       遇到的问题:1、段落标签的使用,如果单独为每一行使用一个段落的话,每一行之间会有空隙达不到效果,这是因为行与行之间存在外边距、

                                2、标签之间的嵌套使用,如p与br

        解决方法:让p标签包含几行    灵活运用嵌套

   第二部分

         <h1>另一篇文章的一级标题</h1>
<h1>文章的二级标题</h1>
<p>文章作者 文章发表时间</p>
<img src="img/1.png" alt="" /><br />
<ul>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目二</li>

               </ul>

 第三部分

<h1>最后一篇文章一级标题</h1>
<p>文章作者 文章发表时间</p>
<br />
<ol>
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
<br />
<p>下面是一个表格,给表格加一个border="1"号让你看出是一个表格</p>
<table border="1">
<tr>
<td>表头</td>
<td>表头</td>
<td>表头</td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td>操作</td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td>操作</td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td>操作</td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td>操作</td>
</tr>
<tr>
<td>总计</td>
<td colspan="2">1000</td>
            </tr>
        </table>


  遇到问题:如何制作表格?

  总结:1、给表格加边框则在table标签中加属性border=“1”

              2、tr决定行数,有几组tr就说明有几行;td决定列数,有几组td就说明有几列;有时列的内容本来1列的却占了两列,则在该列属性中加colspan="2",有时行的内容占2列

则rowspan="2"

 第四部分

请输入邮箱地址:<input type="text"placeholder="这是一个文本输入框" />
<br />
<br />
邮箱地址请按要求格式输入<br />
请输入密码:<input type="password" placeholder="这是一个文本输入框"/> 请重复输入密码:<input type="password" placeholder="这是一个文本输入框"/>
<br />
密码请为6-16位英文数字
<br />
性别:<input type="radio" name="sex" />男 <input type="radio" name="sex"/>女
城市:<select name="city" id="">
   <option value="">上海</option>
   <option value="">广州</option>
   <option value="" selected="selected">北京</option>
    </select>
爱好:<input type="checkbox" name="bobby"/>运动  <input type="checkbox" name="hobby" />艺术 <input type="checkbox" name="hobby"/>科学
个人描述:<textarea name="" id="" >这是一个多行输入框,输入您的个人描述</textarea>
<input type="button" value="确认提交" />
<br />
版权所有&copy;


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值