HTML5에는 어떤 새로운 전역 속성이 추가되나요?-프런트엔드 Q&A-php.cn

物种

집

웹 프론트엔드

프런트엔드 Q&A

HTML5에는 어떤 새로운 전역 속성이 추가되나요?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 21, 2021 pm 02:36 PM

html

속성: 1. contenteditable 속성, 3. "data-*" 속성, 5. dropzone 속성, 7. 철자 검사 속성,

HTML5에는 어떤 새로운 전역 속성이 추가되나요?

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5에는 어떤 새로운 전역 속성이 추가되나요?

HTML에서 전역 속성은 모든 HTML 요소와 함께 사용할 수 있는 속성입니다.

HTML5에는 8개의 새로운 전역 속성이 있습니다. 아래에서 각각을 살펴보겠습니다.

1.contenteditable 속성

contenteditable 속성은 요소 내용을 편집할 수 있는지 여부를 지정합니다.

참고: 요소에 contenteditable 속성이 설정되지 않은 경우 해당 요소는 상위 요소에서 상속됩니다.

구문은

<element contenteditable="true|false">

로그인 후 복사

예제는 다음과 같습니다.

<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>
</body>
</html>

로그인 후 복사

출력 결과:

HTML5에는 어떤 새로운 전역 속성이 추가되나요?

2.contextmenu attribute

현재 Firefox 브라우저에서만 contextmenu 속성을 지원합니다.

contextmenu 속성은 요소의 컨텍스트 메뉴를 지정합니다. 사용자가 요소를 마우스 오른쪽 버튼으로 클릭하면 상황에 맞는 메뉴가 나타납니다. /p>

contextmenu 속성의 값은 열려야 하는

요소의 ID입니다.

구문:

<element contextmenu="menu_id">

로그인 후 복사

예는 다음과 같습니다:

<body>
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>  
<menu id="supermenu">
  <command label="Step 1: Write Tutorial" onclick="doSomething()">
  <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
<p><b>注意：</b>目前的主流浏览器都不支持 contextmenu 属性。</p>
</body>

로그인 후 복사

3. "data-*" 속성

모든 주요 브라우저는 data-* 속성을 지원합니다.

data-* 속성은 비공개 페이지 뒤에 적용되는 사용자 정의 데이터를 저장하는 데 사용됩니다.

data-* 속성은 모든 HTML 요소에 데이터를 포함할 수 있습니다.

사용자 정의된 데이터는 페이지에 더 나은 대화형 경험을 제공할 수 있습니다(Ajax를 사용하거나 서버에서 데이터를 쿼리할 필요 없음).

data-* 속성은 다음 두 부분으로 구성됩니다.

속성 이름에는 대문자가 포함될 수 없으며, data- 뒤에는 문자가 하나 이상 있어야 합니다. 이 속성은 모든 문자열이 될 수 있습니다

참고: 사용자 정의 속성 접두사 "data-"는 클라이언트에서 무시됩니다.

구문은 다음과 같습니다.

<element data-*="somevalue">

로그인 후 복사

예제는 다음과 같습니다.

<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1 id="物种">物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>
</body>

로그인 후 복사

4. draggable 속성

draggable 속성은 요소를 드래그할 수 있는지 여부를 지정합니다.

팁: 링크와 이미지는 기본적으로 드래그 가능합니다.

구문은

<element draggable="true|false|auto">

로그인 후 복사

예제는 다음과 같습니다.

<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>

로그인 후 복사

출력 결과:

HTML5에는 어떤 새로운 전역 속성이 추가되나요?

5. dropzone 속성

dropzone 속성을 지원하는 주류 브라우저는 없습니다.

dropzone 속성은 드래그한 데이터를 요소에 드롭할 때 복사, 이동 또는 링크할지 여부를 지정합니다.

구문은 다음과 같습니다.

<element dropzone="copy|move|link">

로그인 후 복사

예는 다음과 같습니다.

<div dropzone="copy"></div>

로그인 후 복사

6.hidden attribute

hidden 속성은 요소가 숨겨지도록 지정합니다.

숨겨진 요소는 표시되지 않습니다.

이 속성을 사용하면 요소가 숨겨집니다.

특정 조건(예: 체크박스 선택 등)이 충족될 때만 사용자가 요소를 볼 수 있도록 숨겨진 속성을 설정할 수 있습니다. 그런 다음 JavaScript를 사용하여 숨겨진 속성을 제거하여 요소를 표시할 수 있습니다.

구문은

<element hidden>

로그인 후 복사

예는 다음과 같습니다.

<body>
<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>
</body>

로그인 후 복사

출력 결과:

HTML5에는 어떤 새로운 전역 속성이 추가되나요?

7. 맞춤법 검사 속성

맞춤법 검사 속성은 요소 콘텐츠에 대해 맞춤법 검사를 수행할지 여부를 지정합니다.

다음 텍스트의 맞춤법을 검사할 수 있습니다.

텍스트 유형의 입력 요소 값(비밀번호 아님) 텍스트 영역 요소의 값 편집 가능한 요소의 값

Syntax

<element spellcheck="true|false">

로그인 후 복사

예는 다음과 같습니다.

<body>
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
First name: <input type="text" name="fname" spellcheck="true">
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本不支持 spellcheck 属性。</p>
</body>

로그인 후 복사

출력 결과:

HTML5에는 어떤 새로운 전역 속성이 추가되나요?

8. 번역 속성

현재 주류 브라우저는 번역 속성을 지원하지 않습니다.

translate 속성은 요소 콘텐츠를 번역해야 하는지 여부를 지정합니다.

테스트: Google 번역 도구를 사용하여 다음 단어 "ice cream"이 어떻게 될지 확인하세요.

여기에서는translate="no": ice cream을 사용합니다.

여기에서는 class="notranslate": ice cream을 사용합니다.

팁: 대신 class="notranslate"를 사용하세요.

Grammar

<element translate="yes|no">

로그인 후 복사

예는 다음과 같습니다:

<p translate="no">这个段落不能翻译。</p>
<p>这个段落可以被翻译</p>

로그인 후 복사

추천 튜토리얼: "html 비디오 튜토리얼"

위 내용은 HTML5에는 어떤 새로운 전역 속성이 추가되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7733

자바 튜토리얼

1643

Cakephp 튜토리얼

1397

라라벨 튜토리얼

1290

PHP 튜토리얼

1233

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles

HTML5에는 어떤 새로운 전역 속성이 추가되나요?

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제