收藏
批改状态：合格
老师批语：
例子代码如下：
1）常用标签：
<!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><!--粗体标签--> <p>我是段落标签</p><!--段落标签--> <br> <!--换行--> <i>我是斜体</i> <em>我是着重子！</em> <del>我身上有一横</del> <span style="background: blue">300元</span><del>999元</del> <pre>与格式化文本可以输出换行符， 等等 空格等等，字体也不一样</pre> <img src="/Users/drk/Desktop/test.jpeg " style="width: 100px;height: 100px"><span>qeqeqeqeqe</span> <div style="width: 100px;height: 100px;background: blue; display: inline-block;">1</div> <div style="width: 100px;height: 100px;background: blue; display: inline-block;">2</div> <span style="width: 100px;height: 100px;background: blue; display: block;">3</span> <dspan style="width: 100px;height: 100px;background: blue; display: inline-block;">4</span> </body> </html>
点击 "运行实例" 按钮查看在线实例
2）图文混排以及简单的动画
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
span{
font-weight: bold;
font-size: 20px;
font-family: 楷体;
text-align: center;
}
h1{
text-align: center;
height: 100px;
background: #ccc;
line-height: 100px;
}
p{
font-size: 30px;
font-family: 楷体;
font-weight: bold;
}
#a{
color: #0388F1;
}
#b1{
color: rgb(245,28,39);
}
#c{
color: #FFE80E;
}
.e{
color: #39FF1B;
}
img{
width: 300px;
height: 400px;
}
b{
display: block;
width: 300px;
height: 40px;
overflow: hidden;/*修剪过长的文字*/
background: blue;
}
b:hover{
overflow: visible;/*默认值*/
height: 400px;
}
</style>
</head>
<body>
<h1>php中文网</h1>
<span>php中文网</span>
<br>
<!-- 谷歌logo -->
<span id="a">G</span>
<span id="b1">o</span>
<span id="c">o</span>
<span id="a">g<span>
<span class="e">l</span>
<span id = "c">e</span>
<br>
<!-- 图文混排 -->
<p style="display: inline-block; width: 300px; height: 400px">百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。</p>
<img src="/Users/drk/Desktop/apple.jpeg">
<br>
<img src="/Users/drk/Desktop/apple.jpeg">
<b>百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。</b>
</body>
</html>点击 "运行实例" 按钮查看在线实例
内容解释
块级元素：独占一行 ，设置各种属性都生效
行内元素：可共存于一行宽高属性不生效
行内块元素：合了快捷以及行内的特
dispaly:inline 将块元素转换为行内
display;inline-block 转为行内块元素
dispay:block 将行内转为块级元素
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
