上海网站建设公司 红威,新网站前期如何做seo,360网站推广怎么做,开发一个网站的流程希望你开心#xff0c;希望你健康#xff0c;希望你幸福#xff0c;希望你点赞#xff01; 最后的最后#xff0c;关注喵#xff0c;关注喵#xff0c;关注喵#xff0c;佬佬会看到更多有趣的博客哦#xff01;#xff01;#xff01; 喵喵喵#xff0c;你对我真的… 希望你开心希望你健康希望你幸福希望你点赞 最后的最后关注喵关注喵关注喵佬佬会看到更多有趣的博客哦 喵喵喵你对我真的很重要 目录
前言
HTML5 概述
HTML5 的八个特性
HTML5 的优势
HTML5 新增结构元素及页面元素
HTML5 废除的元素与属性
浏览器支持与选择
课后练习
html5页面布局设计
总结 前言 熟悉掌握 HTML5 新特性。 HTML5 概述 WHATWGWeb Hypertext Application Technology Working GroupWeb 超文本应用技术工作组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如IE6IE8浏览器。所有新、旧浏览器对无法识别的元素均会视作内联(inline)元素来自动处理。可以通过其它方法让这些浏览器能够处理“未知”的HTML元素。使用http://html5test.com来测试浏览器的支持。 html5shiv是针对IE浏览器比较好的解决方案。html5shiv主要解决HTML5提出的不被IE6IE8识别新的元素不能作为父节点包裹子元素不能应用CSS样式。从指定网站上直接下载并保存到本地项目目录中https://github.com/aFarkas/html5shiv/。 head!--[if lt IE 9]script srchttp://html5shiv.googlecode.com/svn/trunk/html5.js/script![endif]--/head 课后练习
html5页面布局设计 网页标题html5页面布局设计网页的框架结构如下图所示body中的html代码可参照如下所示代码结构 header/header nav ul lia href#首页/a/li …… /ul /nav div idmain article sectionimg srcimg/html5_logo.png/section …… /article aside figure img srcimg/html5.png figcaptionHTML5结构元素侧边aside/figcaption /figure /aside /div footer p……/p /footer 在CSS文件夹中新建样式表文件style1.css使用外部样式表实现如下图所示的网页效果要求 整体框架样式 全局样式内外边距清0header的样式背景颜色#4B5B6B背景图片logo.png背景图片不重复显示在左上角,宽100%高60pxnav的样式宽100%高80pxmain的样式宽100%高500px背景颜色#fefefefooter的样式清空两侧浮动宽100%高80px背景颜色#eaeada上下内边距为20px左右内边距为自动文本居中对齐。设置导航条nav下的具体样式 ul的样式不显示项目符号宽100%高80px背景颜色#d0c0b0文本居中对齐相对于父元素居中显示。li的样式字体大小28px上下内边距20px左右内边距10px显示为inline-block类型宽160px高40px。鼠标单击超链接之前之后及正在单击时的样式无下划线鼠标悬停在超链接上时的样式背景颜色#cf9高80px宽160px上下内边距为20px左右内边距为10px。设置主体部分main下的具体样式 article的样式宽75%高500px背景颜色#dbdaca向左浮动section的样式宽30%高420px向左浮动边框线为1px 虚线 #060文本居中对齐垂直居中(vertical-align: middle;)上下外边距为35px左右外边距为10pximg的样式宽95%高400px外边距10pxaside的样式宽25%高500px背景颜色#9F9F9A向右浮动文本居中对齐垂直方向居中对齐(vertical-align: middle;)。figure的样式上下外边距20px左右外边距自动。设置脚部footer下的具体样式 设置footer下的p的样式字体大小20px上内边距25px高26px网页的效果图参照下图所示 !doctype html
html
head
meta charsetutf-8
titlehtml5页面布局设计/title
link relstylesheet hrefCSS/style1.css
/headbodyheader/headernavullia href#首页/a/lilia href#HTML5/a/lilia href#CSS3/a/lilia href# JavaScript/a/lilia href#DOM/a/lilia href#BOM/a/li/ul/navdiv idmainarticlesectionimg srcimages/html5_logo.png/sectionsectionimg srcimages/css3_logo.png/sectionsectionimg srcimages/javascript_logo.png//section/articleasidefigureimg srcimages/html5.pngfigcaptionHTML5结构元素侧边aside/figcaption/figure/aside/divfooterpCopyright copy; 2017-2020 Web前端开发工作室 - 业务开发部 - 网站建设/p/footer
/body
/htmlstyle1.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 新特性。 希望你开心希望你健康希望你幸福希望你点赞 最后的最后关注喵关注喵关注喵佬佬会看到更多有趣的博客哦 喵喵喵你对我真的很重要
