Html manual: Справочник по HTML | htmlbook.ru

Содержание

Вставка простого кода HTML

Help & Manual 4 поддерживает очень много мощных особенностей
форматирования, так что Вы обычно не будете должны делать
собственные добавления. Однако, если Вы действительно должны
добавить специальные особенности или форматирование кодом HTML или
сценариями, Вы можете сделать это с этой функцией. Например, Вы
можете написать динамический код HTML с JavaScript, чтобы добавить
расширяемые секции или другие динамические особенности к вашим
разделам.

Эта функция «вводит» код HTML в ваш раздел в пункте, где Вы
вставляете его. Код — полностью ваша
ответственность и не проверяется или анализируется Help &
Manual никогда, таким образом Вы должны быть знакомы с кодом
HTML.

Простой код HTML поддерживается только в Справке HTML (.CHM), Броузерной справке (HTML) и Справке
Visual Studio (MS Help 2.0). Он полностью игнорируется во всех
других форматах, включая Help
& Manual eBook (eBook отформатированы HTML, но не включают
полные функциональные возможности броузера).

·	Отметьте, что, если Вы хотите использовать эту особенность в проектах, которые будут также компилироваться в форматы, где это не поддерживается, Вы должны использовать особенности условного вывода Help & Manual, чтобы создать альтернативный текст для этих версий.

Как вставлять
простой HTML код в раздел:

1.	Нажмите в редакторе в пункте, где Вы хотите вставить простой HTML код и выберите кнопку в Инструментальной панели или выберите в меню .

2.	Введите ваш код в отображенном окне редактирования. Вы можете изменить размеры окна для более простого редактирования, оттянув нижний правый угол.

Функции

Вы можете изменить размеры
объекта кода HTML в редакторе Help & Manual, перетаскивая его
углы. Это позволяет Вам видеть больше содержимого объекта в
редакторе, фактически не открывая его.

Ссылка на внешние
файлы в простом коде HTML:

Если Вы
ссылаетесь на внешние файлы в вашем простом коде HTML, Вы полностью
ответственны за то, что файлы включены в ваш вывод. Help &
Manual не анализирует или проверяет код и не будет делать этого для
Вас. Есть два способа удостовериться, что ссылаемые файлы включены
в ваш проект:

Добавьте
файлы к секции Багажа:

Это — самое
простое решение. Новая функция Багаж Help & Manual 4
предоставляет быстрый и простой способ объединить внешние файлы в
вашем проекте и удостовериться, что они доступны для компилятора и
включены в ваш вывод.

·	См. Ссылки на графику для большего количества деталей относительно ссылки на графические файлы. Так как графические файлы являются часто большими, это — не всегда хорошая идея, чтобы добавлять их к Багажу.

Вручную
объедините файлы в вашем выводе:

·	В Броузерной справке Вы должны вручную скопировать файлы в ваш каталог вывода, если Вы не добавили их к секции Багажа (см. выше).

·	В Справке HTML Вы должны сказать компилятору включать файлы в .CHM. Продолжите следующим образом:

1.	Скопируйте внешний файл(ы) в ваш проектный каталог (каталог, содержащий ваш файл проекта .HMX).

3.	В поле редактирования добавьте следующие входы:

[FILES]
..\donald.js
..\mickey.asp

Не добавляйте второй
заголовок [FILES], если он уже
существует. Введите каждое имя внешнего файла в отдельной строке
ниже заголовка [FILES]
и предваряя его ссылкой относительного
пути ..\ . (Это
необходимо, потому что проект компилируется из временного
подкаталога в проектном каталоге, таким образом файлы в проектном
каталоге — на один уровень выше.)

См. также:

Вставка сценария и ссылок
макрокоманды

Использование шаблонов
HTML

Сценарии,
HTML и макросы

Броузерная справка (Свойства
проекта)

Использование файлов Багажа

Ссылки на графику

Введение: знакомство с React – React

Вам не обязательно знать React, чтобы проходить это введение.

Прежде чем начать

В этом введении мы будем постепенно создавать небольшую игру. Возможно, вы захотите пропустить его, потому что не разрабатываете игры, но вам стоит попробовать. Подходы, которые вы изучите в этом введении, являются основополагающими для создания любого React-приложения. Их освоение даст вам глубокое понимание React.

Совет
Это введение рассчитано на людей, которые предпочитают учиться на практике. Если вам больше нравится изучать предмет от начала до конца, то начните с пошагового руководства. Введение и руководство в чём-то дополняют друг друга.

Введение состоит из нескольких разделов:

Вам не обязательно проходить все части сразу, чтобы получить пользу от этого введения. Изучите столько, сколько можете, даже если это будет один или два раздела.

Что мы собираемся писать?

В этом введении мы покажем как создать интерактивную игру крестики-нолики на React.

Результат вы можете посмотреть здесь — готовая игра. Если вы не очень хорошо понимаете код, или вы не знакомы с синтаксисом, не беспокойтесь. Цель этого введения — помочь разобраться с React и его синтаксисом.

Мы советуем вам поиграть в крестики-нолики, прежде чем продолжите чтение. Одна из особенностей, которую вы можете заметить — это нумерованный список справа от игрового поля. Этот список отображает историю всех игровых ходов и обновляется по мере игры.

Вы можете закрыть игру в крестики-нолики, как только познакомитесь с ней. Мы начнём с простой заготовки. Следующим шагом мы настроим окружение, чтобы вы могли начать создание игры.

Предварительные требования

Мы предполагаем, что вы немного знакомы с HTML и JavaScript. Однако, вы сможете изучать введение, даже если знакомы только с другими языками программирования. Мы также полагаем, что вы знакомы с такими понятиями программирования как функции, объекты, массивы и, в меньшей степени, классы.

Если вам нужно повторить основы JavaScript, мы рекомендуем прочитать вот этот учебник. Обратите внимание, что мы используем некоторые особенности из ES6 (последней версии JavaScript), такие как стрелочные функции, классы, операторы let и const. Вы можете воспользоваться Babel REPL, чтобы узнать во что компилируется ES6-код.

Настройка окружения

Есть два варианта прохождения практической части — вы можете писать код в браузере, либо настроить окружение для разработки на компьютере.

Вариант 1: Пишем код в браузере

Это самый быстрый способ для старта.

Для начала откройте эту Заготовку в новой вкладке. Вы увидите пустое поле для игры в крестики-нолики и код на React, который мы будем постепенно изменять.

Можете пропустить следующую часть и перейти к Обзору React.

Вариант 2: Локальное окружение для разработки

Это не является обязательным и не требуется этим вводным руководством!

Опционально: Инструкции для написания кода в вашем любимом редакторе

Эти настройки потребуют больше работы, но позволят продолжить разработку с использованием вашего любимого редактора. Вот что нужно сделать:

Убедиться, что у вас установлена последняя версия Node.js.
Выполнить инструкции по установке Create React App для создания нового проекта.

npx create-react-app my-app

Удалить все файлы в папке src/ нового проекта.

Примечание:
Не удаляйте саму папку src, только файлы внутри неё. Следующим шагом мы заменим стандартные файлы нашими примерами.

cd my-app
cd src


rm -f *


del *


cd ..

Создайте файл с именем index.css в папке src/ и добавьте в него вот этот CSS код.
Создайте файл с именем index.js в папке src/ и добавьте в него этот JS код.
В начало файла index.js в папкеsrc/ добавьте следующие три строчки:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Теперь, когда вы запустите npm start в папке проекта и откроете http://localhost:3000 в браузере, вы должны увидеть пустое поле для крестиков-ноликов.

Мы рекомендуем выполнить эти инструкции для настройки подсветки синтаксиса в вашем редакторе.

Помогите, я застрял!

Если вы застряли — обратитесь к сообществу. В частности Чат Reactiflux — это прекрасное место, где вам помогут. Если вы не дождались ответа или всё ещё не решили своей проблемы, пожалуйста, задайте вопрос, и мы вам поможем.

Обзор

Теперь, когда вы готовы, перейдём к рассмотрению React!

Что такое React?

React — это декларативная, эффективная и гибкая JavaScript библиотека для создания пользовательских интерфейсов. Она позволяет вам собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».

React имеет несколько разных видов компонентов, но мы начнём с подклассов React.Component:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Список покупок для {this.props.name}</h2>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

Скоро мы перейдём к этим забавным, похожим на XML, тегам. Мы используем компоненты, чтобы сообщить React, что мы хотим увидеть на экране. Каждый раз, когда наши данные меняются, React эффективно обновляет и повторно рендерит наши компоненты.

ShoppingList является примером классового компонента React. Компонент принимает параметры, которые называются пропсами (props, сокращение от properties — свойства), и возвращает из метода render() иерархию представлений для отображения.

Метод render возвращает описание того, что вы хотите увидеть на экране. React берёт это описание и отображает результат. Если точнее, render возвращает React-элемент, который является легковесным описанием того, что нужно отрендерить. Большинство React-разработчиков используют специальный синтаксис под названием «JSX» для упрощения описания структуры. Во время компиляции синтаксис <div /> преобразовывается в React.createElement('div'). Пример выше равнозначен вот этому:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', ),
  React.createElement('ul', )
);

Смотрите полную версию.

Если вам интересно, то createElement() более подробно описан в справочнике API, однако, мы не будем им пользоваться в этом введении. Вместо этого мы продолжим использовать JSX.

JSX обладает всей мощью JavaScript. В JSX вы можете использовать любые JavaScript-выражения внутри фигурных скобок. Каждый React-элемент является JavaScript-объектом, который можно сохранить в переменную или использовать внутри программы.

Приведённый выше компонент ShoppingList рендерит только встроенные DOM-компоненты вроде <div /> или <li />. Но вы также можете создавать и рендерить собственные компоненты. Например, теперь вы можете ссылаться на весь компонент со списком покупок, написав <ShoppingList />. Каждый React-компонент инкапсулирован и может использоваться независимо. Это позволяет создавать сложный UI из простых компонентов.

Разберёмся со стартовым кодом

Если вы собираетесь работать над практической частью в вашем браузере, откройте этот код в новой вкладке начальный код. Если вы собираетесь работать над практикумом локально, откройте src/index.js в папке вашего проекта (вы уже использовали этот файл в разделе настройки).

Этот стартовый код — база, с которой мы начнём разработку. Мы будем использовать готовые CSS-стили, чтобы сосредоточиться на изучении React и написании игры крестики-нолики.

Изучив код, вы обнаружите три React-компонента:

Square (Клетка)
Board (Поле)
Game (Игра)

Компонент Board рендерит 9 компонентов Square, каждый из которых рендерит по одному элементу <button>. Компонент Game рендерит поле c заглушками, которые мы изменим позже. Пока у нас нет ни одного интерактивного компонента.

Передача данных через пропсы

Для начала давайте попробуем передать некоторые данные из нашего компонента Board в компонент Square.

Настоятельно рекомендуем набирать код самостоятельно, а не копировать его и вставлять. Это упрощает понимание и развивает мышечную память.

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Изменим метод render внутри Square, заменив {/* TODO */} на {this.props.value}:

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

До:

После: Вы должны увидеть число внутри каждого отрендеренного квадрата.

Посмотреть полный код этого шага

Поздравляем! Вы только что «передали проп» из родительского компонента Board в дочерний компонент Square.
Передача пропсов это то, как данные в React-приложениях «перетекают» от родительских компонентов к дочерним.

Добавим взаимодействие с компонентом

Попробуем при клике на компонент Square ставить «X».
Вначале изменим тег кнопки, который возвращается из метода render() компонента Square:

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { console.log('клик'); }}>        {this.props.value}
      </button>
    );
  }
}

Теперь, если вы кликнете по Square, то увидите «клик» в консоли инструментах разработки браузера.

Примечание
Чтобы избежать странного поведения this, мы будем использовать синтаксис стрелочных функций для обработчиков событий (здесь и ниже):
class Square extends React.Component {
 render() {
 return (
 <button className="square" onClick={() => console.log('клик')}> {this.props.value}
 </button>
 );
 }
}

Обратите внимание что в onClick={() => console.log('клик')}, мы передаём функцию в качестве значения пропа onClick. React вызовет эту функцию при клике. Пропуск () => и запись onClick={console.log('клик')}довольно распространённая ошибка. Такой код будет выдавать сообщение при каждом перерендере.

Следующим шагом мы хотим, чтобы компонент Square «запоминал», что по нему кликнули и поставили «X».
Для «запоминания» компоненты используют состояние.

Компоненты React могут получить состояние, устанавливая this.state в конструкторе. this.state должно рассматриваться как приватное свойство React-компонента, определяемое им самим. Давайте сохраним текущее значение Square в this.state и изменим его при клике.

Сперва добавим конструктор к классу, чтобы инициализировать состояние:

class Square extends React.Component {
  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {
    return (
      <button className="square" onClick={() => console.log('клик')}>
        {this.props.value}
      </button>
    );
  }
}

Примечание
В JavaScript-классах вам всегда нужно вызывать super при объявлении конструктора подкласса. Все классовые React-компоненты, у которых есть constructor, должны начинаться с вызова super(props).

Теперь изменим метод render компонента Square для отображения текущего значения из состояния при клике:

Заменим this.props.value на this.state.value внутри тега <button>.
Заменим обработчик onClick={...} на onClick={() => this.setState({value: 'X'})}.
Поместим свойства className и onClick на разных строчках для лучшей читабельности.

После этих изменений тег <button>, возвращаемый из метода render компонента Square, будет выглядеть так:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"        onClick={() => this.setState({value: 'X'})}      >
        {this.state.value}      </button>
    );
  }
}

Вызывая this.setState из обработчика onClick (как это описано в методе render), мы говорим React, что нужно перерендерить Square при каждом клике по <button>. После обновления, this.state.value внутри Square станет X, поэтому на игровом поле мы увидим X. Если вы кликните по любому Square, должен появиться X.

Когда вы вызываете setState внутри компонента, React так же автоматически обновляет дочерние компоненты.

Посмотреть полный код этого шага

Инструменты разработки

Расширение React Devtools для Chrome и Firefox позволяет вам изучать дерево React-компонентов внутри панели инструментов разработчика вашего браузера.

Расширение React DevTools позволяет просматривать пропсы и состояние ваших React-компонентов.

После установки React DevTools, вы можете кликнуть правой кнопкой мыши на любой элемент страницы и нажать Inspect (Просмотреть код), чтобы открыть инструменты разработчика. Вкладки React («⚛️ Components» и «⚛️ Profiler») появятся справа. Используйте вкладку «⚛️️ Components» для просмотра дерева компонентов.

Внимание, чтобы это работало на CodePen нужно сделать ещё несколько действий:

Войти или зарегистрироваться и подтвердить вашу электронную почту (требуется для защиты от спама).
Нажать кнопку «Fork».
Нажать «Change View» и выбрать «Debug mode».
В открывшейся новой вкладке у вас должны появиться инструменты разработчика.

Создание игры

Теперь у нас есть базовые элементы для создания игры крестики-нолики. Для полноценной игры нам необходимо реализовать поочерёдное размещение «X» и «O», а также способ определения победителя.

Подъём состояния

Сейчас каждый компонент Square хранит в себе состояние игры. Для выявления победителя мы будем хранить значение всех 9 клеток в одном месте.

Возможно, вы предполагали, что Board просто запросит у каждого Square его состояние. Хотя такой подход в React возможен, мы его не одобряем. Из-за этого код становится трудным, провоцирует ошибки и усложняет рефакторинг. Вместо этого, лучшим решением будет хранение состояния игры в родительском компоненте Board, а не в каждом отдельном Square. Компонент Board может указывать каждому Square, что именно нужно отобразить, передавая проп. Мы так уже делали, когда передавали число в каждую клетку.

Чтобы собрать данные из нескольких дочерних элементов, или чтобы дать возможность двум компонентам общаться, вам нужно объявить общее состояние внутри родительского компонента. Родительский компонент может передать состояние обратно дочерним элементам с помощью пропсов. Это поддерживает синхронизацию дочерних компонентов друг с другом и с родительским компонентом.

Подъём состояния в родительский компонент — обычное дело при рефакторинге React-компонентов. Давайте воспользуемся случаем и попробуем это сделать.

Добавим конструктор к компоненту Board и установим начальное состояние в виде массива из 9 элементов, заполненного значениями null. Эти 9 элементов соответствуют 9 квадратам:

class Board extends React.Component {
  constructor(props) {    super(props);    this.state = {      squares: Array(9).fill(null),    };  }
  renderSquare(i) {
    return <Square value={i} />;
  }

Позже, при заполнении поля, массив this.state.squares будет выглядеть примерно так:

[
  'O', null, 'X',
  'X', 'X', 'O',
  'O', null, null,
]

Метод renderSquare внутри Board сейчас выглядит так:

  renderSquare(i) {
    return <Square value={i} />;
  }

Вначале мы передали из Board проп value вниз, чтобы отобразить номера от 0 до 8 внутри каждого Square. На другом шаге мы заменили числа знаком «X», определённом в собственном состоянии Square. Именно поэтому сейчас Square игнорирует проп value, переданный в него из Board.

Мы снова воспользуемся механизмом передачи пропсов. Изменим Board, чтобы передать каждому Square его текущее значение ('X', 'O' или null). Мы уже определили массив squares в конструкторе Board. Давайте изменим метод renderSquare, чтобы читать данные из этого массива:

  renderSquare(i) {
    return <Square value={this.state.squares[i]} />;  }

Посмотреть полный код этого шага

Теперь каждый Square получает проп value, который будет, либо 'X' или 'O', либо null для пустых клеток.

Дальше нам нужно поменять то, что происходит при клике на Square. Теперь компонент Board хранит информацию о заполненных клетках. Нам нужен способ, которым Square сможет обновлять состояние Board. Поскольку состояние является приватным для компонента, где оно определено, мы не можем обновить состояние Board напрямую из Square.

Вместо этого, давайте передадим из Board в Square функцию, и будем её вызывать из Square, когда по тому кликнули. Изменим метод renderSquare в Board-компоненте на:

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}      />
    );
  }

Примечание
Мы разбили возвращаемый элемент на несколько строк для удобства чтения и добавили скобки, чтобы JavaScript не вставлял точку с запятой после return и не ломал наш код.

Теперь мы передаём вниз два пропса из Board в Square: value и onClick. Проп onClick — это функция, которую Square вызывает при клике. Внесём следующие изменения в компонент Square:

Заменим this.state.value на this.props.value внутри метода render.
Заменим this.setState() на this.props.onClick() внутри метода render.
Удалим constructor из Square, потому что компонент больше не отвечает за хранение состояния игры.

После этих изменений компонент Square выглядит так:

class Square extends React.Component {  render() {    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}      >
        {this.props.value}      </button>
    );
  }
}

При клике на Square вызывается функция onClick, которая была передана из Board. Вот как это происходит:

Проп onClick на встроенном DOM-компоненте <button> указывает React установить обработчик события.
При клике по кнопке, React вызовет обработчик onClick, который определён в методе render() Square.
Этот обработчик вызовет this.props.onClick(). Проп onClick определён для Square внутри Board.
Т.к. Board передаёт в Square onClick={() => this.handleClick(i)}, Square при клике вызывает this.handleClick(i).
Мы пока не определили метод handleClick(), поэтому наш код сломается. Если вы сейчас кликните на клетку, вы увидите красный экран с ошибкой вроде this.handleClick is not a function.

Примечание
Атрибут onClick DOM-элемента <button> имеет для React особое значение, потому что это встроенный компонент. Для обычных компонентов вроде Square вы можете называть пропсы как угодно. Мы можем назвать проп Square onClick и метод для Board handleClick любым именем, и они будут работать так же. Но в React есть соглашение об именах — on[Имя события] для пропсов, отвечающих за события, и handle[Имя события] для методов обрабатывающих события.

При клике на Square мы должны получить ошибку, потому что метод handleClick ещё не определён. Давайте добавим его в класс Board:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }

  handleClick(i) {    const squares = this.state.squares.slice();    squares[i] = 'X';    this.setState({squares: squares});  }
  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Следующий ход: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Посмотреть полный код этого шага

После этих изменений мы снова можем заполнять клетки по клику. Однако теперь состояние хранится внутри компонента Board, а не в разрозненных компонентах Square. При изменении состояния Board произойдёт повторный рендер компонентов Square. Хранение состояния всех клеток внутри компонента Board позволит в будущем определить победителя.

Поскольку компоненты Square больше не содержат состояния, они получают все значения из Board и уведомляют его при кликах. В терминах React компонент Square теперь является управляемым. Им полностью управляет Board.

Обратите внимание, что внутри handleClick мы вызвали .slice() для создания копии массива squares вместо изменения существующего массива. В следующей части мы объясним зачем создавать копию массива squares.

Почему иммутабельность так важна?

В последнем примере мы советовали использовать метод .slice() для создания и последующего копирования копии массива squares вместо изменения существующего. Теперь мы обсудим иммутабельность и почему её так важно изучить.

В целом есть два подхода к изменению данных. Первый подход — мутировать(изменять) данные, напрямую устанавливая новые значения. Второй подход — заменять данные новой копией, которая содержит изменения.

Мутирующее изменение данных

var player = {score: 1, name: 'Джефф'};
player.score = 2;

Изменение данных без мутаций

var player = {score: 1, name: 'Джефф'};

var newPlayer = Object.assign({}, player, {score: 2});

Конечный результат будет тот же, но без мутации (т.е. изменения) исходных данных напрямую. Ниже описаны преимущества такого подхода.

Сложное становится простым

Иммутабельность делает реализацию сложной функциональности проще. Ниже мы реализуем функциональность «путешествие во времени», которая позволит хранить историю игры и «возвращаться» к прошлым ходам. Эта функциональность не характерна для игр, однако, возможность отменять и заново применять действия часто встречается в приложениях. Избежание прямой мутации данных позволяет сохранять предыдущие состояния игры без изменений и обращаться к ним позже.

Обнаружение изменений

Работая с мутируемыми объектами довольно сложно обнаружить изменения, потому что они изменяются напрямую. В таком случае нам требуется сравнивать объект как со своей последней копией, так и со всем деревом объектов.

Обнаружение изменений в иммутабельных объектах намного проще. Если неизменяемый объект, на который ссылается, отличается от предыдущего, то объект изменился.

Как React понимает, когда нужно перерендерить

Основным преимуществом иммутабельности является то, что она помогает создавать в React чистые компоненты. Неизменяемые данные позволяют легко определить наличие изменений и момент, когда компонент нужно перерендерить.

Вы можете узнать больше о shouldComponentUpdate() и как создавать чистые компоненты в статье про оптимизацию производительности.

Функциональные компоненты

Давайте сделаем Square функциональным компонентом.

В React функциональные компоненты являются более простым способом написания компонентов, которые содержат только метод render и не имеют собственного состояния. Вместо определения класса, который наследуется от React.Component, мы можем написать функцию, которая принимает на вход props и возвращает то, что должно быть отрендерено. Функциональные компоненты проще писать, чем классы, и многие компоненты могут быть оформлены таким образом.

Заменим класс Square следующей функцией:

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

Мы заменили this.props на props оба раза, когда обращались к ним.

Посмотреть полный код этого шага

Примечание
Когда мы заменили Square на функциональный компонент, мы также изменили onClick={() => this.props.onClick()} на более короткое onClick={props.onClick} (обратите внимание на отсутствие скобок с обеих сторон).

Очерёдность

Нам нужно исправить одну очевидную проблему в нашей игре — на поле нельзя поставить «O».

По-умолчанию установим первый ход за «X». Мы можем сделать это, изменяя начальное состояние внутри конструктора Board:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,    };
  }

Каждый раз, когда игрок делает ход, xIsNext (булево значение) будет инвертироваться, чтобы обозначить, какой игрок ходит следующим, а состояние игры будет сохраняться. Мы обновим метод handleClick класса Board, для инверсии значения xIsNext:

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,    });
  }

После этих изменений «X» и «O» будут чередоваться. Попробуйте.

Давайте также изменим текст «status» в методе render класса Board так, чтобы он отображал какой игрок ходит следующим:

  render() {
    const status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');
    return (

После этих изменений наш Board-компонент должен выглядеть так:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({      squares: squares,      xIsNext: !this.state.xIsNext,    });  }

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Посмотреть полный код этого шага

Определение победителя

Теперь, когда мы показываем, какой игрок ходит следующим, нам также нужно показать, когда игра закончена, и больше нет ходов. Скопируйте вспомогательную функцию в конец файла:

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

Функция получает массив из 9 клеток, проверяет победителя и возвращает 'X', 'O' или null.

Будем вызывать calculateWinner(squares) внутри метода render класса Board, чтобы проверять, выиграл ли игрок. Если у нас есть победитель, мы покажем сообщение «Выиграл X» или «Выиграл O». Заменим объявление status в render следующим кодом:

  render() {
    const winner = calculateWinner(this.state.squares);    let status;    if (winner) {      status = 'Выиграл ' + winner;    } else {      status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');    }
    return (

Теперь мы можем изменить метод handleClick класса Board для выхода из функции и игнорировании клика, если кто-то уже победил или если клетка уже заполнена:

  handleClick(i) {
    const squares = this.state.squares.slice();
    if (calculateWinner(squares) || squares[i]) {      return;    }    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

Посмотреть полный код этого шага

Поздравляем! Теперь у вас есть работающая игра в крестики-нолики. И кроме этого вы только что изучили основы React. Похоже, настоящий победитель здесь это вы.

Добавление путешествия во времени

В качестве последнего упражнения давайте добавим возможность «вернуться в прошлое» — к прошлым ходам игры.»

Сохраняем историю ходов

Если бы мы изменяли массив squares, реализация такой задачи была бы очень трудной.

Но мы использовали slice() для создания новой копии массива squares после каждого хода и работали с ним, не изменяя оригинала. Это позволит нам хранить каждую версию массива squares и перемещаться по ходам, которые уже были сделаны.

Сохраним массивы squares в другом массиве и назовём его history. Этот массив history будет хранить все состояния поля. От первого до последнего хода. У него будет такая структура:

history = [
  
  {
    squares: [
      null, null, null,
      null, null, null,
      null, null, null,
    ]
  },
  
  {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, null,
    ]
  },
  
  {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, 'O',
    ]
  },
  
]

Осталось решить, какой компонент будет отвечать за состояние history.

Подъём состояния. Снова

Мы хотим, чтобы вышележащий компонент Game отображал список последних ходов. Для этого ему понадобится доступ к history, поэтому мы поместим history в состояние родительского компонента Game.

Размещение history в состоянии компонента Game позволяет нам удалить squares из состояния его дочернего компонента Board. Так же, как мы уже «поднимали состояние» из компонента Square в Board, мы теперь поднимем его из Board в компонент-родитель Game. Это даст компоненту Game полный контроль над данными Board и позволит отдавать команду для Board на рендеринг прошлых ходов из history:

Для начала зададим начальное состояние компонента Game внутри конструктора:

class Game extends React.Component {
  constructor(props) {    super(props);    this.state = {      history: [{        squares: Array(9).fill(null),      }],      xIsNext: true,    };  }
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{}</div>
          <ol>{}</ol>
        </div>
      </div>
    );
  }
}

После этого нужно, чтобы Board получил пропсы squares и onClick из компонента Game. Поскольку внутри Board у нас один обработчик кликов для всех Squares, нам достаточно передать позицию для каждого Square в обработчик onClick, чтобы показать по какой клетке мы кликнули. Для изменения компонента Board нам нужно выполнить следующие шаги:

Удалить constructor в Board.
Заменить this.state.squares[i] на this.props.squares[i] в методе renderSquare Board.
Заменить this.handleClick(i) на this.props.onClick(i) в методе renderSquare Board.

Теперь компонент Board должен выглядеть вот так:

class Board extends React.Component {
  handleClick(i) {
    const squares = this.state.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}        onClick={() => this.props.onClick(i)}      />
    );
  }

  render() {
    const winner = calculateWinner(this.state.squares);
    let status;
    if (winner) {
      status = 'Выиграл ' + winner;
    } else {
      status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Давайте обновим метод render компонента Game, чтобы использовать последнюю запись из истории для определения и отображения статуса игры:

  render() {
    const history = this.state.history;    const current = history[history.length - 1];    const winner = calculateWinner(current.squares);    let status;    if (winner) {      status = 'Выиграл ' + winner;    } else {      status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');    }
    return (
      <div className="game">
        <div className="game-board">
          <Board            squares={current.squares}            onClick={(i) => this.handleClick(i)}          />        </div>
        <div className="game-info">
          <div>{status}</div>          <ol>{}</ol>
        </div>
      </div>
    );
  }

Поскольку компонент Game теперь рендерит статус игры, мы можем убрать соответствующий код из метода render внутри Board. После изменений метод render компонента Board выглядит так:

  render() {    return (      <div>        <div className="board-row">          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }

Наконец, нужно перенести метод handleClick из компонента Board в компонент Game. Мы также должны изменить handleClick, потому что состояние компонента Game имеет другую структуру. В методе handleClick компонента Game мы добавим новые записи истории в history.

  handleClick(i) {
    const history = this.state.history;    const current = history[history.length - 1];    const squares = current.squares.slice();    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{        squares: squares,      }]),      xIsNext: !this.state.xIsNext,
    });
  }

Примечание
В отличие от метода массива push(), с которым вы должно быть знакомы, метод concat() не изменяет оригинальный массив, поэтому мы предпочтём его.

Теперь компоненту Board нужно только два метода — renderSquare и render. Состояние игры и handleClick должны находиться внутри компонента Game.

Посмотреть полный код этого шага

Показываем прошлые ходы

Поскольку мы записываем ход игры, мы теперь можем показать игроку список предыдущих ходов.

Ранее мы узнали, что React-элементы — это обычные объекты JavaScript. Мы можем передавать их внутри нашего приложения. Для рендера нескольких записей в React мы можем использовать массив React-элементов.

В JavaScript у массивов есть метод map(), который обычно используется для преобразования данных. Например:

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2);

Используя метод map, мы можем отобразить историю наших ходов в React-элементы, представленные кнопками на экране, и отрисовать список кнопок для «перехода» к прошлым ходам.

Давайте применим map к history внутри метода render Game-компонента:

  render() {
    const history = this.state.history;
    const current = history[history.length - 1];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {      const desc = move ?        'Перейти к ходу #' + move :        'К началу игры';      return (        <li>          <button onClick={() => this.jumpTo(move)}>{desc}</button>        </li>      );    });
    let status;
    if (winner) {
      status = 'Выиграл ' + winner;
    } else {
      status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>        </div>
      </div>
    );
  }

Посмотреть полный код этого шага

Для каждого хода в истории игры мы создаём элемент списка <li>, который содержит кнопку <button>. У кнопки есть обработчик onClick, который вызывает метод this.jumpTo(). Мы ещё не реализовали этот jumpTo() метод. Пока что мы должны видеть только список ходов, которые были сделаны в игре и вот такое предупреждение в инструментах разработчика:

Warning:
Each child in an array or iterator should have a unique «key» prop. Check the render method of «Game».

Что переводится как:

Предупреждение:
Каждый элемент в массиве или итераторе должен иметь уникальный проп «key». Проверьте метод render в Game

Давайте обсудим, что это предупреждение значит.

Выбор ключа

Когда мы рендерим список, React хранит информацию о каждом отрендеренном элементе списка. Если мы обновляем список, React должен понять, что в нём изменилось. Мы могли добавить, удалить, поменять порядок или обновить элементы списка.

Представим изменения от

<li>Алекс: 7 задач осталось</li>
<li>Бен: 5 задач осталось</li>

<li>Бен: 9 задач осталось</li>
<li>Клава: 8 задач осталось</li>
<li>Алекс: 5 задач осталось</li>

В дополнении к изменённым цифрам, человек, читающий это, вероятно, сказал бы что Алекс и Бен поменялись местами, а между ними вставили Клаву. Но React — это компьютерная программа, и она не знает чего мы хотим, поэтому нам нужно указать свойство key для каждого элемента списка, чтобы отличать каждый элемент от остальных. Один из вариантов — использовать строки Алекс, Бен, Клава. Если мы показываем информацию из базы данных, то в качестве ключей мы могли бы использовать идентификаторы из базы.

<li key={user.id}>{user.name}: {user.taskCount} задач осталось</li>

При повторном рендеринге списка, React берёт у каждого элемента списка ключ и ищет его в элементах прошлого списка. Если в новом списке есть ключ, которого раньше не было, React создаёт новый компонент. Если в текущем списке отсутствует ключ, который был в прошлом списке, React уничтожает предыдущий компонент. Если два ключа совпадают, соответствующий компонент перемещается. Ключи в React работают как идентификаторы для каждого компонента, что помогает React поддерживать состояние между повторными рендерингами. Если у компонента меняется ключ, компонент будет уничтожен и создан вновь с новым состоянием.

key — это специальное зарезервированное свойство в React (наряду с ref, более продвинутой функциональностью). Когда элемент создан, React извлекает свойство key и сохраняет этот ключ непосредственно в возвращаемом элементе. Хотя key выглядит как пропс, к нему нельзя обращаться через this.props.key. React автоматически использует key для определения того, какой компонент должен обновиться. Компонент не может узнать о своём ключе.

Настоятельно рекомендуется использовать правильные ключи каждый раз, когда вы строите динамические списки. Если у вас нет подходящего ключа, можно подумать о реструктуризации ваших данных, чтобы он у вас появился.

Если ключ не был определён, React покажет предупреждение и по умолчанию использует индекс элемента в массиве в качестве ключа. Использование индексов массива может вызвать проблемы при попытке отсортировать элементы списка или при вставке/удалении элементов. Явная передача key={i} отключает предупреждение, но вызывает те же проблемы, связанные с индексами массивов, так что в большинстве случаев лучше так не делать.

Ключи не обязательно должны быть уникальными глобально. Они должны быть уникальными только между компонентами и их братьями и сёстрами.

Реализация путешествия во времени

В истории игры крестики-нолики каждый прошлый ход имеет уникальный идентификатор: это номер хода в последовательности. Ходы никогда не меняют свой порядок, не удаляются и не добавляются в середину последовательности, так что вполне безопасно пользоваться индексом в качестве ключа.

В методе render компонента Game мы можем добавить ключ следующим образом <li key={move}> и предупреждения от React об отсутствующих ключах должны пропасть:

    const moves = history.map((step, move) => {
      const desc = move ?
        'Перейти к ходу #' + move :
        'К началу игры';
      return (
        <li key={move}>          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

Посмотреть полный код этого шага

Клик на любой кнопке из списка выбросит ошибку, потому что метод jumpTo не определён. Прежде чем реализовывать jumpTo, мы добавим stepNumber в состояние компонента Game, для указания номера хода, который сейчас отображается.

Сначала добавим stepNumber: 0 в начальное состояние Game внутри constructor:

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [{
        squares: Array(9).fill(null),
      }],
      stepNumber: 0,      xIsNext: true,
    };
  }

Далее, мы определим метод jumpTo в компоненте Game для обновления stepNumber. Мы также установим xIsNext в true, если номер хода, на который мы меняем stepNumber, чётный:

  handleClick(i) {
    
  }

  jumpTo(step) {    this.setState({      stepNumber: step,      xIsNext: (step % 2) === 0,    });  }
  render() {
    
  }

Мы сделаем ещё несколько изменений в методе Game handleClick, который выполняется когда вы кликаете на клетки.

Добавленный нами stepNumber указывает номер хода, отображающегося пользователю. Когда мы делаем очередной ход, нам нужно обновить stepNumber используя stepNumber: history.length как часть аргумента для this.setState. Это гарантирует, что мы не застрянем, показывая одно и то же после того, как был сделан новый ход.

Мы также заменим чтение this.state.history на this.state.history.slice(0, this.state.stepNumber + 1). Это гарантирует, что если мы «вернёмся назад», а затем сделаем новый шаг из этой точки, мы удалим всю «будущую» историю, которая перестала быть актуальной.

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{
        squares: squares
      }]),
      stepNumber: history.length,      xIsNext: !this.state.xIsNext,
    });
  }

Наконец, мы изменим метод render для Game, чтобы вместо рендера последнего хода он рендерил ход, соответствующий stepNumber:

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];    const winner = calculateWinner(current.squares);

Если мы кликнем на любой ход в игровой истории, поле должно немедленно обновиться, показывая как оно выглядело после этого хода.

Посмотреть полный код этого шага

Подводя итоги

Поздравляем! Вы только что создали игру в крестики-нолики, которая:

Позволяет вам играть в крестики нолики,
Показывает, когда один из игроков выиграл,
Хранит историю игры,
Позволяет игрокам просматривать историю игры и видеть прошлые состояния игрового поля.

Хорошая работа! Мы надеемся, вы чувствуете уверенность в своих знаниях о том, как работает React.

Посмотреть готовую игру вы можете здесь: Готовый результат.

Если у вас есть дополнительное время или вы хотите попрактиковать свои новые навыки в React, вот пара идей для улучшений, которые вы можете внедрить в крестики-нолики (перечислены в порядке увеличения сложности):

Отобразите позицию для каждого хода в формате (колонка, строка) в списке истории ходов.
Выделите выбранный элемент в списке ходов.
Перепишите Board, используя вложенные циклы для создания клеток, вместо их жёсткого кодирования.
Добавьте переключатель, который позволит вам сортировать ходы по возрастанию или по убыванию.
Когда кто-то выигрывает, подсветите три клетки, которые привели к победе.
Когда победителя нет, покажите сообщение о том, что игра окончилась вничью.

В этом вводном руководстве мы затронули концепции React, включая элементы, компоненты, пропсы и состояние. Для более детального ознакомления с каждой из этих тем обратитесь к остальной документации. Чтобы узнать больше про объявление компонентов изучите Документацию по API React.Component.

..:: HTML Manual — справочник по HTML ::..

HTML-справочник. Введение

Коротко о справочнике

Это не перевод скучной спецификации и не попытка написать учебник. Задача справочника – коротко и ясно описать действие всех элементов языка HTML, которые вы можете без опаски использовать при создании Internet-страниц, не боясь, что какая-то версия какого-либо браузера сделает вам неприятный сюрприз.

Иначе говоря, здесь представлен «классический» HTML, употребляемый профессиональными web-разработчиками. И ничего лишнего.

Все теги, не описанные в этом справочнике, можете смело выбросить в помойку.

Как устроен справочник

Очень просто. Эталоном построения справочника стали классические брошюры по всевозможным языкам программирования, описывающие элементы языка парой «элемент – описание».

Для «крутых»

Справочник не рассчитан лишь на начинающих. Я частенько пользуюсь им как шпаргалкой если что-нибудь подзабыл. Несмотря на то, что HTML – штука очень простая, иногда из головы напрочь вылетает какая-нибудь мелочь. Например, что у элемента HR есть жутко полезный атрибут NOSHADE.

Как понимать написанное

Справочник оперирует всего двумя понятиями, разобраться в которых, я думаю, не составляет никакого труда:

Тег оформленная единица HTML-кода. Например, <HEAD>, , <BODY>, <HTML> и так далее. Теги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака «/»). Например, вышеуказанным тегам соответствуют закрывающие теги </HEAD>, , </BODY>, </HTML>.

Элемент понятие, введенное для удобства. Например, элемент HEAD состоит из двух тегов открывающего <HEAD> и закрывающего </HEAD>. Следовательно, элемент более емкое понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.

— HTML: язык разметки гипертекста

HTML-элемент

представляет собой доминирующее содержимое документа. Основная область содержимого состоит из содержимого, которое напрямую связано с центральной темой документа или с центральными функциями приложения или расширяет ее.

В документе не должно быть более одного элемента

, для которого не указан атрибут hidden .

Содержимое элемента

должно быть уникальным для документа. Контент, который повторяется в наборе документов или разделах документа, таких как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайтов и формы поиска, не следует включать, если форма поиска не является основной функцией страницы.

не влияет на структуру документа; то есть, в отличие от таких элементов, как , такие заголовки, как

и т. д.,

не влияют на концепцию DOM структуры страницы.Это строго информативно.

 

<основной>
   Яблоки 
   Яблоко - это семечковые плоды яблони. 

  <статья>
     Ред Делишес 
     Эти ярко-красные яблоки чаще всего встречаются во многих
    супермаркеты. 
     ... 
     ...



  <статья>
     Бабушка Смит 
     Эти сочные зеленые яблоки отлично подходят для
    яблочные пироги.
     ... 
     ...

Ориентир

Элемент

ведет себя как главная роль ориентира . Ориентиры могут использоваться вспомогательными технологиями для быстрого определения больших разделов документа и перехода к ним. Предпочтительнее использовать элемент

вместо объявления role = "main" , если нет проблем с поддержкой устаревшего браузера.

Пропустить навигацию

Пропустить навигацию, также известную как «skipnav», — это метод, который позволяет пользователю вспомогательных технологий быстро обходить большие разделы повторяющегося контента (основная навигация, информационные баннеры и т. Д.). Это позволяет пользователю быстрее получить доступ к основному содержимому страницы.

Добавление атрибута id к элементу

позволяет ему быть целью для ссылки пропуска навигации.

  <тело>
   Перейти к основному содержанию 

  

  <основной>

Режим чтения

Функциональность режима чтения через браузер проверяет наличие элемента

, а также элементов заголовка и секционирования содержимого при преобразовании содержимого в специализированное представление для чтения.

Таблицы BCD загружаются только в браузере

Для поддержки Internet Explorer 11 и ниже вы можете добавить роль ARIA "main" к элементу

. Но имейте в виду, что в спецификации ARIA в HTML указано, что role = "main" на самом деле не следует использовать с элементом

, и валидатор W3C сообщит об этом предупреждение. Однако Internet Explorer 11 и ниже в противном случае не будет правильно предоставлять элемент

для программ чтения с экрана, таких как JAWS, если этот элемент также не имеет атрибут role = "main" .

— HTML: язык разметки гипертекста

Не рекомендуется: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже был удален из соответствующих веб-стандартов, может быть удален или может быть сохранен только в целях совместимости. Избегайте его использования и, если возможно, обновите существующий код; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.

Элемент HTML определяет конкретную область, в которой может отображаться другой документ HTML. Кадр должен использоваться в пределах .

Использование элемента не рекомендуется из-за определенных недостатков, таких как проблемы с производительностью и недоступность для пользователей с программами чтения с экрана. Вместо элемента может быть предпочтительнее </code>. Как и все другие элементы HTML, этот элемент поддерживает глобальные атрибуты.<dl><dt> <code> SRC </code> </dt><dd> Этот атрибут определяет документ, который будет отображаться во фрейме.</dd><dt> <code> наименование </code> </dt><dd> Этот атрибут используется для маркировки кадров. Без маркировки каждая ссылка будет открываться во фрейме, в котором она находится — ближайшем родительском фрейме. См. Атрибут <code> target </code> для получения дополнительной информации.</dd><dt> <code> размер </code> </dt><dd> Этот атрибут предотвращает изменение размеров фреймов пользователями.</dd><dt> <code> прокрутка </code> </dt><dd> Этот атрибут определяет наличие полосы прокрутки. Если этот атрибут не используется, браузер при необходимости добавляет полосу прокрутки. Есть два варианта: «да» для принудительного использования полосы прокрутки, даже если в этом нет необходимости, и «нет» для принудительного отключения полосы прокрутки, даже если — это необходимо.</dd><dt> <code> высота поля </code> </dt><dd> Этот атрибут определяет высоту поля между кадрами.</dd><dt> <code> ширина поля </code> </dt><dd> Этот атрибут определяет ширину поля между кадрами.</dd><dt> <code> рамка-рамка </code> </dt><dd> Этот атрибут позволяет указать границу фрейма.</dd></dl><pre> <code> <frameset cols = "50%, 50%"> <frame src = "https: // разработчик.mozilla.org/en/HTML/Element/iframe "/> <frame src = "https://developer.mozilla.org/en/HTML/Element/frame" /> </frameset> </code> </pre> Таблицы BCD загружаются только в браузере<h2><span class="ez-toc-section" id="%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8F_%D0%B2_%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B5_HTML_-_javatpoint"> Руководство пользователя в формате HTML — javatpoint </h2><h3> Конвенция о кодировании HTML </h3> При использовании HTML следует соблюдать некоторые соглашения:<h3> Используйте согласованный CSS </h3> Пользователь должен использовать единый стиль при написании HTML. Это делает код более простым и понятным для людей. Ваш код должен быть небольшим, чистым и хорошо сформированным.<h3><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B9%D1%82%D0%B5_%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D1%82%D0%B8%D0%BF_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"> Используйте правильный тип документа </h3> Вы должны объявить тип документа в начале вашего кода.<h4> Например: </h4> <! DOCTYPE html> Вы также можете использовать <! DOCTYPE html>, чтобы сохранить вашу практику строчных букв.<h3><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_%D0%B8%D0%BC%D0%B5%D0%BD%D0%B0_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%B2_%D0%BD%D0%B8%D0%B6%D0%BD%D0%B5%D0%BC_%D1%80%D0%B5%D0%B3%D0%B8%D1%81%D1%82%D1%80%D0%B5"> Использовать имена элементов в нижнем регистре </h3> HTML5 позволяет использовать буквы верхнего и нижнего регистра в имени элемента. Но рекомендуется использовать только нижний регистр.Потому что:<ul><li> Сочетание строчных и прописных букв в элементах — не лучшая идея.</li><li> Строчные буквы выглядят аккуратно и чисто.</li><li> Строчные буквы писать легко.</li><li> Разработчики в основном используют строчные буквы.</li></ul><h4> Пример: </h4> Плохая практика: <РАЗДЕЛ> Это javatpoint.com</SECTION><h5></h5> Примечание: Этот пример будет запущен, но писать элементы прописными буквами не рекомендуется.</h5> Очень плохая практика: <Раздел> Это javatpoint.com</SECTION> Хорошая практика: <раздел> Это javatpoint.com.</section><h3> Закройте все элементы HTML </h3> В HTML5 не требуется закрывать все теги HTML. Но рекомендуется закрывать теги. Плохая практика: <раздел> Это javatpoint.ком </section> Хорошая практика: <раздел> Это javatpoint.com</section><h3> Закройте пустые элементы HTML </h3> В HTML5 закрывать пустые теги HTML не обязательно. Вы можете закрыть его или оставить открытым. Хорошая практика: <meta charset = "utf-8"><h3> Не пропускайте </h3><html> и<body></h3> HTML5 позволяет вам опустить и тег.Вы можете исключить оба тега, и программа будет работать нормально.<h4> Пример: </h4> <! DOCTYPE html> <head> <title> Заголовок страницы</title> </head><h2> Это javatpoint.com </h2> Добро пожаловать на javatpoint.comПроверить это сейчас Мы рекомендуем вам не пропускать и тег, поскольку он является корневым элементом и определяет язык страницы. Синтаксис: <! DOCTYPE html> <html lang = "en-US"> Пример: <! DOCTYPE html> <html lang = "en-US"> <head> <title> Заголовок страницы</title> </head> <body><h2> Это заголовок </h2> Это абзац.</body> </html>Проверить это сейчас <h2> Начало работы — React </h2> Эта страница представляет собой обзор документации React и связанных ресурсов. React — это библиотека JavaScript для создания пользовательских интерфейсов. Узнайте, что такое React, на нашей домашней странице или в руководстве.<hr/><h3> Попробуйте React </h3> React с самого начала разрабатывался для постепенного внедрения, а вы можете использовать столько, сколько вам нужно. Если вы хотите попробовать React, добавить интерактивности к простой HTML-странице или запустить сложное приложение на основе React, ссылки в этом разделе помогут вам начать работу.<h4> Игровые площадки онлайн </h4> Если вы хотите поиграть с React, вы можете использовать онлайн-площадку для кода. Попробуйте шаблон Hello World на CodePen, CodeSandbox или Stackblitz. Если вы предпочитаете использовать собственный текстовый редактор, вы также можете загрузить этот HTML-файл, отредактировать его и открыть из локальной файловой системы в вашем браузере.Он выполняет медленное преобразование кода во время выполнения, поэтому мы рекомендуем использовать его только для простых демонстраций.<h4> Добавить реакцию на веб-сайт </h4> Вы можете добавить React на HTML-страницу за одну минуту. Затем вы можете либо постепенно расширять его присутствие, либо оставить его в нескольких динамических виджетах.<h4> Создание нового приложения React </h4> При запуске проекта React простая HTML-страница с тегами сценария может быть лучшим вариантом. Настройка займет всего минуту! По мере роста вашего приложения вам может потребоваться более интегрированная установка.Для более крупных приложений мы рекомендуем несколько наборов инструментов JavaScript. Каждый из них может работать с минимальной настройкой или без нее и позволяет вам в полной мере использовать богатую экосистему React. Научиться.<h3> Учитесь React </h3> Люди приходят в React с разным опытом и разными стилями обучения. Если вы предпочитаете более теоретический или практический подход, мы надеемся, что этот раздел окажется для вас полезным. Как и любая незнакомая технология, React требует обучения.С практикой и терпением вы научитесь .<h4> Первые примеры </h4> Домашняя страница React содержит несколько небольших примеров React с живым редактором. Даже если вы еще ничего не знаете о React, попробуйте изменить их код и посмотрите, как это повлияет на результат.<h4> React для начинающих </h4> Если вы чувствуете, что документация React идет быстрее, чем вы привыкли, ознакомьтесь с этим обзором React от Тани Расция. Он подробно знакомит с наиболее важными концепциями React и удобен для новичков.Как только вы закончите, попробуйте документацию еще раз!<h4> React для дизайнеров </h4> Если вы начинаете заниматься дизайном, эти ресурсы — отличное место для начала.<h4> Ресурсы JavaScript </h4> Документация React предполагает некоторое знакомство с программированием на языке JavaScript. Необязательно быть экспертом, но одновременно выучить React и JavaScript сложнее. Мы рекомендуем просмотреть этот обзор JavaScript, чтобы проверить свой уровень знаний.Это займет у вас от 30 минут до часа, но вы будете чувствовать себя более уверенно, изучая React.<blockquote> Подсказка Всякий раз, когда вас что-то путает в JavaScript, лучше всего проверить MDN и javascript.info. Есть также форумы поддержки сообщества, где вы можете попросить о помощи.</blockquote><h4> Практическое руководство </h4> Если вы предпочитаете учиться на практике, ознакомьтесь с нашим практическим руководством. В этом уроке мы создаем игру в крестики-нолики в React.У вас может возникнуть соблазн пропустить его, потому что вы не занимаетесь созданием игр, но дайте ему шанс. Методы, которые вы изучите в этом руководстве, являются основополагающими для создания любых приложений React, и их освоение даст вам гораздо более глубокое понимание.<h4> Пошаговое руководство </h4> Если вы предпочитаете изучать концепции шаг за шагом, лучше всего начать с — наше руководство по основным концепциям. Каждая следующая глава в нем основывается на знаниях, представленных в предыдущих главах, поэтому вы ничего не пропустите по мере продвижения.<h4> Мыслить в реакциях </h4> Многие пользователи React считают, что чтение «Thinking in React» является моментом, когда React наконец «щелкнул» для них. Вероятно, это самое старое пошаговое руководство по React, но оно не менее актуально.<h4> Рекомендуемые курсы </h4> Иногда люди находят сторонние книги и видеокурсы более полезными, чем официальная документация. Мы ведем список часто рекомендуемых ресурсов, некоторые из которых бесплатны.<h4> Расширенные концепции </h4> Когда вы освоитесь с основными концепциями и немного поиграете с React, вас могут заинтересовать более сложные темы.В этом разделе вы познакомитесь с мощными, но менее часто используемыми функциями React, такими как context и refs.<h4> Справочник по API </h4> Этот раздел документации полезен, когда вы хотите узнать больше о конкретном React API. Например, справочник по API <code> React.Component </code> может предоставить вам подробную информацию о том, как работает <code> setState () </code> и для чего полезны различные методы жизненного цикла.<h4><span class="ez-toc-section" id="%D0%93%D0%BB%D0%BE%D1%81%D1%81%D0%B0%D1%80%D0%B8%D0%B9_%D0%B8_%D1%87%D0%B0%D1%81%D1%82%D0%BE_%D0%B7%D0%B0%D0%B4%D0%B0%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5_%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D1%8B"> Глоссарий и часто задаваемые вопросы </h4> Глоссарий содержит обзор наиболее распространенных терминов, которые вы встретите в документации React.Также есть раздел часто задаваемых вопросов, посвященный коротким вопросам и ответам на общие темы, включая выполнение запросов AJAX, состояние компонентов и структуру файлов.<h3> Оставаться в курсе </h3> Блог React является официальным источником обновлений от команды React. Все важное, включая примечания к выпуску или уведомления об отказе от поддержки, будет сначала опубликовано там. Вы также можете подписаться на аккаунт @reactjs в Twitter, но вы не пропустите ничего важного, если будете читать только блог. Не каждый выпуск React заслуживает отдельного сообщения в блоге, но вы можете найти подробный журнал изменений для каждого выпуска в файле <code> CHANGELOG.md </code> в репозитории React, а также на странице Releases.<h3> Версия документации </h3> Эта документация всегда отражает последнюю стабильную версию React. Начиная с React 16, вы можете найти более старые версии документации на отдельной странице. Обратите внимание, что документация для прошлых версий создается на момент выпуска и не обновляется постоянно.<h3> Что-то не хватает? </h3> Если что-то отсутствует в документации или если вы обнаружили, что какая-то часть сбивает вас с толку, сообщите о проблеме в репозиторий документации с вашими предложениями по улучшению или напишите в Твиттере в учетной записи @reactjs. Мы рады слышать тебя.<h2> Руководство Doxygen: Обзор </h2> Первая часть представляет собой руководство пользователя: Вторая часть представляет собой справочное руководство:<ul><li> В разделе «Возможности» представлен обзор возможностей doxygen.</li><li> В разделе Использование Doxygen показано, как использовать программу <code> doxygen </code>.</li><li> В разделе Использование Doxywizard показано, как использовать программу <code> doxywizard </code>.</li><li> В разделе «Конфигурация» показано, как настроить doxygen, чтобы он генерировал нужную вам документацию.</li><li> В разделе «Специальные команды» представлен обзор специальных команд, которые можно использовать в документации.</li><li> Раздел «Команды HTML» показывает обзор команд HTML, которые можно использовать в документации.</li><li> В разделе «Команды XML» представлен обзор команд XML в стиле C #, которые можно использовать в документации.</li><li> В разделе «Поддержка эмодзи» показано, как можно использовать эмодзи в документации.</li></ul> В третьей части представлена информация для разработчиков:<h3> Лицензия Doxygen </h3> Авторские права © 1997-2019, Димитри ван Хиш. Настоящим предоставляется разрешение на использование, копирование, изменение и распространение этого программного обеспечения и его документации в соответствии с условиями Стандартной общественной лицензии GNU.Мы не делаем никаких заявлений относительно пригодности этого программного обеспечения для каких-либо целей. Он предоставляется «как есть», без явных или подразумеваемых гарантий. Подробнее см. Стандартную общественную лицензию GNU. Документы, создаваемые doxygen, являются производными от материалов, используемых при их создании; на них не распространяется данная лицензия.<h3> Примеры пользователей </h3> Doxygen поддерживает ряд выходных форматов, из которых HTML является наиболее популярным. Я собрал несколько хороших примеров реальных проектов с использованием doxygen. Это часть большого списка проектов, использующих doxygen. Если вам известны другие проекты, дайте мне знать, и я их добавлю.<h3> Работа будущего </h3> Хотя doxygen уже успешно используется большим количеством компаний и проектов с открытым исходным кодом, всегда есть возможности для улучшения. Вы также можете отправлять запросы на улучшения в системе отслеживания ошибок.<h3> Благодарности </h3> Благодарность:<ul><li> Мальте Цёклер и Роланд Вундерлинг, авторы DOC ++.Первая версия doxygen заимствовала некоторый код старой версии DOC ++. Хотя с тех пор я переписал практически весь код, DOC ++ все же дал мне хороший старт в написании doxygen.</li><li> Всем сотрудникам Qt Software за создание красивого набора инструментов с графическим интерфейсом.</li><li> Штеффен Шюманн за создание файловой системы ghc ::, которая используется doxygen.</li><li> Майклу МакТернану за создание mscgen, который теперь встроен в doxygen.</li><li> Моему брату Фрэнку за рендеринг логотипов.</li><li> Харму ван дер Хейдену за добавление поддержки HTML.</li><li> Wouter Slegers of Your Creative Solutions за регистрацию домена www.doxygen.org.</li><li> Мартин Крайс за добавление поддержки VHDL.</li><li> Parker Waechter за добавление выходного генератора RTF.</li><li> Йорга Баумана за добавление условных блоков документации, ссылок PDF и генератора конфигурации.</li><li> Тим Менш за добавление команды todo.</li><li> Кристиан Хаммонд за изменение дизайна сайта.</li><li> Кену Вонгу за предоставление кода просмотра дерева HTML.</li><li> Талину за добавление поддержки комментариев в стиле C # с разметкой XML.</li><li> Петру Прикрылу за координацию поддержки интернационализации. Все языковые сопровождающие для обеспечения переводов на многие языки.</li><li> многие, многие другие за предложения, исправления и отчеты об ошибках.</li></ul><h3> Рекламные ссылки </h3> (не относящиеся к doxygen)</h3>Heers — специалист по SEO<h2><span class="ez-toc-section" id="%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%B0_GNU_%D0%B2_%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B5_-_%D0%9F%D1%80%D0%BE%D0%B5%D0%BA%D1%82_GNU"> Руководства GNU в Интернете — Проект GNU </h2><h3> Руководства GNU в Интернете </h3><hr/> В этой таблице перечислены официальные пакеты GNU со ссылками на их первичная документация, если таковая имеется.Когда в пакете есть несколько связанных руководств, все они перечислены. Если в пакете нет конкретное руководство онлайн, ссылка просто ведет на домашнюю страницу пакета (который также явно связан с). Многие пакеты могут быть перечислены в любой из нескольких категорий, но для таблица здесь должна быть выбрана только одна, обычно в соответствии со Справочником свободного программного обеспечения. Сообщения об ошибках: для обсуждения конкретных руководств, пожалуйста, свяжитесь с сопровождающими пакета. Для обсуждения этой страницы в в частности (например, если вы сопровождаете GNU и хотите исправить или обсудите вашу запись), свяжитесь с <webmasters @ gnu.org>. Дополнительная документация по проекту GNU.<h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F_%E2%AE%9D"> Разработка программного обеспечения⮝ </h4><dl><dt> APL</dt><dd> Интерпретатор APL. [apl home]</dd><dt> Autoconf</dt><dd> Создайте сценарии конфигурации исходного кода. [autoconf home]</dd><dt> Autoconf-архив</dt><dd> Сборник свободно используемых макросов Autoconf. [главная страница архива autoconf]</dd><dt> Автоген</dt><dd> Автоматический генератор программ.[автоген домой]</dd><dt> Автомейк</dt><dd> Создание файлов Makefile, соответствующих стандартам GNU. [automake home]</dd><dt> Баш</dt><dd> GNU Bourne-Again Shell. [bash home]</dd><dt> Binutils (в качестве bfd binutils гпроф ld)</dt><dd> Бинарные утилиты: bfd gas gprof ld. [binutils home]</dd><dt> Зубр</dt><dd> Генератор парсеров. Доступны в распечатке: <cite> Руководство по эксплуатации зубров </cite>. [дом зубров]</dd><dt> Ccide</dt><dd> Генератор кода таблицы решений.[ccide home]</dd><dt> Cflow</dt><dd> Создайте график потока управления в программе. [cflow home]</dd><dt> Cim</dt><dd> Компилятор Simula. [cim home]</dd><dt> CLISP</dt><dd> Реализация Common Lisp. [зажим домой]</dd><dt> Сложность</dt><dd> Анализировать сложность C-функций. [дом сложности]</dd><dt> Конфиг</dt><dd> Вездесущие скрипты config.guess и config.sub. [config home]</dd><dt> Coreutils</dt><dd> Основные утилиты GNU (файл, текст, оболочка).[coreutils home]</dd><dt> копий на дюйм</dt><dd> Отступ директив препроцессора C для отражения вложенности и т. Д. [cppi home]</dd><dt> DDD</dt><dd> Графический интерфейс для GDB и других отладчиков. [ddd home]</dd><dt> DejaGnu</dt><dd> Среда тестирования программного обеспечения GNU. [dejagnu home]</dd><dt> DJGPP</dt><dd> Система разработки и утилиты GNU для DOS на оборудовании x86. [djgpp home]</dd><dt> EDMA</dt><dd> Объектно-ориентированная компонентная среда разработки.[edma home]</dd><dt> Эпсилон</dt><dd> Чисто функциональный язык программирования. [эпсилон домой]</dd><dt> Findutils</dt><dd> Работа с файлами, соответствующими заданным критериям. [findutils home]</dd><dt> GCC (cpp cppinternals gcc gccint gfc-internals Gfortran комариный gnat_rm gnat_ugn libgomp свобода libstdc ++)</dt><dd> Сборник компиляторов GNU. Доступны в распечатке: <cite> Использование GCC: Справочное руководство коллекции компиляторов GNU </cite>.[gcc home]</dd><dt> GNU Common Lisp</dt><dd> Реализация Common Lisp. [gcl home]</dd><dt> GDB (gdb удары)</dt><dd> Отладчик GNU. Доступны в распечатке: <cite> Отладка с помощью GDB: отладчик уровня исходного кода GNU </cite>. [gdb home]</dd><dt> Gengen</dt><dd> Генератор параметризованного текста на основе шаблона. [gengen home]</dd><dt> Gengetopt</dt><dd> Создайте синтаксические анализаторы для параметров командной строки. [gengetopt home]</dd><dt> Gforth</dt><dd> Форт-переводчик.[gforth home]</dd><dt> Глобальный</dt><dd> Межсредовая система тегов исходного кода. [глобальный дом]</dd><dt> КЛЕЙ</dt><dd> Платформа распределенного программного обеспечения для совместной работы. [приклеить домой]</dd><dt> GNAT</dt><dd> Компилятор Ada. [комар дома]</dd><dt> ГНАТС</dt><dd> Система отчетов о проблемах и управления ошибками GNU. [комары дома]</dd><dt> Gnatsweb</dt><dd> Веб-интерфейс для GNATS. [дом gnatsweb]</dd><dt> Справочное руководство GNU C</dt><dd> Справочное руководство по языку программирования C.[gnu-c-manual home]</dd><dt> ГнуКОБОЛ</dt><dd> Современный компилятор COBOL. [gnucobol home]</dd><dt> GNUlib</dt><dd> Исходные файлы для совместного использования между дистрибутивами. [гнулиб домой]</dd><dt> Мах</dt><dd> Микроядро системы GNU. [гнумач дом]</dd><dt> GNUprologjava (gnuprologjava)</dt><dd> Реализация Пролога как библиотеки Java. [дом gnuprologjava]</dd><dt> GNUstep</dt><dd> Среда разработки объектно-ориентированных приложений.[gnustep home]</dd><dt> Горм</dt><dd> Разработчик интерфейса GNUstep. [gorm home]</dd><dt> Gperf</dt><dd> Генератор идеальной хеш-функции. [gperf home]</dd><dt> Gprolog</dt><dd> Компилятор Пролога. [gprolog home]</dd><dt> Грег</dt><dd> Среда тестирования программного обеспечения. [greg home]</dd><dt> Коварство</dt><dd> Реализация схемы, предназначенная специально для расширений. [хитрость]</dd><dt> Коварный гном (атк беспорядок-glx беспорядок Корба gconf gdk бойкий gnome-vfs Gobject gtk libglade libgnome libgnomecanvas libgnomeui панго пангокаиро)</dt><dd> Интерфейс Guile для программирования GTK + для GNOME.[дом хитрого гнома]</dd><dt> Guile-rpc</dt> Реализация<dd> Pure Scheme для стандарта ONC RPC. [guile-rpc home]</dd><dt> Привет</dt><dd> Привет, мир GNU: Пример пакета GNU. [привет, дом]</dd><dt> Херд</dt><dd> Серверы ядра для операционной системы GNU. [хард домой]</dd><dt> Idutils</dt><dd> Утилиты базы данных идентификаторов. [idutils home]</dd><dt> Отступ</dt><dd> Программа преобразования кода. [отступ домой]</dd><dt> Кава</dt><dd> Фреймворк Java и реализация Scheme, Elisp и др.[кава домой]</dd><dt> Копи</dt><dd> Среда разработки Java для интерактивных приложений баз данных. [копи домой]</dd><dt> Liberty Eiffel</dt><dd> Компилятор Eiffel. [Liberty-Eiffel Home]</dd><dt> Libsigsegv</dt><dd> Библиотека для обработки ошибок страниц. [домашняя страница libsigsegv]</dd><dt> Linux-библиотека</dt><dd> 100% бесплатное распространение очищенного ядра Linux. [главная страница linux-libre]</dd><dt> Lispintro</dt><dd> Введение в программирование в Emacs Lisp. Доступны в распечатке: <cite> Введение в Emacs Lisp </cite>. [дом lispintro]</dd><dt> Марка</dt><dd> Автоматически переделывать файлы. [сделать дом]</dd><dt> МАРСТ</dt><dd> Переводчик из Алгола в Си. [марст дом]</dd><dt> Миг</dt><dd> Генератор интерфейса Mach 3.0 для Hurd. [миг домой]</dd><dt> Схема MIT / GNU (Мит-схема-Имаил мит-схема-ссылка сос мит-схема-пользователь)</dt><dd> Реализация схемы со встроенным редактором и отладчиком.[mit-scheme home]</dd><dt> Паскаль</dt><dd> Компилятор GNU Pascal. [дом паскаль]</dd><dt> Патч</dt><dd> Примените различия к оригиналам с дополнительными резервными копиями. [патч домой]</dd><dt> Pexec</dt><dd> Выполнять команду параллельно на нескольких хостах. [pexec home]</dd><dt> Пироги</dt><dd> Руководитель вызова и выполнения программы. [пирожки домой]</dd><dt> тычок</dt><dd> Редактирование произвольных двоичных данных. [тыкай домой]</dd><dt> Pythonwebkit</dt><dd> привязок W3C DOM к Webkit для использования с GTK и другими.[главная страница pythonwebkit]</dd><dt> Qexo</dt><dd> Реализация XQuery на Java с использованием GNU Kawa. [qexo home]</dd><dt> Раш</dt><dd> Оболочка пользователя (логина) с ограниченным доступом. [спешите домой]</dd><dt> Sather</dt><dd> Объектно-ориентированный язык, разработанный, чтобы быть простым, эффективным и безопасным. [sather home]</dd><dt> SCM</dt><dd> Реализация схемы. [scm home]</dd><dt> Экран</dt><dd> Полноэкранный оконный менеджер с несколькими терминалами. [главный экран]</dd><dt> Шмм</dt><dd> Утилита диспетчера общей памяти.[шмм домой]</dd><dt> Инструмент</dt><dd> Компиляция сценариев служебной оболочки в инструмент оболочки. [shtool home]</dd><dt> SLIB</dt><dd> Переносимая библиотека для Scheme. [slib home]</dd><dt> Smalltalk (smalltalk-база smalltalk-библиотеки болтовня)</dt><dd> Среда Smalltalk. [smalltalk home]</dd><dt> Суперопт</dt><dd> Супер-оптимизатор заданных функций. [superopt home]</dd><dt> Swbis</dt><dd> Утилиты для создания пакетов программного обеспечения POSIX. [swbis home]</dd><dt> Teseq</dt><dd> Анализируйте файлы с помощью управляющих последовательностей терминала для отладки.[teseq home]</dd><dt> Вмген</dt><dd> Генерация универсальной виртуальной машины, используемой gforth. [дом vmgen]</dd><dt> Матка</dt><dd> Репозиторий для работы GNU не предназначен для отдельных пакетов. [матка дома]</dd><dt> Xnee</dt><dd> Записывать, воспроизводить и распределять действия пользователя под X11. [xnee home]</dd></dl> См. Информацию об этом списке вверху.<h2><span class="ez-toc-section" id="MySQL_%D0%A1%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE_MySQL_80_13210_%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80_SELECT"> MySQL :: Справочное руководство MySQL 8.0 :: 13.2.10 Оператор SELECT </h2><li> <code> select_expr </code> может иметь псевдоним с использованием <code> AS <code> псевдоним </code> </code>.Псевдоним используется как имя столбца выражения и может использоваться в <code> ГРУППА ПО </code>, <code> ЗАКАЗАТЬ ПО </code>, или <code> ИМЕЕТ </code> пунктов. Например:<pre> <code> SELECT CONCAT (last_name, ',', first_name) AS полное_имя ИЗ mytable ORDER BY full_name; </code> </pre> Ключевое слово <code> AS </code> необязательно при псевдониме <code> select_expr </code> с идентификатором. В предыдущий пример можно было бы записать так:<pre> <code> SELECT CONCAT (last_name, ',', first_name) full_name ИЗ mytable ORDER BY full_name; </code> </pre> Однако, поскольку <code> AS </code> не является обязательным, может возникнуть небольшая проблема, если вы забудете запятую между двумя <code> select_expr </code> выражений: MySQL интерпретирует второе как псевдоним.Например, в следующий оператор, <code> columnb </code> рассматривается как псевдоним:<pre> <code> ВЫБРАТЬ columna columnb ИЗ mytable; </code> </pre> По этой причине рекомендуется иметь привычку используя <code> как </code> явно при указании столбца псевдонимы. Нельзя ссылаться на псевдоним столбца в <code> WHERE </code>, поскольку значение столбца может еще не быть определено, когда <code> WHERE </code> оговорка выполнена.См. Раздел B.3.4.4, «Проблемы с псевдонимами столбцов».</li><li> <code> ОТ <code> table_references </code> </code> пункт указывает таблицу или таблицы, из которых нужно получить строки. Если вы называете более одной таблицы, вы выполняете соединение. Для информацию о синтаксисе соединения см. Раздел 13.2.10.2, «Предложение JOIN». Для для каждой указанной таблицы вы можете дополнительно указать псевдоним.<pre> <code> имя_таблицы [[AS] псевдоним ] [ index_hint ] </code> </pre> Использование подсказок индексов предоставляет оптимизатору информацию о том, как выбирать индексы при обработке запроса. Для описание синтаксиса для указания этих подсказок см. Раздел 8.9.4, «Подсказки по индексу». Вы можете использовать <code> SET max_seeks_for_key = <code> значение </code> </code> как альтернативный способ заставить MySQL предпочесть сканирование ключей вместо сканирования таблицы.Видеть Раздел 5.1.8, «Системные переменные сервера».</li><li> Вы можете ссылаться на таблицу в базе данных по умолчанию как <code> имя_таблицы </code> , или как <code> db_name </code> . <code> имя_таблицы </code> чтобы явно указать базу данных. Вы можете ссылаться на столбец как <code> имя_столбца </code> , <code> имя_таблицы </code> . <code> имя_столбца </code> , или <code> db_name </code> . <code> имя_таблицы </code> . <code> имя_столбца </code> . Вам не нужно указывать <code> имя_таблицы </code> или <code> db_name </code> . <code> имя_таблицы </code> префикс для ссылки на столбец, если ссылка не будет двусмысленный. См. Раздел 9.2.2, «Квалификаторы идентификатора», для примеры неоднозначности, требующие более явного столбца справочные формы.</li><li> Ссылка на таблицу может быть псевдонимом, используя <code> <code> имя_таблицы </code> AS <code> псевдоним </code> </code> или <code> имя_таблицы псевдоним_имя </code> .Эти утверждения эквивалентны:<pre> <code> ВЫБРАТЬ t1.name, t2.salary ОТ сотрудника AS t1, информация AS t2 ГДЕ t1.name = t2.name; ВЫБЕРИТЕ t1.name, t2.salary ОТ сотрудника t1, информация t2 ГДЕ t1.name = t2.name; </code> </pre></li><li> Столбцы, выбранные для вывода, могут быть указаны в <code> ЗАКАЗАТЬ ПО </code> и <code> ГРУППА ПО </code> предложения с использованием имен столбцов, псевдонимов столбцов или столбцов позиции. Позиции столбцов являются целыми числами и начинаются с 1:<pre> <code> ВЫБЕРИТЕ колледж, регион, семя ИЗ турнира ЗАКАЗАТЬ ПО региону, посевной; ВЫБЕРИТЕ колледж, регион AS r, seed AS s ИЗ турнира ЗАКАЗАТЬ ПО r, s; ВЫБЕРИТЕ колледж, регион, семя ИЗ турнира ЗАКАЗАТЬ 2, 3; </code> </pre> Для сортировки в обратном порядке добавьте <code> DESC </code> (по убыванию) к имени столбца в <code> ORDER BY </code>, по которому выполняется сортировка.По умолчанию используется возрастающий порядок; это можно указать явно используя ключевое слово <code> ASC </code>. Если <code> ORDER BY </code> находится в скобках выражение запроса, а также применяется во внешнем запросе, результаты не определены и могут измениться в будущей версии MySQL. Использование позиций столбцов не рекомендуется, поскольку в синтаксисе есть был удален из стандарта SQL.</li><li> До MySQL 8.0.13 MySQL поддерживал нестандартный синтаксис. расширение, разрешающее явное <code> ASC </code> или <code> DESC </code> обозначения для <code> GROUP BY </code> колонн. MySQL 8.0.12 и выше поддерживает <code> ORDER BY </code> с функциями группировки, чтобы использование этого расширения больше не требуется. (Ошибка № 86312, Ошибка # 26073525) Это также означает, что вы можете сортировать по произвольному столбцу или столбцы при использовании <code> GROUP BY </code>, например:<pre> <code> ВЫБРАТЬ a, b, COUNT (c) AS t FROM test_table GROUP BY a, b ORDER BY a, t DESC; </code> </pre> Начиная с MySQL 8.0.13, расширение <code> GROUP BY </code> больше не поддерживается: <code> ASC </code> или <code> DESC </code> обозначения для <code> GROUP BY </code> столбцы не допускаются.</li><li> При использовании <code> ORDER BY </code> или <code> GROUP BY </code> для сортировки столбца в <code> SELECT </code>, сервер сортирует значения используя только начальное количество байтов, указанное <code> max_sort_length </code> система Переменная.</li><li> MySQL расширяет использование <code> GROUP BY </code>, чтобы разрешить выбор полей, не упомянутых в ГРУППЕ <code> BY </code> пункт. Если вы не получаете результатов, вы ожидаете от своего запроса, пожалуйста, прочтите описание <code> GROUP BY </code> найдено в Раздел 12.20, «Агрегатные функции».</li><li> <code> GROUP BY </code> разрешает <code> СО Модификатор ROLLUP </code>.Видеть Раздел 12.20.2, «Модификаторы GROUP BY». Ранее было запрещено использовать <code> ORDER BY </code> в запросе с <code> WITH Модификатор ROLLUP </code>. Это ограничение снято с MySQL 8.0.12. См. Раздел 12.20.2, «Модификаторы GROUP BY».</li><li> Предложение <code> HAVING </code>, как и <code> Предложение WHERE </code> указывает выбор условия.Пункт <code> WHERE </code> определяет условия для столбцов в списке выбора, но не могут ссылаться на агрегатные функции. Пункт <code> HAVING </code> определяет условия для групп, обычно формируемых <code> GROUP BY </code> пункт. Результат запроса включает только группы, удовлетворяющие <code> ИМЕЮЩИЕ </code> условия. (Если <code> GROUP BY </code> отсутствует, все строки неявно образуют единую совокупную группу.) Предложение <code> HAVING </code> применяется почти последним, непосредственно перед отправкой товаров клиенту, без оптимизация.(<code> LIMIT </code> применяется после <code> ИМЕЕТ </code>.) Стандарт SQL требует, чтобы <code> ИМЕЮЩИЙ </code> только ссылки на столбцы в <code> GROUP BY </code> предложение или столбцы, используемые в агрегатных функциях. Однако MySQL поддерживает расширение этого поведения и разрешает <code> ИМЕЕТ </code> для ссылки на столбцы в <code> ВЫБРАТЬ </code> список и столбцы в внешние подзапросы. Если предложение <code> HAVING </code> относится к столбцу что неоднозначно, появляется предупреждение. В следующих оператор, <code> col2 </code> неоднозначен, потому что он используется как псевдоним и как имя столбца:<pre> <code> ВЫБРАТЬ СЧЕТЧИК (столбец1) КАК столбец2 ИЗ t ГРУППА ПО столбцу2 ИМЕЕТ столбец2 = 2; </code> </pre> Предпочтение отдается стандартному поведению SQL, поэтому, если <code> ИМЕЕТ имя столбца </code>, которое используется как в <code> GROUP BY </code> и как столбец с псевдонимом в выберите список столбцов, предпочтение отдается столбцу в <code> ГРУППА ПО </code> столбец.</li><li> Не используйте <code> ИМЕЮЩУЮ </code> для предметов, которые должны быть в пункте <code> WHERE </code>. Например, не напишите следующее:<pre> <code> ВЫБРАТЬ имя_столбца ИЗ имя_таблицы ИМЕЕТ имя_столбца > 0; </code> </pre> Напишите вместо этого:<pre> <code> ВЫБРАТЬ имя_столбца ИЗ имя_таблицы ГДЕ имя_столбца > 0; </code> </pre></li><li> Предложение <code> HAVING </code> может относиться к совокупному функции, которые предложение <code> WHERE </code> не может:<pre> <code> ВЫБРАТЬ пользователя, МАКС. (Зарплата) ИЗ пользователей ГРУППА ПО ПОЛЬЗОВАТЕЛЯМ ИМЕЮЩИМ MAX (зарплата)> 10; </code> </pre> (Это не работало в некоторых старых версиях MySQL.)</li><li> MySQL допускает повторяющиеся имена столбцов. То есть может быть более одного <code> select_expr </code> с то же имя. Это расширение стандартного SQL. Поскольку MySQL также разрешает <code> GROUP BY </code> и <code> ИМЕЕТ </code> для обозначения <code> select_expr </code> значений, это может привести в двусмысленности:<pre> <code> ВЫБРАТЬ 12 КАК a, a ИЗ t GROUP BY a; </code> </pre> В этом заявлении оба столбца имеют имя <code> а </code>.Чтобы убедиться, что правильный столбец используется для группировки, используйте разные имена для каждого <code> select_expr </code> .</li><li> Предложение <code> WINDOW </code>, если присутствует, определяет именованные окна, на которые могут ссылаться оконные функции. Для подробности см. в Раздел 12.21.4, «Именованные окна».</li><li> MySQL разрешает неквалифицированные ссылки на столбцы или псевдонимы в <code> ORDER BY </code>, выполнив поиск в <code> select_expr </code> значений, затем в столбцы таблиц в разделе <code> FROM </code>.Для <code> GROUP BY </code> или <code> ИМЕЕТ </code> предложений, он ищет предложение <code> FROM </code> перед поиск в <code> select_expr </code> ценности. (Для <code> GROUP BY </code> и <code> ИМЕЕТ </code>, это отличается от версии до MySQL 5.0. поведение, использующее те же правила, что и для <code> ORDER BY </code>.)</li><li> Предложение <code> LIMIT </code> может использоваться для ограничения количество строк, возвращаемых <code> SELECT </code> заявление.<code> LIMIT </code> принимает один или два числовых аргумента, которые оба должны быть неотрицательными целыми константами, с этими исключения:<ul><li> В подготовленных отчетах <code> LIMIT </code> параметры можно указать с помощью <code>? </code> маркеры-заполнители.</li><li> Внутри сохраненных программ <code> LIMIT </code> параметры могут быть указаны с использованием целочисленной подпрограммы параметры или локальные переменные.</li></ul> С двумя аргументами первый аргумент указывает смещение первая строка для возврата, а вторая определяет максимум количество возвращаемых строк. Смещение начальной строки 0 (не 1):<pre> <code> ВЫБРАТЬ * ИЗ ТАБЛИЦЫ LIMIT 5,10; # Получить строки 6-15 </code> </pre> Чтобы получить все строки от определенного смещения до конца набор результатов, вы можете использовать какое-то большое число для второго параметр.Этот оператор извлекает все строки из 96-й строки до конца:<pre> <code> ВЫБРАТЬ * ИЗ ТАБЛИЦЫ LIMIT 95,18446744073709551615; </code> </pre> С одним аргументом значение указывает количество строк для возврат из начала набора результатов:<pre> <code> ВЫБРАТЬ * ИЗ ТАБЛИЦЫ LIMIT 5; # Получить первые 5 строк </code> </pre> Другими словами, <code> LIMIT <code> row_count </code> </code> эквивалентно до <code> LIMIT 0, <code> row_count </code> </code>. Для подготовленных операторов вы можете использовать заполнители. В следующие операторы возвращают одну строку из <code> табл. </code> стол:<pre> <code> НАБОР @ a = 1; ПОДГОТОВИТЬ STMT ИЗ 'SELECT * FROM tbl LIMIT?'; ВЫПОЛНИТЬ STMT, ИСПОЛЬЗУЯ @a; </code> </pre> Следующие операторы возвращают строки со второй по шестую из таблица <code> tbl </code>:<pre> <code> SET @ skip = 1; НАБОР @ numrows = 5; ПОДГОТОВИТЬ STMT ИЗ 'SELECT * FROM tbl LIMIT?,?'; ВЫПОЛНИТЕ STMT, ИСПОЛЬЗУЯ @skip, @numrows; </code> </pre> Для совместимости с PostgreSQL MySQL также поддерживает <code> LIMIT <code> row_count </code> OFFSET <code> смещение </code> </code> синтаксис. Если <code> LIMIT </code> встречается в скобках выражение запроса, а также применяется во внешнем запросе, результаты не определены и могут измениться в будущей версии MySQL.</li><li> <code> SELECT ... ШТО </code> форма <code> ВЫБЕРИТЕ </code> позволяет записать результат запроса в файл или сохранить в переменные. Для получения дополнительной информации см. Раздел 13.2.10.1, «Заявление SELECT … INTO».</li><li> Если вы используете <code> FOR UPDATE </code> с механизмом хранения который использует блокировку страниц или строк, строки, проверенные запросом, заблокирован от записи до конца текущей транзакции. Вы не можете использовать <code> FOR UPDATE </code> как часть <code> ВЫБЕРИТЕ </code> в таком заявлении, как <code> СОЗДАТЬ ТАБЛИЦА <code> new_table </code> SELECT... ИЗ <code> старая_таблица </code> ... </code>. (Если ты попытка сделать это, утверждение отклоняется с ошибкой Не могу обновить таблицу ‘ <code> old_table </code> ‘, а ‘ <code> new_table </code> ‘ находится созданный.) <code> ДЛЯ АКЦИИ </code> и <code> БЛОКИРОВКА ДОЛИ MODE </code> устанавливает общие блокировки, которые разрешают другие транзакции читать проверенные строки, но не обновлять или удалять их.<code> ДЛЯ АКЦИИ </code> и <code> БЛОКИРОВКА ДОЛИ MODE </code> эквивалентны. Однако <code> ДЛЯ SHARE </code>, как и <code> FOR UPDATE </code>, поддерживает <code> NOWAIT </code>, <code> SKIP LOCKED </code> и <code> OF <code> имя_таблицы </code> </code> параметры. <code> ДЛЯ АКЦИИ </code> является заменой <code> БЛОКИРОВКА В РЕЖИМЕ SHARE </code>, но <code> БЛОКИРОВКА SHARE MODE </code> остается доступным для обратной совместимость. <code> NOWAIT </code> вызывает <code> FOR ОБНОВЛЕНИЕ </code> или <code> ДЛЯ ПОДЕЛИТЬСЯ </code> запрос на выполнить немедленно, возвращая ошибку, если блокировка строки не может быть полученным из-за блокировки, удерживаемой другой транзакцией. <code> ПРОПУСТИТЬ ЗАБЛОКИРОВАН </code> вызывает <code> ДЛЯ ОБНОВЛЕНИЕ </code> или <code> ДЛЯ ПОДЕЛИТЬСЯ </code> запрос на выполнить немедленно, исключая строки из набора результатов, которые заблокированы другой транзакцией. <code> NOWAIT </code> и <code> ПРОПУСТИТЬ ЗАБЛОКИРОВАНО </code> параметры небезопасны для репликации на основе операторов. Примечание Запросы, пропускающие заблокированные строки, возвращают несогласованное представление данные. <code> ПРОПУСТИТЬ ЗАБЛОКИРОВАН </code>, следовательно, не подходит для общей транзакционной работы. Однако это может быть используется, чтобы избежать конфликта блокировок при доступе к нескольким сеансам та же таблица, похожая на очередь. <code> OF <code> имя_таблицы </code> </code> применяется <code> ДЛЯ ОБНОВЛЕНИЯ </code> и <code> ДЛЯ ПОДЕЛИТЬСЯ </code> запросов к именованным таблицам. Например:<pre> <code> ВЫБРАТЬ * ИЗ t1, t2 ДЛЯ ДОЛЯ t1 ДЛЯ ОБНОВЛЕНИЯ t2; </code> </pre> Все таблицы, на которые ссылается блок запроса, блокируются, когда <code> OF <code> имя_таблицы </code> </code> есть опущено. Следовательно, использование предложения блокировки без <code> OF <code> имя_таблицы </code> </code> дюйм комбинация с другим предложением блокировки возвращает ошибку.Указание одной и той же таблицы в нескольких блокирующих предложениях возвращает ошибка. Если псевдоним указан как имя таблицы в <code> SELECT </code>, предложение блокировки может только используйте псевдоним. Если оператор <code> SELECT </code> делает не указывать псевдоним явно, предложение блокировки может только укажите фактическое имя таблицы. Для получения дополнительной информации о <code> ДЛЯ ОБНОВЛЕНИЯ </code> и <code> ДЛЯ АКЦИИ </code> см.</div><footer class="entry-footer"> Category <a href="https://pyobjc.ru/category/html" rel="category tag">Html</a></footer></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://pyobjc.ru/raznoe/udalennyj-programmist-rabota-programmistom-na-domu-vakansii-programmista-udalenno-v-v-moskve-na-superjob.html" rel="prev">Удаленный программист: Работа программистом на дому, вакансии программиста удаленно в в Москве на SuperJob</a></div><div class="nav-next"><a href="https://pyobjc.ru/raznoe/chto-takoe-pr-eto-page-not-found-sendpulse-blog.html" rel="next">Что такое pr это: Page not found | SendPulse Blog</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-manual-spravochnik-po-html-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></h3><form action="https://pyobjc.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate>Ваш адрес email не будет опубликован. Обязательные поля помечены *<label for="comment">Комментарий *</label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea><label for="author">Имя *</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /><label for="email">Email *</label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='6816' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></form></div></div></div><div class="col-lg-4"><aside id="secondary" class="widget-area"><section id="archives-2" class="widget widget_archive"><h2 class="widget-title">Архивы</h2><ul><li><a href='https://pyobjc.ru/2024/11'>Ноябрь 2024</a></li><li><a href='https://pyobjc.ru/2024/10'>Октябрь 2024</a></li><li><a href='https://pyobjc.ru/2019/11'>Ноябрь 2019</a></li><li><a href='https://pyobjc.ru/2019/10'>Октябрь 2019</a></li><li><a href='https://pyobjc.ru/2019/09'>Сентябрь 2019</a></li><li><a href='https://pyobjc.ru/2019/08'>Август 2019</a></li><li><a href='https://pyobjc.ru/2019/07'>Июль 2019</a></li><li><a href='https://pyobjc.ru/2019/06'>Июнь 2019</a></li><li><a href='https://pyobjc.ru/2019/05'>Май 2019</a></li><li><a href='https://pyobjc.ru/2019/04'>Апрель 2019</a></li><li><a href='https://pyobjc.ru/2019/03'>Март 2019</a></li><li><a href='https://pyobjc.ru/2019/02'>Февраль 2019</a></li><li><a href='https://pyobjc.ru/2019/01'>Январь 2019</a></li><li><a href='https://pyobjc.ru/2018/12'>Декабрь 2018</a></li><li><a href='https://pyobjc.ru/2018/11'>Ноябрь 2018</a></li><li><a href='https://pyobjc.ru/2018/10'>Октябрь 2018</a></li><li><a href='https://pyobjc.ru/2018/09'>Сентябрь 2018</a></li><li><a href='https://pyobjc.ru/1983/07'>Июль 1983</a></li><li><a href='https://pyobjc.ru/1983/06'>Июнь 1983</a></li><li><a href='https://pyobjc.ru/1983/05'>Май 1983</a></li><li><a href='https://pyobjc.ru/1983/04'>Апрель 1983</a></li><li><a href='https://pyobjc.ru/1983/03'>Март 1983</a></li><li><a href='https://pyobjc.ru/1983/02'>Февраль 1983</a></li><li><a href='https://pyobjc.ru/1983/01'>Январь 1983</a></li><li><a href='https://pyobjc.ru/1982/12'>Декабрь 1982</a></li><li><a href='https://pyobjc.ru/1982/11'>Ноябрь 1982</a></li><li><a href='https://pyobjc.ru/1982/10'>Октябрь 1982</a></li><li><a href='https://pyobjc.ru/1982/09'>Сентябрь 1982</a></li><li><a href='https://pyobjc.ru/1982/08'>Август 1982</a></li><li><a href='https://pyobjc.ru/1982/07'>Июль 1982</a></li><li><a href='https://pyobjc.ru/1982/01'>Январь 1982</a></li><li><a href='https://pyobjc.ru/1981/12'>Декабрь 1981</a></li><li><a href='https://pyobjc.ru/1981/11'>Ноябрь 1981</a></li><li><a href='https://pyobjc.ru/1981/10'>Октябрь 1981</a></li><li><a href='https://pyobjc.ru/1981/09'>Сентябрь 1981</a></li><li><a href='https://pyobjc.ru/1981/08'>Август 1981</a></li><li><a href='https://pyobjc.ru/1981/07'>Июль 1981</a></li><li><a href='https://pyobjc.ru/1981/06'>Июнь 1981</a></li><li><a href='https://pyobjc.ru/1981/05'>Май 1981</a></li><li><a href='https://pyobjc.ru/1981/04'>Апрель 1981</a></li><li><a href='https://pyobjc.ru/1981/03'>Март 1981</a></li><li><a href='https://pyobjc.ru/1981/02'>Февраль 1981</a></li><li><a href='https://pyobjc.ru/1981/01'>Январь 1981</a></li><li><a href='https://pyobjc.ru/1980/12'>Декабрь 1980</a></li><li><a href='https://pyobjc.ru/1980/11'>Ноябрь 1980</a></li><li><a href='https://pyobjc.ru/1980/10'>Октябрь 1980</a></li><li><a href='https://pyobjc.ru/1980/09'>Сентябрь 1980</a></li><li><a href='https://pyobjc.ru/1980/08'>Август 1980</a></li><li><a href='https://pyobjc.ru/1980/07'>Июль 1980</a></li><li><a href='https://pyobjc.ru/1980/06'>Июнь 1980</a></li><li><a href='https://pyobjc.ru/1980/05'>Май 1980</a></li><li><a href='https://pyobjc.ru/1980/04'>Апрель 1980</a></li><li><a href='https://pyobjc.ru/1980/03'>Март 1980</a></li><li><a href='https://pyobjc.ru/1980/02'>Февраль 1980</a></li><li><a href='https://pyobjc.ru/1980/01'>Январь 1980</a></li><li><a href='https://pyobjc.ru/1979/12'>Декабрь 1979</a></li><li><a href='https://pyobjc.ru/1979/11'>Ноябрь 1979</a></li><li><a href='https://pyobjc.ru/1979/10'>Октябрь 1979</a></li><li><a href='https://pyobjc.ru/1979/09'>Сентябрь 1979</a></li><li><a href='https://pyobjc.ru/1979/08'>Август 1979</a></li><li><a href='https://pyobjc.ru/1979/07'>Июль 1979</a></li><li><a href='https://pyobjc.ru/1979/06'>Июнь 1979</a></li><li><a href='https://pyobjc.ru/1979/05'>Май 1979</a></li><li><a href='https://pyobjc.ru/1979/04'>Апрель 1979</a></li><li><a href='https://pyobjc.ru/1979/03'>Март 1979</a></li><li><a href='https://pyobjc.ru/1979/02'>Февраль 1979</a></li><li><a href='https://pyobjc.ru/1979/01'>Январь 1979</a></li><li><a href='https://pyobjc.ru/1978/12'>Декабрь 1978</a></li><li><a href='https://pyobjc.ru/1978/11'>Ноябрь 1978</a></li><li><a href='https://pyobjc.ru/1978/10'>Октябрь 1978</a></li><li><a href='https://pyobjc.ru/1978/09'>Сентябрь 1978</a></li><li><a href='https://pyobjc.ru/1978/08'>Август 1978</a></li><li><a href='https://pyobjc.ru/1978/07'>Июль 1978</a></li><li><a href='https://pyobjc.ru/1978/06'>Июнь 1978</a></li><li><a href='https://pyobjc.ru/1978/05'>Май 1978</a></li><li><a href='https://pyobjc.ru/1978/04'>Апрель 1978</a></li><li><a href='https://pyobjc.ru/1978/03'>Март 1978</a></li><li><a href='https://pyobjc.ru/1978/02'>Февраль 1978</a></li><li><a href='https://pyobjc.ru/1978/01'>Январь 1978</a></li><li><a href='https://pyobjc.ru/1977/12'>Декабрь 1977</a></li><li><a href='https://pyobjc.ru/1977/11'>Ноябрь 1977</a></li><li><a href='https://pyobjc.ru/1977/10'>Октябрь 1977</a></li><li><a href='https://pyobjc.ru/1977/09'>Сентябрь 1977</a></li><li><a href='https://pyobjc.ru/1977/08'>Август 1977</a></li><li><a href='https://pyobjc.ru/1977/07'>Июль 1977</a></li><li><a href='https://pyobjc.ru/1977/06'>Июнь 1977</a></li><li><a href='https://pyobjc.ru/1977/05'>Май 1977</a></li><li><a href='https://pyobjc.ru/1977/04'>Апрель 1977</a></li><li><a href='https://pyobjc.ru/1977/03'>Март 1977</a></li><li><a href='https://pyobjc.ru/1977/02'>Февраль 1977</a></li><li><a href='https://pyobjc.ru/1977/01'>Январь 1977</a></li><li><a href='https://pyobjc.ru/1976/12'>Декабрь 1976</a></li><li><a href='https://pyobjc.ru/1976/11'>Ноябрь 1976</a></li><li><a href='https://pyobjc.ru/1976/10'>Октябрь 1976</a></li><li><a href='https://pyobjc.ru/1976/09'>Сентябрь 1976</a></li><li><a href='https://pyobjc.ru/1976/08'>Август 1976</a></li><li><a href='https://pyobjc.ru/1976/07'>Июль 1976</a></li><li><a href='https://pyobjc.ru/1976/06'>Июнь 1976</a></li><li><a href='https://pyobjc.ru/1976/05'>Май 1976</a></li><li><a href='https://pyobjc.ru/1976/04'>Апрель 1976</a></li><li><a href='https://pyobjc.ru/1976/03'>Март 1976</a></li><li><a href='https://pyobjc.ru/1976/02'>Февраль 1976</a></li><li><a href='https://pyobjc.ru/1976/01'>Январь 1976</a></li><li><a href='https://pyobjc.ru/1975/12'>Декабрь 1975</a></li><li><a href='https://pyobjc.ru/1975/11'>Ноябрь 1975</a></li><li><a href='https://pyobjc.ru/1975/10'>Октябрь 1975</a></li><li><a href='https://pyobjc.ru/1975/09'>Сентябрь 1975</a></li><li><a href='https://pyobjc.ru/1975/08'>Август 1975</a></li><li><a href='https://pyobjc.ru/1975/07'>Июль 1975</a></li><li><a href='https://pyobjc.ru/1975/06'>Июнь 1975</a></li><li><a href='https://pyobjc.ru/1975/05'>Май 1975</a></li><li><a href='https://pyobjc.ru/1975/04'>Апрель 1975</a></li><li><a href='https://pyobjc.ru/1975/03'>Март 1975</a></li><li><a href='https://pyobjc.ru/1975/02'>Февраль 1975</a></li><li><a href='https://pyobjc.ru/1975/01'>Январь 1975</a></li><li><a href='https://pyobjc.ru/1974/12'>Декабрь 1974</a></li><li><a href='https://pyobjc.ru/1974/11'>Ноябрь 1974</a></li><li><a href='https://pyobjc.ru/1974/10'>Октябрь 1974</a></li><li><a href='https://pyobjc.ru/1974/09'>Сентябрь 1974</a></li><li><a href='https://pyobjc.ru/1974/08'>Август 1974</a></li><li><a href='https://pyobjc.ru/1974/07'>Июль 1974</a></li><li><a href='https://pyobjc.ru/1974/06'>Июнь 1974</a></li><li><a href='https://pyobjc.ru/1974/05'>Май 1974</a></li><li><a href='https://pyobjc.ru/1974/04'>Апрель 1974</a></li><li><a href='https://pyobjc.ru/1974/03'>Март 1974</a></li><li><a href='https://pyobjc.ru/1974/02'>Февраль 1974</a></li><li><a href='https://pyobjc.ru/1974/01'>Январь 1974</a></li><li><a href='https://pyobjc.ru/1973/12'>Декабрь 1973</a></li><li><a href='https://pyobjc.ru/1973/11'>Ноябрь 1973</a></li><li><a href='https://pyobjc.ru/1973/10'>Октябрь 1973</a></li><li><a href='https://pyobjc.ru/1973/09'>Сентябрь 1973</a></li><li><a href='https://pyobjc.ru/1973/08'>Август 1973</a></li><li><a href='https://pyobjc.ru/1973/07'>Июль 1973</a></li><li><a href='https://pyobjc.ru/1973/06'>Июнь 1973</a></li><li><a href='https://pyobjc.ru/1973/05'>Май 1973</a></li><li><a href='https://pyobjc.ru/1973/04'>Апрель 1973</a></li><li><a href='https://pyobjc.ru/1973/03'>Март 1973</a></li><li><a href='https://pyobjc.ru/1973/02'>Февраль 1973</a></li><li><a href='https://pyobjc.ru/1973/01'>Январь 1973</a></li><li><a href='https://pyobjc.ru/1972/12'>Декабрь 1972</a></li><li><a href='https://pyobjc.ru/1972/11'>Ноябрь 1972</a></li><li><a href='https://pyobjc.ru/1972/10'>Октябрь 1972</a></li><li><a href='https://pyobjc.ru/1972/09'>Сентябрь 1972</a></li><li><a href='https://pyobjc.ru/1972/08'>Август 1972</a></li><li><a href='https://pyobjc.ru/1972/07'>Июль 1972</a></li><li><a href='https://pyobjc.ru/1972/06'>Июнь 1972</a></li><li><a href='https://pyobjc.ru/1972/05'>Май 1972</a></li><li><a href='https://pyobjc.ru/1972/04'>Апрель 1972</a></li><li><a href='https://pyobjc.ru/1972/03'>Март 1972</a></li><li><a href='https://pyobjc.ru/1972/02'>Февраль 1972</a></li><li><a href='https://pyobjc.ru/1972/01'>Январь 1972</a></li><li><a href='https://pyobjc.ru/1971/12'>Декабрь 1971</a></li><li><a href='https://pyobjc.ru/1971/11'>Ноябрь 1971</a></li><li><a href='https://pyobjc.ru/1971/10'>Октябрь 1971</a></li><li><a href='https://pyobjc.ru/1971/09'>Сентябрь 1971</a></li><li><a href='https://pyobjc.ru/1971/08'>Август 1971</a></li><li><a href='https://pyobjc.ru/1971/07'>Июль 1971</a></li><li><a href='https://pyobjc.ru/1971/06'>Июнь 1971</a></li><li><a href='https://pyobjc.ru/1971/05'>Май 1971</a></li><li><a href='https://pyobjc.ru/1971/04'>Апрель 1971</a></li><li><a href='https://pyobjc.ru/1971/02'>Февраль 1971</a></li><li><a href='https://pyobjc.ru/1971/01'>Январь 1971</a></li><li><a href='https://pyobjc.ru/1970/12'>Декабрь 1970</a></li><li><a href='https://pyobjc.ru/1970/11'>Ноябрь 1970</a></li><li><a href='https://pyobjc.ru/1970/10'>Октябрь 1970</a></li><li><a href='https://pyobjc.ru/1970/09'>Сентябрь 1970</a></li><li><a href='https://pyobjc.ru/1970/08'>Август 1970</a></li><li><a href='https://pyobjc.ru/1970/07'>Июль 1970</a></li><li><a href='https://pyobjc.ru/1970/06'>Июнь 1970</a></li><li><a href='https://pyobjc.ru/1970/05'>Май 1970</a></li><li><a href='https://pyobjc.ru/1970/04'>Апрель 1970</a></li><li><a href='https://pyobjc.ru/1970/03'>Март 1970</a></li><li><a href='https://pyobjc.ru/1970/02'>Февраль 1970</a></li><li><a href='https://pyobjc.ru/1970/01'>Январь 1970</a></li></ul></section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2><ul><li class="cat-item cat-item-6"><a href="https://pyobjc.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://pyobjc.ru/category/html">Html</a></li><li class="cat-item cat-item-11"><a href="https://pyobjc.ru/category/js">Js</a></li><li class="cat-item cat-item-5"><a href="https://pyobjc.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-8"><a href="https://pyobjc.ru/category/verstk">Верстк</a></li><li class="cat-item cat-item-10"><a href="https://pyobjc.ru/category/idei">Идеи</a></li><li class="cat-item cat-item-3"><a href="https://pyobjc.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-9"><a href="https://pyobjc.ru/category/chego-nachat">Чего начать</a></li><li class="cat-item cat-item-7"><a href="https://pyobjc.ru/category/shablon">Шаблон</a></li></ul></section><section id="meta-2" class="widget widget_meta"><h2 class="widget-title">Мета</h2><ul><li><a href="https://pyobjc.ru/wp-login.php">Войти</a></li><li><a href="https://pyobjc.ru/feed">Лента записей</a></li><li><a href="https://pyobjc.ru/comments/feed">Лента комментариев</a></li><li><a href="https://ru.wordpress.org/">WordPress.org</a></li></ul></section></aside></div></div></div></div><footer class="footer-area"><div class="container"><div class="row"><div class="col-lg-12"><div class="copyright"> Перепечатка и любое использование материалов сайта допускается только с разрешения автора © 2008-2024 Evgeniy Krysanov Карта Сайта</div></div></div></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://pyobjc.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </body></html>