コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > htmlチュートリアル > html preタグの使い方を詳しく解説

html preタグの使い方を詳しく解説

黄舟

リリース： 2017-07-08 10:56:38

オリジナル

3447 人が閲覧しました

htmlでのpreタグの使い方

<html>
<head>
</head>
<body>
12344
</body>
</html>

ログイン後にコピー

上記のWebページのソースコードを出力したいのですが、
それでpreタグを使う場合はどうすればいいのでしょうか？

<pre class="brush:php;toolbar:false">
     这里写你想写的代码~~~~

ログイン後にコピー

このように使われます

<html>
<head>
</head>
<body>
    12344
<pre class="brush:php;toolbar:false">
<html>
<head>
</head>
<body>
    12344
</body>
</html>

ログイン後にコピー

なぜこのように書くのが間違っているのでしょうか？

pre 要素で許可されるテキストには、リンク、画像、水平方向の区切り線に加えて、物理スタイルとコンテンツベースのスタイルのバリエーションを含めることができます。他のタグ ( タグなど) を

 ブロック内に配置すると、HTML/XHTML ドキュメントの他の部分に配置されたかのように扱われます。 <br/>これを行う必要があります</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false"><html><br><head><br></head><br><body><br>    12344<br></body><br></html>

ログイン後にコピー

Baidu は & lt; & gt; (スペースなし) をそれぞれ表すコードを変更していることに注意してください。使い方？

textarea 問題ありません

<textarea name="textarea" id="textarea" cols="45" rows="5">
<html>
<head>
</head>
<body>
<code><br>
</textarea>

ログイン後にコピー

今回は分かりました、10点だけ追加します、ありがとうございます。

このタグは、それに含まれるテキストのレイアウトと形式をそのまま表示できます。入力した内容は、スペースも含めてそのまま出力されます。スペースや改行を表すために
を使用する必要はありません。
これは、ソースコードを表示するための優れたソリューションです。そうでしょう？

ああ、per で HTML コードを書きたい場合は、覚えておく必要があります

<> を <> として直接記述することはできず、エンティティ形式で記述する必要があります

<pre class="brush:php;toolbar:false">
$(
function() {
$("#selectBox").mousemove(
function(event) {
$("span:eq(0)").html($("#selectArea").position().left);
$("span:eq(1)").html(event.offsetX);
if ($("#selectArea").css("position") == "absolute") {
$("#selectArea").css({ left: event.clientX - $("img").offset().left });
$("#selectArea").css({ top: event.clientY - $("img").offset().top });
}
if ($("#selectArea").css("position") == "relative") {
$("#selectArea").css({ left: -(300 - event.offsetX) });
$("#selectArea").css({ top: event.offsetY });
}
}
);
}
);
</per>

ログイン後にコピー

以上がhtml preタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

html ラベル詳しい説明

ソース：php.cn

前の記事：CSS3の新機能の紹介次の記事：HTML

 タグの簡単な紹介

このウェブサイトの声明

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

著者別の最新記事

独自の PHP フレームワークをゼロから構築するためのビデオ資料

2023-03-15 16:54:01
PHPMailer が QQ メールボックスを使用して電子メール送信機能を完了する方法の分析例

2023-03-15 12:26:02
PHPでIMAPでメールを受信する方法の紹介

2023-03-14 18:58:01
PHP で配列の重複排除を迅速に実装する方法の例

2023-03-14 11:30:01
HTML でのタグのすべての属性の使用の概要

1970-01-01 08:00:00
PHPの基礎知識まとめ（初心者が始めるのに必要）

2023-03-16 15:20:01
JavaScript での typeof の使用の概要

1970-01-01 08:00:00
JavaScript でのconfirm() メソッドの使用の概要

1970-01-01 08:00:00
HTML5 プレースホルダー属性の詳細な紹介

1970-01-01 08:00:00
ReactJS のフォームに単一選択、複数選択、逆選択を実装する方法

1970-01-01 08:00:00

最新の問題

PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...

から 2024-04-16 09:34:16

0

0

4687

ページが突然 CSS またはブートストラップを取得できなくなりますそれで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...

から 2024-04-06 20:22:15

0

1

454

livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したいこれまでに試したこと: Laravel コンポーネントを含めることによる Live...

から 2024-04-06 20:02:10

0

2

543

文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...

から 2024-04-06 17:40:41

0

2

410

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート