今日:0
文章:68
今日:0
文章:312
今日:0
文章:8
今日:0
文章:224
今日:0
文章:14
今日:0
文章:32
今日:0
文章:0
今日:0
文章:0
今日:0
文章:23
今日:0
文章:115
今日:0
文章:1
今日:0
文章:4
今日:0
文章:10
今日:0
文章:26
今日:0
文章:10
今日:0
文章:0
今日:0
文章:0
今日:0
文章:0
今日:0
文章:1
今日:0
文章:2
今日:0
文章:5
1039
正则优化一:仅处理位于标签内的元素123456var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 转义处理keyword包含的特殊字符,如 /.var finder = new RegExp(">.*?"++".*?<") // 提取位于标签内的文本,避免误操作 class、id 等 element.innerHTML = element.innerHTML.replace(finder,function(matched){ return matched.replace(text,"<br>"+text+</br>)})// 对提取的标签内文本进行关键字替换以能解决大多数问题,但依旧存在的问题是,只要标签属性存在类似 < 符号,将会打破匹配规则导致正则提取内容错误, HTML5 dataset 可以自定义任意内容,故这些特殊字符是无法避免的。1<div dataset="p>d">替换</div>(推荐教程:html教程)正则优化二:清除可能影响的标签1234567<div id="keyword">keyword</div> =》将闭合标签用变量替换 [replaced1]keyword[replaced2]//闭合标签内 id="keyword" 不会被处理 =》 [replaced1]<b>keyword</b>[replaced2] =》将暂存变量 replaced 替换为原先标签 <div id="keyword"><b>keyword</b></div>问题:如果 [replaced1] 包含 keyword, 那么替换时将发生异常。最重要的,当标签值中包含 <> 符号时,此方法也不能正确的提取标签。总之在经过了N多尝试之后,通过正则都没能有效的处理各种情况。然后换了个思路,不通过字符串的方式,通过节点处理。element.childNodes 可以最有效的清理标签内的干扰信息。[完美解决方案]通过 DOM 节点处理123456<div id="parent"> keyword 1 <span id="child"> keyword 2 </span> </div>通过 parent.childNodes 得到所有子节点。child 节点可以通过 innerText.replce(keyword,result) 的方式替换得到想要的高亮效果,如下: <span id="child"><b>keyword</b> 2</span> (递归处理:当child节点不含子节点时进行replace操作)。但是 keyword 1 是属于文本节点,只能修改文本内容,无法增加 HTML,更无法单独控制其样式。而文本节点也不能转换为普通节点。更多编程相关内容,请关注php中文网编程入门栏目!以上就是html实现高亮关键字的详细内容
992
为什么需要使用<meta>标签?在我们制作的网页中,要是想让它能够让更多的人去访问,最好的方法就是通过搜索引擎来找到你的网址,于是需要你的网页可以有关键词能够让搜索引擎来识别,于是HTML中的<meta>标签就是这个功能,将这个页面的关键信息写入去,让搜索引擎能够去识别,那么接下来就说一下<meta>如何去使用:123456789<head><title>mate</title><meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /><meta name="author" content="Erwin Aligam - styleshout.com" /><meta name="description" content="Site Description Here" /><meta name="keywords" content="keywords, here" /><meta name="robots" content="index, follow, noarchive" /><meta name="googlebot" content="noarchive" /></head>(推荐教程:html入门教程)1、属性的使用这个是一个简单的实例,这个标签是写在<head>中,不会被用户看到,这个是更具自己的需求来看是否要这些功能,标签的属性主要有http-equiv和name。http-equiv就像http的头文件,可以向浏览器发送一些有用的信息,帮助更好得显示自己想要的内容,http-equiv属性的值可以有content-type、expires、refresh等等。name该属性主要用于描述网页。name属性的值可以有:author、description、keywords、generator等等。2、name属性的应用name的使用可以看上面的列子,比如keywords和description,关键词和描述的使用,因为按照搜索引擎的工作原理,搜索引擎会首先排除机器人自动检索页面中的keywords和description,并将其加入自己的数据库,然后根据关键词的密度将网站排序,所以这两个属性很重要注意:keywords的content内容要限制在36个字。description的content内容要限制在76个字。这两个需要配合使用。更多编程相关教程,请关注php中文网编程入门栏目!以上就是html中<meta>标签该如何使用的详细内容
958
html搜索框怎么做使用HTML做搜索框的方法:1、首先新建一个div,id名为box,用来包裹搜索框;2、然后在内部添加一个input标签和一个div标签,一个用来输入文字,一个充当按钮;3、最后使用css为它们设计样式即可。推荐学习:html教程1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style type="text/css"> #box{ width: 380px; margin: 30px auto; font-family: 'Microsoft YaHei'; font-size: 14px; } input{ width: 260px; border: 1px solid #e2e2e2; height: 30px; float: left; background-image: url(images/search.jpg); background-repeat: no-repeat; background-size: 25px; background-position:5px center; padding:0 0 0 40px; } #search{ width: 78px; height: 32px; float: right; background: black; color: white; text-align: center; line-height: 32px; cursor: pointer; } </style></head><body> <div id="box"> <input type="search" name="search" placeholder="请输入关键字"> <div id="search">搜索</div> </div></body></html>效果:更多相关教程,请关注PHP中文网!以上就是html搜索框怎么做的详细内容
855
前台效果:html12345678<div class="container" style="z-index: 999" id="searchDiv"> <div class="keyword-search"> 查找: <input id="key" type="text" style="width: 200px;" placeholder="关键词" /> <a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a> <a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a> </div> </div>相关教程推荐:html教程js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107<script>//搜索功能 var oldKey0 = ""; var index0 = -1;var oldCount0 = 0; var newflag = 0; var currentLength = 0; function wordSearch(flg) { var key = $("#key").val(); //取key值 if (!key) { return; //key为空则退出 } getArray(); focusNext(flg); } function focusNext(flg) { if (newflag == 0) {//如果新搜索,index清零 index0 = 0; } if (!flg) { if (oldCount0 != 0) {//如果还有搜索 if (index0 < oldCount0) {//左边如果没走完,走左边 focusMove(index0); index0++; } else if (index0 == oldCount0) {//都走完了 index0 = 0; focusMove(index0); index0++; } else { index0 = 0;//没确定 focusMove(index0); index0++; } } } else { if (oldCount0 != 0) {//如果还有搜索 if (index0 <= oldCount0 && index0 > 0) {//左边如果没走完,走左边 index0--; focusMove(index0); } else if (index0 == 0) {//都走完了 index0 = oldCount0; index0-- focusMove(index0); } } } } function getArray() { newflag = 1; $(".contrast .result").removeClass("res"); var key = $("#key").val(); //取key值 if (!key) { oldKey0 = ""; return; //key为空则退出 } if (oldKey0 != key || $(".current").length != currentLength) { //重置 index0 = 0; var index = 0; $(".contrast .result").each(function () { $(this).replaceWith($(this).html()); }); pos0 = new Array(); if ($(".contrast-wrap").hasClass("current")) { currentLength = $(".current").length; $(".current .contrast").each(function () { $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换 }); } else { $(".contrast-wrap").addClass('current'); currentLength = $(".current").length; $(".contrast").each(function () { $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换 }); } //$("#key").val(key); oldKey0 = key; //$(".contrast .result").each(function () { // $(this).parents('.contrast-wrap').addClass('current'); // pos0.push($(this).offset().top); //}); // pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top); oldCount0 = $(".contrast .result").length; newflag = 0; } } function focusMove(index0) { $(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current'); $(".contrast .result:eq(" + index0 + ")").addClass("res"); var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop(); var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top; $(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200); if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) { $("html, body").animate({ scrollTop: top - 200 }, 200); } else { $("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200); } } $('#key').change(function () { if ($('#key').val() == "") { index0 = 0; $(".contrast .result").each(function () { $(this).replaceWith($(this).html()); }); oldKey0 = ""; } }); </script>视频教程推荐:html视频教程以上就是如何在html页面中实现查找功能的详细内容
892
(1)减少 HTTP 的请求。(合并资源文件、使用图片精灵);(2)把CSS 放头部,把 JavaScript 放到 body 标签尾部;(3)定义图片的宽和高;(4)定义字符集;(推荐教程:html入门教程)(5)避免空的 src 和 href 属性,html里这样写:1<a href="javascript:;" class="triggerName">Trigger</a>js 里这样定义:123$("#triggerName").click(function(e){ e.preventDefault(); // 取消单击事件的默认动作以阻止链接的跳转// })(6)启用 GZIP 压缩;(7)摈弃 CSS 表达式,用更高效的 CSS 选择器;(8)使用外链的 CSS 和 JavaScript;(9) 对 CSS 和 JavaScript 进行代码压缩;(10)减少重绘;相关视频教程推荐:html视频教程以上就是html如何提高页面的加载速度的详细内容
916
效果如下图所示:a页面点击跳转按钮后在b页面可以获取到对应的值。推荐教程:html教程代码如下:a页面:123456789101112131415161718192021222324252627<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.params.js"></script> <title>a页面</title> <script> $(function(){ name = $("#name").text(); age = $("#age").text(); $("#btn").on("click",function(){ jump1(); }); }); function jump1(){ url = "b.html?name="+name+"&age="+age;//此处拼接内容 window.location.href = url; } </script></head><body> <div id="name">tony</div> <div id="age">23</div> <button id="btn">跳转</button></body></html>将要跳转到的b页面:123456789101112131415161718192021222324<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.params.js"></script> <title>b页面</title> <script> $(function(){ getData1(); }); function getData1(){ var name = $.query.get("name"); var age = $.query.get("age"); $("#name").text(name); $("#age").text(age); } </script></head><body> <div id="name"></div> <div id="age"></div></body></html>相关视频教程推荐:html视频教程以上就是详解html中页面跳转传递参数的问题的详细内容
941
html注释:1<!--注释内容-->使用的位置:(视频教程推荐:html视频教程)1、一般会使用在一些主要节点标签结束的后边,如:12345<div class="wrap"><div class="main">...</div><!--main end--><div><!--wrap end-->2、使用在一些循环的结束的后边,如:12345<ul class="list"> <li>111111</li> <li>222222</li> <li>333333</li></ul><!--list loop-->这一切都是为了程序在嵌套的时候更加方便、明了。推荐教程:html教程以上就是html注释的规范用法总结的详细内容
886
设置超链接的样式示例:a:link 超链接被点前状态a:visited 超链接点击后状态a:hover 悬停在超链接时a:active 点击超链接时在定义这些状态时,有一个顺序l v h a。(推荐教程:html教程)代码区:1234567891011121314151617181920212223242526272829<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> a:link { color:#000; text-decoration:none;} a:visited { color:#000; text-decoration:none;} a:hover { color:#F00; text-decoration:underline;} a:active { color:#F90; text-decoration:underline;} </style> <link href="Untitled-1.css" rel="stylesheet" type="text/css" /> </head> <body> <a href="http://www.baidu.com/">百度一下</a> </body></html>运行显示:鼠标箭头未放到“百度一下”,其显示黑色——放上时,其显示红色——点击“百度一下”链接时,其显示橙色——点击后,其显示黑色。相关视频教程推荐:html视频教程以上就是html中如何设置超链接的样式的详细内容
960
Video标签的使用Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性, 以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外,还可以包含当指定的视频都不能播放时,返回的内容。(1) src属性和poster属性你能想象src属性是用来干啥的。跟<img>标签的一样,这个属性用于指定视频的地址。而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。12<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>(2) preload属性这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。12<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。Auto:全部预加载。(推荐教程:html入门教程)(3) autoplay属性又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。12<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>注意,HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于他的名字 (此处,自动播放为<video autoplay />或者<video autoplay=”autoplay” />);而在标签中不使用此属性表示false(此处不进行自动播放为<video />)。(4) loop属性12<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>一目了然,loop属性用于指定视频是否循环播放,同样是一个布尔属性。(5) controls属性12<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。控制栏须包括播放暂停控制,播放进度控制,音量控制等等。每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题,Firefox和Safari的Video标签不正常,所以这两个只能在网上找截图了。(6) width属性和height属性属于标签的通用属性了,这个不用多说。(7) source标签1234<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用。浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持,视频不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义,不能单独出现。此标签包含src、type、media三个属性。src属性:用于指定媒体的地址,和video标签的一样。Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。你想到<style>标签的media属性了么?一样一样一样的。(8) 一个完整的例子1234<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>这段代码在页面中定义了一个视频,此视频的预览图为poster的属性值,显示浏览器的默认媒体控制栏,预加载视频的元数据,循环播放,宽度为900像素,高度为240像素。第一选择视频地址为第一个source标签的src属性值,视频类别为Ogg视频,视频编码译码器为Theora,音频编码译码器为Vorbis,播放媒 介为显示器;第二选择视频地址不再累述。如果你还要兼容IE的话,可以在最后一个source标签后再加上Flash播放器的标签集,或者使用一点 JavaScript代码。相关视频教程推荐:html视频教程以上就是如何在html页面中插入视频的详细内容
955
HTML中注释标记的基本语法是“<!--注释内容-->”。html注释代码开始是:以“<!-- ”小于符号+叹号+两个小横杠(减号),结束“-->”两个小横杠(减号)+大于符号。示例:1234567891011<!DOCTYPE html><html> <body> <!--这是一段注释。注释不会在浏览器中显示。--> <p>这是一段普通的段落。</p> </body></html>效果如下:推荐教程:html入门教程以上就是HTML中注释标记的基本语法是什么的详细内容
1019
HTML怎么实现下拉菜单1、新建HTML文件为“select.html”;2、使用VSCode编辑器将其打开;3、在HTML的body标签里写入select标签;123<select> </select>4、向select标签里添加选项标签option;123456<select> <option value="1">选项1</option> <option value="1">选项2</option> <option value="1">选项3</option> <option value="1">选项4</option></select>5、使用浏览器打开即可。推荐教程:《HTML教程》以上就是HTML怎么实现下拉菜单的详细内容
970
自学 HTML5 要多久前端除了HTML5之外还有JavaScript和Css,如果只学习HTML5的话半个月到一个月之间就能学会,但是仅仅HTML5是不够的,还需要学习JavaScript和CSS这些,基础学习一个月也足够了。JavaScriptJavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript 的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。视频教程推荐《JavaScript极速入门_玉女心经系列》《李炎恢Javascript视频教程》《极客学院Node.js开发视频教程》《前端JS开发27个经典实战视频教程》推荐教程:《JS教程》以上就是自学 HTML5 要多久的详细内容
1026
H5可以导出成视频吗?H5不可以导出成视频,用户想要将H5转换为视频格式是可以通过录屏来实现的,用户下载录屏软件,将H5录制下来,H5是指第5代HTML,也指用H5语言制作的一切数字产品。HTML5HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。推荐教程:《HTML教程》以上就是H5可以导出成视频吗?的详细内容
1091
HTML 和 HTML5 的区别是什么?1、HTML没有体现结构语义化的标签,而HTML5有许多具有语义化的标签;HTML:没有体现结构语义化的标签,我们通常都是这样来命名的1<div id="header"></div>这样表示网站的头部。HTML5:在语义上却有很大的优势。提供了一些新的html5标签,比如:1<header> 、<nav>、<article>、<aside>、<footer>2、HTML是一种纯文本类型的语言,而HTML5可以进行文档声明,有利于开发者快速的阅读和开发。HTML:123<!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">HTML5:1<!DOCTYPE html>由这两者对比可见:在文档声明上,html有很长的一段代码,并且很难记住这段代码,想必很多人都是靠工具直接生成的吧?而html5却是不同,只有简简单单的声明,这也方便人们的记忆,更加精简。推荐教程:《HTML教程》以上就是HTML 和 HTML5 的区别是什么?的详细内容
1071
Frameset 标签的用法?首先创建4个页面,分别为a、b、c和e;然后在a中添加frameset,并将属性cols设置为“30%,30%,30%”;接着在frameset添加4个frame,并将src分别执行b、c和e;最后访问a即可。定义和用法frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。推荐教程:《PHP教程》以上就是Frameset 标签的用法?的详细内容
1189
HTML文件怎么转换成PDF文件首先下载PDF文件编辑器,如迅捷PDF编辑器;然后将把HTML文件使用PDF编辑器进行打开;接着对HTML文件进行修改;最后将文件另存为PDF文件格式即可完成转换。推荐教程:《HTML教程》以上就是HTML文件怎么转换成PDF文件的详细内容
948
html新手入门必学知识点HTML初识1.HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的一种语言2.不是编程语言,而是一种标记语言3.标记语言是一套标记标签(markup tag)html作用简单理解:网页是由网页元素组成,这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户。超文本理解:1.它可以加入图片、声音、动画、多媒体等内容(超越文本限制)2.还可以从一个文件转到另一个文件,与世界各地的主机的文件连接(超级链接文本)HTML元素标签分类:常规元素(双标签)1<标签名> 内容 </标签名>比如:1<body> 我是谁?</body>①<标签名>表示该标签的作用开始,一般称作开始标签(start tag), </标签名>表示该标签的结束,一般称作结束标签(end tag)②和开始标签相比,结束标签只是在前面加了一个关闭符"/".空元素(单标签)1<标签名/> 比如 <br/>**·**空元素用单标签来表示,简单来说就是里面不需要包含内容,只有一个开始标签不需要关闭html骨架标签1234567<html> //HTML标签,根标签 <head> //文档的头部,head标签中必须要设置的标签是title <title> </title> //文档标题 </head> <body> //文档主体 </body></html>HTML标签关系:1.嵌套关系:123<head><title> </title></head>2.并列关系12<head></head><body></body>感谢大家的阅读,希望大家收益多多。本文转自:https://blog.csdn.net/ClimberSky/article/details/106171337推荐教程: 《HTML教程》以上就是html新手入门必学知识点的详细内容
1108
html中字体如何实现加粗(方法介绍)字体的修饰美化在一个网页的页面也是很重要的,美化的好的网页会给人带来直观的视觉冲击,今天我就来讲述以下在html中字体的加粗是怎么实现的,大家一起来看看吧。字体加粗属性123456<style type="text/css"> .类名{ font-weight: 700;//加粗 font-weight: 400;//正常 }</style>字体加粗标签1234567<b> <p>我是字体加粗b标签</p></b> <strong> <p>我是字体加粗strong标签</p></strong>感谢大家的阅读,希望大家收益多多。本文转自:https://blog.csdn.net/lovexiuwei/article/details/82668448推荐教程: 《HTML教程》以上就是html中字体如何实现加粗(方法介绍)的详细内容
1146
html简单日历的实现(附源码)web页面中很多地方都会用到日历显示,选择等,本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多,可以切换上个月、下个月。也可以根据实际情况进行扩展。htmlhtml部分比较简单,声明一个div,具体的html用javascript生成。整体内容大概是这样的:123456789101112<!doctype html><html><head> <meta charset='utf-8'> <link rel='stylesheet' href='外部的css文件路径' /> <title>demo</title></head><body> <div class='calendar' id='calendar'></div> <script type='text/javascript' src='外部的javascript文件路径'></script></body></html>css12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576/* 整体设置 */*{margin:0px;padding:0px;}/** * 设置日历的大小 */.calendar{ width: 240px; height: 400px; display: block;}/** * 设置日历顶部盒子 */.calendar .calendar-title-box{ position: relative; width: 100%; height: 36px; line-height: 36px; text-align:center; border-bottom: 1px solid #ddd;}/** * 设置上个月的按钮图标 */.calendar .prev-month { position: absolute; top: 12px; left: 0px; display: inline-block; width: 0px; height: 0px; border-left: 0px; border-top: 6px solid transparent; border-right: 8px solid #999; border-bottom: 6px solid transparent; cursor: pointer;}/** * 设置下个月的按钮图标 */.calendar .next-month { position: absolute; top: 12px; right: 0px; display: inline-block; width: 0px; height: 0px; border-right: 0px; border-top: 6px solid transparent; border-left: 8px solid #999; border-bottom: 6px solid transparent; cursor: pointer;}/* 设置日历表格样式 */.calendar-table{ width: 100%; border-collapse: collapse; text-align:center;}/* 表格行高 */.calendar-table tr{ height: 30px; line-height: 30px;}/* 当前天 颜色特殊显示 */.currentDay { color: red;}/* 本月 文字颜色 */.currentMonth { color: #999;}/* 其他月颜色 */.otherMonth{ color: #ede;}样式设置基本没什么课说的,一些简单的设置。比如特殊的是表示“上个月”、“下个月”的图标,采用的绝对定位、利用css中的border属性设置样式。javascript Date对象开始正式的js代码之前,需要先了解js中的Date对象,通过Date对象,可以获取到年月日时分秒以及时间戳等信息,具体参考: http://www.w3school.com.cn/jsref/jsref_obj_date.aspvar d1 = new Date(); // 获取当前系统时间 我现在的时间是 2016年4月25日 星期一d1.getFullYear(); // 获取年信息, 2016d1.getMonth(); // 获取月信息(从0开始 范围:0-11) 3d1.getDate(); // 获取天信息 此处结果:25d1.getDay(); // 获取星期信息 (0-6) 此处结果: 1也可以在初始化的时候直接设置年月日信息# 设置 2016年3月15日var d2 = new Date(2016, 2, 15); // 月是从0开始计数, 需要减一d2.getFullYear(); // 2016d2.getMonth(); // 2d2.getDate(); // 15d2.toLocaleDateString(); // "2016/3/15" 证明设置正确日历中会涉及到每个月多少天之类的问题,在js中很简单,如果设置年月日的时候,超出当月,js会自动算成下个月的,例如4月只有30天,如果设置成31 日,获得的Date类型中自动会算成5月1日;如果设置成5月0日,js会处理成4月30日,那么5月-1日也就是4月29日123456789101112var d3 = new Date(2016, 3, 30);d3.toLocaleDateString(); // "2016/4/30"var d4 = new Date(2016, 3, 31);d4.toLocaleDateString(); // "2016/5/1"var d5 = new Date(2016, 3, 33);d5.toLocaleDateString(); // "2016/5/3"var d6 = new Date(2016, 4, 1);d6.toLocaleDateString(); // "2016/5/1"var d7 = new Date(2016, 4, 0);d7.toLocaleDateString(); // "2016/4/30"var d8 = new Date(2016, 4, -3);d8.toLocaleDateString(); // "2016/4/27"javascript了解了js中Date对象的基本用法,接下来就是代码实现部分了,整体思路是这样的:定义一个全局的dateObj变量,用来记录表格中需要显示的 年月信息。 标题中的内容根据dateObj中取,表格中的日期则中dateObj中取到年月对应的1号的所有信息,即可确定1号在表格第一行的位置,以此倒推上个月 最后几天的数据、正推本月和下个月的数据。具体步骤:1.声明dateObj变量,并赋初值为当前系统时间2.给calendar div中渲染html元素3.通过dateObj获取当月1号的信息,并以此遍历出表格中所有日期4.给上一月、下一月图标绑定事件123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157(function(){ /* * 用于记录日期,显示的时候,根据dateObj中的日期的年月显示 */ var dateObj = (function(){ var _date = new Date(); // 默认为当前系统时间 return { getDate : function(){ return _date; }, setDate : function(date) { _date = date; } }; })(); // 设置calendar div中的html部分 renderHtml(); // 表格中显示日期 showCalendarData(); // 绑定事件 bindEvent(); /** * 渲染html结构 */ function renderHtml() { var calendar = document.getElementById("calendar"); var titleBox = document.createElement("div"); // 标题盒子 设置上一月 下一月 标题 var bodyBox = document.createElement("div"); // 表格区 显示数据 // 设置标题盒子中的html titleBox.className = 'calendar-title-box'; titleBox.innerHTML = "<span class='prev-month' id='prevMonth'></span>" + "<span class='calendar-title' id='calendarTitle'></span>" + "<span id='nextMonth' class='next-month'></span>"; calendar.appendChild(titleBox); // 添加到calendar div中 // 设置表格区的html结构 bodyBox.className = 'calendar-body-box'; var _headHtml = "<tr>" + "<th>日</th>" + "<th>一</th>" + "<th>二</th>" + "<th>三</th>" + "<th>四</th>" + "<th>五</th>" + "<th>六</th>" + "</tr>"; var _bodyHtml = ""; // 一个月最多31天,所以一个月最多占6行表格 for(var i = 0; i < 6; i++) { _bodyHtml += "<tr>" + "<td></td>" + "<td></td>" + "<td></td>" + "<td></td>" + "<td></td>" + "<td></td>" + "<td></td>" + "</tr>"; } bodyBox.innerHTML = "<table id='calendarTable' class='calendar-table'>" + _headHtml + _bodyHtml + "</table>"; // 添加到calendar div中 calendar.appendChild(bodyBox); } /** * 表格中显示数据,并设置类名 */ function showCalendarData() { var _year = dateObj.getDate().getFullYear(); var _month = dateObj.getDate().getMonth() + 1; var _dateStr = getDateStr(dateObj.getDate()); // 设置顶部标题栏中的 年、月信息 var calendarTitle = document.getElementById("calendarTitle"); var titleStr = _dateStr.substr(0, 4) + "年" + _dateStr.substr(4,2) + "月"; calendarTitle.innerText = titleStr; // 设置表格中的日期数据 var _table = document.getElementById("calendarTable"); var _tds = _table.getElementsByTagName("td"); var _firstDay = new Date(_year, _month - 1, 1); // 当前月第一天 for(var i = 0; i < _tds.length; i++) { var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay()); var _thisDayStr = getDateStr(_thisDay); _tds[i].innerText = _thisDay.getDate(); //_tds[i].data = _thisDayStr; _tds[i].setAttribute('data', _thisDayStr); if(_thisDayStr == getDateStr(new Date())) { // 当前天 _tds[i].className = 'currentDay'; }else if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) { _tds[i].className = 'currentMonth'; // 当前月 }else { // 其他月 _tds[i].className = 'otherMonth'; } } } /** * 绑定上个月下个月事件 */ function bindEvent() { var prevMonth = document.getElementById("prevMonth"); var nextMonth = document.getElementById("nextMonth"); addEvent(prevMonth, 'click', toPrevMonth); addEvent(nextMonth, 'click', toNextMonth); } /** * 绑定事件 */ function addEvent(dom, eType, func) { if(dom.addEventListener) { // DOM 2.0 dom.addEventListener(eType, function(e){ func(e); }); } else if(dom.attachEvent){ // IE5+ dom.attachEvent('on' + eType, function(e){ func(e); }); } else { // DOM 0 dom['on' + eType] = function(e) { func(e); } } } /** * 点击上个月图标触发 */ function toPrevMonth() { var date = dateObj.getDate(); dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1)); showCalendarData(); } /** * 点击下个月图标触发 */ function toNextMonth() { var date = dateObj.getDate(); dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1)); showCalendarData(); } /** * 日期转化为字符串, 4位年+2位月+2位日 */ function getDateStr(date) { var _year = date.getFullYear(); var _month = date.getMonth() + 1; // 月从0开始计数 var _d = date.getDate(); _month = (_month > 9) ? ("" + _month) : ("0" + _month); _d = (_d > 9) ? ("" + _d) : ("0" + _d); return _year + _month + _d; }})();本例中并没有添加点击表格中日期时候的事件,可以在bindEvent函数中添加如下代码获取所点击日期的信息 var table = document.getElementById("calendarTable");var tds = table.getElementsByTagName('td');for(var i = 0; i < tds.length; i++) { addEvent(tds[i], 'click', function(e){ console.log(e.target.getAttribute('data')); });}感谢大家的阅读,希望大家收益多多。本文转自:https://blog.csdn.net/qq_39198420/article/details/78402873推荐教程: 《HTML教程》以上就是html简单日历的实现(附源码)的详细内容
1104
值得一看的html5实现简单老虎机的教程本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5。使用开源引擎:lufylegend.js,lufylegend.js引擎包内包含这个demo,请直接下载lufylegend.js引擎,查看引擎包内源码lufylegend.js引擎下载地址http://lufylegend.com/lufylegend游戏截图游戏测试地址:http://fsanguo.comoj.com/html5/slot/index.html游戏结构index.htmljs文件夹|---Main.js |---Reel.jsimages文件夹|--图片游戏代码:Main.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144init(50,"mylegend",600,600,main); var loadingLayer;var backLayer;var stopLayer;var startLayer;var loadIndex = 0;var imglist = {};var btnup,btndown,btnleft,btnright;var imgData = new Array(); var mapImgList = new Array();var mapmoveflag = "";var MOVE_STEP = 10; var combination = new Array([1,1,5], [1,2,4], [1,5,1], [2,1,4], [2,3,3], [2,4,1], [2,5,4], [3,1,2], [3,4,3], [3,5,5], [4,1,2], [4,2,3], [4,5,1], [4,5,5], [5,1,1], [5,2,4], [5,3,2], [5,5,1], [1,1,1], [1,1,1]);var reels = new Array();var kakes = new Array();//停止ボタン参照用配列var stopBtn = new Array();var start;var win;function main(){imgData.push({name:"stop_up",path:"./images/slot_stop_up.png"});imgData.push({name:"stop_over",path:"./images/slot_stop_over.png"});imgData.push({name:"start",path:"./images/slot_start.jpg"});imgData.push({name:"kake",path:"./images/slot_kake.png"});imgData.push({name:"slot_back",path:"./images/slot_back.jpg"});imgData.push({name:"slot_ok",path:"./images/slot_ok.png"});imgData.push({name:"item1",path:"./images/1.png"});imgData.push({name:"item2",path:"./images/2.png"});imgData.push({name:"item3",path:"./images/3.png"});imgData.push({name:"item4",path:"./images/4.png"});imgData.push({name:"item5",path:"./images/5.png"});imgData.push({name:"item6",path:"./images/6.png"});loadingLayer = new LSprite();loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");addChild(loadingLayer);loadImage();}function loadImage(){if(loadIndex >= imgData.length){removeChild(loadingLayer);legendLoadOver();gameInit();return;}loader = new LLoader();loader.addEventListener(LEvent.COMPLETE,loadComplete);loader.load(imgData[loadIndex].path,"bitmapData");}function loadComplete(event){loadingLayer.graphics.clear();loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");imglist[imgData[loadIndex].name] = loader.content;loadIndex++;loadImage();}function gameInit(event){var i,j,bitmap,bitmapdata,childmap;backLayer = new LSprite();addChild(backLayer); bitmapdata = new LBitmapData(imglist["slot_back"]);bitmap = new LBitmap(bitmapdata);backLayer.addChild(bitmap);stopLayer = new LSprite();addChild(stopLayer);for(i=0;i<3;i++){var reel = new Reel(combination,i);reel.x = 150 * i + 90;reel.y = 225;reels.push(reel);addChild(reel);var kake = new LBitmap(new LBitmapData(imglist["kake"]));kake.x = 150 * i + 90;kake.y = 225;kakes.push(kake);addChild(kake);var stop = new LButton(new LBitmap(new LBitmapData(imglist["stop_up"])),new LBitmap(new LBitmapData(imglist["stop_over"])));stop.x = 150 * i + 110;stop.y = 490;stop.index = i;stopBtn.push(stop);stop.visible = false;stop.addEventListener(LMouseEvent.MOUSE_UP, stopevent);addChild(stop);} startLayer = new LSprite();addChild(startLayer);start = new LButton(new LBitmap(new LBitmapData(imglist["start"])),new LBitmap(new LBitmapData(imglist["start"])));start.x = 55;start.y = 450;startLayer.addChild(start);start.addEventListener(LMouseEvent.MOUSE_UP, onmouseup);win = new LButton(new LBitmap(new LBitmapData(imglist["slot_ok"])),new LBitmap(new LBitmapData(imglist["slot_ok"])));startLayer.addChild(win);win.visible = false;win.addEventListener(LMouseEvent.MOUSE_UP, winclick);backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);}function onframe(){var i;for(i=0;i<3;i++){reels[i].onframe();}}function stopevent(event,currentTarget){reels[currentTarget.index].stopFlag = true;}function onmouseup(event){var i;var stopNum = Math.floor(Math.random()*(combination.length/3));start.visible = false;for(i=0;i<3;i++){stopBtn[i].visible = true;reels[i].startReel = true;reels[i].stopFlag = false;reels[i].stopNum = stopNum;}}function winclick(){win.visible = false;start.visible = true;}function checkWin(){var i;var allstop = 0;for(i=0;i<3;i++){if(!reels[i].startReel)allstop++;}if(allstop >= 3){for(i=0;i<3;i++){stopBtn[i].visible = false;}if(reels[0].stopNum >= 19){win.visible = true;}else{start.visible = true;}}}Reel.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127function Reel(combination,index){base(this,LSprite,[]);var self = this; //-------------------------------------------//実行側から操作可能なプロパティの初期設定//-------------------------------------------self.maxSpeed = 70;self.minSpeed = 10;self.currentNum = 1;self.stopNum = 0;self.maxNum = 6;self.speedUpStep = 2;self.speedDownStep = 2;self.combination = combination;self.stopFlag = true;self.currentSpeed = 0;self.startReel = false;self.index = index;//-------------------------------------------//準備//-------------------------------------------self.reels = [];self.indexs = [0,0,0,0];self.reels.push(new LBitmap(self.getReel()));self.reels.push(new LBitmap(self.getReel()));self.reels.push(new LBitmap(self.getReel()));self.reels.push(new LBitmap(self.reels[0].bitmapData));var i,sy;self.reels[0].height = 60;self.reels[0].bitmapData.height = self.reels[0].height;self.reels[0].bitmapData.setCoordinate(0,80-self.reels[0].height);self.reels[2].height = 60;self.reels[2].bitmapData.height = self.reels[2].height;self.reels[3].visible = false;sy = 0;for(i=0;i<self.reels.length;i++){self.reels[i].y = sy;sy += self.reels[i].height;self.addChild(self.reels[i]);}//self.startReel = true;//self.stopFlag = false;}Reel.prototype.onframe = function (){var self = this; if(self.startReel)self.wheel();};Reel.prototype.getReel = function (){var self = this;if(self.currentNum > self.maxNum)self.currentNum = 1;self.indexs[0] = self.currentNum; self.indexs.pop();self.indexs.unshift(self.currentNum);var nextReel = new LBitmapData(imglist["item"+self.currentNum++]);return nextReel;};Reel.prototype.wheel = function (){var self = this;//回転速度の調節if (self.stopFlag) {//スピードダウンif (self.currentSpeed > self.minSpeed) {self.currentSpeed -= self.speedDownStep;} else {self.currentSpeed = self.minSpeed;}} else {//スピードアップif (self.currentSpeed < self.maxSpeed) {self.currentSpeed += self.speedUpStep;} else {self.currentSpeed = self.maxSpeed;}}if(self.stopFlag && self.currentSpeed <= self.minSpeed && self.indexs[1] == self.combination[self.stopNum][self.index] && self.reels[1].y + self.currentSpeed > 60){self.currentSpeed = 60 - self.reels[1].y; self.startReel = false;}self.setY();if(!self.startReel)checkWin();};Reel.prototype.setY = function(){var self = this;self.reels[1].y += self.currentSpeed;if(self.reels[1].y + self.reels[1].height > 200){self.reels[1].height = 200 - self.reels[1].y;self.reels[1].bitmapData.height = self.reels[1].height;}if(self.reels[1].y > 80){self.reels[0].height = 80;self.reels[0].y = self.reels[1].y - 80;}else{self.reels[0].height = self.reels[1].y;self.reels[0].y = 0;}self.reels[0].bitmapData.height = self.reels[0].height;self.reels[0].bitmapData.setCoordinate(0,80-self.reels[0].height);self.reels[2].y = self.reels[1].y + self.reels[1].height;if(self.reels[2].y > 200){self.reels[2].visible = false;}else if(self.reels[2].y + 80 > 200){self.reels[2].height = 200 - self.reels[2].y;self.reels[2].bitmapData.height = self.reels[2].height;}else{self.reels[3].y = self.reels[2].y + self.reels[2].height;if(self.reels[3].y < 200){self.reels[3].height = 200 - self.reels[3].y;self.reels[3].bitmapData.height = self.reels[3].height;}}if(self.reels[0].y > 0){var child = self.reels.pop();child.bitmapData = self.getReel();child.visible = true;self.reels.unshift(child);child.y = 0;child.height = self.reels[1].y;child.bitmapData.height = child.height;child.bitmapData.setCoordinate(0,80-child.height);}if(self.reels[3].y >= 200){self.reels[3].visible = false;}};index.html123456789101112131415<!DOCTYPE html><html><head><meta charset="UTF-8"><title>slot</title><meta name="viewport" content="width=480,initial-scale=0.5" /><script type="text/javascript" src="../legend/legend.js"></script> <script type="text/javascript" src="./js/Reel.js"></script> <script type="text/javascript" src="./js/Main.js"></script> </head><body><div id="mylegend">loading……</div> </body></html>感谢大家的阅读,希望大家收益多多。本文转自:https://blog.csdn.net/lufy_Legend/article/details/7021965推荐教程: 《HTML教程》以上就是值得一看的html5实现简单老虎机的教程(游戏开发)的详细内容