Краткое обсуждение новых и устаревших тегов в HTML5.

Следующие элементы HTML 4.01 были удалены из HTML5. Хотя браузеры по-прежнему поддерживают эти теги по соображениям совместимости, рекомендуется использовать новые альтернативные теги. Как ни парадоксально, старые браузеры недостаточно поддерживают новые теги. Зависит от аудитории.

К этим элементам относятся basefont, big, center, font, s,strike, tt, u. Эти элементы предназначены исключительно для отображения страницы, а отображаемый контент должен дополняться CSS.

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

К этим элементам относятся апплет, bgsound, моргание, выделение и другие теги.

Отмените rb, используйте Ruby для замены акронима Используйте abbr для замены отмены dir Используйте ul для замены isindex Используйте комбинацию формы и ввода для замены листинга Используйте pre для замены xmp Используйте код для замены отмены nextid Используйте guids для отмены Plaintex Используйте text/ plian (неформатированное тело) Замена MIME-типа

В HTML4.01 элементы div широко используются в различных средах макетирования без четкого определения. В HTML5 семантика элементов div для SEO, а также новые структурные теги:

а) элемент раздела представляет собой блок контента на странице, например главу, заголовок, нижний колонтитул или другую часть страницы. Его можно использовать в сочетании с h1, h2... и другими элементами для представления структуры документа. Пример: <section>……</section> в HTML5; <div>……</div> в HTML4;

б) Элемент статьи представляет собой часть независимого контента на странице, не связанную с контекстом. Например, статья.

c) элемент «side» представляет вспомогательную информацию, связанную с содержимым элемента статьи, отличной от содержимого элемента статьи.

г) Элемент заголовка представляет собой блок контента на странице или заголовок всей страницы.

д) Элемент hgroup представляет собой комбинацию заголовков всей страницы или блока контента на странице.

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

g) Элемент nav представляет собой часть страницы, посвященную навигационной ссылке.

h) Элемент рисунка представляет независимую часть содержимого потока, обычно представляющую независимую единицу основного содержимого потока документа. Используйте элемент figcaption, чтобы добавить подпись к группе элементов рисунка. Например:

 <figure> ​<figcaption>КНР</figcaption> ​<p>Китайская Народная Республика родилась в 1949 году</p></figure>

Обычное написание в HTML4

 <dl> ​<h1>prc</h1> ​<p>Китайская Народная Республика родилась в 1949 году</p> ​</dl>

Результаты запуска:

2.1.метр

Представляет значение в определенном диапазоне, которое можно использовать для заработной платы, количества, процентов и т. д. max представляет максимальное значение, min представляет минимальное значение, а value представляет текущее значение.

 <meter max=100 min=0 value=60 style=width: 300px;></meter>

Вы можете использовать js для управления им от 0 до 100.

время. Представляет значение времени. Атрибут datetime подчеркивает время конференции: <time>2015-10-6</time>.

 <time>6 октября 2015 г.</time>

Мы начинаем занятия каждое утро в <time>8:30</time>. У меня свидание на <time datetime=2017-02-14>День святого Валентина</time>.

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

Используется для обозначения индикатора выполнения

 <h3>прогресс</h3><progress value=75 max=100></progress>

max: максимальное значение, значение при завершении

значение: текущее значение

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

В сочетании с вводом можно выполнить как выбор, так и ввод.

 <input type=text list=countries /><datalist id=countries> <option value=China></option> <option value=United States></option> <option value=Japan></option></datalist >

В основном он используется для визуального представления пользователю текста, который необходимо выделить или выделить. Ключевые слова поиска выделяются в типичных результатах поиска приложений. HTML5<mark></mark>;HTML4 <span></span>.

Определите рубиновые комментарии (китайский пиньинь или символы). Используется с тегами <ruby> и <rt>. Элемент Ruby состоит из одного или нескольких символов (требующих объяснения/произношения), элемента rt, предоставляющего эту информацию, и необязательного элемента rp, который определяет контент, который будет отображаться, когда браузер не поддерживает элемент Ruby.

Определяет интерпретацию или произношение иероглифа (китайская фонетическая фонетика или иероглиф).

Используется в комментариях Ruby для определения того, что отображается браузерами, не поддерживающими элементы Ruby.

Представляет мягкий разрыв строки. Отличие от элемента br: элемент br указывает, что здесь необходимо сделать разрыв строки; wbr указывает, что если окно браузера или родительский элемент широкие (когда нет необходимости в разрыве строки), то строки не будет; сломан, но когда ширины недостаточно, линия будет автоматически перенесена сюда.

Определите графику, например диаграммы и другие изображения. Элемент <canvas> — это просто графический контейнер (холст), и для рисования графики необходимо использовать сценарии.

 <canvas id=myCanvas></canvas><script type=text/javascript> var Canvas = document.getElementById('myCanvas'); var ctx = Canvas.getContext('2d'); ctx.fillRect(0, 0, 80, 100);</script>

Представляет командную кнопку, например переключатель, флажок или кнопку. Элемент команды виден только в том случае, если он находится внутри элемента меню. В противном случае этот элемент не будет отображаться, но его можно использовать для указания сочетаний клавиш.

 <menu> ​<command onclick=alert('Hello World')> ​Нажмите на меня!</command> ​</menu>

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

Определите список опций. Используйте этот элемент вместе с элементом ввода, чтобы определить возможные значения ввода. Список данных и его параметры не отображаются, это просто список допустимых входных значений. Используйте атрибут list элемента ввода для привязки списка данных.

Определите различные типы вывода, например вывод сценария.

 <form action=form_action.asp метод=get name=sumform> ​<имя вывода=sum></output> ​</form>

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

Если вам нужно воспроизвести аудио и видео на странице, мы часто используем следующие методы:

а) встроить

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf'allowFullScreen='true'quality='high' width='480' height='400' align=' middle'allowScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

б) использовать флеш-плеер.

Например, некоторые сторонние плагины, flowplayer602.

Мультимедийные компоненты HTML5 относятся к видео (видео) компонентам и аудио (аудио) компонентам. Мультимедийные компоненты HTML5 могут встраивать мультимедийные компоненты непосредственно на ваши веб-страницы без помощи сторонних плагинов, таких как Flash Player. Новая способность браузеров предлагать встроенную поддержку видео упрощает веб-разработчикам добавление видеокомпонентов на свои веб-сайты, не полагаясь на наличие внешних плагинов. Из-за ограничений технологии Flash, используемой в настоящее время Apple на iPhone и iPad, возможности мультимедийных компонентов HTML5 особенно важны.

Используется для воспроизведения видео, фильмов.

Основная формула этикетки выглядит следующим образом:

 <video width=800 height=600 control=controls poster=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <ширина объекта= высота= тип=application/x-shockwave-flash data=myvideo.swf> <имя параметра=значение фильма=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> Текущий браузер не поддерживает прямое воспроизведение видео. Нажмите здесь, чтобы загрузить видео: <a href=a.mp4>Загрузить. видео</a></video>

Источник — это источник видео, который может быть нескольких типов. При сбое одного из них будет выбран следующий. Существует три основных типа:

Ogg = файл Ogg с кодировкой видео Theora и кодировкой звука Vorbis. MPEG4 = файл MPEG 4 с кодировкой видео H.264 и кодировкой звука AAC. WebM = файл WebM с кодировкой видео VP8 и кодировкой звука Vorbis.

Уведомление:

 <video src=img/a.mp4 control=controls poster=img/1.jpg>Ваш браузер слишком старый, обновите его, загрузите видео <a href=#>Адрес</a></video>

Содержимое InnerHTML большинства тегов HTML5 — это содержимое, отображаемое, когда браузер не поддерживает этот тег.

Разница между привязкой событий и прослушиванием:

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>Разница между привязкой событий и мониторингом</title> </head>​ <body> <button id=btnA>Кнопка A </button> <button id=btnB>Кнопка B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { alert(вы нажали); } btnA.onclick = function() { alert(вы нажали еще раз); } btnB.addEventListener(click, function(event) { alert(вы нажали); },false; btnB.addEventListener(click,function(event){ alert(вы нажали еще раз); },false); </script> </body>​</html>

После привязки события с использованием имени события on привязка перезапишет ранее привязанное событие, то есть последнее связанное событие вступит в силу;

Использование addEventListener для привязки событий не будет перезаписываться, и к одному элементу можно одновременно привязать несколько одинаковых событий.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>Тег видео</title> </head> <body> <video id=videoIce width=800 height=600 control=controls плакат =content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> Текущий браузер не поддерживает прямое воспроизведение видео. Нажмите здесь, чтобы загрузить видео: <a href=content/a.mp4>Загрузить видео</a>. </video> <h2> <button onclick=play()>Play</button> <button onclick=pause()>Pause</button> <span id=msg></span> </h2> <тип сценария =text/javascript> var videoIce=document.getElementById(videoIce); функция play() { videoIce.play() } функция пауза() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime } </script> </body>​</html>;

Аудио может реализовать функцию воспроизведения звука и музыки.

 <audio src=http://baidu/demo/test.mp3 control >Ваш браузер не поддерживает элемент audio</autio><audio src=content/a.mp3 control=controls autoplay=autoplay></audio>

Многие атрибуты аудиотега такие же, как и у видео:

autoplay: true|false, если true, звук будет воспроизводиться, как только он будет готов. элементы управления: true|false Если true, пользователю отображаются элементы управления, такие как кнопка воспроизведения. конец: числовое значение определяет, где в аудиопотоке плеер прекращает воспроизведение. По умолчанию звук будет воспроизводиться до конца. Loopend: числовое значение определяет позицию остановки воспроизведения цикла в аудиопотоке. По умолчанию используется значение атрибута end. Loopstart: числовое значение определяет начальную позицию воспроизведения цикла в аудиопотоке. По умолчанию используется значение атрибута start. playcount: числовое значение определяет, сколько раз воспроизводится аудиоклип. Значение по умолчанию — 1. src: url URL-адрес воспроизводимого аудио. start: числовое значение определяет позицию в аудиопотоке, с которой проигрыватель начинает воспроизведение. По умолчанию звук воспроизводится в начале.

Пример использования исходного элемента в качестве подтега мультимедийного элемента:

 <audio>​<source src='test.mp3 ' type='audio/mpeg'/>​<source src='test.ogg ' type='audio/ogg'/>​<source src='test.spx ' type='audio/ogg'/>​</audio>

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

API аудио в основном такой же, как и видео. Вот пример настройки громкости:

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>аудио тег</title> </head> <body> <h2>аудио тег</h2> <audio src=content/ fcml.mp3 control=controls autoplay=autoplay id=mp3> <marquee><h2>Смените браузер, он слишком старый</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01 } <; /script> </body></html>

Громкость только между 0-1.

Используется для встраивания контента (включая различные медиа). Формат может быть Midi, Wav, AIFF, AU, MP3, flash и т. д.

Пример: <embed src=flash.swf /> Пример кода в HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.