TECH News, Uncategorized, Wszystkie

HTML5 nie jest nową rzeczą. Jego funkcje można używać od pierwszego dnia wydania (styczeń 2008). W ramach inicjatywy # 100DaysOfCode Tapas Adhikary – UI/UX Designer/Mentor/Blogger/Dreamer  w Micro Focus przyjrzał się ponownie  liście funkcji HTML5. Zobaczcie, co znalazł i  przekonajcie się co ciekawego kryje HTML5 !

Artykuł ten został podzielony na dwie części. W tym artykule znajdziecie pięć funkcji HTML5, z których Tapas Ahikary nie korzystał zbyt wiele w przeszłości, ale po zapoznaniu się z nimi, uznał je za przydatne. Stworzył on również działający przykład przepływu i hostował na #Netlify. Za tydzień wrócimy do Was z kolejnymi pięcioma funkcjami.

Po krótkim wprowadzeniu CZAS START !

Świetnie, więc zacznijmy od objaśnienia, kodu i szybkich wskazówek dotyczących każdego z nich. Możesz śledzić mnie na Twitterze, aby zobaczyć moje przyszłe artykuły i prace.

  1. 🔥 Etykieta szczegółów

Tag <details> udostępnia użytkownikowi szczegółowe informacje na żądanie. Jeśli chcesz wyświetlać użytkownikowi zawartość na żądanie, użyj tego tagu. Domyślnie widget jest zamknięty. Po otwarciu rozwija się i wyświetla zawartość.

Znacznik <summary> jest używany z <details> w celu określenia widocznego dla niego nagłówka.

Kod

Sprawdź sam, jak to działa: https://html5-tips.netlify.app/details/index.html

Wskazówki

Użyj go w pliku Readme usługi GitHub, aby wyświetlić szczegółowe informacje na żądanie. Oto przykład, jak ukryłem ogromną listę właściwości komponentów reagujących i pokazałem ją tylko na żądanie. Fajnie, prawda?

2. 🔥 Edytowalne treści

Contenteditable to atrybut, który można ustawić w elemencie, aby umożliwić edycję treści. Działa z elementami takimi jak DIV, P, UL, itp. Musisz to określić jako <element contenteditable = „true | false”>.

Uwaga: jeśli atrybut contenteditable nie jest ustawiony w elemencie, zostanie on odziedziczony z elementu nadrzędnego.

Kod

Sprawdź sam, jak to działa: https://html5-tips.netlify.app/content-editable/index.html

Wskazówki

Elementy span lub div mogą być za jego pomocą edytowalne i możesz dodawać do nich dowolną bogatą zawartość za pomocą stylów CSS. Będzie to o wiele lepsze niż obsługa tego za pomocą pól wejściowych. Spróbuj!

3. 🔥 Mapa

Znacznik <map> pomaga w definiowaniu mapy obrazu. Mapa obrazu to obraz zawierający jeden lub więcej klikalnych obszarów. Znacznik mapy jest połączony ze znacznikiem <area> w celu określenia obszarów, które można kliknąć. Klikalne obszary mogą być jednym z tych kształtów: prostokątem, okręgiem lub wielokątnym regionem. Jeśli nie określisz żadnego kształtu, uwzględni cały obraz.

Kod

<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>

Sprawdź sam, jak działa: https://html5-tips.netlify.app/map/index.html

Wskazówki

Mapa obrazu ma swoje wady, ale można jej używać do prezentacji wizualnych. Co powiesz na wypróbowanie tego ze zdjęciem rodzinnym i zagłębienie się w zdjęcie danej osoby (może stare, które zawsze cenimy!).

4. 🔥 Mark Content

Użyj tagu <mark>, aby zaznaczyć dowolną treść tekstową.

Kod

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

Sprawdź sam, jak to działa: https://html5-tips.netlify.app/mark/index.html

Wskazówki

Zawsze możesz zmienić kolor podświetlenia za pomocą CSS,

5. 🔥 Atrybut data- *

Atrybuty data- * służą do przechowywania niestandardowych danych prywatnych dla strony lub aplikacji. Zapisane dane można wykorzystać w kodzie JavaScript do tworzenia dalszych doświadczeń użytkowników.

Atrybuty data- * składają się z dwóch części:

  • Nazwa atrybutu nie może zawierać wielkich liter i musi się w niej znajdować co najmniej jeden znak po przedrostku „data-”
  • Wartość atrybutu może być dowolnym ciągiem

Kod

Następnie w JavaScript

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

Uwaga: Aby odczytać wartości tych atrybutów w JavaScript, możesz użyć metody getAttribute () z ich pełną nazwą HTML (tj. Data-custom-attr), ale standard definiuje prostszy sposób: użycie właściwości dataset.

Sprawdź sam, jak to działa: https://html5-tips.netlify.app/data-attribute/index.html

Wskazówki

Możesz go użyć do przechowywania niektórych danych na stronie, a następnie przekazać je za pomocą wywołania REST do serwera. Inny przykład – wskazanie liczby powiadomień.

W następnym artykule poznacie kolejne funkcje HTML5, o których mogliście zapomnieć !

Tapas Adhikary – Full Stack Developer & User Interface Architect. Uwielbia tworzyć aplikacje internetowe, mobilne i rozwiązania JAMstack. Jest blogerem technologicznym, który publikuje artykuły dla freeCodeCamp, daily.dev, dev.to i na swoim blogu blog.greenroots.info. Śledź go na Twitterze (tapasadhikary), aby pozostać w kontakcie.