百度前端学院作业一实践-优快云博客

本文链接：https://blog.youkuaiyun.com/silence_27/article/details/72763942
这是百度前端学院的作业一
主要存在的问题就是单纯使用html怎样让图片实现缩进~（暂且使用 来进行空格和缩进）
 
  <!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 
  >baidu_task1 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  h1 
  >这是一个练手的网页 
  </ 
  h1 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "http://ife.baidu.com" 
  >导航链接一 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "http://ife.baidu.com" 
  >导航链接二 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "http://ife.baidu.com" 
  >导航链接三 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "http://ife.baidu.com" 
  >导航链接四 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  < 
  h2 
  >生活日志 
  </ 
  h2 
  > 
 
 
  < 
  h3 
  >简单记录最近的状态 
  </ 
  h3 
  > 
 
 
  < 
  p 
  >邱晨 2017.05.24 
  </ 
  p 
  > 
 
 
  < 
  p 
  >本来是想说可以写点自己的状态啥的，但是我觉得还是写这是一个很长很长的段落来的更快捷简单，所以接下来就是... 
 
 
  < 
  br 
  >换行了 
  < 
  br 
  > 这是一个很长很长的段落,这是一个很长很长的段落,换行了 
  < 
  br 
  > 这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落, 
 
 
  < 
  a 
   href= 
  "http://ife.baidu.com" 
  >这是一个连接到百度前端学院的链接 
  </ 
  a 
  >这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,应该已经够长了吧. 
 
 
  </ 
  p 
  > 
 
 
  < 
  p 
  >从手机里面扣出来的图片 
  </ 
  p 
  > 
 
 
  < 
  image 
  src= 
  "G:\大三下Java代码\前端引用的图片\baidu_task1\2.jpg" 
  height= 
  "300px" 
  width= 
  "300px" 
  ></ 
  image 
  > 
 
 
  < 
  p 
  >继续很长的段落话题，这是一个很长很长的段落, 这是一个很长很长的段落这是一个很长很长的段落, 这是一个很长很长的段落这是一个很长很长的段落, 这是一个很长很长的段落 
  </ 
  p 
  > 
 
 
  < 
  h2 
  >另一篇文章 
  </ 
  h2 
  > 
 
 
  < 
  h3 
  >继续我的胡说八道 
  </ 
  h3 
  > 
 
 
  < 
  p 
  >邱晨 2017-05-24 
  </ 
  p 
  > 
 
 
  < 
  p 
  >继续这是一个很长很长的段落之旅.... 
 
 
  < 
  br 
  >换行了 
  < 
  br 
  > 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落,换行了 
 
 
  < 
  br 
  >< 
  strong 
  >这是加粗了的字体 
  </ 
  strong 
  > 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落 
 
 
  < 
  a 
   href= 
  "http://ife.baidu.com" 
  >这是一个连接到百度前端学院的链接 
  </ 
  a 
  >这是一个很长很长的段落, 这是一个很长很长的段落 
 
 
  </ 
  p 
  > 
 
 
  < 
  image 
  src= 
  "G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg" 
  height= 
  "300px" 
  width= 
  "300px" 
  ></ 
  image 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
  >序号1 
  </ 
  li 
  > 
 
 
  < 
  li 
  >序号2 
  </ 
  li 
  > 
 
 
  < 
  li 
  >序号3 
  </ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  < 
  h2 
  >图片 
  </ 
  h2 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  p 
  >好看的图片 
  </ 
  p 
  > 
 
 
  < 
  image 
  src= 
  "G:\大三下Java代码\前端引用的图片\baidu_task1\1.jpg" 
  height= 
  "300px" 
  width= 
  "300px" 
  ></ 
  image 
  > 
 
 
  </ 
  div 
  > 
 

 
  < 
  h2 
  >最后一篇文章 
  </ 
  h2 
  > 
 
 
  < 
  h3 
  >继续我的胡说八道 
  </ 
  h3 
  > 
 
 
  < 
  ol 
  > 
 
 
  < 
  li 
  >考试排名1 
  </ 
  li 
  > 
 
 
  < 
  li 
  >考试排名2 
  </ 
  li 
  > 
 
 
  < 
  li 
  >考试排名3 
  </ 
  li 
  > 
 
 
  </ 
  ol 
  > 
 
 
  < 
  p 
  >下面是一个表格 
  </ 
  p 
  > 
 
 
  < 
  table 
  border= 
  "1" 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  th 
  >姓名 
  </ 
  th 
  > 
 
 
  < 
  th 
  >工资 
  </ 
  th 
  > 
 
 
  < 
  th 
  >操作 
  </ 
  th 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  >小明 
  </ 
  td 
  > 
 
 
  < 
  td 
  >2000 
  </ 
  td 
  > 
 
 
  < 
  td 
  >< 
  a 
  href= 
  "http://ife.baidu.com" 
  >修改 
  </ 
  a 
  ></ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  >小红 
  </ 
  td 
  > 
 
 
  < 
  td 
  >3000 
  </ 
  td 
  > 
 
 
  < 
  td 
  >< 
  a 
  href= 
  "http://ife.baidu.com" 
  >修改 
  </ 
  a 
  ></ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  >总计 
  </ 
  td 
  > 
 
 
  < 
  td 
   colspan= 
  "2" 
  >5000 
  </ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  </ 
  table 
  > 
 
 
  < 
  h2 
  >这里以后是一个侧栏，这是侧栏的标题 
  </ 
  h2 
  > 
 
 
  < 
  h2 
  >侧栏注册窗口标题 
  </ 
  h2 
  > 
 
 
  < 
  form 
  > 
 

   请输入邮箱地址： 
  < 
  input 
  type= 
  "text" 
  value= 
  "这是一个文本输入框" 
   />< 
  br 
  > 邮箱地址请按要求格式输入 
 
 
  < 
  br 
  > 请输入密码： 
 
 
  < 
  input 
  type= 
  "text" 
  value= 
  "这是一个文本输入框" 
   />请重复输入密码： 
 
 
  < 
  input 
  type= 
  "text" 
  value= 
  "这是一个文本输入框" 
   />< 
  br 
  > 密码请为6-16位英文数字 
 
 
  < 
  br 
  > 
 
 
  < 
  br 
  >性别： 
  < 
  input 
  type= 
  "radio" 
  name= 
  "sex" 
   value= 
  "0" 
  checked= 
  "checked" 
   />男 
 
 
  < 
  input 
  type= 
  "radio" 
  name= 
  "sex" 
   value= 
  "1" 
   />女 
  < 
  br 
  > 城市: 
 
 
  < 
  select 
  > 
 
 
  < 
  option 
  > --请选择-- 
  </ 
  option 
  > 
 
 
  < 
  option 
  >北京 
  </ 
  option 
  > 
 
 
  < 
  option 
  >南京 
  </ 
  option 
  > 
 
 
  < 
  option 
  >上海 
  </ 
  option 
  > 
 
 
  </ 
  select 
  > 
 
 
  < 
  br 
  >爱好： 
 
 
  < 
  input 
  type= 
  "checkbox" 
   />运动 
 
 
  < 
  input 
  type= 
  "checkbox" 
   />艺术 
 
 
  < 
  input 
  type= 
  "checkbox" 
   />科学 
  < 
  br 
  > 个人描述： 
 
 
  < 
  textarea 
  value= 
  "" 
  >这是一个输入框，请输入你的个人描述 
  </ 
  textarea 
  >< 
  br 
  > 
 
 
  < 
  input 
  type= 
  "submit" 
  value= 
  "确认提交" 
   /> 
 


 
  </ 
  form 
  > 
 
 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 
任务一
