HTML5与HTML4的区别

最新推荐文章于 2022-02-11 14:03:24 发布

王_子涵

最新推荐文章于 2022-02-11 14:03:24 发布

阅读量354

点赞数

本文链接：https://blog.csdn.net/weixin_41027007/article/details/100134946

版权

一、html5新增属性和废除的属性

1、contentEditable属性：元素是否能编辑

布尔 true：元素可编辑 false：元素不可编辑。如果没默认，就继承父元素的编辑状态。

2、designMode属性：指定整个页面是否可编辑，只能在js中被修改编辑。

document.designMode="on"; on：可以编辑 off：不能编辑

3、hidden属性：所有元素都可以使用，通知浏览器不渲染该元素

布尔 true：元素可见 false：元素不可见。

4、spellcheck属性：针对3种文本输入进行拼写和语法检查。单词写错，会出现下滑红破浪线提示。

input 元素中的文本值（非密码）
<textarea> 元素中的文本
可编辑元素中的文本

5、tabindex属性：规定元素的 tab 键控制次序（当 tab 键用于导航时）。

以下元素支持 tabindex 属性：

<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。

例如 <element tabindex="number"> <a href="" tabindex="1">hello</a>

二、HTML5推出的理由及目标

HTML5的出现，解决的一些问题

web浏览器之间的兼容性很低，使浏览器之间有共同的规范，以及规范标准化
文档结构不够明确，添加新增的8个结构元素
web应用程序的功能受到了限制

支持HTML5的各大浏览器：微软、Google、苹果、Opera、Mozilla

标记方法的改变：

1、内容类型(ContentType)

文件扩展符与内容类型保持不变，扩展符仍然为“.html”或“.htm”，内容类型(ContentType)仍然为“text/html”。

2、DOCTYPE声明

声明不区分大小写，不区分单引号还是双引号。HTML5 声明方法方式如下：

<!DOCTYPE html>

当使用工具时，也可以在 DOCTYPE 声明方式中加入 SYSTEM 识别符，声明方法如下面的代码所示：

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

3、指定字符编码

HTML4 使用 meta 标签的形式指定文件中的字符编码，如下所示：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >

HTML5对于文件的字符编码推荐使用 UTF-8。

HTML5 ，可以使用对 <meta> 标签直接追加 charset 属性的方式来指定字符编码，如下所示：

<meta charset="UTF-8">

HTML5 确保了与之前 HTML 版本的兼容性

1、省略引号

指定属性值，属性值两边既可以用双引号，也可以用单引号.

HTML5 的改进，当属性值不包括空字符串、“<”、“>”、"="、单引号、双引号等字符时，属性值两边的引号可以省略。

<input type="text">
<input type='text'>
<input type=text>

2、标签标记的省略

在 HTML5 中，标签的标记分为3种：

“不允许写结束标记”：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

“可以省略结束标记”： li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

“开始标记和结束标记全部可以省略”： html、head、body、colgroup、tbody。

3、具有布尔值的属性

<!--只写属性不写属性值代表属性为true-->
<input type="checkbox" checked>
<!--不写属性代表属性为false-->
<input type="checkbox">
<!--属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串，代表属性为true-->
<input type="checkbox" checked="">

三、html5新增元素和废除的元素

新增的主体结构元素 8个

slection、article、aside、header、hgroup、footer、nav、figure

新增结构元素：

（1）section元素：section表示页面中的内容块，通常由内容及其章节、页眉、页脚等组成。html4全是用div结构来写内容，很难分清主次。

（2）article元素：规定相对独立、完整的内容，比如一篇论坛帖子，文章，博客，用户评论等,article元素是可以嵌套使用的，可以用来表示插件。

（3）aside元素：表示与其附近的内容相关的，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。

（4）header元素：定义文档的页眉，一般是一个页面的头部信息。

（5）footer元素：定义文档的页脚

（6）nav元素：定义导航部分（导航栏、侧边导航栏等）

（7）hgroup元素：用于对网页或区段（section）的标题进行组合，至少包含两个标签，如果只含有一个（直接子元素）标签，不是很友好的操作，可以用于一个页面的头部，也可以用于一篇文章（artical标签）中的，也可以章节、段落（section标签）中。

（8）figure元素：定义了独立的流的内容，比如图像，照片，图表、代码等。figure元素的内容与主内容相关，但如果被删除，不会对文档流产生影响。

新增的其他元素：

video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu

新增的input元素的类型

email、url、number、range(输入框的数字的范围值)、Date Picker(日历日期时间)

废除的元素：

能使用CSS替代的元素：basefont、big、center、font、s、tt、u等

不能使用frame框架，只支持iframe

只有部分浏览器支持的元素

其他被废除的元素

新增的属性：

表单相关的属性

链接相关的属性

部分元素详解

1、<a>超链接

（1） HTML 文本中创建链接，实现跳转。

<p><a href="/index.html">文本</a> 是页面的链接。</p>

（2）将图片作为链接，点击跳转。

</a>

（3）链接到同一页面的不同位置。

<p><a href="#C4">查看 Chapter 4</a></p>

<h2><a name="C4">Chapter 4fff</a></h2>

（4）新的浏览器窗口打开链接，将target设置为_blank

_blank：浏览器打开新窗口

_self：<a> 标签是默认目标，它使目标文档载入并显示在相同的框架或者窗口中作为源文档，不跳出框架。

_parent：这个目标使得文档载入父窗口。

_top：跳出框架

2、<audio> 标签是 HTML 5 的新标签。标签定义声音，如音乐或音频。<audio> 标签的属性：

autoplay：播放音频

controls：向用户显示控件（播放按钮）

loop：是否重复播放

muted：视频输出应该被静音

preload：音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

url：要播放的音频的 URL。

3、<base> 标签为页面上的所有链接规定默认地址或默认目标。该必须位于 head 元素内部。使用 <base> 标签，浏览器使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

4、<big> 标签来放大文本。嵌套<big> 标签，使字体大一号，直到上限 7 号文本

5、<br>简单的换行符。当浏览器遇到<p>标签时，会在相邻的段落之间插入一些垂直的间距。

注意：<br clear="left"> <br>的clear可以清除<img>的align造成的格式影响

例子 <img src="111.png" />

This text will flow as well, but will be below the image, extending across the full wi

This text这行，会在图片的最底部开始的而不是换行，用<br/>消除这个默认的状态。

扩展align的属性

absbottom 图像的下边缘与同一行中最大元素的下边缘对齐。

absmiddle 图像的中间与同一行中最大元素的中间对齐。

baseline 图像的下边缘与第一行文本的下边缘对齐。

texttop 图像的上边缘与同一行上最高文本的上边缘对齐。

top 图像的上边缘与同一行上最高元素的上边缘对齐。

6、<button> 标签定义一个按钮。

autofocus属性：当页面加载完成时焦点自动落到button上（谷歌的首页，页面一旦加载，光标必然定位在输入框里）

设置formenctype，用于文件上传，multipart/form-data不对字符编码，application/x-www-form-urlencoded在发送前对所有字符进行编码（默认）。

6、canvas画布看文档里面的例子

7、<nav> 标签定义导航链接的部分，是 HTML 5 中的新标签。

8、标题：

<h1>32px

<h2>24px

<h3>18.72px

<h4>16px

<h5>13.28px

<h6>12px

9、p标签定义段落 <p style="text-align:right">

属性align：left左对齐 right右对齐 center居中对齐 justify伸展内容，每行都可以有相等的长度

10、table定义表格常用属性如下：

width：表格的宽

border：表格边框 border="1"

cellpadding：单元与内容之间的空白

cellspacing：单元格之间的空白

bgcolor：背景色 bgcolor="red" 背景图片 background="/i/eg_bg_07.gif"

align：left左 center中间 right右

11、<textarea> 标签定义多行的文本输入控件。

12、ul无序列表 list-style-type

li list-style: none;

属性 type：disc（默认值实心圆） circle（空心圆） square（实心方块）

13、<video> 标签定义视频，<video> 标签是 HTML 5 的新标签。

<video> 常用属性：

width：视频播放器的宽度

height：视频播放器的高度

src：视频路径

autoplay：播放视频

controls：向用户显示控件（播放按钮）

loop：是否重复播放

muted：视频播放时被设置成静音

poster ：视频播放前或者下载时设置的图像

preload：视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

14、<iframe> 标签规定一个内联框架。在当前 HTML 文档中嵌入另一个文档。

iframe常用属性:

src：内框架的地址，可以使页面地址，也可以是图片的地址。

frameborder:是否显示边框，1(yes),0(no) height:框架作为一个普通元素的高度，建议在使用css设置。

width:框架作为一个普通元素的宽度，建议使用css设置。

name:框架的名称，window.frames[name]时使用。

window.frames[name]返回window对象 scrolling:框架的是否滚动。yes,no,auto。

<frame>与<iframe>的区别

https://blog.csdn.net/lyr1985/article/details/6067026

1Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性。

（1）frame用于全页面 iframe只用于局部，是内嵌的网页元素，也可以说是内嵌的框架

（2）frame与frameSet结合使用，iframe可以；

（3）frame不能放在body中；

（4）在frameSet中的iframe必需放在body中；不在frameSet中的iframe可以随意使用；

（5）frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制

iframe获取iframe里的内容

两个API就是contentWindow,和contentDocument

iframe.contentWindow, 获取iframe的window对象

iframe.contentDocument, 获取iframe的document对象

浏览器打开一个 HTML 文档时创建一个对应的window对象。如果一个文档定义了一个或多个框架(包含一个或多个 frame 或 iframe 标签)，浏览器就会为原始文档创建一个window对象，再为每个框架创建额外的window对象。这些额外的对象是原始窗口的子窗口，可能被原始窗口中发生的事件所影响。例如，关闭原始窗口将导致关闭全部子窗口。

如果想要创建新窗口(以及对应的 window 对象)，可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。

https://www.cnblogs.com/zqzjs/p/4841594.html

嵌套iframe

如图：如果一个窗口是顶级窗口或标签，那么parent==self //只有顶级窗口还会返回true

如果一个窗口包含在窗口的窗口中，那么parent.parent来引用顶级窗口

无论一个窗体被嵌套了几层，使用top直接返回顶级窗口。

一个网页中嵌套了一个iframe，该iframe的id='zqz_2',那表示该元素的对象就是：

var zqz_2=document.getElementById('zqz_2');

var zqz_2=document.getElementById('zqz_2').contentWindow;

每一个Window对象都有一个frames属性，它引用自身包含的窗体的子窗口。对于窗体来说，通过Window对象的属性引用的<iframe>是指窗体中的Window对象，而不是元素对象。

注意：frames[]数组里的元素是Window对象，而不是<iframe>元素。

获取的方法：

(1)frames属性是类数组对象，可以通过索引进行获取(frames[0])。使用parent.frames[1]引用兄弟窗体。

(2)如果指定<iframe>元素的名字，还可以用名字来索引。如:frames["zqz_2"]或frames.zqz_2

(3)可以通过window[0]来获取第一个子窗体的引用。window.length。

王_子涵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5与HTML4的区别

一、html5新增属性和废除的属性1、contentEditable属性：元素是否能编辑布尔 true：元素可编辑 false：元素不可编辑。如果没默认，就继承父元素的编辑状态。2、designMode属性：指定整个页面是否可编辑，只能在js中被修改编辑。document.designMode="on"; on：可以编辑 off：不能编辑3、hidden属性：所有元素都可以使用...
复制链接

扫一扫