zoukankan      html  css  js  c++  java
  • 【个人学习笔记】走近H5

    一、HTML5概述

    1.HTML5新特性

    兼容性(ie9+)、合理性、效率、安全性、分离、简化、通用性、无插件

    2.HTML5构成

    主要包括下面这些功能:Canvas(2D和3D)、Channel消息传送、Cross-document消息传送、Geolocation、MathML、Microdata、Server-Sent Events、Scalable Vector Graphics(SVG)、WEbSocket API及协议、Web Origin Concept、Web Storage、Web SQL database、Web Workers 、XMLHTTPRequest Level 2

    二、编写第一个HTML5页面

    1.检测浏览器是否支持HTML5

    <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
        #myCanvas{
          width:200px;
          height: 200px;
          background: red;
        }
      </style>
    </head>
    <body>
     <canvans id="myCanvas">该浏览器不支持HTML5的画布标记</canvas>
    </body>
    </html>

    将该代码放在不支持HTML5的浏览器(ie8)中就会显示改行文字,而不会显示出样式

    2.使用HTML5编写简单的web页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>第一个HTML5页面</title>  
    </head>
    <body>
     <p>hello world!</p>
    </body>
    </html>

    效果如下:

    相比HTML4,根据HTML5设计化繁为简的准则,文档类型和字符说明都进行了简化。DOCTYPE声明是HTML文件中必不可少的,位于文件第一行

    <!DOCTYPE html>
    <html lang="en">

    三、HTML5元素

    1.新增结构元素(即新增的语义化标签元素)

    header、footer、section、nav、aside、article

    2.新增的功能元素

    hgroup:用于对整个页面或页面中一个内容区块的标题进行组合

    figure:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元

    videoaudioembed

    mark:在视觉上向用户呈现那些需要突出显示或高亮显示的文字。(比如搜索结果中的关键字)

    timecanvasoutput:表示不同类型的输出,比如脚本的输出

    source:为媒体元素(比如video)定义媒体资源

    menu:表示菜单列表,当需要列出表单控件时使用该标签

    ruby:表示ruby注释

    rt:表示字符的解释或发音

    rp:在ruby注释中使用,以定义不支持ruby元素的浏览器所显示内容

    wbr:表示软换行,与br的区别是,br白哦是此处必须换行,而wbr是浏览器窗口或父级元素足够宽时不进行换行,当宽度不够时,自动换行

    command:表示命令按钮,如单选按钮,复选框或按钮。

    details:表示用户要求得到并且可以得到的细节信息,可以与summary元素配合使用。summary元素提供标题或图例

    datalist:表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表

    datagrid:表示可选数据的列表,以树形列表的形式显示

    Keygen:表示生成密钥

    progress:表示运行中的进程,可以使用progress来显示JavaScript中耗费时间的函数进程

    emailurlnumberrangeData Pickers

    3.HTML5中被废除的元素

    能使用css代替的元素:basefontbigcenterfontsstrikettu

    不在使用frame框架,支持iframe

    只有部分浏览器支持的元素:appletbgsoundblinkmarquee

  • 相关阅读:
    vs2015安装出问题
    Cookie的Domain属性
    IE6 PNG不透明问题 (只解决img标签的图片)
    C#aspx页面前台使用<%=%>无法取到后台的值
    题解【洛谷P2003】平板
    题解【洛谷P2070】刷墙
    题解【洛谷P1083】[NOIP2012]借教室
    CSP-J/S 2019 游记
    题解【洛谷P1967】[NOIP2013]货车运输
    “美登杯”上海市高校大学生程序设计邀请赛 (华东理工大学) E 小花梨的数组 线段树
  • 原文地址:https://www.cnblogs.com/xmxxn/p/7978239.html
Copyright © 2011-2022 走看看