코드의 다음 두 가지가 의미 HTML보기의 관점에서 어떤 문제가?
<! - 더 ->
<!-- 示例1 -->
<label>作者: <input type="author" texture="deep pile"></label>
<!-- 示例2 -->
<body>
<h1>【深度】扒开V8引擎的源码，我找到了你们想要的前端算法</h1>
<h2>下次面试官再问算法，用它怼回去！</h2>
...독자는 먼저 텍스트의 말에 대한 답변에서 위의 예제 의미 코드보기를 시도 할 수 있습니다.
HTML 의미합니다 (에 따라 W3C의 규격 라벨 요소와 자신의 재산의 적절한 사용, 이하 "의미"라고, HTML HTML5를 의미) 많은 기사를 언급하지만, 대부분의 콘텐츠는 의미의 필요성을 홍보하고 개발에 독자를 설득하는 것입니다 의미 론적 태그를 사용하여 멀티.
이 문서는 현 상태의 의미를 탐구하는 대부분의 독자가 의미 코드를 작성하지 않는 것이 좋습니다 열심히 필요성을 홍보하고, 실제적인 의미 작업을 제공하지 않습니다.
상태 의미
우리는 시맨틱 웹의 현재 수준을보고 예를 들어 비 의미 론적 태그의 남용.
비 의미 론적 태그 사실 두 사업부와 기간에 만 보충 교재의 기본 레이블과 같은 두 가지 레이블이 있습니다,하지만 현실은 사용 빈도가 훨씬 더 다른 의미 태그보다입니다.
여기에 태그 JS 스크립트의 통계 숫자입니다, 그것은 수와 페이지의 개별 라벨의 비율의 통계를 사용할 수 있습니다.
브라우저 콘솔을 열고 결과를 얻으려면 다음 코드를 실행합니다.
var total = 0
var obj = Array.prototype.reduce.call(document.querySelectorAll('*'), (acc, cur) => {
let tag = cur.tagName.toLowerCase()
acc[tag]= acc[tag] || 0
acc[tag]++
total++
return acc
}, {})
var list = []
for(let k in obj) list.push({tag: k, times: obj[k], ratio: (obj[k] * 100 / total).toFixed(2) + '%'})
console.clear()
console.table(list.sort((a, b) => b.times - a.times))우리는 가장 자주 사용하는 검색 엔진 페이지를 찾아,의 의미 정도 걸릴 67.5 %를 .
{% Asset_img baidu.jpg %}
베스트 의미 페이지 문서 게시물 등보다 페이지,하지만 블로그 사이트 페이지 정도의 의미 달성 61.29 %를 .
{% Asset_img jianshu.jpg %}
그런 다음 전기 공급 업체의 웹 사이트 페이지와의 의미도 세계 랭킹의 시가 총액의 최전선에 보면 43.19 %를 .
{% Asset_img taobao.jpg %}
더 통계 데이터 전반적인 상황 의미론에 매우 낮은 정도 게시되지 않는다.
왜 시맨틱 그렇게 볼 수 없다?
시맨틱 장애물
의 장면이 더 의미 도로에 엔지니어를 향한 단계별로 실제 개발 단계가 얼마나 보자.
시맨틱 비용
우리는 그들 모두를 기억하고 싶은 경우 HTML 정의하는 100 개 이상의 라벨, 어떤 어려움을 가지고있다.
각각의 속성에 대해 다른 레이블, 메모리 아닌 소량 연결된 경우에도 분류 메모리는 수십 종류가있다.
그래서 당신은 또한 문서를 확인해야 할 수있는 시간을 사용합니다.
효율성의 개발에 기능을 달성하기 위해 직접 사용의 사업부 및 스팬 좋은으로하지 않습니다.
시맨틱 이익
기술의 사용은, 첫째 실적을 고려, 또는 어떤 문제를 해결할 수 있습니다, 다음 것의 의미는 그것을 가져올 수 있습니까?
- 코드의 가독성을 향상시킬 수 있습니다.
- 검색 엔진 최적화에 도움이.
- 시각 장애가있는 사용자에게 관심.
- ...
: 사실, 한 가지로 요약 할, 그런 말로 미루어 보아, 인지 성을 향상시키기 위해 .
자명의 중요성을 인식, 영화 왕 Fugui라고 많은 사람들, 외침은 부유 한 사람들이 다시 마을에 "바람 속삭임의 저주"와 같은 더 인식이 없다.
그 존재는 의미 필수적했다?
확실히 ~
시맨틱 HTML 식별이 달성 할 수있는 유일한 수단 아니다, 태그 ID, 재산, 스타일 이름이 될 수 있습니다.
CSS 스타일 클래스를 작성, 문제의 인식을 넣어하는 방법은 (사람 의미 수없는 이유는 무엇입니까? 당신이없는 사용자 정의 스타일 또는 스타일은 클래스 선택기를 사용 할 수 있다면, 상상) 해결, 그리고 스타일 클래스 또는 속성에 의해 반복되었습니다 ID가 확인 될 수있다.
그리고 이것은 이전에 비해 여러 가지 방법으로, 수익금의 명백한 의미 사용할 수 없습니다.
비 의미 손실
그것을 어떤 해는 의미 라벨을 사용하지 않는 경우 개발자의 관점에서, 고려?
불행하게도, 거의 ~
- 코드의 가독성에서 의미 HTML는 해결할 수 없으며, 또한 ID와 CSS 스타일 클래스는 거의 해결됩니다.
- 메타 태그, 멀티 링크를 작성 : SEO에서 다른 방법이있다. 물론, 돈은 확실히 가장 간접적이다.
- 지금까지 시각 장애인 사용자로,이 수요의 우선 순위가 너무 많은 설명을하지 않았을, 그들은 중소기업이 고려되지 않습니다 있습니다.
개발자의 바닥은하지 의미 전원, 의미 론적 규칙에게 그것을 촉진 할 수 있는지 여부를 관리자를 않습니다 때문에?
I "코드 표준의 세 가지 일반적인 유형은," 당신이 기본 원칙을 수행 할 경우, 사람들이 자기 훈련에 의존하고, 앞서 언급, 자신의 법률 효율이 너무 낮 실현하기 위해 인간에 의해 달성하기 어려운 자동화 된 검사의 설립 그래서 메커니즘, 보충과 인간의 징계는 유효 솔루션입니다.
여러 번 우리는 eslint, tslint, HTML 몇 가지가 검사 도구로 코드 검사 도구를 사용하지만,이 도구는 구문-확인, 의미없는 수표를 확인할 수 있습니다.
예를 들어, 혹 당신이 확인할 수 있습니다 명명 parent_node사양에 맞지 않는이 변수 이름을하지만, 호출은 변수입니다 a또는 전화를 user검사 도구는 힘이다.
갑자기이 도로는 리드 의미 그래서 필수.
시맨틱은 정말로 줄 수 있습니까?
대부분의 엔지니어를 들어, 난 너무 두려워.
코드의 쓰기 의미 직접 효율성을 향상시키기 위해 발전을 가져 오지 않습니다, 우리는 공훈 리더십 감사 및 승진 및 임금 인상이 없을 것입니다 ......
그러나 엔지니어, 기술을하지 추구!
그들은 옳은 일을하는 것은 쉬운 일을하는 것보다 더 중요하다는 것을 알고있다!
시맨틱 도로
당신이 도로의 의미에 착수하기로 결정했다면, 나는 다음과 같은 세 단계 당신을 도울 수 있다고 생각합니다.
1. 제대로 표시 특성
엔지니어를 위해 우리가 습관은 쉽게 사라 프로그래밍하기 전에 모든 한 숨을 제거 할 필요가 아닌 의미 프로그래밍 습관의 개발에 경험이 긴 형태 있습니다.
숨을 권장하지 않습니다 모든 모든 다운 레이블 다음 이전 페이지 아래로, 전체 시맨틱 기술을 다시 작성합니다.
시간과 노동 집약적, 좌절을 생성하고 포기하기 쉽습니다.
따라서 권장되는 방법은 속성이 시작부터 점차 의미, 심지어 라벨을 달성하는 것입니다. 구체적인 예를 참조 예 1
이 단계는 중요한 의미 습관을 개발하는 것입니다.
그것으로 절반 전투를하는 습관을 고수하는 많은 경우에 수.
문서의 구조를 이해합니다
습관 후에는 구조에서 페이지의 의미를 고려할 수 있습니다.
비 의미 큰 문제는 사업부와 스팬 태그 남용이다.
사업부와 스팬을 사용하지 마십시오 결국,이 두 개의 레이블은 사용 가치가 발명되었다, 사실이 아니다.
첫째, 우리는 크게 의미 페이지의 정도를 증가시킬 수 있도록 가능성이 악용 될 수있는 일부 지역을 식별하는 것이 가능하다.
첫 번째 고려 사항은 불필요한 사업부와 스팬 태그를 절감하고, 그런 다음에야 대신에 적절한 의미 태그를 사용하는 것을 고려하는 것입니다.
예를 들어, 매일 콘텐츠를 개발 텍스트에 관한 더, 사업부 및 범위를 교체 ...이 라벨, H1 ~ H6 P, Q, B를 사용하는 것이 좋습니다.
메인 섹션, 바닥 글, 옆으로, 헤더 대신 div에 : 심지어 레이아웃은 또한 다음과 같은 몇 가지 구조적인 태그를 사용할 수 있습니다. 구체적으로는 실시 예 2 참조
3. 분류 메모리
완전히 의미가되고 싶어요, 당신은 또한 도구를 사용할 수 있습니다.
아래 참고 목적만을위한 흐름도 HTML5이다.
{% asset_img flowchart.png %}
W3C는 다음 애니메이션은,이 화상이며, 분류를 제공한다 :
{% asset_img categories.gif %}
특별 영향이 볼 수있는 사이트를
이 개 사진 위를 참조하십시오, 나는 함께 더 운영 버전을 넣어.
첫째, 우리는 특히 단일 페이지 응용 프로그램의 개발에, 우리는 구성 요소를 개발할 때 주요 레이블을 사용할 수 있습니다 고려, 고려 몇 가지 기본적인 태그가 필요하지 않습니다.
!DOCTYPE,html,head,meta,base,link,style,body,script,noscript,<!-- -->
그리고 라벨 분류 수십 나머지는 전적으로 해당하지만, 기억하고 사용하기 쉬운되지 않을 수 있습니다.
{% asset_img flow.jpg %}
물론, 어떤 방법 상관없이, 전제는 여전히 의미와이 라벨의 속성을 기억한다.
이 도구의 역할을하는 것은 우리가 페이지를 쓸 때 만 빠르게 우리를 도와하고 정확하게 사용하는 라벨을 결정하는 것입니다.
개요
프런트 엔드 성장 경로에 돌과 같은 의미, 모든 조약돌은 영향을받지 않습니다 잃은,하지만 더 돌 이상 길을 열어 수집하는 것 -
숙련 된 의미 페이지를 준비하지 않으려면 직접이 수석 프런트 엔드 엔지니어가 될 수 있도록하지만, 프런트 엔드 엔지니어의 작업 습관과 기술 능력의 의미를 반영 할 수 있었다.
<!-- 示例1语义化 -->
<!-- type值修改为浏览器可识别的值 -->
<!-- 自定义属性使用data前缀 -->
<label>作者: <input type="text" class="author" data-texture="deep pile"></label>
<!-- 示例2语义化 -->
<!-- 当出现主标题和子标题时，应使用hgroup标签作为父元素 -->
<body>
<hgroup>
<h1>【深度】扒开V8引擎的源码，我找到了你们想要的前端算法</h1>
<h2>下次面试官再问算法，用它怼回去！</h2>
</hgroup>
...주는 동시에 독자는 생각과 함께 답변 질문 왼쪽 :
<!-- 可点击的图标 -->
<div class="lazy avatar avatar loaded immediate"></div>
<!-- 点击后弹出的菜单 -->
<ul class="nav-menu user-dropdown-list">
<div class="nav-menu-item-group">
<li class="nav-menu-item">
<a href="/user/592447fb44d904006ce996f8" class="link-icon">
<i class="fengwei fw-person"></i>
<span>我的主页</span>
</a>
</li>
<li class="nav-menu-item">
<a href="/user/592447fb44d904006ce996f8/likes">
<img src="https://b-gold-cdn.xitu.io/v3/static/img/zan.e9d7698.svg" class="zan">
<span>我赞过的</span>
</a>
</li>
<li class="nav-menu-item">
<a href="/user/592447fb44d904006ce996f8/collections">
<img src="https://b-gold-cdn.xitu.io/v3/static/img/collect.02e2979.svg" class="collect">
<span>我的收藏集</span>
</a>
</li>
</div>
<div class="nav-menu-item-group">
<li class="nav-menu-item">
<a>
<i class="fengwei fw-logout"></i>
<span>登出</span>
</a>
</li>
</div>
</ul>참조 :