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実行計画の詳細な説明

推薦する

ウェブデザイナーは3つの側面からウェブページを最適化する必要がある

<br />帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ...

Linux parted ディスク パーティション実装手順の分析

fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...

CSS3でシャトル星空のアニメーションを実現

結果: html <canvas id="スターフィールド"><...

HTMLタグオーバーフロー処理アプリケーション

CSSを使用してスクロールバーを変更する1.コンテンツがオーバーフローした場合のオーバーフロー設定水...

CSS フロントエンドの知識ポイントのまとめ(必読)

1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...

JS配列重複排除の詳細

目次1 テストケース2 JS配列重複排除4種類2.1 要素の比較2.1.1 二重層 for ループ比...

MySQLでバッチを更新するいくつかの方法

通常、フィールド値を更新するには次の SQL ステートメントを使用します。 mytable を更新し...

win10 mysql 5.6.35 winx64 無料インストールバージョン設定チュートリアル

mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...

MySQL MHA のセットアップと切り替えに関するいくつかのエラー ログの概要

1: masterha_check_repl レプリカ セット エラー レプリケートが構成ファイルで...

Docker 環境で JMeter+Grafana+influxdb ビジュアル パフォーマンス監視プラットフォームを構築するチュートリアル

目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...

Linux でスレッドを作成するための pthread_create の具体的な使用法

pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...

泡の小さな鋭角効果を実現するCSS

効果画像(境界線の色が薄すぎるので、{} で囲みます): { }参考リンク Pure CSS バブル...

JavaScriptでフロアナビゲーションエフェクトを作成するプロセスの詳細な説明

目次この期間の目標1. 関数の実装1.1 構造層1.2 スタイルレイヤー1.3 行動層1.3.1 フ...

HTMLは入力完了を検出する機能を実装する

入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...