收藏
批改状态：合格
老师批语：
前言：
2018年8月13号晚上在PHP中文网上了第三期的培训的第二节课，讲师：灭绝师太！！！
回忆：
昨晚主要讲解了一些HTML文本控制方面的标签，比如：h1~h6，p，strong，span，pre，img........通过这些标签结合CSS样式（主要是内联样式或内部样式）显示一些效果。
<!DOCTYPE html> <html> <head> <title>文本控制</title> </head> <body> <!-- 标题标签H1--H6 --> <h1>这是H1标签</h1> <h2>这是H2标签</h2> <h3>这是H3标签</h3> <h4>这是H4标签</h4> <h5>这是H5标签</h5> <h6>这是H6标签</h6> <b>这是一个粗体标签</b> <p>段落标签</p> <p >习近#平总书记在十九大报告中提出：就业是最大的民生。今年上半年，我国就业状况总体平稳、稳中有进，走势良好，城镇新增就业高位增长，无论是新增就业人数还是城镇调查失业率均超额完成预期目标。<br>习近#平总书记在十九大报告中提出：就业是最大的民生。今年上半年，我国就业状况总体平稳、稳中有进，走势良好，城镇新增就业高位增长，无论是新增就业人数还是城镇调查失业率均超额完成预期目标。</p> <p style="background: pink;">独占一行</p> <!-- 加重语气，字体粗体 --> <strong>Google</strong> <!-- 换行 --> <br> <!-- i，em标签都是斜体效果 --> <i>斜体字效果</i> <em>定义着重字</em> <del>定义删除字标签</del> <hr> <span>RMB：399元</span><del>原价：499</del> <!-- pre标签预格式化文本 不常用！！！--> <pre>愿得一心人，白头不相离。 出自两汉卓文君的《白头吟》 皑如山上雪，皎若云间月。 闻君有两意，故来相决绝。 今日斗酒会，明旦沟水头。 躞蹀御沟上，沟水东西流。 凄凄复凄凄，嫁娶不须啼。 愿得一心人，白头不相离。 竹竿何袅袅，鱼尾何簁簁！ 男儿重意气，何用钱刀为！ </pre> <!-- 块级元素：独占一行，对宽高属性设置生效，自带换行符。eg：div h1~h6 p ... 行内元素：可以共存一行，对宽高属性设置不生效。eg：span 行内块元素：结合了块级和行内特点，能对宽高属性设置生效，也能共存一行。eg：image --> <span style="background: pink;width: 300px;height: 500px">测试span标签对宽高属性设置不生效</span> <img src="https://pic.xiami.net//images/album/img60/1260/10290658881429065888.jpg" width="300px"> <hr> <!-- display:行内块级相互转换 --> <!-- display:inline;将块级元素转行为行内元素 --> <div style="width: 100px;height: 100px;background: pink;display:inline;">1111</div> <!-- display:inline-block;将块级元素转行为行内块元素 --> <div style="width: 100px;height: 100px;background: pink;display:inline-block;">2222</div> <!-- display:block;将行内元素转行为块级元素 --> <span style="width: 100px;height: 100px;background: pink;display: block;">3333</span> <!-- display:block;将行内元素转行为行内块级元素 --> <span style="width: 100px;height: 100px;background: pink;display:inline-block ;">4444</span> <span style="width: 100px;height: 100px;background: pink;display:inline-block ;">5555</span> </body> </html>
点击 "运行实例" 按钮查看在线实例
说明:
特别注意display这个标签，这个是昨晚听老师讲课最大的收获，该标签能实现行内块级相互转换。
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
<meta charset="utf-8">
<style type="text/css">
p{
/*定义粗体*/
font-weight: bold;
/*定义字体大小*/
font-size: 30px;
/*定义字体*/
font-family: 楷体;
/*text-align: 有三种:left,right,center;*/
text-align: center;
}
h1{
text-align: center;
height: 100px;
background: pink;
/*定义行高*/
line-height: 10px;
}
span{
font-weight: bold;
font-size: 50px;
}
img{
width: 200px;
height:200px;
}
b{
display: block;
width: 300px;
height: 40px;
/*溢出隐藏,默认值visible，内容不会被修剪，元素被呈现在元素框内*/
overflow: hidden;
background: pink;
}
/*伪类*/
b:hover{overflow: visible;}
</style>
</head>
<body>
<h1>周杰伦</h1>
<span style="display: block;">PHP中文网</span>
<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>
<!-- 图文混排 display: inline-block块转化为行块-->
<p style="display: inline-block;width: 400px;height: 400px;">习近#平总书记在十九大报告中提出：就业是最大的民生。今年上半年，我国就业状况总体平稳、稳中有进，走势良好，城镇新增就业高位增长，无论是新增就业人数还是城镇调查失业率均超额完成预期目标。</p>
<img src="https://pic.xiami.net//images/album/img60/1260/10290658881429065888.jpg" width="300px">
<br>
<img src="https://pic.xiami.net//images/album/img60/1260/10290658881429065888.jpg" width="300px">
<b>习近#平总书记在十九大报告中提出：就业是最大的民生。今年上半年，我国就业状况总体平稳、稳中有进，走势良好，城镇新增就业高位增长，无论是新增就业人数还是城镇调查失业率均超额完成预期目标。</b>
</body>
</html>点击 "运行实例" 按钮查看在线实例
说明：
第二段代码，特别注意overflow这个属性，溢出隐藏,默认值visible，内容不会被修剪，元素被呈现在元素框内。
手抄代码部分：
说明：
加强了对inline，block，hidden，visible这些属性值的记忆，在编辑器里有提示，手抄一遍记忆更深刻了。
总结：
1：
<!-- display:inline;将块级元素转行为行内元素 -->
<div style="width: 100px;height: 100px;background: pink;display:inline;">1111</div>
这样能将块级元素转化为行内元素
2：
<!-- display:inline-block;将块级元素转行为行内块元素 -->
<div style="width: 100px;height: 100px;background: pink;display:inline-block;">2222</div>
这样能将块级元素转化为行内块元素
3：
<!-- display:block;将行内元素转行为块级元素 -->
<span style="width: 100px;height: 100px;background: pink;display: block;">3333</span>
这样能将行内元素转为块级元素
4：
<!-- display:inline-block;将行内元素转行为行内块级元素 -->
<span style="width: 100px;height: 100px;background: pink;display:inline-block ;">4444</span>
这样能将行内元素转为行内块元素
5：
块级元素：独占一行，对宽高属性设置生效，自带换行符。eg：div h1~h6 p ...
行内元素：可以共存一行，对宽高属性设置不生效。eg：span
行内块元素：结合了块级和行内特点，能对宽高属性设置生效，也能共存一行。eg：image
6：overflow不设置默认值visible，内容不会被修剪，元素被呈现在元素框内，overflow: hidden溢出隐藏。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
