<!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>
点击 "运行实例" 按钮查看在线实例