HTML - 技术教程文章

用html5中的canvas写的时钟【代码】【图】

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>时钟</title> <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">var cxs;var canvas;$(document).ready(function(){canvas=document.getElementById("canvas");cxs=canvas.ge...

html5拖拽总结

拖拽(Drag 和 drop)是 HTML5 标准的组成部分。拖拽是一种常见的特性,即抓取对象以后拖到另一个位置。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。DataTransfer 对象  退拽对象用来传递的媒介,使用一般为Event.dataTransfer。被拖元素: ondragstart(开始拖拽)    function drag(ev) {      ev.dataTransfer.setData("Text",ev.target.id);    }ondrag(拖拽中) ondragend(拖拽结...

Html5新增特性【代码】

Html5新增特性新增标记<video src="" width="" ...></video>插入视频 <audio src="" width="" ...></audio>插入音频 *<canvas id="" width="" ...></canvas>画布标记,用来绘制图形 <command type=""></command>定义命令按钮 <datalist id=""></datalist>定义输入框的附带下拉列表以下两个属于状态交互元素,value属性用于设置元素展示的实际数值,默认为0,min和max属性是元素展示的最小和最大值,low和hight属性是元素展示的最低...

HTML5 2D平台游戏开发——角色动作篇之蓄力技【代码】【图】

在很多动作游戏中,玩家操控的角色可以施放出比普通攻击更强力的蓄力技,一般操作为按住攻击键一段时间然后松开,具体效果像下面这张图:要实现这个操作首先要记录下按键被按住的时间,初始是0:this.sabreChargeTime = 0;接下来是能够施放技能所需要的时间,超过这个时间后松开按键,即可施放出技能,否则无效:this.MAX_SABRE_CHARGE_TIME = 150;代码结构如下:if (key[74]) {//攻击this.updateSabreCharge(); //蓄力 } else {t...

前端小白的学习之路--HTML学习【代码】

HTML的补充学习1. meta与base<meta http-equiv="refresh" content="2" > 2秒刷新一次 <base href="https://www.baidu.com" target="_blank"> 设置默认跳转地址以及跳转方式 <link rel="icon" sizes="any" mask href="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"> 设置title的图标2. img<img src="https://www.runoob.com/try/demo_source/planets.gif" alt="行星图" title="行星图" usemap="#p...

解决html表单提交后页面自动刷新的问题【代码】

今天在做How2J上的一个js小练习时,发现在使用<button>按钮提交表单后,使用js改变的页面元素只是出现了一下后立即消失了。通过仔细研究才了解到:在表单的提交按钮如果没有type属性,在点击提交按钮后页面会自动刷新,导致使用js改变的页面元素被刷新掉了。解决方法:使用<input type="button"></inpu>代替<button>按钮后解决。错误代码:<form><input type="text" id="input1"/><div id="d1" style="color: greenyellow"></div><...

html5+CSS3实现的炫酷超链接特效

今天为大家介绍一个非常炫酷的超链接特效。在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果。这些超链接特性,大都是借助伪元素、svg、HTML5动画来实现的。效果都很漂亮,不信看下面。用你的鼠标悬停在这些链接上,你就能体验和传统链接完全不一样的感觉。当然最重要的一点:你需要使用现代浏览器才能有更好的体验效果,比如谷歌浏览器或火狐浏览器。演示效果和下载请看:http://yusi123.com/3236.html1. [代码]节选其中...

HtmlUnit爬取Ajax动态生成的页面内容【代码】

HtmlUnit说白了就是一个浏览器,这个浏览器是用Java写的无界面的浏览器,正因为其没有界面,因此执行的速度还是可以滴。HtmlUnit提供了一系列的API,这些API可以干的功能比较多,如表单的填充,表单的提交,模仿点击链接,由于内置了Rhinojs引擎,因此可以执行JavaScript  之前用的时候一直抓取不了Ajax动态生成table及其数据,用Firefox和IE浏览器查看网页源代码也看不到table和数据,但是用Firefox查看元素能看到信息  调研了H...

html空格代码是什么?html中空格怎么打

html空格代码是什么?html中空格怎么打?对于刚刚入门的新手来说可能比较陌生,下面我们来总结一下html空格代码。 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)一:html空格代码是什么说到html空格代码很多人都会想到&nbsp,其实这也是表示html空格的一种方法,当我们输入十个&nbsp就表示有十个空格,然而在现实中,也有很多人认为html空格就是在html中输入几个空格键,如果是单纯的...

在aspx页面引用html页的写法

在网站类型的程序中,许多页面的底部或头部内容都是一样的,这样的话我们可以直接建立一个html页面将头部或底部的代码放到html页中,其他用到的页面直接引用html页即可 引用html页方式如下: 复制代码 代码如下:<!--#include file="~/Control/footer.htm" --> 原文:http://www.jb51.net/article/47319.htm

HTML 内部样式表之标签选择器/类选择器/ID选择器

标签选择器:<style>  h1{    width: 960px;    height: 30px;    backgroung-color: cyan;  }<style/> 类选择器:<style> h1{    width: 960px;    height: 30px;    margin: 0 auto;  }  .a {background-color: yellow;}  .b {background-color: blue;}  .c {background-color: red;}<style/> ID选择器:#header{}原文:https://www.cnblogs.com/wang-ovo/p/15232393.html

DHTML 动态HTML 包含HTML CSS JavaScript dom

HTML 负责提供标签,对数据进行标记封装CSS 负责提供样式属性,对数据进行样式定义DOM 负责将标记文档和标签等内容解析成对象,并在 对象中定义属性和行为,就可以指挥对象做事情。JAVASCRIPT 负责网页页面的行为(该怎么动),动态效果的体现,需要程序设计语言来完成。 基本步骤1、定义页面机构,HTML;2、定义页面样式:CSS;3、动态效果,对象已经被DOM解析驻留在内存;3.1、明确事件源;3.2、明确事件动作;3.3、定义出来方式...

HTML基础_01【图】

鉴于一个朋友说想学习前端知识,自己也回头翻了翻自己从小白一路走过来的这些记忆(虽然现在也很菜),决定整理一下一些东西供大家一起学习讨论。一、 WEB标准的概念及组成  首先,WEB标准不是某一个标准,而是一系列标准的集合。 这些标准大部分由万维网联盟(外语缩写:W3C)起草和发布,也有一些是其他标准组织制订的标准, 比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。  网页主要由三部分组...

16. javacript高级程序设计-HTML5脚本编程

1. HTML5脚本编程l 跨文档消息传递API能够让我们在不降低同源策略安全性的前提下,在来至不同的域的文档间传递消息l 原生拖放功能可以方便的指定某个元素是否可以拖动,并在放置时做出响应。还可以创建自定义的可拖放元素及放置目标l 新的媒体元素<audio>和<video>可以拥有自己的与视频和音频交互的APIl 历史状态管理让我们不必卸载当前页面即可以修改浏览器的历史状态栈。原文:http://www.cnblogs.com/SLchuck/p/4508475.html

HTML5中video标签与canvas绘图的使用【代码】【图】

video标签的使用  video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档):domo01<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo01</title> </head> <body><video src="madashuai.mp4" loop="loop" autoplay="autoplay" controls="controls" width="800" height="500"></video> </body> </html>src 即视频的路径loop 即是否循环,即播放结束之后继续播放autoplay 即准备就绪之后就...

简单的计时器 (倒计时)--html Demo【代码】【图】

<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"/><title>HTML5 Timer</title><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script></head><body><div style="margin: 20px auto; text-align: center;"><div style="padding: 50px;"><input type="button" id="btnstart" value="start"/></div><canvas id="canvas" width="200" height="200" style="border: 1...

html5中 背景自适应【代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>css实现背景图片自适应大小</title></head><body><html><style>body{margin:0px;padding: 0px;width: 100%;height: 100%;}#bg_bg{width: 100%;height: 100%;border :...

[04]HTML基础之块级标签【代码】

1. <p>标签表示段落,多个空白符会合并成一个;<pre>标签表示预文本段落,所有空白符都不合并。//临江仙诗句 <p>滚滚长江东逝水,浪花淘尽英雄,是非成败转头空。 青山依旧在,几度夕阳红。</p> <pre>白发渔樵江渚上,惯看秋月春风,一壶浊酒喜相逢。 古今多少事,都付笑谈中。</pre> 2. <ul>标签表示无序列表,表现为每个子项前都有圆点;<ol>标签表示有序列表,表现为每个子项前都有序号;<li>标签表示列表的子项目。//无序列表 ...

面试常考各类排序算法总结.(c#) 原文来自https://www.cnblogs.com/geduocoding/p/7097870.html【代码】【图】

前言面试以及考试过程中必会出现一道排序算法面试题,为了加深对排序算法的理解,在此我对各种排序算法做个总结归纳。1、冒泡排序算法(BubbleSort)1.1 算法描述(1)比较相邻的元素。如果第一个比第二个大,就交换他们两个。(2)对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。(3)针对所有的元素重复以上的步骤,除了最后一个。(4)持续每次对越来越少的元素重复上面的步...

HTML5之window.postMessage API【代码】

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多:document.domain+iframe的设置,应用于主域相同而子域不同;利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要在同一客户端就行,跨应用程序, 可以跨域。window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window....

MVC Html.AntiForgeryToken() 防止CSRF攻击【代码】【图】

(一)MVC Html.AntiForgeryToken() 防止CSRF攻击MVC中的Html.AntiForgeryToken()是用来防止跨站请求伪造(CSRF:Cross-site request forgery)攻击的一个措施,它跟XSS(XSS又叫CSS:Cross-Site-Script),攻击不同,XSS一般是利用站内信任的用户在网站内插入恶意的脚本代码进行攻击,而CSRF则是伪造成受信任用户对网站进行攻击。 举个简单例子,譬如整个系统的公告在网站首页显示,而这个公告是从后台提交的,我用最简单的写法:网站后台(...

html网页源代码是什么 如何查看网页源代码经验篇【图】

网页源代码目录网页源代码是什么查看网页源代码其它浏览器查看源代码方法查看源代码总结一、什么是网页源代码? - TOP通俗了解,通过html语法规则让图片、文字等内容,在浏览器显示出来的代码我们称之为网页源代码。 网页源代码与实际IE浏览器显示对比图源代码(源文件)是指网页的html代码,这里可以将CSS代码也称为CSS源代码。二、网页源代码如何查看或源文件怎么查看 - TOP第一种:打开一个网页后点击鼠标的 右键就会有"...

基于 HTML5 Canvas 的 3D 热力云图效果【转载】【代码】【图】

前言 数据蕴藏价值,但数据的价值需要用 IT 技术去发现、探索,可视化可以帮助人更好的去分析数据,信息的质量很大程度上依赖于其呈现方式。在数据分析上,热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。最近刚好项目中需要用到3D 热力图的效果展示。网上搜了相关资料,发现大多数是2D 效果或者伪3D 的,而 3D 粒子效果对于性能上的体验不是很好,于是取巧写了个3D 热力图的效果 。Demo : http://www.hightopo.com/...

Mvc5 Html.EditFor

如果对缺省的样子不满意, 可以有模板,寻寻觅觅,摸索出在Views\Shared\EditorTemplates下创建String.cshtml必须的是EditorTemplates文件夹 @{ var display = ViewData.ModelMetadata.DisplayName ?? ViewData.ModelMetadata.PropertyName;}<div class="form-group"> <label class="control-label col-md-2" for="Name">@display</label> <div class="col-md-10"> <input id="@ViewData.ModelMetadata.PropertyNa...

[ jquery 文档处理 replaceWith(content|fn) replaceAll(content) ] 此方法用于把所有匹配的元素替换成指定的HTML或DOM元素【代码】

此方法用于把所有匹配的元素替换成指定的HTML或DOM元素  content(String, Element, jQuery, Function)    用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话,函数返回值必须是HTML字符串。  fn    返回THML字符串,用来替换的内容。实例:<html lang=‘zh-cn‘> <head> <title>Insert you title</title> <meta http-equiv=‘description‘ content=‘this is my page‘> <meta http-equiv=‘keywords‘ conte...

html5晋级之路-响应式布局基本实现

1.css中的Media Query(媒介查询): 设备宽高: device-width,device-height 渲染窗口的宽和高:width,height 设备手持方向:orientation 设备的分辨率:resolution2.使用方法: 外联 内嵌样式<!doctype html><html><head><meta charset="UTF-8"><title>js事件测试</title><link rel="stylesheet" href="js.css" type="text/css" media="only screen and (max-width:640px)"></head> <style> @media sc...

关于 HTML5 你需要注意的事项

HTML5的到来将第五代网络语言带入了多媒体的世界。尽管HTML5的启动并没有多轰轰烈烈,但是在过去6个月还是有不少的软件开发者开始应用HTML5。然而,在选择HTML5时,有一些基本注意事项大家还是需要了解的。  它新并不表示它安全  网络应用开发工程师们在学习新技术的同时需要时刻记住网络安全。HTML5所购建的网页和其他语言编写的网页一样容易泄露一些敏感数据。欧洲网 络信息安全机构(European Network and Information Secur...

Adobe推出HTML5动画设计工具Edge

HTML5和Flash,是敌对?是共存? 尽管Flash现在依然牢牢占据着网络动画的大半江山,但这种状况终将会被改变。 那么,Edge的推出是否意味着Adobe将放弃和屈服于Flash与HTML5之争呢?Adobe似乎不认同这种说法。虽然这场无硝烟战争成为了技术传教士最好的标题,但“Flash vs. HTML5”的难题在专业世界里爆发时,它并不是一个非此即彼的问题。对于现在的网页设计师和网页程序员而言,两种技术都会被选用的。 Adobe用Edge支持HTML5 “HT...

CSS3+CSS+HTML实现网页【代码】【图】

效果图: 代码实现:样式部分style.css:*{margin: 0;padding: 0; } body{background-color: #673929;font-size: 16px;font-family: "微软雅黑" } #conters{margin: 0 auto;width: 900px; }#header{height: 220px;margin-bottom: 5px;position: relative; } #icon-list{position: absolute;top:170px;right: 30px;width: 130px;height: 30px;/*font-size: 0;*/ }#nav{height: 30px;background: #09c;margin-bottom: 5px;font:18px...

HTML【代码】【图】

为什么要学习HTML,学习HTML可以用来做什么?<详情猛戳>通过链接了解对html的一些简单的认识,那么先简单概述一下HTML概念HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面HTML文档通过web浏览器来解析,显示所写内容HTML文...