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

推薦する

React.Childrenの詳しい使い方

目次1. React.Children.map 2. React.Children.forEach ...

Nginx インストールの詳細なチュートリアル

1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...

ECMAScript6 におけるマップマッピングの基本概念と一般的な方法

目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...

iframe が HTML 内のページにジャンプするのを防ぎ、iframe を使用して WeChat Web バージョンをページに埋め込む方法

私は、WinForm と HTML5 を組み合わせた小さなものを作りたいだけなのですが、突然、そこに...

JS のあらゆる場所で絶対等価演算子の使用をやめる

目次概要1. NULL値のテスト2. ユーザー入力を読み取る導入事実の根源はどこにあるのでしょうか?...

Linux yum コマンドを使用して mysql8.0 をインストールする方法の詳細なチュートリアル

1. 設置前によく掃除する rpm -pa | grep mysql または rpm -qa | g...

データベース接続のURLの詳細な説明と概要

データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...

Alibaba Cloud Centos7のインストールとSVNの設定

1. SVNサーバーをインストールする yum でサブバージョンをインストール2. SVNバージョン...

MySQL 8.0ドライバとAlibaba Druidバージョン間の互換性の問題を解決

この記事では主に、MySQL 8.0 ドライバーと Alibaba Druid バージョン間の互換性...

HTML+CSS を使用して、画像の右上隅に削除の十字と画像削除ボタンを追加します。

記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...

Vueは商品詳細ページの虫眼鏡機能を実装します

この記事では、商品詳細ページの虫眼鏡を実装するためのVueの具体的なコードを参考までに共有します。具...

CSS3 のフィルタプロパティの使用に関する詳細な説明

最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。...

WebページでjQueryを参照する方法

CDN(コンテンツ配信ネットワーク)を通じて参照できます。 jQuery は Google と Mi...

実践で遭遇するフロントエンドの基本(HTML、CSS)

1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...