获取代码: learnhtml.txt

HTML 代表超文本标记语言。

它是一种允许我们为万维网编写页面的语言。它是一种标记语言,它使我们能够使用代码编写网页来指示应如何显示文本和数据。事实上,HTML 文件是简单的文本文件。

这个标记是什么?它是一种通过用开始标签和结束标签包围页面数据来组织页面数据的方法。此标记用于赋予它所包含的文本以意义。与其他计算机语言一样,HTML 有许多版本。这里我们将讨论 HTML5。

注意: 你可以在类似 codepen 的网站上的教程中,尝试不同的标签和元素带来的效果,理解它们如何起效,并且逐渐熟悉这门语言。本文主要关注 HTML 语法和一些有用的技巧。

<!-- 注释要像本行一样被包围起来! -->

<!-- #################### 标签 #################### -->
   
<!-- 下面是一个我们将要分析的HTML文件的例子。 -->

<!doctype html>
    <html>
        <head>
            <title>我的网站</title>
        </head>
        <body>
            <h1>Hello, world!</h1>
            <a href = "http://codepen.io/anon/pen/xwjLbZ">来看看这里有什么</a>
            <p>这是一个段落。</p>
            <p>这是另外一个段落。</p>
            <ul>
                <li>这是一个非计数列表的一项(项目符合列表)</li>
                <li>这是另一项</li>
                <li>这是列表中的最后一项</li>
            </ul>
        </body>
    </html>

<!-- 一个HTML文件通常开始于向浏览器表明本页面是HTML。 -->
<!doctype html>

<!-- 在这之后,由<html>开始标签作为起始。 -->
<html>

<!-- 在文件的最后会由</html>标签结束。 -->
</html>

<!-- 在最终的标签后面应该没有任何东西。 -->

<!-- 在其中(在开始标签<html>和结束标签</html>中间)我们可以看到: -->

<!-- 由标签<head>定义的头部 (头部必须被</head>标签关闭)。 -->
<!-- 头部包含一些不显示的描述和额外信息;这些是元数据。 -->

<head>
    <title>我的网站</title><!-- <title>标签告诉浏览器在浏览器窗口的标题区和标签栏应该显示什么标题。 -->
</head>

<!-- 在<head>区域之后,我们可以看到<body>标签 -->
<!-- 在这点之前的内容都不会显示在浏览器的窗口中。 -->
<!-- 我们必须在正文区填上需要显示的内容。 -->

<body>
    <h1>Hello, world!</h1> <!-- h1标签创建了一个标题 -->
    <!-- <h1>标签可以有一些副标题,从最重要的(h2)到最细微的(h6)。 -->
    <a href = "http://codepen.io/anon/pen/xwjLbZ">来看看这里有什么</a> <!-- 一个指向href=""属性中URL的超链接 -->
    <p>这是一个段落。</p> <!-- <p>标签让我们在html页面中显示文字 -->
    <p>这是另外一个段落。</p>
    <ul> <!-- <ul>标签创建了一个项目符合列表。 -->
    <!-- 如果需要一个编号列表,我们可以使用<ol>标签。这样会在在第一项前显示1.,第二项前显示2.,以此类推。 -->
        <li>这是一个非计数列表的一项(项目符合列表)</li>
        <li>这是另一项</li>
        <li>这是列表中的最后一项</li>
    </ul>
</body>

<!-- 好了,创建一个HTML文件就是这么简单。 -->

<!-- 当然我们还可以加入很多额外的HTML标签类型。 -->

<!-- 插入图片。 -->
<img src="http://i.imgur.com/XWG0O.gif"/> <!-- 图片源是由src=""属性指明的 -->
<!-- 图片源可以是一个URL或者你电脑上一个文件的路径。 -->

<!-- 创建表格也没问题。 -->

<table> <!-- 我们开始一个<table>元素 -->
    <tr> <!-- <tr>让我们创建一行 -->
        <th>第一个表头</th> <!-- <th>让我们给表格列一个标题 -->
        <th>第二个表头</th>
    </tr>
    <tr>
        <td>第一行第一列</td> <!-- <td>让我们创建一个单元格 -->
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

使用

HTML 文件使用 .html 后缀。

扩展阅读

有建议吗?也许是更正?在 Github Repo 上开一个 Issue ,或者自己提出一个 pull request


原文由 Christophe THOMAS 编写,并由 5 位好心人 修改。
Translated by:Robert Steed Dimitri Kokkonis
© 2022 Christophe THOMAS
本作品采用 CC BY-SA 3.0 协议进行许可。


小X学技术
6 声望5 粉丝