- web前端(从零开始),每天更新学习笔记 添加脚注块 11-25
- HTML5 表单元素 11-25
- 全栈HTML5+趣味课堂 11-25
- HTML5 实体名称D 11-25
- 原创,vue初探,以及简易的增删改查实现 11-25
- HTML5新元素 11-25
- React Router-基于 React 的强大路 11-25
- HTML5创作三步曲 11-25
- HTML5动画原理和HTML5动画制作工具 11-25
- HTML5兼容性代码 11-25
web前端(从零开始),每天更新学习笔记 添加脚注块
发布者: superzhang | 发布时间:2017-11-25html5
<footer></footer>可以作为<body></body>里面的内容注脚,比如在页面中添加版权信息等,还有很多情况都可以使用<footer></footer>比如作者,相关阅读,链接,版权信息等,示例:
<footer></footer>示例
大家在使用时,一定要使用<footer></footer>, 尽量避免使用<div><
HTML5 表单元素
发布者: superzhang | 发布时间:2017-11-25HTML5 新的表单元素
HTML5 有以下新的表单元素:
<datalist>
<keygen>
<output>
注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。
HTML5 <datalist> 元素
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
使用 &
全栈HTML5+趣味课堂
发布者: superzhang | 发布时间:2017-11-25初做HTML5工程师,这些“道儿”上的话你造吗?
在千锋H5经过20周的奋战,终于学有所成,马上就要毕业了,离1亿的小目标也不远了,但是初出茅庐的我还是有点小忐忑,进入这行,不懂点“道儿“上的话,恐怕是要吃冤枉亏的。然而我显然是多虑了,原来我们毕业时的就业课是会讲这些”道儿“上的黑话的。
比如我们要表达“这个东西我不想做”,怎么办,你不能直接说呀,不然还怎么涨工资,你可以换个思路,比如“你这个需求不清晰呀”,“目前技术实现不了”或者是“现在服务器性能跟不上”,看吧,这不是我的问题,是你的问题或是客观技术上达不成的问题,成功甩锅^_^。
再比如要表达“任务完不成了,要延期了”,这肯定也不能直接说呀,你一说,完了,工资又被扣了。委婉点,说话的方式委婉点,“在吗?”“最近看你也挺忙的,要不要一起去吃个火锅呀”,记得问完“在不在”要赶紧进入正题说火锅的事哈,不然别人根本不理你,甚至有人对“在吗”两个字是有心理阴影的。前几天有个学长还在说,最见不得谁问“在吗”,为啥,只要一问,肯定都是周末加班的事情,心理阴影了,所以都不回了。
测试的同事给提了bug,大家的思想活动应该是:“明明在我的电脑上运行得好好的,为啥到你那儿就不行了?”太直接了,转换个思路嘛:“UI给的图就是这样的呀”,不行就“那个......我回去再测试一下”。
这
HTML5 实体名称D
发布者: superzhang | 发布时间:2017-11-25并非下表中的所有实体都能在所有的浏览器中正确地显示。
目前,IE 11 是唯一一个能正确显示所有 HTML5 实体的浏览器。
原创,vue初探,以及简易的增删改查实现
发布者: superzhang | 发布时间:2017-11-25vue.js出了有段时间了,不过一直在忙于做各种pc、h5、响应式前端切图项目,一直没有腾出时间去研究,也看过一些关于vue的文档,还没开始,就告诉你要装node.js,然后页面打包等,我内心直接抗拒 ,把页面关掉了
既然可以不依赖vue.js运行(js是在浏览器运行的),那么为什么要跟我讲那么多nodejs,我知道nodejs等可以很好的辅助,但是我需要的是直奔主题
能不能直接加载vue.js 就能把一个完整的增删改查做出来? 可以,代码如下:
<script src="vue.min.js"></script> <script src="axios.min.js"></script>多加载了一个axios.js ,是用来从api调用数据的,一开始做获取数据,删除数据是真实链接api后端的,并且有效,后来因为做增,改,复杂一些,直接用模拟数据实现的。
代码:
var data={
re
HTML5新元素
发布者: superzhang | 发布时间:2017-11-251.article元素(标签)
用于定义一个独立的内容区块,比如一篇文章,一篇博客等。
article元素内可以嵌套其他元素,它可以有自己的头、尾、主体等内容,是用时要特别注意内容的独立性一般独立完整的内容才使用article元素,如果只是一段内容的话应该是用section元素。
2.section元素
用于定义文章中的章节(通常应该有标题和段落内容)
用来定义文档中特定的内容区块,可视为一个区域分组元素,用来给页面上的内容分块。
section元素可以定义 文档的主体内容
用一句话来概括它的作用就是给内容分段,给页面分区
注意它与div的区别,div强调在形式上的独立性,section强调的是内容上的独立性,注意它的语义。
3.article元素和section元素的区别
语义不同:
article元素更强调内容的独立性
section元素更强调内容的关联性
article元素是独立完整的内容,section元素页面内容分块 相同点:
本质上都是带有语义的div块元素
分别可以看做<div id="section">和<div id="article">
React Router-基于 React 的强大路由库
发布者: superzhang | 发布时间:2017-11-25React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。
目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本。
引用react-router // React Router 核心react-router-dom // 用于 DOM 绑定的 React Routerreact-router-native // 用于 React Native 的 React Routerreact-router-redux // React Router 和 Redux 的集成react-router-config // 静态路由配置的小助手以上资源库按需引用,本文讨论web端应用,只需要引用react-router-dom即可。(如果需要搭配redux则还需引用react-router-redux)
主HTML5创作三步曲
发布者: superzhang | 发布时间:2017-11-25HTML5是web开发世界的一次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势。其实HTML5并不难理解和使用。我们这里能列出许多原因为什么现在要开始使用HTML5。下面HTML5就业培训专家为大家介绍HTML5创作三步曲。
Step1:定基调
包括:逗比无节操范,煽情鸡汤魂,酷炫未来风,文艺复古流,萌萌哒掐出水。下面是一些案例:
Step2:编故事
定了基调,大家知道接下来要编故事,无论是任何形式的传播,内容都是非常重要的,好的内容会自传播,所以一开始我们都要编一个故事,一开始要想,你的故事线是什么?
这是我们给OPPO做的一个项目,是当时第一批朋友圈广告,我们将家庭、孩子、妻子、父母、成长、影像这些元素串成一条感情线,通过故事来述说产品和人的故事。24小时之内2.24亿人看到了朋友圈这个内容,给OPPO带来了26万的粉丝:
Step3:细节处理
主线差不多有了,接下来要做一些细节的东西,主要有两块,一个是交互,一个是选音乐。适当的音乐能够渲染情绪,方法就是不断的试听和感受。交互性质的东西可能体验来得直接一些,大家可以看看下面不同类型的例子:
总结一下,抓眼,享听,走心,暗爽,还有易参与,这是做好H5非常关键的几点。要做到影响人心有非常重要的两点,一个是表现层面的创意和技
HTML5动画原理和HTML5动画制作工具
发布者: superzhang | 发布时间:2017-11-25HTML5不是一个新的现象,但HTML5的使用在过去几年中已经有了飞速的发展。当涉及到富媒体,运动图形和网络上的互动内容时,HTML5几乎完全取代了Flash的使用。由于移动应用程序开发人员的性能,易于使用和开放标准的剪切原因,它也受到了很大的调整。
HTML5的前身HTML4有许多改进,其中之一是包含用于在网页上即时渲染图形的canvas元素。
让我们看看HTML5动画的基础知识,然后再转到用于创建动画横幅,广告,丰富的互动内容,电子贺卡,信息图表,幻灯片,动态图形,游戏等各种工具。
HTML5动画 - 基础知识
HTML5动画包含在<canvas> </ canvas>元素中。为了一个基本的了解,html文档中的canvas可以被看作是一个绘图板,您可以在其中绘制形状,然后快速更改框架,使其看起来像一个动画图形。
基本动画的步骤非常简单,您可以通过在HTML5,CSS和JavaScript中手动编写代码来创建基本动画
HTML5兼容性代码
发布者: superzhang | 发布时间:2017-11-25近日服务器被wallet病毒侵害了,水猿忙的可是不可开交。今日就附上水猿平常写HTML页面都会用的一段兼容性css代码。保证在各浏览器中都可以保持一致。
body,div,ul,li,a,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,input,span,label,b{margin:0;padding:0}
li{list-style:none}
a{text-decoration:none}
img,input{border:none}
a,input{outline:none}
textarea{resize:none}
h1,h2,h3,h4,h5{font-style: normal}
i,em{font-style: normal}
.clearfix:after{content: "";display: block;height: 0;clear: both}
