实例1:通过一些常用的html标签和一些css样式制作一个简单的新闻网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.11</title>
<style type="text/css">
*{margin: 0;padding:0;}
div{width: 700px;height: 200px;margin: 100px auto;}
abbr{text-decoration: none;color: #52f7f2;}
hr{background-color: #ccc;margin-top: 10px;}
p{font-size: 14px;}
img{margin-top: 40px;}
.box{margin-bottom: 40px;}
.box1{text-indent:2em;}
</style>
</head>
<body>
<div>
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<hr>
<p style="color: #ccc;line-height: 70px;"><abbr title="高门杨">高门杨</abbr> . 2019-3-11 21:24</p>
<p style="text-align: center;background-color: #f2f2f2;line-height: 70px;"><b>摘要： 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</b></p>
<img class="box" src="https://images.tmtpost.com/uploads/watermark/1400/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg?imageMogr2/strip/interlace/1/quality/85&ext=.jpeg" width="700px">
<p class="box box1"><b style="font-size: 18px;">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p class="box box1">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="box box1">据钛媒体了解，本轮战略投资方加拿大魁北克储蓄投资集团（CDPQ）是一家长期投资管理机构，负责管理加拿大魁北克省的公共养老基金以及保险计划的资产。截止2018年12月31日，CDPQ 管理的基金净资产已达3,095亿加元。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2:通过white-space,text-overflow,overflow三个css样式实现新闻列表页超出部分隐藏,然后通过省略点的形式代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表跳转</title>
<style type="text/css">
a{width: 300px;display: block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
</style>
</head>
<body>
<a href="">***中央办公厅印发《关于解决形式主义突出问题为基层减负的通知</a>
<a href="">外交部：埃塞航空遇难8名中国公民身份初步确认</a>
<a href="">美团2018年营收增逾九成，经调整净亏损85亿；摩拜优化国际业务</a>
<a href="">苹果发出3月25日发布会邀请函：或推流媒体电视服务</a>
<a href="">埃航客机最后6分钟状态曝光！飞机在农田撞出深坑，黑匣子已找到</a>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
一、<DOCTYPE html> 除html类型外，还有xml 、xhtml。（声明文档类型）
二、<head>中常用的标签：
<title> 定义网页文档标题
<meta> 定义网页信息，如文档编码：utf-8
<link>链接外部文件
1. 链接样式表 <link rel=“stylesheet” type=“text/css” href=“路径”>
2. 链接缩略图标<link rel = “shotcut-icon” type=“image/x-icon” href =“路径”>
rel 定义文档与文件的关系 type 文件类型 href 文件路径
<style> 定义内部样式
三.<body>中常用的标签:
<p>定义段落
<h1>-<h6>定义标题
<hr> 水平线的标签
<div>无意义的空标签
<img>插入图片的标签
<abbr>加重语气的标签
四,css样式
white-space 规定如何处理元素内的空白
overflow 属性规定当内容超溢出元素框时发生的事情
text-overflow 用省略符号来代表被修剪的文本
