의미론적 태그 분석 예시, HTML5의 새로운 기능-H5 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-11-01 10:44:52

원래의

1589명이 탐색했습니다.

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

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

你现在可以在meta 标签中使用”charset”：<meta charset=”utf-8″ />

, ,

, < footer>,

, , ,

및

등

비디오 및 오디오

<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 요소: , , , 및

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

var canvas = document.getElementById(&#39;canvas&#39;);
var context = canvas.getContext(&#39;2d&#39;);
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 태그를 기준으로 콘텐츠가 제목인지,

를 기준으로 문단인지 판단하고, 태그는 입력 상자 등입니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!