html5显示的简单介绍

html5怎么实现在不同设备上都正常显示？

html5使用媒体查询技术能实现不同设备上的响应式布局。

@media screen and (min-width:600px) {

  .nav {

    float: left;

    width: 25%;

  }

}@media screen and (max-width:599px) {

  .nav {

    float: right;

    width: 50%;

  }

}

如上图代码通过@media screen语法，在设备不同宽度的情况下可以给同一个类赋予不同的样式，即可实现不同设备上的正常显示了。

相关问答

Q1: HTML5显示和影藏DIV

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

style="visibility: none;"

document.getElementById("typediv1").style.visibility="hidden";//隐藏

document.getElementById("typediv1").style.visibility="visible";//显示

Q2: HTML5网页如何在电脑端和手机端都全屏显示？

HTML5网页在电脑端和手机端都全屏显示的步骤如下：

1、打开HTML5网页代码。

2、在网页头部加上新代码，让网页的宽度自适应设备的宽度。代码如下：

meta name="viewport" content="width=device-width

initial-scale=1.0

maximum-scale=1.0

minimum-scale=1.0

user-scalable=no" /

3、在输入代码完成后，把图片包括图片DIV 的宽度设置成百分之百即可。

Q3: html5为何显示不出来图片

html5图片不会显示，问题可能出现在你加载的图片路径不正确或者图片名字格式等等写错了；

img src="images/**.jpg" / src="这里是图片的路径"

Q4: HTML5 自动显示和隐藏文字，hidden属性，为何以下方法不能实现？

hidden属性在html5中，只要存在，就是隐藏效果，而不论值为多少，要显示元素，要删除hidden属性，而不是设置为false。实现代码如下：

script type=“text/javascript” async=“true”

function qq_onclick（）{

var text_2=document.getElementById（“text_1”）；

text_2、removeAttribute（“hidden”）；

}

function qq_close（）{

var text_1=document.getElementById（“text_1”）；

text_1、setAttribute（“hidden”，true）；

}

/script

扩展资料：

HTML5的特性主要包括哪些内容

随着移2113动互联网的飞速发展，5261目前Html5技术也得到了不断的完善，开4102发技术方面越来越成熟了，成为了1653目前主流的开发语言之一。html5的特性在五个方面体现的淋漓尽致

1、语义特性：

HTML5赋予网页更好的意义和结构。

2、HTML5 APP Cache及本地存储：

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度

3、设备兼容：

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以与浏览器内部的数据直接相连。

4、连接特性：

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，能实现服务器将数据“推送”到web app的功能。

5、图形特性：

基于SVG、Canvas、WebGL及CSS3的3D功能，用户能在浏览器中得以体验到惊艳的视觉效果。