예를 들어, 화면 소프트웨어를 읽어야하는 사용자. 프론트 엔드로서 어떻게 견딜 수 있습니까? 나는 항상 그런 기사를 작성하고 더 나은 접근성을 가진 페이지를 만드는 방법을 공유하고 싶었습니다. 오늘의 계획에는 HTML TA AG 및 WCAG 표준의 조합이 포함됩니다. 일부 사람들의 삶이 더 쉬울 수 있도록 HTML을 이렇게 작성하는 것이 좋습니다.
오늘 공유하고 싶은 것은 HTML 태그를 사용하여 WCAG 표준 및 시맨틱 네트워크 목표를 반영하는 방법입니다.
실제로 이것은 WCAG와 관련이 없지만, 더 나은 호환성, 특히 뒤로 호환성이있는 페이지의 경우 다음과 같이 작성하는 것이 좋습니다.
<! doctype html>
인터넷 연결은 페이지에서 가장 일반적인 태그로 <a>를 사용하여 구현할 수 있습니다. 우리는 그것을 어떻게 처리해야합니까?
<a href = title = accesskey = m rel =Hidefocus> 링크 </a>
또한 HTML 태그를 올바르게 사용하는 것이 매우 중요하며, 이는 화면 읽기 소프트웨어 사용자의 페이지 구조를 이해하는 데 도움이됩니다. 특히 H1, H2, H3 등과 같은 라벨을 사용할 때 남용은 쉽게 구조적 혼란을 초래할 수 있습니다. 물론 일반 태그를 사용하고 CSS를 사용하여 시각적 대조를 이루는 것도 평범한 사람들이 인식 할 수있는 것입니다. 그러나 화면 읽기 소프트웨어 사용자는 어떻습니까? 물론 여기서는 페이지 태그 사용에주의를 기울이기 만하면 ABBR에서 가장 중요한 것은 약어를 설명하기 위해 제목 속성을 추가하는 것입니다. 예를 들어:
<abbr title = 웹 개발자> wd </abbr>
인용문의 큰 단락이 있으면 <blockquote>를 사용하고 인라인 따옴표는 <cite>를 사용하여 구조를보다 쉽게 읽을 수 있도록하십시오.
<blockquote> 나는 항상 그러한 기사를 작성하고 싶었고, 더 나은 접근성을 가진 페이지를 만드는 방법을 공유하고 싶었습니다. 오늘의 계획에는 HTML TA AG 및 WCAG 표준의 조합이 포함됩니다. 일부 사람들의 삶이 더 쉬울 수 있도록 HTML을 이렇게 작성하는 것이 좋습니다. </blockquote> <p> A의 가장 인상적인 문장은 앞에있을 때 사랑이 있어야한다는 것입니다. 언제든지 모든 종류의 사람들에게 포효하는 시체를 사용하지 마십시오. </p>
종이에 무언가를 쓰는 것은 컴퓨터에 무언가를 쓰는 것처럼 할 수 없습니다. Undo 키를 사용하여 누를 수 있지만 무언가가 삭제되었음을 강조하고 싶을 때 어떻게해야합니까? <del> 태그를 사용하는 것입니다. 예를 들어:
<del> HTML에 대한 강조를 표현할 때 & lt; b & gt; 태그 </del> HTML에 대한 강조를 표현할 때 & lt; strong & gt; 꼬리표
효과는 다음과 같습니다.
HTML을 강조 할 때는 <b> 태그를 사용하십시오HTML을 강조 할 때 <strong> 태그를 사용하십시오
작년에 새로운 이민자들을 데려 갈 때 작년에 Alipay 프론트 엔드 블로그를 할 때 가장 깊은 것은 <dl>를 사용하는 것을 좋아한다는 것입니다. 그 당시 나는이 학생들이 꽤 좋고 의미론을 잘 이해하고 있다고 생각했습니다. 우리는 여전히 정의 목록을 거의 사용하지 않습니다. 대신, 일반 <ul> <ol> 두 개를 사용하십시오. <dl>는 또한주의해서 사용해야하며 W3School의 예, 커피 및 우유의 정의와 같은 특정 결정적인 항목 만 사용하는 것이 가장 좋습니다.
<dl> <dt> 커피 </dt> <dd>- 검은 색 뜨거운 음료 </dd> <dt> milk </dt> <dd>- 화이트 콜드 음료 </dd> </dl>
목록, 이것은 모든 프론트 엔드에 매우 친숙합니다. 구조는 매우 유연하게 적용될 수 있으므로 탐색, 목록, 탭 등에 종종 사용됩니다. 이에 대해 많이 말할 필요가 없습니다. 그러나 이해해야 할 것이 하나 있습니다. <ul>/<ol>은 <pable>의 대체물이라고 믿지 마십시오. 일반적으로 사용되는 HTML 태그에서 각 태그에는 고유 한 기능이 있으며 아무도 누구도 대체하지 않습니다.
<ol> <li> 커피 </li> <li> 차 </li> <li> 우유 </li> </ol>
테이블이라면 목록은 물론 단락을 대신 사용하지 마십시오. 절대적으로 필요하지 않으면 전환 가능합니다. 또한 테이블에는 몇 가지 점이 있습니다.
<테이블 요약 = 소파시의 블로그 상태> <thead> <tr> <th> 날짜 </th> <th> ip </th> <th> pv </th> </tr> </thead> <tbody> <td> <td> 2011.3.11 <3000 </td> <td> 8000 </td> </td> </td> </td> </td> </td> </td> </td> </td>
<code>는 컴퓨터 코드 텍스트를 말하고 <fre>는 사전 포맷 된 텍스트를 나타냅니다. <fre>는 더 넓은 범위이며 다양한 텍스트, 특히 코드를 형식화하는 데 사용될 수있는 블록 요소입니다. 일반 <p> 대신 <pre>를 사용하지 않는 것과 같이 주로 의미 적으로 올바른 사용을 사용할 때 특별한주의를 기울일 필요가 없습니다.
<code> 텍스트-정상 : 센터 </code> <pre> {(1 * 102) + (9 * 101) + (3 * 100)} </pre>최신 웹 페이지에서는 <br>를 사용하는 것은 매우 드 rare니다. 웹 페이지의 빈 공간은 일반적으로 CSS 패딩 및 마진을 사용하여 구현됩니다. 이것은 더 정확하고 제어하기 쉽습니다. 권장되는 사용법은 이제 일반 단락 <p>를 사용하여 페이지의 공백을 제어하는 대신 간단한 라인을 나누는 것입니다.
<p> 나는 단락이다. <br /> 정치는 항상 선을 뚫고 있습니다. </p>
<HR>는 매우 좋은 의미 론적 효과를 가지고 있습니다. 그러나 그의 시각적 효과는 제어하기가 어렵습니다. 나는 다양한 브라우저에서 문제에 대해 그러한 기사를 작성했습니다. 일반적으로 거의 사용되지 않습니다. 스크린 읽기 소프트웨어 사용자를 위해 특별히 별도의 페이지를 제공하는 경우 크게 사용될 수 있습니다.
<H3> Title 1 </h3> <p> Lorem Ipsum은 ... </p> <hr/> <h3> Title 2 </h3> <p> 이것은 ... </p>입니다.
실제로, 두 개의 태그 <div>/<span>은 의미론을 가지고 있으며 둘 다 문서의 섹션을 정의합니다. 예, 실제로는 html5에서 <섹션>과 동일합니다. 검색 엔진으로 인해 검색 엔진은 의미 적 레이블이라고 생각하므로 시맨틱 레이블이됩니다. 권장되는 사용법은 다른 컨테이너를 레이아웃과 같은 페이지 프레임으로 사용하는 것입니다.
<div id = container> <div id = content> </div> <div id = sidebar> <ul> <li> <li> <span> 신 </span>, 오 나의 zsh </span> </li> </ul> </div> </div>
이 태그는 거의 페이지 태그의 계층 구조에서 가장 중요한 태그라고 할 수 있습니다. 우리는 책의 구조를 사용 하여이 태그를 설명 할 수 있으며, 페이지를 만들 때 그러한 생각도 생각해야합니다.
예, 물론 기술 책 <pre class = code>,주의가 필요한 점 목록, 쉬운 비교를 위해 테이블 등에 제공되는 인용문 <blockquote>, 코드도 있습니다.
<h1> 로고 </h1> <h2> 제목 </h2> <div class = entry> <h3> 요약 : </h3> <p> Lorem ipsum은 ... <em> 강조 </em> </p> </div>
<em> 약어를 강조합니다. <strong>은 강조합니다. 방금 시작한 많은 학생들은 <em>, <strong>, <cite>, <i>, <b> 및 <b>의 레이블을 정확하게 사용할 수 없습니다. <i>와 <b>은 기본적으로 버려지며 현재는 현재와 <strong>에 해당합니다. 일반적으로, 내용의 중요성에 대한 순서는 다음과 같습니다. Strong> em ≈ 인용.
<strong> 참고 : </strong> <cite> 글꼴, 센터 </cite> 등과 같은 오래된 태그를 사용하지 마십시오. 특히 <em> font </em>.
양식 항목은 HTML에서 비교적 복잡한 태그이며 다음에주의를 기울여야 할 사항이 많이 있습니다.
<form method = post action = http : //sofish.de> <fieldset> <egend> my form </chorm </chorm </charm <label for = firstName>* 이름 : </label> <input type = firstName/> <레이블에 대한 = speech> </label> <textArea id = speech/>> <입력 유형 = 제출 항목 = 제출하십시오. </fieldset> </form>
사진의 경우 맹인은 그들을 볼 수 없습니다. 대체 텍스트를 나타 내기 위해 ALT를 제공합니다. 이것이 어떤 종류의 사진인지 알려주십시오.
<img src = http : //sofish.de/favicon.ico alt = 행복한 즐겨 찾기 favicon/>
<Iframe> 프레임 워크 사용을 피하려고 노력하지만이를 사용해야 할 때는 제목 속성을 제공하는 것이 가장 좋습니다.
<iframe src = http : //sofish.de title = 행복한 즐겨 찾기/</iframe>
미디어는 또한 비교적 복잡한 형식으로 처리하기에 더 문제가됩니다. 일반적으로 우리는 이것을 할 수 있습니다 :
<Audio SRC = Mozart.mp4> Mozart 39 Symphony </audio>
페이지에는 제목이 포함되어야하며 각 태그는 인식 할 수 있어야합니다. 예를 들어, 이것은 Alipay에 반영됩니다.
<title> 연락처-심함 즐겨 찾기 </title>
괜찮은. 그게 다야. WCAG는 이러한 간단한 HTML 태그를 사용하는 것이 아니라 의미 론적 웹 페이지가 하나 또는 두 개의 기사로 작성할 수있는 것이 아닙니다. 시간을 내십시오. 가장 일반적인 것들로 시작하고 좋은 습관을 개발하십시오. 기사의 시작 부분에서 문장으로 돌아가서, 당신은 페이지를 사용하기 어렵게 페이지를 쓸 마음이 있습니까?