最近开始正式学前端,所以开通博客,记录一下自己的前端之路。
下面是百度前端技术学院的练习题,自己看完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>