찾다
웹 프론트엔드CSS 튜토리얼第1天:选择什么样的DOCTYPE_基础教程

前言

大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧

第一天

开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码,可以看到第一行就是:

打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:

那么这些代码有什么含义?一定要放置吗?

什么是DOCTYPE

上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。

其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择:

  • 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

  • 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如
    。完整代码如下:

  • 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

我们选择什么样的DOCTYPE

理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。

打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。

补充

DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

更多细节可以访问W3C的网站

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
콘솔 명령 안내서콘솔 명령 안내서Apr 11, 2025 am 10:14 AM

개발자의 디버깅 콘솔은 몇 년 동안 웹 브라우저에서 한 형태 또는 다른 형태로 제공되었습니다. 오류 가보고 될 수단으로 시작

도난당한 도메인 이름의 경우도난당한 도메인 이름의 경우Apr 11, 2025 am 10:12 AM

2011 년 에이 사이트의 도메인 이름 인 CSS-tricks.com은 도난당했습니다. "도메인 납치판"그들은 그것을 부릅니다. 이 사이트만이 아니었지만 약 12 ​​명의 다른 사람들이

에지 간 그리드를 사용하여 전체 폭 요소에지 간 그리드를 사용하여 전체 폭 요소Apr 11, 2025 am 10:09 AM

폭 넓은 컨테이너가있는 경우, 중앙 텍스트 열의 열을 말하면, 전체 폭 요소를 만들기 위해 "헤어지는"이 속임수를 포함합니다. 아마도 최고

엽니지 만 닫히지 않는 세부 사항 요소를 만듭니다엽니지 만 닫히지 않는 세부 사항 요소를 만듭니다Apr 11, 2025 am 10:02 AM

HTML의 및 요소는 텍스트 비트에 대한 콘텐츠 토글을 만드는 데 유용합니다. 기본적으로, 당신은 볼 수 있습니다

Google 스프레드 시트 및 Tabletop.js로 편집 가능한 웹 페이지를 작성합니다Google 스프레드 시트 및 Tabletop.js로 편집 가능한 웹 페이지를 작성합니다Apr 11, 2025 am 10:01 AM

고객의 끝없는 콘텐츠 개정 요청에 직면 한 경우 손을 올리십시오. 변화 자체가 어렵다는 것이 아니라

혁신은 웹을 빠르게 유지할 수 없습니다혁신은 웹을 빠르게 유지할 수 없습니다Apr 11, 2025 am 09:59 AM

종종 혁신의 열매는 웹의 기초 계층에 대한 개선의 형태로 결실을 맺습니다. 2015 년 HTTP/2는 출판되었습니다

Guillermo의 2019 년 검토Guillermo의 2019 년 검토Apr 11, 2025 am 09:52 AM

내가 읽은 모든 기술 중심의 반 검토 게시물 중에서 Guillermo Rauch는 내가 가장 좋아하는 것입니다. 현대 건축과 같은 주제에서 뛰어 내리는 것이 많이 있습니다.

반응 라우터의 고리반응 라우터의 고리Apr 11, 2025 am 09:49 AM

React Router 5는 후크의 힘을 포용하고 라우팅에 도움이되는 4 개의 다른 후크를 도입했습니다. 이 기사가 찾고 있다면 유용한 것을 찾을 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)