<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример страницы с текстом и изображением</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.image-container {
text-align: center;
margin: 30px 0;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
h1 {
color: #2c3e50;
text-align: center;
border-bottom: 3px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #34495e;
margin-top: 30px;
}
h3 {
color: #7f8c8d;
}
p {
margin-bottom: 15px;
text-align: justify;
}
.highlight {
background-color: #fff3cd;
padding: 15px;
border-left: 4px solid #ffc107;
margin: 20px 0;
border-radius: 4px;
}
.quote {
font-style: italic;
color: #666;
border-left: 3px solid #ddd;
padding-left: 20px;
margin: 20px 0;
}
.code {
background-color: #f8f9fa;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
border: 1px solid #e9ecef;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f8f9fa;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
ul, ol {
margin: 15px 0;
padding-left: 30px;
}
li {
margin-bottom: 8px;
}
.footer {
text-align: center;
margin-top: 40px;
color: #666;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="container">
<h1>Исследование современных технологий веб-разработки</h1>
<div class="image-container">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&auto=format&fit=crop&q=60"
alt="Пример изображения технологий"
width="800"
height="400">
<p><em>Рисунок 1: Современные технологии веб-разработки</em></p>
</div>
<h2>Введение в современные фреймворки</h2>
<p>Современная <strong>веб-разработка</strong> претерпела значительные изменения за последнее десятилетие.
Появление таких фреймворков, как <mark>React</mark>, <mark>Vue.js</mark> и <mark>Angular</mark>,
кардинально изменило подход к созданию пользовательских интерфейсов.</p>
<div class="highlight">
<strong>Важно:</strong> Выбор правильного фреймворка зависит от конкретных требований проекта,
опыта команды и масштабируемости приложения.
</div>
<h3>Сравнение популярных фреймворков</h3>
<table>
<thead>
<tr>
<th>Фреймворк</th>
<th>Год выпуска</th>
<th>Особенности</th>
<th>Сложность</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>React</strong></td>
<td>2013</td>
<td>Virtual DOM, компонентный подход</td>
<td>Средняя</td>
</tr>
<tr>
<td><strong>Vue.js</strong></td>
<td>2014</td>
<td>Прогрессивный, легкий в изучении</td>
<td>Низкая</td>
</tr>
<tr>
<td><strong>Angular</strong></td>
<td>2016</td>
<td>Полнофункциональный, TypeScript</td>
<td>Высокая</td>
</tr>
</tbody>
</table>
<h2>Ключевые преимущества компонентного подхода</h2>
<p>Компонентная архитектура предлагает множество преимуществ:</p>
<ul>
<li><strong>Переиспользование кода</strong> - компоненты можно использовать многократно</li>
<li><strong>Изоляция</strong> - каждый компонент независим от других</li>
<li><strong>Тестируемость</strong> - упрощает unit-тестирование</li>
<li><strong>Масштабируемость</strong> - легко добавлять новые функции</li>
</ul>
<div class="quote">
"Компонентный подход позволяет разбить сложные интерфейсы на простые,
reusable компоненты, что значительно упрощает разработку и поддержку."
- Джон Доу, Senior Frontend Developer
</div>
<h2>Пример кода компонента</h2>
<div class="code">
// Пример React компонента
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>
Нажми меня
</button>
</div>
);
}
export default Counter;
</div>
<h3>Лучшие практики разработки</h3>
<ol>
<li>Используйте семантическую верстку</li>
<li>Оптимизируйте производительность</li>
<li>Пишите чистый и читаемый код</li>
<li>Тестируйте свои компоненты</li>
<li>Следуйте принципам доступности (a11y)</li>
</ol>
<h2>Заключение</h2>
<p>Современные <em>фреймворки</em> и <em>библиотеки</em> предоставляют мощные инструменты
для создания сложных веб-приложений. Однако важно помнить, что инструменты -
это всего лишь средства, а успех проекта зависит от правильного архитектурного
подхода и опыта разработчиков.</p>
<p>Будущее веб-разработки выглядит promising с появлением новых технологий,
таких как <a href="https://webassembly.org/" target="_blank">WebAssembly</a>
и прогрессивных веб-приложений (PWA).</p>
<div class="footer">
<p>© 2024 Исследование веб-технологий. Все права защищены.</p>
<p>Последнее обновление: 19 января 2024</p>
</div>
</div>
</body>
</html>
Читать дальше...
