这是一个关于HTML的调试问题

HTML网页 按F12后 ，怎么调试一行一行的代码 求解！另外，display中的block，具体咋用，能举个例子吗？希望有大佬能回答下小弟的问 题 。。

首先，浏览器下的调试时针对 js 的，在 js 中写 debugger ； 语句后，自动停在该位置，然后可以打断点进行调试。
display:none,block,inline 。

1.调试工具 一两句讲不清楚https://juejin.im/search?query=chrome%E8%B0%83%E8%AF%95&type=all
2.display:block 表示显示 display:none 表示隐藏

f12调试：首先f12，然后切换到sources选项卡，找到你的js文件，点击下就会显示到中间，然后在js代码行前面插入断点。然后最右边顶部去一步一步走或全部执行即可。

display:block；
每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
块级元素：动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；
行内元素：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

例子： 链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。

代码：

代码部分显示不出来，

display的问题：

首先：display 规定元素应该生成的容器的类型
1.display:inline :行级标签，不能设置宽高，例如 span,em...
2.display:inline-block:行内块标签，例如img
3.display:block:块级标签，例如main,section等等
4.display:none: 标签隐藏，非删除
5.display:table，display:table-cell也是比较常用的
6.最好用的，个人最爱用的方法之一是display:flex 也就是所谓的弹性布局
7.display:box 盒子，具体用法我忘记了，但记得可以用于垂直居中的一个用法，可以自行百度，
7.还有非常多的display设置，
举个例子：
div{
/* 此处的宽高有效 /
width:50px;
height:60px;
border:1px solid red;
}
div{
width:50px;
height:60px;
border:1px solid red;
display:inline,
/ 此处的宽高无效，因为被转为行级元素 */
}

希望对你有用

调试，你是要js的调试嘛

你可以设置断点，debugger，只有你控制台打开刷新，代码执行到debugger自然会停止