欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html文本标签及文本控制。8.13作业

程序员文章站 2022-03-06 12:44:20
...

代码

实例

实例

<!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></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></h1>
<p></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>

运行实例 »

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

html文本标签及文本控制。8.13作业html文本标签及文本控制。8.13作业html文本标签及文本控制。8.13作业html文本标签及文本控制。8.13作业


总结

块级元素独占一行

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

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

上一篇： Web Components系列（一） —— 概述

下一篇： HTTP 缓存

推荐阅读