HTML5의 새로운 요소 및 태그 요약

항상 h5 새 태그에 대한 서면 테스트 문제가 있어서 요약할 정보를 확인했습니다.

1. 양식 관련:

(1) 양식 속성: HTML5의 양식 요소 요소에 양식 속성을 추가하여 양식 외부에 배치하고 대상 양식을 가리킬 수 있습니다(양식 속성 값은 대상 양식 ID로 설정됨).

(2) Formaction 속성: HTML5는 제출 버튼(예: 버튼, 제출, 이미지 등)에 formaction 속성을 추가하여 다양한 서버 주소로의 제출을 ​​용이하게 합니다.

<input formaction="new.html" type="submit" value="提交到new.html">

(3) formmethod 속성: formaction과 사용법은 동일합니다.

(4) 자리 표시자 속성: 텍스트 상자가 입력되지 않은 상태일 때 사용되는 텍스트 프롬프트입니다.

(5) 자동 초점 속성: 페이지에서 하나의 컨트롤만 이 속성을 가질 수 있습니다. 이 속성에는 값이 없으므로 직접 작성하면 됩니다.

<input name="username" autofocus type="text" id="username">

(6) 목록 속성: 한 줄 텍스트 상자에 사용됩니다. 이 속성의 값은 특정 데이터 목록 요소의 ID입니다. 이 속성을 추가한 후의 한 줄 텍스트 상자는 다음과 유사합니다. 선택 상자(select)가 있지만 사용자 정의 입력이 허용됩니다. 이 요소를 지원하지 않는 브라우저에서 오류를 방지하기 위해 일반적으로 CSS 설정을 사용하여 표시하지 않습니다.

order:<input list="list" name="order" autofocus type="text" id="order">
            <datalist id="list" style="display:none">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </datalist>

(7) 자동완성 속성: 자동완성 기능을 사용하면 브라우저가 필드에 대한 입력을 예측할 수 있어 누구나 볼 수 있는 보안 위험을 피할 수 있습니다. 이 속성에는 "on", "off" 또는 ""(지정되지 않음)의 세 가지 값이 있습니다. 지정하지 않으면 브라우저의 기본값이 사용됩니다.

(8) 입력 요소 유형:

검색: 텍스트 텍스트 상자와 유사하며 검색에 사용됩니다.

tel: 텍스트 텍스트 상자와 유사하며 전화 통화에 사용됩니다.

url: 텍스트 텍스트 상자와 유사하며 URL 형식 주소에 사용됩니다.

이메일: 텍스트 텍스트 상자와 유사하며 이메일 형식 주소에 사용됩니다. 텍스트 텍스트 상자는 유사하며 숫자 값에 사용됩니다.

범위: 범위 내의 값만 입력할 수 있으며 범위는 min 및 max 속성을 통해 설정됩니다. 색상: 색상 텍스트 상자, "#000000 "형식의 텍스트;

파일: 파일 선택 텍스트 상자, HTML5의 다중 속성을 통해 다중 선택 가능

날짜, 날짜, 월, 주, 시간, 날짜/시간 - 시간 입력을 위한 텍스트 상자

출력: 다양한 유형의 출력을 정의합니다.

(9) 양식 확인 관련:

자동 확인(즉, 확인 요구 사항을 충족하기 위해 요소에 해당 속성을 추가하여)

필수 속성: 이 속성이 있는 요소는 콘텐츠가 비어 있으면 제출이 허용되지 않으며 해당 프롬프트는 다음과 같습니다. 주어진.

패턴 속성: 이 속성이 있는 요소의 경우 콘텐츠가 비어 있지 않으면 콘텐츠가 패턴 값과 일치합니다. 일치에 실패하면 통과하지 못하고 프롬프트가 나타납니다.

최소 속성 및 최대 속성: 입력 범위를 제한하는 값 유형 및 날짜 유형 입력 요소의 특수 속성입니다.

Step 속성: 요소의 값이 증가하거나 감소하는 단계를 제어합니다. 예를 들어 1~100 사이의 숫자를 입력하고 단계가 5인 경우 1, 6, 11만 입력할 수 있습니다. ....

표시 확인(자동 확인을 위해 요소에 속성을 추가하는 것 외에도 HTML5에서는 선택 요소 및 텍스트 영역을 포함한 양식 요소 및 입력 요소(입력)에 checkValidity 메서드가 있으며 이 메서드를 호출하여 수동으로 확인할 수 있습니다. . checkValidity 메소드는 확인 결과를 부울 형식으로 반환합니다.

function check(){
        var email=document.getElementById("email");
        if(email.checkValidity()){
        alert("email格式正确");
        }else{
        alert("email格式不正确");
        }
        }

//用于form的novalidate
        <form novalidate>
        <input type="text" name="name" id="name" required>
        <input type="submit" name="button" id="button" value="提交">
        </form>

        //用于submit的formnovalidate
        <form>
        <input type="text" name="name" id="name" required>
        <input type="submit" orfmnovalidate name="button" id="button" value="提交">
        </form>

(1) 그림 요소: 그림은 그림 캡션 제목을 하나만 담을 수 있는 조합 요소입니다.

        <figure>
        <img src="logo.png" alt="HTML5의 새로운 요소 및 태그 요약">
        <figcaption>标志</figcaption>
        </figure>

        <details>
        <summary>点击我查看细节</summary>
        <p>我是细节内容。</p>
        </details>

(5) 미터 요소: 도량형을 정의합니다. (상한값과 하한값을 정의하는 값은 색상으로 구분됩니다.)

　　　high:定义度量的值位于哪个点，被界定为高的值。
low:定义度量的值位于哪个点，被界定为低的值。
max:定义最大值。默认值是 1。
min:定义最小值。默认值是 0。
optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value:定义度量的值。

（6）改良的ol列表：在HTML5中为ol元素添加了start属性和reversed属性。

　　start：表示列表序号从几开始。

　　reversed：表示列表序号为倒序。

（7） 改良的dl列表：dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn。

        <dl>
        <dt>术语1</dt>
        <dd>描述...</dd>
        <dt><dfn>名字</dfn>术语2</dt>
        <dd>描述...</dd>
        </dl>

(8)cite:用于表示作者。

(9)small:用于标识“小型文本”。

(10)

(11)

（12）

（13） 标签：定义图形（是为了客户端矢量图形而设计的）。

（14） 标签：定义命令按钮，比如单选按钮、复选框或按钮。

（15） 标签:定义嵌入的内容，比如插件。

（16）

（17）

（19）

（20）

（21）

 标签：定义不同类型的输出，比如脚本的输出。

（22） 标签：在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

（23） 标签：定义字符（中文注音或字符）的解释或发音。

（24） 标签：定义 ruby 注释（中文注音或字符）。

（25）

（27）

（28） 标签：定义日期或时间，或者两者。

（29）

 (30)