HTML5 팁 1 : 오늘날 기술 개발 속도는 놀랍습니다. 조심하지 않으면 그것을 따라 잡지 못할 수 있습니다. 새로운 세대의 HTML-HTML5의 발전은 계속해서 새로운 놀라움을 가져오고 있습니다. 이 기사를 통해 HTML 기술을 소개합니다.
1. 새 문서 유형 (Doctype)
<! doctype html public- // w3c // dtd xhtml 1.0 전환 // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
여전히 번거롭고 기억하기 어려운 위의 xhtml 문서 유형을 사용하고 있습니까? 이 경우 여전히 그렇다면 새로운 HTML5 문서 유형으로 전환해야합니다.
<! doctype html>
이제 간단한 캐릭터 만 필요합니다. (참고 : DocType 선언은 HTML 파일의 첫 번째 줄에 나타나야합니다.)
2. 그래픽 (그림) 요소
이미지를 표시하기 위해 다음 코드를 사용하는 것을 고려하고 있습니까?
<mg src = path/to/image alt = image/>
<p> 화성의 이미지. </p>
위의 코드는 단순한 단락과 이미지 요소로 래핑되기 때문에 단순하고 의미 론적 인 방식으로 그래프 제목과 관련 될 수 없으며 HTML5는 <Figure> 요소를 도입하여이를 향상시킵니다. <figcaption> 요소와 함께 사용되면 그래픽 제목을 그래픽과 페어링 할 수 있습니다. 코드는 다음과 같습니다.
<그림>
<img src = path/to/image alt = image/>
<피스 캡션>
<p> 이것은 흥미로운 것의 이미지입니다. </p>
</figcaption>
</그림>
3. 재정의 <Small>
<small> 요소를 사용하여 로고와 밀접한 관련 자막을 만들 수 있습니다. 그러나 이제 HTML5는이 사용법을 수정했으며 <Small> 요소가 재정의되거나 더 적절하게 적절하게 사용되었습니다. 이제 작은 단어 또는 다른 사이드 노트 (예 : 웹 사이트 하단의 저작권 통지)를 나타냅니다.
4. 더 이상 스크립트 나 링크 유형이 필요하지 않습니다
아마도 아래 코드와 같은 링크 및 스크립트 태그에 유형의 속성을 추가하고있을 가능성이 높습니다.
<link rel = 스타일 시트 href = path/to/stylesheet.css type = text/css/>
<script type = text/javaScript src = path/to/script.js> </script>
HTML5에서는 더 이상 필요하지 않습니다. 이 두 레이블은 각각 스타일과 스크립트를 나타냅니다. 따라서 모든 유형 속성을 삭제할 수 있습니다. 코드는 다음과 같습니다.
<link rel = 스타일 시트 href = path/to/stylesheet.css/>
<script src = path/to/script.js> </script>
5. 인용문을 사용하거나 사용하지 마십시오
HTML5는 XHTML과 다르며 마음에 들지 않으면 속성을 따옴표로 랩핑 할 필요가 없습니다. 그러나 인용문을 사용하면 더 편안하게 느낄 수 있다고 생각하면 물론 아무런 문제가 없습니다.
<p class = myclass id = someID> 원자로를 시작하십시오.
6. 콘텐츠를 편집 가능하게하십시오
HTML5의 강력한 기능 중 하나는 만족할 수 있으며, 이름에서 알 수 있듯이 사용자는 요소 (자녀 요소 포함)에 포함 된 텍스트 컨텐츠를 편집 할 수 있습니다. 간단한 작업 목록 또는 위키 기반 사이트와 같은 광범위한 용도가 있으며 장점 중 하나는 로컬 스토리지를 활용한다는 것입니다.
<! doctype html>
<html lang = en>
<헤드>
<meta charset = utf-8 ″>
<title> 제목없는 </title>
</head>
<body>
<H2> 할 일 목록 </h2>
<ul contenteditable = true>
<li> 기계식 택시 운전사를 깨십시오. </li>
<li> 버려진 공장으로 운전합니다
<li> 자기 비디오 시청 </li>
</ul>
</body>
</html>
또는 다섯 번째 트릭에서 알 수 있듯이, 당신은 다음과 같은 9 행에 코드를 쓸 수도 있습니다 (따옴표없이).
<ul contenteditable = true>
7. 이메일 입력
입력 형식을 지정하기 위해 이메일 유형을 적용하면 유효한 이메일 주소 구조를 준수하는 문자열 입력 만 허용하도록 브라우저를 명령 할 수 있습니다. 내장 된 양식 검증이 곧 도착하지만 이에 전적으로 의존 할 수는 없습니다. 구형 브라우저는이 이메일 유형을 이해하지 못하고 단순히 일반 텍스트 상자로 돌아갑니다.
<! doctype html>
<html lang = en>
<헤드>
<meta charset = utf-8 ″>
<title> 제목없는 </title>
</head>
<body>
<양식 action = method = get>
<label for = email> 이메일 : </label>
<입력 ID = 이메일 이름 = 이메일 유형 = 이메일 />
<버튼 유형 = 제출> 제출 양식 </button>
</form>
</body>
</html>
브라우저가 지원하고 지원하지 않는 요소 및 속성에 관해서는 모든 브라우저가 현재 그렇게 신뢰할 수있는 것은 아니라는 것을 알아야합니다. 예를 들어, Opera는 이름 속성을 지정하는 경우에만 이메일 확인 만 지원합니다. 그러나 자리 표시 자 속성을 지원하지 않습니다 (아래에서 설명 할 것). 마지막으로,이 형태의 검증을 사용할 수는 있지만 너무 많이 의존하지 마십시오.