如何使用html5

如何使用html5,第1张

html5在页面定义时,开头用<!DOCTYPE html>即可,

html5有很多新的元素可供使用,典型的例如<audio><video><header><footer><canvas>等等,

目前有很多html5的书籍啦,我也在学习中

HTML5的移动端网页设计稿,通常情况下,内容区为750px或960px或者1080px的,一般不小于750px像素大小(宽度)

设计稿可以比750px大,但是绝对不能比750px小,这个主要是由于当前手机的分辨率相对较高(iPhone6是375物理像素,但实际像素为其两倍,也就是750,这个750就是这么来的)

如果设计图稿过小,前端在实现图稿的时候里面的大小在高分辨率的情况下会显得模糊不清,所以这也是为何要“大”分辨率

此外需要注意的是,要保证页面的基准字体大小,在320px的设计稿当中,最小字体不宜小于12像素,其他像素的设计稿当中,等比例换算即可(12/320px设计稿像素值)

用第三方合作平台,将html5和页面素材先上传到第三方服务端,也可以在微信平台通过文字或链接跳转的形式,实现html5页面的转换。

自从微信升级 X5 Blink内核之后,兼容性大大好转。IOS虽说没有升级统一为同一版本的内核,但IOS版本的微信一直是WKWebView内核,WKWebView的版本依赖于IOS的版本。

IOS 80以上的系统,对Html5和css3的支持率也很高,基本的H5,CSS3的特性均得到支持,测试中有详细数据。

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation、见本处参考资料原文内容:)。

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。

html5你可以理解为html的第5个版本,就像是苹果7小米4windows10一样的概念。

响应式页面是指,使用响应式的页面设计思想,编写出来的页面,这种页面可以在电脑这种大屏幕显示,也可以在手机这种小屏幕显示,这种可以一次编写,在多种屏幕显示的设计思想,就是响应式,就比如你设计一行方块,这些方块显示员工信息,然后设置浮动,这些方块就横着了,但是电脑端的屏幕可以容得下这些方块,因为电脑宽度大,但是手机宽度比电脑小,如果你想让你这个设计不需要单独写手机端的页面,就可以使用响应级的设计思想,使用css媒体查询,比如当屏幕小于400px,就去掉这些方块的浮动,当大于400px,就重新让这些方块浮动。

概括:html5是html的版本,一个新的规范,增加了一些新技术。

响应级:一次编写,多屏幕运行。

html5增加了很多新的东西,可以很好的支持响应级。

可以使用网页的锚点,即<a>标签的id属性,如<a id="C6">Chapter 6</a>当从另处页面连接到该页地址加#C6时就会跳转到此处。

示例:

网页ahtm

<!DOCTYPE html>

<head>

    <title>A</title>

</head>

<body>

<a href="bhtm#C6">B - Chapter 6</a>

</body>

</html>

网页bhtm

<!DOCTYPE html>

<head>

    <title>B</title>

</head>

<body>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 4</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

<h2><a id="C6">Chapter 6</a></h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>

<p>This chapter explains ba bla bla</p>

</body>

</html>

运行效果:

欢迎分享,转载请注明来源:表白网

原文地址:https://h5.hunlipic.com/biaobai/2813491.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2024-01-13
下一篇2024-01-13

发表评论

登录后才能评论

评论列表(0条)

    保存