Blogger Information
Blog 9
fans 0
comment 5
visits 9547
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文本标签及文本控制。8.13作业
雷神的博客
Original
1151 people have browsed it

代码

实例

实例

<!DOCTYPE html>
<html>
<head>
    <title>文本控制</title>
	<meta charset="utf-8">
	
</head>
<body>
<h1>这是一个h1标签</h1>
<h2>这个是h2标签</h3>
<h3>这个是h3标签</h3>    
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<b>这是粗体标签</b>
<p>坚决打赢脱贫攻坚战,让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来,总书记的扶贫足迹遍布全国,对坚决打赢脱贫攻坚战作出重要战略部署。党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述,从说“不”的角度,深入体会总书记对脱贫攻坚工作的重要指示精神。
</p>
<br>
<br>
<br>
<strong>php中文网</strong>
<br>
<i>坚决打赢脱贫攻坚战</i>
<br>
<em>定义着重字</em>
<br>
<del>定义删除字标签</del>
<br>
<span>399元</span><del>499元</del>
<pre>预    格式化
文本</pre>
<!-- 块级元素包括 div  h1-h6  p  特点 独占一行 对宽高设置生效  --> 
<!-- 行内元素:可以共存于一行 对宽高设置不生效
行内块元素:结合了块级元素及行内元素的特点 -->
<img src="images/logo.png"style="width:500px;height:300px;"/><span>399元</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>
<head>
	<title>文本控制</title>
	<meta charset="utf-8">
	<style type="text/css">
	    span{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: 400px;height: 200px;}
			   b  {display: block;
			   	   width: 300px;
			   	   height: 40px;
			   	   background: pink;
			   	   overflow: hidden;/*溢出隐藏*/                                                                                                                                     
			   	   margin-bottom: 300px;
			   	   }
			   b:hover{overflow: visible;}/*                                  939*/
	</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: #39FF18">l</span><span style="color: #FFE80E">e</span>
<!-- 图文混排 -->
<br>
<p style="display: inline-block;width: 300px;height: 300px;">一个字,查!说不定又是一个大蛀虫。
这种事情我见过不少。有些承包商根本不管地下有没有泥沙,铺上水泥就完事。
就算出了事,也不是大事,而且一般都会怪老天爷。情我见过不少。有些承包商根本不管地下有没有泥沙,铺上水泥就完事。
就算出了事,也不是大事,而且一般都会怪老天爷这种事情我见过不少。有些承包商根本不管地下有没有泥沙,铺上水泥就完事。
就算出了事,也不是大事,而且一般都会怪老天爷。情我见过不少。有些承包商根本不管地下有没有泥沙,铺上水泥就完事。
就算出了事,也不是大事,而且一般都会怪老天爷</p>
<br>
<br>
<img src="images/logo.png">
<br>
<br>                                                                                                                                                                                                                                                                                                                                                                                                                                               
<img src="images/laogo.png">
<b>这种事情我见过不少。有些承包商根本不管地下有没有泥沙,铺上水泥就完事。
就算出了事,也不是大事,而且一般都会怪老天爷。情我见过不少。有些承包商根本不管地下有没有泥沙,铺上水泥就完事。
就算出了事,也不是大事,而且一般都会怪老天爷这种事情我见过不少。有些承包商根本不管地下有没有泥沙,铺上水泥就完事。
就算出了事,也不是大事,而且一般都会怪老天爷。情我见过不少。有些承包商根本不管地下有没有泥沙,铺上水泥就完事。
就算出了事,也不是大事,而且一般都会怪老天爷</b>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信图片_1.jpg微信图片_2.jpg微信图片_3.jpg微信图片_4.jpg


总结

块级元素独占一行

字体选择必须是本机电脑有的字体

图片路径一定要正确 不然会不显示

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post