demo1的重复敲击代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight:bold;/*定义粗体*/
font-size:30px; /* 定义字体大小*/
font-family:楷体; /*定义字体*/
}
h1{ text-align:center;/*left right*/
height: 100px;
background: #ccc;
line-height:100px;/*定义行高*/
}
span{font-size: 40px;font-weight: bold;font-family: georgia;}
img{width: 300px;height: 400px;}
b{ display: block;
width: 300px;
height: 40px;
background: pink;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;
}
b:hover{overflow: visible;}/*默认值，内容不会被修剪，元素会被呈现在元素框之外；*/
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<br>
<!-- 谷歌logo -->
<span style="color:#0388F1">G</span>
<span style="color: rgb(245,28,39);">o</span>
<span style="color: #FFE80E">o</span>
<span style="color:#0388F1">g</span>
<span style="color:#39FF1B">l</span>
<span style="color: #FFE80E">e</span>
<!-- 图文混排 -->
<br>
<p style="display: inline-block;width: 300px;height: 400px;">据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</p>
<img src="images/1.jpg">
<br><br>
<img src="images/1.jpg">
<b>据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</b>
</body>
</html>dome2的重复敲击代码：
<!DOCTYPE html> <html> <head> <title>文本控制</title> <meta charset="utf-8"> </head> <body> <h1>这是一个h1标签</h1> <h2>这个是h2标签</h2> <h3>这是h3标签</h3> <h4>这是h4标签</h4> <h5>这是h5标签</h5> <h6>这是h6标签</h6> <b>这是粗体标签b</b> <p>坚决打赢脱贫攻坚战 </p> <br> <br> <strong>php中文网</strong> <i>坚决打赢脱贫攻坚战</i> <em>定义着重字</em> <del>定义删除字标签</del> <span style="background: pink;width: 300px;height: 200px;">399元</span><del>499</del> <pre>预格 式 化文本</pre> <p style="background: #ccc;width: 300px;height: 200px;">123</p> <span>399元</span> <!-- 块级元素：div h1~h6 p 独占一行 对宽高属性值设置生效 行内：可以共存于一行对宽高属性值设置不生效 --> <!-- 行内块元素：结合了块级以及行内的特点 --> <img src="images/1.jpg" style="width: 200px;height: 300px;" /><span>123</span> 行内块级相互转换： display: inline 将块级元素转换为行内 display: inline-block;将块级元素转换为行内块元素 display: block;将行内元素转换为块级 <div style="width: 100px;height: 100px;background: pink; display: inline;">1</div> <div style="width: 100px;height: 100px;background: pink; display: inline-block;">2</div> <span style="width: 100px;height: 100px;background: pink;display: block;">3</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">4</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">5</span> </body> </html>
根据作业提示自我编辑出来的新闻页面相关代码如下：
<!DOCTYPE html>
<html>
<head>
<title>
大豆船后多艘美国煤炭货船飞奔向中国
</title>
<meta charset="utf-8">
<style type="text/css">
#allcenter{
width: 550px;
height: 100%;
margin: 0 auto;
border: 1px solid black;
}
p{
text-indent: 2em;
}
</style>
</head>
<body style="background:#FDFCF8;">
<div id="allcenter">
<h1>求生欲很强 大豆船后多艘美国煤炭货船飞奔向中国</h1><br>
<span style="color:grey;">2018-08-14 来自新浪新闻</span><br>
<img src="./1.png" style="width:550px;">
<p style="text-align: center;">“飞马峰号”货船</p>
<div>
<p>参考消息网8月14日报道 还记得在中国境外海面上转悠了一个多月的美国大豆船“飞马峰号”吗？如今，它的命运终于迎来了“大结局”。据路透社12日报道，根据Eikon船舶信息显示，“飞马峰号”大豆船已于12日凌晨停泊大连港。</p>
<p>不过，尽管“飞马峰号”事件已告一段落，但随着8月23日美国政府将掀起新一波对华加征关税，更多美国货船或重演“飞马峰号”的经历，而这一次，向中国一路狂奔的是多艘满载美国煤炭的货船。</p>
<p>据路透社报道，至少有四批价值3000万美元的美国煤炭货船正向中国进发。报道称，这些货船总共装载有33.5万吨煤炭，希望能及时到达中国以避免新的关税。</p>
<p>报道指出，上述赶赴中国的美国煤炭船预计到达的时间可避免新关税。但后续更多的煤炭货船可能就没这么幸运了，因此货主们都急急忙忙地一批又一批向中国发货。</p>
<p>媒体报道称，自美国政府宣布对价值160亿美元的中国商品追加征税、并公布最终名单后，中国便承诺在同一天引入对等回应措施，将对333种美国商品加征关税。据报道，美国煤炭就在名单之列。</p>
<p>有舆论发现，与大豆相比，对中国而言，美国煤炭的优势并不显著，不仅运输时间长、成本高，在上也并非最佳。还有分析人士指出，一旦中国新一波反制措施正式实施，美国煤炭的成本将大增，美国煤炭将不得不面对被“挤出”中国的命运。</p>
<p>事实上，美国煤炭业的遭遇或许只是贸易战下美国能源产业的一个缩影。实际上，担心被列入“反制清单”的美国液化气产业也忧心忡忡。</p>
<p>据报道，去年中国是全球第二大液化气国，共采购液化气3800万吨。与此同时，美国液化气出口逾15%销往中国。据国际能源署预测，今年中国将成为全球第一大液化气国。</p>
</div>
<div>
<b>Student Number:79491</b>
</div>
</div>
</body>
</html>展示效果如图：
执行结果：完成了我想要的样式，虽然做的非常的粗糙，改进空间很大！
总结：学会了图文在页面中的简单排列，对于行内及块级标签有了新的认识，各种标签属性繁多，在第一次操作的情况下很多都不熟悉，需要打开手册查阅，尚需多多记忆这一些属性。
手抄代码在另外一篇博客中
