問題描述
我一直在處理我正在嘗試正確實施的網頁設計.此設計包含在整個頁面中部分或全部重復的導航元素 - 特別是，指向主要 3 個導航類別的鏈接在頁面上出現不少于 4 次.
I've been handing a design for a webpage which I'm trying to implement correctly. This design contains navigation elements which are partially or entirely duplicated all over the page - in particular, links to the main 3 categories for navigation are present on the page no less than 4 times.
我不是網頁設計專家，但我不喜歡在 html 中復制相同內容的想法.我可以使用 CSS 以使我的 html 包含一個完整格式的導航鏈接列表，但標準瀏覽器視圖包含多個部分重復項嗎?
I'm no web design expert, but I don't like the idea of having the same content duplicated in the html. Can I use CSS so that my html contains a single list of navigation links in a sane format, but the standard browser view contains multiple partial duplicates?
(另外，假設這是可能的，這是個好主意嗎?或者我會更好地習慣我的 html 將包含 4 次相同的鏈接的想法?)
(Also, assuming this is possible, is it a good idea? or would I be better just getting used to the idea that my html is going to contain the same links 4 times?)
實際上生成導航鏈接不是問題；我正在尋找清理輸出html
Actually generating the nav links is not an issue; I was looking to clean up the output html
推薦答案
有點可能，但仍不確定您是否愿意
并帶來一些嚴重的挑戰，具體取決于上下文.
一個問題是您的既定目標是減少 html 的混亂和冗余.但是，要獲得鏈接，您仍然需要有一個錨元素 (<a></a>) 作為鏈接的根.
One problem is that your stated goal is to reduce html clutter and redundancy. However, to have a link, you still need to have an anchor element (<a></a>) as the root for the link.
盡管如此，一種方法你可以用今天的瀏覽器做類似的事情(現在更普遍地支持偽元素)是將文本與 a 分開在您的代碼中留下一個 empty 錨.所以你仍然在代碼中有 HTML a，但消除了任何多余的 text.這真的有用嗎?不是我的想法.特別是如果您正在處理 內聯 鏈接，這些鏈接 是文本的一部分，因為您要做的就是通過偽元素將文本添加到這些鏈接中，喜歡:
Nevertheless, one way you could do something like that with today's browsers (now that pseudo-elements are more generally supported) is to divorce the text from the a which leaves an empty anchor in your code. So you still have the HTML a in the code, but eliminates any redundant text. How useful really is that? Not very is my thought. Especially if you are dealing at all with inline links that are part of the text, because what you would do is then add text to those links via the pseudo-element, something like:
a[href='#oneUrl']:before {
content: 'your anchor text';
}
查看這個小提琴示例.
但是，還有另一種方法可以進一步減少 HTML，但有一些其他嚴重的限制.您可以在文本本身中有鏈接(比方說)，這允許在其中包含相關的真實內容措辭.但是，它們中的每一個都可以有兩個(max)關聯的偽元素，可以擴展"為頁眉、頁腳等中的單獨鏈接.查看 這個小提琴示例.顯然，這要求您能夠精確定位這些鏈接(可能像示例中那樣使用 position:fixed)，這可能具有挑戰性.然而，一個大問題是搜索引擎不會選擇那些額外的鏈接或它們的文本，屏幕閱讀器也不會，所以你的主導航"實際上在某種程度上變得不可見.這對我來說似乎是不可取的，但確實限制了你的 html 冗余.
However, there is another way that reduces HTML further, but has some other severe limitations. You could have links in the text itself (let's say), which allows for relevant real content wording in those. However, each of those can have two (max at present) pseudo-elements associated that could "extend" to be separate links in headers, footers, etc. Look at this fiddle example. Obviously, this requires you to be able to precisely locate those links (perhaps using position: fixed as the example has), which can be challenging. A big issue, however, is that search engines are not going to pick up those extra links or their text, and screen readers are not either, so your "main navigation" actually becomes invisible to some extent. That would seem to be undesirable to me, but it does indeed limit your html redundancy.
這篇關于使用 css 復制 html 元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！