[metatags] Верстка [/metatags]
AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen
Защита снята
RIP
Все права соблюдены
Верстка
- HTML (1991–1993)
<html> <head> <title> </title> </head> <body> </body>
<h1>–<h6> <p> <a> <br> <hr> <img> - HTTP и браузеры
<a href="…" > - Формы HTML (HTML 2.0, 1995)
<form> <input> <textarea> <button> <select> <option> <label> <fieldset> <legend> - Таблицы (HTML 3.2, 1997)
<table> <tr> <td> <th> <caption> <col> <colgroup> - CSS (1996–1997)
нет новых тегов, но существовали <font> <center> <b> <i> - jаvascript (1995)
<script> - HTML 4 / XHTML (1997–2000)
<div> <span> <strong> <em> <ul> <ol> <li> <blockquote>
<cite> <abbr> <acronym> <img> <object> <embed> <iframe>
<link> <meta> <style> <script> <noscript> - HTML5 (2014)
<header> <footer> <nav> <article> <section> <aside> <figure>
<figcaption> <main> <mark> <time> <progress> <meter> <canvas>
<video> <audio> <source> <track> <output> <details> <summary>
<dialog> - Современные вспомогательные и семантические
<template> <slot> <picture> <map> <area> <menu> <menuitem>
<bdi> <bdo> <wbr> <data>
<br>
- 1995 — Появление jаvascript
- Разработан Бренданом Эйхом в Netscape
- Первоначальное название: Mocha → LiveScript → jаvascript
- Поддержка в браузере Netscape Navigator 2
- Теги: <script>
- 1996 — Первый стандарт
- jаvascript 1.1 в Netscape, JScript 1.0 в IE
- Появление условных операторов, циклов, функций
- 1997 — ECMAScript 1
- Первый официально стандартизированный стандарт ECMA-262
- Основы синтаксиса и типов данных
- 1998 — ECMAScript 2
- Небольшие исправления стандарта
- 1999 — ECMAScript 3
- Полезные новшества: try/catch, регулярные выражения, улучшенные строки и массивы
- Широкая поддержка браузерами
- 2000–2005 — Активное расширение
- AJAX (Asynchronous jаvascript and XML)
- Динамическое обновление страниц без перезагрузки
- Популяризация jаvascript в веб-приложениях
- 2005 — jQuery и DOM библиотеки
- jQuery упрощает работу с DOM, событиями, анимациями
- Начало массового использования JS в интерактивных сайтах
- 2009 — ECMAScript 5
- «use strict», методы массивов (forEach, map, filter), JSON встроенно
- 2015 — ECMAScript 6 / ES2015
- let/const, стрелочные функции, классы, модули, шаблонные строки, деструктуризация
- 2016–2023 — ES2016+ и современный jаvascript
- Async/await (ES2017)
- Spread/rest, Promise, Map/Set, WeakMap, WeakSet
- Optional chaining, nullish coalescing (ES2020)
- Современные фреймворки: React, Vue, Angular, Svelte
- Node.js и серверная JS среда
- TypeScript как надстройка над JS1. CSS
1 1996
- первый стандарт w3c
- базовые стили текста font-family font-size font-style font-weight font-variant line-height text-align text-decoration text-indent text-transform letter-spacing word-spacing white-space
- цвета и фоны color background-color background-image background-repeat background-attachment background-position
- отступы и блоки margin padding border border-width border-style border-color width height float clear
- простые селекторы tag p h1 div класс .class id #id потомок div p группировка h1 h2 h3 псевдоклассы a:link a:visited a:hover a:active
- без адаптивности
- CSS 2 1998
- позиционирование absolute relative fixed position top right bottom left
- z-index
- media types print screen @media
- псевдоэлементы before after first-line first-letter
- табличная модель border-collapse border-spacing caption-side empty-cells table-layout
- реализация браузерами нестабильная
- CSS 2.1 2011
- стабилизация css2
- очистка от неподдерживаемых частей
- нормализация box model
- долгое время база верстки
- CSS3 эпоха модулей 2009–2015
- css разделён на независимые модули
- массовое расширение возможностей
- ключевые нововведения:
- border-radius
- box-shadow
- text-shadow
- gradients
- rgba hsla
- @font-face
- media queries адаптив
- multiple backgrounds
- transforms 2d
- transitions
- animations keyframes
- flexbox ранний
- Flexbox финализация 2017
- единая модель выравнивания
- простое вертикальное центрирование
- удобные гибкие контейнеры
- широкая поддержка браузерами
- CSS Grid 2017
- двумерная система сеток
- управление строками и колонками
- замена float и table-layout
- точное позиционирование элементов
- Современный CSS 2019–2025
- css превращается в мощную систему лэйаута и логики
- ключевые возможности:
- custom properties var()
- calc clamp min max
- aspect-ratio
- object-fit
- scroll-snap
- backdrop-filter
- container queries
- subgrid
- :is :where :has
- logical properties
- native nesting 2023+
- color-mix
- цветовые пространства lab lch oklab
в 2026 нового в вебе немного по тегам и синтаксису
новое больше в архитектуре и возможностях
css
container queries стали стандартом
native nesting повсеместно
color-mix и расширенные цветовые модели используют в проде
subgrid наконец стабильно везде
scroll-driven animations начинают заменять часть js анимаций
jаvascript
top level await везде
import maps массово используются без сборщиков
server side rendering с гидрацией заменяется частично на server components
edge runtime становится нормой
браузеры
webgpu становится реальной заменой webgl в тяжелой графике
offscreen canvas активно используется
wasm используют для игр и тяжелых вычислений
архитектура
frontend меньше про страницы больше про приложения
api first почти везде
backend и frontend часто один кодовый слой
ui
интерфейсы становятся реактивными по умолчанию
меньше ручного dom
больше декларативных систем
главное изменение
не новые теги
а переход от статического веба к вычислительной среде где интерфейс генерируется и адаптируется в реальном времени
⸸─⸸─⸸─⸸─⸸─⸸─⸸⸸─⸸─⸸─⸸─⸸─⸸─⸸⸸─⸸─⸸─⸸─⸸─⸸─⸸⸸─⸸─⸸─⸸─⸸─⸸─⸸─⸸─⸸─⸸─⸸⸸─⸸─⸸─⸸─⸸─⸸─⸸⸸─⸸─⸸─⸸─⸸─⸸─⸸⸸─⸸─⸸─⸸─⸸─⸸─⸸⸸─⸸─⸸─⸸─⸸─⸸─⸸