HTML学习笔记（一）--认识HTML

2019-06-13 本文已影响0人茶叶淡

制作网页的第一步，就是编写 HTML 文件。

HTML（HyperText Markup Language，超文本标记语言）并不是真正的编程语言，它是一种标记语言，用于定义一个网页的结构。它详细地说明了网页的各部分内容应该被理解为段落、列表、链接、图像或者是其他形式的内容。

HTML的标准规范由W3C组织制定，我们可以先来认识一下W3C。

一、W3C和MDN

W3C

W3C（World Wide Web Consortium，万维网联盟）是万维网之父 Sir Timothy John Berners-Lee 于1994年建立的组织。

为解决网络应用中不同平台、技术和开发者带来的不兼容问题，保障网络信息的顺利和完整流通，W3C制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。除了HTML，W3C还制定了包括XML和CSS等的众多影响深远的标准规范。

在W3C的网站上可以查看HTML的规范文档。

MDN

MDN（Mozilla Developer Network），Mozilla开发者社区，是一个完整的学习平台，汇集了众多Mozilla基金会产品和网络技术开发文档。W3C网站上提供的官方规范文档冗长复杂，而且只有英文的版本。MDN则提供了一种简洁的文档形式，并且保证了内容的严谨性和准确性。基于这些特点，可以把MDN作为官方文档一个替代品，更加快捷地查询相关资料。

二、HTML

如前文所述，HTML是一种标记语言，它由一系列元素（element）组成，这些元素可以用来封装、包装或标记不同内容，使其以某种方式显示，或以某种方式执行。

元素的组成

如下图示例：

它分为以下几部分：

开始标签（opening tag）：包含元素名（本例为p），由尖括号包围，是一个元素的起始点。在本例中表示段落由此开始。
闭合标签（closing tag）：与开始标签相似，只是在元素名之前加一个斜杠，是元素的结尾。在本例中表示段落到此结束。
内容（content）：元素的内容。本例中就是所输入的文本。
元素（element）：开始标签、结束标签和内容共同构成一个完整的元素。

属性

元素还可以具有属性（attribute），例如：

<p class="class-name">xxxxxxxxx</p>

属性包含了关于元素的一些额外的信息，这些信息不会出现在实际的内容中。在这个例子里，class是一个属性名称，class-name是属性的值（value）。class属性为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

属性的写法：

在元素和其他属性之间以空格隔开
属性后面紧跟着一个“=”符号
属性的值，由一对引号“ ”包围

<p attribute1="value" attribute2="value2">xxxxxxxxx<p>

此外，某些属性可以没有值，这类属性叫做布尔属性，如disabled、selected等，例：

<input type="text" disabled>

这表示一个不可用的输入框

空元素

空元素只有一个标签，没有内容和结束标签，通常用来在此元素所在位置插入一些东西。
例如<img>元素：

<img src="xxxxx/xxxxx.png" alt="test image">

它包含了两个属性，src和alt，但是并没有 </img> 闭合标签，也没有内容，它的作用是向其所在的位置嵌入一个图像。

块级元素和内联元素

在HTML中有两种重要的元素类别，块级元素和内联元素。

块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行，它通常出现在一堆文字之间，例如超链接元素<a>或者强调元素<em>和 <strong>。

【注】：实际上，一个元素是块级元素还是内联元素是由CSS来控制的，而浏览器会给HTML的元素提供默认的样式，一个HTML元素之所以是块级元素，是因为浏览器给它提供的默认样式是块级的。

可替换元素

可替换元素（replaced element）是一种外观渲染独立于CSS的元素，它是一种外部对象，其外观样式来自于目标内容本身。例如<img>元素，它在页面中会被替换为目标图像，具备自己的宽高等属性。
典型的可替换元素还有<object>、 <video>和表单元素<textarea>、<input>等。

注释

HTML的注释写法为：

<!-- 这里是注释 -->

（完）