HTML5学习（一）—1

第一章 初识HTML

HTML如今已广泛应用于互联网，它是一种标记（markup）语言 。这种标记是以元素（elements）的形式被运用到网页内容当中（content）。

一、元素的运用

我喜欢<code>牛排</code>意大利面

-----例子1.1

例子1.1中的元素用黑色字体表示，它包括2部分：开始标签<code>、结束标签</code>。夹在元素标签中间的是内容“牛排”。
浏览器通过元素获取你的内容信息，并把元素的效果运用到内容上。每个HTML元素都有其不同的含义。例子1.1中的<code>元素表示一段计算机代码。
元素的名字不区分大小写。通常情况下，我们只采用一种形式，或大写，或小写。HTML通过定义不同种类的元素，来履行HTML文档的不同角色。浏览器不会把元素标签给显示出来，它只是翻译HTML，并按照元素的定义把内容展现给用户。
一些HTML元素会影响到内容的展现形式，即浏览器遇到这些元素的时候，会改变内容的展现形式。例子1.1中的<code>会改变“牛排”的表现形式。
展现形式与内容的分离。这里不建议用HTML元素来处理内容的展现形式，而是利用层叠式样式表（CSS）来处理。可以利用HTML元素来定义内容的结构和含义。早期并不强调内容与展现形式相分离的时候，元素会影响到展现形式，而浏览器也会为这些元素赋予一个默认的展现形式，例如：例子1.1中的<code>。而现在，通常用CSS来覆盖这些默认的展现形式。

使用空（Empty）元素。开始和结束标签之间并不要求必须放置内容，如果无内容，则表示空标签。例如：

我喜欢 <code></code>牛排和意大利面。

-----例子1.2
当元素为空标签时，他们有时候没有任何意义，但他们仍是有效的HTML。

自关闭（Self-Closing）标签。可以使用单个标签来更简明的表达空元素。例如：

我喜欢 <code/> 牛排和意大利面。

-----例子1.3
把开始和结束标签合并成一个——斜杠（/）被放置在单个标签的尾部,通常用来表示结束标签的开始。例子1.2和例子1.3是一样的，而单个标签用来表现空元素会更加简洁。

使用无类型（Void）元素。有些元素必须用单个标签来表达，如果这些标签中间放置内容，则HTML会认为不合法。例如hr，它是一个分组元素，用横线来分段内容。使用无类型元素有2中方式：一种是只用开始标签，例如：

我喜欢牛排和意大利面.<hr>我喜欢薯条和汉堡.

-----例子1.4
浏览器会识别ht为一个无类型元素。另一种是让标签包含一个斜杠，使元素与空元素一致。例如：

我喜欢牛排和意大利面.<hr />我喜欢薯条和汉堡.

-----例子1.5

（不）使用可选择的（OPTIONAL）开始和结束标签。很多HTML5元素有特别的使用规则，这些规则允许你删除元素成对标签中的一个。例如：html元素，如果html元素后面不是直接跟着一个注释，并且含有一个body元素，这个body元素或者不是空标签，或者保留有开始标签，那么html元素可以删除结束标签。

二、元素属性（Attribute）
你可以利用属性来配置你的元素。例子1.6呈现了应用于一个元素的属性。这个元素会产生一个超级链接。

我喜欢 <a href="/牛排.html">牛排</a> 和意大利面

-----例子1.6
属性只能加到开始标签或单个标签，不可以加到结束标签。属性含有一个名称和一个值，如例子1.6，href是属性名称，"/牛排.html"是属性值。
HTML含有全局属性集，这些属性适用于任何HTML元素。另外，元素可以定义自己的专有属性。href属性就是元素a的专有属性。
属性的值可以用双引号“值”或单引号‘值’表示。如果值本身含有引号，那么可以用（“‘’”）或（‘“”’）形式。

一个元素含有多个属性。一个元素可以包含多种属性，属性之间用一个或多个空格间隔。

我喜欢 <a class="link" href="/牛排.html" id="firstlink">牛排</a> 和意大利面。

-----例子1.7
属性之间不区分顺序，并且全局属性和元素的专有属性可以任意混合搭配。

布尔（Boolean）类型属性。无须为布尔类属性赋值，只需要把属性名称加到元素中就可以了。

输入你的名字: <input disabled>

-----例子1.8
例子1.8中布尔类型属性为：disabled。它表示用户不可以向该HTML表单输入数据。
有点奇怪的是：布尔类型属性用来配置元素时，不用给该属性赋值，而写出该属性就可以了。你也可以用以下两种方式：

输入你的名字: <input disabled="">输入你的名字: <input disabled="disabled">

-----例子1.9
其效果都是一样的。

定制（Custom）属性。属性名称前加data-,就可以定义自己的属性了。

输入你的名字: <input disabled="true" data-creator="adam" data-purpose="collection">

-----例子1.10