HTML5의 새로운 요소 및 태그 요약
- 高洛峰원래의
- 2016-10-17 10:04:032038검색
항상 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）
（18） 标签：用于对网页或区段（section）的标题进行组合。
（19） 标签：用于对网页或区段（section）的标题进行组合。
（20）
（21）
（22）
（23）
（24） 标签：定义 ruby 注释（中文注音或字符）。
（25）
（26）
（27）
（28）
（29）
(30)