实例1
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例2
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业实现效果图
学习总结：
学习了解什么是行内素材，块级元素，行内块级元素，并对这些元素之间的转换。
学习对文本的控制：字体大小、加粗、斜体、字体控制。
