实例
<!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>大多数网站都充满了图像和脚本，这可能是性能的巨大瓶颈。<br>谷歌意识到性能问题，该公司正在开发一项名为图像延迟加载的新功能，以加快网页页面加载速度。<br>最新的Canary版Google Chrome浏览器将增加延迟加载功能。 </p> <br> <br> <strong>php中文网</strong> <i>大多数网站都充满了图像和脚本</i> <em>定义着重字</em> <del>定义删除字标签</del> <span style="background: pink;width:300px;height: 300px">399元</span><!-- 行内：可以共存于一行 对宽高属性设置不生效 --> <del>499元</del> <pre>预 格式化 文本 </pre> <p style="background: #ccc;width:300px;height: 300px">123</p><!-- 块级元素：div h1~h6 p from table ul列表 独占一行 对宽高属性设置生效 --> <span>399元</span> <!-- 块级元素：div h1~h6 p from table ul列表 独占一行 对宽高属性设置生效 行内：可以共存于一行 对宽高属性设置不生效 --> <!-- 行内块元素：结合了块级以及行内的特点 --> <img src="images/1.jpg" style="width:100px;height: 300px"><span>123</span><!-- 行内块元素：结合了块级以及行内的特点 --> 行内块级相互转换： display：inline 块级元素转换为行内 display:inline-block;块级元素转换为行内块元素 display:block;行内元素转换为块级 <div style="background: pink;display:inline;width:300px;height: 300px">1</div> <div style="background: pink;display:inline-block;width:300px;height: 300px">2</div> <span style="background: pink;display:block;width:300px;height: 300px">3</span> <span style="background: pink;display:inline-block;width:300px;height: 300px">4</span><!-- 独占一行 因为上一行SPAN块级（block）属性继承 --> <span style="background: pink;display:inline-block;width:300px;height: 300px">5</span><!-- 注意不独占一行 因为上一行（inline-block） --> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight:bold;/*定义粗体*/
font-size:30px;/*字体大小*/
font-family: 楷体;/*定义字体*/
}/*文本标题的效果*/
h1{text-align:center;/*left*/
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>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
<br>
<span style="color:#0081FF">G</span>
<span style="color:rgb(255,39,32)">o</span>
<span style="color:#FFDD07">o</span>
<span style="color:#0081FF">g</span>
<span style="color:#44CF36">l</span>
<span style="color:#FFDD07">e</span>
<!-- 图文混排 -->
<br>
<p style="display:inline-block;width:300px;height:400px;">
文章称，洛佩斯在他位于圣保罗州、面积1600公顷的农场种植大豆——这场赌注在本月早些时候得到了回报，在北京对美国大豆征收关税后，中国买家开始大量南美大豆。这位农夫的大豆也卖出了迄今最高的价钱。
</p>
<img src="images/1.jpg">
<br>
<br>
<img src="images/1.jpg">
<b>文章称，洛佩斯在他位于圣保罗州、面积1600公顷的农场种植大豆——这场赌注在本月早些时候得到了回报，在北京对美国大豆征收关税后，中国买家开始大量南美大豆。这位农夫的大豆也卖出了迄今最高的价钱。</b>
<br>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业0813</title>
<style type="text/css">
h1 {text-align:center;}
p {text-align:right;}
h6 {text-align:center;}
</style>
</head>
<body>
<h1>黄晓明出借账户涉股票操纵案，账户未冻结</h1>
<span>2018-8 来源</span>
<p style="color:blue;display:inline-block;">黄晓明</p><!-- 靠右未显示 -->
<h3>原标题:黄晓明出借账户涉股票操纵案，账户未冻结</h3>
<img src="images/HXM.jpg"><!-- 图片如何居中？ -->
<h6>黄晓明（资料图）</h6>
<span>(来源)</span>
<br><!-- 如何空行显示如图片？ -->
<br>
<span>证监会一纸罚单同时引爆了资本圈和娱乐圈！8月10日证监会新闻发布会公布了一起高达18亿的天价罚单，被罚人叫高勇，号称“民间炒股大赛冠军”。这本来是股市的一则新闻，但却于当天引爆了娱乐圈。原因是一篇自媒体报道称该案涉及到影视明星黄晓明。
<br>
娱乐圈跟A股都在疯传“黄晓明卷入18亿股票操纵大案”的自媒体报道文章，昨天黄晓明工作室微博随即发出声明称“纯属造谣”。表示黄晓明并不认识高勇，也未参与过任何操纵股票行为和介入过任何相关调查，并表示上述提到的媒体报道为杜撰而来，将追究法律责任。
<br>
8月13日，有消息证实， 18亿股票操纵案公示文件中的黄某人账户，确为黄晓明本人账户，但是目前账户并没有被冻结，根据相关专业人士的说法，如果确实账户所有者本人在不知情的情况下账户被利用作案，则账户不会被冻结。从目前公开的这些信息看，黄教主应该是被身边某个非常信任的朋友给坑了，这个可能性比较高。
<br>
</span>
<br>
<p>责任编辑</p>
<h5>本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。
</h5><!-- 怎样制作和图片一样的效果？ -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
