1.第一节课介绍了常用的一些标签,各作用,与css的一些知识,<a>标签的跳转至另一页面.
实例
<!-- 1:前端知识介绍 -->
<!-- html超文本标记语言 -->
<!-- 文档结构:html\head\body\title\meta -->
<!-- 声明 告诉浏览器以下的文档是html文档 -->
<!DOCTYPE html>
<!-- 文档头部 head head内部的元素可以引用脚本、样式表、为网页提供元信息 -->
<head>
<!-- meta标签设置编码格式，防止中文乱码 -->
<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">
<!-- 文档头部标题 -->
<title>学习WEB第一节课</title>
<!-- 引入外部文件（link） --> <!-- rel：规定当前文档与被链接文档之间的关系 --> <!-- type:定义被连接文档的类型 -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- 引入头部logo -->
<link rel="icon" type="image/x-icon" href="images/favicon (1).ico">
<!-- 内部样式 -->
<style type="text/css">
/*清除默认边距*/
*{margin: 0;padding: 0;}
p{
/*设置宽度*/
width:400px;
/*首行缩进*/
/*em:像素px是相对于显示器屏幕分辨率而言的。而em是相对于当前字体的大小的。
所以如果字体为14像素，要用px首行缩进2个字的话（text-indent: 28px），字体为16像素，要用px首行缩进2个字的话（text-indent: 32px）
无论字体为多大，要用em首行缩进2个字的话都是（text-indent: 2em）。
所以，用em最大的特点：
1.方便，不用一个一个的去设置，而从减少工作量减少失误。
2.用IE可以设置字体大小（在IE上方点击 查看 > 文字大小）。*/
text-indent: 2em;
}
div{
width: 300px;
/*设置高度*/
height: 20px;
/*背景色*/
background: #f2f2f2;
/*white-space 规定如何处理元素内的空白*/
white-space: nowrap; /*文本不会换行*/
/*overflow 属性规定当前内容溢出元素框时发生的事情*/
overflow: hidden; /*超出部分隐藏*/
/*text-overflow (css3)属性规定当前文本溢出包含元素时发生的事情*/
text-overflow: ellipsis; /*用省略号来代替被修剪的文本*/
}
</style>
</head>
<body>
<!-- 页面中常用的文本元素 -->
<!-- 标题是通过<h1>~<h6> 标签进行定义的 -->
<!-- 一个页面最好只有一个h1 -->
<h1>第一个标题标签</h1>
<h2>第一个标题标签</h2>
<h3>第一个标题标签</h3>
<!-- 段落是通过 <p> 标签定义的-->
<p>***在慰问电中表示，惊悉埃塞俄比亚航空公司一架客机失事，造成包括埃塞俄比亚、肯尼亚、中国公民在内的重大人员生命损失，我谨代表中国政府和中国人民，并以我个人的名义，向遇难者表示沉痛的哀悼，<br>向遇难者家属表示深切的慰问。相信埃塞俄比亚政府能够有效做好善后工作，中方将提供必要的支持和帮助。
</p>
<b>加粗文本</b>
<br>
<small>小号字体</small>
<br><!-- 定义换行 -->
<hr> <!-- 定义水平线 -->
<strong>定义加重语气</strong>
<del>定义删除字</del>
<br>
<!-- 文本格式化(b\del\) -->
<del>599元</del><b>399元</b>
<!-- <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。 -->
<p> <abbr title="HyperText Markup Language"> html</abbr>(超文本标记语言)</p>
<!-- 页面中常用文本属性: -->
<!-- 首行缩进(text-indent) -->
<!--网页中的链接:a-->
<!-- <a href="地址"></a> -->
<!--
target:
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
-->
<a href="http://www.php.cn/" target="_blank"> php中文网</a>
<div><a href="demo2.html" target="_blank">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图:
2.是实现新闻的排版,使用了html+css知识
实例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>魔方公寓获得1.5亿美元D轮融资</title>
<link rel="icon" href="image/x-icon" href="images/favicon (1).ico">
<style type="text/css">
*{margin:0;padding: 0;}
div{
margin:100px auto; /*margin: 上下 左右* 居中*/
width:700px; /*定义宽度*/
height: 200px; /*定义高度*/
}
abbr{
text-decoration: none; /*去掉下划线*/
color: #52F7F2;
}
p{
font-size: 14px;
}
img{
margin:40px 0;
}
h1{
font-family: 宋体; /*改变字体*/
}
/*类选择器*/
.box{
line-height: 30px; /*定义行高*/
margin-bottom: 20px;
font-size: 16px; /*定义字体大小*/
}
</style>
</head>
<body>
<div>
<h1 >魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<!-- 内联样式写法 -->
<p style="color: #ccc; line-height: 70px;"><abbr title="高梦杨">高梦杨</abbr> . 2019-3-11 13:55</p>
<!-- 文字居中 背景色 定义行高-->
<p style="text-align: center; background:#f2f2f2; line-height: 70px;"> <b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<!-- alt:图片加载不出,文字说明 -->
<img src="images/1.jpeg" width="700" alt="这是一张图片">
<p class="box"> <b>钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图:
3.总结:
①学习了html的文档结构:html\head\body\title\meta与一些常用标签
②学习了css的margin,padding,与实现新闻省略号的样式
③老师讲课很棒,虽然是有基础的,但是认真听还是能学到不少小知识点