实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
</head>
<style type="text/css">
p{/*设置p标签样式*/
font-weight: bold;/*设置粗体*/
font-size: 20px;/*设置字体大小*/
font-family: 微软雅黑;/*设置字体*/
}
h1,h2,h3,h4,h5{/*设置h1～h5标签样式*/
text-align: center;/*设置居中*/
}
h1{/*单独设置h1样式*/
height: 80px;/*设置元素高度*/
background-color: #bbb;/*设置元素背景颜色*/
line-height: 80px;/*通过定义行高与元素高度相同来达到垂直方向居中效果*/
}
span{/*设置span标签样式*/
font-size: 25px;
font-weight: bold;
font-family: 宋体;
}
.goog{
font-size: 50px;
font-weight: bold;
font-family: 黑体;
}
img{/*设置img标签样式*/
width: 150px;
height: 150px;
}
b#des{/*设置id号为des的b标签样式*/
display: block;
width: 150px;
height: 20px;
background-color: silver;
overflow: hidden;/*溢出内容设置隐藏*/
margin-bottom: 200px;/*设置下部外边距*/
}
#des:hover{/*设置id号为des的hover伪元素(即鼠标经过时)样式*/
overflow: visible;/*设置内容完整显示*/
}
</style>
<body>
<!-- 块级元素：(div,h1～h6,p)独占一行，设置的宽高属性有效 -->
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<!-- 除<pre>的标签内容中的少量空格可被显示，多余的空格及所有换行不显示 -->
<div>
<p>
PHP中文 网是一个免费的在线学习平台，提供大量免费、原创、高清的PHP视频
教程，在学习的时候可以直接在线修改代码示例，查看PHP执行效果是PHP中文网的一大特色，在源源不断推出教学视频的同时，php中文网也开发出了手机APP，ios和安卓都可以下载，有需要下载的小伙伴可以在豌豆荚应用市-场搜索PHP中文网下载安卓版本，ios的小伙伴就直接在APPstore里面搜索php中文网就可以下载安装了。
</p>
</div>
<br><!-- 换行标签 -->
<!-- 行内元素：(span,strong,em,b,del等) 相邻行内元素处于同一行，设置宽高属性无效 -->
<strong>着重强调标签</strong>
<em>强调标签</em>
<b>加粗体标签</b>
<del>删除字标签</del>
<i>斜体字标签</i>
<span>常用行内元素标签</span>
<!-- 行内块元素：(img) 同时具备块元素及行内元素的特征 -->
<img src="http://www.php.cn/upload/system/000/000/000/5a91131de1a30486.jpg" alt="smart"><span>KKNT</span>
<br>
<!-- 设置样式时，块元素及行内元素之间的转换：
display:inline;将块级元素转换为行内元素
display:block;将行内元素转换为块元素
display:inline-block;将块元素转换为行内块元素
-->
<div style="width: 100px;height: 100px;background-color: orange;display: inline;">001</div>
<div style="width: 100px;height: 100px;background-color: orange;display: inline-block;">002</div>
<span style="width: 100px;height: 100px;background-color: orange;display: block;">003</span>
<span style="width: 100px;height: 100px;background-color: orange;display: inline-block;">004</span>
<span style="width: 100px;height: 100px;background-color: orange;display: inline-block;">005</span>
<br>
<!-- Google的LOGO -->
<span class="goog" style="color: #408BFF">G</span>
<span class="goog" style="color: #F14433">o</span>
<span class="goog" style="color: rgb(255,188,8);">o</span>
<span class="goog" style="color: #408BFF">l</span>
<span class="goog" style="color: #31AC51">g</span>
<span class="goog" style="color: #F14433">e</span>
<br>
<!-- 图文混排 -->
<p style="display: inline-block;width: 150px;">
PHP中文网是一个免费的在线学习平台，提供大量免费、原创、高清的PHP视频教程，在学习的时候可以直接在线修改代码示例
</p>
<img src="http://www.php.cn/upload/system/000/000/000/5a91131de1a30486.jpg" alt="smart">
<br><br>
<img src="http://www.php.cn/upload/system/000/000/000/5a91131de1a30486.jpg" alt="smart">
<b id="des">
PHP中文网是一个免费的在线学习平台，提供大量免费、原创、高清的PHP视频教程，在学习的时候可以直接在线修改代码示例，查看PHP执行效果是PHP中文网的一大特色，在源源不断推出教学视频的同时，php中文网也开发出了手机APP，ios和安卓都可以下载，有需要下载的小伙伴可以在豌豆荚应用市*场搜索PHP中文网下载安卓版本，ios的小伙伴就直接在APPstore里面搜索php中文网就可以下载安装了。
</b>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例页面效果图及手抄部分:
