实例
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
<meta charset="utf-8">
<style type="text/css">
p{font-weight: bold; /*定义粗体*/
font-size: 30px; /*定义字体大小*/
font-family: 楷体; /*定义字体*/
}
h1{
text-align: center;/* left左边 right右边*/
height: 100px; /*高度*/
background: pink;
line-height: 100px /*定义行高*/
}
samp{
font-size: 40px;
font-weight: bold;
font-family: 黑体;
}
b{display: block;
width: 300px;
height: 40px;
background: pink;
overflow: hidden; /*溢出隐藏*/
margin-bottom: 100px
}
b:hover{
overflow: visible; /*默认值，内容不会被修剪，元素会被呈现在元素狂以外*/
}
</style>
</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>换行啦~~~~~~</p>
<strong>加重语气标签 也是一个粗体</strong>
<i>斜体标签</i>
<em>定义着重字 也是斜体</em>
<del>删除字标签</del>
<span style="background: pink;">399</span><del>499</del>
<pre>预格式化文本 空 格 回
车</pre>
<!-- 块级元素：div h1~h6 p 独占一行 对宽高的属性值设置生效
行内元素：strong i em span del 共存于一行 对宽高属性值设置不生效
行块元素： -->
<img src="images/1.jpg" style="width: 200px;height: 300px;"><samp>123</samp>
行内元素块级元素相互转换：
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>
<h1>PHPz中文网</h1>
<p>php中文网</p>
<br>
<!-- 谷歌logo -->
<samp style="color: #0388F1">G</samp>
<samp style="color:rgb(245,28,29)">o</samp>
<samp style="color: #FFE80E">o</samp>
<samp style="color: #0388F1">g</samp>
<samp style="color: #39FF1B">l</samp>
<samp style="color: #FFE80E">e</samp>
<br>
<!-- 图文混排 -->
<p style="display:inline-block;width: 300px;height: 400px ">登录阿里邮箱或阿里免费企业邮箱,请填写企业邮箱的完整账号,或管理员账号,支持阿里邮箱app扫描安全登录。下载安装阿里邮箱APP,无需设置,随时随地,轻松畅游。</p>
<img src="images/1.jpg">
<br><br>
<img src="images/2.jpg">
<b>登录阿里邮箱或阿里免费企业邮箱,请填写企业邮箱的完整账号,或管理员账号,支持阿里邮箱app扫描安全登录。下载安装阿里邮箱APP,无需设置,随时随地,轻松畅游。</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例