HTML(一) - 技术栈

一、HTML基础

[1.1 使用元素](#1.1 使用元素)

[1.1.1 常用元素](#1.1.1 常用元素)

[1.1.2 空元素](#1.1.2 空元素)

[1.1.3 自闭合标签](#1.1.3 自闭合标签)

[1.1.4 虚元素](#1.1.4 虚元素)

[1.2 使用元素属性](#1.2 使用元素属性)

[1.2.1 一个元素应用多个属性](#1.2.1 一个元素应用多个属性)

[1.2.2 布尔属性](#1.2.2 布尔属性)

[1.2.3 自定义属性](#1.2.3 自定义属性)

[1.3 创建HTML文档](#1.3 创建HTML文档)

[1.3.1 外层结构](#1.3.1 外层结构)

[1.3.2 元数据](#1.3.2 元数据)

[1.3.3 内容](#1.3.3 内容)

[1.3.4 父元素、子元素、后代元素和兄弟元素](#1.3.4 父元素、子元素、后代元素和兄弟元素)

[1.3.5 了解元素类型](#1.3.5 了解元素类型)

[1.4 使用HTML实体](#1.4 使用HTML实体)

[1.5 HTML5全局属性](#1.5 HTML5全局属性)

[1.5.1 accesskey属性](#1.5.1 accesskey属性)

[1.5.2 class属性](#1.5.2 class属性)

[1.5.3 contenteditable属性](#1.5.3 contenteditable属性)

[1.5.4 contextmenu属性](#1.5.4 contextmenu属性)

[1.5.5 dir属性](#1.5.5 dir属性)

[1.5.6 draggable属性](#1.5.6 draggable属性)

[1.5.7 dropzone属性](#1.5.7 dropzone属性)

[1.5.8 hidden属性](#1.5.8 hidden属性)

[1.5.9 id属性](#1.5.9 id属性)

[1.5.10 lang属性](#1.5.10 lang属性)

[3.5.11 spellcheck属性](#3.5.11 spellcheck属性)

[3.5.12 style属性](#3.5.12 style属性)

[1.5.13 tabindex属性](#1.5.13 tabindex属性)

[1.5.14 title属性](#1.5.14 title属性)

一、HTML基础

1.1 使用元素

html 复制代码

我喜欢<code>蓝天</code>和白云

开始标签：<code>
结束标签：</code>
元素内容：蓝天

**注意：**元素名不区分大小写。<CODE>、<code>甚至<CoDe>都会被浏览器视为code元素的开始标签。常见的风格是全部使用小写。

1.1.1 常用元素

|----------|--------------------|
| 元素 | 说明 |
| a | 生成超链接 |
| body | 表示HTML文档内容 |
| button | 生成用以提交表单的按钮 |
| code | 表示计算机代码片段 |
| DOCTYPE | 表示HTML文档的开始 |
| head | 表示HTML文档的头部区域 |
| hr | 表示主题的改变 |
| html | 表示文档的HTML部分 |
| input | 表示用户输入的数据 |
| label | 生成另一元素的说明标签 |
| p | 表示段落 |
| style | 定义CSS样式 |
| table | 表示用表格组织的数据 |
| td | 表示表格单元格 |
| textarea | 生成用于获取用户输入数据的多行文本框 |
| th | 生成表头单元格 |
| title | 表示HTML文档的标题 |
| tr | 表示表格行 |

1.1.2 空元素

**空元素：**元素的开始和结束标签之间没有内容的元素。

html 复制代码

我喜欢<code></code>蓝天和白云

有些元素为空时没有意义(code就是其中之一)，即便如此，它也是有效的HTML代码。

1.1.3 自闭合标签

空元素可以更简洁地只用一个标签表示，如下代码示例：

html 复制代码

我喜欢<code/>蓝天和白云

此例将开始标签和结束标签合二为一。通常用来表示结束标签开始的斜杠符号（/）在此被放到标签的末尾。

1.1.4 虚元素

**虚元素(void element)：**只能使用一个标签表示，在其中放置任何内容都不符合HTML规范

**例如：**hr 用来表示内容中段落级别的终止。

虚元素有两种表示法：

第一种只使用开始标签。例如：<hr>
第二种表示法在第一种加了一个斜杠符号，其形式与空元素一致。例如：<hr />（推荐使用第二种表示方法）

1.2 使用元素属性

1.2.1 一个元素应用多个属性

一个元素可以应用多个属性，这些属性间以一个或几个空格分隔即可。

html 复制代码

我喜欢<a class="link" href="/sky.xhtml" id="firstlink">蓝天</a>和白云

这些属性的顺序未作要求，全局属性和元素专有属性可随意交错。其中class和id是全局属性。

1.2.2 布尔属性

**布尔属性：**布尔属性不需要设定一个值，只需将属性名添加到元素中即可

html 复制代码

请输入您的名字：<input disabled>

此例中的布尔属性是disabled，input元素为用户在HTML表单中输入数据提供了一种手段。添加disabled属性可以阻止用户输入数据。

为布尔属性指定一个空字符串（""） 或属性名称字符串作为其值也有同样的效果

html 复制代码

请输入您的名字：<input disabled="">
请输入您的名字：<input disabled="disabled">

1.2.3 自定义属性

自定义属性 ，也称作者定义属性 ，有时也称扩展属性 。是用户可自定义的属性，这种属性必须以**data-**开头。

html 复制代码

请输入您的名字：<input disabled="true" data-creator="user" data-purpose="collection">

自定义属性名称之前添加前缀data-是为了避免与HTML的未来版本中可能增加的属性名冲突。自定义属性与CSS和JavaScript结合起来很有用。

1.3 创建HTML文档

1.3.1 外层结构

HTML文档的外层结构由DOCTYPE和html确定

html 复制代码

<!DOCTYPE HTML>
<html>
    <!-- 内容区 -->
</html>

DOCTYPE元素让浏览器明白其处理的是HTML文档。这是用布尔属性HTML表达的：<!DOCTYPE HTML>
html元素的开始标签它告诉浏览器，自此直到html结束标签，所有元素内容都应作为HTML处理。

1.3.2 元数据

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部

html 复制代码

<!DOCTYPE HTML>
<html>
    <head>
        <!-- 元数据放这 -->
        <title>标题</title>
    </head>
</html>

上面代码例子的元数据只有title元素一项
除了可包含用于说明HTML文档的元素，head元素还能用来规定文档与外部资源(如CSS样式表)的关系，定义内嵌CSS样式，放置和载入脚本程序。

1.3.3 内容

文档内容放在body元素之中

html 复制代码

<!DOCTYPE HTML>
<html>
    <head>
        <!-- 元数据放这 -->
        <title>标题</title>
    </head>
    <body>
        <!-- 内容-->
        我喜欢<code>蓝天</code>和白云
    </body>
</html>

1.3.4 父元素、子元素、后代元素和兄弟元素

html 复制代码

<!DOCTYPE HTML>
<html>
    <head>
        <!-- 元数据放这 -->
        <title>标题</title>
    </head>
    <body>
        <!-- 内容-->
        我喜欢<code>蓝天</code>和白云
    </body>
</html>

**父元素：**包含另一个元素的元素是被包含元素的父元素。上述代码例子中，body元素是code元素的父元素（一个元素可以拥有多个子元素，但只能有一个父元素）

**子元素：**上述代码例子中，code元素是body元素的子元素

**后代元素：**上述代码例子中，html元素包含着body元素，而后者又包含着code元素。body元素和code元素都是html元素的后代元素。注意：二者中只有body元素才是html元素的子元素。子元素是关系最近的后代元素。

**兄弟元素：**具有同一个父元素的几个元素互为兄弟元素。上述代码例子中，head元素和body元素就是兄弟元素，这是因为它们都是html元素的子元素。

1.3.5 了解元素类型

HTML5规范将元素分为三大类：

元数据元素（metadata element）
流元素（flow element）
短语元素（phrasing element）

**元数据元素：**用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示

**短语元素：**HTML的基本成分

**流元素：**流元素是短语元素的超集。所有短语元素都是流元素，但并非所有流元素都是短语元素。

注：短语元素和流元素的用途是确定一个元素合法的父元素和子元素范围

有些元素无法归入上述三种类型，这些元素要么没有什么特别的含义，要么只能用在一些非常有限的情况下。li元素就是受限元素的一个例子。它表示列表项，只能有三种父元素：ol（表示有序列表）、ul（表示无序列表）和menu（表示菜单）。

1.4 使用HTML实体

HTML文档中有些字符具有特殊含义，如< 和 >。有时需要在文档内容中用到这些字符，但不想让它们被当做HTML处理。为此应该使用HTML实体（entity）。

实体是浏览器用来替代特殊字符的一种代码。

|----------------------------------------------------------------------------|----------|----------|
| 字符 | 实体名称 | 实体编号 |
| < | < | < |
| > | > | > |
| & | & | & |
| € | € | € |
| ￡ | £ | £ |
| § | § | § |
| | © | © |
| | ® | ® |
| | ™ | ™ |

字符"&"的实体编号是& 实体名称是& 例如，对于浏览器来说，&和&是一回事。

1.5 HTML5全局属性

**局部属性(local attribute)：**每种元素都能规定自己的属性

**全局属性(global attribute)：**用来配置所有元素共有的行为。全局属性可以用在任何一个元素身上

1.5.1 accesskey属性

使用accesskey属性可以设定一个或几个用来选择页面上的元素的快捷键

触发accesskey机制的按键组合因平台而异

在Windows系统上是同时按下Alt键和accesskey属性值对应的键。

上述代码，按Alt+n将键盘焦点转移到第一个input元素，在此输入姓名。
上述代码，按Alt+p将焦点转到第二个input元素，在此输入密码。
上述代码，按Alt+s，这等于按下登录按钮以提交表单。

1.5.2 class属性

class属性本身没有任何作用。可以用来将元素归类，这样做通常是为了能够找出文档中的某一类元素或为某一类元素应用CSS样式。

脚本程序也可以利用class属性

1.5.3 contenteditable属性

contenteditable是HTML5中新增加的属性，其用途是让用户能够修改页面上的内容。

contenteditable属性值设置为true时用户可以编辑元素内容
设置为false时则禁止编辑
如果未设定其值，那么元素会从父元素处继承该属性的值。

1.5.4 contextmenu属性

contextmenu属性用来为元素设定快捷菜单。这种菜单会在受到触发的时候（例如，Windows用户用鼠标右击时）弹出来。

注意：只有火狐浏览器等支持

1.5.5 dir属性

dir属性用来规定元素中文字的方向。

效值有两个：

ltr（用于从左到右的文字）
rtl（用于从右到左的文字）

1.5.6 draggable属性

draggable属性是HTML5支持拖放操作的方式之一，用来表示元素是否可被拖放。

html 复制代码

<div draggable="true">可拖动元素</div>

1.5.7 dropzone属性

dropzone属性是HTML5支持拖放操作的方式之一，与上述draggable属性搭配使用。

1.5.8 hidden属性

hidden是个布尔属性，表示隐藏相关元素

html 复制代码

    <div id="txt" hidden="hidden">哈哈哈哈哈哈哈</div>

1.5.9 id属性

id属性用来给元素分配一个唯一的标识符。这种标识符通常用来将样式应用到元素上或在JavaScript程序中用来选择元素。

id属性还可以用来导航到文档中的特定位置(页内跳转)

1.5.10 lang属性

lang属性用于说明元素内容使用的语言

3.5.11 spellcheck属性

spellcheck属性用来表明浏览器是否应该对元素的内容进行拼写检查。这个属性只有用在用户可以编辑的元素上时才有意义。

spellcheck属性值有两个：

true（启用拼写检查）
false（禁用拼写检查）

**注意：**目前大多数流行浏览器中的拼写检查都会忽略前面介绍过的lang属性。它们的拼写检查基于用户所用操作系统中的语言设置或浏览器的语言设置。

3.5.12 style属性

style属性用来直接在元素身上定义CSS样式（这是在style元素或外部样式表中定义样式之外的一种选择）

1.5.13 tabindex属性

HTML页面上的键盘焦点可以通过按Tab键在各元素之间切换。用tabindex属性可以改变默认的转移顺序。

tabindex值为1的元素会第一个被选中。用户按一下Tab键后，tabindex值为2的那个元素会被选中，依次类推。tabindex设置为-1的元素不会在用户按下Tab键后被选中。

上面示例中的tabindex设置的效果是：在按Tab键的过程中，键盘焦点从第一个input元素转到第三个，然后又转到Submit按钮

1.5.14 title属性

title属性提供了元素的额外信息。浏览器通常用这些东西显示工具提示