집 > 기사 > 웹 프론트엔드 > html pre 태그 사용에 대한 자세한 설명

html pre 태그 사용에 대한 자세한 설명

黄舟원래의: 2017-07-08 10:56:383445검색

html에서 pre 태그를 사용하는 방법

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

위 웹페이지의 소스코드를 입력했다면, 이제 소스코드를 출력하고 싶습니다. -
그럼 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>

이렇게 쓰는게 왜 잘못된 걸까요?

사전 요소에 허용되는 텍스트에는 물리적 스타일과 콘텐츠 기반 스타일 변형은 물론 링크, 이미지, 가로 구분선이 포함될 수 있습니다. e03b848252eb9375d56be284e690e873 블록 안에 다른 태그(예: 3499910bf9dac5ae3c52d5ede7383485 태그)를 배치하면 HTML/XHTML 문서의 다른 부분에 배치된 것처럼 처리됩니다.
그래서 이렇게 해야 합니다

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

Baidu는 < 그것을 사용하는 방법?

textarea 문제 없습니다

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

이번에는 이해했습니다. 10점만 추가해주시면 감사하겠습니다.

e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec이 태그는 포함된 텍스트 레이아웃과 형식을 그대로 표시할 수 있습니다. 입력한 내용은 공백을 포함하여 변경되지 않고 출력됩니다. 공백이나 캐리지 리턴을 표시하기 위해 82c2f54f4cf245029ffb326befd49b3f를 사용할 필요가 없습니다.
정말 소스 코드를 표시하는 데 좋은 솔루션입니다. 그렇지 않나요?

아, html 코드를 per로 작성하고 싶다면 기억해야 합니다

a8093152e673feb7aba1828c43532094는 a8093152e673feb7aba1828c43532094로 직접 작성할 수 없으며 엔터티 형식으로 작성해야 합니다

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS3의 새로운 기능 소개다음 기사：CSS3의 새로운 기능 소개