sourcehtml5,html source标签

html5的设计目的

HTML5的设计目的是为了在移动设备上支持多媒体。

成都创新互联是一家集网站建设,昌邑企业网站建设,昌邑品牌网站建设,网站定制,昌邑网站建设报价,网络营销,网络优化,昌邑网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

HTML5中的新标签，语义化更明确。

!doctype 声明必须位于 HTML5 文档中的第一行,使用非常简单。

兼容问题：现代的浏览器都支持html5

html新元素

canvas ：绘图标签 ，通过js在canvas 上进行绘图 ，cocos-2d引擎 做网页游戏 基于js的绘图API来制作

新多媒体元素

video 定义视频

src 视频的路径 autoplay 自动播放 controls 控制器 loop 通过js提供的api来制作视频控制

audio 定义音频内容

src 视频的路径 autoplay 自动播放 controls 控制器 loop 通过js提供的api来制作视频控制

source 定义多媒体资源，是视频音频资源文件

新的表单元素

datalist 提示列表 和input 连用

keygen 秘钥标签 私有秘钥（在本地） 公有秘钥(在服务器)

output 输出计算值 结合js

新的语义和结构元素

article 定义相对页面独立的内容区域

aside 定义侧边栏

bdi 文本突出 类似span

details 描述详细 显示详细类容 标签 兼容性不太好

figure 是包 图片 表单 代码

footer 定义页脚的

header 定义头部

mark 文本的突出显示 默认带黄色

meter 定义进度条的

nav 定义导航

progress 定义进度条

section 定义内容

time 写时间的

html5新增和废除的标签有哪些

新增的结构标签：

1、section元素 ，表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中section…/section;HTML4中div ……/div。

2、article元素 ，表示页面中一块与上下文不相关的独立内容。比如一篇文章。

3、aside元素，表示article元素内容之外的、与article元素内容相关的辅助信息。

4、header元素，表示页面中一个内容区块或真个页面的标题。

5、hgroup元素，表示对真个页面或页面中的一个内容区块的标题进行组合。

6、footer元素，表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

7、nav元素，表示页面中导航链接的部分。

8、figure元素 ，表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

延展回答：

废除的元素：

1、能用css代替的元素 ，basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的，HTML5中提倡把画面展示性功能放在css中统一编辑。

2、不再使用frame框架。frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。

3、只有部分浏览器支持的元素，applet、bgsound、blink、marquee等标签。

4、其他被废除的元素。

废除rb，树勇ruby替代。

废除acronym使用abbr替代。

废除dir使用ul替代。

废除isindex使用form与input相结合的方式替代。

Html5新增的标签有哪些

新增的结构标签：

1、header元素

表示页面中一个内容区块或真个页面的标题。

2、hgroup元素

表示对真个页面或页面中的一个内容区块的标题进行组合。

3、article元素 

表示页面中一块与上下文不相关的独立内容。比如一篇文章。

4、aside元素

表示article元素内容之外的、与article元素内容相关的辅助信息。

5、footer元素

表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

HTML5新规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash），更优秀的错误处理，更多取代脚本的标记，HTML5 应该独立于设备开发进程应对公众透明 ;

HTML5 新特性：

新的特殊内容元素，比如 article、footer等，新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素 

对本地离线存储的更好的支持。

简述几种html5的常用标签和新增属性的含义

HTML5 新增常用元素

HTML5的声明为：!DOCTYPE html

它不用再像之前的版本一样在声明中引用DTD。DTD(document type definition)定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。在HTML中，DTD规定了标记语言的规则，使浏览器能正确地呈现内容。而HTML5不基于SGML，所以不需要引用DTD。

文档结构元素

article: 定义可以独立于内容其余部分的完整独立内容块。

header: 页面顶部。

nav: 导航栏(边导航,页面导,底部导)标签。

hgroup: 定义多个标题时。

section: 内容分块.可设置cite属性。

aside: 侧边栏，定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

figure: 代表一个和文档有关的图例。

figcaption: 代表一个图例的说明（标题）。

footer: 页面底部。

dialog:定义对话框。

嵌入元素

video 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。属性有：

src

autoplay（控制自动播放）

loop（播放完后是否重新播放）

controls（显示用户界面）

width

height

audio 代表一段声音 ，或音频流。 标签内的文字会在标签不被支持时呈现。属性有：

src

autoplay

loop（播放次数，为-1时循环播放）

controls

volume(音量)

source 为 video 或 audio 这类媒体元素指定媒体源。属性有src\type（指定资源的MIME类型）。

track为 video 或 audio 这类媒体元素指定文本轨道（字幕） 。属性有：

kind（数据类型）

src

srclang（track文本数据的语言）

label 当列出可用的text tracks时，给浏览器使用的text track的标题，这种标题是用户可读的。

注意：一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。

canvas 代表位图区域，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。

embed 代表一个嵌入的外部资源，如应用程序或交互内容。属性有：

width

height

src

type 用于选择插件实例化的 MIME 类型。

表单元素

meter代表滑动条。显示实时状态。属性有:

value 当前数值，如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。

min 值域的最小边界值，默认为0

max 值域的最大边界值，默认为1

low 定义了低值区间的上限值，当数值处于low-min或high-max时就会呈现不同的样式。

high 定义了高值区间的下限值。

optimum 最优值

output代表计算值 。

for 其它影响计算结果的标签的ID，可以多个。

form 与当前标签有关联的form（从属的表单）。该属性的值必须是当前文档内的表单元素的ID。如果未指明该属性，output标签必须是一个form的后代标签。该属性的用处在于可以让output标签脱离form标签，存在于一个网页文档的任意位置。

name

form oninput="result.value=parseInt(a.value)+parseInt(b.value)"

input type="range" name="b" value="50" / +

input type="number" name="a" value="10" / =

output name="result"/output

/form

1

2

3

4

5

progress代表进度条，表示任务过程，属性有max（任务总量）\value。

datalist为Input标记定义一个下拉列表，配合option标签。

其他

details创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。

summary 是details 元素的子元素，表示其综述或标题 。

mark代表一段需要被高亮的引用文字。

ruby表示需要被ruby 注释 标记的文本，如中文汉字和它的拼音。

rt 表示ruby 注释 ，如中文拼音。

rp 在ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。

ruby夼rp(/rprtkuang/rtrp)/rp/ruby

1

顺便一提，html5删除了的元素：

纯表现的：basefont\big\center\font\s\strike\tt\u

对可用性有负面影响的：frame\frameset\noframes

产生混淆的：acronym\applet\isindex\dir

同时HTML5也对某些元素进行了重定义，改变了它们的语言内容但表现不变。如b标签、i标签，仍然表示为粗体、斜体，但代表了一段需要被关注的文字、一段不同性质的文字，如技术术语、外文短语等。

HTML5属性变化

新增类型

email \ url \ tel \ number

Datepickers:date \ month \ week（iphone不兼容） \ time \ datetime(UTC格式，安卓、i6+、PC端不兼容) \ datetime-local

针对PC端：range(水平杆，两边为min和max) \ search（有内容时右边出现×）\ color（颜色选择框）

表单属性

autocomplete属性：自动完成功能，适用于标签，以及以下类型的input标签：text \ search \ url \ tel \ email \ password \ datepickers \ range \ color

form autocomplete="on" //on为打开，Off为关闭

/form

1

2

autofocus属性：域自动地获得焦点，适用于所有的标签的类型

input autofocus="autofocus"/

1

multiple属性：规定输入域中可选择多个值，适用于email \ file类型的标签

input type="file" multiple="multiple" /

1

placeholder属性：提供一种提示，描述输入域所期待的值，适用于text \ search \ url \ tel \ email \ password 类型的标签

input type="text" placeholder="please input your name!"/

1

required属性：规定必须在提交之前填写输入域，且必须按照相应域的格式，如，email域必须要有@、邮件域。适用于text \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file 类型的标签

input type="email" requried="required" /

1

链接属性

sizes

link rel="icon" href="icon.gif" type="image/gif" sizes="16*16"

//网页头部标题的logo，可根据不同分辨率引用不同的sizes

//type为该图标的类型，说明该图标格式为gif

1

2

3

target

base href="......" target="_blank"

1

base标签写在head标签内。target属性控制整个页面所有超链接的默认打开方式（本来是_self），href指定页面中所有相对链接的基准 URL；

超链接的属性

media=“handheld”（表示对设备进行优化，handheld对“手持”设备进行支持，tv对”电视“设备进行支持）；

hreflang=“zh”（设置语言，zh表示是简体中文）

rel=“external”（设置超链接的引用，external表示其为外部链接）

其他属性

script的属性

defer：加载完脚本后并不执行（延迟执行），而是等整个页面加载完之后再执行，只有ie兼容

async：对脚本进行异步加载，加载完脚本后立刻执行，而不用等整个页面都加载完才能执行。

如果 async=“async”：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

如果不使用 async 且 defer=“defer”：脚本将在页面完成解析时执行

如果既不使用 async 也不使用defer：在浏览器继续解析页面之前，立即读取并执行脚本

ol的属性

start：设置序号的起始值

reversed：倒叙排列 reversed=“reversed”

html的属性：manifest

!DOCTYPE HTML

html manifest="demo.appcache"

...

/html

1

2

3

4

通过在页面中设置manifest属性或在manifest文件中加入页面，可以将此页面缓存，这样我们就可以离线访问，且获得更快的速度，因为已缓存资源加载得更快。还可以减少服务器负载。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，需要更新 manifest 文件。

style的属性scoped：内嵌CSS,可以写在任何位置，而不止是head。不过这样会违反我们低耦合的原则。

style scoped

...

style

HTML5中的source标签下导入了MP4又导入音频格式是为什么

source标签是为了兼容各个浏览器，写多个让浏览器可以选择他所支持的音视频。

html5如何实现自动播放视频

我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。

现在，我们打开浏览器，看一看具体的效果：

为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。