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

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大画面表示適応方法

推薦する

Windows 10でDockerコンテナのポートにアクセスできない問題に対する完璧な解決策

Windows 10 で Docker コンテナのポートにアクセスできない問題を解決する (ポート ...

高性能なウェブサイトのための14のテクニック

オリジナル: http://developer.yahoo.com/performance/rule...

h5入力ボックスプロンプト+通常のテキストボックスプロンプトを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー<入力 id = "ユーザ...

16 の XHTML1.0 と HTML の互換性ガイドラインの概要

1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...

Vueのアイデアを使ってストレージをカプセル化する方法

目次背景関数目的アイデアの源成し遂げるセット得るプロパティの削除拡張機能を禁止するもっている要約する...

JavaScriptの再帰の詳細

目次1. 再帰とは何ですか? 2. 再帰を使って数学の問題を解く1. 1 * 2 * 3 * 4 …...

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...

Google 翻訳ツール: 多言語ウェブサイトを素早く実装

Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...

必見の JavaScript 面接質問 10 選のまとめ (おすすめ)

1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...

一般的なCSS3アニメーションの実装方法

1. 何ですかCSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をア...

不規則な絵の滝の流れ原理の分析と応用

プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...

VMware Workstation のダウンロードとインストールの詳細なチュートリアル

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...