通过学习了解了网页常见元素，根据网页基本元素学会了基本的网页布局。
新闻列表实例
<!DOCTYPE html>
<html>
<head>
<title>我是新闻列表</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<style type="text/css">
/* 内部样式*/
*{margin: 0; padding: 0;} /*清除浏览器内部样式*/
div{
width:300px; /*宽度*/
height:35px; /*高度*/
background:#f2f2f2f; /*背景色*/
/*white-space 规定如何处理元素内的空白*/
white-space: nowrap; /*文本不会换行*/
/*overflow 属性规定当内容溢出元素框时发生的事情*/
overflow: hidden; /*hidden 隐藏属性*/ /*超出部分隐藏*/
text-overflow: ellipsis; /*ellipsis 省略属性*//*决定当文本溢出时是否显示省略标记*/
}
a{
text-decoration: none; /*去掉链接下划线*/
color: #000; /*超链接文字颜色*/
}
</style>
</head>
<body>
<div><a href="info.html" target="_black">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
<div><a href="info.html" target="_black">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
<div><a href="info.html" target="_black">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
<div><a href="info.html" target="_black">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
<div><a href="info.html" target="_black">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
<div><a href="info.html" target="_black">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
<div><a href="info.html" target="_black">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
<div><a href="info.html" target="_black">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
以上是笔记
新闻内容实例
<!DOCTYPE html>
<html>
<head>
<title>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<style type="text/css">
/* 内部样式*/
*{margin: 0; padding: 0;}
div{
margin:100px auto; /*居中*/
width: 700px; /*定义宽带*/
height:200px; /*定义高度*/
}
hr{
width:230px;
margin:20px auto;
}
abbr{text-decoration:none; /*去掉下划线*/
color:#00A4A0; /*字体颜色*/
}
p{
font-size:16px; /*文字大小*/
}
img{
margin: 30px 0; /*图片边距*/
}
h1{
font-family:Microsoft YaHei; /*定义字体*/
}
.box{line-height: 30px; margin-bottom:20px;
}
.box1{margin: 20px; font-size: 14px; text-align: center;}
.box2{margin:20px; font-size:16px; text-align: center;}
</style>
</head>
<body>
<div>
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<!-- 内联样式写法 -->
<p style="color:#ccc; line-height:70px; font-size:12px;"><abbr title="高梦杨">高梦杨</abbr> . 2019-3-11 13:35</p>
<!-- 文字居中 背景色 -->
<p style="text-align:center;font-size: 14px; line-height:70px; background:#F6F6F6;"><b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<img src="img/1.jpg" width="700px"; alt="我是一张图片">
<p class="box"><b style="font-size:18px;">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="box">据钛媒体了解，本轮战略投资方加拿大魁北克储蓄投资集团（CDPQ）是一家长期投资管理机构，负责管理加拿大魁北克省的公共养老基金以及保险计划的资产。截止2018年12月31日，CDPQ 管理的基金净资产已达3,095亿加元。</p>
<p class="box">据CDPQ亚太区私募股权投资总经理林明安向钛媒体透露，这是其在中国投资的第一个项目，而这笔融资将为魔方的未来项目拓展提供资金保障和战略支持。</p>
<p class="box">此前，魔方公寓已完成三轮股权融资，投资方包括中航信托、美国华平集团、德同资本等，在投资并购方面，魔方先后对窝趣等国内多个知名的公寓项目进行投资。</p>
<img src="img/2.jpg" width="700px" alt="我也是一张图片">
<p class="box1">魔方公寓历年融资情况 来与：天眼查</p>
<hr>
<p class="box">此次融资是2019年集中式公寓领域宣布的第一笔大额融资。而魔方生活服务集团CEO柳佳向钛媒体表示，魔方此次融资将主要用于进一步提升***影响力，深化运营管理，完善IT系统和会员体系，进行项目并购及轻资产拓展，打造高效、便捷、智慧的公寓管理协作平台，为行业赋能，成为中国长租公寓管理第一***。</p>
<p class="box">2018年，由于众多长租公寓运营商滥用金融杠杆、盲目扩张，引发了多起爆仓事件，行业也经历了一波倒闭潮与整合潮。进入2019年，行业中也只有分散式的蛋壳公寓与集中式的魔方公寓。</p>
<p class="box">尽管2018年行业遭遇了挫折，但7天连锁酒店创始人，同时也是魔方生活服务集团董事长郑南雁也很看好长租公寓的未来。</p>
<p class="box">他认为，发展长租公寓已经成为当下中国房地产发展的重要长效机制，魔方通过将闲置和低效利用的存量物业转变为人民群众需要的‘增量’租赁用房，创造了中国新时代下的租赁模式，既符合城市更新、产业发展以及政策导向，也满足了人民提升租住体验、追求美好生活的需求。</p>
<p class="box">
对此，柳佳也表示，由于大规模的城市化与人口迁移，加之大城市房价的上涨，国内租赁***的需求不会下降，反而在不断上涨。随着国家政策的持续扶持，以及租赁用地、房源的增加，行业依然有着很大的空间与潜力。</p>
<p class="box">柳佳认为，行业内现存的玩家，更应该把注意力放在运营管理效率的提升上。而目前看来，魔方已经有了不错的成绩。</p>
<p class="box">据她介绍，魔方是行业内坪效最高的公寓运营商，精细化运营管理和领先的技术管理平台让门店收益实现最大化。而通过云计算、大数据，人工智能和物联网技术的创新运用，魔方打造了的智慧公寓，实现租客生活场景都实现智能化、安全化、无人化。</p>
<p class="box">另外，魔方还将智能化管理与APP结合，租客从找房看房，到签约入住和租后服务，以及入住后的生活需求包括出行、购物、社交等，都可以在APP上一键实现。</p>
<p class="box">与此同时，柳佳还宣布魔方启动了轻资产战略加速仪式。目前，魔方已针对地产开发商、建筑商、物业持有者等已经探索出了***、托管、合资等多种灵活的合作模式。目前，魔方已实现在华南、华东等多地区国企合作的开拓，和当地企业成立合资公司，共同开展长租公寓项目管理、运营。此次融资有利于帮助魔方软硬件全面升级，进一步加快魔方在轻资产领域的拓展合作。</p>
<p class="box">此外柳佳还披露，接下来魔方聚焦长租公寓领域的同时，还将加强政企合作参与到城市人才公寓建设和公租房运营管理中，积极参与行业规则的制定。目前，魔方是深圳、武汉、南京等多个住房租赁试点城市的试点企业，多次作为行业代表参与国家部委对长租公寓行业的***调研，参与住建部、商务部等有关长租公寓行业标准的制定。（本文首发钛媒体，作者/高梦阳）</p>
<p class="box2"><b>更多精彩内容，关注钛媒体微信号（ID：taimeiti），或者下载钛媒体App</b></p>
<img src="img/3.jpg" width="700px"; alt="我还是一张图片">
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
常见元素总结：
标题是通过<h1><h6>标签进行定义
段落是通过<P></p>标签进行定义
h1标签一个页面尽量使用一个
<b>标签是文本加粗标签
<br>标签是换行
<hr>标签是定义线
<div>是没有语义的块级元素