시맨틱 웹 페이지 XHTML 시맨틱 태그

구조와 표현을 분리하는 또 다른 중요한 측면은 문서 컨텐츠를 구성하기 위해 시맨틱 마크 업을 사용하는 것입니다. XHTML 요소의 존재는 태그 된 컨텐츠의 일부가 해당 구조적 의미를 가지며 다른 태그를 사용할 이유가 없음을 의미합니다. 다시 말해, CSS가 <p> 태그 제목 대신 <div>를 사용하는 것과 같은 다른 HTML 요소처럼 보이게하지 마십시오.

우선, 그것은 의미론과 기본 스타일의 차이에 관한 것입니다. 기본 스타일은 브라우저에서 설정 한 일반적으로 사용되는 일부 태그의 표현입니다. 나는 개인적으로 그 주요 목적은 모든 사람이 태그와 속성의 용도와 기능을 직관적으로 이해하도록하는 것이라고 생각합니다. HX 시리즈는 대담하고 더 큰 글꼴 크기를 가지고 있기 때문에 제목과 매우 유사하게 보입니다. <strong>, <em>는 그것을 다른 단어와 구별하는 데 사용되며 강조 역할을합니다. 목록과 테이블에 관해서는, 그들이 무엇을하는지 말해주는 것이 분명합니다.

둘째, 시맨틱 웹 페이지에서 가장 중요한 것은 검색 엔진에 친숙하다는 것입니다. 좋은 구조와 의미론을 통해 웹 페이지 컨텐츠는 자연스럽게 검색 엔진으로 기어 가기 쉽고 웹 사이트 프로모션은 많은 노력을 절약 할 수 있습니다.

특정 의미와 용도는 XHTML1.0 태그 참조에 설명되어 있습니다. 잊기 쉬운 일부 태그와 속성은 여기에서 보충됩니다.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>은 제목으로 사용되며 중요성에 따라 줄어 듭니다. <H1>은 최고 수준입니다.

예를 들어:

암호:

<div class = title> document thit 검색 엔진이 후자의 제목으로 간주하지 않을 것입니다.

단락 마크, <p>를 단락으로 아는 것은 더 이상 <br/>를 사용하지 않으며 단락과 단락을 구별 할 필요가 없습니다. <p> </p>의 텍스트는 자동으로 랩핑되며 랩핑의 효과는 <br>보다 낫습니다. 단락 간의 격차는 CSS를 사용하여 제어 할 수 있으므로 단락을 단락과 쉽게 구별하는 것이 쉽고 명확합니다. 여행 간격을 쉽게 정의한 다음 라인 높이를 사용하여 첫 번째 특징 침몰 효과를 정의 할 수 있다면 완벽합니다.

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

</p>

<p> 수년 동안 Blue Imber의 컨텐츠는 지속적으로 풍성해졌으며 유명한 국내 웹 사이트와 전통적인 미디어에 의해 강조되었습니다. Google, Baidu, Yahoo, Sohu, Sina 및 Excite와 같은 주요 검색 사이트에서 수집되었습니다. Google, Baidu 및 Yahoo의 3 가지 주요 검색 엔진 중에서 단순화 된 중국 키워드의 웹 사이트 디자인 및 개발 검색에서 1 위를 차지했습니다. 이제 Blue Evel은 중국의 웹 사이트 디자인 및 개발에서 가장 영향력있는 전문 웹 사이트 중 하나로 발전했습니다. </p> <ul>, <ol>, <li>

<ul> 정렬되지 않은 목록은 매우 일반적이며 널리 사용됩니다. <ol> 정렬되지 않은 목록도 일반적으로 사용됩니다. 웹 표준화 프로세스 중에 <ul>도 내비게이션 바에 더 많이 사용됩니다. 원래 내비게이션 바는 목록입니다. 브라우저가 CSS를 지원하지 않으면 내비게이션 링크는 여전히 매우 좋지만 조금 덜 아름답습니다.

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

<li> 프로젝트 1 </li>

<li> 프로젝트 2 </li>

<li> 프로젝트 3 </li>

</ul> 컨텐츠를 클립 보드에 복사하십시오

암호:

<li> 1 장 </li>

<li> 2 장 </li>

<li> 3 장 </li>

</ol> <dl>, <dt>, <dd>

DL은 정의 목록입니다. 예를 들어, 사전에서 단어의 설명과 정의는이 목록에서 사용할 수 있습니다.

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

<dt> 개 </dt>

<dd> 가족 Canidae의 육식성 포유류. </dd>

</dl> 컨텐츠를 클립 보드에 복사하십시오

암호:

<dt> 상하이 비치 </dt>

<dd> 1980 년에 촬영 된이 "상하이 번드"는 홍콩 TV의 역사에서 가장 성공적이고 고전적인 드라마입니다.

그해 홍콩에서 방송 된 후 큰 감각을 일으켰습니다. </dd>

<dt> Chow Yun-Fat </dt>

<dd> 모든 훌륭한 영화 배우처럼 Chow Yun-Fat은 홍콩 영화의 황금 시대 인 시대를 확인했습니다.

바람 코트, 선글라스, 냉혈한 이중 총 및 맑은 미소는 모두 영화에서 밀봉되어 있습니다. 우리가 되돌아 보면, Fa Ge는 시대의 좌표로 새겨 져 있습니다. </dd>

</dl> <cite>, 인용, <Q>, <blockquote>

포럼과 블로그는 종종 다른 사람의 인용문을 사용하여 <q>를 사용하여 짧은 단일 라인 인용문을 표시합니다. 웹 브라우저는 <q> 사이의 내용을 자동으로 인식합니다. 불행히도, 즉, 즉, 인식 할 수 없으며 때로는 <q>가 접근성 문제를 일으킬 수 있습니다. 이 때문에 일부 사람들은 <q>를 사용하지 않고 참조 마크를 수동으로 삽입하는 것이 좋습니다. 적절한 클래스를 포함하는 <Span>에 단일 참조 컨텐츠를 추가 한 다음 CSS를 사용하여 참조 스타일을 지정할 수 있지만 의미 적 의미는 없습니다. Mark Pilgrim이 작성한 <q> 관련 문제를 처리 할 때 Q 태그 (http://diveintomark.org/archives/2002/05/04/the_q_tag)의보기를 읽을 수 있습니다.

하나 이상의 단락을 긴 인용하려면 <blockquote>를 사용해야합니다. CSS는 참조 스타일을 정의하는 데 사용될 수 있습니다. 기사는 <blockquote>에 직접 배치 할 수 없으며 인용 된 내용은 요소, 일반적으로 <p>에 포함되어야합니다. 속성 인용은 <q> 또는 <blockquote>와 함께 사용하여 참조 된 내용의 소스 주소를 제공 할 수 있습니다. <q> 태그 참조 콘텐츠 대신 <span>을 사용하는 경우 인용 속성을 사용할 수 없습니다.

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

암호:

암호:

struct/text.html#H-9.2.1> 문구 요소의 프레젠테이션

클립 보드에 콘텐츠를 복사하십시오

암호:

<p> 우리 대부분은 심오한 경험을 가지고 있습니다. 주류 브라우저 버전이 업그레이드 될 때마다 방금 구축 한 웹 사이트는 구식이 될 수 있습니다.

웹 사이트를 업그레이드하거나 재건해야합니다. 예를 들어, 1996 년부터 1999 년까지 전형적인 브라우저 전쟁

Netscape 및 IE와 호환 되려면 웹 사이트는이 두 브라우저에 대해 다른 코드를 작성해야했습니다. 비슷하게,

새로운 네트워크 기술과 대화식 장치가 등장 할 때 마다이 새로운 기술이나 새로운 장치를 지원하기 위해 새로운 버전을 만들어야합니다.

예를 들어, 모바일 인터넷 액세스를 지원하는 WAP 기술. 수많은 유사한 질문이 있습니다. 웹 사이트 코드는 부풀어 오르고 복잡하며 많은 대역폭을 낭비합니다.

특정 브라우저를위한 DHTML 특수 효과는 일부 잠재 고객을 차단합니다. 사용하기 어려운 코드, 장애인은 웹 사이트를 탐색 할 수 없습니다.

이것은 악의적 인주기와 거대한 폐기물입니다. </p>

</blockquote> <em>, <strong>

<em>은 강조에 사용되며 <strong>은 강조에 사용됩니다. 대부분의 브라우저는 이탤릭체를 사용하여 강조 표시된 컨텐츠와 굵게 표시되어 강조 표시된 컨텐츠를 표시합니다. 그러나 이것은 필요하지 않습니다. 강조가 어떻게 표시되는지 결정하는 경우 가장 좋은 방법은 CSS를 사용하여 성능을 정의하는 것입니다. 원하는 것은 시각적 효과 일 때 강조하지 마십시오. 그리고 당신이 강조하고 싶지만 여전히 대담하거나 이탤릭체가 시각적 효과, 특히 중국어의 이탤릭체가 좋지 않다고 느끼면, 다른 눈길을 끄는 스타일을 완전히 정의하여 강조의 효과를 달성 할 수 있습니다.

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

그러나 특별히 강조된 텍스트는 일반적으로 대담하게 표시됩니다. </p> <table>, <td>, <th>, <caption>, 요약

XHTML의 테이블을 배치해서는 안됩니다. 그러나 목록의 데이터를 표시하려면 테이블을 사용해야합니다. <th>는 테이블 제목이고, 속성 요약은 요약이고, <caption> 태그는 헤더 설명이고, <thead> 태그는 헤더이고, <tbody> 태그는 테이블의 주요 내용이며, <tfoot> 태그는 테이블의 끝입니다.

또한 헤더 속성을 대체하고 헤더 정보를 포함하는 셀을 대체하는 데 사용될 수 있습니다. 여기서 각 값의 내용은 다음과 같습니다.

행은 현재 셀을 나타내며 현재 셀을 포함하는 행에 관련 헤더 정보를 제공합니다.

COL은 현재 셀에 따라 지정된 열에 해당하는 헤더 정보를 제공하는 현재 셀을 나타냅니다.

RowGroup은 현재 셀을 나타내며 현재 셀을 포함하는 나머지 행 그룹에 관련 헤더 정보를 제공합니다.

Colgroup은 현재 셀을 나타내며, 현재 셀에 기초하여 지정된 나머지 열 그룹에 해당하는 헤더 정보를 제공합니다.

ABBR은 헤더 셀에서 약어 이름을 정의하는 데 사용됩니다. 이 속성이 정의되지 않으면 기본 셀 내용이 생략됩니다.

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

<캡션> 표 1 : Power Mac G5 기술 사양 </caption>

<tr>

<th scope = col abbr = configurations class = nobg> 구성 </th>

<th scope = col abbr = dual 1.8> 듀얼 1.8GHz </th>

<th scope = col abbr = dual 2> 듀얼 2GHz </th>

<th scope = col abbr = dual 2.5> 듀얼 2.5GHz </th>

</tr>

<tr>

<th scope = row abbr = model class = spec> model </th>

<td> M9454ll/a </td>

<td> M9455ll/a </td>

<td> M9457ll/a </td>

</tr>

<tr>

<TH SCOPE = ROW ABBR = G5 프로세서 클래스 = SPECALT> G5 프로세서 </th>

<td class = alt> 듀얼 1.8ghz powerpc g5 </td>

<td class = alt> 듀얼 2GHz powerpc g5 </td>

<td class = alt> 듀얼 2.5GHz powerpc g5 </td>

</tr>

<tr>

<TH SCOPE = ROW ABBR = Frontside 버스 클래스 = 사양> Frontside Bus </th>

프로세서 당 <td> 900mhz </td>

프로세서 당 1GHz </td>

프로세서 당 <td> 1.25GHz </td>

</tr>

<tr>

<th scope = row abbr = l2 캐시 클래스 = specalt> level2 캐시 </th>

<td class = alt> 프로세서 당 512k </td>

<td class = alt> 프로세서 당 512k </td>

<td class = alt> 프로세서 당 512k </td>

</tr>

</table> 효과보기 : http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

암호:

델을 알고 있다면 <S>를 더 이상 StrikEthrough로 사용하지 마십시오. 델을 사용하는 것은 분명히 의미 론적입니다. 또한 DEL에는 인용 및 DATETIME가 제공하여 삭제 이유와 삭제 시간을 나타냅니다. INS는 삽입을 의미하며 그러한 속성이 있습니다.

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

컴퓨터 코드를 의미합니다. 기본 스타일은 글꼴입니다. 기술 포럼과 블로그에서 종종 발생합니다.

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

<abbr> 태그는 웹 페이지의 약어를 나타내고 <cronym> 태그는 약어입니다. (참고 : 여기서 우리는 약어와 약어를 분리합니다. 약어의 범위는 약어보다 큽니다.

Windows IE6.0 아래에 <ACRONYM> 태그) 브라우저로 쓰기 <ABBR> 태그를 지원하지 마십시오. 즉, <cronym>에 CSS를 적용 할 수는 있지만 <abbr> 태그에는 적용 할 수 없습니다.

즉, <ACRONYM> 태그의 제목 속성에 대한 프롬프트가 표시되지만 <ABBR> 태그를 무시합니다.

http://www.w3cn.org/article/translate/2005/115.html을 참조하십시오

예를 들어 : 컨텐츠를 클립 보드에 복사하십시오

암호:

암호:

제목 속성은 Base, BaseFont, Head, HTML, Meta, Param, Script 및 Title을 제외한 모든 태그에서 제목 속성에 대한 추가 지침을 제공하는 데 사용됩니다. 그러나 필요하지 않습니다.

ALT 속성은 이미지, 양식 또는 애플릿을 표시 할 수없는 사용자 에이전트 (UA)입니다. 교체 텍스트의 언어는 Lang 속성에 의해 지정됩니다. 클립 보드에 콘텐츠를 복사하십시오

암호:

암호:

기본 스타일 :

http://www.w3cn.org/article/tips/2005/116.html

http://www.w3.org/tr/css21/sample.html

의미론:

http://www.456bereastreet.com/lab/developing_with_web_standards/zh

http://www.456bereastreet.com/lab/developing_with_web_standards

http://www.w3cn.org/article/translate/2005/114.html

http://www.w3cn.org/article/translate/2005/114.html

http://www.junchenwu.com/2005/11/html_tags.html

http://brainstormsandraves.com/articles/semantics/structure/

http://www.w3.org/tr/html401/struct/text.htm

http://www.simplebits.com/bits/simplequiz/

나쁜 태그 :

http://www.htmldog.com/guides/htmlintermediate/badtags/

Q 태그

http://diveintomark.org/archives/2002/05/04/the_q_tag

HTML, XHTML, 시맨틱 및 웹의 미래

http://www.westciv.com/style_master/house/good_oil/xhtml/index.html