1.以下代仿照简单新闻布局做出来的，刚开始也比较耗费时间，很多的标签不是很清楚功能用法，还是要多敲代码，才会知道怎么运用，好好努力！
实例
<!DOCTYPE html>
<html>
<head>
<title>学习前端第一课时</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"><!-- 引入外部文件 -->
<link rel="icon" type="image/x-icon" href="favicon.ico"><!-- 引入头部标题logo -->
<style type="text/css">
*{margin: 0px;padding: 0px;}/*内部样式*/
div{
margin:0 auto;/*居中*/
width:800px;
height: 200px;
}
abbr{text-decoration: none;/*祛除字体下横线*/color:#00A4A0;}
p{
font-size:14px;/*字体大小*/
}
img{
margin: 40px 0;/*外边距*/
}
h1{
font-family:宋体;/*改变字体*/
}
.content{
margin-bottom: 20px;/*下边距*/
font-size: 18px;
}
</style>
</head>
<body>
<div>
<h1>小牛电动2018年度财报：销量高速增长，押注锂电化趋势 </h1>
<!-- 内联样式 -->
<p style="color:#ccc;line-height: 70px;"><abbr title="钛极客">钛极客</abbr> 03-20 13:45</p>
<p style="text-align: center;background-color:#F6F6F6; line-height: 70px;"><b>摘要</b>： 作为国内智能出行领域率先杀出来的创业公司，小牛电动在纳斯达克完成IPO后，它的业绩和股价也一直备受关注。</p>
<img src="https://images.tmtpost.com/uploads/watermark/1400/ddab387ba2cc435486b0928675cb10e835eb809a_1400_883.jpg?imageMogr2/strip/interlace/1/quality/85&ext=.jpg" width="800" alt="这是一张图片">
<p class="content">2018年10月19日，作为国内智能出行领域率先杀出来的创业公司，小牛电动仅仅成立4年多时间就在美股纳斯达克完成了IPO，它的业绩和股价也一直备受关注。
</p>
<p class="content">钛媒体3月18日消息，小牛电动发布了截至2018年12月31日的第四季度和全年未经审计的财务报告，这也是自IPO以来首次公布全年的财务和营收状况。</p>
<h2 style="margin-bottom: 20px;">全年营收创新高，四季度表现良好</h2>
<p class="content">数据显示，小牛电动全年收入14.78亿元，包含四季度净收入4.28亿元，同比2017年增长超过90%，其中地四季度小牛电动净收入较2017年同期增长95%。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.网页超链接的使用，在<a href=""></a>，添加target="_blank";打开一个新的网页进行跳转链接。
实例
<a href="http://www.php.cn/" target="_blank"> php中文网</a>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.用省略号代替超链接超长文本。
实例
div｛ /*white-space 规定如何处理元素内的空白*/ white-space:nowrap; /*文本不会换行 */ /*overflow 属性规定当内容溢出元素框时发生的事情*/ overflow: hidden; /*超出部分隐藏*/ /*text-overflow (css3)属性规定当文本溢出包含元素时发生的事情*/ text-overflow:ellipsis;/* 用省略符号来代表被修剪的文本*/ }
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：课后熟悉常用标签的作用，多多练习！
