HTML5

作者: 尘中老 | 来源:发表于2016-10-10 16:29 被阅读0次

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

*HTML5语法

DOCTYPE及字符编码

<!doctype html>
<meta charset="UTF-8" />

标签结尾

在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

<input type="checkbox" checked >
<input type="checkbox" checked="checked" >
<input type="checkbox" checked="" >

省略属性值的引号

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

<input type=text >

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

*新增及删除标签

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

video元素 定义视频。例:

<video src="movie.ogg" controls="controls">video元素</video> 
<!--HTML4中写法: -->
<object type="video/ogg" data="move.ogv"> 
  <param name ="src" value="movie.ogv"> 
</object>

audio元素 定义音频。例:

<audio src ="someaudio.wav">audio元素</audio> 
<!--html4中写法: -->
<object tyle="application/ogg" data="someaudio.wav"> 
  <param name ="src" value= "someaudio.wav"> 
</object>

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

<embed src="flash.swf" /> 
<!--HTML4中代码示例-->
<object data="flash.swf" type="application/x-shockwave-flash"><object>

其他功能标签

canvas元素

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

<canvas id="myCanvas"></canvas>
<script type="text/javascript"> 
var canvas=document.getElementById('myCanvas'); 
var ctx=canvas.getContext('2d'); 
ctx.fillStyle='#FF0000'; 
ctx.fillRect(0,0,80,100); 
</script>

source标签

标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

menu标签

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

<menu> 
<li><input type="checkbox" />Red</li> 
<li><input type="checkbox" />blue</li> 
</menu>

output标签

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

<form action="form_action.asp" method="get" name="sumform"> 
<output name="sum"></output> 
</form>

mark元素

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

HTML5<mark>高亮</mark>HTML4 <span>普通</span>

progress元素

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

time元素

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

ruby元素

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

<ruby> 
  漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> 
</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

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 div{
 width: 300px;
 height: 300px;
 border: 1px solid #666;
 float: left;
 }
 </style>
</head>
<body>
 <div class="div1">
<!--1,为了使元素可拖动,把 draggable 属性设置为 true-->
 <img src="../img/wuqing.jpg" alt="" draggable="true" id="dragImg">
 </div>
 <div class="div2" ></div>
 <script>
 var img = document.querySelector("img");
 var div1 = document.querySelector(".div1");
 var div2 = document.querySelector(".div2");
//2,拖动什么ondragstart 和 setData()
 img.ondragstart = function(e){
 e.dataTransfer.setData("id",e.target.id);
 }
//3,拖到何处
 div2.ondragover=function(e){
//必须阻止对元素的默认处理方式。这要通过调用  ondragover 事件的 event.preventDefault() 方法:
 e.preventDefault();
 }
//4,进行放置
 div2.ondrop=function(e){
 var _id = e.dataTransfer.getData("id");
 var img = document.querySelector("#"+_id);
 div2.appendChild(img);
 }
 /*把图片移回来 同理
div1.ondragover=function(e){
 e.preventDefault();
 }
 div1.ondrop=function(e){
 var _id = e.dataTransfer.getData("id");
 var img = document.querySelector("#"+_id);
 div1.appendChild(img);
 }*/
 </script>
</body>
</html>

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
从外部拖曳图片到网站

<div id="box">  
</div>
    <script>
        var box = document.querySelector("#box");
        box.ondragover = function(e){
            e.preventDefault();
        }
        //box 作为目标元素 当外部文件拖入到目标元素内并松开鼠标时 box.ondrop将会被执行
        box.ondrop = function(e){
            e.preventDefault();
            var file = e.dataTransfer.files[0];
            //创建一个FileReader对象 
            var fileReader = new FileReader();
            fileReader.onload = function(e){
                // 在 fileReader.onload里 异步获取外部拖入的文件数据
                var img = new Image();

                img.src = fileReader.result;

                box.appendChild(img);
            }
            // 以base64的url格式读取数据 以供img使用
            fileReader.readAsDataURL(file);
        }
    </script>

相关文章

网友评论

      本文标题:HTML5

      本文链接:https://www.haomeiwen.com/subject/gxfvyttx.html