Нажмите здесь, чтобы вернуться в столбец Wulin.com HTML.
Вверху: язык разметки - точка якоря
Первоначальный источник Глава 8 Давайте снова поговорим о списке
Ранее в первой главе мы обсуждали несколько способов отметить списки, изучая преимущества маркировки их как беспорядочных списков с <ul> и <li>. Этот метод может идентифицировать структуру списка, убедиться, что все браузеры и устройства могут правильно отображать его содержимое, а также позволить нам добавлять в него различные стили с помощью CSS.
В различных средах не сложно заполнить всю книгу, написав все практики маркировки списков при решении отдельных проблем. Я не планирую заполнять всю книгу, но я планирую обсудить несколько других категорий списков в независимой главе, помимо неупорядоченных списков. Исследуйте несколько ситуаций, подходящих для использования списков.
Контрольные списки являются мощным инструментом для организации структуры страниц, добавляя смысл к каждому независимому проекту, что позволяет добавлять независимые стили позже в CSS.
Давайте сначала посмотрим на пронумерованный список проектов и два способа отметить такие списки. Возможно, вы можете увидеть, какой метод более полезен с первого взгляда, но я все равно подробно объясню этот пример, чтобы подчеркнуть важность структурированной маркировки и использования правильных инструментов для решения проблем. Какой лучший способ отметить пронумерованный список проектов?
Предположим, вы планируете отметить список шага, каждый проект имеет номер раньше, мы будем изучать два разных метода, которые могут достичь этой цели, и объяснить, почему определенный метод более применим. Метод A: Порядок в хаосе
<ul>
<li> 1. Нарежьте лук. </Li>
<li> 2. Обжарить лук в течение 3 минут. </Li>
<li> 3. Добавьте 3 Clloves чеснока. </Li>
<li> 4. Готовьте еще 3 минуты. </Li>
<li> 5. Есть. </Li>
</ul>
Предыдущий список может быть одним из худших рецептов в истории приготовления пищи. Но вполне уместно использовать его в качестве простого примера, добавление небольшого количества соли и яиц может быть лучше, или ... независимо от того, что, обратно к делу.
Метод А. Мы выбираем, чтобы отметить эти шаги неупорядоченным списком, чтобы получить все преимущества, которые мы упомянули в главе 1, мы добавляем структуру в контент и знаем, что большинство браузеров, считывателей экрана и других устройств могут правильно обрабатывать эту часть, и мы также можем использовать CSS, чтобы легко ее стиль, что отлично! Но ... цифровые игры
Поскольку это пронумерованный список, мы добавляем цифры перед каждым проектом и сопровождаемый периодом для определения порядка каждого шага, но что мы должны делать, если нам нужно добавить новые шаги между шагами 2 и 3? Теперь нам нужно перенаправлять все предметы после новых шагов (вручную). Этот список не является проблемой, но если вы измените список из 100 пунктов, процесс модификации станет очень утомительным. Появляются маленькие точечные символы
Поскольку мы отмечаем структуру в этом примере неупорядоченным списком, мы увидим небольшой точечный символ перед каждым пронумерованным проектом (например, рисунок 8-1). Вам может понравиться маленький символ точки. Если вам это не нравится, конечно, вы можете удалить его через CSS, но вы обязательно увидите эти маленькие точечные символы при просмотре этого списка без использования CSS.
Рисунок 8-1, Результаты браузера закрыть метод чтения CSS A
Существует более простой, более значимый и проще в поддержании метода. Давайте посмотрим на метод B. Метод B: Заказанный список
<ol>
<li> Нарежьте лук. </li>
<li> Обжарить лук в течение 3 минут. </li>
<li> Добавить 3 Clloves чеснока. </li>
<li> Готовьте еще 3 минуты. </li>
<li> есть. </li>
</ol>
Я уверен, что это то, что большинство людей предпочитают делать, но это не означает, что мы не используем метод A. <Ol> по какой -то причине для использования упорядоченного списка, поэтому семантически мы используем правильные элементы для решения проблемы в наших руках. Что более особенное в методе B? Автоматическая нумерация
Может быть, вы обнаружите, что нам не нужно вручную чигать каждый элемент списка. При использовании <ol> мы автоматически генерируем числа по порядку. Если наш ступенный список содержит более 100 предметов, и нам нужно вставить несколько новых шагов в середине, нам просто нужно просто вставить новый элемент <li> в правильном положении, и браузер автоматически переиграет его, как и магия.
При использовании метода A нам нужно вручную исправить все числа при вставке каждого проекта. Я могу легко подумать о более интересной работе ...
Рисунок 8-2, эффект одиннадцатой версии метода дисплея браузера B, автоматически добавлял число перед каждым шагом.
Рисунок 8-2 Счастливый эффект метода отображения браузера B, часть 2
Еще одно преимущество метода B заключается в том, что когда длинный элемент списка будет сломан, он будет отступить после сгенерированного числа, а метод A будет сложен ниже числа (Рисунок 8-3)
Рисунок 8-3 Сравнение списка новых линейных эффектов метода A и метода B
Несмотря на то, что предустановленные стили нумерации упорядоченного списка обычно являются арабскими цифрами (1,2,3,4,5 и т. Д.), Мы можем заменить стиль нумерации, используя атрибут CSS типа в стиле списка. Тип списка может быть выбран в одном из следующих: Десятиц: 1,2,3,4, ... (обычно предустановленное значение)
Так, например, если мы хотим, чтобы метод B производил капитальный римский номер, мы можем достичь следующего CSS:
Ол Ли {
тип списка: верхний роман;
}
Рисунок 8-4 является эффектом отображения метода B с этим CSS в браузере. Наш ступенчатый список больше не предварительно установлен арабские цифры, но заменяется римскими цифрами. Конечно, отмеченные части все еще одинаковы. Вы передумали? Просто внесите некоторые небольшие изменения и изменения в другие стили, перечисленные ранее, и вы можете немедленно изменить метод нумерации списка на то, что вам нравится.
Рисунок 8-4 упорядоченный список переключателей на римские цифры
Атрибут типа HTML: до некоторых людей могут использовать атрибут типа непосредственно в теге <ol>, изменяя метод нумерации списка на римские цифры, английские буквы и т. Д. Однако для поддержки правил CSS, упомянутых ранее, не рекомендуется использовать атрибут типа со времен стандарта HTML 4.01. Поэтому вы больше не должны использовать атрибут типа, вы должны использовать CSS вместо этого.
Позже, в расширении наконечника, мы будем призвать этот заказанный список с CSS. Но теперь давайте посмотрим на другой пример типа списка.
Предыдущая страница 1 2 3 Следующая страница Прочитайте полный текст