在web前端开发中，html标签和属性是最基础的，但是确是必不可少的。
以下是实例：
实例
<!DOCTYPE html> <!--声明 告诉浏览器以下文档是html文档-->
<html>
<head><!--头部文档 head内部的元素可以引用脚本、样式表、为网页提供元信息-->
<title>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</title><!--头部文档-->
<meta charset="utf-8"> <!--字符集编码-->
<link rel="icon" type="image/x-icon" href="favicon.jpg"><!--引入头部logo-->
<!--内部样式-->
<style type="text/css">
div{
width: 700px; /*宽度*/
height: 200px; /*高度*/
margin: 100px auto; /*上右下左 auto居中*/
}
img{
margin: 50px 0px; /*图像外边距*/
}
h1{
font-family: 宋体; /*改变字体*/
}
/*类的样式*/
.box{
line-height: 30px;margin-bottom: 20px ; /*设置行高，p元素下的外边距*/
font-size: 18px;
}
abbr{
text-decoration: none; /*去下划线*/
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div>
<!--h1是标题标签，一个网页最多只有1个h1标签-->
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<!--内联样式 设置字体颜色，行高 -->
<p style="color: #ccc;line-height: 70px;font-size: 14px;"><a href="http://www.tmtpost.com/user/2559671" target="_blank" ><abbr title="高梦杨" style="color: blue;">高梦杨</abbr> </a>. 2019-3-12 10:10</p>
<!--设置背景颜色，内边距，字体的位置是居中，-->
<p style="background: #ccc;padding: 20px;text-align: center;font-size: 14px;"><b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<!--img标签向网页中嵌入一个图片-->
<img src="https://images.tmtpost.com/uploads/watermark/1400/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg?imageMogr2/strip/interlace/1/quality/85&ext=.jpeg" width="700">
<p><b style="font-size: 18px;">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<!--class定义一个类-->
<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="https://images.tmtpost.com/uploads/watermark/1400/849c7a29e879768fc4ae5bb3802849ec7b1b8a15_1400_333.png?imageMogr2/strip/interlace/1/quality/85/format/jpg&ext=.png" width="700">
<p style="text-align: center;margin:20px auto;font-size: 14px;">魔方公寓历年融资情况 来源：天眼查</p>
<hr style="width: 200px;">
<p class="box">此次融资是2019年集中式公寓领域宣布的第一笔大额融资。而魔方生活服务集团CEO柳佳向钛媒体表示，魔方此次融资将主要用于进一步提升***影响力，深化运营管理，完善IT系统和会员体系，进行项目并购及轻资产拓展，打造高效、便捷、智慧的公寓管理协作平台，为行业赋能，成为中国长租公寓管理第一***。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实
以下一些简单知识点总结
<meta charset="utf-8">定义字符集
<h1>标签一个页面只能用一个 h1->h6由大到小，一般只用到h3
<abbr><b><p><hr><strong><small><del>(删除字)等
a标签超链接，可以连接url，也可以是文件
<div>块级元素
link引入外部文件 例如头部logo
style在head标签内是内部样式，在body其他标签中是内联样式
常用的：width（宽）;height（高）;margin(方向是上右下左，时钟方向一致);font-size(字号)等