H5 의미 태그-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

H5 의미 태그

php中世界最好的语言

Mar 27, 2018 pm 02:01 PM

html5 상표 의미론

이번에는 H5의 semantic 태그를 가져왔습니다. H5 semantic 태그 사용 시 주의사항은 무엇인가요?

HTML5 새로운 기능

간결한 DOCTYPE:

HTML5에는 간단한 문서 유형 : <!DOCTYPE html>만 있습니다. 즉, 브라우저는 표준 모드. ：<!DOCTYPE html>，表示浏览器会按照标准模式解析。

简单易记的编码类型

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

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

이제 메타 태그에서 "charset"을 사용할 수 있습니다: <meta charset="utf-8″ />

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

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

로그인 후 복사

더 의미 있는 새 태그

예:

, ,

, < 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('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 태그를 기반으로 한 제목인지,

를 기반으로 한 단락인지 확인하고, 입력 상자 등

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 속성을 설정하고 label 태그에서 for=someld를 설정하여 설명 텍스트를 해당 입력과 연결합니다.

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

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

강조해야 할 텍스트는 Strong 또는 em 태그에 포함될 수 있습니다. Strong의 기본 스타일은 굵게(b 사용 안 함), em은 이탤릭체(i 사용 안 함)

그렇다고 믿습니다. 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:

HTML5에서 그림을 넘기는 애니메이션 효과를 얻는 방법

🎜🎜H5 비디오에서 배경 음악을 자동으로 재생하는 방법🎜🎜🎜

위 내용은 H5 의미 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.