HTML5의 새로운 요소 및 태그 요약-H5 튜토리얼-php.cn

항상 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 메소드는 확인 결과를 부울 형식으로 반환합니다.

유효성 검사 취소(양식 유효성 검사 취소에는 양식에 대한 novalidate와 제출에 대한 formnovalidate의 두 가지 속성이 있습니다)

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

로그인 후 복사

사용자 정의 오류: HTML5에서 확인되지 않은 양식 브라우저에는 기본 프롬프트가 있지만 JavaScript를 통해 사용자 정의 오류 프롬프트도 제공합니다. (그냥 함수를 직접 작성해서 클릭하면 호출하면 될 것 같아요).

2. 페이지 요소 강화

//用于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) 그림 요소: 그림은 그림 캡션 제목을 하나만 담을 수 있는 조합 요소입니다.

(2) 세부사항 요소: 세부사항은 화면에서 로컬 영역을 확장하거나 축소하기 위한 대안을 제공합니다.

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

로그인 후 복사

(3) 표시 요소 :mark 요소는 강조 표시하거나 강조 표시해야 하는 페이지 부분.

(4) Progress 요소: 일반적으로 진행률 표시줄을 작성하는 데 사용됩니다. 진행률에 대한 값 및 최대 속성을 설정할 수 있습니다. 값은 수행된 내용을 나타내고, 최대 값은 총 개수만 나타냅니다. 유효한 부동 소수점 숫자여야 합니다. 값은 0보다 크고 최대값 이하여야 합니다. 진행에 대해 이 두 속성을 설정하지 않으면 동적 표시가 진행 중이며 진행이 불확실합니다.

        <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）

标签：定义 section 或 document 的页眉。
（18）标签：用于对网页或区段（section）的标题进行组合。

（19）

标签：用于对网页或区段（section）的标题进行组合。

（20）

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

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

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

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

（25）

标签：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
（26）标签：为媒介元素（比如

（27）

标签：details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

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

（29）

(30)