正文 

当前位置： 首页 > java > java教程

html5+css3入门学习——html5

YauCheun      2022-02-17     689

关键词：

什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果。

编者注：W3C 指 World Wide Web Consortium，万维网联盟。

编者注：WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

1.新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

2.减少对外部插件的需求（比如 Flash）

3.更优秀的错误处理

4.更多取代脚本的标记

5.HTML5 应该独立于设备

6.开发进程应对公众透明

新特性

HTML5 中的一些有趣的新特性：

 

1.用于绘画的 canvas 元素

2.用于媒介回放的 video 和 audio 元素

3.对本地离线存储的更好的支持

4.新的特殊内容元素，比如 article、footer、header、nav、section

5.新的表单控件，比如 calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 

</body> 
</html>

HTML 5 拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

下面的例子是一个简单的拖放实例：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)。

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素（目标元素）中

 

--------------暂时写到这里

 

html5+css3-全面详解（学习总结---从入门到深化）

目录​​CSS简介​​​​ CSS概念​​​​为什么需要CSS​​​​CSS和HTML之间的关系​​​​ 语法​​​​学习效果反馈​​​​ CSS的引入方式​​​​ 内联样式（行内样式）​​​​内部样式​​​​外部样... 查看详情

html5&css3编程入门经典((美)roblarsen)pdf扫描版

...两种核心编程语言，拉尔森编著的这本《HTML5&CSS3编程入门经典》详细介绍了这两种语言。《HTML5&CSS3编程入门经典》提供了对于最佳实践及技术的手把手指导。作为一本实用参考，《HTML5&CSS3编程入门经典》深入阐述了为... 查看详情

html5+css3从入门到精通书籍配套源码

HTML5+CSS3从入门到精通配套视频讲解227节光盘源码云盘分享：链接：https://pan.baidu.com/s/1nvG5FZz 查看详情

html5+css3从入门到精通书籍配套源码

HTML5+CSS3从入门到精通配套视频讲解227节光盘源码云盘分享：链接：https://pan.baidu.com/s/1nvG5FZz 查看详情

千峰html5+css3学习笔记(代码片段)

千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面1.前言2.HTML3.CSS3.1选择器3.2CSS属性4.盒子模型4.1溢出属性4.2元素显示类型4.3定位4.4精灵图4.5宽高自适应4.6窗口自适应5.表单进阶6.HTML5新特性7.CSS3基础7.1CSS3选择器7.2... 查看详情

html5与css3权威指南之css3学习记录

title:HTML5与CSS3权威指南之CSS3学习记录toc:truedate:2018-10-1400:06:09学习资料——《HTML5与CSS3权威指南》（第3版）官方网站：华章图书书中所有代码下载链接：链接：http://pan.baidu.com/s/1c0oGMn2密码：f7zt选择器属性选择器[att=val]选择器—... 查看详情

2000g+it自学视频教程资料—去学习吧同志们

www.zixue365.netCSSHTML飞速上手的跨平台App开发React.js入门基础与案例开发javascript--岳英俊（压缩包）李炎恢HTML5第一季视频教程[AVI版]HTML5语言工程师html5+css3Web前端开发之jQuery入门课程bootstrap快速入门NodeJS入门到精通课程Backbone入门... 查看详情

html5css3学习总结

html多媒体   video与audio两个多媒体标签基本上使用方法一样，没有什么太大的区别。   <videosrc="statics/.mp4"      muted 静音      autopla 查看详情

html5css3学习总结canvas绘图

canvasHTML5重中之重canvas是HTML5中的重点；今天简单的学习了一下，总结一下canvas的概念；canvas是要有面向对象的思维；各个标签就像我们画水彩画一样，需要注意标签使用的顺序canvas就是一个画布；可以画线，图形，填充等。操... 查看详情

html5+css3前端入门教程---从0开始通过一个商城实例手把手教你学习pc端和移动端页面开发第4章css文本样式(代码片段)

本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源字体样式属性名 含义 举例font-family 设置字体类型 font-family:"隶书";font-size 设置字体大小 font-size:12px... 查看详情

附全部代码+图片使用html5+css3绘制html5的logo——web前端系列学习笔记(代码片段)

文章目录页面展示技术要点代码实现html代码CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo，页面效果如下所示。技术要点HTML5新特性HTML5基本语法CSS3新特性在HTML中引入样式代码实现html代码<!DOCTYPEhtml&g... 查看详情

学html5需要啥基础，怎么入门？

学HTML5需要什么基础，怎么入门？我身边有人在看扣丁学堂的HTML5视频教程学习，靠谱不？　　随着移动互联网的发展，web前端逐渐受到企业的重视，前端开发人员的薪资也水涨船高，越来越多的人看好前端行业的发展，想要转... 查看详情

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程(代码片段)

一、基础班学习路线三、CSS3基础1.Emmet语法emmet语法生成html标签<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content 查看详情

html5+css3学习笔记

前段时间一直在学Python，不仅仅只是学Python的基础语法，还有科学计算，主要是Numpy和Matplotlib，爬虫，暂时还没有用到Scrapy那么高端的库，还停留在Python自带的urrllib模块，还有BeautifulSoup解析器，我发现，Web的问题，始终绕不过... 查看详情

java学习计划

...、ejb、SSH等着手，但也得学习数据库相关知识，从sqlserver入门吧，这个简单。 参考技术BJavaEE的学习可以分为以下步骤：0Java基础1HTML2数据库（如Oracle）3JavaScript4JSP5servlet和JavaBean6框架（如SSH2） 参考技术CServlet->jdbc->Struts->H... 查看详情

千峰html5+css3学习笔记(代码片段)

千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面1.前言2.HTML3.CSS3.1选择器3.2CSS属性4.盒子模型4.1溢出属性4.2元素显示类型4.3定位4.4精灵图4.5宽高自适应4.6窗口自适应5.表单进阶6.HTML5新特性7.CSS3基础7.1CSS3选择器7.2... 查看详情

html5入门指南

1、HTML5到底是什么？HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及H... 查看详情

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程-css3(代码片段)

一、基础班学习路线三、CSS3基础1.CSS的三大特性CSS三大特性之层叠性CSS三大特性之继承性行高的继承CSS三大特性之优先级CSS权重的叠加十个在最后累加会变成0，0，0，10；权重虽然会叠加，但是永远不会有进位... 查看详情