如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
vscode 如何预览html文件
来源：互联网
2023-03-16 19:16:31 版权归原作者所有，如有侵权，请联系我们
本经验介绍在使用 vscode 编写html文件时，如何打开动态更新的html预览，以及预览的一些注意事项。
工具/原料
- Visual Studio Code
方法/步骤
如图是普通的使用浏览器打开文件预览的方式。这种方式的好处是，浏览器的开发者工具非常好用。
但是如果我们也希望在html中边修改边看预览，则需要安装插件。在插件搜索HTML Preview，找到George Oliveira 的插件，这个相对好用。
安装好之后，fn f1打开菜单，输入html: ，即可看到所有可用命令。也可以直接在html文件上右键，也会有open preview和show in browser命令。
选择open locked preview to the side, 可以看到如图效果。在编辑器中修改html，无需保存，右边就会自动更新。
当然，也可能我们会看到js被禁用，如图所示的提示，Some content has been disabled in the content。
我们可以直接点击这个提示，也可以fn f1输命令，总之进入Security Settings, 改成Disable即可。
关于能否用vscode的开发人员工具审查预览的html元素，答案可能是否定的。我们先尝试打开开发人员工具。
然后我们看到预览通过一个webview来实现。webview内部有空白iframe，并不含有具体的html元素。
查看election官网关于webview实现的解释，可以看到是Out-of-Process iframes。在vscode的开发人员工具里可能是看不到的。
查看元素这类需求可能还是需要浏览器。
注意事项
- 如果遇到问题，可以在下面提出疑问。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：如何用javacript选择单一元素 下一篇：CSS 元素水平居中的多种方式
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 434 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)