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

  1. Вступление​

    Полазив немного по форуму наткнулся на статью-Первый взгляд на 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>
    [+] Результат:
    [​IMG]
    [свернуть]

    Placeholders​


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


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


    В 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>  
    
    [+] Результат:

    [​IMG]
    [свернуть]


    Типы для элементов 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:
    Остальные фишки(звук,видео и т.д)тут
     
    3 пользователям это понравилось.