[HTML]Web前端开发技术18（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

HTML5 概述

HTML5 的八个特性

HTML5 的优势

HTML5 新增结构元素及页面元素

HTML5 废除的元素与属性

浏览器支持与选择

课后练习

html5页面布局设计

总结

---

前言

熟悉掌握 HTML5 新特性。

---

HTML5 概述

WHATWG（Web Hypertext Application Technology Working Group，Web 超文本应用技术工作组），WHATWG组织专门致力于Web 表单和应用程序，当时W3C 专注于XHTML 2.0 标准的制定。2006年10月，W3C决定与WHATWG合作共同研制HTML5 相关技术标准。

---

HTML5 的八个特性

1.语义特性（Semantic）。HTML5赋予网页更好的意义和结构。

2.离线与存储特性（Offline & Storage）。HTML5开发的网页APP，启动时间更短，联网速度更快。由于有HTML5 APP Cache、本地存储功能、Indexed DB和File API说明文档。

3.设备访问特性 (Device Access)。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与麦克风及摄像头相联。

4. 多媒体特性(Multimedia)。 支持网页端的Audio、Video等多媒体功能，与网站自带的APPS、摄像头、影音功能相得益彰。

5. 三维、图形与特效特性（3D、Graphics & Effects）。基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

6. 性能与集成特性（Performance & Integration）。 HTML5会通过Web Workers和XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

7. 连接特性（Connectivity）。HTML5拥有更有效的服务器推送技术(Server-Sent Event和WebSockets)，能够帮助我们实现服务器将数据“推送”到客户端的功能。

8. CSS3特性(CSS3)。CSS3中提供了更多的风格和更强的效果。

---

HTML5 的优势

1.摆脱对平台的依赖。打开浏览器，直接就可以访自己的应用。

2.实时更新。

3.离线使用。用户可以离线使用，更新下载量及少。

4.代码更安全。HTML5可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。

5.跨平台。JavaScript的代码可以在许多地方使用，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。

6.可以充分利用Native。HTML5可以通过浏览器作为中介充分利用Native的好处(使用GPS、照相机、本地相册、读取本地联系人等）。某些Web无法实现的功能，可以利用Native来实现。

---

HTML5 新增结构元素及页面元素

1. HTML5中新增加结构元素。

例如Header页眉、nav导航、section节、article文章、aside侧栏、footer页脚。

2. HTML5 中新增页面元素。

例如video、audio、embed、progress、time、mark、ruby、rt 、rp 、canvas 、command、datalist、output、wbr 、source、menu、details等

---

HTML5 废除的元素与属性

       HTML4.01之前有些标记被不赞成使用，HTML5已经淘汰了，建议使用CSS来替代。还有些标记HTML5已经不再支持，所以也需要淘汰。

(1) 纯表现的元素。如font、basefont、center、big、s、u、strike、tt。

(2) 对可用性产生负面影响的元素。如frameset、frame、noframes等元素。HTML5只支持浮动框架（内联框架）iframe元素。

(3) 易产生混淆的元素。如acronym、applet、isindex、dir等元素。

(4) 废除只有部分浏览器支持的元素。如blink、bgsound、marquee等元素。

(5) 其它被废除的元素。如废除rb，使用ruby替代；废除listing使用pre替代；废除xmp使用code替代；废除nextid使用guids替代；废除plaintex使用“text/plian”MIME类型替代。

---

浏览器支持与选择

       一些低版本的浏览器并不支持HTML5，如IE6～IE8浏览器。所有新、旧浏览器，对无法识别的元素均会视作内联(inline)元素来自动处理。可以通过其它方法让这些浏览器能够处理“未知”的HTML元素。使用http://html5test.com来测试浏览器的支持。

       html5shiv是针对IE浏览器比较好的解决方案。html5shiv主要解决HTML5提出的不被IE6～IE8识别新的元素，不能作为父节点包裹子元素，不能应用CSS样式。从指定网站上直接下载并保存到本地项目目录中（https://github.com/aFarkas/html5shiv/）。

---

课后练习

html5页面布局设计

• 网页标题：html5页面布局设计
• 网页的框架结构如下图所示，body中的html代码可参照如下所示代码结构：

 

 

            

                        

• 首页

                         ……

            

 

 

            

                        

                         ……

            

            

                        

                                    

                                    

HTML5结构元素侧边aside

                        

            

 

 

            

……

 

• 在CSS文件夹中新建样式表文件style1.css，使用外部样式表实现如下图所示的网页效果，要求：
  • 整体框架样式：
    1. 全局样式：内外边距清0
    2. header的样式：背景颜色#4B5B6B，背景图片logo.png，背景图片不重复显示在左上角,宽100%，高60px
    3. nav的样式：宽100%，高80px
    4. main的样式：宽100%，高500px，背景颜色#fefefe
    5. footer的样式：清空两侧浮动，宽100%，高80px，背景颜色#eaeada，上下内边距为20px，左右内边距为自动，文本居中对齐。
  • 设置导航条nav下的具体样式：
    1. ul的样式：不显示项目符号，宽100%，高80px，背景颜色#d0c0b0，文本居中对齐，相对于父元素居中显示。
    2. li的样式：字体大小28px，上下内边距20px，左右内边距10px，显示为inline-block类型，宽160px，高40px。
    3. 鼠标单击超链接之前，之后，及正在单击时的样式：无下划线
    4. 鼠标悬停在超链接上时的样式：背景颜色#cf9，高80px，宽160px，上下内边距为20px，左右内边距为10px。
  • 设置主体部分main下的具体样式：
    1. article的样式：宽75%，高500px，背景颜色#dbdaca，向左浮动
    2. section的样式：宽30%，高420px，向左浮动，边框线为1px 虚线 #060，文本居中对齐，垂直居中(vertical-align: middle;)，上下外边距为35px，左右外边距为10px
    3. img的样式：宽95%，高400px，外边距10px
    4. aside的样式：宽25%，高500px，背景颜色#9F9F9A，向右浮动，文本居中对齐，垂直方向居中对齐(vertical-align: middle;)。
    5. figure的样式：上下外边距20px，左右外边距自动。
  • 设置脚部footer下的具体样式：
    1. 设置footer下的p的样式：字体大小20px，上内边距25px，高26px
  • 网页的效果图参照下图所示：

	

	

		

			
首页
			
HTML5
			
CSS3
			
JavaScript
			
DOM
			
BOM
		
	
	

		

			

			

			

		
		

			

				
				
HTML5结构元素侧边aside
			
		
	
	

		
Copyright © 2017-2020 Web前端开发工作室 - 业务开发部 - 网站建设
	

style1.css

@charset "utf-8";
/* CSS Document */
* {
	padding: 0px;
	margin: 0px;
	}

header {background:url(../images/logo.png) #4B5B6B no-repeat top left;
		width: 100%;
		height: 60px;
		}		
nav {/*background: #D9D9D9;*/
	   width: 100%;
	   height: 80px;
	}
ul {list-style-type: none;
	width: 100%;
	height: 80px;
	background: #D0C0B0;
	text-align: center;
	margin:0 auto;
	}			
li {font-size: 28px;
	padding:20px 10px;
	display:inline-block;
	width:160px;
	height:40px;
	}

a:link,a:visited{text-decoration: none;}
a:hover{background: #CCFF99;
		height: 80px;
		width: 160px;
		padding: 20px 10px;
		}
a:active{text-decoration: none;}

#main {
		width: 100%;
		height: 500px;
		background:#fefefe;
	  }

article {
		width:75%;
		height:500px;
		background: #DBDACA;
		float: left;
		}
section {
		 width: 30%;
		 height: 420px;
		 float: left;
		 border: 1px dashed #006600;
		 text-align: center;
		 vertical-align: middle;
		 margin: 35px 10px;
		}
img {width: 95%;
	height: 400px;
	margin: 10px;
	}
aside {width: 25%;
		height: 500px;
		background: #9F9F9A;
		float: right;
		text-align: center;
		vertical-align: middle;
		}
figure{
	margin:20px auto;
	}
footer {clear: both;
		width: 100%;
		height: 80px;
		background: #EAEADA;
		padding: 20px auto;
		text-align: center;
			}
footer p {font-size: 20px;
		  padding-top: 25px;
		  height: 26px;
			}
			

---

总结

熟悉掌握HTML5 新特性。

---

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！