如何把一个网站网页变成手机版

核心提示说到HTML5我就必须知道什么是HTML5 , HTML5是用来干什么的? 它有哪些新特性和新变化呢?HTML5---万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。用于取代HTML4与XHTML的新一代标准版

说到HTML5,我得知道HTML5是什么,HTML5是干什么用的?它有哪些新的特点和变化?

HTML5 -万维网的核心语言,是标准通用标记语言下应用超文本标记语言的第五个主要修订版。它是取代HTML4和XHTML的新标准版本,所以被称为HTML5。

HTML5旨在支持移动设备上的多媒体。增加了新功能:语义功能、本地存储功能、设备兼容性功能、连接功能、网页多媒体功能、3D、图形和特效功能、性能和集成功能以及CSS3功能。

5个HTML5优势

提高可用性和用户友好的体验。

更好的语义标签

它可以为网站带来更多的多媒体元素,是FLASH和Silverlight的一个很好的替代品。

说到网站抓取和索引,对SEO很友好;

尤其是近10年来,移动设备的使用越来越广泛,PC网页的使用逐渐被移动终端取代。越来越多的人使用手机、平板电脑和其他移动设备在线浏览各种网站。HTML5是HTML版本的第五次重大修订,旨在适应移动终端的发展。

1 .H5增加了语义标签

使用语义标签的好处是增强了代码的可读性,方便了网站的seo。

以前我们基本都是用P来布局的。p没有搜索引擎的语义。所以H5增加了很多语义标签,这个语义标准主要是针对搜索引擎的。

要点标签

导航导航标签

文章内容标签

截面块级别标签

侧边栏标签

页脚尾部标签

H5标签布局图

这些新标签可以多次使用,移动终端更喜欢使用这些标签。语义标签让我们的网站更容易被搜索引擎找到,吸引更多的用户。

2.H5增加了多媒体标签

过去,当我们浏览网页时,如果我们想观看网页中的视频,我们会被提示安装flash和其他浏览器插件。h5新加入的多媒体标签可以轻松地在页面中嵌入音频和视频,而不是使用反向flash和其他浏览器插件。那么H5提供什么多媒体标签呢?

音频标签

网页中直接嵌套音频标签

HTML5可以原生支持音频格式文件的回放,无需使用插件。当然,支持的格式是有限的。

目前,元素支持三种音频格式:

MIME_type类型使用方式

source标签允许您指定替代的视频/音频文件,供浏览器根据其对媒体类型或编解码器的支持进行选择。方便不同的浏览器选择不同的格式,因为Google Firefox UC支持不同的格式。

音频标签通用属性:

自动播放:如果出现此属性,音频将在准备好后立即播放。

控件:如果出现该属性,则向用户显示控件,如播放按钮。

循环:如果该属性出现,音频将在结束时再次播放。

视频标签

视频biao'q

支持的视频标签格式:

视频标签支持的格式视频biao'q

通过将源标签添加到多媒体标签,源标签可用于指定多个播放路径。当第一个源标签的路径错误时,它会自动切换到第二个源标签。

视频标签的常见属性

和音频属性一样

循环播放,autoplay自动播放控件显示的图片,poster之前播放。

视频的公共属性、方法和事件

调用这些事件控制视频样式

由于多媒体标签在不同的浏览器中有不同的外观,我们有时需要统一所有的样式,所以需要使用p+多媒体的一些API来实现控制栏工具。

不同浏览器打开默认的样式不一样

如果要统一样式,让所有浏览器打开时看到的都是一样的东西,就必须调用上面的事件方法。

音频标签和视频标签基本相同,只是浏览器支持不同,使用时要做相应的改变。

3.H5添加输入表单和表单属性。

添加表单的输入类型

常见类型如文本密码单选按钮复选框文件提交前重置图像。

新type类型用户只能输入该类型的内容新表单只能输入相应类型内容

新类型包括电子邮件url颜色数字输入框的用法,如日期、数量等。比如当你使用数字类型时,我们的手机会自动弹出数字小键盘,大大方便了用户体验。

为添加新的表单属性。

占位符:占位符-提示信息

自动对焦:自动获取焦点-在常规页面中放置一个。

多个:可以提交多个文件。

属性,该属性可以将输入标签放在窗体外部,并且也由窗体管理。

必需:必需的验证

属性的用法

以上是一些新的H5结构,以及一些新的CSS3,API等。我会每天分享,希望能多关注他们,互相学习。

 
友情链接
鄂ICP备19019357号-22