HTML 5.1 Новые функции и примеры приложений новых функций и применений

Как мы знаем, HTML5 принадлежит к сетевому союзу Wanwei (W3C). В ноябре 2016 года W3C обновил долгосрочный стандарт HTML 5, который был первым небольшим обновлением за 2 года. Многие первоначально предложенные функциональные функции HTML 5.1 были удалены из -за дефектов проектирования и отсутствия поддержки производителей браузеров.

Несмотря на то, что есть некоторые элементы и улучшения функций, он вносится в HTML 5.1, это все еще небольшое обновление. Некоторые из этих новых элементов включают комбинированные этикетки.

W3C и начало разработки проекта HTML 5.2, как ожидается, будут выпущены в конце 2017 года. Мы хотим представить здесь новые функциональные характеристики и улучшение функций, представленные в версии 5.1. Вам не нужно перемещать JavaScript, чтобы использовать эти функции. Не все браузеры поддерживают эти функции, поэтому вы должны проверить их, чтобы проверить поддержку браузера, прежде чем применять их в производственную среду.

Большинство людей, которые используют target = '_ blank', не знают интересного факта-недавно открытая этикетка может изменить window.opener.location на некоторые страницы рыбалки сетевой рыболовства. Он будет представлять вас на открытой странице, чтобы выполнить какой -нибудь злонамеренный код JavaScript. Поскольку пользователь считает, что первая страница безопасна, он не будет сомневаться.

Чтобы полностью устранить эту проблему, HTML 5.1 стандартизировал использование свойства REL = NOOPNER, которое стандартизировано путем выделения контекста браузера. Rel = noopener может использоваться в тегах <a> и <Rea>.

 <A href =# target = _blank roth = noopner> Ссылка хочет больше доставить проблемы </a>

Метка <FigCaption> представляет заголовок или легенду, связанную с элементом <GURE>, который обычно используется в качестве контейнера для визуальных элементов, таких как изображения, диаграммы, иллюстрации. В ранней версии HTML <FigCaption> можно использовать только в качестве первой или последней суб -лабел. HTML5.1 ослабил этот предел, и теперь вы можете использовать <FigCaption> в любом месте контейнера <Igra>.

 <Harticle> <h1> заголовок сегодняшних новостей/Рисунок> <p> Это прямое поход в ценах на бензин за два месяца и третий в случае дизеля за одну двух недель

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

Element.forcespellcheck () заставит пользовательские агенты сообщать о орфографических ошибках и грамматических ошибках, обнаруженных в текстовом элементе, даже если пользователь никогда не фокусирует ввод на элементе.

 <p spellcheck = true> <babel> Имя: <input spellcheck = false id = textbox> </label> </p>

Новая версия HTML позволяет создать пустой элемент <purint>. Это может быть субэлементом <OptGroup>, <datalist> или <elect> элемента. Вы обнаружите, что эта функция может помочь при разработке одностороннего таблицы пользователей.

Свойство логической переменной AdludfullLSTRENSE, разработанное для Frame, позволяет управлять тем, можно ли отображаться через экран с помощью метода requestfullScreen (). Например, в качестве примера мы используем iframes, встроенные в YouTube. Вам необходимо установить свойство с повышенным экраном, чтобы игрок позволил игроку отобразить видео полного -экрана.

 <Artadicle> <header> <p> <img src =/usericons/16235> <b> fred flintstone </b> </p> <p> <a href =/posts/30934 R = закладка> 12:44 < /a> - <a href =#A.503439551> Приватный пост </a> </p> </header> <p> <p> Проверьте мое новое видео! >

HTML5.1 позволяет встроить заголовок и нижний колонтитул в другой заголовок. Вы можете добавить заголовок или нижний колонтитул в элементы головы, если они содержат себя в содержании абзаца. Если вы хотите добавить подробную разработку, такую ​​как <section> и <статья> теги в элементы семантического абзаца, эта функция станет очень полезной.

В следующем коде этикетка <criance> содержит тег <Header>, который имеет тег <hoalth> с тегом <weader>.

 <Artader> <Header> <h2> Урок: как приготовить курицу </h2> <hoalth> <hader> <h2> О авторе: Том Ханк </h2> <a href =./Tomhank/> Свяжитесь с ним! </A/P> </Header> <p> Эксперт только в кулинарной книге. В сумку на молнии с курицей и запечатайте его

Новая версия HTML позволяет добавлять изображения с нулевой шириной. Эту функцию можно использовать, когда изображение не нужно отображать пользователю. Если элемент IMG имеет другое использование, это не просто картина, например, как часть службы для расчета количества видов страниц, используйте 0 значений в свойствах ширины и высоты. Для изображений по ширине 0 рекомендуется использовать пустые атрибуты.

 <Img src = theimagefile.jpg width = 0 height = 0 src = "/uploads/allimg/170217/22010q544-0.jpg"/>
 Новый метод отчетов () () позволяет проверять форму и сбросить результаты и сообщать об ошибках пользователям в подходящей позиции браузера. Пользовательские агенты могут сообщить о более чем одно правило ограничения, если один элемент сталкивается с несколькими проблемами одновременно. Для этой ситуации ввод пароля является обязательным содержанием, но не заполненным, и он будет идентифицирован как ошибка.
 <h2> проверка формы </h2> <p> Введите данные </p> <form> <babel> Обязательный ввод типа = имя пароля = пароль обязательный/> </label> <Кнопка Тип = подводной IT> Отправить </кнопку > </Form> <script> document.quryselector ('form')
 6. Контекст браузера
 В HTML 5.1 вы можете использовать Menu> Mark для определения меню, который содержит один или несколько элементов <Menuitem>, а затем использует свойство Contextmenu, чтобы связать его с любым элементом. Идентификатор элемента <Menu> должен соответствовать значению атрибута контекста элемента, который мы хотим добавить в него контекстное меню.
 Каждая <Menuitem> может иметь одну из следующих трех форм:
 Радио -получить опцию из группы;
 Флакторы -Выберите или отмените опцию;
 Команда -Execue Dection при нажатии.
 <H2 ContextMenu = Popup-Menu> Щелкните правой кнопкой мыши, чтобы получить демо контекста. Type = command Label = Command OnClick = alert ('Warning')> Флажок 2 </menuitem> <menuitem type = radio name = Group1> Radio Button A </menuitem t ype = radio name = group1 checked = true> Радиобатовая b </Menuitem> <menuitem type = флажок отключен> Отключить элемент меню </menuitem> </menu>
 5. Используйте зашифрованные случайные числа на сценариях и стилях
 Криптографический нонс - это случайно сгенерированное число, которое можно использовать только один раз, и для каждого запроса страницы его необходимо сгенерировать. Этот атрибут Nonce можно использовать в элементах <Script> и <style>.
 Обычно он используется в стратегии безопасности контента веб -сайта, чтобы определить, следует ли реализовать конкретный стиль и сценарий на странице. В приведенном ниже коде это значение жестко кодируется, но в фактическом сценарии использование это значение генерируется случайным образом.
 <script nonce = 'd3ne7uwp43bhr0e'> код JavaScript </script>
 4. Отношение обратной последовательности связи
 Атрибут Rev определяется в HTML4, но он не появляется в HTML5. W3C решил переоценить атрибуты Rev в элементах <a> и <link>. Взаимосвязь между текущими и обратными документами ссылки идентификации атрибута Rev. Он был включен для поддержки широко используемого формата марки структуры данных, RDFA.
 Давайте использовать два документа, чтобы привести пример.
 // Документ с URL Глава 1.HTML <LINK hREF = Урок2, Roth = next rev = prev>
 3. отображать/скрыть информацию
 Новые элементы <tatails> и <summary> позволяют добавлять информацию о расширении в абзац. Вы можете отобразить или скрыть дополнительную информацию через элемент щелчка. По умолчанию дополнительная информация скрыта.
 В коде вы должны поместить знак <summary> в знак <prettain>, как показано ниже. После метки <Summary> вы можете добавить другой контент, чтобы быть скрытым.
 <section> <h3> Сообщение об ошибке </h3> <petithe> <dt> Размер файла: </dt> <dd> 8 кб </dd> <dt> код ошибки: </dt> <dd> 342a </dd> </dl> </detail> </section>
 2. Больше типов входных элементов
 Элемент входного элемента HTML расширил три входных типа в неделю, месяц и дат-времени.
 Как показывает имя, первые два элемента позволяют пользователям выбирать недельное значение и один месяц. В зависимости от поддержки браузера, он будет отображаться в отображаемый календарь рисования, что позволит вам выбрать одну конкретную неделю или месяц года.
 DataTime-Local представляет собой домен ввода даты и времени, но настройки часового пояса нет. Его данные могут быть выбраны в аналогичном методе с входным элементом месяца или недели, и время может быть введено в одиночку.
 <section> <h2> неделя, месяц и datetime-local </h2> <form action = action_page.php> выберите неделю: <input type = name неделя = годовой = Action_page.php> День рождения (месяц и год): <input type = month name = bdaymonth> <input type = propect> </form> <form action = action_page.ph P> inboding (дата и время): <тип ввода = DateTime-local name = bdaytime> <input type = spect value = send> </form> </section>
 1. Ответ изображение
 W3C вводит некоторые функциональные характеристики, и изображение ответа может быть достигнуто без использования CSS. Они есть ...
 Атрибут изображения SRCSET
 Атрибут SRCSET позволяет указать несколько необязательных источников изображения, соответствующих различному разрешению пикселя. Это позволит браузеру отображать соответствующую качественную реализацию в соответствии с различными пользовательскими устройствами. Например, лучше отобразить изображение с низким уровнем разрешения для пользователей с медленными мобильными устройствами.
 Вы можете использовать свойство SRCSE и принести свои собственные символы модификации X, чтобы описать соотношение пикселей каждого изображения.
 <Img src = clicks/low-res.jpg srcset = clicks/low-res.jpg 1x, клики/Medium-Res.jpg 2x, клики/High-Res.jpg 3x>
 В дополнение к соотношению пикселей, вы также можете использовать символ модификации W для указания изображений разных размеров. В следующем примере изображение высокого разрешения определяется как дисплей, когда ширина составляет 1600px.
 <Img src = clicks/low-res.jpg srcset = clicks/low-res.jpg 500w, клики/Medium-res.jpg 1000W, клики/высокий уровень. JPG 1600W>
 Атрибут изображения размеров
 Большую часть времени создателям нравится отображать разные изображения для разных размеров экрана. Это может быть достигнуто с помощью атрибута размера. Это позволяет настроить ширину для размера пространства, распределенного на дисплей изображения, а затем использовать свойство SRCSET, чтобы выбрать соответствующее изображение для отображения. Например…
 <Img src = clicks/low-res.jpg sizes = (max-width: 25em) 60VW, 100vw srcset = clicks/low-sres.jpg 500w, clicks/medium-res.jpg 1000w, clicks/res.jpg 1600 Вт>
 Здесь атрибут размеров определяет 100%ширины изображения окна, когда окно превышает 25 em, или 60%от ширины вида вида, когда оно меньше, чем равно 25 EM.
 элемент изображения
 Элемент изображения позволяет объявлять изображения для различного размера экрана. Это может быть реализовано путем инкапсуляции <img> с элементом <ficeure> и описанием множества подраздел <source>.
 <Piction> Маркировка только не показывает ничего. Вы предполагали, что источник изображения по умолчанию будет объявлено значением атрибута SRC, а необязательный источник изображения будет размещен в атрибуте Screen.
 <Picture> <Source Media = (max-width: 25em) srcset = clicks/small/low-res.jpg 1x, клики/малый/средний Res.jpg 2x, Clices/Small/High-Res.jp > <Source Media = (MAX-WIDTH: 60EM) SRCSET = Clicks/Lize/Low-Res.jpg 1x, клики/большой/средний RES.JPG 2x, CLICES/LAGIC/HIGH-RES.JPG 3X> <IMG SRC = Клики/default/medium- res.jpg> </piction>
 Суммировать
 Выше всего содержимое этой статьи.