![[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
本次作业包括了两个案例。
1.案例一表述了html文档的基本结构，部分基本标签及样式的设置。
2.案例二是使用基本标签及属性完成对新闻页的布局，学以致用，加强了对标签使用的理解。
<!DOCTYPE html>
<html>
<head>
<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="stylesheet" type="text/css" href="">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
p{
width: 400px;
text-indent: 2em;
}
div{
width: 300px;
height: 20px;
background: #f2f2f2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>第一个标题标签</h1>
<h2>第二个标题标签</h2>
<h3>第三个标题标签</h3>
<p>不能因为经济发展遇到一点困难，就开始动铺摊子上项目、以牺牲环境换取经济增长的念头，甚至想方设法突破生态保护红线。<b>要保持加强生态环境保护建设<br>的定力，不动摇、不松劲、不开口子。</b>
</p>
<b>加粗文本</b>
<br>
<small>小号字体</small>
<br>
<hr>
<strong>定义加重语气</strong>
<del>定义删除字</del>
<br>
<del>599</del><b>399</b>
<p><abbr title="HyperText Markup Language" > html</abbr>（超文本标记语言）</p>
<a href="http://www.php.cn" target="_blank">php中文网</a><!-- 另起新页面打开 -->
<div><a href="demo2.html" target="_blank">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房</a></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
html基本文档结构包括以下部分：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
其中<!DOCTYPE html>是声明，告诉浏览器以下的文档是html文件。
html标签是文档的开始，文档包括两大部分，一部分是head，一部分是body。
1.文档头部head，内部的元素可以引用脚本、样式表、为网页提供元信息。其内部常用标签如下：
<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></title>，用于设置页面头部标题。
<link rel="stylesheet" type="text/css" href="">，用于引入外部文件，rel规定当前文档与被链接文档之间的关系，type定义被链接文档的类型，href用于指定外部文件的位置。该行代码表示引入外部CSS文件。
<link rel="icon" type="image/x-icon" href="images/favicon.ico">，该行代码引入页面头部logo图像文件。
<style type="text/css"></style>，编写内部样式。
2.文档内容放置在body中，学习到的标签如下：
标题是通过<h1>~<h6>标签进行定义的，一般来说一个文档只使用一个<h1></h1>标签，常用的是<h1></h1>~<h3></h3>.
段落是通过<p>标签定义的，可以在段落中插入<br>标签进行换行，也可以使用<b></b>标签加粗段落内的某些文字。
文本格式化包括<b></b>加粗，<br>换行，<hr>定义一条水平线，<strong></strong>定义加重语气，<del></del>定义删除字，<abbr></abbr>标签通过title属性给出缩写的完整名称，<a href=""></a>标签定义链接，其中target="_blank"的值为在新页面打开链接。
3.样式：
*{margin: 0;padding: 0;}为浏览器清楚边距。
p{
text-indent: 2em;/*首行缩进2个字符，常用的段落格式*/
}
div{
white-space: nowrap;/*white-space：规定如何处理元素内的空白，noswrap：文本不允许换行*/
overflow: hidden;/*overflow:属性规定当内容溢出元素框时发生的事情，hidden:超出部分隐藏*/
text-overflow: ellipsis;/*用省略号来代表被修剪的文本*/
}
<!DOCTYPE html>
<html>
<head>
<title>魔方公寓获得1.5亿美元D轮融资</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<style type="text/css">
*{margin: 0px;padding: 0px;}
div{
margin: 100px auto; /*上下边距为0，左右自动，实现居中效果*/
width: 700px;
height: 200px;
}
abbr{
text-decoration: none;/*去掉下划线*/
color: #52f7f2;
}
p{
/*line-height: 70px; 定义行高*/
font-size: 14px;
}
img{
margin: 30px 0;
}
h1{
font-family: 宋体;/*改变字体，不建议使用*/
}
.box{
line-height: 30px;
margin-bottom: 20px;
}
</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>
<img src="images/1.jpeg" width="700px" alt="这是一张图片"><!-- 重要图片才建议使用alt,小图片不建议使用 -->
<p class="box"><b style="font-size: 18px;">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
实例二巩固了对标签的认识，一些常用CSS设置如下：
margin: 0px auto; /*上下边距为0，左右自动，实现居中效果*/
text-decoration: none;/*去掉下划线*/
line-height: 70px; /*定义行高，其值与height相同时实现垂直方向居中*/
font-family: 宋体;/*改变字体，不建议使用，不知道浏览者是否包含设置的字体*/
标签<img src="">:
<img src="images/1.jpeg" width="700px" alt="这是一张图片"><!-- 重要图片才建议使用alt,小图片不建议使用 -->
总结：
对于标签的使用及属性的设置，应结合案例进行练习，多观察浏览效果。