第1章 Web开发新时代

最新推荐文章于 2019-03-01 10:53:19 发布

亚科

最新推荐文章于 2019-03-01 10:53:19 发布

阅读量556

点赞数

分类专栏： HTML5+CSS3从入门到精通

本文链接：https://blog.csdn.net/chaosa/article/details/51439426

版权

HTML5+CSS3从入门到精通专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端技术的三个阶段：

第一阶段是以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：<!DOCTYPE html>

eg：< meta charset="utf-8">

②支持已有的内容

对于已经有的写作格式风格都支持

但笔者建议初学者要严格按照语法写作，养成良好习惯。

lint工具是非常严格的编程工具，可以试着把html5源码在lint工具运行检查。

③解决现实的问题，例如块元素

案例：

传统写法如下

若在HTML5中就会被简化

</a>

④求真务实

html5新增元素去掉很多div

eg：

四个新元素：section、article、aside、nav

这四个元素的引入可以给内容分区

eg：

</section>

注意事项：即便是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元素的浏览器写的代码。

</video>

以下示例：

<video>

<a herf="movie.mp4">download></a>

</object>

</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中写入代码：

<!DOCTYPE html>

<html>

<head>

<title>这是title</title>

#myCanvas{

background:red;

width:200px;

height:100px;

}

</style>

</head>

<body>

<canvas id="myCanvas">该浏览器不支持HTML5的画布标记！</cancas>

</body>

</html>

1.3.3 使用HTML5编写简单的WEB页面

eg：

<!DOCTYPE html>

<TITLE>这是第一个HTML5页面</TITLE>

<P>Hello，World</P>

html5不区分字母大小写、标记结束符及属性是否加引号。

1.4 HTML5页面的特性

HTML5示例

<!DOCTYPE html>

<html>

<head>

<title>这是HTML5的页面特性</title>

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

}

</style>

</head>

<body>

</body>

</html>

有些新增的HTML5元素可以单独成为一个区域

</article>

</header>

</article>

</header>

1.4.2 使用CSS美化HTML5文档

默认情况下，CSS会默认元素的display属性值为inline，若为了正确的显示设置的页面效果，需要将元素的display属性设置为block。

兼容以往浏览器版本需要用javascript代码在头部

document.creatElement('article');

document.creatElement('header');

</script>

亚科

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第1章 Web开发新时代

web开发新时代
复制链接

扫一扫

专栏目录