Десять функций HTML5, рекомендованных боссами BAT

внешний интерфейс
  • Оригинальный адрес:Дев.то/Ах он лезет/10-У…
  • Оригинальный автор: Тапас Адхикари
  • Переводчик: Пей Гесин (Солнце солнечное)

HTML5Не новая вещь. Мы используем некоторые из его функций с момента его первоначального выпуска (январь 2008 г.). Позже я снова внимательно изучил список функций HTML5. Видишь, что я нашел? Я действительно не использовал его до сих пор!

В этой статье я перечислил десять функций HTML5, которые раньше не использовал, но теперь считаю полезными. Я также создал рабочий пример потока и разместил его на Netlify. Надеюсь, вы тоже найдете его полезным.

Нажмите на демонстрационный пример:html5-tips.netlify.app/

Отлично, давайте начнем с их объяснений, давайте быстро закодируем их. Вы можете следить за мной в Твиттере, чтобы следить за моими будущими статьями и работами.

🔥 Тег сведений

<details>Метки предоставляют пользователю подробный контент по запросу. Используйте этот тег, если вам нужно отображать контент пользователю по запросу. По умолчанию подробный контент отключен. После открытия он расширится и покажет содержимое внутри.

<summary>этикетка с<details>Используйте вместе, чтобы указать видимый заголовок для него.

Code

<details>
     <summary>Click Here to get the user details</summary>
         <table>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Job</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Adam</td>
                    <td>Huston</td>
                    <td>UI/UX</td>
                </tr>
          </table>
``  </details>

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо: https://html5-tips.netlify.app/details/index.html

намекать

Используйте его в файле Readme GitHub, чтобы отобразить необходимые сведения. Скройте много текста и покажите его только по запросу. Круто, да?

Нажмите, чтобы увидеть примеры:GitHub.com/ах он залез/не вопрос…

🔥 Редактируемый контент

contenteditableэто атрибут, который можно установить для элемента, чтобы сделать содержимое редактируемым.

Может использоваться с такими элементами, как DIV, P, UL и т. д. Вы должны указать это так:<element contenteditable="true|false">.

Обратите внимание, что если свойство contenteditable не установлено для элемента, оно унаследует это свойство от своего родителя.

Code

<h2> Shoppping List(Content Editable) </h2>
 <ul class="content-editable" contenteditable="true">
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо:Показать в HTML5-tips.net.app/content-Edi…

намекать

Элемент span или div можно сделать доступным для редактирования, а к нему можно добавить любое расширенное содержимое с помощью стилей CSS. Это будет лучше, чем использование поля ввода. Попробуйте!

🔥 Карта

<map>Этикетки могут помочь определитьimage map,image mapлюбое изображение, имеющее одну или несколько интерактивных областей. тег карты с<area>Метки вместе определяют кликабельную область. Щелчковая область может быть прямоугольной, круглой или многоугольной. Если вы не укажете какую-либо форму, по умолчанию будет использоваться все изображение.

Code

<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

    <map name="circusmap">
        <area shape="rect" coords="67,114,207,254" href="elephant.htm">
        <area shape="rect" coords="222,141,318, 256" href="lion.htm">
        <area shape="rect" coords="343,111,455, 267" href="horse.htm">
        <area shape="rect" coords="35,328,143,500" href="clown.htm">
        <area shape="circle" coords="426,409,100" href="clown.htm">
    </map>
 </div>

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо:HTML5-tips.net показывает .app/flattering/index. Также…

намекать

Карты изображений имеют свои недостатки, но их можно использовать для визуальных презентаций. Мы можем попробовать это с семейными фотографиями и углубиться в отдельные фотографии.

🔥 Отметить содержимое

использовать<mark>Маркеры выделяют любое текстовое содержимое.

Code

 <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо:Показать .app/mark/index.… в HTML5-tips.net

намекать

Вы всегда можете изменить цвет выделения с помощью CSS,

mark {
  background-color: green;
  color: #FFFFFF;
}

🔥 data-* атрибуты

data-*Атрибут используется для хранения пользовательских данных страницы или приложения. Вы можете создать больше пользователей, чтобы испытать использование данных, хранящихся в коде JavaScript.

data- *Недвижимость состоит из двух частей:

  • Имена атрибутов не должны содержать заглавных букв и должны быть как минимум на один символ длиннее после префикса «data-».
  • Значением свойства может быть любая строка

Code

<h2> Know data attribute </h2>
 <div 
       class="data-attribute" 
       id="data-attr" 
       data-custom-attr="You are just Awesome!"> 
   I have a hidden secret!
  </div>

 <button onclick="reveal()">Reveal</button>


function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}

Примечание. Чтобы прочитать значение этих атрибутов в JavaScript, вы можете использовать getAttribute(), но спецификация определяет более простой способ: используйте атрибут набора данных.

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо:HTML5-tips.net показывает .app/data-ATT Japan…

намекать

Вы можете использовать его для хранения некоторых данных на странице, а затем передавать их на сервер с помощью вызова REST.

🔥 Выходной тег

<output>Метка указывает на результат операции. Обычно этот элемент определяет область, которая будет использоваться для отображения вычисляемого текста.

Code

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
   <input type="number" id="a" value="0">
          * <input type="number" id="b" value="0">
                = <output name="x" for="a b"></output>
</form>

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо:HTML5-tips.net показывает .app/output/in…

намекать

Если вы хотите выполнить какие-либо вычисления в клиентском JavaScript и хотите, чтобы результаты отражались на странице, используйте<output>отметка. Вам не нужно ходить, чтобы использовать дополнительный шаг для получения элемента: getElementById().

🔥 Список данных

<datalist>Метки задают заранее определенный список параметров и позволяют пользователю добавлять дополнительные. Он предоставляет функцию автозаполнения, которая позволяет вам вводить нужные параметры заранее.

Code

<form action="" method="get">
    <label for="fruit">Choose your fruit from the list:</label>
    <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
           <option value="Apple">
           <option value="Orange">
           <option value="Banana">
           <option value="Mango">
           <option value="Avacado">
        </datalist>
     <input type="submit">
 </form>

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо:Показать в HTML5-tips.net.app/data list/in…

намекать

с традицией<select>-<option>Чем отличаются этикетки? Тег Select используется для выбора одного или нескольких элементов из вариантов, вам нужно просмотреть список, чтобы сделать выбор. Datalist — это расширенная функция с поддержкой автозаполнения. То есть тег Datalist можно не только выбрать, но и ввести

🔥 Диапазон (ползунок)

rangeТип ввода с ползунком, выбор диапазона

Code

<form method="post">
    <input 
         type="range" 
         name="range" 
         min="0" 
         max="100" 
         step="1" 
         value=""
         onchange="changeValue(event)"/>
 </form>
 <div class="range">
      <output id="output" name="result">  </output>
 </div>

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо:Html5-tips.net показан .app / ряд / индекс ...

намекать

В html5 нет слайдера.

🔥 Метр

использовать<meter>Метки измеряют данные в заданном диапазоне.

Code

`<label for="home">/home/atapas</label>
<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>

<label for="root">/root</label>
<meter id="root" value="0.6">60%</meter><br>`

Демонстрация эффекта

Вы можете скачать его отсюдаНачать просмотр демо:Показать .app/meter/index… в HTML5-tips.net

намекать

Не ставить<meter>Метки используются для индикаторов выполнения. У нас есть<Progress>Разметка HTML5.

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

Что дальше?

Что ж, я уверен, что оставил что-то полезное. Пожалуйста, оставляйте комментарии об этой статье и о том, как вы изучаете HTML5.

Если это было полезно для вас, пожалуйста, поставьте лайк / поделитесь им, чтобы привлечь других. я правUI / UXСтрастно и с удовольствием делюсь своими знаниями через статьи.

Статья была впервые опубликована в публичном аккаунте WeChat «Front-end Sunshine».

Категории