mahmudchon

Вместо этого,
$('#form').submit(function() {

в вашем случае, должно быть это:
$('#form').on("submit", function() {

https://www.chartjs.org/docs/latest/charts/bar.htm...
Вариант с хорошей документацией, легкий в применении. Вариантов других диаграмм также масса.

Никак.
Это аккаунт для генерации контента на сайте? 336 вопросов по всем или практически всем возможным тегам сайта. И, судя по содержанию, сомнительного характера.

<?php
$peremennaya = file("array.txt");
for ( $x = 0; $x < count( $peremennaya ); $x++ ) {
    
    $n = $x + 1;
    list( $src, $h2 ) = explode( ' ', $peremennaya[$x] );
    
    echo '
    <div class="_30CWHKH _3eXsdaG" str="' . $n . '">
        <div class="_1FmS6_e">
            <img alt="Химия для бассейнов" src="' . $src . '" />
         </div>
        <a class="o0XE4_n" href="#">
            <h2 class="_2PmikUJ" txt="' . $n . '">' . $h2 . '</h2>
            <div data-dy="menu-item-tag"></div>
        </a>
    </div>
    ';
    
}

Код очень короткий и не сложный.

ymaps.ready(function () {

    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        }),

        myPlacemark = new ymaps.Placemark([55.661574, 37.573856], {
            hintContent: 'Подсказка',
            balloonContent: 'Содержание'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#image',
            // Своё изображение иконки метки.
            iconImageHref: 'marker.png',
            // Размеры метки.
            iconImageSize: [20, 28],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-10, -28]
        });

    myMap.geoObjects.add(myPlacemark);
    
});

хм?

@media (min-width: 320px) and (max-width: 413px) {
    /* стили */
}
@media (min-width: 414px) and (max-width: 575px) {
    /* другие стили*/
}

<?php
echo '<img style="width: 242px; height: 224px;" src="https://habrastorage.org/webt/5d/af/4f/5daf4facbe8c6020796636.png" alt="такое">';

Тут скорее border для td, а не для table идёт. Вы для какого тега стили прописывали?

Страницу нагружает любое, даже просто текстовое содержание, в зависимости от объема.
Другой вопрос - нагружает ли сервер?
Если вы подключаете видео с, например, youtube - страницу будет нагружать только видео, а при его воспроизведении сервер сайта не будет получать нагрузку, т.е. весь трафик будет лететь со стороннего ресурса.
Подключая со своего сайта - у вас еще и трафик с сервера полетит. У video же есть параметры, такие как preload и autoplay. Если вы не подгружаете заранее и не ставите на автовоспроизведение - видео сильно грузить не будет.