1.HTML基础知识-HTML进阶

一、HTML、XHTML和HTML5

1.HTML和XHTML

（1）二者起源

HTML，超文本标记语言，是构成网页的主要语言。我们经常所说的HTML，其实指的是HTML 4.01。

XHTML，扩展的超文本标记语言。它是 XML 风格的HTML 4.01 ，可以称 XHTML 为更严格、更纯净的HTML 4.01。

HTML 语法书写较为松散，但有利于开发者编写，然而对机器处理起来越困难。所以，为了让机器能更好地处理 HTML ，才在 HTML 基础上引入了 XHTML

（2）二者区别

① XHTML标签必须闭合

在XHTML中，所有标签必须闭合。

例如：<p>和</p>、<h1>和</h1>等。

此外，空标签也需要闭合。例如：我们之前学到的换行标签<br>必须要写成</br>。

② XHTML标签以及属性必须小写

在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大写。但标签的属性值可以大写。

③ XHTML标签属性值必须用引号

在XHTML中，标签属性值必须用引号括起来，单引号、双引号均可。

④ XHTML标签用id属性代替name属性

在XHTML中，除了表单元素之外的所有元素，都应该用 id 而不是 name。

2.HTML5

HTML 指的是 HTML4.01，XHTML 是 XML风格的HTML 4.01（是 HTML 的过渡版本），而 HTML5 指的是下一代 HTML，也就是 HTML4.01 的升级版。

HTML5 现在已经远远超越了标签的范畴。HTML5中增加了部分标签，而且还增加了canvans、SVG、WebSocket、本地存储等技术，这些技术都是使用JavaScript操作的，这使得HTML从一门“标记语言”转变为一门“编程语言”。

（1）HTML5的特点

① 文档类型说明

HTML5 遵循着 “化繁为简” 的设计理念。页面的文档类型 <!DOCTYPE> 被极大的删减。

Ⅰ.XHTML的文档类型说明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ⅱ.HTML5的文档类型说明：

<!DOCTYPE html>

② 标签不再区分大小写

<DIV>見贤思齊</div>
<!--上面这种写法，是完全符合HTML5规范的-->

Ⅰ.实际开发

在实际开发中，所有标签以及标签属性都小写是最规范的。

③ 允许属性值不加引号

<div id=wrapper style=color:purple>見贤思齊</div>
<!--上面这种写法，是完全符合HTML5规范的-->

Ⅰ.实际开发

在实际开发中，标签属性值最好都用引号括起来，单引号、双引号均可。

④ 允许部分属性的属性值省略

在HTML5中，部分具有特殊性属性的属性值可以省略。

Ⅰ.HTML5中可以省略属性值的属性

省略形式	等价于
checked	checked="checked"
readonly	readonly="readonly"
defer	defer="defer"
ismap	ismap="ismap"
nohref	nohref="nohref"
noshade	noshade="noshade"
nowrap	nowrap="nowrap"
selected	selected="selected"
disabled	disabled="disabled"
multipe	multipe="multipe"
noresize	noresize="disabled"

Ⅱ.示例

1.
<input type="text" readonly="readonly">
等价于
<input type="text" readonly>

2.
<input type="checkbox" checked="checked">
等价于
<input type="checkbox" checked>

二、div和span

div 和 span 没有任何语义，所以它俩一般都是配合CSS来定义元素样式的。

1.二者区别

（1）div是块元素

div 是块元素，可包含任何块元素和行内元素，不会与其它元素位于同一行；

span 是行内元素，可以与其它行内元素位于同一行。

（2）div用于结构划分

div 常用于页面中较大块的结构划分，然后配合CSS操作；

span 一般用来包含文字等，它没有结构的意义，纯粹是应用样式。

当前它行内元素都不适合的时候，可以用 span 配合 CSS 操作 。

（3）示例

① 例1

将一个段落中的 ”見贤思齊人生若只如初见“ 前面 4 个字，进行加粗或改变颜色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
    </head>
    <body>
        <p><span style="color: #00FFFF;font-weight: bold;">見贤思齊</span>人生若只如初见</p>
    </body>
</html>

div和span二者区别示例.png

三、id和class

1.id属性

id属性具有唯一性，一个页面中相同的id只允许出现一次。

W3C建议，对于页面关键的结构或大结构，才使用id；对于小结构，建议使用class属性。

（1）关键结构

上面所说的关键结构，指的是诸如：LOGO、导航、主题内容、底部信息栏等。

（2）搜索引擎

搜索引擎识别一个页面的结构，是根据标签的语义及id属性来识别的。

因此，id属性勿要轻易使用，此外，id命名同样十分关键，特别是对搜索引擎优化。

2.class属性

class，类。它所采用的思想跟编程语言中的类相似。

我们可以为同一个页面中的相同元素或不同元素设置相同的 class，然后通过CSS使得相同class的元素具有相同的样式。若是要为两个或多个元素定义相同的样式，使用class无疑是最好的，因为这样可以大大地减少重复的代码。

（1）一个元素多个class

对于一个元素而言，可以给它定义多个class。

一般来说，定义多个class的目的是：用一个class构建公有样式，用另一个class定义单独样式。

（2）总结

对于页面关键结构，建议使用id；对于小地方，建议使用class。

即使我们不需要对关键结构进行CSS或JavaScript操作，也建议加上id以便搜索引擎识别页面结构。

四、浏览器标题栏小图标

当我们浏览网页的时候，细心的你可能会发现浏览器标题前通常都会带有一个小图标，如下图所示：

浏览器标题栏小图标举例.png

1.语法

若想在浏览器标题栏添加小图标，其实只需要在head标签添加一个link标签即可。

<link rel="shortcut icon" type="image/x-icon" href="xxx.ico">

（1）说明

rel、type这两个属性的取值是固定形式。

href属性取值为小图标的地址。这个地址是根据小图标在站点文件夹路径而定。

小图标的格式是.icon。

（2）示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>浏览器小图标</title>
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
    </body>
</html>

浏览器标题栏小图标示例.png