<!DOCTYPE html> <html> <head> <title>文本控制</title> <mate charset="utf-8"> </head> <body> <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h5标签</h5> <h6>这是一个h6标签</h6> <b>这是粗体标签b</b> <p>php中文网,好好学习天天向上。<br>php中文网,好好学习天天向上。php中文网,好好学习天天向上。php中文网,好好学习天天向上。php中文网,好好学习天天向上。<br>php中文网,好好学习天天向上。php中文网,好好学习天天向上。php中文网,好好学习天天向上。<br>php中文网,好好学习天天向上。php中文网,好好学习天天向上。php中文网,好好学习天天向上。</p> <strong>php中文网,定义着重字</strong> <i>这是一个斜体i</i> <em>定义着重字</em> <del>定义删除标签</del> <del>388</del><span>288元</span> <pre>预 格式化 文本</pre> <p></p> <span>688</span> 块级元素:div h1~h6 p 特点:独占一行 对宽高属性值生效 行内元素:i b strong... 特点:可共存于一行对宽高属性值不生效 行内块元素:结合了块级以及行内的特点 <img src="http://www.php.cn/static/images/logo.png" style="whidth:100px;height:200px;" /> 行内块级相互转换: display:inline 将块级元素转换为行内 display:inline-block;将块级元素转换为行内块元素 display:block;将行内元素转换为块级元素 <div style="width:100px;height:100px;background:green;display:inline;">123</div> <div style="width:100px;height:100px;background:red;display:inline-block">123</div> <div style="width:100px;height:100px;background:#055;display:block">123</div> <div style="width:100px;height:100px;background:#ccc;display:inline-block;">123</div> <div style="width:100px;height:100px;background:pink;display:inline-block;">123</div> </body> </head> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本控制2</title> <style type="text/css"> p{font-weight:bold;/*字体加粗*/ font-size:14px;/*字体大小*/ font-family:微软雅黑;/*字义字体*/ text-indent:2em;/*文本缩进*/ } h1{text-align:center;/*文本对齐; left right*/ height:100px; line-height:100px; background:#ccc; } span{font-size:80px;font-weight:bold;font-family:georgia; } img{width:200px;height:200px;} i{display:block;widht:250px;height:40px;font-size:14px;background:pink;overflow:hidden; margin-bottom:20px;}/*溢出隐藏*/ i:hover{overflow:visible;height:auto;}/*在英文状态下编写代码;默认值,内容不会被隐藏,元素会被呈现在元素框外;*/ </style> </head> <body> <h1>php</h1> <p>php中文网</p> <br> <!-- GOOGLE_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> <!-- 图文混排 --> <hr> <p style="display:inline-block;width:200px;height:200px;">市面上常见的提升人际关系与执行力的畅销书,比如卡耐基《人性的弱点》,比如柯维《高效能人士的七个习惯》,有人说前者是“提升人际关系的圣经”,也有人说它“讲的是谁都懂的道理,但是犯错的人根本意识不到,所以根本没用”;有人说后者“改变了自己的人生轨迹”,也有人说它“老生常谈,名不副实”。</p> <img src="images/22.jpg"> <br><br> <img class="m1" src="images/22.jpg"> <i style="display:block;width:200px;height:34px;">市面上常见的提升人际关系与执行力的畅销书,比如卡耐基《人性的弱点》,比如柯维《高效能人士的七个习惯》,有人说前者是“提升人际关系的圣经”,也有人说它“讲的是谁都懂的道理,但是犯错的人根本意识不到,所以根本没用”;有人说后者“改变了自己的人生轨迹”,也有人说它“老生常谈,名不副实”。</i> </body> </html>
点击 "运行实例" 按钮查看在线实例
以上是demo和demo2的课堂手打文档
<!DOCTYPE html> <html> <head> <title>2018.08.13作业</title> <meta charset="utf-8"> <style type="text/css"> body{background:#ccc;padding:0px;margin:0px;font-family:Microsoft YaHei,宋体;} h1{text-align:center;padding:10px;margin:0px;} div{background:#fff;} span{padding-left:30px;background:#EDEDED;display:block;font-size:13px;height:25px;line-height:25px;} small{margin:0px 20px;} a{color:#539ff3;} a:link{text-decoration:none;} strong{text-align:right;display:block;font-size:13px;} </style> </head> <body> <div style="margin:0px auto;width:600px;height:800px;"> <h1>微笑的人生最美</h1> <span> <small>2018-08-13</small> <small>来源:PHP中文网</small> <span style="background:url(images/1.png) no-repeat center left;display:inline-block;float:right; margin-right:20px;"><a href="http://www.php.cn">PHP中文网</a></span> </span> <div style="padding:8px;"> <div style="text-align:center; display:block; overflow:hidden;width:400px;height:200px;margin:5px auto;"> <img src="https://img.jj59.com/c/5b297afc3765.jpg"></div> <p>喜欢这样一种生活,一人,一心窗,一份淡雅的情怀,一个只属于自己的世界。以清水涤心,用文字取暖,简单着,明媚着,便快乐着。</p> <p>欣然于这样一种日子,独坐于岁月一隅,指尖流淌着阳光的美好,捧着一缕岁月的暖香,夕阳下,轻拥落日余晖的绚丽,窗外是红尘喧嚣,心中却是风轻云淡。</p> <p>清简如水日子,婉约了似水流年的情怀。</p> <p>独处的时光,可以思考;可以遗忘,可以清扫心灵的尘垢,是灵魂修复的过程,生命的感悟就在这份静好中得到领悟,灵魂就在这份静谧中得以升华。</p> <p>岁月如一条河,纵使是风平浪静的湖面,不关悲喜,只在浅释岁月静美,一个人的世界亦能婉转成歌。</p></p></p><strong>责任编辑:风花雪月</strong> <span style="background:#fff;color:#999;">声明:该文观点仅代表作者本人</span> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
作业实现效果图
学习总结:
学习了解什么是行内素材,块级元素,行内块级元素,并对这些元素之间的转换。
学习对文本的控制:字体大小、加粗、斜体、字体控制。