Использование css для дублирования элементов HTML

ИМХО это невозможно. Моим решением было бы добавить небольшой PHP или другой движок, который автоматически отображает меню в тех местах, где они необходимы. Таким образом, ваш код - СУХОЙ.

Короткий ответ: нет, в css вы не можете создавать контент или отображать его несколько раз. Обычно этот повторяющийся контент обрабатывается с помощью серверных технологий (PHP, JSP, ASPX) и т. д. Если ваш сайт представляет собой статический контент (без обработки на стороне сервера), лучше всего просто скопировать и вставить.

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

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

Короткий ответ: нет.

Длинный ответ: не совсем,

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

IMHO, вероятно, неразумно хотеть этого, потому что стиль (и действительно контент) может выглядеть сейчас так же, но нет никакой гарантии, что это будет позже, более того, этот тип контента доволен и по праву принадлежит разметке, а не стилю. Если вам не нравится модель включения на стороне сервера (что хорошо), я бы обратился к JS, чтобы помочь вам реплицировать разметку, возможно, и на CSS, чтобы помочь вам согласованно стилизовать, но я думаю, что вы не обязательно идете по плодотворному пути .

Не будет большой проблемой, если вы будете повторять код для ссылок только в одном файле {вы используете его как шаблон и динамически вставляете контент}.

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

Кроме того, если вам случится использовать скриптовую программу, вам повезло! Вы можете использовать от Строитель до динамически создавать элементы DOM.

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

Но такая предварительная обработка html-страниц - это настоящая боль, поэтому не делайте этого, если только вы не можете сделать это на стороне сервера.

Вроде возможно, но все еще не уверен, что вы захотите

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

Одна из проблем заключается в том, что ваша заявленная цель - уменьшить беспорядок и избыточность HTML. Однако, чтобы иметь ссылку, вам все равно нужен элемент привязки (<a></a>) в качестве корня для ссылки.

Тем не менее, в одну сторону вы могли бы сделать что-то подобное с сегодняшними браузерами (теперь, когда псевдоэлементы поддерживаются более широко), чтобы отделить текст от a, который оставляет якорь пустой в вашем коде. Таким образом, у вас все еще есть HTML a в коде, но устраняется любой избыточный текст. Насколько это действительно полезно? Не очень это моя мысль. Особенно, если вы имеете дело со ссылками в соответствии, которые связаны с являются частью текста, потому что вам нужно добавить текст к этим ссылкам через псевдоэлемент, например:

a[href='#oneUrl']:before {
    content: 'your anchor text';
}

Посмотрите на этот пример скрипки.

Однако есть по-другому что еще больше сокращает HTML, но есть другие серьезные ограничения. У вас могут быть ссылки в самом тексте (скажем), что позволяет использовать в них релевантные формулировки реального содержания. Однако каждый из них может иметь два (в настоящее время Максимум) псевдоэлемента, связанных, которые могут «расширяться», чтобы быть отдельными ссылками в заголовках, нижних колонтитулах и т. д. Посмотрите на этот пример скрипки. Очевидно, для этого требуется, чтобы вы могли точно определить местонахождение этих ссылок (возможно, используя position: fixed, как в примере), что может оказаться сложной задачей. Однако большая проблема заключается в том, что поисковые системы не собираются использовать эти дополнительные ссылки или их текст, а программы чтения с экрана - нет, поэтому ваша «основная навигация» в некоторой степени фактически становится невидимый. Мне это показалось бы нежелательным, но это действительно ограничивает вашу избыточность HTML.

Я думаю, вы будете использовать HTML-включения и SSI или серверные включения для включения тех же методов на одних и тех же страницах, это формат, который вы будете использовать. <!--#include virtual = "path to file/include-file.html" -->, всегда включайте этот файл на все похожие страницы .. просто перейдите по этой ссылке..http://webdesign.about.com/od/ssi/a/aa052002a.htm

Вы говорите, что хотите очистить выходной HTML. Но по какой причине? Я предполагаю, что вы либо хотите уменьшить размер HTML и полосу пропускания, либо сохранить HTML красивым, как исходный код.

Уменьшите размер HTML и следите за полосой пропускания

Лучший способ добиться этого - работать со сжатием HTTP. Большинство HTTP-серверов могут быть настроены для обслуживания контента таким образом. Проверьте документацию к вашему серверу.

Держите HTML красивым

Может быть, вы хотите превратить свой HTML в шаблонизатор. Для этого есть несколько вариантов, например Moustache.js и Нижнее подчеркивание. Однако вы столкнетесь с потерей производительности, поскольку для обработки JS потребуется дополнительный этап.

В любом случае, я думаю, вы подходите не к той проблеме. То, что HTML [в некоторой степени] читабельно, не означает, что его следует рассматривать как исходный код. Я прошел через это, и в настоящее время я просто рассматриваю HTML как «ассемблерный код» для браузеров. Использование более совершенных языков шаблонов, таких как Тонкий, помогает обеспечить соблюдение этой точки зрения.

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

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

.duplicate::before {
    content:attr(title);
    display:block;
}
.duplicate::after {
    content:attr(title);
    display:block;
}

<div class = "duplicate" title = "text to duplicate"></div>

Возможно использование ::before и ::after. Однако он может отображать только текст (не элементы HTML). Если бы он мог отображать элементы HTML, тогда возникла бы серьезная угроза безопасности ...

Я мог бы внедрить элемент <script> внутрь страницы, например, с помощью вредоносного JavaScript.

Если бы CSS был способен на это, тогда расширения CSS Userscript, такие как Stylish, могли быть опасными.