sysuzhyupeng的博客

1.h5新语义元素 header标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。 footer标签一般配合address标签(显示地址)，包含作者信息、相关链接等。 nav标签一般包含多个a标签，构建导航组件。 aside标签主要装载广告、侧边栏。 article标签包含文章，一般内嵌header、footer、h1、p标签。

HTML5在标准中增加了对元素拖放(Drag and Drop)的支持，这有利于实现更好的交互和更极致的用户体验，通过js配合draggable属性，就能实现这样的效果draggable属性draggable属性不支持IE8之前的浏览器。当我们想让一个元素是可拖动的，我们必须把通过js这个属性设为true <div id="icon"></div> <div id="box"></div>

移动端和桌面端的区别首先一个明显的区别就是屏幕大小，在桌面端，分辨率非常大，从前960像素的页面宽度成为主流，而如今桌面端分辨率基本超过了1280 * 800，当前一些重内容的网站开始使用更大的页面尺寸，如在页面宽度上，京东采用了1210像素，而淘宝使用了1190像素。而对于移动端来说，常见的分辨率都是320 * 480, 360 * 640, 640 * 960这样的小尺寸，所以布局更多地运用垂直

弹性布局Flexbox百分比布局虽然灵活，但是各种宽度，间距的计算也会让人心累。还有一种更灵活的布局方式，即Flexbox，由于桌面端浏览器对Flexbox的支持还未普及，因此它没有成为桌面端页面的主流布局方式，而在移动端，当浏览器的兼容性已不再是最大的问题，Flexbox的机会来了。Flexbox对于移动端有着特别的意义，在传统的定位方式中充斥着各种float浮动属性，这些浮动对于移动端来说是对渲

移动设备的一些API可以参考博文移动设备API添加到主屏后的标题（IOS）<meta name="apple-mobile-web-app-title" content="标题"> 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）<meta name="apple-mobile-web-app-capable" con