Wulin.com의 기사 소개 (www.vevb.com) : 끔찍한 경험을 기억합니다. 이 페이지에는 수십 개 또는 수십 개의 div가 중첩되었습니다. 내가 읽을 때 현기증이 나게 만들었습니다 ... 그들 중 일부는 스팬 태그, P 태그 및 div를 사용할 수 있습니다. H1 및 HX를 사용할 수있는 사람들도 DIV 태그를 사용합니다. 실제로 말이 없습니다 ... 현재, 개발자가 "의미 론적 태그"의 개념과 행동이 있기를 바랍니다.
일부 채용 요구 사항은 웹 의미론이라는 단어에 익숙하고 웹 표준에 대한 이해/익숙한 것을 본다. Tag Semantics는 웹 표준의 일부이므로 블로그 파크에 게시하는 데 사용한 게시물을 수정 한 다음 게시했습니다. 프론트 엔드 초보자가 그러한 것이 있다는 것을 알 수 있기를 바랍니다.
나는 끔찍한 경험을 기억합니다. 이 페이지에는 수십 개 또는 수십 개의 div가 중첩되었습니다. 내가 그것을 볼 때 현기증이 나게 만들었습니다 ... 그들 중 일부는 스팬 태그, p 태그 및 div를 사용할 수 있습니다. H1 및 HX를 사용할 수있는 사람들도 DIV 태그를 사용합니다. 정말 말이 없다 ... 현재, 개발자가 시맨틱 태그의 개념과 행동이 있기를 바랍니다 ...
1 : (이론) 의미 론적 레이블이란 무엇입니까?
시맨틱 태그는 가능한 한 해당 구조를 가진 HTML 태그를 사용하는 것입니다. 예를 들어 테이블을 가져갑니다.
<테이블>
<tr>
<td> 소비자 품목 </td>
<td> 소비량 </td>
</tr>
<tr>
<td> 먹는 </td>
<td> 20 위안 </td>
</tr>
</테이블>
위의 표에 무엇이 잘못되었는지 보셨습니까? 헤헤, 그런 다음이 시맨틱 레이블을보십시오
<테이블>
<caption> 부기 소비 </caption>
<헤드>
<tr>
<th> 소비자 품목 </th>
<th> 소비량 </th>
</tr>
</head>
<tbody>
<td> 먹는 </td>
<td> 20 위안 </td>
</tbody>
</테이블>
이 두 코드의 태그는 다릅니다. 두 번째 테이블의 태그 코드는 의심 할 여지없이 웹 표준과 일치합니다.
<캡션> : 테이블 제목;
<head> : 테이블의 헤더;
<th> : 테이블의 특정 열의 열 헤더.
우리가 익숙한 것에 대해 이야기합시다
<title> 블로그 공원 소개 </title> <body> 블로그 파크는 소프트웨어 개발 기술 파크입니다. 2004 년에 설립되었습니다 ... </body>
기사를 읽을 때 제목이 어디에 있는지 아는 이유는 무엇입니까? 브라우저 상단에. 그렇다면 왜 검색 엔진이 기어 올릴 수 있습니까? 시맨틱 태그 <title>의 제목이 기사라는 것을 알고 있습니다. 우리가 이것을 준수하지 않으면 대신 :
<Span> 블로그 공원 소개 </span> <span> 블로그 파크는 소프트웨어 개발 기술 공원입니다. 2004 년에 설립되었습니다 ... 여기 ... <span>
그렇다면 검색 엔진은 제목이 누구이며 내용이 누구인지 어떻게 알 수 있습니까? 타이틀을 잡는 데 어떻게 의존합니까? 실제로 의미론은 라벨 의미뿐만 아니라 구조적 의미로 확장 할 수 있습니다. 예를 들어:
#Left {float : 왼쪽; margging-left : 50px;}
#right {float : 오른쪽; 마진-탑 : 100px;}
<div id = 왼쪽> 내용 .. </div>
<div id = right> content .. </div>
이 예에서, ID의 이름 지정은 약간 과장되었지만 비슷한 상황에서 일부가 발생합니다. #Left Div를 페이지 오른쪽에 놓고 #Right로 위치를 변경하려면 스타일을 변경할 수 있습니까?
#Left {float : 오른쪽; 마진-왼쪽 : 50px;}
#right {float : 왼쪽; 마진-탑 : 100px;}
그렇게 보이는 것은 너무 어색 할 것이며,이 두 div의 레이아웃을 오도하는 것입니다.
이렇게 작성해야합니다.
<div id = main> 컨텐츠 .. </div>
<div id = sidebar> 내용 .. </div>
이런 식으로,이 div에 어떤 내용이 있는지 알 수 있으며 스타일을 수정하는 것이 편리합니다.
2 : (이론) 시맨틱 레이블은 어떻습니까?
1. 검색 엔진 크롤링 (SEO 최적화) 및 개발자 유지 보수 (명확한 구조와 읽기 쉬운 유지 보수가 높음)에 더 도움이되는 구조가 향상됩니다.
2. 특수 터미널 (휴대 전화, 개인 비서 등)을 읽는 데 더 도움이됩니다.
3 : (행동) 시맨틱 레이블로 무엇을해야합니까?
<Span>, <div> 무의미한 구조적 의미와 덜 의미론을 사용하려고 노력하면 그것이 무엇인지 알 수 없지만 한 눈에 무엇이 있는지 알 수는 없습니다. EM 태그는 다른 내용과 강조되고 구별되는 컨텐츠임을 알 수 있습니다.
그렇다면 페이지가 웹 표준 중 하나 인 시맨틱 태그를 준수하는지 여부를 결정하는 방법은 무엇입니까? 페이지 스타일을 일시적으로 제거하고 가독성이 얼마나되는지 확인할 수 있습니다. 현재 페이지가 매우 지저분하다고 생각되면 페이지의 의미 론적 레이블이 그리 좋지 않다는 것을 의미합니다. 스타일을 제거한 후 페이지가 여전히 지저분하지 않으면 페이지 구조가 명확하고 시맨틱 레이블이 더 좋습니다.
이것은 단지 내 의견입니다. 읽은 사람들이 모든 사람이 당신의 아이디어를 알고이 기사를 개선 할 수 있도록 자신의 아이디어를 표현하기를 바랍니다.