집 > 기사 > 웹 프론트엔드 > HTML5 연구 노트의 간결한 버전(7): 새로운 속성(2)

HTML5 연구 노트의 간결한 버전(7): 새로운 속성(2)

黄舟원래의: 2017-01-21 16:58:022099검색

dirname 속성

input 및 textarea 요소에는 사용자가 설정한 제출 방향(주석, 즉 쓰기 방향, ltr 또는 rtl)을 제어하는 데 사용되는 새로운 요소 dirname이 있습니다. .

<form action="addcomment.cgi" method=post>
 <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
 <p><button name="mode" type=submit value="add">Post Comment</button></p>
</form>

사용자가 제출하면 브라우저는 다음과 유사한 comment, comment.dir 및 mode라는 3개의 매개변수를 수신합니다. comment=Hello&comment.dir=ltr&mode=add

If 아랍어 브라우저이고 입력은 아랍어 مرحبًا입니다. 반환되는 매개 변수는 다음과 같아야 합니다.

comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add

textarea 아래의 maxlength 및 Wrap 속성

textarea의 새로운 최대 길이 입력의 최대 길이와 동일하며 둘 다 최대 길이를 제한합니다.

새롭게 추가된 Wrap 속성은 열거형 값(soft/hard)으로,

hard : 자동 하드 리턴과 줄 바꿈이 이루어지며, 줄 바꿈 표시가 함께 서버에 전송된다는 의미입니다. . 줄 바꿈할 문자 수를 결정하려면 cols와 함께 사용해야 합니다.

soft: 자동 소프트 캐리지 리턴 및 줄 바꿈, 줄 바꿈 표시는 서버로 전송되지 않습니다.

novalidate 양식 아래 속성

새로운 속성 novalidate는 양식의 요소에 필수, 최소, 최대 등과 같은 확인 조건이 있는지 여부에 관계없이 양식을 확인 없이 제출할 수 있음을 의미합니다.

예제 코드:

<form action="demo_form.asp" novalidate="novalidate">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>

또 다른 사용법은 동일한 양식에 여러 개의 제출 버튼이 있다는 것입니다. 특정 버튼에 대해 formnovalidate 속성을 설정하여 확인을 무시할 수 있습니다. 예:

<form action="editor.cgi" method="post">
 <p><label>Name: <input required name=fn></label></p>
 <p><label>Essay: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="Submit essay"></p>
 <p><input type=submit formnovalidate name=save value="Save essay"></p>
 <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>

이 양식은 에세이 제출 버튼을 클릭해야만 확인되며, 다른 두 버튼은 확인되지 않습니다.

입력 및 버튼 아래의 새 속성

입력 및 버튼 요소에 여러 가지 새 속성(formaction, formenctype, formmethod, formnovalidate 및 formtarget)이 추가되었습니다. 즉, 입력이나 버튼이 속한 양식 요소의 action, enctype, method, novalidate 및 target 속성 값을 덮어쓰게 됩니다.

예제 코드:

<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" /><br />
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>

메뉴 아래의 유형 및 라벨 속성

메뉴 요소에는 유형과 라벨이라는 두 가지 새로운 속성이 있습니다. 이를 통해 요소를 일반적인 사용자 인터페이스의 메뉴로 변환할 수 있으며 전역 contextmenu 속성과 함께 상황에 맞는 메뉴를 제공할 수 있습니다.

style 아래의 범위 속성

style 요소에는 범위 스타일 시트를 활성화하는 데 사용되는 새로운 범위 속성이 있습니다. 이러한 스타일 요소의 스타일 규칙은 현재 스타일 요소의 상위 요소의 하위 트리 또는 형제 트리에만 적용됩니다.

<!-- 这个article正常使用head里声明的style -->
 <article>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
</article>

<article>
    <!-- 这里声明的style只能让该article以及子元素使用 -->
    <style scoped>
        h1 { color: hotpink; }
        article { border: solid 1px hotpink; }
    </style>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
</article>

스크립트 아래의 비동기 속성

비동기 속성을 사용하면 스크립트 로딩 단계를 비동기적으로 실행할 수 있습니다(즉, src 참조 파일 형식이어야 함). 예:

<script type="text/javascript" src="demo_async.js" async="async"></script>

有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步执行（当页面继续进行解析时，脚本将被执行）

如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

html下的manifest属性

html 元素有了一个新属性 manifest，指向一个用于结合离线Web应用API的应用程序缓存清单。

首先，需要先创建manifest文件

CACHE MANIFEST
#This is a comment

CACHE #需要缓存的文件
index.html
style.css

NETWORK: #不需要缓存的文件
search.php
login.php

FALLBACK: #资源不可用的情况下，重定向的地址
/api offline.html

然后加该文的地址加到html属性里：

<html manifest="/offline.manifest">

例子：http://www.mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/

link下的sizes属性

link 元素有了一个新的属性 sizes。可以结合 icon 的关系(通过设置 rel 属性，可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。

例子代码：

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />

ol下的reversed属性

ol 元素有了一个新属性 reversed。当其存在时，代表列表中的顺序为降序。

iframe下的sanddbox, seamless和srcdoc属性

iframe 元素有了三个新属性分别是 sandbox, seamless, 和 srcdoc，用以允许沙箱内容，例如，博客评论。

例子代码：

<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"></iframe>

Seamless:

<nav><iframe seamless src="nav.include.html"></iframe></nav>

video和audio的play属性

HTML5也使得所有来自HTML4的事件处理属性（那些形如 onevent-name 的属性）变成全局属性，并为其定义的新的事件添加了几个新的事件处理属性。比如，媒体元素(video 和 audio)API所使用的 play 事件。

위 내용은 HTML5 학습노트(7)의 간략한 내용입니다. 새로운 속성의 내용(2)에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명：

이전 기사：HTML5 연구 노트의 간결한 버전(6): 새로운 속성(1)다음 기사：HTML5 연구 노트의 간결한 버전(6): 새로운 속성(1)

HTML5 연구 노트의 간결한 버전(7): 새로운 속성(2)

관련 기사