Html5 新增标签与属性

目录

1 .Html5 简介

2 .语义化标签

3 .多媒体标签

4 .其他标签

5 .新增的input类型

6 .新增的input属性

7 .meta标签(元信息标签)

---

内容 :

一 Html5简介

HTML5是HTML最新的修订版版,设计目的是为了在移动设备上支持多媒体.
简单易学
HTML5仍在完善中,然而大部分现代浏览器已经具备了某些HTML5支持

---

二 语义化标签

article（文章）， aside（侧边）， header（头部）， footer（尾部）， nav（导航）， section（小节，文章的章节）等等。
这些标签主要是为了表示某种“含义”（即所谓语义），但其本身没有什么外观表现，跟div一样,因为所有的都叫div很乱,所有详细划分

---

三 多媒体标签

audio：音频标签

<audio  src=”音频文件路径”  [autoplay]  [controls]  [loop]  ></audio>

属性解释：

• autoplay：无值属性，表示自动播放；
• controls：无值属性，表示显示控制面板；
• loop： 无值属性，表示循环播放

---

video：视频标签

<video  src=”音频文件路径”  [autoplay]  [controls]  [loop]  width=”xx”  height=”xx”></video>

属性同上

---

source:资源标签
是音频和视频标签的字标签,可以写多个

<video>
<source src=”mocie.mp4”>
<source src=”mocie.ogg”>
</video>

如果第一个因为什么原因没正确打开 ,第二个就会顶上去
如果使用了source标签，则audio或video标签上就不要用src属性，否则无效

---

四 其他标签

dialog， progress， mark， time， address等等。
简单解释如下：

• dialog： 对话框标签，内容表现为“浮起来的对话框”；【Chrome和Safari 6支持，需要open属性】

• progress： 进度条标签（单标签）表现为一个进度条的样子；
  代码表现为：

• mark： 标记标签，文本有“突出显示”效果（通常是显示为黄色背景）；

• time： 时间标签，表示其内容是一个时间；

• address： 地址标签，表示其内容是一个地址；

• canvas： 画布标签，可以在其上面作画（需要后续js知识才能实现）；

• details/summary：两者配合使用，实现文本的“详情/概述的折叠效果”，形式为：

  <details>
  <summary>概述性内容</summary>
  详情内容。。。。
  </details>
  

---

五 新增的input类型

input为表单标签中变化形式最多的一种标签。随着type的变化，而展示出不同的外观或功能。
之前html4中，input的type类型包括：text, password, file, radio, checkbox, submit, reset, button等。
现在html5中，input的type类型继续增加了如下一些（有的可能有的浏览器尚未实现）：

input标签的type属性在html5中的可用值	含义
email	输入邮箱格式
tel	输入手机号码格式
url	输入url格式
number	输入数字格式
search	搜索框（体现语义化）
range	*拖动滑块
time	时间
date	日期
datetime	时间日期
month	年/月
week	年/周

---

六 新增的input属性

Required属性：
必填项

placeholder属性：
设定input文本框的默认提示性文本。

autofocus属性：
设定网页一打开的时候自动获得焦点的表单元素。

multiple属性：
设定一个文件域可以一次选择多个文件（原来只能选择一个文件）。

contenteditable属性：
设定一个元素内部的文本内容是“可编辑的”。

---

七 meta标签(元信息标签)

meta标签用于定义有关网页（文档）的相关信息（不作为网页的内容表现信息）。
meta标签常用的网页（文档）的相关信息如下所示：

• 设定针对搜索引擎的关键词：

  <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
  

• 设定对页面的描述：

  <meta name="description" content="传智播客是一家全国性的IT技能综合培训学校" />
  

• 设定网页的作者或制作组

  <meta name="Author" content="传智播客网页前端技术教研组">
  

• 设定网页每隔多少秒数自动刷新一次：

  <meta http-equiv="refresh" content="5" />
  

• 设定网页在一定时间后自动跳转到另一个页面：

  <Meta http-equiv="Refresh" Content="等待的秒数; url=要跳转到的网页地址"> 
  

---