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

유효성 검사 취소(양식 유효성 검사 취소에는 양식에 대한 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)

标签:定义 article 以外的内容。aside 的内容应该与 article 的内容相关。aside可以用于网站页尾一排排的广告或者链接，一竖排为一个aside。也可以用于博客侧栏。

（12）

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

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

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

（16）

 标签：定义 section 或 document 的页脚。

（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) 

标签：定义对话（会话）dialog元素表示几个人之间的对话。