Погружение в HTML5

Дата публикации: 21.04.2011

Доклад с конференции «HTML5 Camp». Погружение в HTML5, Гайдар Магдануров (Microsoft).

</p> <div class="innerTags"> Теги: <a href="/cloud-HTML5/" title="Поиск по тегу HTML5" rel="tag">HTML5</a>, <a href="/cloud-doklad/" title="Поиск по тегу доклад" rel="tag">доклад</a> </div> <div id="comments"> <span id="showComments" rel="1527=modx">Показать комментарии</span> </div> </div> </div> </div> </div> </section> <section class="page-siblings-section"> <div class="container"> <div class="section-header"> <h2>Смотрите также в этом разделе</h2> <p>Смежные материалы, которые могут быть вам полезны</p> </div> <div class="siblings-grid"> <li class="page_item page-item-5246"><a href="https://mpbox.ru/uncensored/flash-remains-popular-platform-game-development/">10 причин, по которым Flash по-прежнему остается популярной платформой для разработки игр</a></li> <li class="page_item page-item-4256"><a href="https://mpbox.ru/uncensored/apps-vs-the-web/">Apps vs. Web — выбор между веб и нативным приложением</a></li> <li class="page_item page-item-4257"><a href="https://mpbox.ru/uncensored/ben-the-bodyguard/">Ben the bodyguard — интересный пример</a></li> <li class="page_item page-item-4258"><a href="https://mpbox.ru/uncensored/boilerplate-ili-bootstrap/">Boilerplate или Bootstrap – что выбирать при создании проекта?</a></li> <li class="page_item page-item-4265"><a href="https://mpbox.ru/uncensored/google-arcade-fire-kak-soedinit-tehnologii-i-iskusstvo/">Google и Arcade Fire: как соединить технологии и искусство</a></li> <li class="page_item page-item-4272"><a href="https://mpbox.ru/uncensored/mac-vs-pc-2/">Mac vs PC. Часть 2.</a></li> <li class="page_item page-item-5832"><a href="https://mpbox.ru/uncensored/tron-html5-comics/">Tron — эффектный комикс на HTML5</a></li> <li class="page_item page-item-4292"><a href="https://mpbox.ru/uncensored/windows7-glazami-usera/">Windows 7 глазами пользователя</a></li> <li class="page_item page-item-4291"><a href="https://mpbox.ru/uncensored/windows-and-mac-about-chome-os/">Windows и Mac о Chrome OS</a></li> <li class="page_item page-item-4283"><a href="https://mpbox.ru/uncensored/the-future-has-begun/">Будущее началось</a></li> <li class="page_item page-item-4289"><a href="https://mpbox.ru/uncensored/vzglyad-userra-na-brauseri/">Взгляд одного пользователя на современные браузеры</a></li> <li class="page_item page-item-4288"><a href="https://mpbox.ru/uncensored/voyna-brauzerov-v-kartinkah/">Война браузеров в картинках</a></li> <li class="page_item page-item-4262"><a href="https://mpbox.ru/uncensored/fantasy-back/">Волшебный фон на CSS</a></li> <li class="page_item page-item-4259"><a href="https://mpbox.ru/uncensored/css3-gallery/">Галерея на чистом CSS</a></li> <li class="page_item page-item-4269"><a href="https://mpbox.ru/uncensored/it-car/">Если бы IT-компании делали автомобили</a></li> <li class="page_item page-item-4267"><a href="https://mpbox.ru/uncensored/interview-lidery-mirivoj-indystrii-online-igr-o-html5-flash/">Интервью: Лидеры мировой индустрии онлайн игр об HTML5, Flash и своих планах на будущее</a></li> <li class="page_item page-item-4268"><a href="https://mpbox.ru/uncensored/interview-marcin-wichary-creator-of-google-pacman-logo-html5-slide-deck/">Интервью: Марчин Вичери — создатель Google Pacman Logo, HTML5 Slide Deck и других интересных вещей</a></li> <li class="page_item page-item-4266"><a href="https://mpbox.ru/uncensored/internet-and-social-network/">Интернет и соц сети</a></li> <li class="page_item page-item-4270"><a href="https://mpbox.ru/uncensored/kak-delautsya-sayti-umor/">Как делаются сайты (юмор)</a></li> <li class="page_item page-item-4264"><a href="https://mpbox.ru/uncensored/good-code/">Как написать хороший код</a></li> <li class="page_item page-item-5168"><a href="https://mpbox.ru/uncensored/site-development-4/">Как происходит разработка сайта — бэкенд-фреймворки (часть 4)</a></li> <li class="page_item page-item-4281"><a href="https://mpbox.ru/uncensored/site-development-3/">Как происходит разработка сайта (часть 3) Фронтенд-фреймворки</a></li> <li class="page_item page-item-4271"><a href="https://mpbox.ru/uncensored/kak-uluchshit-cache-v-brauzere/">Как улучшить кэширование в браузере?</a></li> <li class="page_item page-item-4278"><a href="https://mpbox.ru/uncensored/realii-iz-gzizni-it/">Какая она — реальная жизнь айтишника</a></li> <li class="page_item page-item-4282"><a href="https://mpbox.ru/uncensored/social-network-heaven/">Комикс «Социальная сеть в Раю»</a></li> <li class="page_item page-item-4273"><a href="https://mpbox.ru/uncensored/multilevel-cusel-discus/">Многоуровневый cuSel. Быть или не быть?</a></li> <li class="page_item page-item-4274"><a href="https://mpbox.ru/uncensored/na-pensii/">На пенсии (комикс)</a></li> <li class="page_item page-item-4275"><a href="https://mpbox.ru/uncensored/naglyadnoe-poyasnenie-znacheniy-css-vertical-align/">Наглядное пояснение значений CSS свойства vertical-align</a></li> <li class="page_item page-item-4276"><a href="https://mpbox.ru/uncensored/neskuchne-html-forms/">Нескучные HTML формы</a></li> <li class="page_item page-item-4263"><a href="https://mpbox.ru/uncensored/find-cutext/">Нестандартный textarea: в поисках решения</a></li> <li class="page_item page-item-4277"><a href="https://mpbox.ru/uncensored/perevod-intervyu-s-erikom-meyerom/">Перевод интервью с Эриком Майером (Eric Meyer)</a></li> <li class="page_item page-item-4260"><a href="https://mpbox.ru/uncensored/css3-song/">Песня о CSS3</a></li> <li class="page_item page-item-4290"><a href="https://mpbox.ru/uncensored/why-appeared-html5/">Почему появился HTML5</a></li> <li class="page_item page-item-4279"><a href="https://mpbox.ru/uncensored/site-development-1/">Разработка сайта (часть 1)</a></li> <li class="page_item page-item-4280"><a href="https://mpbox.ru/uncensored/site-development-2/">Разработка сайта (часть 2)</a></li> <li class="page_item page-item-4254"><a href="https://mpbox.ru/uncensored/advertising-antidote-for-workaholics/">Реклама противоядия для трудоголиков или что такое подработка</a></li> <li class="page_item page-item-4255"><a href="https://mpbox.ru/uncensored/after-before-syntax/">Синтаксис псевдоэлементов :after и :before</a></li> <li class="page_item page-item-4284"><a href="https://mpbox.ru/uncensored/the-modern-approach-to-web-standards/">Современный подход к веб-стандартам</a></li> <li class="page_item page-item-4285"><a href="https://mpbox.ru/uncensored/top-5-mistakes-of-massive-css/">Топ 5 ошибок массивных CSS</a></li> </div> </div> </section> </article> </main> <footer id="colophon" class="site-footer" itemscope itemtype="http://schema.org/WPFooter"> <div class="container"> <div class="footer-grid"> <div class="footer-col"> <div class="footer-title">О проекте MpBox</div> <p class="footer-desc"> Профессиональный справочник по HTML, CSS и JavaScript. Мы помогаем разработчикам создавать быстрые, семантически верные и адаптивные сайты. </p> <div class="social-links"> <a href="https://t.me/usefuls_tips" target="_blank" rel="noopener noreferrer" aria-label="Telegram"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4.104 11.533s7.96-3.293 10.721-4.453a441 441 0 0 1 4.648-1.948s1.657-.649 1.519.928c-.046.65-.414 2.922-.783 5.38-.552 3.478-1.15 7.281-1.15 7.281s-.092 1.067-.874 1.252-2.071-.649-2.301-.834c-.184-.14-3.451-2.227-4.648-3.247-.322-.278-.69-.835.046-1.484a176 176 0 0 0 4.832-4.638c.552-.556 1.104-1.855-1.196-.278-3.268 2.272-6.489 4.406-6.489 4.406s-.736.464-2.117.046-2.99-.974-2.99-.974-1.105-.695.782-1.437"></path></svg> </a> <a href="https://github.com/khpvo" target="_blank" rel="noopener noreferrer" aria-label="GitHub"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg> </a> <a href="#" target="_blank" rel="noopener noreferrer" aria-label="VK"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4v-9h4v4.5l.03 0a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5l-.03 -.008"></path></svg> </a> </div> <div class="footer-about"><a href="/about/">О нас</a> <a href="/site-map/">Карта сайта</a></div> </div> <div class="footer-col"> <div class="footer-title">Разделы справочника</div> <ul class="footer-menu"> <li><a href="/manuals/html/">HTML Справочник</a></li> <li><a href="/manuals/css/">CSS Справочник</a></li> <li><a href="/collect/js-plugins/">JavaScript (JS)</a></li> <li><a href="/collect/html-and-css-tricks/">Приемы верстки</a></li> </ul> </div> <div class="footer-col"> <div class="footer-title">Инструменты</div> <ul class="footer-menu"> <li><a href="/services/">Онлайн сервисы</a></li> <li><a href="/terms/">Словарь терминов</a></li> <li><a href="/training/">Уроки для новичков</a></li> </ul> </div> <div class="footer-col"> <div class="footer-title">Обучение</div> <ul class="footer-menu"> <li><a href="/learn/html/">Уроки HTML</a></li> <li><a href="/learn/css/">Обучение CSS</a></li> <li><a href="/learn/javascript/">Уроки javascript</a></li> <li><a href="/learn/tegofenshuj/">Уроки верстки</a></li> </ul> </div> </div> <div class="footer-bottom"> <div class="copyright"> © 2009-2026 MpBox.ru. Все права защищены. </div> <div class="footer-meta"> <a href="/privacy-policy/">Политика конфиденциальности</a> </div> </div> </div> </footer> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/mpbox/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="mpbox-navigation-js" src="https://mpbox.ru/wp-content/themes/mpbox/js/navigation.js?ver=1.0.1"></script> <script> function toHex(form) { num = parseInt(form.num.value); form.hex.value = num.toString(16); if(form.num.value!=''&&form.num.value!='NaN'&&form.hex.value!='NaN') jQuery('#result').replaceWith('<div id="result">&#'+form.num.value+'</div>'); } document.addEventListener("DOMContentLoaded", function () { // Copy to clipboard logic function copyToClipboard(element) { var temp = document.createElement("textarea"); temp.value = element.parentNode.nextElementSibling.textContent; document.body.appendChild(temp); temp.select(); document.execCommand("copy"); document.body.removeChild(temp); var added = document.createElement("i"); added.classList.add("added"); added.textContent = "Copied..."; element.appendChild(added); setTimeout(function () { var added = document.querySelector(".added"); if(added) added.parentNode.removeChild(added); }, 2000); } var boxElements = document.querySelectorAll(".selectCode"); for (var i = 0; i < boxElements.length; i++) { boxElements[i].addEventListener("click", function(e) { e.preventDefault(); copyToClipboard(this); }); } // Mobile menu toggle const menuToggle = document.querySelector('.menu-toggle'); const nav = document.querySelector('.main-navigation'); if(menuToggle) { menuToggle.addEventListener('click', function() { nav.classList.toggle('toggled'); const expanded = this.getAttribute('aria-expanded') === 'true' || false; this.setAttribute('aria-expanded', !expanded); }); } const toggleBtn = document.querySelector('.btn-toggle-children'); if (toggleBtn) { toggleBtn.addEventListener('click', function() { const ul = this.previousElementSibling; const isExpanded = this.getAttribute('aria-expanded') === 'true'; ul.classList.toggle('expanded'); this.setAttribute('aria-expanded', !isExpanded); this.textContent = isExpanded ? 'Показать все разделы' : 'Скрыть'; }); } const headers = document.querySelectorAll('.kb-item-header'); headers.forEach(header => { header.addEventListener('click', function() { const item = this.closest('.kb-item'); const isActive = item.classList.contains('active'); document.querySelectorAll('.kb-item.active').forEach(el => { el.classList.remove('active'); }); if (!isActive) { item.classList.add('active'); } }); }); const firstItem = document.querySelector('.kb-item'); if (firstItem) { firstItem.classList.add('active'); } }); </script> </body> </html>