XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮され、ブロガーとはブログを書く人のことを指します。ブログとは、「個人の考えやネットワークのリンク、コンテンツなどを時系列順に表現し、継続的に更新する公開方法」と理解できます。簡単に言えば、ブロガーとは、オンラインで日記を書くのに慣れているタイプの人々です。ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮され、ブロガーとはブログを書く人のことを指します。ブログとは、「個人の考えやネットワークのリンク、コンテンツなどを時系列順に表現し、継続的に更新する公開方法」と理解できます。簡単に言えば、ブロガーとは、オンラインで日記を書くのに慣れているタイプの人々です。 HTML と CSS を使用して美しくフォーマルなブログを書く方法:
aタグの正しい使い方
ハイパーリンクは、ブログで最もよく使用される HTML タグです。他の記事や Web サイトへのリンクに使用されます。a タグを使用する場合は、次の属性を追加することをお勧めします。
href: リンクURLまたはアンカーを設定する
target: マウスでリンクをクリックした後のターゲットウィンドウまたはフレームページを設定します。よく使用されるのは target="_blank" で、これはリンクを開くために新しいウィンドウを開くことを意味します。現在のページでリンクを開きたい場合は、この属性を追加する必要はありません。
タイトル: マウスをリンク上に移動したときに表示されるプロンプト情報を設定します
rel: これは最近人気が出てきている新しい属性です。 rel="nofollow" は、検索エンジンがこのサイトにリンクすることを禁止します。リンクすると、リンク URL のページランクが変更されます。これは、スパムリンクを防ぐためによく使用されます。rel="tag" は、Technorati がこのリンクのテキストをページのタグとして使用するために設定されます。
記事内のリンクは多すぎてはいけません。リンクが多すぎると、読者は読んでいるときに落ち込んだり不安になったりします。リンクの色とテキストの色のコントラストが強すぎると、読者は眩惑されたように感じてしまいます。最適なリンク効果は、明るい色のコントラストまたは下線です。タイトル属性を入力して、リンクの内容やリンクが必要な理由を示します。場合によっては、記事の最後にリストの形式で記事に関連するリンクを添付し、注釈を付けることもできます。
記事を段落に分ける習慣を身につける<br />古龍の小説のように1段落に1文でブログを書くのは不可能なので、学生時代に先生に教わった文体でブログを書くのが間違いありません。記事をセクションに分割するには、p タグを使用することをお勧めします。コードは次のとおりです: <p>記事本文</p>。
多くのブロガーは最初の行をインデントする習慣がないことは言及する価値があります。中には、エディターでせいぜい数個のスペースを入力するだけの人もいます。以下は、CSS text-indent 属性によって実装された最初の行のインデントコードです: <p style="text-indent:2em;">記事本文</p>。インデントの単位は通常 2em で、これは 2 つの中国語文字を表します。パーセンテージや、px、pt などの他の単位の長さは使用しないでください。 em を使用すると、ページのフォントとレイアウトが拡大縮小されても、2 つの中国語文字のインデントを維持できます。
記事に画像を挿入することを好むブロガーの中には、画像を簡単に吊り下げてテキストを折り返すために、img タグの align 属性を left または right に設定することをお勧めします。 div タグの float 属性を使用して左右に吊り下げることで、テキストの折り返しを実現することもできます。さらに優れているのは、Google Adsense 広告のように左右に吊り下げることができることです。コードは次のとおりです: <div style="height:100%;width:150px;float:right;">ここに画像リンクを置いたり、海外のブログのように Google Adsense コードを入れたりできます</div>。
list を使用してリストを作成し、line-height を使用して行の高さを設定します。<br />スタイルシート list の <ul><ol><li> およびその他のタグを使用して、いくつかのサブ見出し項目をリストします。コード: <ul><li>質問 1</li><li>質問 2</li></ul>。
テキストのフォントサイズは、個人の好みに応じて設定できます。通常は、ブログシステムのデフォルトサイズ (13pt、Songti、Courier New) が使用されます。テキストに大きなフォントが必要で、テキストが大きすぎて重なって表示される場合は、段落の <p> にスタイルを追加できます: line-height:120%; これは、行の高さがフォントサイズの 1.2 倍であることを意味します。
非常に長いテキストの書式設定スキル<br />ブログを書くときは、記事を短く簡潔にする必要があることは誰もが知っていますが、一部の特別な記事では長い長さが必要になることは避けられません。この場合、<h1><h2>...<h6>などのさまざまなレベルを使用してサブ見出しを設定し、記事の上部で4つの定義リストタグ<dir><dl><dt><dd>を使用することをお勧めします。表示効果はWordのディレクトリ/インデックスのスタイルと同じで、記事の読みやすさと整理性を高めることができます。MicrosoftのMSDNの多くの記事は、このように配置されています。リンクジャンプ機能を実装するには、<a name=""> アンカータグを使用して特定のサブタイトルを変更します (コード: <a name="list1"><h1>タイトル 1</h1></a>)。
ログでよく使用されるその他のHTML
他の人の記事から抜粋を引用するには、<blockquote> タグを使用することをお勧めします。このタグを使用すると、ページの左端と右端に自動的にインデントを設定できます。デフォルトのインデントは通常 40 ピクセルです。例: <blockquote style="background-color:#f7f7f7;border:1px dotted #dedbde;padding:10px;">これは引用スタイルの例です</blockquote>

<<: CSS3 を使用したテキスト折り紙効果のサンプルコード

>>: Vue大画面表示適応方法