7. pre 标签：预格式化文本
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。被pre标签包裹的文本会呈现为等宽字体。pre 标签的一个常见应用就是用来展示源代码。
pre标签放入以下内容：
<pre> <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> </body> </html> </pre> 复制代码
最终显示效果如下：
<html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> </body> </html> 复制代码
8. figure 标签：标记图片
<figure>标签可以用于标记图片，其可以包含一个
元素，用来描述图片：
<figure> <img src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="Swat Kats" style="width:500px"> <figcaption>风景图</figcaption> </figure> 复制代码
网络异常，图片无法展示
|
9. picture 标签：响应式图像
picture标签可以根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：
<picture> <source media="(min-width: 968px)" srcset="large_img.jpg"> <source media="(min-width: 360px)" srcset="small_img.jpg"> <img src="default_img.jpg" alt="avatar"> </picture> 复制代码
该标签一般用于响应式元素，可以让图片资源的调整更加灵活。如果浏览器不支持该属性也会显示<img> 元素的的图片。
10. oncontextmenu 属性：禁用右键
当我们给某个元素设置oncontextmenu属性时，就会禁用右键点击。如果给body元素设置这个属性，整个页面就会被禁用右键点击：
<p oncontextmenu="return false">Hello</p> <body oncontextmenu="return false">....</body> 复制代码
11. input标签：颜色选择器
input标签是支持很多类型的元素，我们可以使将input定义成一个颜色选择器：
<input type="color" id="color-picker" name="color-picker" value="#e66465"> 复制代码
可以通过value给颜色选择器设置初始值，也可以通过value属性获取颜色选择器的颜
色。
网络异常，图片无法展示
|
12. base 标签：在新标签页打开
我们可以将base元素的target属性设置为_black，这样当用户单击链接时，它始终会在新选项卡中打开。如果想避免用户无意中离开某个页面，这样做会很有用。
<head> <base target="_blank"> </head> <div> <a href="https://www.baidu.com/">百度一下</a> </div> 复制代码
13. placeholder 样式
可以使用placeholder属性设置占位符文本：
<input type="text" placeholder="你的名字" /> 复制代码
可以使用::placeholder CSS 选择器更改占位符文本的样式：
::placeholder { color: #210065; opacity: 0.7; font-size: 16px; }
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)