HTML - 技术教程文章
html中块元素的垂直水平居中。及兼容性
块在块中垂直居中(position:absolute; top:50%; margin-top:-二分之一高度)块在块中水平居中(子元素设置margin:0 auto 或auto)用方法1将垂直水平同时居中 #box { width: 100px; height: 80px; background-color: gray; position:absolute; top:50%; left:50%; margin-top:-40px;<!--向上高度一半--> margin-left:-50px;<!--向左宽度一半-->}原文：http://www.cnblogs.com/sweetXiaoma/p/5860439.html
HTML5游戏探讨，怎样让微信游戏仅仅能执行在微信中【代码】
大致文件布局例如以下。一个html文件。一个loading.js，在loading.js中载入其它须要的js和css。 至于详细的速度的话。建议cdn或者一个域中最多载入6个js文件。在loading.js中载入js和css之前，检測是不是微信游览器，是的话，go。不是则跳转到提示。function isWeiXin(){var ua = window.navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i) == ‘micromessenger‘){return true;}else{return false;} } if(!isWeiX...
玩转HTML5+跨平台开发[6] H5多媒体标签【代码】【图】
汇总1. video标签2. audio标签3. summary标签和details标签-详情和概要标签4. marquee标签-跑马灯效果5. HTML中被废弃的标签6. HTML实体video标签作用: 播放视频格式1:<videosrc=""></video>video标签的属性src: 用于告诉video标签需要播放的视频地址；autoplay: 用于告诉video标签是否需要自动播放视频；controls: 用于告诉video标签是否需要显示控制条；poster: 用于告诉video标签视频没有播放之前显示的占位图片；loop: 一般用于...
mybatis+struts2+html(jstl)+css【图】
从10月8号到今天23号，来到工作已经半个月了，这是我人生中真正意义上的一次步入社会，用自己20年的坚持和努力取得的人生第一步，说实话，感觉自己真的是个lucky dog，好像是在眷顾我，所有的事情都是那么顺利，让我没有理由不珍惜现在的所有，谢谢老师，一次次的满足我的请求，这半月我收货到的不管是从为人处世，团队管理，还是技术方面都很多，所以每天晚上睡觉都会一躺就着，因为一睁开眼就会忙碌一天，不过真的真的很充实，下...
Html 语法学习笔记二
1、图像标签（<img>）和源属性（Src） 在 HTML 中，图像由 <img> 标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。 要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。 定义图像的语法是：<img src="url" /> URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 h...
HTML5将图片转化成字符画【代码】
HTML5将图片转化成字符画 字符画大家一定非常熟悉了，那么如何把一张现有的图片转成字符画呢？HTML5让这个可能变成了现实，通过canvas，可以很轻松实现这个功能。其实原理很简单：扫描图片相应位置的像素点，再计算出其灰度值，根据灰度值的大小，分别用字符#*+“和空格来填充。下面是源码：HTML：一个canvas元素#cv，一个字符画容器#txt 。1 <canvas id="cv">fuck ie</canvas> 2 <div id="txt"></div>css：由于每一行用p来填充...
HTML CSS 特殊字符表
HTML有许多特殊的字符，您对此有多少了解？平时在WEB制作中，您又有用到多少？或者说你在平时使用之时，是否也会碰到，有许多特殊字符要如何打印出来？比如说“笑脸”，比如说“版权号”。要是你用时忘记了这些特殊字符，不要紧，请记住今天这个地址，你就随时可以查到这些特殊字符的表示方法。简单的介绍一下其使用方法：1、这些字符属于unicode字符集，你的文档需要声明为”utf-8“2、列表符号后面有两列编号，第一列编号用于HTM...
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。 下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。 HTML代...
总结HTML，CSS【代码】
HTML部分：一、超链接部分：<a herf>是超文本链接引用，属性为目标文件。 1、热区链接 <img src="图片地址" usemap="#映射图片名称"> <map name=“映射图片名称”> <area shap="热区形状" coords="热区坐标" href="URL"> </map> 2、 图片链接 <a href=" "> <img src=" " border=" " alt=" ";> // (表示规定图片的替代文本，提...
了解HTML 盒模型【图】
HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对这个盒子进行设置, 以达到自己布局的目的, 我这里绘制了个简图, 只写了内填充和外边距, 因为我感觉其他的属性更好用文字和代码理解. 同样的在学习这个的过程中, 要勤于代码试验, 测试, 否则是非常不便于掌握的知识.盒子模型 首先盒子, 什...
浅淡HTML5移动Web开发
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web（我们选择了h5）开发。但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案。 1. 响应式web设计说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在...
WEB前段（HTML+JS），后端(MYSQL+PHP)开发基础【图】
一、HTMLHTML：超文本标记语言，可以加载JS/CSS/图片/链接等非文字的内容一切的网页开发技术都需要建立在HTML的基础之上 HTML的结构和语法 HTML元素注释： <!-- 这里是注释内容 -->图像：<img src="URL">连接：<a href="URL"> </a>表单：<form><input></form>内联框架：<iframe src="URL"></iframe> HTML DOM树结构 为什么要将HTML文档转换为DOM树结构？ JavaScript（JS）在HTML的<script></script>中运行JS如何获取一个HTM...
jQuery设置和获取HTML、文本和值【代码】
jQuery设置和获取HTML、文本和值按 Ctrl+C 复制代码 <script type="text/javascript">//<![CDATA[$(function(){//获取<p>元素的HTML代码$("input:eq(0)").click(function(){alert( $("p").html() );});//获取<p>元素的文本$("input:eq(1)").click(function(){alert( $("p").text() );});//设置<p>元素的HTML代码$("input:eq(2)").click(function(){$("p").html("<strong>你最喜欢的水果是?</strong>");}); //设置<p>元素的文本...
HTML 学习笔记 JavaScript（事件）【代码】【图】
事件流：事件流: 描述的是从页面中接收事件的顺序 也可以理解为事件在页面中传播的顺序；事件: 就是用户或浏览器自身执行的某种动作 例如 click(点击) load(加载) mouseover(鼠标悬停)事件处理程序: 响应某个事件的函数就叫事件处理程序(或事件侦听器)下面所示例子注册事件的方式均使用DOM2级事件定义的事件处理程序进行注册。DOM2级事件定义可两个方法，用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventLis...
UrlEncode 和 HtmlEncode【代码】【图】
UrlEncode是将指定的字符串按URL编码规则，包括转义字符进行编码。1void Main() 2{ 3string rawUrl = "http://www.demo.com?key=测试"; 4string urlEncode = System.Web.HttpUtility.UrlEncode(rawUrl); 5 urlEncode.Dump(); 6 }View Code HtmlEncode是将html源文件中不容许出现的字符进行编码，通常是编码以下字符："<"、">"、"&"、"""、"‘"等。1void Main() 2{ 3string rawTxt = "会被转义的字符：< > & \" ‘"; 4string htm...
html标签【代码】
一、meta标签的其他属性<!doctype html> <html><head><meta charset="utf-8" /><title></title><!-- 使用meta标签还可以用来设置网页的关键字--><meta name="keywords" content="HTML5,JavaScript,前端,Java" /><!-- 还可以用来指定网页的描述搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名--><meta name="description" content="发布h5、js等前端相关的信息" /><!-- 使用met...
【HTML+CSS】日历备忘录（静态）【代码】
需求：实现日历备忘录（静态）<!DOCTYPE html><html><head><meta charset="utf-8"><title>日历备忘录</title><style type="text/css">table {width: 900px;table-layout: fixed;border-collapse: collapse;}th,td {border: 1px dotted #999;padding: 5px;}.head {height: 30px;background-color: #DDD;text-align: center;}.body {height: 140px;vertical-align: baseline;}caption {text-align: left;}.special {background-color...
HTML5新特性小结
HTML5 新特性新的DocType: <!DOCTYPE html> 不需要声明文档类型；脚本和链接不需要type属性，如 lingk, script;语义化标签，如：header, footer, hgroup, mark, figure, small, article,属性及校验,新的属性，如：placeholder, required, autofocus, pattern, autocomplete, data, contenteditable自动校验，如： required自动校验为空，pattern正则匹配， min,max最值精细化，如：text分类type=[numner\range\date\color\search\e...
html datetime-local类型value赋值【代码】
<input type="datetime-local" name="UsageExpirationTime"class="layui-input UsageExpirationTime" placeholder="请输入使用到期时间" lay-verify="usageExpirationTime" autocomplete="off">html中赋值：value="2019-09-27T09:10"js中赋值：table.on(‘tool(managerList)‘, function (obj) {var layEvent = obj.event,data = obj.data;if (layEvent === ‘edit‘) { //编辑 addManager(data);} elseif (layEvent ==...
关于php，mysql，html的数字分页和文本分页的两种分页样式供大家参考【图】
请勿盗版，转载请加上出处http://blog.csdn.net/yanlintao1请勿盗版，转载请加上出处http://blog.csdn.net/yanlintao1首先进行样式展示希望对大家有所帮助，也希望大家给出意见和建议：第一种：数字分页第二种：为文本分页php分页函数（我写在下面引入的common.inc.php公共文件中）：/**_page()分页的相关参数*@param int $_pagesize 每页存有几个好友*@param $_sql 获取所有字段* */ function _page($_sql,$_size){global $_pagen...
eclipse导入maven时，html页面引入js的路径出现红色波浪线【图】
用eclipse导入一个springboot项目时，html页面引入js以及css时出现如下图所示情况，html页面用了 thymeleaf模板引擎。另外js文件与css文件路径也是正确无误的。 原来其实很简单就可以解决：eclipse：Window—>Preferences—>Validation—>Web Resources Validator将Web Resources Validator勾选掉，然后Apply就可以了。 原文：https://www.cnblogs.com/lkwtt/p/10779360.html
php过滤html字符【代码】
$str = preg_replace( "@<script(.*?)</script>@is", "", $str ); $str = preg_replace( "@<iframe(.*?)</iframe>@is", "", $str ); $str = preg_replace( "@<style(.*?)</style>@is", "", $str ); $str = preg_replace( "@<(.*?)>@is", "", $str );原文：http://my.oschina.net/xinson/blog/322647
Canvas HTML5【代码】【图】
Canvas Examples一个canvas是在html页面上规则的区域。默认的，一个canvas没有边框和内容<canvas id="myCanvas" width="200" height="100"></canvas>基本步骤<script>var canvas = document.getElementById("myCanvas");//发现canvas元素var ctx = canvas.getContext("2d");//创建一个drawing对象 //在画布上画画ctx.fillStyle ="#FF0000"; ctx.fillRect(0,0,150,75); </script>HTML Canvas CoordinatesCanvas CoordinatesThe HTML...
把DATATABLE,DS中的内容用HTML的方式显示【图】
前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制,第二个,暂时不能动态列,好了,看代码吧:第一个: 在很多场合下有用比如要发送一封Email给别人，这个Email里面的内容自然只能用HTML来写，如果涉及到数据显示的话，用这个会很方便using System;using System.Data;using System.Configurati...
html的常用标签和属性【图】
今天在云和学院学习了html.html:超文本标识（标记）语言页面格式： 标签名 标签属性页面内容： 文本 媒体?HTML基本结构 <html></html>?段落标签 <p></p>?空格标签  ?标题标签 <h#>: #=1~6?图片标签 <img src=“…” />?注释标签 <!-- -->?HTML水平线 <hr />?HTML拆行 <br />?HTML中的特殊符号?>(>)、<(<)、&(&)、空格( )image图像显示：<img src="1.jpg" alt="我的男男男男朋友" width="100" height=...
HTML标签（一）【代码】
1、HTML概述 html全称HyperText Mackeup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。2、HTML颜色介绍 颜色表示:纯单词表示：red、green、blue、orange、gray等10进制表示：rgb(255,0,0)16进制表示：#FF0000、#0000FF、#00FF00等3、HTML的规范HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统...
HTML5实现文件上传下载功能实例解析【图】
前言：因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传，而自己对java文件上传这一块未接触过，且对 Http 协议较模糊，故这次采用渐进的方式来学习文件上传的原理与实践。该博客重在实践。 一. Http协议原理简介 HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版...
HTML5-canvas【代码】
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8</head> 9<body>10<canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas>11<img id="scream" src="https://www.runoob.com/try/demo_source/img_the_screa...
html链接路径
html链接的相对路径与绝对路径绝对路径完整的一个路径就是绝对路径，即包含schema://host[:port#]/path/.../[?query-string][#anchor]例：http://news.sina.com.cn/world/相对路径第一个字符为斜杠/, redirect(‘/hello‘) 例：“/hello”, 这种会自动帮你添加你的协议名+域名+端口， 假设你的前一节为http://www.baidu.com:8000/aa， 系统会自动匹配为"http://www.baidu.com:8000/hello"我们实际情况中一般使用这种 第一个...
html 中的列表【代码】
html 中列表可以分为 1. 无序列表(ul--li 的形式) 2. 有序列表(ol li的形式) 3. 定义列表(dl 的形式) 下面来看几种列表的具体内容： 1.无序列表. 无序列表的格式如下： <ul><li> li1</li><li> li1</li><li> li1</li><li> li1</li></ul> 无序列表有一些自带的默认样式，而且这些自带的默认样式在不同的浏览器中显示出来的效果是不一样的。我们一般使用 reset.css 去清楚这...