HTML5

HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成.

*HTML5语法

DOCTYPE及字符编码



标签结尾

在XHTML中没个标签都必需结束,在HTML5中对于一些标签不再是必要的

li dt dd p rt rp optgroup option colgroup head tbody tfoot tr td th

自结束的标签最后的 / 也不再必要

img input br hr 等

具有布尔值(boolean)的属性

对于具有boolean值的属性,例如disable和readonly等只写属性不写属性值时值为true




省略属性值的引号

属性值可以用单引号或者双引号,在属性值不包括<、>、=、'、"时可以忽略引号:如


标签名大小写都可以,但是尽量大写

*新增及删除标签

结构标签(重要) 用来搭建页面结构 不再像以前一样全是div布局
该元素用来表示网页中不同的分区版块--w3c规定section用来划分区域但不能用来布局 div布局
定义文章区域,强调完整、独立,可以更有利于搜索引擎识别网页的内容以及判断相关性
定义页面内容之外的内容,在左侧或右侧边栏
定义了页面或内容区域的头部信息,例如:放置页面的站点名称以及LOGO和导航栏等,内容区域的标题、作者、发布日期等
用于对页面或区段(section)的标题进行组合,例如:有主标题和副标题,可以使用
标签包含起来
定义了页面或内容区域的底部信息,例如:放置页面的版权信息、备案信息、关于我们、友情链接等,内容区域的作者、发布日期、版权声明、分享等
定义导航栏,例如:侧边导航栏、页内导航、分页导航、传统导航栏等
表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。
表单标签 具有验证和其他好玩的功能
email 必须输入email
url 必须输入url地址
number 必须输入数值
range 必须输入一定范围内数值
Date Pickers(日期选择器) 拥有多个可供选取日期和时间的新输入类型:
date 选取日、月、年
month 选取月、年
week 选取周和年
time 选取时间(小时和分钟)
datetime 选取时间、日、月、年(UTC 时间)
datetime-local 选取时间、日、月、年(本地时间)
search 用于搜索域,域显示为常规的文本域。
color 提供了一个颜色选取器来选取颜色。
媒体标签

video元素 定义视频。例:

 

 
   

audio元素 定义音频。例:

 

 
   

embed元素
用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例:

 


 
 

其他功能标签

canvas元素

定义图形,比如图表和其他图像。 元素只是图形容器(画布),必须使用脚本来绘制图形。



source标签

标签为媒介元素(比如

menu标签

定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别,menu专门用于表单控件。

 
  • Red
  • blue
  • output标签

    定义不同类型的输出,比如脚本的输出。

    mark元素

    主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。

    HTML5高亮HTML4 普通
    

    progress元素

    表示运行中的进程,可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中……、请稍后等。

    time元素

    表示日期或时间,也可以两者同时。

    ruby元素

    定义 ruby 注释(中文注音或字符)。
    以及 标签一同使用。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

    (ㄏㄢˋ) 
    
    

    rt元素

    定义字符(中文注音或字符)的解释或发音。

    rp元素

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

    wbr元素

    表示软换行。与br元素的区别:br元素表示此处必须换行;wbr表示浏览器窗口或父级元素足弓宽时(没必要换行时),不换行,而宽度不够时主动在此处换行。

    删除标签

    1.可以使用css代替的标签
    basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的,HTML5中提倡把画面展示性功能放在css中统一编辑。
    2.不再使用frame
    frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。
    3.只有个别浏览器支持的标签
    applet、bgsound、blink、marquee等标签。
    4.其他不常用的标签
    废除rb,使用ruby替代。
    废除acronym使用abbr替代。
    废除dir使用ul替代。

    *新增的属性

    表单相关的属性

    表单属性 属性说明
    placeholder 显示提示文字
    autocomplete 自动完成功能on or off
    autofocus 自动获取焦点
    list特性和datalist 绑定input和datalist
    required 提交之前必须填写
    pattern 规定输入内容的验证表正则达式
    form 规定input元素属于哪个form表单
    disabled 禁用一个input属性
    readonly 规定输入字段为只读
    multiple 允许file选择多个文件

    HTML5拖放API

    单词翻译:drag:拖曳 drop落下

    drag事件 事件说明
    dragstart 网页元素开始拖动时触发。
    drag 被拖动的元素在拖动过程中持续触发。
    dragenter 被拖动的元素进入目标元素时触发,应在目标元素监听该事件。
    dragleave 被拖动的元素离开目标元素时触发,应在目标元素监听该事件。
    dragover 被拖动元素停留在目标元素之中时持续触发,应在目标元素监听该事件。
    drop 被拖动元素或从文件系统选中的文件,拖放落下时触发。
    drogend 网页元素拖动结束时触发

    demo1

    
    
    
     
     Document
     
    
    
     

    HTML5文件API

    1. FileList对象
    2. Blob对象
    3. File对象
    4. FileReader接口:
      (1)readAsBinaryString(Blob blob);
      (2) readAsText(Blob blob, optional DOMString encoding);
      (3)readAsDataURL(Blob blob);

    demo2
    从外部拖曳图片到网站

    你可能感兴趣的:(HTML5)