1

HTMLとマーキングの基礎を学ぼうとしています。

2 行の情報を含むアンカーを作成したいと考えています。

1 行目: リンクの名前 2 行目: 簡単な説明

例えば

<a href='#'>
<span>Studies</span>
<span class="alt">-Information about studies</span>
</a>

これは正しいです？

必要に応じて、次の (2 番目のスパン) をどのように変更する必要がありますか?

ありがとうございました

PS。css スタイリングのために、両方の行をスパンで囲む必要があります。

4

2 に答える 2

3

brまず、タグの使用を除外しないでください。これは、タグの意味的に適切な場所ですbr(テキストの行または段落内でハード ブレークを強制します)。さらに、タグを使用する場合、brスタイルを変えたい場合を除き、2 行のテキストのいずれかを別々のタグに入れる必要がなくなる場合があります。

<a href='#'>
    Studies<br/>
    -Information about studies
</a>

次に、スタイルシートを無効にして HTML を表示してみます (Web 開発者拡張機能の助けを借りて、Firefox で ctrl-shift-S を押してこれを行います)。ブラウザーは、提供された HTML だけに基づいてコンテンツを読みやすい方法でレンダリングできますか? ある程度、「スタイルが設定されていない」コンテンツがより読みやすく表示されるほど、HTML はより意味的に正確になります。

テキストの 2 行目が最初の行の二次的なもの (サブタイトル、それほど重要ではないか、冗長であるか、または完全に必須ではない) であるように思われる場合、最初の行をstrongタグに入れるか、2 行目をタグに入れるかsmallは、いくつかの方法があります。必要に応じて、2 つの行の相対的な重要性を確立します。

<a href='#'>
    <strong>Studies</strong><br/>
    -Information about studies
</a>

<a href='#'>
    Studies<br/>
    <small>-Information about studies</small>
</a>

ここには個人的な好みの余地があります。これらは 2 つのアプローチにすぎません。

このような場合にタグを使用するのは少し無理が​​あるかもしれませんが、small完全に不適切というわけではありません。タグは通常、small「細字」、帰属、免責事項、またはサイド コメントに使用されます。テキストが小さいことを意味的に意味するわけではありませんが、他の何か (何かを明確にする) の二次的なコンテンツに使用される傾向があります。ただし、長さが短いテキストにのみ使用する必要があります。

また、strongタグは太字にする必要はありません。実際、それがセマンティック マークアップの要点です。コンテンツがどのようにスタイルされるかを指定したり暗示したりすることはありません。コンテンツの意味や文脈へのヒントを提供するだけです。strongタグには合理的に のスタイルを指定できますfont-weight:normal。

于 2012-08-13T23:20:43.727 に答える
0

それらが別々の行にあることを実現するには、<div>代わりにタグを使用してみてください。スタイリングのクラスを指定することもできますが、唯一の違いは、<div>sがブロック要素であるということです。それぞれが別々の行にレンダリングされます。コードの変更バージョンは次のとおりです。

<a href='#'>
Studies
<div class="alt">-Information about studies</div>
</a>

これを行うもう1つの、もう少し好ましい方法は、要素をブロック要素としてスタイル設定することです。これは、CSSのdisplayプロパティをに設定することで使用できますblock。何かのようなもの：

<a href='#'>
Studies
<span class = "alt block">-Information about studies</span>
</a>

（これclass = "alt block"は、要素にクラスaltと、の両方があることを意味します。また、そのノードに何かをスタイル設定する必要がないためblock、最初の要素が削除されることにも注意してください）。<span>

CSS：

.block {
    display: block;
}

お役に立てば幸いです。

于 2012-08-13T21:19:21.723 に答える