记录前端的学习过程。
本篇文章是最基础的 HTML 部分。

元素显示模式

HTML 元素一般分为 “块元素” 和 “行内元素”。

块元素

<div> 是最典型的块元素。其余的还有 <h1> ~ <h6>、<p>、<ul>、<ol>、<li> 等。

特性：

  1. 独占一行
  2. 高度、宽度、外边距和内边距都可以控制
  3. 宽度默认是容器（父级宽度）的 100%
  4. 是一个容器及盒子，里面可以放行内或者块级元素

注意：

  • 文字类元素内部不能使用块级元素
    • <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放 <div>
    • 同理，<h1> ~ <h6> 等都是文字类块级标签，里面也不能放其他块级元素

行内元素

是最典型的行内元素。其余的还有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>等。
有的地方也将行内元素成为内联元素。

特性：

  1. 相邻行内元素在一行上，一行可以显示多个
  2. 宽、高直接设置是无效的
  3. 默认宽度就是它本身内容的宽度
  4. 行内元素只能容纳文本或其他行内元素。

注意：

  • 链接里不能再放链接
  • 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换成块级模式最安全

示例

下面这段代码可以作为一个简单的示例。

<body>
    <h1>《前端小课》</h1>
    <h2>
        一本帮你入门与进阶的前端书
        <!-- h2 和 p 都是块级元素，内部可以直接包含其他元素，比如 <hr> -->
        <!-- html 标签之间，默认好像是会有一些间距的。所以这个 <hr> 如果写在 <p> 外层，会有不一样的 ui 效果 -->
        <hr>
    </h2>

    <!--   
        用 div 这个块级元素包一下，可以保证代码占整行 
        不用 div 包裹，那么这个元素的大小就是 code 的大小
    -->
    <div class="code-bg">
        <code>
            const p = document.querySelector('p');
            p.onclick = function() {
                alert('噢，噢，噢，别点我了。');
            }
        </code>
    </div>
</body>