🤸🏽 🌕 🥙 HTML-Tags und -Attribute, die Sie möglicherweise nicht kennen 😭 👃 🤶

Bild

Dieser Artikel ist ein Spickzettel für HTML-Tags. Deshalb werden wir nicht direkt auf den Punkt schimpfen.

`abbr`

Das Tag abbr

definiert eine Abkürzung oder ein Akronym . Eine Abkürzung oder ein Akronym steht für die Verwendung des Attributs title

.

<abbr title="HyperText Markup Language">HTML</abbr>      -   1986—1991 .

abbr

Wird häufig in Verbindung mit einem Tag verwendet dfn

, das ein Konzept oder einen Begriff identifiziert:

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> -       (-).</p>

`address`

address

. , , , , ..

<address>
 : <a href="mailto:ivan@mail.com"> </a><br />
 : <a href="http://example.com" target="_blank" rel="noopener noreferrer">Example.com</a><br />
:  ,  
<address>

`audio`

audio

- ( .) -.

- src

, source

. , ( - type

).

<audio>

</audio>

, audio

.

: MP3

, WAV

OGG

.

autoplay

— ( )
controls

— ( audio

, , )
loop

— , , ,
muted

— ( autoplay

)
preload

— , - . : auto

, metadata

, none

. none

JavaScript
src

—

<audio controls>

       "audio".
</audio>

<!--  -->
<audio src="music.mp3" preload="metadata" controls muted loop>     "audio".</audio>

`video`

video

- ( .) -.

- src

, source

. , ( - type

).

<video>

</video>

, video

.

: MP4

, WebM

OGG

.

autoplay

— ( )
controls

—
loop

— , , ,
muted

— ( autoplay

)
preload

— , - . : auto

, metadata

, none

. none

JavaScript
src

—
poster

— ,
width

—
height

—

<video width="320" height="240" controls>

       "".
</video>

<!--  -->
<!--            -->
<video src="movie.mp4" autoplay muted loop>     "".</video>

DOM API

, audio

video

.

`base`

base

(URL

) / (target

) . head

:

href

—
target

— target

. : _blank

, _parent

, _self

_top

<head>
  <base href="http://example.com/" target="_blank">
</head>

<body>
  <header>
    <nav>
      <!-- http://example.com/product.html -->
      <a href="product.html"></a>
    </nav>
  </header>
  <main>
    <!-- http://example.com/images/happy_face.png -->
    <img src="images/happy_face.png" alt="" />
  </main>
  <footer>
    <nav>
      <!-- http://example.com/contacts.html -->
      <a href="contacts.html"></a>
    </nav>
  </footer>
</body>

`blockquote`

`cite`

blockquote

, . cite

.

<blockquote cite="https://ru.wikipedia.org/wiki/JavaScript">
JavaScript -   .  -,    .    ECMAScript ( ECMA-262).
</blockquote>

cite

- (, , , , , ..). .

<p>    JavaScript    <cite>"   JS"</cite>  .</p>

`code`

code

:

<p>HTML- `button`   .</p>

<p>CSS- `background-color`    .</p>

code

pre

:

<pre>
  `
    const name = prompt('  ?')
    if (name?.trim()) alert(`, ${name}!`)
    else console.info('   ')
  `
</pre>

`datalist`

datalist

. "" input

: .

id

datalist

list

input

.

<!--  `for`  `label`     `id`  `input` -->
<label for="browser">    :</label>
<input list="browsers" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

options

Datalist

.

`dl`

, `dt`

`dd`

dl

(, ). dt

, , dd

, .

dd

, , , ..

<dl>
  <dt></dt>
  <dd>  </dd>
  <dt></dt>
  <dd>  </dd>
</dl>

`details`

details

. , JavaScript

. .

details

.

details

summary

.

details

open

( CSS- — details[open]

JavaScript- — document.querySelector('[open]')

).

<details>
  <summary> -    "details"</summary>
  <p>  -  </p>
</details>

`dialog`

dialog

. "" .

dialog

.

dialog

open

.

<dialog open>  </dialog>

Dialog

JavaScript

show()

, close()

showModal()

, open

.

`figure`

figure

() , , , , ..

, figure

(main flow), () . figure

.

figure

figcaption

.

<figure>
  <img src="v8-compiler-pipeline.png" alt="V8 compiler pipeline" style="width:100%">
  <figcaption>. 1 -    "" JavaScript V8.</figcaption>
</figure>

`meter`

meter

. , meter

- (gauge).

meter

label

.

value

— min

max
min

—
max

—
low

— . min

, high

max
high

—
optimum

— min

max

. . , optimum

min

low

, ,
form

— form

, meter

<label for="disk_d">  "D":</label>
<meter id="disk_d" min="0" max="100" value="60">60%</meter>

meter

:

// <meter id="meter" max="100"></meter>
if ('getBattery' in navigator) {
  navigator.getBattery()
    .then(({ level }) => {
      meter.value = level * 100
    })
}

`progress`

progress

.

progress

label

.

max

— . 1
value

—

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

// <progress id="progress" value="0" max="10"></progress>
const timerId = setInterval(() => {
  progress.value += 1
  if (progress.value === progress.max) {
    progress.remove()
    clearInterval(timerId)
  }
}, 1000)

`output`

output

.

for

— ,
form

— form

, output
name

— output

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="25" />
  +
  <input type="number" id="b" value="50" />
  =
  <output name="x" for="a b">75</output>
</form>

`picture`

picture

( ).

(viewport width) .

picture

: source

img

.

source

-, . img

source

.

srcset

, - — media

.

<picture>
  \<source media="(min-width:768px)" srcset="big.jpg"/>
  \<source media="(min-width:480px)" srcset="small.jpg"/>
  <img src="default.jpg" alt="" style="width:auto;"/>
</picture>

`template`

template

, .

, , ( ).

template

JavaScript

.

<template>
  <h1></h1>
  <p> - </p>
</template>

<button id="button">  </button>

((body, { content }) => {
  button.onclick = () => {
    body.append(content.cloneNode(true))
  }
})(document.body, document.querySelector('template'))

`time`

time

( ).

datetime

.

<p>     ,   <time datetime="2000-01-01 00:01"> 2000 </time>   , ,  ,  . ,    <time datetime="3000-01-01 00:01"> 3000 </time>,    </p>

`noscript`

noscript

, , JavaScript

. head

, body

. noscript

link

, style

meta

.

<script>
document.write('   ...  ?')
</script>
<noscript>,  JavaScript</noscript>

""

<body>
  <header>
    <h1>Page Title</h1>
    <nav>
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
      </ul>
    </nav>
    <img src="images/logo.png" alt="" />
  </header>

  <aside>
    <h2>Aside Title</h2>
    <p>Aside Content</p>
  </aside>

  <main>
    <article>
      <h2>Atricle Title</h2>
      <section>
        <h3>Section Title</h3>
        <p>Section Content</p>
      </section>
    </article>

    <div>
      <section>
        <h2>Section2 Title</h2>
        <p>Section2 Content</p>
      </section>
      <section>
        <p>Section3 Content</p>
      </section>
    </div>
  </main>

  <footer>
    <nav>
      <ol>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ol>
    </nav>
    <div>
      <p>Block text &amp; <span>inline text</span></p>
    </div>
  </footer>
</body>

<p>
    
    <b></b>,
    <strong>  ""</strong>,
    <i>""</i>,
    <em>  </em>,
    <small></small>,
    <del>  </del>,
    <ins>  </ins>,
    <u></u>
    <s></s>.

     
    <q> </q>,
    <kbd>  </kbd>,
    <samp> </samp>.

    
    <sup> </sup> 
    <sub> </sub>.

  ,    <mark></mark>.

  <wbr />.

    <br />    <hr /> .
</p>

/

.

<form
  action="URL"
  autocomplete="on / off"
  enctype=""
  id="form"
  method="GET / POST"
  name="form"
  novalidate
>
  <fieldset>
    <legend>Title</legend>

    <label for="first_name">:</label>
    <input type="text" id="first_name">

    <label>:
      <input type="text">
    </label>
  </fieldset>

  <select
    autofocus
    disabled
    form="form"
    multiple
    name="select"
    required
    size="10"
  >
    <optgroup label="Group1">
      <option
        value="option1"
        disabled
        label="option1"
      ></option>
      <option value="option2" selected></option>
    </optgroup>

    <optgroup label="Group2" disabled>
      <option value="option3"></option>
    </optgroup>

    <option value="option4"></option>
  </select>

  <textarea
    autofocus
    cols="30"
    disabled
    form="form"
    maxlength="50"
    name="textarea"
    placeholder=" ..."
    readonly
    required
    rows="10"
    wrap="hard / soft"
  ></textarea>

  <button
    type="submit"
    autofocus
    disabled
    form="form"
    formaction="URL"
    formenctype=""
    formmethod="GET / POST"
    formnovalidate
    name="submit"
  >
       
  </button>
  <button type="reset">    (    )</button>
  <button type="button"> </button>
</form>

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (  )
<input type="time">
<input type="url">
<input type="week">

accept

— MIME- ( type="file"

). : , , .png

, audio/*

, video/*

, image/*

, , , json
alt

—
autocomplete

— on / off
autofocus
checked

— type="checked"

type="radio"
disabled
form
formaction

— type="submit"

type="image"
formenctype

— type="submit"

type="image"

. : application/x-www-form-urlencoded

, multipart/form-data

, text/plain
formmethod

— type="submit"

type="image"

(get / post

)
formnovalidate

—
formtarget

— , , ( type="submit"

type="image"

). : _blank

, _self

, _parent

, _top

,
height

— ( type="image"

)
list
max

— ( )
maxlength

— ( )
min

— ( )
minlength

— ( )
multiple

—
name
pattern

—
placeholder
readonly
required
size

— ,
src

— , ( type="image"

)
step

— () min

max
type
value
width

— ( type="image"

)

<form>
  <input
    type="email"
    id="email"
    name="email"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    required
  />

  <input
    type="password"
    id="password"
    name="password"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
    title="     8      ,   ()     "
    required
  />
  <input type="submit" />
</form>

<table>
  <caption>
    Table Title
  </caption>
  <colgroup>
    <col span="2" />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th
        abbr="H1"
        colspan="2"
        rowspan="2"
        scope="col / colgroup / row / rowgroup"
      >
        Heading1
      </th>
      <th>Heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">1-1</td>
      <td>1-2</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>3-1</td>
      <td>3-2</td>
    </tr>
  </tfoot>
</table>

colgroup

col

.

HTML-. . map

area

, ( , ..), . , svg

canvas

, , ( ).

10% !

HTML-Tags und -Attribute, die Sie möglicherweise nicht kennen

abbr (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

address (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

audio (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

video (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

base (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

code (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

datalist (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

details (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

dialog (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

figure (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

meter (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

progress (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

output (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

picture (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

template (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

time (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

noscript (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

""

More articles: