列举了常见的文本元素，实现了链接的跳转。
实例
<!DOCTYPE html> <!-- 声明 -->
<html>
<head>
<title>学习web的第一节课</title>
<meta charset="utf-8">
<!-- 引入外部文件 -->
<!-- rel代表链接关系 -->
<link rel="stylesheet" type="text/css" href="">
<link rel="icon" type="image/x-icon" href="">
<style type="text/css">
*{margin: 0px; padding: 0px;}
/*首行缩进*/
p{
width: 400px;
text-indent: 2em;
}
div{
width: 300px;
height: 20px;
white-space: nowrap; /*文本不能换行*/
overflow: hidden;
text-overflow: ellipsis; /* 用省略号代替超出的文本*/
}
</style>
</head>
<body>
<h1>第一个标题标签</h1>
<p>段落标签</p>
<!-- 行内元素 -->
<b>加粗</b>
<small>小号字体</small><br> <!-- <br>换行标签 -->
<hr> <!-- 定义水平线 -->
<!-- font不要用了 -->
<font>font的展示</font>
<strong>定义加重语气</strong> <!-- 权重比较高，让百度爬虫能搜到 -->
<del>删除字效果</del>
<p><abbr title="我是解释">html</abbr>(超文本标记语言)</p>
<!-- target="_blank" 打开新页面 -->
<div><a href="demo2.html" target="_blank">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <!-- 声明 -->
<html>
<head>
<title>魔方公寓获得1.5亿美元D轮融资</title>
<meta charset="utf-8">
<!-- 引入外部文件 -->
<!-- rel代表链接关系 -->
<link rel="stylesheet" type="text/css" href="">
<link rel="icon" type="image/x-icon" href="">
<style type="text/css">
*{margin: 0px; padding: 0px;}
h1{
font-family: 宋体;
}
div{
margin: 100px auto;
width: 700px;
height: 200px;
}
abbr{
text-decoration: none; /*去掉下划线*/
color: #52F7F2;
}
.name{
line-height: 70px;
font-size: 14px;
color: #ccc;
}
.abstract{
line-height: 70px;
font-size: 14px;
text-align: center;
background: #f2f2f2;
}
img{
margin: 40px 0px;
width: 700px;
}
.text{
color: #666;
line-height: 30px;
margin-bottom: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<div >
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<p class="name" ><abbr title="高梦阳">高梦阳</abbr> · 2019-03-11 15:34</p> <!-- -->
<p class="abstract"><b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<img src="https://images.tmtpost.com/uploads/watermark/1400/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg?imageMogr2/strip/interlace/1/quality/85&ext=.jpeg" alt="这是一张图片">
<!-- 正文 -->
<p class="text"><b>钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p><br>
<p class="text">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p><br>
<p class="text">据钛媒体了解，本轮战略投资方加拿大魁北克储蓄投资集团（CDPQ）是一家长期投资管理机构，负责管理加拿大魁北克省的公共养老基金以及保险计划的资产。截止2018年12月31日，CDPQ 管理的基金净资产已达3,095亿加元。</p><br>
<p class="text">据CDPQ亚太区私募股权投资总经理林明安向钛媒体透露，这是其在中国投资的第一个项目，而这笔融资将为魔方的未来项目拓展提供资金保障和战略支持。</p><br>
<p class="text">此前，魔方公寓已完成三轮股权融资，投资方包括中航信托、美国华平集团、德同资本等，在投资并购方面，魔方先后对窝趣等国内多个知名的公寓项目进行投资。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
在head中：
<meta charset="utf-8">设置编码格式
<link rel="icon" type="image/x-icon" href="">设置标题前面的icon
属性：
margin: 100px auto;左右使用auto来打到横向居中对齐目的
text-decoration: none; 去掉下划线
设置line-height:等于height来纵向对齐
text-indent首行缩进
white-space: nowrap; 文本不能换行
overflow: hidden;超出部分隐藏掉
text-overflow: ellipsis;用省略号代替超出的文本
标签：
h1 标题标签
b 加粗
p 段落标签
small 小号字体
strong 定义加重语气词，让百度爬虫能搜到
del 删除效果
<a href="demo2.html" target="_blank">在新的标签页打开链接页面
