![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
web基础语言是html+css语言，本文将介绍html和css常用的元素和样式。
这里有一段完整的代码示例：
<!-- 1：前端知识介绍 -->
<!-- 文档结构： html\head\body\title\meta-->
<!DOCTYPE html><!-- 文档声明（告诉浏览器我是一个hmtl文档） -->
<html>
<head><!--文档头部head head内部的元可以引用脚本、样式表、为网页提供原信息-->
<title>WEB第一节课_html介绍</title><!--文档头部标题-->
<meta charset="utf-8"><!--防止浏览器出现乱码-->
<!--手机端禁止用户缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<!-- 引入外部文件（link）
rel：规定当前文档与被链接文档之间的关系
type：定义被连接文档的类型
-->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
/*内部样式*/
*{margin: 0;padding: 0;}
div{width:1226px;margin:0 auto;margin-top:20px;}
p{text-indent: 2em;}
pre{font-size: 18px;font-weight: 800;}
div div{
width: 300px;
height: 20px;
background: #f2f2f2;
/* white-space 规定如何处理元素内的空白 */
white-space: nowrap; /* 文本不会换行 */
/* overflow 属性规定内容溢出元素框时发生的事情 */
overflow: hidden;/* 超出部分隐藏 */
/* 用省略符号来代表被修剪的文本（超出部分会以...显示） */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
<!--
页面中常用文本元素
标题是通过<h1> ~ <h6> 标签进行定义的
-->
<h1>一个网页中只能有一个h1，否则对SEO优化不友好，影响百度蜘蛛抓取</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<p>p标签是一个段落标签：也是一个<b>块状元素</b>。特点：1.宽度占用父类的宽度，一整行；2.可以设置宽、高</p>
<b>b标签：加粗文本</b>
<small>smal标签：小号字体 b和small是行内元素，可以在一行进行显示，不能设置宽度，可以设置高度；</small>
<p>br是单标签，是一个换行标签 <br> hr标签：定义水平线</p>
<!-- br是单标签，是一个换行标签 -->
<br>
<!-- hr标签：定义水平线 -->
<hr>
<!-- 让百度搜索引擎进行抓取，比其他权重比较高。 -->
<strong>strong标签定义着重语气词：让百度搜索引擎进行抓取，比其他权重比较高。</strong><br>
del定义删除字的，例如：原价是
<del>199</del>现价998 <br>
<p><abbr title="HyperText Markup Language">html</abbr>(超文本标记语言)</p>
<pre>
页面中常用文本属性
首行缩进（text-indent:2em;）
</pre>
<div>strong标签定义着重语气词：让百度搜索引擎进行抓取，比其他权重比较高。</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
上述代码中涉及到的知识点如下：
HTML部分：
1. html的结构 <html><head></head><body></body></html>
2. html是超文本标记语言，html在其中是根节点；
3. head是头部元素：里面可以引入外部资源、定义文本形式、ico图标、字体格式；
4. body是主体部分：里面标签很多有h1~h6标题标签、p段落标签、b加粗标签、abbr注释标签、strong着重标签等。。。
CSS部分：
*{margin：0；padding:0;}给整个文档里面的元素去除，外边距和内边距。
text-indent：2em 首行缩进两个字符
white-space: nowrap; 超出父元素是，不换行
overflow：hidden；超出父元素的部分隐藏起来
text-overflow: ellipsis; 如果字数超出父元素则用省略号代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>详情页案例</title>
<style>
/* 内部样式 */
*{margin: 0; padding: 0;}
div{width:700px; margin:0 auto;margin-top:100px;}
h1{font-weight: 400;font-size: 36px;line-height: 1.3em;margin-bottom:18px;}/*font-family: 宋体;改变字体*/
abbr{text-decoration: none; color:#00A4A0;}
a{text-decoration: none;}
abbr:hover{color:lightblue;}
/* .desc{margin-top:20px;background-color:#f6f6f6;padding: 25px;font-size: 14px;} */
p{font-size: 18px;line-height: 36px;margin-bottom: 20px;}
.desc{margin-top:20px;background-color:#f6f6f6;font-size: 14px;height: 70px;line-height: 70px;text-align: center;}
img{margin:30px 0px;}
p img{margin:20px 0px 0px 0px;}
</style>
</head>
<body>
<div>
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<p style="color:#ccc;font-size: 14px;"><a href="javascript:;"><abbr title="高梦阳">高梦阳</abbr></a> • 2019-03-11 15:34</p>
<p class="desc"><b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<img src="images/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg" alt="" width="100%">
<p><b>钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p>公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p>据钛媒体了解，本轮战略投资方加拿大魁北克储蓄投资集团（CDPQ）是一家长期投资管理机构，负责管理加拿大魁北克省的公共养老基金以及保险计划的资产。截止2018年12月31日，CDPQ 管理的基金净资产已达3,095亿加元。</p>
<p>据CDPQ亚太区私募股权投资总经理林明安向钛媒体透露，这是其在中国投资的第一个项目，而这笔融资将为魔方的未来项目拓展提供资金保障和战略支持。</p>
<p>此前，魔方公寓已完成三轮股权融资，投资方包括中航信托、美国华平集团、德同资本等，在投资并购方面，魔方先后对窝趣等国内多个知名的公寓项目进行投资。<img src="images/849c7a29e879768fc4ae5bb3802849ec7b1b8a15_1400_333.jpg" alt="" width="100%"></p>
<p style="text-align:center;color:#808080;font-size: 14px;">魔方公寓历年融资情况 来源：天眼查<span style="display:block;margin: 0px auto;width: 30%;border-bottom: 1px solid #ccc;"></span></p>
<p>此次融资是2019年集中式公寓领域宣布的第一笔大额融资。而魔方生活服务集团CEO柳佳向钛媒体表示，魔方此次融资将主要用于进一步提升***影响力，深化运营管理，完善IT系统和会员体系，进行项目并购及轻资产拓展，打造高效、便捷、智慧的公寓管理协作平台，为行业赋能，成为中国长租公寓管理第一***。</p>
<p>2018年，由于众多长租公寓运营商滥用金融杠杆、盲目扩张，引发了多起爆仓事件，行业也经历了一波倒闭潮与整合潮。进入2019年，行业中也只有分散式的蛋壳公寓与集中式的魔方公寓。</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行显示如下：
