![[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
今天是第二天学习前端知识主要是html的文本标签和html文本控制。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本控制</title> </head> <body> <h1>这是一个h1标签</h1> <h2>这个是h2标签</h2> <h3>这是h3标签</h3> <h4>这是h4标签</h4> <h5>这是h5标签</h5> <h6>这是h6标签</h6> <b>这是粗体标签</b> <p>坚决打赢脱贫攻坚战， 让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，总书记的扶贫足迹遍布全国，对坚决打赢脱贫攻坚战作出重要战略部署。 党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。 </p> <br> <br> <br> <strong>php中文网</strong> <i>坚决打赢脱贫攻坚战</i> <em>定义着重字</em> <del>定义删除字标签</del> <span style="background:pink;width:300px;height:200px;">399元</span><del>499</del> <pre>预格 式 化文本</pre> <p style="background:#ccc;width:300px;height:200px;">123</p> <span>399元</span><del>499</del> <!-- 块级元素:div h1~h6 p 独占一行,对宽高属性值生效 行内:可以共存于一行对宽高属性值设置不生效 --> <!-- 行内块元素:结合了块级以及行内的特点 --> <img src="images/1.jpg" style="width:200px;height:300px;" /><span>123</span> 行内块级相互转换: display:inline 将块级元素转换为行内 display:inline-block 将块级元素转换为行内块元素 display:block 将行内元素转换为块级 <div style="width:100px;height:100px;background:pink;display:inline;">1</div> <div style="width:100px;height:100px;background:pink;display:inline-block">2</div> <span style="width:100px;height:100px;background:pink;display:block;">3</span> <span style="width:100px;height:100px;background:pink;display:inline-block;">4</span> <span style="width:100px;height:100px;background:pink;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; /*left; right*/
height: 100px;
background: #ccc;
line-height: 100px; /*定义行高*/
}
span{
font-size: 40px;font-weight: bold;
font-family: georgia;
}
img{width:300px; height: 400px;}
b{display: block;width: 300px;height: 40px;background: pink;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;}
b:hover{overflow: visible;}/*默认值,内容不会被修剪,元素会被呈现在元素框外面*/
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<br>
<!-- 谷歌logo -->
<span style="color:#0388F1;">G</span><span style="color:rgb(245,28,39);">o</span><span style="color:#FFE80E;">o</span><span style="color:#0388F1">g</span><span style="color:#39FF1B">l</span><span style="color:#FFE80E;">e</span>
<!-- 图文混排 -->
<br>
<p style="display:inline-block;width:300px;height:400px;">据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。</p>
<img src="images/1.jpg">
<br><br>
<img src="images/1.jpg">
<b>据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</b>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写代码：
