- 专家问诊,提供专业建议
- 急速响应,体验省心
- 根据需求灵活定制解决方案
web开发进入新时代
标签:web开发进入新时代 2017-8-08 作者:open_tq54_niwe
前端技术的三个阶段:
第一阶段是以Web 1.0为主的忘了阶段,前段主流技术为HTML和CSS;
第二阶段是以Web 2.0的Ajax应用阶段,热门技术为JavaScript/DOM/异步数据请求;
第三阶段是即将迎来的HTML5和CSS3阶段
1.1.1 html5的新特性
第一、兼容性;
第二、合理性;
第三、效率高;
第四、安全性;
第五、分离;
第六、简化;
第七、通用性;
第八、无插件
1.1.2 Html5组织
HTML5的开发有三个组织负责:①WHATWG; ②W3C; ③IETF
1.1.3 HTML5的构成
1.2 HTML5设计原理
1.2.1 HTML5开发历程
HTML4.0.1到XHTML1.0到XHTM1.1到XHTML2,出现矛盾,分离出最开始的HTML5
1.2.2 HTML5开发动力
HTML5最开始由Opera公司、Apple公司等浏览器厂商脱离W3c后成立了WHATWG独自开发。后得到迅猛发展,W3C后来又和WHATWG组织合作。
1.2.3 HTML5设计理念
①避免不必要的复杂性。例如 DOCTYPE元素
eg:
eg:< meta charset="utf-8">
②支持已有的内容
对于已经有的写作格式风格都支持
但笔者建议初学者要严格按照语法写作,养成良好习惯。
lint工具是非常严格的编程工具,可以试着把html5源码在lint工具运行检查。
③解决现实的问题,例如块元素
案例:
传统写法如下
若在HTML5中就会被简化
标题文本
段落文本
④求真务实
html5新增元素去掉很多div
eg:
四个新元素:section、article、aside、nav
这四个元素的引入可以给内容分区
eg:
...
注意事项:即便是footer,也不一定非要出现在最下面,header、footer、aside、nav元素,最重要的是他们的语义,与位置没有关系,这些元素只与内容有关。
⑤平稳退化
使用type属性增强表单,以下是type的新属性,有number、search和range等。
eg:
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
若新属性不被浏览器理解,则都可以看成type="text"。
HTML5增加了新元素 placeholder(占位符),表示在文本框中预先放置了一些文本,只要一单击文本,他就会消失,若文本框中内容被清除,又会重新出现。有些浏览器不支持可用javascript来实现占位符功能。
video元素。
以下是针对不支持video元素的浏览器写的代码。
以下示例:
以上代码的含义:
1、如果支持video元素,也支持H264,则直接播放第一个视频;
2、如果支持video元素,也支持ogg,则用第二个视频;
3、如果不支持video元素,也要是是flash影片;
4、如果不支持video,也不支持flash,则代码给出下载链接。
html5和flash一个不能少,所以要两者兼备
⑥最终用户选择
当面临一个要解决的问题时,如果W3C和WHATWG给出了不同的解决方案,一旦遇到冲突,最终用户优先,然后是作者,其次是实现者,再次是标准制定者,最后才是理论上的完善。用户是第一位的,承认用户的权利。
1.3 编写第一个HTML5页面
IE9+浏览器、Mozlilla的Firefox、Google的Chrome都可以很好的支持HTML5。
Dreamweaver中写入代码:
#myCanvas{
background:red;
width:200px;
height:100px;
}
1.3.3 使用HTML5编写简单的WEB页面
eg:
Hello,World
html5不区分字母大小写、标记结束符及属性是否加引号。
1.4 HTML5页面的特性
HTML5示例
header,nav,article,footer{
border:solid 1px #666;
padding:10px;
margin:6px
}
header{width:50px}
nav{
float:left;
width:60px;
height:100px
}
article{
float:left;
width:406px;
height:100px
}
footer{
clear:both;
width:500px
}
有些新增的HTML5元素可以单独成为一个区域
这是H1内容
这是H2内容
1.4.2 使用CSS美化HTML5文档
默认情况下,CSS会默认元素的display属性值为inline,若为了正确的显示设置的页面效果,需要将元素的display属性设置为block。
兼容以往浏览器版本需要用javascript代码在头部
document.creatElement('article');
document.creatElement('header');
上面就是小编为大家整理的关于web开发进入新时代的文章,希望对大家有帮助。在实际的操作过程中大家可以根据实际情况进行灵活的调整。了解更多咨询请关注猪八戒网。
软件开发暂无最新文章查看全部推荐文章>
推荐人才
免责声明:
网站文章均由网站用户自行通过本网站系统平台投稿编辑整理发布,仅供学习与参考, 不代表本网站赞同其观点和对其真实性负责。如有侵犯您的版权,请联系我们,我们将及时删除。