Wondershare EdrawMind
- 5
HTML
Эта интеллектуальная карта HTML делится знаниями о стилях, тегах и атрибутах веб-страниц. Если вам интересно, вы можете посмотреть.
Отредактировано в 2023-05-27 23:46:10
- Рекомендовано вам
- Структура
HTML
Веб-стиль<br>
Селектор
Выбор тегов<br>
Имя тега {имя атрибута: атрибут; имя атрибута: атрибут</br>
Выбор класса<br>
.Имя тега {имя атрибута: атрибут; имя атрибута: атрибут</br>
Селектор идентификатора<br>
#id{Имя атрибута: атрибут; Имя атрибута: атрибут<br>
<pre class="prettyprint linenums Prettyprinted"><code class="language-html"><span class="tag"><h1 style="font-size:18px">Как использовать встроенный формат</h1>< /span></code></pre>
<span style="font-family: 'Wawati SC';">Имя тега, имя .class, #ID</span><span style="font-family: 'Wawati SC';"><span style=" font-family:Wawati SC">｛</span>Выбор объединения</span><span style="font-family:Wawati SC">｝</span>
<span style="font-family:Wawati SC">Имя тега.Имя класса {Селектор пересечения</span>
<span style="font-family: 'Wawati SC';">Имя внешнего тегаИмя внутреннего тега</span><span style="font-family: 'Wawati SC';"><span style="font-family : Wawati SC">｛</span>Выбор потомка</span><span style="font-family:Wawati SC">｝</span>
Как представить стили CSS<br>
Встроенные стили<br>
Встроить стили<br>
<pre class="prettyprint linenums Prettyprinted"><code class="language-html"><span class="tag"><head><style type="test/css"> h1{Имя атрибута: атрибут;</ /style></head></span></code></pre>
Импортировать стили<br>
<link href="Имя файла стиля" type="Формат текста/файла ссылки CSS" rel="stylesheet" внешняя таблица стилей документа/><br>
Указывает связь между текущим документом и связанным документом. Только таблица стилей применима ко всем браузерам.
подтема
Свойства CSS<br>
тип
Тип шрифта: семейство шрифтов<br>
Отрисовка шрифта: text-shadow<br>
Размер шрифта: размер шрифта<br>
Стиль шрифта: стиль шрифта<br>
косой, слегка наклоненный<br>
курсив<br>
Вес шрифта: font-weight<br>
Прописные буквы шрифта: font-variant<br>
Атрибут шрифта: шрифт
шрифт {стиль, вес, размер, тип<br>
Стиль оформления текста: text-decoration<br>
Подчеркивание: подчеркнуть<br>
Зачеркивание: сквозное<br>
Цвет: цвет<br>
Справочная информация<br>
Цвет фона: цвет фона<br>
Фоновое изображение: фоновое изображение<br>
Метод повторения фонового изображения:akeground-repeat<br>
Начальная позиция фонового изображения по осям X и Y: background-position<br>
Ассоциация с фоном: background-attachment: исправлено (фон не прокручивается вместе с текстом)<br>
блокировать
интервал между словами: межсловный интервал
Расстояние между буквами: межбуквенный интервал<br>
Вертикальное выравнивание по тексту: вертикальное выравнивание, текстовое выравнивание<br>
Отступ первой строки: text-indent<br>
Режим отображения: дисплей<br>
Высота строки: высота строки
Коробчатая модель<br>
Определите ширину и высоту: width,height<br>
Отступ сверху, снизу, слева и справа: отступ сверху, справа, снизу, слева<br>
Внешние поля сверху, снизу, слева и справа: поле сверху, справа, снизу, слева<br>
поле: 0 пикселей авто; веб-страница по центру<br>
Граница: граница<br>
Стиль границы: стиль; толщина границы: ширина; цвет границы вверх, вниз, влево и вправо<br>
<pre>стиль границы: пунктирная, сплошная, двойная, пунктирная </pre>
Дисплей управляет отображением и скрытием элементов<br>
display:block отображает элемент как элемент уровня блока с разрывами строк до и после<br>
display:inline отображает элементы как элементы дорожки без разрывов строк<br>
display:none скрывает элемент<br>
плавать<br>
плавать<br>
очиститьочистить с плавающей запятой<br>
очистить левое и правое плавающее пространство<br>
обработка переполнения поля<br>
Видимый контент будет обрезан, а обрезанный контент появится за пределами рамки<br>
Скрытый контент будет обрезан, а остальная часть контента станет невидимой<br>
позиция
позиция
относительное позиционирование<br>
появится там, где он есть, позволяя элементу перемещаться «относительно» его начала.
абсолютное позиционирование<br>
Поле элемента, для которого установлено абсолютное позиционирование, полностью удаляется из потока документов и позиционируется относительно содержащего его блока, который может быть другим элементом в документе или исходным содержащим блоком. Пространство, ранее занимаемое элементом в обычном потоке документов, закрывается, как если бы элемент не существовал. Элемент генерирует блок уровня блока после позиционирования, независимо от того, какой тип блока он изначально создал в обычном потоке.
Уровень настройки z-индекса<br>
список
Тип номера элемента: list-style-type<br>
Изображение номера элемента: list-style-image<br>
Позиция метки элемента: list-style-position<br>
внутренний тег отображается внутри<br>
Тег onside отображается снаружи<br>
Псевдокласс гиперссылки<br>
Стиль гиперссылки при доступе без нажатия ссылки:link
Стиль гиперссылки после нажатия на ссылку:visited
Стиль гиперссылки, на которой наводится указатель мыши: hover
Стиль гиперссылки, когда щелчок мыши не отпускается: активный
Установить форму мыши: курсор<br>
Курсор по умолчанию: по умолчанию<br>
Указатель гиперссылки: указатель<br>
пролет {курсор: указатель;}
Указывает, что программа занята: подождите<br>
Указывает на доступную помощь: help<br>
Текст инструкции: текст
Теги и атрибуты<br>
Текст между <html> и </html>, описывающий веб-страницу.
Текст между <head> и </head> — это видимый контент в заголовке веб-страницы<br>
Текст между <title> и </title> — это заголовок веб-страницы<br>
Текст между <body> и </body> — это видимое содержимое страницы.
Текст между <h1> и </h6> отображается в качестве заголовка.
Текст между <p> и </p> отображается в виде абзаца.
<br/> Разрыв строки <hr/> Горизонтальная линия<br>
Текст между <em> и </em> <i> и </i> выделен курсивом<br>
Текст между <strong> и </strong> выделен<br>
Изображения <img/> и </img>HTML определяются с помощью тега <img>.
<pre><img src="Адрес изображения" width="width" height="length" <code>alt="</code><code>Используется для определения строки подготовленного заменяемого текста для изображения"</ code > title="Наведение курсора для отображения текста"/></pre>
HTML-ссылки <a> и </a> определяются с помощью тега <a>.
·······
Привязная ссылка (переход к указанному тегу): <a href="#name"></a><p name="name"></p>
специальные символы
Космос<br>
> Знак "больше"
< Знак меньше
&копия символа авторского права©
www.w3school.com.cn
<meta> и </meta> определяют формат кодирования<br>
UTF-8, GB2312, ГБК<br>
<meta charset="UTF-8"></meta><br>
<link> и </link> используются для представления стилей CSS<br>
список
<ul><li> С </li></ul> неупорядоченным списком<br>
Тип атрибута: диск, сплошной круг, квадратная рамка, круг, полый круг<br>
<ol><li> и </li></ol> упорядоченный список<br>
Тип атрибута: 1aAIi<br>
<dl><dt><dd> и </dd>Примечания</dt></dl> Список определений<br>
Табличные теги <table> и </table>, внутри которых можно вкладывать списки<br>
<th> и </th> определяют заголовок<br>
<tr> и </tr> определяют строки таблицы<br>
<td> и </td> определяют ячейки таблицы<br>
<thead> и </thead> <tbody> и </tbody> <tfoot> и </tfoot>. . .
Свойства (выравнивание по горизонтали: по левому краю, по центру, по правому краю; выравнивание по центру изображения по центру<br> вертикальное выравнивание valign: выравнивание по верхнему краю, выравнивание по центру по центру, выравнивание по нижнему краю, выравнивание по базовой линии)
<table border="1" cellpadding="Интервал между ячейками и содержимым" cellpacing="Прямой интервал между ячейками''"></table>
Объединить colspan по горизонтали, объединить список rowspan <br>
<frameset> и </frameset> (написаны вне тела)
Атрибуты (определить горизонтальную сортировку рамки cols="200px,*,100px" строки вертикальной сортировки)<br>
<frame src="Адрес другой веб-страницы" name="Имя, по которому легко перейти"/>
<iframe> и </iframe>
Теги форм <form> и </form>, элементы формы могут быть вложены внутрь<br>
<pre><form action="Отправленный веб-сайт" метод="GET или POST"></pre>
<p>Если отправка формы является пассивной (например, запрос поисковой системы) и не содержит конфиденциальной информации. При использовании GET данные формы отображаются в адресной строке страницы.</p><p>Если форма обновляет данные или содержит конфиденциальную информацию (например, пароль). POST более безопасен, поскольку данные, отправленные в адресную строку страницы, невидимы. </p>
<input name="Имя элемента" type="Тип" value="Значение" size="Ширина дисплея" maxlength="Длина символа" проверено="Независимо от того, выбрано ли оно" отключено="отключено" readonly="только для чтения, только для чтения" > <br>
<em><input type="text"></em> определяет однострочное поле ввода для <em>текстового ввода</em>
<pre><input type="text" name="lastname"></pre>
<em><input type="password"></em> определяет <em>поле пароля</em>.
<pre><input type="password" name="lastname"></pre>
<em><input type="radio"></em> определяет <em>переключатель</em>.
<pre><input type="radio" name="sex" (названия одинаковых переключателей должны совпадать) value="female">Female</pre>
<em><input type="checkbox" name="Имена между флажками должны совпадать"></em> Определите <em>флажок</em>.
<em><input type="submit"></em> определяет кнопку для <em></em><em>отправки</em> формы.
<em><input type="reset"></em> Определяет кнопку для <em></em><em>сброса</em> формы.
<em><input type="button"></em> определяет обычную кнопку для формы <em></em><em></em>.
<pre><button type="button" onclick="alert('Hello World!')">Нажмите на меня!</button></pre>
<em><input type="file"></em> определяет <em></em><em>поле выбора файла</em>.
<input type="hidden">скрытое поле<br>
<em><select></em> Определите <em>раскрывающийся список</em><em><em><option></em> Определите параметры, которые будут выбраны</option></select> </ем>
<pre><select name="cars" size="Длина каждого вхождения"><br><option value="volvo"<em></em> selected = "selected" (выбрано по умолчанию)>Volvo</ option><br><option value="saab">Saab</option><br><option value="fiat">Fiat</option><br><option value="audi">Audi</option> <br></select></pre>
Элемент <em><textarea></em> определяет многострочное поле ввода (<em>textarea</em>)</textarea>
<pre><textarea name="message" rows="10" cols="30"><br>Это предопределенное текстовое содержимое<br></textarea></pre>
Элемент <em><datalist></em> задает предопределенный список параметров. <option value="Предопределенное содержимое"></datalist>
<datalist id="browsers"><br> <option value="Internet Explorer"><br> <option value="Firefox"><br> <option value="Chrome"><br> <option value=" Opera"><br> <option value="Safari"><br></datalist>
<fieldset field><legend field title>Семантическая форма</legend></fieldset><br>
Связанные формы<br>
<pre id="line1"><span><<span class="start-tag">label</span> <span class="attribute-name">for</span>="<a class="attribute" -value">мужской</a>"></span><span>Мужской</span><span></<span class="end-tag">label</span>></span><span ><br></span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute" -value">радио</a>" <span class="attribute-name">name</span>="<a class="attribute-value">пол</a>" <span class="attribute- name">id</span>="<a class="attribute-value">мужской</a>"<span>/</span>></span></pre>