의미론적 태그 분석 예시, HTML5의 새로운 기능

HTML5에는 8b05045a5be5764f313ed5b9168a17e6이라는 단 하나의 간단한 문서 유형만 있습니다. 이는 브라우저가 표준 모드에 따라 이를 구문 분석한다는 의미입니다. 오늘 편집자는 HTML5의 새로운 기능인 Semantic 태그를 가져왔습니다. 관심있는 친구들은 함께 살펴보세요

HTML5 새로운 기능

간결한 DOCTYPE:

HTML5에는 단 하나의 간단한 태그가 있습니다. 문서 유형 : 8b05045a5be5764f313ed5b9168a17e6 - 브라우저가 표준 모드에 따라 구문 분석함을 나타냅니다. ：8b05045a5be5764f313ed5b9168a17e6，表示浏览器会按照标准模式解析。

简单易记的编码类型

你现在可以在meta 标签中使用”charset”：b6c06a3eac5ba315bbbfde6d7627c15a

간단하고 기억하기 쉬운 인코딩 유형

이제 메타 태그에서 "charset"을 사용할 수 있습니다: 161b47c428aa4a437fcf589702127725

스크립트 및 링크 유형이 필요하지 않습니다

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

더 의미 있는 새 태그

예: 23c3de37f2f9ebcb477c4a90aac6fffd, 2f8332c8dcfd5c7dec030a070bf652c3, 15221ee8cba27fc1d7a26c47a001eb9b, d8eccd9ed644b68a6460a2bb84548c82, 1aa9e5d373740b65a0cc8f0a02150c53, 5630d1484023244459a065b21630149a, c787b9a589a3ece771e842a6176cf8e9, 46dd80ba616c57a652514755c74c4211, f920514e6447cf1d171079d1371f007f, a7e92aa379a95c24a947f9b436d5f4f4 및 614eb9dc63b3fb809437a716aa228d24 등

비디오 및 오디오

<video width="640" height="320" preload="auto" poster="0.jpg" controls>
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

양식 개선

새로운 입력 유형: 색상, 이메일, 날짜, 월, 주, 시간, 날짜/시간, 날짜/시간-지역, 숫자, 범위, 검색, 전화번호 및 url

새 속성:

require

d, 자동 초점, 패턴, 목록, 자동 완성 및 자리 표시자

New 요소: aa983b9eb8086376f1f6481364a02e5a, fc86e7b705049fc9d4fccc89a2e80ee3, be6d67dae90cc1ad6469079e163d0939, 49c6123c49c6be380cb91db06cd3bfa9 및 6ecb87e5318a36c03c59e25d55f43372

canvas 태그는 2D 그래픽을 그립니다.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100,100);
context.lineTo(300,300);
context.lineTo(100,500);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();

Geolocation 획득

HTML 의미론

1. HTML 의미론이란 무엇인가요?

태그를 통해 콘텐츠의 의미를 판단합니다. 예를 들어 h1 태그를 기준으로 콘텐츠가 제목인지, e388a4556c0f65e1904146cc1a846bee를 기준으로 문단인지 판단하고, d5fd7aea971a85678ba271703566ebfd 태그는 입력 상자 등입니다.

2. 왜 의미론인가?

1) 스타일이 제거되거나 손실되면 페이지가 명확한 구조를 나타낼 수 있습니다2). 다른 장치(예: 스크린 리더, 시각 장애인 리더, 모바일 장치)에서 웹 페이지를 렌더링하는 것이 편리합니다. 의미 있는 방법3) . SEO에 도움이 됩니다.

4) W3C 표준을 준수하여 차별화를 줄일 수 있습니다.

3. 태그가 의미상 좋은지 확인하는 방법은 무엇입니까?

스타일을 제거하고 웹페이지 구조가 잘 정리되어 있는지, 여전히 가독성이 좋은지 확인하세요.

4. 공통 의미 라벨 모듈

양식

<form action="" method="">
    <fieldset style="border: none">
        <legend style="display: none">登录表单</legend>
        <p><label for="name">账号：</label><input type="text" id="name"></p>
        <p><label for="pw">密码：</label><input type="password" id="pw"></p>
        <input type="submit" name="登录" class="subBtn">
    </fieldset>
</form>

양식 필드는 필드 세트 태그로 래핑되어야 하며, 범례 태그는 양식의 목적을 설명하는 데 사용해야 합니다. input 태그

label 태그를 입력하고, 입력에 대한 id 속성을 설정하고 lable 태그에 for=someld를 설정하여 설명 텍스트를 해당 입력과 연결합니다.

5. 의미 태그에서 주의해야 할 몇 가지 문제

🎜 의미 없는 태그 p와 범위를 가능한 한 적게 사용하세요. 🎜 의미가 명확하지 않은 경우 p 또는 p를 사용해 보세요. , p 기본적으로 상단 및 하단 간격이 있으므로 특수 터미널과의 호환성에 유리합니다. 🎜b, 글꼴, u 등과 같은 순수 스타일 태그를 사용하지 말고 대신 CSS 설정을 사용하세요. 🎜강조가 필요한 텍스트는 Strong 또는 em 태그에 포함될 수 있습니다. Strong의 기본 스타일은 굵게(b 사용 안 함)이고 em은 기울임꼴(i 사용 안 함)🎜

위 내용은 의미론적 태그 분석 예시, HTML5의 새로운 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!