отрисовать в конвасе теги , взаимодействия с каждым их обектов  <div class="chapters__character chapters выводить в консоль
<main class="chapters">
        <div class="chapters__character chapters_character__first">
          <a class="chapters__caption" href="./passage/passage_1 _lock/passage_1 _lock.html">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon">
                </div>
              </div>
              <p class="chapters__caption_text">好戏开场</p>
            </div>
          </a>
        </div>
        <div class="chapters_character chapters_character__second">
          <a class="chapters__caption" href="./passage/passage_2 _write/passage_2 _write.html">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon">
                </div>
              </div>
              <p class="chapters__caption_text">崭露头角</p>
            </div>
          </a>
        </div>
        <div class="chapters_character chapters_character__third">
          <a class="chapters__caption" href="./passage/passage_3/passage_3.html">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon">
                </div>
              </div>
              <p class="chapters__caption_text">阴霾初现</p>
            </div>
          </a>
        </div>
        <div class="chapters_character chapters_character__forth" href="./passage/passage_4/passage_4.html">
          <a class="chapters__caption" href="./passage/passage_4/passage_4.html">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon">
                </div>
              </div>
              <p class="chapters__caption_text">春风一度</p>
            </div>
          </a>
        </div>
        <div class="chapters_character chapters_character__fifth">
          <a class="chapters__caption" href="./passage/passage_5/passage_5.html">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon">
                </div>
              </div>
              <p class="chapters__caption_text">后宫之乱</p>
            </div>
          </a>
        </div>
        <div class="chapters_character chapters_character__sixth">
          <a class="chapters__caption" href="./passage/passage_6/passage_6.html">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon">
                </div>
              </div>
              <p class="chapters__caption_text">进退两难</p>
            </div>
          </a>
        </div>
        <div class="chapters_character chapters_character__seventh">
          <a class="chapters__caption" href="./passage/passage_7/passage_7.html">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon">
                </div>
              </div>
              <p class="chapters__caption_text">浮出水面</p>
            </div>
          </a>
        </div>
        <div class="chapters_character chapters_character__eighth">
          <a class="chapters__caption" href="./passage/passage_8/passage_8.html">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon">
                </div>
              </div>
              <p class="chapters__caption_text">千钧一发</p>
            </div>
          </a>
        </div>
      </main>