mozilla
您的搜索结果

    HTML 入门

    当你在 web 浏览器中浏览网页时,你看到的最基本的内容是文字。这些文字一般有着一些样式特性,比如不同的文字大小和颜色。在多数情况下,页面还会展示图片或者还可能带有视频;有时候会有一个表格,你可以填写信息(或者搜索内容);或者可以依据喜好自定义页面的展示效果;页面也经常会带有动画效果的内容;页面上有些内容会不断变化但有些内容会保持不变。

    一些技术(如CSSJavaScriptFlashAJAXJSON)可以用来定义网页中的一些元素。但是,网页的基础是由HTML(HyperText Markup Language 超文本标记语言)来定义的。没有了HTML,网页不可能存在。HTML是一个把所有东西包含起来的外壳:HTML是一个国际化的标准,由万维网联盟(W3C)和网页超文本技术工作小组 (WHATWG)维护。WHATWG认为HTML是一个“活着的标准”,它应该不断地在进化。而W3C则致力于维护HTML的“多个版本快照”,即当前最新的版本HTML5和HTML的进化版HTML 5.1

    HTML规范所定义的这种语言,既可以使用较为松散的HTML语法,也可以使用更为严格的XML(Extensible Markup Language 扩展标记语言)语法,同时也解决了Web应用的需求。HTML没有描述内容的样式和格式,只是内容本身和其意义。如果你想要在网站中加入样式和格式,需要通过层叠样式表(CSS)来定义和控制。

    这篇文章提供了一个HTML的入门简介。如果你想要了解浏览器背后的工作原理,这篇文章是一个很好的开始。

    HTML 简史

    蒂姆·伯纳斯-李CERN(欧洲核子研究组织)的一位物理学家,在80年代后期建立了能在网路上分享文件的一种方式。而在这之前,网路上沟通的方式仅能以纯文本传递,比如:电子邮件、FTP(文件传输协议)和Usenet讨论版。HTML是利用内容档案储存至中央服务器的方式,然后再将内容透过浏览器传递至本机工作站。 它简化了内容存取的方式,也让更多丰富内容能够显示(诸如较复杂的文本格式与图片的显示)。

    什么是 HTML?

    HTML 是一种标记语言(markup language。它告诉游览器如何显示内容。HTML把内容(文字,图片,语言,影片等等)和「presentation」(这个内容是如何显示,比如文字用什么颜色显示等等)分开。HTML使用预先定义的元素集合来识别内容形态。 元素包含一个以上的标记来包含或者表达内容。标记利用尖括号表示,而结束标记(用来指示内容尾端)则在前面加上斜线。

    举例来说,段落元素包含起始标记“<p>”和结束标记“</p>”。下面的例子展示一个包含HTML段落元素的段落

    <p>My dog ate all the guacamole.</p>

    当此内容显示在网页游览器中,它看起来会像这样:

    游览器利用标记来当作指示如何显示标记中的内容。

    包含内容的元素同时可以包含其他的元素,比如强调元素(<em>) 可以包裹在段落元素里面:

    <p>My dog ate <em>all</em> the guacamole.</p>

    展示的时候它看起来是这样的:

    有一些元素是不能包含其他元素的,比如图片标签(<img>),它只需要简单的指定文件名,作为他的一个属性即可。

    <img src="smileyface.jpg">

    通常而言,尖括号括起的内容前面有斜线意味着一个标签的结束。这在HTML中是可选项,而在XHTML是必须的,包括XML模式下的HTML元素。

    下文将阐述上面介绍这些概念的细节。如果你想动态地学习HTML,请点击Mozilla Thimble,一个在线html编辑器。同时你可以参考HTML Elements来查看可用的HTML标签以及他们的用法。

    元素——基本的构造区块

    HTML由不同元素的集合组成。元素定义了它们所包含内容的语义。元素包含了两个相匹配的元素标签之中所有的内容,当然也包含了标签本身。例如,"<p>"标签表示一个段落;"<img>"标签表示一张图片。访问HTML Elements页面以查阅完整的列表。

    一些元素都有着明确的含义, 例如 ”这是一张图片”,“这是一个标题” 或者 “这是一个有序列表”。 另外一些则没这么特殊,例如 "这是本页面的一个节" 或者 "这是文本的一部分",但是就技术层面上而言它们都是必不可少的,  例如标记一些在网页中不会被显示的内容。不论如何,所有的html元素都有其特定的语义及存在价值。

    大部分的元素都支持元素嵌套,构成了一个层次结构。 一个简单的完整的网页结构例子如下所示:

    <html>
      <body>
    
        <p>My dog ate all the guacamole.</p>
    
      </body>
    </html>

    显而易见, <html> 元素将其他元素括起,,<body> 元素中包含网页内容。 该结构通常被视为由主干(<html>)发展而来的具有分支(本例中分支为, 元素 <body> 和<p> )的树形结构。 该层次化结构称为 DOM: Document Object Model--文档对象模型

    标签

    HTML文档由纯文本表示。 你可以使用任意支持纯文本编写保存的文本编辑器来编写HTML文档,但大部分HTML程序员更倾向于使用专门的编辑器,这些编辑器支持语法高亮和DOM显示,例如Notepad++和sublime Text。 标签(Tag)的名字不区分大小写。 但是,W3C (维护HTML标准国际性性联盟)建议使用小写 ( XHTML 同样要求使用小写).

    HTML 为由一对尖括号(<>)所括起来的内容以特定含义. 这样的标识称为一个 标签(tag). 例如:

    <p>This is text within a paragraph.</p>
    

    上述例子中有一个起始标签(start tag)和一个结束标签(end tag)。结束标签与起始标签在内容上是一样的,但结束标签会在小于符号(<)后多一个整斜线/。 大多数 HTML 元素由一个起始标签和一个结束标签标识。起始标签和结束标签应成对出现,也就是说在一个起始标签之后应有其对应的结束标签。  由连个标签(起始标签和结束标签)构成的元素而言,缺少其中之一,这个元素都肯能会被认为是无效的。

    注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag

    有效代码示例:

    <em>I <strong>really</strong> mean that</em>.
    

    无效代码示例:

    Invalid: <em>I <strong>really</em> mean that</strong>.

    有效实例代码里的em的结束标签写在它内嵌标签strong的结束标签之前。

    HTML5之前的浏览器在遇到没有正确嵌套的标签时,它们的解析方式是不一样的,所以现实结果也不一样。现代浏览器()对没正确嵌套的标签已经能解析出统一的文档模型了

    有些元素没有包含文本内容或者其他元素,这称为空元素。它们没有结束标签,请看下面例子:

    <img src="smileyface.jpg">

    一般在结束标签后面空格加上个斜杠(这在XHTML是必需的)

    <img src="smileyface.jpg" />

    而在HTML就没这么严格的规定,加上斜杠只是好看点而已,没什么作用

    属性

    开始标签可能包含一些信息,这些信息叫做元素的属性,包括两部分:

    • 元素名.
    • 元素值.

    一些元素可以只有元素名没有元素值。它们的元素名类似“是非”,“有或没有”,所以可以省略元素值,所以下面三种写法都是一样的意思:

    <input required="required">
    
    <input required="">
    
    <input required>
    

    元素值如果有包含空格就要用引号,单双引号都可以。如果元素值是单个词就可以不用引号,但为了避免出错和易于识别一般会加上引号:

    <p class=foo bar> (Beware, this probably does not mean what you think it means.)

    上面的例子就是没加引号,浏览器错误地解析成下面的:

    <p class="foo" bar="">

    命名字符参考

    命名字符参考 (一般被称作实体) 用于表示在HTML中具有特定含义的字符. 举例说,HTML将“>”和“<”符号理解为标签分隔符。所以,当你想在文本中用">"符号表达“大于”的含义时,你可以使用命名字符参考来作为替代。 以下例举了四个非常重要的常用实体:

    • &gt; 表示大于符号">" (>)
    • &lt; 表示小于符号"<" (<)
    • &amp; 表示和符号"and"(&)
    • &quot; 表示引用符号" (")

    除这四个外,还有许多其他的实体符号, 但以上所举的例子是实体符号中最为重要的几个,原因在于他们所表示的原本字符在HTML中具有特定的含义。(即是说,如果你没有在HTML文本中使用实体符号来替代原本符号的话,浏览器可能会错误地理解你的意图。)

    文档类型和注释

    除标签,文本内容和实体外,一个HTML文档一定需要在第一行做出文档类型断言(doctype declaration)。在现代HTML中,这句断言书写如下:

    <!DOCTYPE html>

    文档类型断言的演变有着复杂深长的历史,但今天的我们只需知道上方的文档类型断言告诉了浏览器需要遵循W3C标准来解析HTML和CSS代码,且不必尝试去模拟90年代的IE环境。(参见quirks mode

    HTML拥有一个允许我们在HTML文档添加评论的机制。评论并不会在浏览器渲染页面时一并呈现给用户,而是隐藏在源代码内。这个机制使我们能十分方便地为HTML文档的某个部分添加解释信息、给你的同事预留便笺、或者给你自己做个提示。HTML评论被如下符号封闭:

    <!-- This is comment text -->

    一个完整且精简的文档

    如下是一个迷你的HTML示例文档。你可以把这些代码复制到文本编辑器中,另存为myfirstdoc.html,然后用浏览器打开它。另外请注意,你需要确保使用了utf-8的编码格式保存了这份HTML示例文档。虽然我们没有为这份文档添加任何样式信息(从而让视觉效果显得十分朴素),但这总归算一个不错的开始,不是吗?祝你前路好运!

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>A tiny document</title>
    </head>
    <body>
      <h1>Main heading in my document</h1>
      <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
      <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
    </body>
    </html>
    

    文档标签和贡献者

    最后编辑者: Light1980,