HTML5

Qwe7

发布于 2022-05-18 08:47:49

1.7K0

发布于 2022-05-18 08:47:49

文章被收录于专栏：网络收集

（二）HTML5

HTML指的是HTML 4.01, XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。

不过HTML 5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。HTML 5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。

对于HTML 5中的新技术，在此不做详细介绍。单纯从新增的标签上来看，HTML 5有以下几个特点。

1、文档类型说明

基于HTML 5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地简化了。

XHTML文档声明如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn>

HTML5文档声明如下：

<!DOCTYPE html>

2、标签不再区分大小写

<div>绿叶学习网</DIV>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。

3、允许属性值不加引号

<div id=wrapper style=co1or: red> 绿叶学习网 </div>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。

4、允许部分属性的属性值省略

在HTML5中，部分具有特殊性属性的属性值是可以省略的。例如，下面代码是完全符合HTML 5规范的：

<input type=ntext" readonly/>
<input type="checkbox" checked/>

上面两句代码等价于：

<input type="textM readonly="readonly"/>
<input type="checkbox" checked="checked"/>

在HTML 5中，可以省略属性值的属性如表所示。

表1 -1 HTML5中可以省略属性值的属性

省略形式

等价于

checked

checked=nchecked"

readonly

readonly="readonly"

defe

defer="defer"

ismap

ismap="ismap"

nohref

nohref="nohref"

noshade

noshade="noshade"

nowrap

nowrap="nowrap"

selected

selected="selected"

disabled

ciisabled="disableci"

multiple

multiple="multiple"

noresize

noresize="disabled"

一句话概括 HTML、XHTML 和 HTML 5 就是：HTML 指的是 HTML 4.01, XHTML 是HTML的过渡版，HTML5是HTML的升级版。

2、div和span

对于div和span这两个元素，不少新手也不知道它们之间有什么区别，使用起来也很随便。因此，这里有必要简单介绍一下。

div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素样式的。

div和span区别如下：

(1 ) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。

(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。

其实，除了 div和span外，还有一个label标签。div和span是无语义标签，但label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>

在这个例子中，我们想要对“视觉化思考”这几个文字加粗或者改变颜色，此时可以使用span包含文字，然后再进行样式修改。事实上，span标签往往都是用来配合CSS来修饰元素的。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html