zoukankan      html  css  js  c++  java
  • 前端一班:HTML5当天学习总结-摘抄张果博客园

    一、初步了解HTML5,相关涉及技术以及行业前景

    二、HTML5特性

    HTML5 八个特性类别对应的8个Logo
    语义化、离线&存储、设备访问、通信
    多媒体、图形和特效、性能和集成、呈现(CSS3)

    1)语义化:使标签更有意义

    2)本地存储特性(Class: OFFLINE & STORAGE)

    HTML5 APP Cache、本地存储功能、IndexedDB、FileAPI

    3)设备访问特性 (Class: DEVICE ACCESS)

    为移动开发而生。重力感应、全球地理定位、麦克风、摄像头

    4)连接特性(Class: CONNECTIVITY)

    WebSocket、Server-Sent Events实现双向连接,消息推送

    5)网页多媒体特性( Class: MULTIMEDIA)

    支持网页端的Audio、Video等多媒体功能。

    6)三维、图形及特效特性(Class: 3D, Graphics & Effects)

    这一招将Flash打败,图形增强,SVG,Canvas,WebGL,2D/3D游戏和页面视觉特效。

    7)性能与集成特性(Class: Performance & Integration)

    没有用户会永远等待你的Loading,HTML5增加WebWorker、XMLHttpRequest2

    8)呈现(CSS3/styling)

    除了DOM接口,HTML5增加了更多样化的应用程序接口(API):

    1.5、HTML5优点与缺点

    1.5.1、优点

    1、网络标准统一、HTML5本身是由W3C推荐出来的。
    2、多设备、跨平台
    3、即时更新。
    4、提高可用性和改进用户的友好体验;
    5、有几个新的标签,这将有助于开发人员定义重要的内容;
    6、可以给站点带来更多的多媒体元素(视频和音频);
    7、可以很好的替代Flash和Silverlight;
    8、涉及到网站的抓取和索引的时候,对于SEO很友好;
    9、被大量应用于移动应用程序和游戏。

    1.5.2、缺点

    a)、安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
    b)、完善性:许多特性各浏览器的支持程度也不一样。
    c)、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage 等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
    d)、性能:某些平台上的引擎问题导致HTML5性能低下。
    e)、浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。

    1.8、HTML5语法规则与文档声明

    1.8.1、语法规则

    a)、标签要小写
    属性值不加" "或 ' '
    b)、可以省略某些标签
    HTML body head tbody
    c)、可以省略某些结束标签
    tr td li 
    d)、单标签不用加结束标签
    img input
    e)、废除的标签,看第二点
    font center big

    1.8.2、文档声明

    <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <HTML> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
    doctype 声明不属于 HTML 标签,它是一条指令,告诉浏览器编写页面所用的标记的版本。
    在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。
    HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用。

    1.8.2、文档声明

    二、废弃的标签

    以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了。

    2.1、能用CSS代替的元素 

    这些元素包含basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为页面展示用的,表现的内容应该由CSS完成。

    2.2、frame框架

    这些元素包含frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。

    2.3、只有部分浏览器支持的元素

    这些元素包含applet、bgsound、blink、marquee等标签。

    2.4、其他被废除的元素

    废除rb,使用ruby替代
    废除acronym使用abbr替代
    废除dir使用ul替代
    废除isindex使用form与input相结合的方式替代
    废除listing使用pre替代
    废除xmp使用code替代
    废除nextid使用guids
    废除plaintex使用“text/plian”(无格式正文)MIME类型替代

    三、新增的标签

    3.1、新增的结构标签

    在HTML4.01中div被广泛用于各种布局环境在,没有明确的定义,HTML5为了SEO将div语义化了,新增加结构标签如下:

    a)、section元素 
    表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中<section>……</section>;HTML4中<div> ……</div>。

    b)、article元素 
    表示页面中一块与上下文不相关的独立内容。比如一篇文章。

    c)、aside元素 
    表示article元素内容之外的、与article元素内容相关的辅助信息。

    d)、header元素 
    表示页面中一个内容区块或真个页面的标题。

    e)、hgroup元素 
    表示对真个页面或页面中的一个内容区块的标题进行组合。

    f)、footer元素 
    表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。

    g)、nav元素 
    表示页面中导航链接的部分。

    h)、figure元素 
    表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如: 
    <figure> 
    <figcaption>PRC</figcaption> 
    <p>The People's Republic of China was born in 1949</p> 
    </figure> 
    HTML4中常写作 
    <dl> 
    <h1>prc</h1> 
    <p>The People's Republic of China was born in 1949</p> 
    </dl>

    案例:参考作业(完成基本的语义化布局)

  • 相关阅读:
    iis管理器的程序应用池中没有Asp.NET v4.0
    Rowlock、UPDLOCK
    转SQLSERVER 会不会自动加锁
    安装IE11必备更新
    阻止表单提交刷新页面的问题
    C#分屏控件用法实例
    Flex内存泄露解决方法和内存释放优化原则
    DataSet.Clear() Method()
    短文件名漏洞修复
    vs2017创建dotnetcore web项目,并部署到centos7上
  • 原文地址:https://www.cnblogs.com/Sunny-lby/p/7828052.html
Copyright © 2011-2022 走看看