demo2.html
实例
<!DOCTYPE html> <html> <head> <title>文本控制</title> <meta charset="utf-8"> </head> <body> <h1 style="background:#3ccc;">这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h5标签</h5> <h6>这是一个h6标签</h6> <b>这是一个粗体标签b</b> <p>60天可以学会PHP编程吗？看了PHP中文网的教学计划,你就不会再怀疑啦！紧凑的课程安排,新颖的教学模式,全程学习监督,确保你的每一点进步,都将获得惊喜的回报</p> <br> <br> <strong>strong标签</strong> <i>斜体标签?</i> <em>定义着重字</em> <del>定义删除字标签</del> <span>399元</span><del style="background:pink;">499</del> <pre style="background:#3ccc;">预格式化 文本</pre> <!-- 块级元素:div,h1-h6,p 独占一行,对宽高属性值设置生效. 行内元素:可以共存一行,对宽高属性值设置无效 --> <!-- 行内块元素:结合了块级以及行内元素的特点 --> <img style="width:100px;height:200px;" src="images/bd_logo1.png"> 行内块级元素互相转换 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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
demo3.html
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
span{font-weight: bold;/*定义粗体*/
font-size:3em;/*定义字体大小*/
font-family: 楷体;/*定义字体*/
}
h1{
text-align: center;/*定义对齐方式 */
height: 100px;
background: #ccc;
line-height: 100px;/*定义行高*/
}
span{
font-size: 40px;
font-weight: bold;
font-family: georgia;
}
img{
width: 300px;
height:400px;
}
b{
display: block;width: 300px;height: 40px;background: pink;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;
}
b:hover{overflow:visible;}/*默认值,内容不会被修剪,元素会被呈现在元素框.*/
</style>
</head>
<body>
<span>php中文网</span>
<h1>php中文网</h1>
<b>php中文网</b>
<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:#39FF1B">l</span>
<span style="color:#FFE80E">e</span>
<br>
<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:#39FF1B">l</span><span style="color:#FFE80E">e</span>
<br>
图文混排
<p style="width:300px;height:400px;display:inline-block;">图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排</p>
<img src="images/bd_logo1.png">
<br>
<img src="images/bd_logo1.png">
<b>图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排图文混排
</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码涉及知识点总结：
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
<b>这是一个粗体标签b</b>
行内块级元素互相转换
display:inline; 将块级元素转换为行内元素
display:inline-block; 将块级元素转换为行内块元素
display:block; 将行内元素转换为块级元素
<strong>strong标签</strong>
<i>斜体标签?</i>
<em>定义着重字</em>
<del>定义删除字标签</del>
<pre>预格式化文本</pre>
font-weight: bold;/*定义粗体*/
font-size:3em;/*定义字体大小*/
font-family: 楷体;/*定义字体*/
text-align: center;/*定义对齐方式 */
line-height: 100px;/*定义行高*/
overflow: hidden;/*溢出隐藏*/
b:hover{overflow:visible;/*默认值,内容不会被修剪,元素会被呈现在元素框.*/