今天是开课的第一天，说实话对于我们这样的大龄且只有初中学历不懂英语的同学来说，真的是有点昏。基本分不清什么是元素，什么是标签。听老师说这些都不是问题。所以自己也要努力学习。记忆力不好也需要记住基本的单词应用。听课时暂时先听老师讲不能跟着敲。否则真的会听不到很多。需要消化嘛。
感谢群里小丑鱼同学提供的单词表，需要的同学可以抄写下来，每天抄个2遍基本就能记忆下来了https://wenku.baidu.com/view/255fdcde81c758f5f61f67ba.html?from=search&qq-pf-to=pcqq.group
“.”css中表示class选择器符号
“#”表示id选择器符号
实例一
<!DOCTYPE html>
<html>
<head>
<title>学习WEB第一节课</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<!-- viewport为窗口视区，手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。width为控制窗口viewport的大小，device-width为设备宽度缩放为100%，initial-scale为初始缩放比例,maximum-scale允许用户缩放到最大比例，minimum-scale允许用户缩放到最小比例 -->
<link rel="icon" type="imgaes-icon" href="favicon.ico"><!-- rel=icon告诉浏览器是icon的图标标签，type="imgaes-icon"可以不用写 -->
<style type="text/css">
*{
margin: 0;padding: 0;/*外边距和内边距*/
}
p{
width: 400px;/*p标签内容宽度*/
text-indent: 2em;/*p标签首行缩进2个em*/
}
div{
width: 300px;/*宽度*/
height: 20px;/*高度*/
background: #f2f2f2;/*背景色*/
white-space: nowrap;/*white-space: 处理元素中的空白，nowrap文本不允许换行*/
overflow: hidden;/*超出宽度的文字隐藏*/
text-overflow: ellipsis;/*text-overflow: 超出属性后要做的事。ellipsis以。。。来做超出属性做的事*/
}
</style>
</head>
<body>
<h1>第一个标题标签</h1>
<h2>第一个标题标签</h2>
<h3>第一个标题标签</h3>
<p>***在慰问电中表示，惊悉埃塞俄比亚航空公司一架客机失事，造成包括埃塞俄比亚、肯尼亚、中国公民在内的重大人员生命损失，我谨代表中国政府和中国人民，并以我个人的名义，向遇难者表示沉痛的哀悼，
向遇难者家属表示深切的慰问。相信埃塞俄比亚政府能够有效做好善后工作，中方将提供必要的支持和帮助。</p>
<b>加粗</b><br>
<small>小号字体</small><br>
<hr>
<del>599元</del><strong>300元</strong>
<p>
<abbr title="超文本语言">html</abbr>语言</p>
<a href="http://www.baidu.com" target="_blank">百度链接</a>
<div><a href="index2.html" target="_blank">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：meta charset="utf-8"这是告诉浏览器你使用的编码。如果不正确网页中的中文是会出现乱码的。
实例
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：viewport为窗口视区，手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。width为控制窗口viewport的大小，device-width为设备宽度缩放为100%，initial-scale为初始缩放比例,maximum-scale允许用户缩放到最大比例，minimum-scale允许用户缩放到最小比例。
实例
div{
width: 300px;/*宽度*/
height: 20px;/*高度*/
background: #f2f2f2;/*背景色*/
white-space: nowrap;/*white-space: 处理元素中的空白，nowrap文本不允许换行*/
overflow: hidden;/*超出宽度的文字隐藏*/
text-overflow: ellipsis;/*text-overflow: 超出属性后要做的事。ellipsis以。。。来做超出属性做的事*/
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：这CSS在很多布局中是很重要的。特别新闻类，字数超出设定的宽度后不允许换行，自动隐藏超出文字用...来代替。
总结：a链接是页面中非常常用的标签,知识点为在新窗口打开链接。target="_blank".
实例二，制作新闻页面
<!DOCTYPE html><!-- 声明告诉浏览器以下的文档是html文档 -->
<html>
<head>
<title>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</title><!-- 文档头部 -->
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico"><!-- rel是ico文件类型 -->
<style type="text/css">
*{margin: 0;padding: 0}/*margin外边距，padding内边距*/
div{margin: 100px auto;/*外边距值为100px,自动居中*/
width:700px;/*宽度*/
height: 200px;}/*高度*/
h1{
font-family: 宋体; /*改变字体*/
}
abbr{
text-decoration: none; /*text-decoration属性规定添加到文本的修饰none没有装饰*/
/*设置文本颜色*/
}
p{
font-size: 14px;/*字体大小*/
}
img{
margin: 40px 0; /*外面距为上下40*左右为0*/
}
.font{
font-size: 16px;
line-height: 30px;/*行高边距*/
margin-bottom: 20px;/*下外边距*/
}
a{
text-decoration: none;
color: #52F7F2
}
</style>
</head>
<body>
<div>
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<p style="color: #ccc; line-height: 70px"> <abbr title="高梦阳"><a href="http://www.tmtpost.com/user/2559671" target="_blank">高梦阳</a></abbr>• 2019-03-11 15:34</p><!-- color设置文本颜色 line-height设置百分比记的行高 abbr鼠标放上字体显示高梦阳 -->
<p style="text-align: center; line-height: 70px;background: #f2f2f2"><b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p><!-- text-align:center文本对齐中心，line-height设置百分比记的行高，background: #f2f2f2背景颜色 -->
<img src="https://images.tmtpost.com/uploads/watermark/1400/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg?imageMogr2/strip/interlace/1/quality/85&ext=.jpeg" width="700px" alt="这是一张图片">
<p class="font"><b style="font-size: 18px">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p class="font">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="font">据钛媒体了解，本轮战略投资方加拿大魁北克储蓄投资集团（CDPQ）是一家长期投资管理机构，负责管理加拿大魁北克省的公共养老基金以及保险计划的资产。截止2018年12月31日，CDPQ 管理的基金净资产已达3,095亿加元。</p>
<p class="font">据CDPQ亚太区私募股权投资总经理林明安向钛媒体透露，这是其在中国投资的第一个项目，而这笔融资将为魔方的未来项目拓展提供资金保障和战略支持。</p>
<p class="font">此前，魔方公寓已完成三轮股权融资，投资方包括中航信托、美国华平集团、德同资本等，在投资并购方面，魔方先后对窝趣等国内多个知名的公寓项目进行投资。</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="700px" alt="这是第二张图">
<p style="text-align: center;">魔方公寓历年融资情况 来源：天眼查</p><br>
<p style="width: 200px;margin:auto;text-align: center; "><hr style="width: 200px;margin: auto;"></p>
<br>
<p class="font">此次融资是2019年集中式公寓领域宣布的第一笔大额融资。而魔方生活服务集团CEO柳佳向钛媒体表示，魔方此次融资将主要用于进一步提升***影响力，深化运营管理，完善IT系统和会员体系，进行项目并购及轻资产拓展，打造高效、便捷、智慧的公寓管理协作平台，为行业赋能，成为中国长租公寓管理第一***。</p>
<p style="text-align: center;font-size: 18px"><b>更多精彩内容，关注钛媒体微信号（ID：taimeiti），或者下载钛媒体App</b></p>
<img src="https://images.tmtpost.com/uploads/images/2017/12/20171204114042938.jpg" width="700px" alt="这是最后一张图片">
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<p style="color: #ccc; line-height: 70px"> <abbr title="高梦阳"><a href="http://www.tmtpost.com/user/2559671" target="_blank">高梦阳</a></abbr>• 2019-03-11 15:34</p>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
abbr{
text-decoration: none; /*text-decoration属性规定添加到文本的修饰none没有装饰*/
/*设置文本颜色*/}
a{
text-decoration: none;
color: #52F7F2
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结，在abbr标签中加入a链接，css单独定义abbr属性的话是不会有任何颜色和去除下划线变化的。必须单独定义a链接的颜色和去装饰。
实例
<p style="text-align: center;">魔方公寓历年融资情况 来源：天眼查</p><br> <p style="width: 200px;margin:auto;text-align: center; "><hr style="width: 200px;margin: auto;"></p> <br>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结，分割线hr标签嵌套在了p标签里居中。
实例
<img src="https://images.tmtpost.com/uploads/images/2017/12/20171204114042938.jpg" width="700px" alt="这是最后一张图片">
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:img标签为图片链接标签。width为宽度，alt为在没有显示图片时显示的内容
