第二次作业，内容简介的是图文页面：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.ico" />
<!--引入浏览器标签里面的小图片-->
<!--<link rel="stylesheet" type="text/css" href="assets/css/index.css">-->
<!--引入css外部文件-->
<style>
body{margin: 0 auto;padding: 0;font-family: Simhei,"sans serif";}
article{width: 640px;margin: 0 auto;padding: 5px;}
article h1{margin: 15px auto;}
article p{margin: 15px auto;font-size: 1rem;}
article p.sm{font-size: .8rem;color: rgb(153,153,153);}
article p.text-center{text-align: center;}
article p.align-right{text-align: right;}
article p.margin-top-lg{margin-top: 2.5rem;}
article p .fr{color: #00a8e6;float: right;}
article img{margin: 0 auto;display: block;width: 65%;}
</style>
</head>
<body>
<article>
<h1>国内思想周报｜异烟肼与养狗文明</h1>
<!--h1 抬头-->
<p class="sm">2018-08-08 <span class="fr">黄晓明</span></p>
<p>异烟肼与养狗文明</p>
<p>8月8日，一篇题为“遛狗要拴绳，异烟肼倒逼中国养狗文明”的文章在微信朋友圈广泛传播。文章作者“紫竹张先生”介绍称，异烟肼是一种抗结核病的物，对人类有益无害，而对犬类具备非常强的毒杀作用。用异烟肼毒狗的做法近来在全国流行，让很多城市养狗人士不得不在遛狗时拴绳，带来了“倒逼中国养狗文明的进步”的机会。</p>
<!--p 文章段落-->
<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3861356213,626543462&fm=173&app=25&f=JPEG?w=600&h=454&s=B7BA3C8BEA1036D6DE4979030300E001" alt="狗狗" />
<!--img 图片-->
<p class="text-center">漂亮的狗狗</p>
<p>漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗</p>
<p>漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗</p>
<p>漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗</p>
<p>杨津涛认为，漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗<a href="https://www.baidu.com" target="_blank" title="返回百度">返回百度</a></p>
<p class="align-right margin-top-lg">狗狗编辑</p>
</article>
<!--article 作为容器，把内容装在里面-->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
结果图：
手写作业图片：
总结性评论：
今天主要学习了一些主要常用的html代码，比如说：h1,h2,h3,h4,h5,h6,span,p,img；还有一些常用的css属性和值，比如说：display: block/inline/inline-block; text-align:left/center/right/justify；background-color: #333(这里可以加各种颜色，rgb或者#十六进制)；color:#333(这里可以加各种颜色，rgb或者#十六进制)；font-size: 16px/1rem/1em ... 等。
元素分为块级元素，行内元素，分别是display:block/inline；块级元素独自占一行，行内元素独自不会占一行；块级元素可以设置height和width，行内元素设置不了；块级元素可以设置margin及padding值，行内元素同样设置不了。此外还有一个块级元素和行内元素的中间混搭物；叫inline-block，这货既可以设置长宽，又可以添加margin，padding值，还可以和行内元素并排放置。
