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

XHTML CSSを使用して正式なブログを書く
ブログの正式名称は「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>

<<:  MacでDockerがホストマシンにpingできない問題を解決する

>>:  MySQL実行計画の詳細な説明

推薦する

MySQLの共同クエリ最適化メカニズムの詳細な説明

目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...

MySQL DMLステートメントの使用に関する詳細な説明

序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...

MySQL 8.0.22 のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.22のインストールと設定について記録します。具体的な内容は以下のとお...

OpenSSL を使用した Kubernetes 証明書の生成の概要

Kubernetes は、基本認証、トークン認証、CA 認証の 3 種類の認証をサポートしています。...

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...

Vue3 における computed の新しい使用例のまとめ

vue3 での computed の使い方。vue3 は vue2 のオプション API と互換性が...

React Nativeの起動プロセスの詳細分析

はじめに: この記事ではreact-native-cliで作成したサンプル プロジェクト (Andr...

jQueryはテーブルのシームレスなスクロールを実現します

この記事の例では、テーブルのシームレスなスクロールを実現するためのjQueryの具体的なコードを参考...

Vueカスタムカプセル化ボタンコンポーネント

Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...

Baidu Maps を Web ページに埋め込み、Baidu Maps API を使用してマップをカスタマイズする詳細な手順

ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...

MySQL データベースの Binlog 使用法の概要 (必読)

MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...

Vue が配列の変更を監視できない問題の解決方法

目次1. Vueリスナー配列2. vueが配列の変更を監視できない状況1. Vueリスナー配列Vue...

Centos 7 64 ビット デスクトップ バージョンのインストール グラフィック チュートリアル

システムが遅いと感じてソースを変更したい場合は、別の記事で整理しました https://blog.c...