시맨틱 웹페이지 XHTML 시맨틱 태그_HTML/Xhtml_웹페이지 제작

구조와 표현을 분리하는 또 다른 중요한 측면은 의미론적 마크업을 사용하여 문서 콘텐츠를 구조화하는 것입니다. XHTML 요소가 있다는 것은 표시된 콘텐츠의 일부가 해당 구조적 의미를 갖고 있으며 다른 마크업을 사용할 이유가 없음을 의미합니다. 즉,

태그 대신

를 사용하는 등 CSS가 하나의 HTML 요소를 다른 HTML 요소처럼 보이게 만들지 마세요.

먼저 의미론과 기본 스타일의 차이점에 관한 것입니다. 기본 스타일은 브라우저에서 설정한 일반적으로 사용되는 일부 태그를 표현한 것입니다. 개인적으로 주요 목적은 모든 사람이 태그를 직관적으로 이해할 수 있도록 하는 것이라고 생각합니다. 마크업) 그리고 속성의 목적과 기능을 보면 Hx 시리즈는 굵은 글꼴과 더 큰 글꼴 크기를 가지고 있기 때문에 제목과 많이 유사하다는 것이 분명합니다. ,은 다른 단어와 구별하고 강조하는 역할을 하는 데 사용됩니다. 목록과 표는 해당 기능이 무엇인지 명확하게 알려줍니다.

둘째, 시맨틱 웹 페이지의 가장 중요한 이점은 검색 엔진에 친화적이라는 것입니다. 구조와 시맨틱이 좋으면 웹 페이지 콘텐츠가 자연스럽게 검색 엔진에 의해 쉽게 크롤링되며 비용을 절약할 수 있습니다. 귀하의 웹사이트 홍보에 많은 노력을 기울이십시오.

특정 의미와 용도는 XHTML1.0 TAG 참조에 설명되어 있으며 쉽게 잊어버리거나 혼동되는 일부 태그 및 속성이 여기에 보충되어 있습니다.

,

,

,

,

,

;, 중요도 내림차순으로 제목으로 사용됩니다.

이 가장 높은 수준입니다.
예:

클립보드에 콘텐츠 복사

코드:

<fontface><h1>문서 제목</h1><code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>

부제

문서 제목

또는 문서 제목을 사용하는 대신 분명히 검색 엔진은 후자에 관심이 있습니다. 그가 타이틀이라고 생각하지 않을 것입니다.

단락 기호,

를 단락으로 알고 있으면 더 이상
. 그리고 단락과 단락을 구별하기 위해

가 필요하지 않습니다.

의 텍스트는 자동으로 줄 바꿈되며 줄 바꿈 효과는
보다 좋습니다. 단락 사이의 간격도 CSS를 사용하여 제어할 수 있으므로 단락을 서로 구별하는 것이 쉽고 명확합니다. line-height를 사용하면 선 사이의 간격을 쉽게 정의할 수 있고, 첫 글자 장식과 같은 효과를 정의할 수 있어 완벽합니다.
예:

클립보드에 콘텐츠 복사

코드:

<fontface><p>블루아이디어 www.blueidea.com은 1999년 10월 탄생했습니다. 블루아이디얼은 설립 초기부터 네트워크 개발 기술 도입과 웹사이트 제작 및 디자인 교류를 주요 내용으로 하여 웹사이트 디자이너와 개발자를 위한 홈 구축을 목표로 삼아왔습니다. 웹사이트의 콘텐츠는 잘 제작되었으며, 회원들이 세심하게 제작한 튜토리얼이 매일 공개되어 네티즌들에게 사심 없이 도움을 주고 있으며, 많은 디자인 공모전을 개최하고 많은 관련 프로그램을 개발하여 현재도 많은 웹사이트에서 사용되고 있습니다. 게재된 작품과 리뷰는 많은 언론의 주목을 받고 전문가들의 찬사를 받았으며 동시에 사회적 지위를 확립했으며 그 결과 인터넷 동료들이 잇달아 Blue Ideal에 합류하여 중국 최대 규모의 디자인 사이트로 성장했습니다. 하나. <code><font face="NSimsun"><p>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。 <br></p><br><p>多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。</p></font>

수년간 Blue Ideal의 콘텐츠는 지속적으로 풍부해졌으며, 국내 유명 웹사이트와 전통 미디어를 통해 지속적으로 홍보되었습니다. Google, Baidu, Yahoo, Sohu, Sina, Excite 등 주요 검색 사이트에서 수집되었으며 Google의 3대 검색 엔진에서 중국어 간체 '웹사이트 디자인 및 개발' 키워드 검색 순위 1위를 차지했으며, Baidu 및 Yahoo. 이제 Blue Ideal은 미국에서 가장 영향력 있는 웹사이트 디자인 및 개발 전문 웹사이트 중 하나로 발전했습니다.

,

,
1. 
   
   
   
   Unordered list는 매우 일반적이고 모든 사람이 널리 사용하는 목록입니다.
   Ordered list도 상당히 유용합니다. 일반적으로 사용됩니다. 웹 표준화 과정에서
   은 원래 네비게이션 바에 더 많이 사용되었습니다. 이것은 완전히 정확하며 브라우저가 CSS를 지원하지 않는 경우에도 네비게이션 링크는 매우 편리합니다. 잘 작동하지만 미학이 약간 떨어져 있습니다.
   예: 클립보드에 콘텐츠 복사
   코드:<font face="NSimsun"><ul><br><li>项目一</li><br><li>项目二</li><br><li>项目三</li><br></ul></font> <fontface><ul></fontface>
   • 프로젝트 1
   • 프로젝트 2
   • ;/li>
   클립보드에 콘텐츠 복사
   코드:
   <font face="NSimsun"><ol><br><li>第一章</li><br><li>第二章</li><br><li>第三章</li><br></ol></font>

   ,

   ,

   
   
   dl은 "정의 목록"입니다. 예를 들어, 이런 종류의 목록은 사전에 있는 단어에 대한 설명과 정의에 사용될 수 있습니다.
   예:

   클립보드에 콘텐츠 복사

   코드:

   <fontface><dl><code><font face="NSimsun"><dl><br><dt>Dog</dt><br><dd>A carnivorous mammal of the family Canidae.</dd><br></dl> </font>

   개

개과에 속하는 육식 포유류.

클립보드에 콘텐츠 복사

<font face="NSimsun"><dl><br><dt>上海滩</dt><br><dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。<br>当年在香港播出以后，产生了巨大的轰动效应。</dd><br><dt>周润发</dt><br><dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。<br>风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd><br></dl></font>코드:

<fontface><dl><strong><dt>상하이 해변</dt></strong><dd>1980년에 촬영된 이 '상하이 해변'은 가장 성공적이고 홍콩 텔레비전 역사상 고전 드라마 시리즈. <br>홍콩에서 방송된 후 큰 반향을 불러일으켰습니다. </dd><br><dt>주윤발</dt><br><dd>모든 위대한 영화배우들과 마찬가지로 주윤발도 홍콩영화의 황금시대를 열었습니다. <br>바람막이와 선글라스, 냉혈한 총, 해맑은 미소가 모두 영화 속에 담겨 있다. 돌아보면 파게가 한 시대의 좌표로 새겨져 있다. </dd><br></dl></fontface>

, cite, ,

포럼과 블로그에서는 종종 다른 사람의 인용문을 사용하고 . 웹 브라우저는 사이의 콘텐츠를 자동으로 인식합니다. 불행하게도 IE는 이를 인식하지 못하며 때로는 로 인해 일부 접근성 문제가 발생할 수 있습니다. 이 때문에 일부 사람들은 사용을 피하고 인용 태그를 수동으로 삽입할 것을 권장합니다. 적절한 클래스가 포함된 내에 참조 콘텐츠 한 줄을 추가하면 CSS로 참조 스타일을 지정할 수 있지만 이는 의미상 의미가 없습니다. 관련 문제를 다루는 것에 대한 Mark Pilgrim의 Q 태그(http://diveintomark.org/archives/2002/05/04/the_q_tag)를 읽어보세요. <font face="NSimsun"><cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.</font>하나 이상의 단락을 길게 인용하려면

를 사용하세요. CSS를 사용하여 참조 스타일을 정의할 수 있습니다. 기사의 단락은

에 직접 배치할 수 없으며, 인용된 내용은 일반적으로

요소에도 포함되어야 합니다. cite 속성은 인용된 콘텐츠의 소스 주소를 제공하기 위해 및

와 함께 사용할 수 있습니다. 참조 콘텐츠를 표시하기 위해 대신 을 사용하면 cite 속성을 사용할 수 없습니다.

예: 클립보드에 콘텐츠 복사

코드:<font face="NSimsun"><p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p></font>

클립보드에 콘텐츠 복사

코드:<font face="NSimsun"><p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/<br />struct/text.html#h-9.2.1">The presentation of phrase elements<br>depends on the user agent.</q>.</p></font>

클립보드에 콘텐츠 복사 코드: <fontface><p>W3C에서는 <q cite="http://www.w3.org/TR/REC-html40/<🎜>struct/text.html#을 말합니다. h-9.2.1">구문 요소의 표시는사용자 에이전트에 따라 다릅니다.</q>.</p></fontface>

클립보드에 콘텐츠 복사

코드:

<font face="NSimsun"><blockquote cite="http://www.w3cn.org/"><br><p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，<br>     我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，<br>     为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，<br>     每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，<br>     例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；<br>     针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。<br>     这是一种恶性循环，是一种巨大的浪费。”</p><br></blockquote></font>

,

은 강조에 사용됩니다. 대부분의 브라우저는 강조된 콘텐츠를 기울임체로 표시하고 강조된 콘텐츠가 표시되는 방식을 결정하려는 경우 가장 좋은 방법은 CSS를 사용하여 모양을 정의하는 것입니다. 원하는 것이 시각적 효과뿐이라면 강조를 사용하지 마세요. 강조하고 싶지만 여전히 볼드체나 이탤릭체의 시각적 효과가 그다지 좋지 않다고 느끼는 경우(특히 중국어의 경우 이탤릭체) 눈길을 끄는 다른 스타일을 정의하여 강조 효과를 얻을 수 있습니다.
예:

클립보드에 콘텐츠 복사

코드:

<fontface><p><em>강조하는 텍스트는 일반적으로 이탤릭체로 표시됩니다.<code><font face="NSimsun"><p><em>强调</em> 的文本通常用斜体显示，<br>然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p></font>그러나 강조하는 텍스트는 일반적으로 굵게 표시됩니다. .

, 태그는 테이블의 헤드입니다. 테이블의 주요 콘텐츠이고 태그는 테이블의 꼬리입니다.
headers 속성을 대체하고 헤더 정보가 포함된 셀을 표시하는 데 사용할 수 있는 범위를 사용할 수도 있습니다. 각 값의 내용은 다음과 같습니다.
row는 현재 셀을 나타내며 포함된 행에 대한 관련 테이블을 제공합니다. 현재 셀의 헤더 정보입니다.
Col은 현재 셀을 나타내며, 현재 셀을 기준으로 지정된 열에 해당하는 헤더 정보를 제공합니다.
Rowgroup은 현재 셀을 나타내며 현재 셀이 포함된 나머지 행 그룹에 대한 관련 헤더 정보를 제공합니다.
Colgroup은 현재 셀을 나타내며, 현재 셀을 기준으로 지정된 나머지 열 그룹에 대한 해당 헤더 정보를 제공합니다.
abbr은 헤더 셀에 약어 이름을 정의하는 데 사용됩니다. 이 속성이 정의되지 않으면 기본 셀 내용은 약어 형식으로 표시됩니다.
예:

클립보드에 콘텐츠 복사

코드:

<fontface><table id="mytable" cellpacing="0" summary="Apple PowerMac G5 시리즈의 기술 사양"><code><font face="NSimsun"><table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"><br><caption>Table 1: Power Mac G5 tech specs </caption><br>   <tr><br><th scope="col" abbr="Configurations" class="nobg">Configurations</th><br><th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th><br><th scope="col" abbr="Dual 2">Dual 2GHz</th><br>     <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th><br>   </tr><br>   <tr><br><th scope="row" abbr="Model" class="spec">Model</th><br><td>M9454LL/A</td><br><td>M9455LL/A</td><br><td>M9457LL/A</td><br>   </tr><br>   <tr><br><th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th><br><td class="alt">Dual 1.8GHz PowerPC G5</td><br><td class="alt">Dual 2GHz PowerPC G5</td><br><td class="alt">Dual 2.5GHz PowerPC G5</td><br>   </tr><br>   <tr><br><th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th><br><td>900MHz per processor</td><br><td>1GHz per processor</td><br><td>1.25GHz per processor</td><br>   </tr><br>   <tr><br><th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th><br><td class="alt">512K per processor</td><br><td class="alt">512K per processor</td><br><td class="alt">512K per processor</td><br>   </tr><br></table></font>

구성
듀얼 2GHz  < thscope="col" abbr="듀얼 2.5">듀얼 2.5GHz

 

  모델

<font face="NSimsun"><p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p></font> G5 프로세서

<font face="NSimsun"><p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p></font>레벨2 캐시

, summary

XHTML의 테이블은 레이아웃에 사용하면 안 됩니다. 그러나 목록 데이터에 레이블을 지정하는 경우 테이블을 사용해야 합니다.

표 1: 전원 Mac G5 기술 사양

,	,
는 테이블의 제목이고, 속성 요약은 헤더 설명이고,
듀얼 1.8GHz
M9454LL/A	M9455LL/A	M9457LL /A
듀얼 1.8GHz PowerPC G5	듀얼 2GHz PowerPC G5	듀얼 2.5GHz PowerPC G5
프로세서당 900MHz	프로세서당 1GHz	프로세서당 1.25GHz< ;/td>
프로세서당 512K	프로세서당 512K	512K

효과 보기: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm 클립보드에 콘텐츠 복사 코드: , del을 알고 있다면 를 취소선으로 사용하지 마세요. 그리고 del에는 삭제 이유와 삭제 시간을 나타내는 cite 및 datetime도 있습니다. ins는 삽입을 의미하며 이러한 속성도 가지고 있습니다. 예: 클립보드에 콘텐츠 복사 코드: </strong><br><br>는 컴퓨터 코드를 의미합니다. 기본 스타일은 서체입니다. 기술 포럼이나 블로그에서 자주 접하게 됩니다. <br>예: <div class="blockcode"> <em>클립보드에 콘텐츠 복사</em> <h5>코드:</h5> <code><font face="NSimsun"><code>p{margin:2px 0;}