<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> <!--标签选择器--> p{ font-size: 12px; } /*类选择器*/ .price{ color: #ff6700; } .ori_price{ color: #888; /*设置删除线*/ text-decoration:line-through; } </style> </head> <body> <div> <!--空白折叠现象：换行和空格，浏览器会默认折叠成为一个空格--> <div>小马哥是个爱学习的人</div> <div> 小马哥是个爱学习的人 小马哥是个爱学习的人 小马哥是个爱学习的人 小马哥是个爱学习的人 小马哥是个爱学习的人 </div> </div> <!--P标签：只包含文本、表单元素--> <p> 小马哥           是个爱学习的人 小马哥是个爱学习的人 小马哥是个爱学习的人 小马哥是个爱学习的人 小马哥是个爱学习的人 </p> <div> <ul> <li> <p> <span class="price">99元</span> <span class="ori_price">208元</span> <!--del：文本带有删除线--> <del class="ori_price">208元</del> </p> </li> </ul> </div> </body> </html>