目次
Markdown: 基本 (クイック スタート) / (クリックすると完全な構文説明が表示されます)
Markdown の書式設定構文の要点を理解する
段落、タイトル、ブロックコード
修辞と強調
List
一般的な段落テキストでは、バックティックを使用してコードセクションをマークできます。セクション内の &、<、および > は、コード セクションに HTML コードを簡単に挿入できます。
ホームページ ウェブフロントエンド htmlチュートリアル Markdown Syntax によるクイック スタート_html/css_WEB-ITnose

Markdown Syntax によるクイック スタート_html/css_WEB-ITnose

Jun 24, 2016 am 11:20 AM

声明: このドキュメントは繁体字中国語版から派生 (フォーク) されており、これに基づいて繁体字中国語から簡体字中国語への変換が行われ、適切な修正が行われています。このドキュメントは Markdown 構文で書かれており、ここでそのソース ファイルを表示できます。 「繁体字中国語版のオリジナルファイルはここで見ることができます」 -- By @riku

注: このプロジェクトは GitCafe でホストされています。「フォーク」と「マージ リクエスト」を通じてこのプロジェクトの改善にご協力ください。

Markdown: 基本 (クイック スタート) / (クリックすると完全な構文説明が表示されます)

Markdown の書式設定構文の要点を理解する

このページでは Markdown の簡単な概念を説明し、構文説明ページでは完全かつ詳細なドキュメントを提供します。それぞれの機能を説明します。ただし、Markdown は実際には非常に簡単に始めることができます。このドキュメントではいくつかの例を示し、それぞれの例で HTML の出力結果を示します。

実際、Dingus は独自の Markdown ドキュメントを XHTML に変換できる Web アプリケーションです。

段落、タイトル、ブロックコード

段落は複数の接続された行文で構成され、複数の空行が異なる段落を分割します(空行の定義は、表示されたときに空行のように見えることです)たとえば、空白とタブだけの行がある場合、その行も空白行とみなされます。) 一般的な段落は空白や改行でインデントする必要はありません。

Markdown は、Setext と atx 形式の 2 つのタイトル構文をサポートします。 Setext 形式では下線が使用され、= (最上位レベルのタイトル) と - (第 2 レベルのタイトル) が使用されます。Atx 形式では、タイトルの第 1 レベルから第 6 レベルに対応する 1 ~ 6 個の # が挿入されます。 。

メールフォームではブロック参照には「>」を使用します。

マークダウン構文:

A First Level Header====================A Second Level Header---------------------Now is the time for all good men to come tothe aid of their country. This is just aregular paragraph.The quick brown fox jumped over the lazydog's back.### Header 3> This is a blockquote.> > This is the second paragraph in the blockquote.>> ## This is an H2 in a blockquote
ログイン後にコピー

出力 HTML は次のとおりです:

<h1>A First Level Header</h1><h2>A Second Level Header</h2><p>Now is the time for all good men to come tothe aid of their country. This is just aregular paragraph.</p><p>The quick brown fox jumped over the lazydog's back.</p><h3>Header 3</h3><blockquote><p>This is a blockquote.</p><p>This is the second paragraph in the blockquote.</p><h2>This is an H2 in a blockquote</h2></blockquote>
ログイン後にコピー

修辞と強調

Markdown では、アスタリスクと下線を使用して強調が必要なセクションをマークします。

マークダウン構文:

Some of these words *are emphasized*.Some of these words _are emphasized also_.Use two asterisks for **strong emphasis**.Or, if you prefer, __use two underscores instead__.
ログイン後にコピー

出力 HTML は次のとおりです:

<p>Some of these words <em>are emphasized</em>.Some of these words <em>are emphasized also</em>.</p><p>Use two asterisks for <strong>strong emphasis</strong>.Or, if you prefer, <strong>use two underscores instead</strong>.</p>
ログイン後にコピー

List

順序なしリストでは、リストの項目マークとしてアスタリスク、プラス記号、マイナス記号を使用します。

* Candy.* Gum.* Booze.
ログイン後にコピー

Plus記号:

+ Candy.+ Gum.+ Booze.
ログイン後にコピー

とマイナス記号

- Candy.- Gum.- Booze.
ログイン後にコピー

は、次のように HTML を出力します:

<ul><li>Candy.</li><li>Gum.</li><li>Booze.</li></ul>
ログイン後にコピー

順序付きリストでは、項目マークとして通常の数字とそれに続く英語のピリオドが使用されます:

1. Red2. Green3. Blue
ログイン後にコピー

出力 HTML は次のとおりです:

<ol><li>Red</li><li>Green</li><li>Blue</li></ol>
ログイン後にコピー

項目の間に空白行を入れると、項目の内容が

で囲まれます。前に 4 つのスペースまたは 1 つのタブをインデントすれば、1 つの項目に複数の段落を入れることもできます。

* A list item.    With multiple paragraphs.* Another item in the list.
ログイン後にコピー

出力 HTML は次のとおりです:

<ul><li><p>A list item.</p><p>With multiple paragraphs.</p></li><li><p>Another item in the list.</p></li></ul>
ログイン後にコピー

Link

Markdown は、インラインとリファレンスという 2 つの形式のリンク構文をサポートしており、どちらも山括弧を使用してテキストをリンクに変換します。

インラインフォームは、最後に括弧でリンクを直接接続します:

This is an [example link](http://example.com/).
ログイン後にコピー

出力HTMLは次のとおりです:

<p>This is an <a href="http://example.com/">example link</a>.</p>
ログイン後にコピー

オプションでタイトル属性を追加することもできます:

This is an [example link](http://example.com/ "With a Title").
ログイン後にコピー

出力HTMLは次のとおりです:

<p>This is an <a href="http://example.com/" title="With a Title">example link</a>.</p>
ログイン後にコピー

参照フォームlink リンクに名前を付けることができ、ファイル内の他の場所でリンクのコンテンツを定義できます:

I get 10 times more traffic from [Google][1] than from[Yahoo][2] or [MSN][3].[1]: http://google.com/ "Google"[2]: http://search.yahoo.com/ "Yahoo Search"[3]: http://search.msn.com/ "MSN Search"
ログイン後にコピー

出力 HTML は次のとおりです:

<p>I get 10 times more traffic from <a href="http://google.com/"title="Google">Google</a> than from <a href="http://search.yahoo.com/"title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"title="MSN Search">MSN</a>.</p>
ログイン後にコピー

title 属性はオプションで、リンク名には文字を使用できます。ただし、大文字と小文字は区別されません:

I start my morning with a cup of coffee and[The New York Times][NY Times].[ny times]: http://www.nytimes.com/
ログイン後にコピー

出力 HTML は次のとおりです:

<p>I start my morning with a cup of coffee and<a href="http://www.nytimes.com/">The New York Times</a>.</p>
ログイン後にコピー

Picture

Picture の構文はリンクと非常によく似ています。

インラインフォーム (タイトルはオプション):

![alt text](/path/to/img.jpg "Title")
ログイン後にコピー

参照フォーム:

![alt text][id][id]: /path/to/img.jpg "Title"
ログイン後にコピー

上記の 2 つのメソッドは HTML を次のように出力します:

<img src="/path/to/img.jpg" alt="alt text" title="Title" />
ログイン後にコピー

コード

一般的な段落テキストでは、バックティックを使用してコードセクションをマークできます。セクション内の &、<、および > は、コード セクションに HTML コードを簡単に挿入できます。

I strongly recommend against using any `<blink>` tags.I wish SmartyPants used named entities like `—`instead of decimal-encoded entites like `—`.
ログイン後にコピー

フォーマットされた HTML を作成する場合は、コード ブロックの場合、各行を 4 つのスペースまたはタブでインデントするだけで、&、<、> も自動的に HTML エンティティに変換されます。

マークダウン構文:

<p>I strongly recommend against using any<code><blink></code> tags.</p><p>I wish SmartyPants used named entities like<code>&mdash;</code> instead of decimal-encodedentites like <code>&#8212;</code>.</p>
ログイン後にコピー

出力HTMLは次のとおりです:

If you want your page to validate under XHTML 1.0 Strict,you've got to put paragraph tags in your blockquotes:<blockquote><p>For example.</p></blockquote>
ログイン後にコピー

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

See all articles