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

집

웹 프론트엔드

H5 튜토리얼

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

黄舟

Nov 01, 2017 am 10:44 AM

h5 html5 상표

HTML5에는 이라는 단 하나의 간단한 문서 유형만 있습니다. 이는 브라우저가 표준 모드에 따라 이를 구문 분석한다는 의미입니다. 오늘 편집자는 HTML5의 새로운 기능인 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(&#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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