如何查看HTML页面的所有块级元素和行内元素

2025-10-10 11:06:29

1、参考如下经验安装谷歌浏览器插件Web Developer

2、插件安装完成后，可以在浏览器右上角看到插件图标（齿轮形状）

如何查看HTML页面的所有块级元素和行内元素

3、编辑hello.html文件，输入如下内容：

<body>

<h1>企鹅和考拉，你们好</h1>

他们来自不能地域

<h2>企鹅生活在南极</h2>

<img src="Penguins.jpg

<img src="Koala.jpg

企鹅比考拉更能适应低温环境

</body>

如何查看HTML页面的所有块级元素和行内元素

1、打开上面编辑的HTML网页，展示效果效果如下

如何查看HTML页面的所有块级元素和行内元素

2、点击Web Developer插件图标，切换到Outline选项卡，选中Outline Block Level Elements展示块级元素。

如何查看HTML页面的所有块级元素和行内元素

3、执行完上步操作后可以看到所有的块级元素都被红色方框包围了，并且在方框的最左侧显示了块级元素对应的html标签，通过下图可以得知<h1><h2>为土块级元素，而没有红色方框包围的元素<img>为行内元素。

如何查看HTML页面的所有块级元素和行内元素

4、此外，还有一点要强调的是，如果行内元素在一行展示不完，会自动跳转到下一行进行展示，为了验证，我们将图片的宽度设置的更大一些(将宽度调整为600px，先前为400px)，可以看到图片分在两行进行展示了。

如何查看HTML页面的所有块级元素和行内元素

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。