<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { font: 16px/28px 'Microsoft YaHei'; } h1 { /* 文字不加粗 */ font-weight: 400; /* 让h1里面的文字水平居中对齐 */ text-align: center; } a { text-decoration: none; } .gray { color: #888888; font-size: 12px; text-align: center; } .search { color: #666; /* #666666 #666 #ff00ff #f0f */ width: 170px; } .btn { font-weight: 700; } p { /* 首行缩进2个字的距离 */ text-indent: 2em; } .pic { /* 想要图片居中对齐,则是让它的父亲 p标签添加 水平居中的代码 */ text-align: center; } .footer { color: #888888; font-size: 12px; } </style> </head> <body> <h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1> <div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a> <input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button> </div> <hr> <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p> </body> </html>
运行结果
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)