html 元素

HTML 表示 HyperText Markup Language:

HyperText（超文本） 表示使用HTTP协议。
Markup（标记） 表示代码使用关键字注解。
Language（语言） 表示遵循约定的语法，开发人员能编写，而计算机也能解释。

HTML元素

标记语言的基本规则是使用符号来规定内容边界，即内容从哪里开始到哪里结束。

回顾一下这个HTML代码：

<p>Hello World</p>

Hello World

在角括号（angle brackets）<和>之间的是 HTML 标签（tags）。

每个标签都有其特定的含义，这里p代表 段落（paragraph）.

标签通常是成对出现：

开始标签<p>定义段落的起始
关闭标签</p>定义段落的结束

关闭标签比开始标签多一个 斜杠（slash）/。

开始标签和关闭标签之间的部分构成了一个 HTML 元素（element）。

在浏览器中打开时，结果如上面Result中所示，我们注意到HTML标签并不会被显示，它们只是用来告诉浏览器该如何解释那段内容。

创建第一个HTML文件

打开你的文本编辑器（如Sublime Text 3），新建文件，拷贝/粘贴如下内容，并保存为1.html文件：

<p>This is my first webpage!</p>

用你的浏览器打开这个文件，你会看到：

This is my first webpage!

属性（Attributes）

属性是为元素绑定的额外信息。属性被添加在HTML的开始标签中，因此它们也不会被浏览器所显示。

例如，href属性用来定义一个链接（link）元素（使用 a 标签）的目标地址：

<a href="https://www.lanmper.cn">学编程</a>

学编程

有16个通用属性，可用于任意的HTML元素。所有这些属性都是可选的（optional）。

有些元素拥有 强制性 （required）属性。比如，添加图片时，需要指明图片的来源，使用src(source) 属性：

<img src="//wow.techbrood.com/assets/basket.png" alt="图片说明">

上面的alt属性是为了用于图片地址不可用时显示的说明性文字。

注释（Comments）

和其他语言一样，写好注释是一个良好的编程习惯，用于提高代码可读性，便于维护。注释会被浏览器忽略。

注释开始于。

<!-- 第一段HTML代码注释 -->
<p>Hello World!</p>

Hello World!

自关闭（Self-enclosing）元素

有些元素如图片（img）、换行符（br）、输入框（input）只有开始标签，被称之为自关闭的元素：

<br> <!-- line-break -->
<img src="https://www.lanmper.cn" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->

由于没有关闭标签，自关闭元素不能包含其他元素。

块级元素和内联元素

HTML（超文本标记语言）中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。块级元素只能出现在 <body> 元素内。

块级元素与行内元素有几个关键区别：

格式
默认情况下，块级元素会新起一行。
内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构。

HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别代替。

“块级”类别大致相当于 HTML5 中的流内容类别，而“行内”类别相当于 HTML5 中的措辞内容类别

除了这两个还有其他类别。

以下是 HTML 中所有的块级元素列表（虽然”块级“在新的 HTML5 元素中没有明确定义）
`<address>`	联系方式信息
`<article>`HTML5	文章内容
`<aside>`HTML5	伴随内容
`<audio>`HTML5	音频播放
`<blockquote>`	块引用
`<canvas>`HTML5	绘制图形
`<dd>`	定义列表中定义条目描述
`<div>`	文档分区
`<dl>`	定义列表
`<fieldset>`	表单元素分组
`<figcaption>`HTML5	图文信息组标题
`<figure>`HTML5	图文信息组在 figure 块里是第一个或最后一个同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题
`<figcaption>`)
`<footer>`HTML5	区段尾或页尾
`<form>`	表单
`<h3>`,`<h4>`,`<h5>`,`<h6>`	标题级别 1-6.
`<header>`HTML5	区段头或页头
`<hgroup>`HTML5	标题组
`<hr>`	水平分割线
`<noscript>`	不支持脚本或禁用脚本时显示的内容
`<ol>`	有序列表
`<output>`HTML5	表单输出
`<p>`	行
`<pre>`	预格式化文本
`<section>`HTML5	一个页面区段
`<table>`	表格
`<tfoot>`	表脚注
`<ul>`	无序列表
`<video>`HTML5	视频

内联元素，比如：

HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。

行内元素与块级元素对比：

格式
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
内容
一般情况下，行内元素只能包含数据和其他行内元素。

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

链接（或叫锚点）（links / anchors）<a>强调词（emphasised words）<em>着重词（important words）<strong>短引用（short quotes）<q>缩写（abbreviations）<abbr>引用（cite）<cite>斜体（italic）<i>¹
图片（image）<img>输入框（input box）<input>选择框（select box）<select>间隔（span）<span>输入标签（label）<label>

块元素用来结构化文档的主体部分，把文档分解成条理分明的块。所以块元素一般是其他元素的容器，可容纳内联元素和其他块元素，块元素有独立的空间，排斥其他元素与其位于同一行，可设置宽度(width)、高度(height)和内外边距（padding/margin）属性。

内联元素用来构建局部的差异化文本，没有独立的空间，依附于其他块级元素存在，宽高和内外边距属性无效。

<p>你在<a href="https://www.lanmper.cn;>学编程</a>搜索过H5动画吗？</p>

所有块级元素都有开始和关闭标签，可以包含其他块元素和内联元素。

自关闭元素只能是内联元素，因为其语法结构决定了不能包含其他HTML元素；但内联元素不一定是自关闭的。

类别	拥有开始和关闭标签	自关闭
块元素	`<p></p>` `<ul></ul>` `<ol></ol>`	不可能
内联元素	`<a></a>` `<strong></strong>` `<em></em>`	`<input>` `<br>` `<img>`

块和内联元素转换

如有必要，可以转换块和内联元素，通过设置元素的显示样式（display属性值）。
块状元素转化为内联元素：css设置display:inline ;
内联元素转化为块状元素：css设置display:block ;
关于样式表（CSS）的使用，后续章节会详细讲解。

其它类型的HTML元素

除了块元素和内联外，还有一些其他类型的HTML元素，常用的有：

列表项<li>表格<table>，表格行<tr>，表格单元<td>

HTML 元素关系

HTML文档就像一个族谱，元素之间的关系有父亲（parents），兄弟姐妹（siblings），子女（children），祖先（ancestors）和后代（descendants）。

通过这样的层级和嵌套关系把元素彼此关联组织在一起，形成完整的体系。

嵌套（Nesting）

我们使用下面的代码来说明：

<p>
  我们认为学习不只是掌握知识点，更重要的是要沉淀为<strong>理解力</strong>，为此需要：<q>"知其然，知其所以然。"</q>.
</p>

我们认为学习不只是掌握知识点，更重要的是要沉淀为理解力，为此需要："知其然，知其所以然。".

本例中：

<strong>元素赋予“理解力”更多重要性
<q>标记一段引用

<strong>被显示为 粗体（bold） 是 浏览器的默认行为。

本例中：

<p>是<strong>和<q>的父元素
<strong>和<q>是<p>的子元素
<strong>和<q>是兄弟元素

顺序（Order）

元素嵌套关系 由 开始标签 和 关闭标签 的顺序所确定。

子元素被包含在父元素的标签对之间，开始标签要晚于父元素，而关闭标签必须早于父元素。下面的代码是违反规则的。

<!-- 无效代码 -->
<p>
  这段代码无效，因为 "strong" 标签的关闭<strong>顺序不正确。
</p></strong>

<!-- 有效代码 -->
<p>
  这段代码有效，因为 "strong" 标签的关闭<strong>顺序</strong>不正确。</p>

深度（Depth）

嵌套允许有多个层级，下面是一个有更深元素层级的代码示例：

上述例子中：

<article>是所有其他元素的 祖先（ancestor）
<h1>,<p>,<strong>和<q>元素都是<article>的后代（descendants）
<h1>and 2个<p>元素是 兄弟（siblings）
<p>是其包含的<strong>和<q>子元素的父亲
<article>是<strong>和<q>的父亲的父亲

块和内联元素的嵌套

块元素可以包含块或内联元素，但是内联元素只能包含其他内联元素。¹

<!-- 无效代码! -->
<strong>
  <p>你不应该把p元素放在 "strong" 标签中。</p>
</strong>

写文章要条理清楚，写HTML文档也一样，良好的文档结构有助于用户和搜索引擎更好的理解页面内容。