HTML 태그 및 속성의 의미화
- 巴扎黑원래의
- 2017-04-05 16:52:291034검색
구조와 표현을 분리하는 또 다른 중요한 측면은 문서 내용을 구조화하기 위해 의미론적 마크업을 사용하는 것입니다. XHTML 요소가 있다는 것은 표시된 콘텐츠의 일부가 해당 구조적 의미를 갖고 있으며 다른 마크업을 사용할 이유가 없음을 의미합니다. 즉, CSS가
태그 제목 대신
를 사용하여 하나의 HTML 요소를 다른 HTML 요소처럼 보이게 만들지 마세요.
먼저, 시맨틱스와 기본 스타일의 차이점에 대해 말씀드리자면, 기본 스타일은 브라우저에서 설정한 흔히 사용되는 태그의 표현입니다. Hx 시리즈는 굵고 큰 글꼴 크기로 인해 제목과 매우 유사해 보입니다. ,은 다른 단어와 구별하고 강조하는 역할을 하는 데 사용됩니다. 목록과 표는 해당 기능이 무엇인지 명확하게 알려줍니다.
둘째, 시맨틱 웹 페이지의 가장 중요한 이점은 검색 엔진에 친숙하다는 것입니다. 구조와 의미가 좋으면 웹 콘텐츠가 자연스럽게 검색 엔진에 의해 쉽게 크롤링되며 웹 사이트를 홍보하는 데 드는 노력을 줄일 수 있습니다.
, , , , , 은 중요도 순으로 제목으로 사용됩니다. 이 가장 높은 수준입니다. 예:<h1>文档标题</h1>
<h2>次级标题</h2>
, , , 은 중요도 순으로 제목으로 사용됩니다. 이 가장 높은 수준입니다. 예:<h1>文档标题</h1>
<h2>次级标题</h2>
, 은 중요도 순으로 제목으로 사용됩니다. 이 가장 높은 수준입니다. 예:<h1>文档标题</h1>
<h2>次级标题</h2>
이 가장 높은 수준입니다. 예:<h1>文档标题</h1>
<h2>次级标题</h2>
문서 제목
또는 문서 제목을 사용하는 대신 분명히 검색 엔진은 후자를 사용하지 않을 것입니다. 제목에 하나.
단락 기호,
를 단락으로 알고 나면 더 이상
를 사용하여 단락을 구분할 필요가 없습니다. 단락.
보다 좋습니다. 단락 사이의 간격도 CSS를 사용하여 제어할 수 있으므로 단락을 서로 구별하는 것이 쉽고 명확합니다. line-height를 사용하면 선 사이의 간격을 쉽게 정의할 수 있고, 첫 글자 장식과 같은 효과를 정의할 수 있어 완벽합니다. 예:
<p>Admin10000.com 是WEB开发者学习交流的网站,这里提供大量实用的技术文档及相关资源下载，是网页设计、网络编程人员及其爱好者必备网站。</p> <p>希望大家能在这里学到WEB开发知识，启发灵感，提高自己的WEB开发水平。</p>
,
, -
- 순서가 지정되지 않은 목록은 매우 일반적이어서 모든 사람이 널리 사용합니다.
- ,
- 순서가 지정된 목록도 매우 일반적으로 사용됩니다. 웹 표준화 과정에서
- 은 원래 네비게이션 바에 더 많이 사용되었습니다. 이것은 완전히 정확하며 브라우저가 CSS를 지원하지 않는 경우에도 네비게이션 링크는 매우 편리합니다. 잘 작동하지만 미학이 약간 떨어져 있습니다. 예:
<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
<ol> <li>第一章</li> <li>第二章</li> <li>第三章</li> </ol>
,
dl은 "정의 목록"입니다. 예를 들어, 이런 종류의 목록은 사전에 있는 단어에 대한 설명과 정의에 사용될 수 있습니다. 예:
<dl> <dt>Dog</dt> <dd>A carnivorous mammal of the family Canidae.</dd> </dl>
<dl> <dt>上海滩</dt> <dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。 当年在香港播出以后，产生了巨大的轰动效应。</dd> <dt>周润发</dt> <dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。 风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd> </dl>
, 인용, ,
포럼과 블로그에서는 다른 사람을 인용할 때 짧은 한 줄 인용문을 표시하기 위해 요소에도 포함되어야 합니다. cite 속성은 인용된 콘텐츠의 소스 주소를 제공하기 위해
是用作强调的，是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，特别是斜体对于中文来说，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。例如:
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。
知道del，就不要再用
表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。例如：
标签是表示web页面上的简称，标签为取首字母缩写。（注：这里把简称和缩写分开而论，简称范围比缩写大，取首字母的缩写用标签）Windows的IE6.0以下的浏览器暂不支持标签。 在IE里，你可以应用CSS给但是不能应用给标签，IE会为标签的title属性显示提示，但是会忽略标签。
title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。 위 내용은 HTML 태그 및 속성의 의미화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!를 사용하는 경우가 많습니다. 웹 브라우저는
사이의 콘텐츠를 자동으로 인식합니다. 불행하게도 IE는 이를 인식하지 못하며 때로는
로 인해 일부 접근성 문제가 발생할 수 있습니다. 이 때문에 일부 사람들은
사용을 피하고 인용 태그를 수동으로 삽입할 것을 권장합니다. 적절한 클래스가 포함된 내에 참조 콘텐츠 한 줄을 추가하면 CSS로 참조 스타일을 지정할 수 있지만 이는 의미상 의미가 없습니다.
관련 문제 처리에 대한 Mark Pilgrim의 Q 태그(http://peintomark.org/archives/2002/05/04/the_q_tag)를 읽어보세요. 하나 이상의 단락을 길게 인용하려면
를 사용하세요. CSS를 사용하여 참조 스타일을 정의할 수 있습니다. 기사의 단락은
에 직접 배치할 수 없으며, 인용된 내용은 일반적으로
및
와 함께 사용할 수 있습니다. 콘텐츠를 인용하기 위해
태그 대신 을 사용하면 cite 속성을 사용할 수 없습니다. 예:
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.
<p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>
<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>
<blockquote cite="http://www.w3cn.org/">
<p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。”</p>
</blockquote>
、
<p><em>强调</em> 的文本通常用斜体显示，
然而，<strong>特别强调</strong> 的文本通常以粗体显示。</p>
、
、 、< caption >、 summary
为表格标题，属性summar为摘要， 标签为表格主体内容，标签为表格尾部。
其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：
row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。
col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。
rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。
colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
例如:
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5">Dual 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 Processor" class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>
<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>
</table>
<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>
,
做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。例如：<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>
、
解决方法见: http://www.w3cn.org/article/translate/2005/115.html
例如:<abbr title="Cascading Style Sheets">CSS</abbr>
<acronym title="Cascading Style Sheets">CSS</acronym >
alt属性和title属性
alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。
<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com">
<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js获取单选按钮的数据">js获取单选按钮的数据</a>