<!DOCTYPE html> <html> <head> <title>文本控制</title> <meta 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>坚决打赢脱贫攻坚战,<br>让贫困人口和贫困地区同全国一道进入全面小康社会,XXXXXXXXXXXXXX啊啊啊啊啊啊啊亲爱阿大声道阿萨德阿萨德按时是大法官大概人挺好人反对法本次v差vvvbntyjryf阿萨德树大招风师范大学瓦尔德 </p> <br> <br> <strong>php中文网</strong><br> <i>坚决答应脱贫攻坚战</i><br> <em>定义着重字</em><br> <del>定义删除字标签</del><br> <br><br><br> <span>399元</span><del>499元</del> <pre>与格式 化文本</pre><!--块级元素独占一行,如果不设置宽度,默认是100%的值--> <!--块级元素:div h1~h6 p 独占一行,对宽高属性值生效,默认宽度是100% 行内元素:可以共存一行,对宽高的属性值不生效 行内快元素:结合了块级和行内的特点,例:img--> <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width:200px;height:65px"><span>123</span> <br> <!--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">
body{height: 2000px}
p{font-weight: bold;/*定义粗体*/
font-size: 35px;/*定义字体大小*/
font-family: 楷体;/*定义字体*/
}
h1{text-align: center;/*left*/
height: 80px;
background: #ccc;
line-height: 80px;/*定义行高*/
}
span{font-size: 100px;
font-weight:bold;
font-family: georgia;}
img.b{ width:300px;height:200px;}
b{ display: block;
width:300px;
height: 40px;
background: pink;
overflow: hidden;
}
b:hover{overflow: visible;}/*默认值,内容不会被修建,元素会被呈现在元素框之外*/
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<br><br>
<span style="color:#0388f1">G</span>
<span style="color:red">o</span>
<span style="color:yellow">o</span>
<span style="color:#0388f1">g</span>
<span style="color:#39ff1b">l</span>
<span style="color:yellow">e</span>
<br>
<!-- 图文混排 -->
<p style="display:inline-block;width:300px;height:400px;">“精选桐木关绝品金骏眉泡制，海拔1140米农家散养土鸡蛋，江湖上传说的牛栏坑肉桂，精选果碳。
</p>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="150" height="65">
<br>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="300" height="200">
<b>“精选桐木关绝品金骏眉泡制，海拔1140米农家散养土鸡蛋，江湖上传说的牛栏坑肉桂，精选果碳。</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例