补充


嵌套规则

在元素嵌套时,有一些嵌套限制:

  • 内联元素不要包裹块级元素,比如:

    <strong>
      <h1>标题</h1>
    </strong>
    

    上面的写法不被提倡,应该让块级元素包裹内联元素:

    <h1>
      <strong>标题 </strong>
    </h1>
    
  • a 元素虽然是内联元素,但是可以嵌套块级元素,比如:

    <a href="#">
      <h1>这里是块级元素</h1>
    </a>
    <a href="#">
      <div>这里是块级元素</div>
    </a>
    

    尽管这种写法是允许的,但是实际开发中也并不提倡,我们应该首先遵循块级元素嵌套内联元素的规则,所以上面的代码应该改为:

    <h1>
      <a href="#"> 这里是块级元素 </a>
    </h1>
    <div>
      <a href="#"> 这里是块级元素 </a>
    </div>
    
  • ul,ol 直系子级只能是 li

硬性规定:

  • 标题元素不可互相嵌套;
  • p 元素内不可嵌套其他块级元素和它本身;
  • a 链接不要嵌套 a 链接;

实体符号

因为编写好的 HTML 元素会被浏览器解析,然后隐藏元素的标签部分,但是有的时候我们就是需要展示一个元素的写法在浏览器中,或者为文本添加空格,这时候就需要用到实体符号。

实体符号也会被浏览器解析,不过会解析为特定的符号,比如你想在浏览器中展示一个 img 元素,那么可以写成:

&lt;img &sol;&gt;,它会被展示为 <img /> 显示到网页中。

其中 &lt; = <&sol; = /&gt; = >,顺带提一个 &nbsp; 代表空格。

关于这些实体符号,并不需要特别死记硬背,当需要使用的时候,到网上查表即可。

编辑器

  • 自动填充
  • 格式化保存 prettier 扩展

下一步

目前为止,HTML 基础部分的课程已结束,下一步你可以开始学习 CSS 基础课程。

讲义参考