官方公告

官方公告

最新动态,版本发布
开发讨论

开发讨论

与前端大神一起探索
技术分享

技术分享

你的开发加油站
问题反馈

问题反馈

非常抱歉,AUI会有一些bug,感谢反馈给我们

前端基础整理笔记 - html5初步认识(一)

技术分享流浪男 发表了文章 • 1 个评论 • 1407 次浏览 • 2016-04-27 11:58 • 来自相关话题

这是平时在讲课时整理的前端笔记,分享出来供大家浏览查询。
一、webapp html5框架




<!DOCTYPE html> 定义当前页面为html5的标准模式

viewport  移动端响应式设置

format-detection  自动识别类的处理

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title></title>

    </head>

    <body>

    </body>

</html>




二、html5 语义化标签




html5的布局理解为排列块的布局。标签的使用上尽量使用语义化标签。

A、布局类

1、<header></header> 页眉,通常可以用来定义页面中的顶部导航栏,<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

        等同于 <div></div>

2、<footer></footer>页脚,通常可用来定义页面中底部

        等同于<div></div>

3、<section></section>定义区段,块,节,通常可以用来定义一个大的区间

        等同于<div></div>

4、<article></article>常用在文章内容显示

        等同于<div></div>

5、<aside></aside>  定义 <article> 标签外的内容,也可以作为侧栏

6、<nav></nav>用来定义导航

7、<details></details> ,使用时与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

        <details> 标签规定了用户可见的或者隐藏的需求的补充细节。

        <details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

        <details> 元素的内容对用户是不可见的,除非设置了 open 属性。

8、<meter></meter> 类型进度显示的度量类

    <meter value="9" min="0" max="10">1</meter>

9、<audio></audio> 音频

10、<video></video> 视频 结合<track></track>可加载字幕

11、<picture></picture> 自适应图片

<picture> 

    <source media="(min-width: 650px)" srcset="images/demo1.png">

    <source media="(min-width: 465px)" srcset="images/demo2.png">

    <img src="images/demo.png">

</picture>

12、<canvas></canvas> 画布

html4

12、<div></div>

13、<p></p> 换行

14、<ul><li></li></ul> 无须列表

15、<ol><li></li></ol>有序列表

B、文字、标示类   




1、<b></b>(bold)粗体

2、<big></big>(big)大字体

3、<em><em>(emphasized)强调字

4、<i></i>(italic)斜体

5、<small></small>(small)小字体

6、<strong></small>(strong)加重语气

7、<mark></mark>    重点标记

8、<time></time> 定义时间

9、<span></span>主要用来着色

10、<h1></h1>...<h6></h6> 标题类

11、<del></del>删除线

C、表单类




input: type常用属性

        text  文本

        number  数字

        password  密码

        email 电子邮箱

        checkbox  多选

        radio 单选

        range 带有滑块的数字选择

        reset 重置表单

        hidden 隐藏

        search 搜索框(带有清除按钮)

        input时间类的可以调用原生控件

datalist

<input list="browsers"> 显示列表项

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

计算输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

  <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">

  =<output name="x" for="a b"></output>

</form>        

D、表格类




<table border="1">

    <caption>这事一个表格</caption>

    <thead>

        <tr>

        <th>序号</th>

        <th>标题</th>

        </tr>

    </thead>

    <tbody>

        <tr>

        <td>1</td>

        <td>表格标题</td>

        </tr>

    </tbody>

</table> 查看全部
这是平时在讲课时整理的前端笔记,分享出来供大家浏览查询。
一、webapp html5框架




<!DOCTYPE html> 定义当前页面为html5的标准模式

viewport  移动端响应式设置

format-detection  自动识别类的处理

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title></title>

    </head>

    <body>

    </body>

</html>




二、html5 语义化标签




html5的布局理解为排列块的布局。标签的使用上尽量使用语义化标签。

A、布局类

1、<header></header> 页眉,通常可以用来定义页面中的顶部导航栏,<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

        等同于 <div></div>

2、<footer></footer>页脚,通常可用来定义页面中底部

        等同于<div></div>

3、<section></section>定义区段,块,节,通常可以用来定义一个大的区间

        等同于<div></div>

4、<article></article>常用在文章内容显示

        等同于<div></div>

5、<aside></aside>  定义 <article> 标签外的内容,也可以作为侧栏

6、<nav></nav>用来定义导航

7、<details></details> ,使用时与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

        <details> 标签规定了用户可见的或者隐藏的需求的补充细节。

        <details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

        <details> 元素的内容对用户是不可见的,除非设置了 open 属性。

8、<meter></meter> 类型进度显示的度量类

    <meter value="9" min="0" max="10">1</meter>

9、<audio></audio> 音频

10、<video></video> 视频 结合<track></track>可加载字幕

11、<picture></picture> 自适应图片

<picture> 

    <source media="(min-width: 650px)" srcset="images/demo1.png">

    <source media="(min-width: 465px)" srcset="images/demo2.png">

    <img src="images/demo.png">

</picture>

12、<canvas></canvas> 画布

html4

12、<div></div>

13、<p></p> 换行

14、<ul><li></li></ul> 无须列表

15、<ol><li></li></ol>有序列表

B、文字、标示类   




1、<b></b>(bold)粗体

2、<big></big>(big)大字体

3、<em><em>(emphasized)强调字

4、<i></i>(italic)斜体

5、<small></small>(small)小字体

6、<strong></small>(strong)加重语气

7、<mark></mark>    重点标记

8、<time></time> 定义时间

9、<span></span>主要用来着色

10、<h1></h1>...<h6></h6> 标题类

11、<del></del>删除线

C、表单类




input: type常用属性

        text  文本

        number  数字

        password  密码

        email 电子邮箱

        checkbox  多选

        radio 单选

        range 带有滑块的数字选择

        reset 重置表单

        hidden 隐藏

        search 搜索框(带有清除按钮)

        input时间类的可以调用原生控件

datalist

<input list="browsers"> 显示列表项

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

计算输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

  <input type="range" id="a" value="50">100

  +<input type="number" id="b" value="50">

  =<output name="x" for="a b"></output>

</form>        

D、表格类




<table border="1">

    <caption>这事一个表格</caption>

    <thead>

        <tr>

        <th>序号</th>

        <th>标题</th>

        </tr>

    </thead>

    <tbody>

        <tr>

        <td>1</td>

        <td>表格标题</td>

        </tr>

    </tbody>

</table>

AUI气泡菜单

开发讨论偉大嘅科學家 回复了问题 • 2 人关注 • 1 个回复 • 1189 次浏览 • 2016-04-27 11:50 • 来自相关话题

auislide轮播 和 Frame的滑动冲突

回复

开发讨论s1346520 发起了问题 • 2 人关注 • 0 个回复 • 2894 次浏览 • 2016-04-27 10:25 • 来自相关话题

Aui有没有 像微信第一页中右上角那个+ 弹出来的小菜单?

回复

开发讨论parkdoor 发起了问题 • 1 人关注 • 0 个回复 • 946 次浏览 • 2016-04-26 13:08 • 来自相关话题

【+】 控件(类似手机QQ上的 【+】)

回复

开发讨论bughp 发起了问题 • 1 人关注 • 0 个回复 • 2831 次浏览 • 2016-04-26 11:27 • 来自相关话题

建议增加对Bower、Nuget等主流包管理软件的支持

回复

开发讨论codelove1314 发起了问题 • 1 人关注 • 0 个回复 • 1009 次浏览 • 2016-04-25 11:45 • 来自相关话题

如何给aui-input-addon 固定宽度

回复

问题反馈blue 发起了问题 • 1 人关注 • 0 个回复 • 1441 次浏览 • 2016-04-24 15:47 • 来自相关话题

如何替换手风琴的被展开部分

问题反馈parkdoor 回复了问题 • 2 人关注 • 4 个回复 • 948 次浏览 • 2016-04-23 22:17 • 来自相关话题

建议slider_up可以增加右滑的操作

开发讨论rqfreedom 回复了问题 • 3 人关注 • 4 个回复 • 862 次浏览 • 2016-04-21 23:09 • 来自相关话题

aui-tips无法单独设置iconfont的颜色

回复

问题反馈rqfreedom 回复了问题 • 1 人关注 • 1 个回复 • 1447 次浏览 • 2016-04-21 23:09 • 来自相关话题

aui在有些机型的错误

问题反馈rqfreedom 回复了问题 • 2 人关注 • 5 个回复 • 1235 次浏览 • 2016-04-21 22:42 • 来自相关话题

AUI v 1.2.1版本发布,更新日期2016-04-21

官方公告流浪男 发表了文章 • 14 个评论 • 2415 次浏览 • 2016-04-21 20:53 • 来自相关话题

AUI 1.2.1版本更新说明
 
在当前版本中我们做了进一步的优化和修复,让操作更流畅
一、轮播组件优化更新
新增当前页返回及获取总页数接口,方便用户扩展
二、基于轮播组件新增引导页
基于轮播组件我们做了简单的引导页效果,用户可以进一步扩展
三、优化列表右滑菜单
当前版本进一步提高了滑动体验
四、全屏滑动组件优化重构
全屏滑动组件重新架构,提高流畅度,js文件为aui-slider-full.js,原js已弃用,具体使用方法参考官方文档
五、日历组件重新架构
对日历组件重新做了架构,全屏滑动的日历效果暂未更新,后面会进一步的扩展,带来不便请谅解,具体使用方法参考官方文档
 
欢迎大家对AUI的支持

  查看全部
AUI 1.2.1版本更新说明
 
在当前版本中我们做了进一步的优化和修复,让操作更流畅
一、轮播组件优化更新
新增当前页返回及获取总页数接口,方便用户扩展
二、基于轮播组件新增引导页
基于轮播组件我们做了简单的引导页效果,用户可以进一步扩展
三、优化列表右滑菜单
当前版本进一步提高了滑动体验
四、全屏滑动组件优化重构
全屏滑动组件重新架构,提高流畅度,js文件为aui-slider-full.js,原js已弃用,具体使用方法参考官方文档
五、日历组件重新架构
对日历组件重新做了架构,全屏滑动的日历效果暂未更新,后面会进一步的扩展,带来不便请谅解,具体使用方法参考官方文档
 
欢迎大家对AUI的支持

 

建议aui添加一个picture view的插件或功能

开发讨论半城村落 发表了文章 • 0 个评论 • 747 次浏览 • 2016-04-21 09:05 • 来自相关话题

问题描述,各大主流app都有图片浏览的插件,支持滑动,触摸放大,支持上页下页跳转。贴图如下:












图片切换的时候平滑过渡,不是一般那种忽闪过渡,用户提现不好,类似网易这种图集。
问题描述,各大主流app都有图片浏览的插件,支持滑动,触摸放大,支持上页下页跳转。贴图如下:

1.jpg


2.jpg



图片切换的时候平滑过渡,不是一般那种忽闪过渡,用户提现不好,类似网易这种图集。

aui-slider-up.js 手机里面为什么没有了点击事件

回复

问题反馈乱78糟 回复了问题 • 1 人关注 • 1 个回复 • 1419 次浏览 • 2016-04-20 09:38 • 来自相关话题

发现aui的bug一枚

回复

问题反馈rqfreedom 发起了问题 • 1 人关注 • 0 个回复 • 915 次浏览 • 2016-04-20 00:18 • 来自相关话题