html代码 | 易学教程

事件

阅读更多关于事件

3 种定义事件的方式 On 事件名称：优点：简单方便缺点：只能一个事件调用 1 个函数。只有冒泡 h1.onclick = function(){ h1.style.backgroundColor = "deeppink" } AddEventlistener: 优点：同一事件可以调用多个函数，这个模式下，可以设置事件是捕获还是冒泡，默认是冒泡。 h1.addEventListener(事件的名称,事件调用起的函数， true/false( 捕获 / 冒泡 ) ) 事件对象每一个事件调用的执行函数，都会默认传入一个事件对象，这个对象会包含当次事件的相关信息。冒泡事件事件由最里面一层一层向上触发，直到 HTML 元素，那么这种事件模式就是冒泡事件。一般情况下就用冒泡。捕获事件由 HTML 开始一层一层向下出发，直到最小的子元素，那么这种事件模式就是捕获点击事件、单击事件、双击事件鼠标事件：鼠标移入、鼠标移出、鼠标悬浮按键事件：按键按下、按键弹起、按键press 触屏事件 touch 移动端的事件，跟点击事件不一样的地方在于，可以多点触控。案例代码； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1{ width:

2014年最新前端开发面试题

阅读更多关于 2014年最新前端开发面试题

PS：在其基础上完善了一些答案，增加一些问题欢迎fork wj：）目录前言 HTML 部分 CSS 部分 JavaScript 部分其他问题优质网站推荐前言本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！面试有几点需注意：(来源程劭非老师 github:@wintercn) 面试题目：根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。题目类型：技术视野、项目细节、理论知识题，算法题，开放性题，案例题。进行追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。前端开发面试知识点大纲： HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript：数据类型、面向对象

VS Code创建 JavaScript 运行环境

阅读更多关于 VS Code创建 JavaScript 运行环境

由于 VS Code 天然支持 JS, 所以上手很简单。一些插件 coder runner: 本地运行各种代码 color Highlight: 高亮 copy md as HTML: 将 md 转化为 html ES7/ES6: EcmaScript 语法纠错调试 JS 写好代码后 F5 进入调试，可以看到执行栈/任务队列的信息。来源： https://www.cnblogs.com/Zbhoter/p/12580488.html

js实现HTML标题栏中新消息提示效果

阅读更多关于 js实现HTML标题栏中新消息提示效果

js页面新消息提示多加了一个变量isusing，默认值为false，判断是否是newMessageRemind.show()是否已运行，如果运行，不提示，否则提示。点击document时取消提示。 <!DOCTYPE html> <html> <head> <title>js页面新消息提示</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <input id="test" type="button" value="确定" /> <script> var isusing = false; var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示 show:function(){ var temps = newMessageRemind._title.replace("【　　　】", "").replace("【新消息】", ""); newMessageRemind._timer = setTimeout(function() { newMessageRemind.show(); newMessageRemind._step++; if

前端笔试题解答

阅读更多关于前端笔试题解答

　　前段时间离职了，就花了些时间准备笔试和面试。在网上和博客园里都看到这些笔试题，在这里我来做一个解答（少数题目）。有些是参考网上资料，有些是个人理解，有错误或不恰当的地方往指正，谢谢。一、 <!DOCTYPE> 标签的定义与用法。答：定义： <!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML版本。（假如文档中的标记不遵循doctype声明所指定的DTD，这个文档除了不能通过代码校验之外，还有可能无法在浏览器中正确显示。）用法： a.如果需要干净的标记，免于表现层的混乱，用XHTML Strict DTD类型。 b.Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素. 如果用户使用了不支持层叠样式表（CSS）的浏览器以至于你不得不使用 HTML 的呈现特性时，用Transitional DTD 类型。 c.Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD。二、块级元素和行内元素都有哪些? 答：块级元素：div,p,h1-h6,ul,ol,dl,form

accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习

阅读更多关于 accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习

JavaScript数据类型，对象，构造函数，原型对象，初识原型链，对象继承一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥combination组合⑦inheritance继承二.预习部分 1.简述创建对象的两种方法，以及两者的区别 new 和字面量赋值前者要用点.添加属性和方法后者直接调用 2.简述使用构造函数创建实例的步骤 ①创建一个新对象 ②将构造函数的作用域赋值给新对象 ③执行构造函数代码块 ④返回新对象 3.简述原型链在继承中的作用它是实现继承的主要方法三.上机部分 1.创建person对象 <!DOCTYPE html> <html lang=" en"> <head> <meta charset=" UTF-8"> <title>创建person对象 </title> </head> <body> <div id=" aa"> </div> <script> var createTi=document.createElement("p"); var person=new Object(); person.name="郎晓明"; person.age="38"; person.job="中国内地男演员、歌手"; person.address="中国北京海淀区"; person

html 文本换行 \\n 不换行空格无效

阅读更多关于 html 文本换行 \\n 不换行空格无效

文本中直接用 \n ，无法换行，因为 html 不识别 \n，如果只是单纯的用 replace 把 \n 换成 <br/>，只能变成普通的字符串，也还是无法换行。解决方法有这么几种： 1. 用 innerHTML = " ... " 或者 v-html 来把 <br/> 识别为 html node 2. 在标签上套一个 <pre></pre> 3. 设置 css 　　 // 合并空白符序列，但是保留换行符。 white-space: pre-line; 同理，针对不能识别多个空格的文本，也可以用以下代码 <div style="white-space:pre">AA BB<div> 来源： https://www.cnblogs.com/_error/p/9989381.html

--HTML标签1

阅读更多关于 --HTML标签1

文字标签：　　 <h>标签标题，分为<h1>-<h6>(6级) <b> 加粗 <u> 下滑线 <s>或<strike> 删除线 <i> 斜体 <sup> <sub> 上标下标 <strong> 加粗 <em> 粗体 <big> 加大一号（可嵌套）<big><big>(加大二号) <small> 减小一号（可嵌套）<small><small> <code> 表示为代码段 <br> 或<br/> 换行 <p> 段落 <ruby><rt> 添加注音的（rt在ruby里面） <pare> 与格式化文本 <font> 字体 face=“字体” color size=“字号”（1-7号） <ul><li>有序列表： <ul>无序列表 <li> 列表中的项属性：type= " " disc ----(实心小圆点) square----（实心正方形） circle----(实心小圆点) <ol><li>无序列表：　　　　属性：type =" " 用于排序的5个值：数字排序 1 字母排序 a A 罗马数字排序 i I 　　　　reversed：没有值，出现降序，不出现升序　　　　start：设置第一项显示的数字 <dl><dt><dd>自定义列表　　　（dt）definition title （dd）definition description <dl>自定义列表 <dt>项

记录一下html基础代码

阅读更多关于记录一下html基础代码

align 例子：align=“left” left:左对其 right:右对其 center:居中 justify:伸展 &nbsp 代表空格 <pre> 能自定义内容格式 <hr>水平线 color:颜色 <i> 倾斜 <em> 倾斜 <b>加粗 <strong>加粗 <sub>下标 <sup>上标 <ins> 下划线 <del> 删除线 width:设置宽度 color：设置颜色 ========================================= 无序列表：<ul> <li></li> </ul> type 属性：加圆圈有序列表： <ol> <li></li> </ol> 自定义列表： <dl> <dt></dt> <dd></dd> </dl> =========================================== 插入图片：<img src="" /> 插入链接：<a href="">内容</a> =============================================== 表格<table></table> 行：<tr></tr> 单元格：<td></td> 表格标题<th></th>加粗效果设置表格外边框宽度：border="" 设置表格宽度：width="" 设置表格内间隙：cellpadding="1"

css布局模型

阅读更多关于 css布局模型

---恢复内容开始--- 在清楚了CSS盒模型的基本概念，盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是CSS最基本，最核心的概念。但布局模型是建立在盒型基础之上，又不同于我们常说的CSS布局样式或CSS布模板。如果说布局模型是本，那么CSS布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer、Float。在网页中，元素有三种布局模型： 1，流动模型（Flow） 2，浮动模型（Float） 3，层模型（Layer）一、流动模型流动是默认的网页布局模式。也就是说见面在默认状态下的HTML网页元素都是根据流动模型分布网页内容的。流动布局模型具有2个比较典型的特征： 1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。 2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示. 二、浮动模型在流动模型中，块状元素是自上而下的，那么有什么方法可以让块状元素并排呢，这就需要使用CSS样式。如下代码： <html> <head><style> div{ width:200px; height:200px; border:1px red solid; float:left; }</style> </head> <body> <div><p>123</p></div> </body>

订阅 html代码