先附上我总结的笔记
3.11
em-大像素单位px-小像素单位
<h1>-<h6> 字体由大到小
<P></P>段落标签 一般第一段落
<b></b>用作加粗的文本
<small></small>小号字体
<br>定义换行
<hr>定义水平线
<strong></strong>定义加重语气词
<del></del>定义删除字
<abbr></abbr>定义缩写
标签到标签里面的内容称为元素，给他添加样式效果称为属性。（text-indent）首行缩进
<style type="text/css">内部样式</style>
*{margin:0;padding:0;}//内外边距清零
p//<p>开头的所有标签都缩进{
width:400px//宽度
text-indent:2em//缩进两个单位
}<div></div>//没有语义的快捷元素
<p style="color:#ccc;">//内联样式<abbr title="高梦杨">高梦杨</abbr>.2019.3.11 22:55</p>
<img src="1.jpeg" width=700px alt="加载中"" >-加入图片，图片地址，图片宽度，图片缺失后显示的内容width-宽度
height-高度
margin:0 auto;-居中效果，上下边距0，左右自动
margin:上右下左
text-decoration：none；-取消文字下划线
line-height:-定义行高
font-size:-字体大小
-占位符
alt=""-这是一张图片，无法加载时告诉人家这是一张图片
text-align:center;-居中效果
background:#-背景色
font-family:设置字体
margin-bottom:单独底部距离
white-space:nowrap;-文本不允许换行
overflow:hidden;-当文字超出部分隐藏
texe-overflow:ellipsis-当超出部分用....表示
实例
<!DOCTYPE html><!--声明文档，首先告诉浏览器这是一个html文档-->
<html><!--标签的开头-->
<meta charset="utf-8"><!--防止有中文内容时乱码-->
<head><!--浏览器的头部标签-->
<title> 魔方公寓获得1.5亿美元D轮融资</title><!--网页的标题标签-->
<link rel="icon" type="image/x-icon" href="favicon (1).ico"><!--网页标签的logo-->
<style type="text/css">/*内部样式，我的理解是统一设定记录在内的标签样式，包括格式、颜色、大小、位置等*/
*{margin:0; padding:0;}/*<!--用作内外边距清零,ps：具体作用还不是很了解-->*/
div{ /*<!--div-没有语义的快捷元素-->*/
margin: 50px auto;/*<!--居中效果，上下边距50，左右自动-->*/
width: 700px;/*<!--宽度为700个像素点-->*/
height: 200px;/*<!--高度为200个像素点-->*/
}
abbr{ /* <!--abbr用来定义缩写-->*/
text-decoration:none;/* <!--文字居中-->*/
color: #44B7C9;/*<!--设定颜色-->*/
}
p{
<!--line-height:70px; /*<!--每一行文字的上下间距为70个像素点-->*/
font-size:14px;--> /*<!--设置字体大小-->*/
}
img{
margin:30px 0;
}
h1{
font-family:幼圆; /*<!--设置字体系列-->*/
}
</style>
</head>
<body><!--网页主体内容-->
<div>
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1><!--h1多用于文章标题，分为h1~h6,字体由大到小-->
<p style="color:#ccc;line-height:70px;"><abbr title="高梦杨">高梦杨</abbr>. 2019-3-11 22:55</p>
<p style="text-align:center;background:#F2F2F2;line-height:70px;font-size:14px;"><b>摘要</b>： 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<img src="https://images.tmtpost.com/uploads/watermark/1400/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg?imageMogr2/strip/interlace/1/quality/85&ext=.jpeg
" width=700px alt="加载中"" ><!--用作导入图片，可以导入本地图片，或者网页超链接图片。alt=表示当图片加载失败后显示的内容
-->
<p><b style="font-size:20px">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p style="line-height: 30px;margin:20px 0;font-size:14px">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p style="line-height: 30px;margin:20px 0;font-size:14px">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<a href="https://www.baidu.com/" target="_blank"><b>详情更多内容请点击</b></a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：作为一个零基础的大龄青年，第一堂课的内容还是能接受的，虽然只是做了一个简单的静态页面，但颇有成就感的，给自己鼓个掌，继续加油！！(✪ω✪)
