![[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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本控制</title> </head> <body> <!-- 标题标签 :h1 h2 h3 h4 h5 h6 <b></b>--> <h1>这是h1标签</h1> <h2>这是h2标签</h2> <h3>这是h3标签</h3> <h4>这是h4标签</h4> <h5>这是h5标签</h5> <h6>这是h6标签</h6> <b>这是加粗标签</b> <!-- 段落标签： <p></p>（是块级元素，独占一行） --> <!-- <br>换行 --> <p>哈哈哈哈啊哈哈哈哈哈哈哈，呵呵呵呵呵呵额呵呵呵呵呵呵额呵呵呵呵呵</p> <strong>PHP中文网</strong> <!-- 粗体（加重语气标签） --> <!-- <i></i> 和<em></em> 定义斜体 --> <i>斜体</i> <em>定义着重字</em> <del>定义删除字标签</del> <span>399元</span><del>499元</del> <pre>预格式化文本</pre> <!-- 可以输出空格，换行等格式文本 (不常用)--> <pre>预 格式化 文本</pre> <p style="background: #ccc">123</p> <!-- 块级元素：div 、h1-h6、p标签、tab、list等 独占一行，对宽高属性设置生效，自带换行符 行内：可以共存于一行，对宽高属性设置不生效 行内块元素： 结合了块级和行内的特点 如：img标签 --> <img src="image/2.jpg" style="width: 200px;height: 200px"><span>123</span> <!-- 行内块级相互转换： display: inline 将块级元素转换为行内 display: inline-block 将块级元素转换为行内块元素 display: block; 将行内元素转换为块级 --> <div style="width: 100px;height: 100px;background: yellow;display: inline;">1</div> <div style="width: 100px;height: 100px;background: yellow;display: inline-block;">2</div> <span style="width: 100px;height: 100px;background: yellow; display: block;">3</span> <span style="width: 100px;height: 100px;background: yellow; display: inline-block;">4</span> <span style="width: 100px;height: 100px;background: yellow; display: inline-block;">5</span> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight: bold; /*定义粗体*/
font-size: 30px ;/*定义字体大小*/
font-family: 楷体; /*定义字体（需要用户本机有该字体）*/
}
h1{text-align: center; /*定义居中(默认居左)*/
height: 100px;
background: #ccc;
line-height: 100px;/*定义行高 （上下居中）*/
}
span{font-size: 40px;font-weight: bold;font-family: georgia}
b{display: block;width: 300px;height: 100px;
margin-bottom: 100px;
overflow: hidden; /*溢出隐藏（超出设置不显示）*/
}
/*伪选择器-伪类（事件）*/
b:hover{overflow: visible;} /*默认值，内容不会被修剪，元素会被呈现在元素框之外显示 ，鼠标移上显示*/
</style>
</head>
<body>
<p>php中文网</p>
<h1>PHP中文网</h1>
<span style="color: #4285F4">G</span>
<span style="color: rgb(234,67,53);">o</span>
<span style="color: #FBBC05">o</span>
<span style="color: #4285F4">g</span>
<span style="color: #34A853">l</span>
<span style="color: #EA4335">e</span>
<br>
<!-- 图文混排 -->
<p style="display: inline-block;width: 300px;height: 400px">化工污染整治和水环境治理、固体废物治理是有关联性的，抓的过程中有没有协同推进？抓湿地等重大生态修复工程时有没有先从生态系统整体性特别是从江湖关系的角度出发，从源头上查找原因，系统设计方案后再实施治理措施？”主席连续提出的问题切中要害</p>
<img src="image/2.jpg" style="width: 300px;height: 400px">
<br><br>
<img src="image/2.jpg">
<b>化工污染整治和水环境治理、固体废物治理是有关联性的，抓的过程中有没有协同推进？抓湿地等重大生态修复工程时有没有先从生态系统整体性特别是从江湖关系的角度出发，从源头上查找原因，系统设计方案后再实施治理措施？”主席连续提出的问题切中要害</b>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制作业</title>
<style type="text/css">
.tt {
margin: 0 auto;
font-weight: bold;
font-size: 38px;
text-align: center;
line-height: 80px;
}
.content {
width: 960px;
margin: 20px auto
}
b {
font-size: 16px;
line-height: 20px;
}
p {
width: 600px;
font-size: 16px;
text-indent: 2em;
margin-left: 60px
}
</style>
</head>
<body>
<div class="tt">主席心系防汛抢险救灾</div>
<div class="content">
<span style="margin-left: 80px;font-weight:bold;color:#888">2018年08月14日 12:34 </span><a href="" style="text-decoration:none; display: inline-block; color: #141b23;">央视新闻</a>
<br>
<img style="margin:20px 0 20px 100px;" src="image/a.jpg">
<div>
<p style="color: #4d4f53"><b>2018年4月25日，主席考察被誉为洞庭湖及长江流域水情“晴雨表”的城陵矶水文站。图片来源：新华社</b></p>
<p>汛情第一时间引起总书记高度重视。灾难面前，“全力保障人民群众生命财产安全和社会稳定”是主席心中的头等大事。</p>
<p>7月中旬，主席对防汛抢险救灾工作作出重要指示：“相关地区党委和政府要牢固树立以人民为中心的思想，全力组织开展抢险救灾工作，最大限度减少人员伤亡，妥善安排好受灾群众生活，最大程度降低灾害损失。”</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写笔记：
总结：这节课灭绝老师主要讲了文本控制，标题标签的使用，h1-h6 b标签 ，粗体标签，斜体 i em标签，块级元素：独占一行，对宽高属性有效，行内元素：可共存一行，对设置宽高属性无效。行内块元素：结合了块和行内特点，如img标签。行内和块级之间的转换：dispaly:inline 将块级转换成行内 dispaly:inline-block ：将行内转换成行内块级元素 dispaly:block:将行内元素转换成块级元素。 以及字体设置：粗体：font-weight:blod 大小:font-size 字体样式：font-family 定义居中：text-align:center 首行缩进2字节：text-indent:2em 行高：line-height 溢出隐藏：overflow:hidden 伪选择器： b:hover{overflow:visible} 鼠标移上显示
设置字体颜色 ，以及最后实现图文混排。
