百度前端技术学院第一题

最近开始正式学前端,所以开通博客,记录一下自己的前端之路。

下面是百度前端技术学院的练习题,自己看完CSS和HTML之后开始尝试做一下。第一道题非常简单,且涵盖了大部分HTML的基础知识。

下面是题目:

参考http://7xrp04.com1.z0.glb.clouddn.com/task_1_1_1.jpg,完成一个HTML页面代码编写(不写CSS,不需要关注样式,只关注文档结构

下面是我的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>题目一</title>
</head>
<body>
<div>
<h1>网站一级标题</h1>
<ul>
	<li><a href="http://ife.baidu.com/task/detail?taskId=1">导航链接1</a></li>
	<li><a href="http://ife.baidu.com/task/detail?taskId=1">导航链接2</a></li>
	<li><a href="http://ife.baidu.com/task/detail?taskId=1">导航链接3</a></li>
	<li><a href="http://ife.baidu.com/task/detail?taskId=1">导航链接4</a></li>
</ul>
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
<p>文章作者 文章发表时间<br>
   这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<br>
   这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<a href="http://ife.baidu.com/task/detail?taskId=1">这是一个链接到http://ife.baidu.com</a>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<strong>这里有一个粗体字</strong>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落。<br>
   <img src="C:\Users\H\Desktop\新建文件夹\test1.jpeg" title="图片1" width="800px" height="500px"><br>
   这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<a href="http://ife.baidu.com/task/detail?taskId=1">这是一个链接到http://ife.baidu.com</a>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<strong>这里有一个粗体字</strong>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落。<br>
</p>
</div>
<div>
<h1>另一文章一级标题</h1>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间<br>
   这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<br>
   这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<a href="http://ife.baidu.com/task/detail?taskId=1">这是一个链接到http://ife.baidu.com</a>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,<strong>这里有一个粗体字</strong>这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落。<br>
   <ul>
   <li>列表项目一</li>
	<li>列表项目二</li>
	<li>列表项目三</li>
	</ul>
	<ul>
		<li>图片一 <br>
		<img src="C:\Users\H\Desktop\新建文件夹\test1.jpeg" title="图片1" width="800px" height="500px"><br>
		</li>
		<li>图片二 <br>
		<img src="C:\Users\H\Desktop\新建文件夹\test1.jpeg" title="图片1" width="800px" height="500px"><br>
		</li>
		<li>图片三 <br>
		<img src="C:\Users\H\Desktop\新建文件夹\test1.jpeg" title="图片1" width="800px" height="500px"><br>
		</li>
		<li>图片四<br>
		<img src="C:\Users\H\Desktop\新建文件夹\test1.jpeg" title="图片1" width="800px" height="500px"><br>
		</li>
	</ul>
	</div>
<div>
<h1>最后一篇文章一级标题</h1>
<h2>文章二级标题</h2>
<p>文章作者 文章发表时间<br></p>
<table border="1">
	<tbody>
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</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>1000</td>
		</tr>
	</tbody>
</table>
<h2>这里以后是一个侧栏,这是侧栏的标题</h2>
<h2>侧栏注册窗口标题</h2>
<form>
请输入邮箱地址:<input type="text" name="email"><br>
</form>
<form>
请输入密码:<input type="password" name="password1">请重复输入密码:<input type="password" name="password2">
</form><br>
<form>
<label>性别:</label>
<input type="radio" name="性别" value="男" />男
<input type="radio" name="性别" value="女" />女
<label>地点</label>
<select>
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
</select>
<label>爱好:</label>
<input type="checkbox" name="爱好" value="运动" />运动
<input type="checkbox" name="爱好" value="艺术" />艺术
<input type="checkbox" name="爱好" value="科学" />科学
<br>
<label>个人描述:</label>
<textarea rows="4" cols="200">这是您的一个多行输入框
</textarea>
<input type="submit" name="确定">确定提交
</div>
</body>
</html>


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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值