1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

Новые возможности Html 5

Тема в разделе "CSS, HTML, JS", создана пользователем хопкинс, 26 янв 2012.

  1. хопкинс
    хопкинс Новичок
    Симпатии:
    35
    Вступление​

    Полазив немного по форуму наткнулся на статью-Первый взгляд на HTML 5...После прочтения этой статьи подумал...а не написать ли мне свою статью с самыми кульными фишками Html 5, ведь в той статье их грубо говоря нет...хорошенько заправившись кофе я полез в гугл дабы освежить память и увидеть, что же еще взяли верстальщики себе на вооружение. И о боже...столько информации...(Как полезной так и полного бреда) Включив свой "супер" мозг, я отобрал самое-самое и решил поделиться с вами, дорогие участники xaker.name...Нус.начнем)))

    Атрибут Required​

    Допустим у нас с вами есть форма регистрации(на самом деле это можно применить ко всем формам). Естественно нам нужно что бы пользователь заполнил эту форму. Мы конечно пишем как обычно типа уважаемый Зойберг, заполните эту форму...ставим звездочки и т.п. Но! Всегда есть люди которые либо от тупости своей, либо от невнимательности пропускают эти поля и тыкают "Ок". И после нажатия на кнопку наши данные летят на сервер, обрабатываются скриптом и отправляют нашему Зойбергу сообщение об ошибке. Но это было раньше. В 5 версии Html появился такой замечательный атрибут, как Required. С его помощью теперь вся эта канитель будет обрабатываться на клиентской стороне.Пример:
    Код:
    <form method="post" action="">  
            <label for="someInput">Ваше имя: </label>  
            <input type="text" id="someInput" name="someInput" placeholder="Bill" required>  
            <button type="submit">Оке</button>  
        </form>
    [+] Результат:
    Новые возможности Html 5
    [свернуть]

    Placeholders​


    Теперь решена еще одна проблемка-подсказка в текстбоксе
    Пример:
    Код:
    <form method="post" action="">  
            <label for="someInput">Введите ваш E-mail: </label>  
            <input name="email" type="email" placeholder="Здесь можно что-то написать!" />
            <button type="submit">Оке</button>  
        </form>
    [+] Результат:
    Новые возможности Html 5
    [свернуть]


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


    В HTML5 появилась новая ,чудесная возможность-редактирование данных "на ходу"

    Представьте такую ситуацию...вы читаете какой нибудь блог...и вдруг замечаете, что автор совершил ошибку в тексте.(можно бегать по комнате и кричать "ай ай ай. Караул....безграмотные люди")А с этой возможностью мы можем исправить текст за несколько секунд)))
    Пример:
    Код:
        <!DOCTYPE html>  
         <html lang="en">  
        <head>  
            <meta charset="utf-8">  
            <title>untitled</title>  
        </head>  
        <body>  
            <h2> To-Do List </h2>  
             <ul contenteditable="true">  
                <li> Проснуться. </li>  
                <li> Выпить кофе. </li>  
                <li> Пойти куда-нибудь наконец! </li>  
             </ul>  
        </body>  
        </html>  
    
    [+] Результат:

    Новые возможности Html 5
    [свернуть]


    Типы для элементов script и link​


    Раньше все делали так:

    Код:
    <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
        <script type="text/javascript" src="path/to/script.js"></script>
    В HTML 5 вот так:

    Код:
    <link rel="stylesheet" href="path/to/stylesheet.css" />  
        <script src="path/to/script.js"></script>
    Атрибут figure​


    Код:
        <img src="path/to/image" alt="Для просмотра картинки-включите просмотр изображений в настройках!" />  
        <p>Image of Mars. </p>  
    
    Знакомо?! Но к сожалению здесь не так то просто добавить заголовок...
    в Html 5 это сделать намного проще:

    Код:
    <figure>  
            <img src="path/to/image" alt="Для просмотра картинки-включите просмотр изображений в настройках!" />  
            <figcaption>  
                <p>Здесь изображено что-то очень интересное.</p>  
            </figcaption>  
        </figure> 

    P.S. Не забывайте использовать новый доктайп:
    Код:
    <!DOCTYPE html>
    (Если новый доктайп встретится старому браузеру, то он просто останется в стандартном режиме совместимости) И помните, HTML 5 — не XHTML. Вам не следует оборачивать ваши атрибуты в кавычки, если вы не хотите этого делать.
    Ну вроде все.:thx:
    Остальные фишки(звук,видео и т.д)тут
     
    26 янв 2012
    3 пользователям это понравилось.

Поделиться этой страницей

Загрузка...