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="">

    命名字符参考

    Named character references (often casually called entities) are used to print characters that have a special meaning in HTML. For example, HTML interprets the less-than and greater-than symbols as tag delimiters. When you want to display a greater-than symbol in the text, you can use a named character reference. There are four common named character references one must know:

    • &gt; denotes the greater than sign (>)
    • &lt; denotes the less than sign (<)
    • &amp; denotes the ampersand (&)
    • &quot; denotes double quote (")

    There are many more entities, but these four are the most important because they represent characters that have a special meaning in HTML.

    文档类型和注释

    In addition to tags, text content and entities, an HTML document must contain a doctype declaration as the first line. In modern HTML this is written like this:

    <!DOCTYPE html>

    The doctype has a long and intricate history, but for now all you need to know is that this doctype tells the browser to interpret the HTML and CSS code according to W3C standards and not try to pretend that it is Internet Explorer from the 90's. (See quirks mode.)

    HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a browser. This is useful for explaining a section of markup, or leaving notes for other people who might work on the page, or for leaving reminders for yourself. HTML comments are enclosed in symbols as follows:

    <!-- This is comment text -->

    一个完整且精简的文档

    Putting this together here is a tiny example of an HTML-document. You can copy this code to a text editor, save it as myfirstdoc.html and load it in a browser. Make sure you are saving it using the character encoding UTF-8. Since this document uses no styling it will look very plain, but it is only a small start.

    <!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>
    

    文档标签和贡献者

    最后编辑者: housejar,