乐趣区

关于html:Y-分钟速成-html

jiezi

获取代码：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 后缀。

扩大浏览

  • 维基百科
  • HTML tutorial
  • W3School

有倡议吗？兴许是更正？在 Github Repo 上开一个 Issue，或者本人提出一个 pull request！

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

退出移动版